/* Malerbetrieb Mike Hoffmann: Kundenseite auf Basis Closing-Entwurf (Look farbwerk), hell nach Onboarding 26.10.2026 */
:root{ color-scheme:light only; --gray:#F3F4F6; }
html{ overflow-x:clip; }

/* ---------- Header: transparent über der Hero, danach weiß mit dunklem Logo ---------- */
.hdr-logo{ position:relative; display:flex; align-items:center; }
.hdr-logo img{ display:block; transition:opacity .3s ease; }
.hdr-logo .logo-d{ position:absolute; left:0; top:50%; translate:0 -50%; opacity:0; }
.hdr.is-solid,.hdr.is-open{ background:rgba(255,255,255,.97); box-shadow:0 1px 0 rgba(28,29,36,.08); }
.hdr.is-solid .logo-l,.hdr.is-open .logo-l{ opacity:0; }
.hdr.is-solid .logo-d,.hdr.is-open .logo-d{ opacity:1; }
.hdr.is-solid .hdr-nav a,.hdr.is-open .hdr-nav a{ color:var(--ink); text-shadow:none; }
.hdr.is-solid .hdr-nav a::after{ background:var(--accent); }
.hdr.is-solid .hdr-burger span,.hdr.is-open .hdr-burger span{ background:var(--ink); }
.hdr.is-solid .hdr-burger,.hdr.is-open .hdr-burger{ box-shadow:inset 0 0 0 1.5px #D3D6DC; }
.mnav{ background:#fff; border-bottom:1px solid rgba(28,29,36,.08); }
.mnav a:not(.btn){ color:var(--ink); border-bottom-color:rgba(28,29,36,.1); }
.mnav a:not(.btn) .ic{ color:var(--accent); }

/* ---------- Headlines: ein Keyword kursiv in Markenrot ---------- */
.h2 em{ font-family:'Montserrat',Georgia,serif; font-style:italic; font-weight:400; font-size:1.12em; line-height:.9; letter-spacing:-.005em; color:var(--accent); }
.cta .h2 em{ color:#fff; }

/* ---------- Anfrage hell ---------- */
.inquiry .inq-steps li{ background:#fff; box-shadow:inset 0 0 0 1px rgba(28,29,36,.1); }
.inquiry.sec--gray .inq-steps li{ background:#fff; }
.inquiry.sec--white .inq-steps li{ background:var(--gray); box-shadow:none; }
.inquiry .inq-no{ box-shadow:inset 0 0 0 2px #C9CDD4; }
.inquiry .inq-t b{ color:var(--ink); }
.inquiry .inq-t small{ color:var(--muted); }
.inquiry .inq-steps li.is-on{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--ink); }
.inquiry .inq-steps li.is-on .inq-no{ box-shadow:inset 0 0 0 2px var(--accent); }
.inquiry .inq-steps li.is-on .inq-t b{ color:var(--ink); }
.inquiry .inq-alt{ color:var(--body); }
.inquiry .inq-alt a{ color:var(--ink); border-bottom-color:var(--accent); }
.inquiry .order{ box-shadow:0 1px 0 rgba(28,29,36,.04), 0 24px 60px -30px rgba(28,29,36,.35), inset 0 0 0 1px rgba(28,29,36,.08); }
.inquiry.sec--white .order{ background:#fff; }

/* ---------- Leistungen: 4 Bildkarten + Liste ---------- */
.hcards{ display:grid; gap:clamp(14px, 1.6vw, 22px); grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .hcards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1200px){ .hcards{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.hcard{ display:flex; flex-direction:column; border-radius:6px; overflow:hidden; background:#fff; box-shadow:inset 0 0 0 1px rgba(28,29,36,.07); transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.sec--white .hcard{ background:var(--gray); box-shadow:none; }
.hcard:hover{ transform:translateY(-4px); }
.hcard-ph{ display:block; aspect-ratio:4/3; overflow:hidden; background:#E3E5E9; }
.hcard-ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.hcard:hover .hcard-ph img{ transform:scale(1.03); }
.hcard-t{ display:flex; flex-direction:column; flex:1; padding:clamp(18px, 1.8vw, 24px); }
.hcard-t p{ margin-top:8px; font-size:.97rem; line-height:1.58; color:var(--body); flex:1; }
.hcard-t .tlink{ margin-top:16px; }
.hlist-wrap{ margin-top:clamp(26px, 3vw, 40px); padding:clamp(20px, 2.2vw, 28px); border-radius:6px; background:#fff; box-shadow:inset 0 0 0 1px rgba(28,29,36,.07); }
.sec--white .hlist-wrap{ background:var(--gray); box-shadow:none; }
.hlist-h{ font-family:'Montserrat'; font-weight:700; font-size:1.08rem; color:var(--ink); margin-bottom:14px; }
.hlist{ display:grid; gap:12px 28px; grid-template-columns:minmax(0,1fr); }
@media (min-width:560px){ .hlist{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1000px){ .hlist{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.hlist li{ display:flex; align-items:center; gap:12px; font-weight:600; color:var(--ink); font-size:.98rem; }
.hl-ic{ display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border-radius:4px; background:var(--accent); color:#fff; }
.hl-ic .ic{ width:14px; height:14px; }

/* ---------- Ablauf hell ---------- */
.process .steps::before{ background:#D7DAE0; }
.process .step .h3{ color:var(--ink); }
.process .step-t p{ color:var(--body); }

/* ---------- Galerie ---------- */
.gal-tile{ border-radius:6px; transition:transform .6s var(--ease); }
.gal-tile:hover{ transform:translateY(-4px); }

/* ---------- Bewertungen ---------- */
.rv-sum{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; width:max-content; max-width:100%; margin:-6px auto clamp(26px, 3vw, 40px); padding:10px 18px; border-radius:6px; background:#fff; box-shadow:inset 0 0 0 1px rgba(28,29,36,.08); color:var(--ink); font-size:.95rem; transition:transform .5s var(--ease); }
.rv-sum:hover{ transform:translateY(-3px); }
.rv-sum b{ font-family:'Montserrat'; font-size:1.3rem; font-weight:800; }
.rv-g svg{ width:24px; height:24px; display:block; }
.rv-st,.rcard-st{ display:inline-flex; gap:2px; color:#FBBC04; }
.rv-st svg{ width:17px; height:17px; }
.rcard-st svg{ width:16px; height:16px; }
.rcards{ display:grid; gap:clamp(14px, 1.6vw, 22px); grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .rcards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){ .rcards{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.rcard{ display:flex; flex-direction:column; gap:14px; padding:clamp(20px, 2vw, 26px); border-radius:6px; background:#fff; box-shadow:inset 0 0 0 1px rgba(28,29,36,.07); transition:transform .6s var(--ease); }
.sec--white .rcard{ background:var(--gray); box-shadow:none; }
.rcard:hover{ transform:translateY(-4px); }
.rcard.is-more{ display:none; }
.rcards.is-all .rcard.is-more{ display:flex; }
.rcard-t{ flex:1; font-size:.98rem; line-height:1.62; color:var(--ink); display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(1.62em * 6); }
.rcard-a{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid rgba(28,29,36,.08); }
.rcard-a img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:#E3E5E9; }
.rcard-a b{ display:block; font-size:.96rem; color:var(--ink); line-height:1.25; }
.rcard-a small{ display:block; font-size:.82rem; color:var(--muted); }
@media (max-width:759px){ .rcard-t{ -webkit-line-clamp:7; min-height:0; } }

/* ---------- Über uns ---------- */
.about .aphoto-img{ border-radius:6px; }
.about .alabel img{ height:44px; }

/* ---------- Inhaber-Karte: Mike auf Markenverlauf ---------- */

/* ---------- Kontaktformular Datenschutz ---------- */
.kform .consent{ margin-top:4px; font-size:.86rem; }

/* ---------- Unterseiten ---------- */
body.subpage .hdr{ background:rgba(255,255,255,.97); box-shadow:0 1px 0 rgba(28,29,36,.08); }
body.subpage .hdr .logo-l{ opacity:0; }
body.subpage .hdr .logo-d{ opacity:1; }
body.subpage .hdr-nav a{ color:var(--ink); text-shadow:none; }
body.subpage .hdr-burger span{ background:var(--ink); }
body.subpage .hdr-burger{ box-shadow:inset 0 0 0 1.5px #D3D6DC; }
.page-head{ padding-top:calc(var(--hdr-h) + clamp(40px, 6vw, 80px)); padding-bottom:clamp(36px, 5vw, 64px); }
.page-head .h2{ margin-top:6px; }
.nf{ min-height:70vh; display:flex; align-items:center; text-align:center; }
.nf .wrap{ width:100%; }
.nf .sub{ margin:14px auto 0; max-width:560px; }
.legal{ max-width:780px; }
.legal h3{ font-size:1.3rem; line-height:1.3; margin:34px 0 10px; font-family:'Montserrat'; font-weight:700; color:var(--ink); }
.legal h3:first-child{ margin-top:0; }
.legal p{ margin:0 0 12px; color:var(--body); line-height:1.7; }
.legal a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.bw-sec{ padding-top:calc(var(--hdr-h) + clamp(40px, 6vw, 72px)); }
.bw{ display:flex; justify-content:center; }
.bw-card{ width:min(560px, 100%); padding:clamp(28px, 5vw, 44px) clamp(22px, 5vw, 40px); border-radius:6px; background:#fff; box-shadow:inset 0 0 0 1px rgba(28,29,36,.08), 0 24px 60px -34px rgba(28,29,36,.35); text-align:center; }
.bw-logo{ width:190px; height:auto; margin:0 auto 22px; display:block; }
.bw-step{ display:none; gap:12px; }
.bw-step.is-on{ display:grid; }
.bw-step p{ color:var(--body); margin:0; }
.bw-stars{ display:flex; justify-content:center; gap:4px; margin:8px 0 2px; }
.bw-star{ padding:4px; border:0; background:none; cursor:pointer; line-height:0; border-radius:6px; transition:transform .2s; }
.bw-star:hover{ transform:scale(1.12); }
.bw-star svg{ width:44px; height:44px; fill:#D6D9DE; transition:fill .15s; }
.bw-star.on svg{ fill:#FBBC04; }
.bw-hint{ font-size:.86rem; }
.bw-step .btn{ width:100%; }
#fb-form{ display:grid; gap:12px; text-align:left; }
#fb-form textarea{ height:auto; padding:12px 14px; }
.bw-back{ justify-self:center; border:0; background:none; color:var(--body); cursor:pointer; font-weight:600; padding:6px 10px; }
.bw-err{ color:#B3261E; font-weight:600; font-size:.95rem; }
.bw-err:empty{ display:none; }

/* ---------- debugmax-Fixes ---------- */
html,body{ overflow-anchor:none; }
/* kein Glas-Blur über dem laufenden Video (laggt), stattdessen fast deckend */
.hero .sgw,.sowner,.sowner-p{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.hero .sgw{ background:rgba(22,23,28,.86); }
.sowner{ background:rgba(22,23,28,.9); }
.sowner-p{ background:rgba(255,255,255,.06); }
/* eine Button-Höhe überall (Header-Button bleibt kleiner) */
.btn:not(.btn--sm){ min-height:58px; }
.btn--lg{ min-height:58px; height:auto; }
/* Tippflächen */
.tlink{ min-height:44px; display:inline-flex; align-items:center; }
.ftr-col ul{ gap:0 !important; }
.ftr-col li a{ display:inline-flex; align-items:center; min-height:44px; }
.ftr-legal a{ display:inline-flex; align-items:center; min-height:44px; }
.acc-q{ text-wrap:balance; }
.legal h3{ text-wrap:balance; hyphens:none; }
.ftr-badge{ min-height:44px; display:inline-flex; align-items:center; }

/* =====================================================================
   Richtung 1 „Farbtonkarte“ (Maxim 26.10.2026): die drei Logo-Streifen
   Rot / Gelb / Blau als Gestaltungssystem
   ===================================================================== */
:root{
  --t-rot:#D80018; --t-gelb:#F2C81E; --t-blau:#1F3F98; --ink-2:#16171C;
  --tri:linear-gradient(90deg, var(--t-rot) 0 31.5%, transparent 31.5% 34.25%, var(--t-gelb) 34.25% 65.75%, transparent 65.75% 68.5%, var(--t-blau) 68.5% 100%);
  --fs-h2: clamp(2rem, 1.25rem + 2.5vw, 3.35rem);
}
@media (min-width:1800px){ :root{ --fs-h2:3.6rem; } }
@media (min-width:2300px){ :root{ --fs-h2:3.8rem; } }
.sq{ display:inline-block; width:12px; height:12px; flex:0 0 auto; border-radius:2px; background:var(--tone, var(--t-rot)); }

/* Header: Logo-Streifen als Unterkante, sobald er deckend ist */
.hdr::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--tri); opacity:0; transition:opacity .3s ease; }
.hdr.is-solid::after, body.subpage .hdr::after{ opacity:1; }
.hdr.is-solid, body.subpage .hdr{ box-shadow:none; }

/* Hero-Band: gerade, anthrazit, Punkte in den drei Logo-Farben */
.tape{ left:0; right:0; bottom:0; rotate:0deg; height:52px; background:var(--ink-2); color:#fff; }
.tape::before{ display:none; }
.banner-list li{ color:rgba(255,255,255,.9); }
.tape-tick{ opacity:1; width:10px; height:10px; border-radius:2px; }
.banner-list li:nth-child(3n+1) .tape-tick{ background:var(--t-rot); }
.banner-list li:nth-child(3n+2) .tape-tick{ background:var(--t-gelb); }
.banner-list li:nth-child(3n) .tape-tick{ background:var(--t-blau); }
@media (max-width:599px){ .tape{ height:46px; rotate:0deg; bottom:0; } }

/* dunkle Section */
.sec--ink{ background:var(--ink-2); color:rgba(255,255,255,.72); }
.sec--ink .h2,.sec--ink .h3{ color:#fff; }
.sec--ink .kicker{ color:var(--t-gelb); }
.sec--ink .sub{ color:rgba(255,255,255,.72); }
.sec--ink .h2 em{ color:var(--t-gelb); }

/* ---------- Vorteile: drei Farbbalken ---------- */
.tri{ display:grid; gap:clamp(14px, 1.6vw, 22px); grid-template-columns:minmax(0,1fr); }
@media (min-width:860px){ .tri{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.tri-it{ position:relative; overflow:hidden; padding:clamp(28px, 2.6vw, 38px) clamp(22px, 2.2vw, 32px) clamp(24px, 2.2vw, 30px); border-radius:6px; background:#fff; box-shadow:inset 0 0 0 1px rgba(30,31,36,.06); transition:translate .6s var(--ease); }
.sec--white .tri-it{ background:var(--gray); box-shadow:none; }
.tri-it:hover{ translate:0 -4px; }
.tri-bar{ position:absolute; left:0; right:0; top:0; height:8px; background:var(--tone); }
.tri-k{ display:block; font-family:'Montserrat'; font-weight:800; font-stretch:92%; font-size:clamp(2.6rem, 2rem + 2vw, 3.8rem); line-height:1; letter-spacing:-.03em; color:var(--ink); margin-bottom:18px; }
.tri-it .h3{ font-size:clamp(1.15rem, 1.05rem + .35vw, 1.35rem); }
.tri-it p{ margin-top:8px; font-size:.98rem; line-height:1.6; color:var(--body); }

/* ---------- Formular: Fortschritt in den Logo-Farben ---------- */
.quiz-bars li:nth-child(1) i{ background:var(--t-rot); }
.quiz-bars li:nth-child(2) i{ background:var(--t-gelb); }
.quiz-bars li:nth-child(3) i{ background:var(--t-blau); }
.quiz-head{ border-bottom:0; position:relative; }
.quiz-head::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--tri); }

/* ---------- Leistungen: Farbmusterkarten im Fächer ---------- */
.pfan{ display:grid; gap:clamp(16px, 1.8vw, 26px); grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .pfan{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1200px){ .pfan{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.pchip{ position:relative; display:flex; flex-direction:column; min-width:0; border-radius:6px; overflow:hidden; background:#fff;
  box-shadow:0 1px 0 rgba(30,31,36,.04), 0 22px 44px -30px rgba(30,31,36,.5), inset 0 0 0 1px rgba(30,31,36,.06);
  transform-origin:12% 100%; transition:translate .6s var(--ease), rotate .9s var(--ease), opacity .5s ease; }
.pchip:hover{ translate:0 -6px; }
.pchip-ph{ display:block; aspect-ratio:4/3; overflow:hidden; background:#E3E5E9; }
.pchip-ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.pchip:hover .pchip-ph img{ transform:scale(1.03); }
.pchip-sw{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:13px 20px 12px; background:var(--tone); color:var(--on); box-shadow:inset 0 1px 0 rgba(30,31,36,.08), inset 0 -1px 0 rgba(30,31,36,.08); }
.pchip-sw small{ font-size:.74rem; font-weight:600; opacity:.72; }
.pchip-sw b{ font-family:'Montserrat'; font-weight:700; font-size:1.1rem; letter-spacing:-.005em; }
.pchip-t{ display:flex; flex-direction:column; flex:1; padding:clamp(18px, 1.8vw, 24px); }
.pchip-t p{ margin-top:8px; flex:1; font-size:.97rem; line-height:1.58; color:var(--body); }
.pchip-t .tlink{ margin-top:14px; }
/* Fächer: am PC liegen die Karten erst gestapelt und fächern beim Reinscrollen auf */
.pfan.fan-ready:not(.is-open) .pchip{ opacity:0; rotate:calc((var(--i) - 1.5) * 7deg); translate:calc(var(--i) * -104%) 30px; }
.pfan.fan-ready .pchip{ z-index:calc(1 + var(--i)); transition-delay:calc(var(--i) * 110ms); }
.pfan.fan-done .pchip{ transition-delay:0s; }
.more-list{ margin-top:clamp(24px, 3vw, 38px); padding:clamp(20px, 2.2vw, 28px); border-radius:6px; background:#fff; box-shadow:inset 0 0 0 1px rgba(30,31,36,.06); }
.sec--white .more-list{ background:var(--gray); box-shadow:none; }
.more-h{ font-family:'Montserrat'; font-weight:700; font-size:1.08rem; color:var(--ink); margin-bottom:14px; }
.more-list ul{ display:grid; gap:12px 28px; grid-template-columns:minmax(0,1fr); }
@media (min-width:560px){ .more-list ul{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1000px){ .more-list ul{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.more-list li{ display:flex; align-items:center; gap:12px; font-weight:600; color:var(--ink); font-size:.98rem; }

/* ---------- Neubau komplett ---------- */
.nb-grid{ display:grid; gap:clamp(32px, 5vw, 80px); grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:1024px){ .nb-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); } }
.nb-media{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.nb-media figure{ position:relative; margin:0; border-radius:6px; overflow:hidden; background:#E3E5E9; transition:translate .6s var(--ease); }
.nb-media figure:hover{ translate:0 -4px; }
.nb-media img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.nb-media figcaption{ position:absolute; left:10px; bottom:10px; display:flex; align-items:center; gap:8px; padding:7px 11px; border-radius:4px; background:#fff; color:var(--ink); font-size:.84rem; font-weight:600; }
.nb-media figcaption::before{ content:""; width:11px; height:11px; border-radius:2px; background:var(--t-gelb); }
.nb-b figcaption::before{ background:var(--t-rot); }
@media (min-width:1024px){
  .nb-media{ display:block; position:relative; height:clamp(460px, 40vw, 600px); }
  .nb-media figure{ position:absolute; }
  .nb-a{ left:0; top:0; width:54%; }
  .nb-b{ right:0; bottom:0; width:60%; box-shadow:0 30px 60px -30px rgba(30,31,36,.55); }
  .nb-media img{ aspect-ratio:auto; height:100%; }
  .nb-a{ height:72%; } .nb-b{ height:78%; }
}
.nb-steps{ margin:4px 0 28px; border-top:1px solid rgba(30,31,36,.1); }
.nb-steps li{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid rgba(30,31,36,.1); font-weight:600; color:var(--ink); font-size:1.02rem; line-height:1.4; }
.nb-steps .sq{ width:14px; height:14px; }

/* ---------- Galerie-Labels mit Farbquadrat ---------- */
.gal-label{ display:flex; align-items:center; gap:10px; }

/* ---------- Über uns: Mike groß ---------- */
.ab-grid{ display:grid; gap:clamp(32px, 5vw, 80px); grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:1024px){ .ab-grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }
.ab-ph{ position:relative; margin:0; border-radius:6px; overflow:hidden; background:#E7E8EB; max-width:560px; }
.ab-ph::before{ content:""; position:absolute; z-index:2; left:0; right:0; top:0; height:8px; background:var(--tri); }
.ab-ph img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 18%; }
.ab-ph figcaption{ position:absolute; left:16px; bottom:16px; display:flex; flex-direction:column; padding:12px 16px; border-radius:4px; background:#fff; color:var(--ink); box-shadow:0 18px 40px -24px rgba(30,31,36,.6); }
.ab-ph figcaption b{ font-family:'Montserrat'; font-weight:700; font-size:1.15rem; }
.ab-ph figcaption span{ font-size:.86rem; color:var(--body); }
.ab-copy .atext{ max-width:620px; }
.ab-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:26px 0 18px; }
.ab-stats li{ position:relative; overflow:hidden; padding:20px 16px 16px; border-radius:6px; background:var(--gray); transition:translate .6s var(--ease); }
.sec--gray .ab-stats li{ background:#fff; }
.ab-stats li:hover{ translate:0 -4px; }
.ab-stats li::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--tone); }
.ab-stats b{ display:block; font-family:'Montserrat'; font-weight:800; font-size:clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height:1; color:var(--ink); letter-spacing:-.02em; }
.ab-stats span{ display:block; margin-top:8px; font-size:.86rem; line-height:1.35; color:var(--body); }
.ab-van{ display:flex; align-items:center; gap:16px; padding:12px; border-radius:6px; background:var(--gray); margin-bottom:24px; transition:translate .6s var(--ease); }
.sec--gray .ab-van{ background:#fff; }
.ab-van:hover{ translate:0 -3px; }
.ab-van img{ width:128px; aspect-ratio:4/3; object-fit:cover; border-radius:4px; flex:0 0 auto; }
.ab-van p{ font-size:.95rem; line-height:1.5; color:var(--body); }
.ab-van b{ color:var(--ink); }
@media (max-width:420px){ .ab-van img{ width:96px; } .ab-stats{ gap:8px; } .ab-stats li{ padding:18px 10px 12px; } }

/* ---------- Bewertungen: großes Zitat + Karten mit Farbkante ---------- */
.rv-lead{ max-width:920px; margin:0 auto clamp(30px, 4vw, 52px); text-align:center; }
.rv-lead-st{ display:inline-flex; gap:3px; color:#FBBC04; margin-bottom:16px; }
.rv-lead-st svg{ width:22px; height:22px; }
.rv-lead blockquote{ margin:0; font-family:'Montserrat'; font-weight:600; font-size:clamp(1.25rem, 1rem + 1vw, 1.8rem); line-height:1.38; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
.rv-lead figcaption{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px 14px; margin-top:22px; text-align:left; }
.rv-lead figcaption img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.rv-lead figcaption b{ display:block; color:var(--ink); }
.rv-lead figcaption small{ display:block; font-size:.84rem; color:var(--muted); }
.rv-lead .rv-sum{ margin:0 0 0 8px; padding:8px 14px; width:auto; box-shadow:inset 0 0 0 1px rgba(30,31,36,.12); background:transparent; gap:8px; }
.rv-lead .rv-sum b{ font-size:1.05rem; }
.rcard{ position:relative; overflow:hidden; }
.rcard::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--tone); }

/* ---------- Einsatzgebiet ---------- */
.places{ display:grid; gap:clamp(12px, 1.4vw, 20px); grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:1000px){ .places{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:440px){ .places{ grid-template-columns:minmax(0,1fr); } }
.place{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:6px; padding:24px 20px 20px; border-radius:6px; background:var(--gray); transition:translate .6s var(--ease); }
.sec--gray .place{ background:#fff; }
.place:hover{ translate:0 -4px; }
.place::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--tone); }
.place-ic{ color:var(--ink); }
.place-ic .ic{ width:20px; height:20px; }
.place b{ font-family:'Montserrat'; font-weight:700; font-size:1.25rem; color:var(--ink); }
.place span:last-child{ font-size:.93rem; line-height:1.5; color:var(--body); }

/* ---------- Footer: Logo-Streifen als Oberkante ---------- */
.ftr{ position:relative; }
.ftr::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--tri); }
.sowner::before{ content:""; position:absolute; z-index:3; left:0; right:0; top:0; height:6px; background:var(--tri); }
.callcard{ position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(30,31,36,.07) !important; border-top:0 !important; }
.callcard::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--tri); }
.rv-lead .rv-sum{ min-height:44px; } .ftr-col li a{ min-width:44px; }

/* ---------- Schriften der alten Website: Montserrat + Open Sans (Onboarding 26.10.) ---------- */
.h1,.h2,.h3{ font-stretch:normal; }
.h1{ font-weight:800; letter-spacing:-.03em; }
.h2{ font-weight:800; letter-spacing:-.025em; line-height:1.08; }
.h1 .em,.h2 em{ font-family:'Montserrat',system-ui,sans-serif; font-style:italic; font-weight:700; font-size:1em; line-height:inherit; letter-spacing:-.025em; }
.h1 .em{ color:#fff; }
.tri-k,.ab-stats b{ font-weight:800; letter-spacing:-.035em; }
.banner-list li{ font-stretch:normal; letter-spacing:.06em; font-weight:700; }
/* KI-Kennzeichnung */
.pchip-ph{ position:relative; }
.ki-badge{ position:absolute; z-index:2; top:10px; right:10px; padding:4px 7px; border-radius:3px; background:rgba(20,21,26,.62); color:#fff; font-size:.64rem; font-weight:700; letter-spacing:.06em; line-height:1; }

/* Inhaber-Karte clean (Maxim 26.10.: „ohne Gradient, einfach clean“): echtes Foto im Rahmen, keine Freistellung, kein Glow */
.sowner{ background:#17181D !important; border:0 !important; border-radius:8px; padding:0 14px 16px; box-shadow:0 30px 70px -30px rgba(0,0,0,.7); }
.sowner-ph{ margin:20px 0 0 !important; border-radius:4px !important; background:#E9EAEC; }
.sowner-ph::before{ display:none !important; }
.sowner-ph{ height:clamp(240px, 33vh, 310px) !important; }
.sowner-ph img{ object-position:50% 16%; }
@media (min-width:1200px) and (max-height:760px){ .sowner-ph{ height:clamp(200px, 30vh, 240px) !important; } }
.sowner-p{ margin-top:0 !important; padding:16px 4px 0 !important; background:none !important; border:0 !important; border-radius:0 !important; }
.sowner-st{ border-top-color:rgba(255,255,255,.1); }
.sowner-g{ border-top-color:rgba(255,255,255,.1); }

/* =====================================================================
   Fassade: echtes Haus mit Punkten (ersetzt Musterwand, Maxim 26.10.2026)
   ===================================================================== */
.hs-photo{ position:relative; overflow:hidden; border-radius:6px; aspect-ratio:4/3; background:#2A2B31; box-shadow:0 40px 80px -40px rgba(0,0,0,.8); }
@media (min-width:768px){ .hs-photo{ aspect-ratio:1600/654; } }
/* Innenbox hat immer das Seitenverhältnis des Fotos, damit die Punkte am Haus kleben; am Handy auf den Bereich 18 bis 72 % zugeschnitten */
.hs-inner{ position:absolute; top:0; bottom:0; left:50%; aspect-ratio:1600/654; height:100%; translate:-45% 0; }
@media (min-width:768px){ .hs-inner{ left:0; width:100%; translate:none; } }
.hs-inner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hs-dot{ position:absolute; z-index:2; width:44px; height:44px; margin:-22px 0 0 -22px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; display:grid; place-items:center; }
.hs-dot span{ position:relative; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#fff; color:var(--ink); font-weight:800; font-size:.95rem; box-shadow:0 0 0 4px var(--tone), 0 10px 24px -6px rgba(0,0,0,.6); transition:transform .4s var(--ease), background-color .3s, color .3s; }
.hs-dot::before{ content:""; position:absolute; inset:2px; border-radius:50%; box-shadow:0 0 0 3px var(--tone); opacity:0; animation:hs-ping 2.4s ease-out infinite; }
.hs-dot.is-on span{ background:var(--tone); color:#fff; transform:scale(1.14); }
.hs-dot[style*="t-gelb"].is-on span{ color:var(--ink); }
.hs-dot:hover span{ transform:scale(1.1); }
.hs-dot:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@keyframes hs-ping{ 0%{ opacity:.8; transform:scale(1); } 100%{ opacity:0; transform:scale(1.9); } }
@media (prefers-reduced-motion:reduce){ .hs-dot::before{ animation:none; } }
.hs-cards{ display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:16px; }
@media (min-width:1000px){ .hs-cards{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:420px){ .hs-cards{ grid-template-columns:minmax(0,1fr); } }
.hs-card{ position:relative; overflow:hidden; padding:18px 18px 16px 18px; border-radius:6px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); cursor:pointer; transition:translate .5s var(--ease), background-color .3s, box-shadow .3s; }
.hs-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--tone); opacity:.45; transition:opacity .3s; }
.hs-card:hover{ translate:0 -3px; }
.hs-card.is-on{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); }
.hs-card.is-on::before{ opacity:1; }
.hs-card:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.hs-no{ display:inline-grid; place-items:center; width:26px; height:26px; margin-bottom:10px; border-radius:50%; background:#fff; color:var(--ink); font-weight:800; font-size:.82rem; }
.hs-card b{ display:block; font-family:'Montserrat',system-ui,sans-serif; font-weight:700; font-size:1.04rem; color:#fff; }
.hs-card p{ margin-top:5px; font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.68); }
.hs-quote{ max-width:820px; margin:clamp(30px, 4vw, 48px) auto 0; text-align:center; }
.hs-quote blockquote{ margin:0; font-family:'Montserrat',system-ui,sans-serif; font-weight:600; font-size:clamp(1.08rem, .95rem + .55vw, 1.4rem); line-height:1.45; color:#fff; text-wrap:balance; }
.hs-quote figcaption{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:.92rem; color:rgba(255,255,255,.66); }
.hs-quote figcaption b{ color:#fff; }
.hs-quote .rv-g svg{ width:18px; height:18px; display:block; }
.haus .sec-cta{ margin-top:clamp(24px, 3vw, 36px); }
.hs-card{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; }
.hs-no{ margin-bottom:0; grid-row:1; }
.hs-card b{ grid-row:1; grid-column:2; }
.hs-card p{ grid-column:1 / -1; margin-top:10px; }
@media (max-width:420px){ .hs-card{ padding:14px 16px; } .hs-card p{ margin-top:6px; } }

/* =====================================================================
   V2 Finish: ruhigeres Handwerkssystem, mehr Bild und klare Hierarchie
   ===================================================================== */
:root{
  --accent:#c9182b;
  --accent-deep:#a91425;
  --ink:#17191d;
  --gray:#f3f5f7;
  --body:#4d535c;
  --line:rgba(23,25,29,.12);
}

html{ background:#fff; }
body{ color:var(--body); }
html,body{ overflow-x:clip; }
.wrap{ width:min(100% - 40px, 1480px); }
.sec{ padding-top:clamp(76px, 8vw, 128px); padding-bottom:clamp(82px, 9vw, 136px); }
.sec--gray{ background:#f3f5f7; }
.sec--white{ background:#fff; }
.sec--ink{ background:#17191d; }
.head{ max-width:760px; margin-bottom:clamp(38px, 5vw, 64px); }
.head--left{ max-width:650px; }
.h2{ font-size:clamp(2rem, 1.25rem + 2.25vw, 3.15rem); }
.sub{ max-width:56ch; }
.kicker{ color:var(--accent); }
.sec--ink .kicker{ color:#fff; opacity:.72; }

/* Header: ruhiger, klarer und weniger farbig im Scrollzustand */
.hdr.is-solid{ background:rgba(255,255,255,.97); }
.hdr.is-solid .hdr-nav a{ color:var(--ink); }
.hdr.is-solid .hdr-burger span{ background:var(--ink); }
.hdr.is-solid .hdr-burger{ box-shadow:inset 0 0 0 1px rgba(23,25,29,.18); }
.hdr::after{ height:2px; background:var(--accent); }
.hdr.is-solid::after{ opacity:1; }

/* Hero: Bild führt, Copy bleibt lesbar und der Kontakt wird sekundär */
.hero-shade{ background:linear-gradient(90deg,rgba(15,17,20,.72) 0%,rgba(15,17,20,.34) 48%,rgba(15,17,20,.18) 100%); }
.hero-copy{ max-width:760px; }
.hero-kicker{ letter-spacing:.02em; }
.hero-lead{ max-width:38ch; }
.hero-ctas .btn--glass{ background:rgba(23,25,29,.38); border-color:rgba(255,255,255,.6); }
.sowner{ box-shadow:0 24px 60px -30px rgba(0,0,0,.58); }

/* Vorteile: ein großer Einstieg, zwei kleinere Belege statt drei gleicher Kästen */
@media (min-width:860px){
  .tri{ grid-template-columns:1.35fr .85fr .85fr; align-items:stretch; }
  .tri-it:first-child{ grid-row:span 1; }
}
.tri-it{ border-radius:4px; box-shadow:inset 0 0 0 1px rgba(23,25,29,.08); }
.tri-it:hover{ translate:0 -6px; }
.tri-bar{ height:5px; background:var(--tone); }
.tri-it:nth-child(2) .tri-bar,.tri-it:nth-child(3) .tri-bar{ background:var(--accent); }

/* Anfrage: Formularkarte als echtes Werkzeug, nicht als loses Dashboard */
.inquiry .inq-grid{ align-items:start; }
.quiz{ border-radius:4px; box-shadow:0 22px 56px -34px rgba(23,25,29,.48); }
.quiz-head{ background:#17191d; }
.quiz-head::after{ background:var(--accent); height:3px; }
.quiz-opt:has(input:checked){ border-color:var(--accent); background:rgba(201,24,43,.06); }
.quiz-opt:has(input:checked) .quiz-radio{ background:var(--accent); border-color:var(--accent); }

/* Leistungen: weniger Kachel-Optik, mehr Magazin-Rhythmus */
.services .pfan{ gap:18px; }
.pchip{ border-radius:4px; box-shadow:0 18px 42px -30px rgba(23,25,29,.48),inset 0 0 0 1px rgba(23,25,29,.08); }
.pchip-sw{ background:var(--accent) !important; }
.pchip:nth-child(2) .pchip-sw,.pchip:nth-child(3) .pchip-sw,.pchip:nth-child(4) .pchip-sw{ background:#17191d !important; }
.pchip-ph{ aspect-ratio:5/3; }
.pchip-t{ padding:22px 24px 24px; }

/* Galerie: zwei große Bilder geben echten Projekten Priorität */
.gal{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; align-items:start; }
.gal-tile{ grid-column:span 4; border-radius:4px; }
.gal-tile{ align-self:start; }
.gal-tile:nth-child(1),.gal-tile:nth-child(4){ grid-column:span 6; }
.gal-tile:nth-child(1) .gal-ph,.gal-tile:nth-child(4) .gal-ph{ aspect-ratio:16/10; }
.gal-ph{ aspect-ratio:4/3; }
.gal-label{ padding:13px 2px 2px; }
@media (max-width:760px){
  .gal{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .gal-tile,.gal-tile:nth-child(1),.gal-tile:nth-child(4){ grid-column:span 1; }
  .gal-tile:nth-child(1),.gal-tile:nth-child(4){ grid-column:span 2; }
}

/* Neubau und Über uns: harte Bildkanten mit feinen roten Markierungen */
.nb-media figure,.ab-ph,.ab-van,.hs-photo{ border-radius:4px; }
.nb-media figure::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(23,25,29,.12); }
.ab-ph::before,.ftr::before{ height:4px; background:var(--accent); }

/* Dark section: Rot als einziger Akzent */
.sec--ink .hs-card.is-on{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.62); }
.sec--ink .hs-card::before{ background:var(--accent); }
.sec--ink .hs-dot span{ box-shadow:0 0 0 4px var(--accent),0 10px 24px -6px rgba(0,0,0,.6); }

/* Kontakt und CTA dürfen wie ein Abschluss wirken */
.contact .callcard,.cta .callcard{ border-radius:4px; }
.cta{ position:relative; }
.cta::before{ opacity:.16; }

/* Mobile: Ansprechpartner kompakt halten, damit die Hero nicht überfüllt wirkt */
@media (max-width:1023px){
  .sowner{ position:relative !important; inset:auto !important; width:100%; max-width:560px; margin:24px auto 0; display:grid; grid-template-columns:88px 1fr; gap:14px; padding:10px 12px 10px; border-radius:4px; }
  .sowner::before{ height:4px; }
  .sowner-ph{ width:88px !important; height:108px !important; margin:0 !important; grid-row:span 2; }
  .sowner-p{ padding:8px 0 0 !important; }
  .sowner-st{ display:none; }
  .sowner-g{ border-top:0; padding-top:4px; }
  .sowner-n{ font-size:1rem; }
  .sowner-r{ font-size:.78rem; }
}
@media (max-width:600px){
  .wrap{ width:min(100% - 32px, 1480px); }
  .sec{ padding-top:68px; padding-bottom:76px; }
  .hero-copy{ padding-bottom:92px; }
  .hero-ctas .btn{ min-height:54px; }
  .sowner{ margin-top:18px; }
  .tri-it{ padding:25px 22px 24px; }
  .pchip-ph{ aspect-ratio:16/10; }
}

@media (prefers-reduced-motion:reduce){
  .tri-it,.pchip,.gal-tile,.nb-media figure,.ab-van{ transition:none; }
}

/* =====================================================================
   V3 Strukturkorrektur: weniger Kacheln, mehr echtes Handwerk
   ===================================================================== */

/* Vorteile werden zu einer ruhigen Belegzeile, nicht zu drei Boxen */
.tri{ gap:0; border-top:1px solid var(--line); }
.tri-it,.sec--white .tri-it{ min-height:0; padding:28px 28px 24px 0; border-radius:0; background:transparent; box-shadow:none; border-bottom:1px solid var(--line); }
.tri-it + .tri-it{ padding-left:28px; border-left:1px solid var(--line); }
.tri-bar{ position:static; display:block; width:42px; height:4px; margin-bottom:24px; background:var(--accent) !important; }
.tri-k{ margin-bottom:14px; font-size:clamp(2.5rem, 2rem + 1.6vw, 3.7rem); }
.tri-it p{ max-width:30ch; }
@media (max-width:859px){
  .tri-it,.tri-it + .tri-it{ padding:24px 0; border-left:0; }
}

/* Leistungen: vier echte Projektzeilen statt vier farbiger Karten */
.services .pfan{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 34px; border-top:1px solid var(--line); }
.pchip,.sec--white .pchip{ display:grid; grid-template-columns:minmax(150px,.86fr) minmax(0,1.14fr); align-items:stretch; border-radius:0; overflow:visible; background:transparent; box-shadow:none; border-bottom:1px solid var(--line); }
.pchip-ph{ aspect-ratio:4/3; border-radius:3px; }
.pchip-ph{ width:100%; min-width:0; height:auto; align-self:stretch; }
.pchip-sw{ position:absolute; z-index:2; left:10px; bottom:10px; display:inline-flex; width:auto; padding:7px 9px; border-radius:2px; background:var(--accent) !important; color:#fff; }
.pchip-sw small{ display:none; }
.pchip-sw b{ font-family:'Open Sans',sans-serif; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.pchip-t{ padding:18px 0 18px 20px; }
.pchip-t .h3{ font-size:1.1rem; }
.pchip-t p{ font-size:.92rem; line-height:1.5; }
.pchip-t .tlink{ color:var(--accent); }
@media (max-width:760px){
  .services .pfan{ grid-template-columns:1fr; gap:0; }
  .pchip,.sec--white .pchip{ grid-template-columns:112px minmax(0,1fr); min-width:0; }
  .pchip-ph{ width:100%; min-width:0; aspect-ratio:1/1; }
  .pchip-t{ padding:14px 0 14px 16px; }
  .pchip-t p{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
}

/* Einsatzgebiet bekommt Luft und klare Typografie, keine Kartenwand */
.places{ gap:0; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); }
.place,.sec--gray .place{ border-radius:0; background:transparent; box-shadow:none; padding:24px 22px 12px 0; border-bottom:1px solid var(--line); }
.place + .place{ padding-left:22px; border-left:1px solid var(--line); }
.place::before{ display:none; }
.place-ic{ color:var(--accent); }
.place b{ font-size:1.08rem; }
@media (max-width:760px){
  .places{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .place + .place{ padding-left:16px; }
  .place:nth-child(odd){ padding-left:0; border-left:0; }
  .place:nth-child(even){ padding-left:16px; border-left:1px solid var(--line); }
}

/* Review- und FAQ-Flächen bleiben lesbar, ohne Karten-in-Karten-Effekt */
.rcard,.sec--white .rcard{ border-radius:0; background:transparent; box-shadow:none; padding-left:0; padding-right:0; border-top:1px solid var(--line); }
.rcard::before{ display:none; }
.rcard-a{ border-top:0; }
.acc{ border-top:1px solid var(--line); }
.acc-row{ border-bottom:1px solid var(--line); }
.acc-row:first-child{ border-top:0; }

/* Nur Formular und echte Bildrahmen dürfen sich wie Karten anfühlen */
.quiz,.callcard,.gal-tile,.nb-media figure,.ab-ph{ border-radius:3px; }
.quiz-head{ overflow:hidden; }
.quiz-title{ color:#fff; }
.quiz-logo{ display:block; max-width:150px; width:auto; height:30px; object-fit:contain; object-position:right center; }

/* Hero-Ansprechpartner: innerhalb des Bildes verankern, nicht am Browser-Rand */
@media (min-width:1200px){
  .sowner{ right:clamp(72px, 8vw, 160px); }
}

/* Projekte: die Galerie nutzt jede Spalte, keine tote rechte Hälfte */
@media (min-width:761px){
  .gal-tile,.gal-tile:nth-child(even){ grid-column:span 5; }
  .gal-tile:nth-child(odd){ grid-column:span 7; }
}
@media (max-width:760px){
  .gal-tile{ grid-column:span 1; }
  .gal-tile:nth-child(1),.gal-tile:nth-child(4){ grid-column:span 2; }
}

/* =====================================================================
   Fixes Maxim 26.10. abends
   ===================================================================== */
/* Inhaber-Karte bleibt bis 1024 px rechts in der Hero (vorher ab < 1200 px unter den Text gerutscht = „weg“) */
@media (min-width:1024px) and (max-width:1199px){
  .sowner{ position:absolute !important; display:flex !important; right:32px; width:300px; }
  .sowner-ph{ height:clamp(190px, 26vh, 240px) !important; }
  .hero-copy{ max-width:calc(100% - 350px); }
}
/* Anfrage-Kopf: kein schwarzer Balken, Titel und Logo dunkel auf Weiß */
.quiz-head{ background:transparent !important; padding:0 0 12px; }
.quiz-title{ color:var(--ink) !important; }
/* Projekte: alle Kacheln einer Reihe gleich hoch, keine Lücke rechts */
@media (min-width:761px){
  .gal{ align-items:stretch; }
  .gal-tile:nth-child(4n+1),.gal-tile:nth-child(4n+4){ grid-column:span 7; }
  .gal-tile:nth-child(4n+2),.gal-tile:nth-child(4n+3){ grid-column:span 5; }
  .gal-ph,.gal-tile:nth-child(1) .gal-ph,.gal-tile:nth-child(4) .gal-ph{ aspect-ratio:auto; height:clamp(260px, 25vw, 430px); }
}
/* Vorteile: drei gleich breite Spalten, Headlines und Texte gleich viele Zeilen, Striche in den Logo-Farben */
@media (min-width:860px){
  .tri{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .tri-it .h3{ min-height:2.5em; }
  .tri-it p{ max-width:34ch; min-height:calc(1.6em * 3); }
}
.tri-it:nth-child(1) .tri-bar{ background:var(--t-rot) !important; }
.tri-it:nth-child(2) .tri-bar{ background:var(--t-gelb) !important; }
.tri-it:nth-child(3) .tri-bar{ background:var(--t-blau) !important; }
@media (max-width:760px){ .gal-label{ min-height:calc(1.35em * 2 + 15px); align-items:flex-start; } }
/* Header-Inhalt bündig mit den Sections (V2 hat .wrap auf 1480 px gesetzt) */
.hdr-in{ width:min(100% - 40px, 1480px); margin-inline:auto; padding-inline:var(--gut); }
@media (max-width:600px){ .hdr-in{ width:min(100% - 32px, 1480px); } }
/* Bewertungsseite: Sterne-Tippflächen 48 px, Titel am Handy max. 3 Zeilen */
.bw-star{ width:52px; height:52px; display:grid; place-items:center; }
@media (max-width:400px){ .bw-star{ width:48px; } .bw-star svg{ width:38px; height:38px; } }
@media (max-width:600px){ .hero-ctas .btn{ min-height:58px; } }

/* =====================================================================
   Handy-Fixes Maxim 26.10. 17:50
   ===================================================================== */
/* Header deckend, nichts scheint durch; Menü-Knopf clean statt grauer Kasten */
.hdr.is-solid,.hdr.is-open,body.subpage .hdr{ background:#fff; }
.hdr-burger{ background:transparent !important; border-radius:4px; }
.hdr:not(.is-solid):not(.is-open) .hdr-burger{ box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); }
body.subpage .hdr .hdr-burger,.hdr.is-solid .hdr-burger,.hdr.is-open .hdr-burger{ box-shadow:inset 0 0 0 1.5px #D3D6DC; }
/* Inhaber-Karte am Handy/Tablet: Foto links, Name rechts, keine doppelte Google-Zeile */
@media (max-width:1023px){
  .sowner.is-flow{ display:grid !important; grid-template-columns:104px minmax(0,1fr); column-gap:16px; align-items:center; width:100%; max-width:520px; margin:22px 0 0; padding:18px 16px 16px !important; }
  .sowner.is-flow .sowner-ph{ width:104px !important; height:128px !important; margin:0 !important; border-radius:4px !important; grid-row:auto; }
  .sowner.is-flow .sowner-ph img{ object-position:50% 12%; }
  .sowner.is-flow .sowner-p{ padding:0 !important; margin:0 !important; }
  .sowner.is-flow .sowner-n{ font-size:1.18rem; }
  .sowner.is-flow .sowner-r{ font-size:.86rem; }
  .sowner.is-flow .sowner-st{ display:none; }
  .sowner.is-flow .sowner-g{ display:none; }
}
/* Leistungen am Handy: Text komplett, nicht mit „…“ abgeschnitten */
@media (max-width:760px){
  .pchip-t p{ display:block !important; -webkit-line-clamp:unset !important; overflow:visible !important; }
  .pchip,.sec--white .pchip{ align-items:start; }
}
/* Unterseiten-Kopf kompakt (V2-Section-Abstände machten ihn riesig) */
.sec.page-head{ padding-top:calc(var(--hdr-h) + clamp(28px, 4vw, 56px)); padding-bottom:clamp(26px, 3.5vw, 44px); }
.sec.page-head .h2{ margin-top:4px; }
.sec.page-head + .sec{ padding-top:clamp(34px, 4.5vw, 64px); }
.sec.nf{ padding-bottom:clamp(60px, 8vw, 110px); }
.sec.bw-sec{ padding-top:calc(var(--hdr-h) + clamp(28px, 4vw, 56px)); }
body.subpage .hdr:not(.is-open) .hdr-burger{ box-shadow:inset 0 0 0 1.5px #D3D6DC !important; }

/* =====================================================================
   Hell (Onboarding 26.10.: helle Seite, Mike 28.10.: „sieht so dunkel aus“)
   Fassade, Schluss und Footer hell, Hero heller, Karten im Hero weiß
   ===================================================================== */
/* Hero: Video sichtbar heller, Text links bleibt lesbar */
.hero-shade{ background:
  linear-gradient(180deg, rgba(15,17,20,.42) 0%, rgba(15,17,20,0) 22%),
  linear-gradient(90deg, rgba(15,17,20,.66) 0%, rgba(15,17,20,.46) 38%, rgba(15,17,20,.14) 66%, rgba(15,17,20,0) 100%); }
@media (max-width:1079px){ .hero-shade{ background:
  linear-gradient(180deg, rgba(15,17,20,.6) 0%, rgba(15,17,20,.46) 30%, rgba(15,17,20,.4) 62%, rgba(15,17,20,.12) 100%); } }
.hero .h1,.hero-lead{ text-shadow:0 2px 24px rgba(0,0,0,.35); }
.hero-kicker{ display:inline-flex; align-items:center; gap:10px; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.55); }
.hero-kicker::before{ content:""; width:22px; height:4px; border-radius:1px; background:var(--accent); flex:0 0 auto; }
/* Google-Kachel weiß */
.sgw{ background:#fff; border:0; color:var(--ink); box-shadow:0 18px 40px -26px rgba(0,0,0,.6); }
a.sgw:hover{ border-color:transparent; }
.sgw-num{ color:var(--ink); }
.sgw-sub{ color:var(--body); }
.sgw-g{ box-shadow:inset 0 0 0 1px rgba(23,25,29,.1); }
.sgw-av img{ border-color:#fff; background:#E7E8EB; }
.hero .sgw{ background:#fff; }
/* Inhaber-Karte weiß, Foto im hellen Rahmen */
.sowner{ background:#fff !important; color:var(--ink); box-shadow:0 30px 70px -32px rgba(0,0,0,.6); }
.sowner-n{ color:var(--ink); }
.sowner-r{ color:var(--body); }
.sowner-st,.sowner-g{ border-top-color:var(--line); }
.sowner-st b{ color:var(--accent); }
.sowner-st small{ color:#6b717a; }
.sowner-g > b{ color:var(--ink); }
.sowner-gc{ color:#6b717a; }
.sowner-ph{ background:#EDEEF0; overflow:hidden; }
.sowner-ki{ color:#fff; background:rgba(20,21,26,.62); border:0; }
/* Leistungsband unter der Hero hell */
.tape{ background:#fff; color:var(--ink); box-shadow:0 -1px 0 rgba(23,25,29,.06); }
.banner-list li{ color:var(--ink); }

/* Fassade hell */
.haus .hs-photo{ background:#E3E5E9; box-shadow:0 34px 70px -42px rgba(23,25,29,.55); }
.haus .hs-card{ background:var(--gray); box-shadow:none; }
.haus .hs-card::before{ background:var(--accent); }
.haus .hs-card.is-on{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--accent), 0 18px 40px -30px rgba(23,25,29,.45); }
.haus .hs-card:focus-visible{ outline-color:var(--ink); }
.haus .hs-no{ background:var(--ink); color:#fff; }
.haus .hs-card.is-on .hs-no{ background:var(--accent); }
.haus .hs-card b{ color:var(--ink); }
.haus .hs-card p{ color:var(--body); }
.haus .hs-dot span{ box-shadow:0 0 0 4px var(--accent), 0 10px 24px -6px rgba(0,0,0,.5); }
.haus .hs-dot.is-on span{ background:var(--accent); color:#fff; }
.haus .hs-quote blockquote{ color:var(--ink); }
.haus .hs-quote figcaption{ color:#6b717a; }
.haus .hs-quote figcaption b{ color:var(--ink); }

/* Über uns: Werte aus dem Onboarding */
.ab-werte{ margin:22px 0 4px; }
.ab-werte-h{ font-family:'Montserrat',system-ui,sans-serif; font-weight:700; font-size:1rem; color:var(--ink); margin-bottom:12px; }
.ab-werte ul{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 22px; }
.ab-werte li{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:.95rem; line-height:1.35; color:var(--ink); }
.ab-werte .sq{ width:10px; height:10px; }
.ab-ph .ki-badge{ top:16px; right:14px; font-size:.68rem; padding:5px 8px; }

/* Kontakt: Erreichbarkeit als ruhige Kachel ohne Pfeil */
.ctile--info,.ctile--info:hover{ translate:none; }
.sec--gray .ctile--info:hover{ box-shadow:inset 0 0 0 1px rgba(28,29,36,.08); }

/* Schluss hell: Foto bleibt hell, Text auf weißer Karte */
.cta--hell{ padding:clamp(72px, 8vw, 128px) 0; background:#E9EAEC; color:var(--body); }
.cta--hell::before{ display:none; }
.cta--hell .cta-veil{ background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 40%, rgba(23,25,29,.12) 100%); }
.cta--hell .cta-in{ position:relative; width:min(100% - 40px, 820px); padding:clamp(32px, 4vw, 56px) clamp(22px, 4vw, 56px); border-radius:4px; background:#fff; box-shadow:0 40px 90px -46px rgba(0,0,0,.6); }
.cta--hell .cta-in::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--tri); border-radius:4px 4px 0 0; }
.cta--hell .h2{ color:var(--ink); text-shadow:none; }
.cta--hell .h2 em{ color:var(--accent); }
.cta--hell .kicker{ color:var(--accent); text-shadow:none; }
.cta--hell .sub{ color:var(--body); margin-inline:auto; }
.cta--hell .btn--glass{ background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(23,25,29,.22); }
.cta--hell .btn--glass:hover{ background:var(--gray); }
.cta--hell .sgw{ box-shadow:inset 0 0 0 1px rgba(23,25,29,.12); }
.cta--hell :focus-visible{ outline-color:var(--ink); }
@media (max-width:600px){ .cta--hell{ padding:56px 0; } .cta--hell .cta-in{ width:calc(100% - 32px); } }

/* Footer hell */
.ftr{ background:var(--gray); color:var(--body); }
.ftr .ftr-h{ color:var(--ink); }
.ftr .ftr-col a,.ftr .ftr-legal a{ color:var(--body); }
.ftr .ftr-col a:hover,.ftr .ftr-legal a:hover{ color:var(--ink); }
.ftr .ftr-contact .ic{ color:var(--accent); }
.ftr .ftr-bottom{ border-top-color:var(--line); }
.ftr .ftr-copy,.ftr .ftr-badge{ color:#6b717a; }
.ftr .ftr-badge:hover{ color:var(--ink); }
.ftr :focus-visible{ outline-color:var(--ink); }
.ftr-ki{ margin-top:34px; max-width:90ch; font-size:.8rem; line-height:1.55; color:#6b717a; }

/* =====================================================================
   Premium-Durchgang 29.10.: Pinselstrich, Farbtonkarte, Einsatzkarte, Handy-Leiste
   ===================================================================== */
/* Pinselstrich als Markenzeichen: zieht sich einmal unter das Keyword */
.has-brush{ position:relative; display:inline-block; isolation:isolate; }
.h1-l.has-brush{ display:block; width:fit-content; }
.brush{ position:absolute; z-index:-1; left:-2%; width:104%; bottom:-.1em; height:.36em; overflow:visible; pointer-events:none; }
.brush path{ fill:none; stroke:var(--accent); stroke-width:17; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:brush-zug 1.1s cubic-bezier(.65,0,.35,1) .45s forwards; }
.brush .brush-2{ stroke-width:5; opacity:.5; animation-delay:.7s; }
.has-brush--gelb .brush{ bottom:.04em; height:.46em; }
.has-brush--gelb .brush path{ stroke:var(--t-gelb); stroke-width:24; }
.has-brush--gelb .brush .brush-2{ stroke-width:9; opacity:.55; }
html.rv-on .rv:not(.in) .brush path{ animation-play-state:paused; }
@keyframes brush-zug{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){ .brush path{ animation:none; stroke-dashoffset:0; } }

/* Leistungen: Etikett wie eine echte Farbtonkarte, Farbfeld im Ton */
.services .pfan .pchip .pchip-sw{ display:inline-flex; align-items:center; gap:8px; padding:7px 10px 7px 7px; background:#fff !important; color:var(--ink) !important; box-shadow:0 10px 24px -14px rgba(23,25,29,.55); }
.services .pfan .pchip .pchip-sw::before{ content:""; width:15px; height:15px; border-radius:2px; background:var(--sw); box-shadow:inset 0 0 0 1px rgba(23,25,29,.16); flex:0 0 auto; }
.pchip:nth-child(1){ --sw:#F4F2EC; } .pchip:nth-child(2){ --sw:var(--t-rot); } .pchip:nth-child(3){ --sw:var(--t-blau); } .pchip:nth-child(4){ --sw:var(--t-gelb); }

/* Einsatzgebiet: Text links, Schemakarte rechts */
.area-grid{ display:grid; gap:clamp(34px, 5vw, 84px); grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:1024px){ .area-grid{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); } }
.area .head{ margin-bottom:clamp(26px, 3vw, 40px); }
.area .places{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.area .place,.area .place + .place{ padding:22px 18px 14px 0; border-left:0; }
.area .place:nth-child(even){ padding-left:18px; border-left:1px solid var(--line); }
.area-map{ position:relative; margin:0; border-radius:4px; overflow:hidden; background:#fff; box-shadow:0 34px 80px -48px rgba(23,25,29,.55), inset 0 0 0 1px rgba(23,25,29,.06); }
.area-map::before{ content:""; position:absolute; z-index:2; left:0; right:0; top:0; height:6px; background:var(--tri); }
.area-map svg{ display:block; width:100%; height:auto; }
.area-map figcaption{ position:absolute; left:12px; bottom:9px; font-size:.68rem; color:#8a9099; }
#am-dots circle{ fill:rgba(23,25,29,.09); }
.am-bg{ fill:url(#am-dots); }
.am-berlin{ fill:rgba(31,63,152,.07); stroke:var(--t-blau); stroke-width:1.5; stroke-dasharray:5 5; stroke-opacity:.5; }
.am-havel{ fill:none; stroke:#9DBEE0; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.am-ring{ fill:rgba(201,24,43,.05); stroke:var(--accent); stroke-width:1.2; stroke-dasharray:3 5; stroke-opacity:.55; }
.am-ring--2{ fill:none; stroke-opacity:.32; }
.am-km{ font:700 11px 'Open Sans',system-ui,sans-serif; fill:var(--accent); opacity:.8; }
.am-route{ fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:.018 .014; animation:am-fahrt 2.6s linear infinite; }
@keyframes am-fahrt{ to{ stroke-dashoffset:-.064; } }
.am-city{ font:800 24px 'Montserrat',system-ui,sans-serif; fill:var(--t-blau); letter-spacing:-.01em; }
.am-mitte{ fill:var(--t-blau); stroke:#fff; stroke-width:2; }
.am-ort circle{ fill:#fff; stroke:var(--ink); stroke-width:2; }
.am-ort text{ font:600 12.5px 'Open Sans',system-ui,sans-serif; fill:var(--ink); }
.am-pin{ fill:var(--accent); stroke:#fff; stroke-width:3; }
.am-pulse{ fill:var(--accent); transform-box:fill-box; transform-origin:center; animation:am-puls 2.4s ease-out infinite; }
@keyframes am-puls{ from{ transform:scale(1); opacity:.42; } to{ transform:scale(3.4); opacity:0; } }
.am-home-t{ font:800 15px 'Montserrat',system-ui,sans-serif; fill:var(--ink); }
.am-home-s{ font:600 11px 'Open Sans',system-ui,sans-serif; fill:var(--accent); }
.am-land{ font:700 10.5px 'Open Sans',system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; fill:#9aa0a8; }
@media (prefers-reduced-motion:reduce){ .am-route,.am-pulse{ animation:none; } }

/* Handy: Kontaktleiste unten, nach der Hero */
.mbar{ display:none; }
@media (max-width:760px){
  .mbar{ position:fixed; z-index:95; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:6px; padding:6px; border-radius:8px; background:#fff;
    box-shadow:0 18px 44px -14px rgba(23,25,29,.5), inset 0 0 0 1px rgba(23,25,29,.08); translate:0 160%; transition:translate .45s var(--ease); }
  .mbar.is-on{ translate:0 0; }
  .mbar a{ display:flex; align-items:center; justify-content:center; gap:7px; min-height:50px; border-radius:5px; background:var(--gray); color:var(--ink); font-weight:700; font-size:.9rem; line-height:1.15; text-align:center; }
  .mbar a:active{ scale:.97; }
  .mbar .ic{ width:18px; height:18px; flex:0 0 auto; }
  .mbar-wa .ic{ color:#1DA851; }
  .mbar .mbar-main{ background:var(--accent); color:#fff; }
  body.mbar-on .wa{ display:none !important; }
  .ftr{ padding-bottom:104px; }
}
@media (max-width:360px){ .mbar a{ font-size:.82rem; gap:5px; } }
@media (max-width:600px){
  .am-ort text{ font-size:15px; } .am-home-t{ font-size:18px; } .am-home-s{ font-size:13px; } .am-km{ font-size:13px; } .am-city{ font-size:28px; }
  .area-map figcaption{ font-size:.62rem; }
}