/* ==========================================================================
   Klaus Ginter – Die Malerwerkstatt
   Basis: Ginter Malerwerkstatt Design System (Tokens 1:1 übernommen)
   Leitgedanke: Werkstatt statt Farbpalette – die Arbeit liefert die Farbe.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --anthrazit-900:#1C1B1A;
  --anthrazit-800:#2B2A28;
  --anthrazit-700:#3D3B37;
  --anthrazit-600:#55524C;
  --tanne-900:#24332B;
  --tanne-800:#3E5648;
  --tanne-700:#55705F;
  --tanne-600:#7A9384;
  --tanne-200:#DCE5DF;
  --ocker-900:#96551E;
  --ocker-800:#B87230;
  --ocker-600:#D98E3D;
  --ocker-400:#E9B678;
  --ocker-200:#F5E3CB;
  --kalk:#FBF9F5;
  --leinen:#F2EEE6;
  --leinen-tief:#EAE4D8;
  --sandgrau:#D6CFC2;
  --stein:#6E675D;
  --on-dark-muted:#B5AFA4;
  --on-dark-line:#4A4741;
  --on-forest-muted:rgba(251,249,245,.78);
  --on-forest-line:rgba(251,249,245,.22);

  --font-display:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-body:"Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",Arial,sans-serif;
  --fv-display:"opsz" 36,"SOFT" 0,"WONK" 0;
  --fv-display-lg:"opsz" 72,"SOFT" 0,"WONK" 0;

  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-tape:cubic-bezier(.77,0,.18,1);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:320ms;
  --dur-reveal:520ms;

  --radius:2px;
  --focus-ring:0 0 0 3px rgba(217,142,61,.55);
  --scrim-bottom:linear-gradient(to top,rgba(28,27,26,.8) 0%,rgba(28,27,26,.48) 42%,rgba(28,27,26,0) 100%);

  --container:1240px;
  --pad:clamp(1rem,4vw,2.5rem);
  --section:clamp(4.5rem,9vw,7.5rem);
  --section-tight:clamp(3rem,6vw,5rem);
  --header-h:88px;
}

/* ---------- Reset & Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1.5rem}
body{
  margin:0;background:var(--leinen);color:var(--anthrazit-800);
  font:400 1.125rem/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure,blockquote{margin:0}
address{font-style:normal}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,.display,.h1,.h2,.h3,.h4{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-variation-settings:var(--fv-display);letter-spacing:-.015em;
  text-wrap:balance;color:inherit;
}
a{color:var(--ocker-900);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--anthrazit-800)}
::selection{background:var(--ocker-200);color:var(--anthrazit-800)}
:focus-visible{outline:2px solid var(--anthrazit-800);outline-offset:2px;box-shadow:var(--focus-ring)}
.section--dark :focus-visible,.section--forest :focus-visible,.site-footer :focus-visible{outline-color:var(--leinen)}

[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:1rem;top:-100px;z-index:100;background:var(--anthrazit-800);color:var(--leinen);padding:.75rem 1rem;border-radius:var(--radius);text-decoration:none}
.skip-link:focus{top:1rem}

.icon{width:1.125em;height:1.125em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Layout ---------- */
.container{width:100%;max-width:calc(var(--container) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.container--narrow{max-width:calc(820px + 2 * var(--pad))}
.section{padding-block:var(--section)}
.section--tight{padding-block:var(--section-tight)}
.section--kalk{background:var(--kalk)}
.section--sunken{background:var(--leinen-tief)}
.section--dark{background:var(--anthrazit-800);color:var(--leinen)}
.section--forest{background:var(--tanne-800);color:var(--kalk)}
.hairline-top{border-top:1px solid var(--sandgrau)}
.stack{display:flex;flex-direction:column;gap:1rem}
.stack-lg{display:flex;flex-direction:column;gap:1.5rem}

/* ---------- Typografie ---------- */
.display{font-size:clamp(2.75rem,1.35rem + 4.9vw,5.6rem);line-height:1.02;letter-spacing:-.028em;font-variation-settings:var(--fv-display-lg)}
.h1{font-size:clamp(2.4rem,1.5rem + 3.3vw,4.1rem);line-height:1.06;letter-spacing:-.022em;font-variation-settings:var(--fv-display-lg)}
.h2{font-size:clamp(2rem,1.4rem + 2.1vw,3.1rem);line-height:1.1;letter-spacing:-.02em}
.h3{font-size:clamp(1.45rem,1.2rem + .85vw,2rem);line-height:1.2}
.h4{font-size:1.375rem;line-height:1.3}
.lead{font-size:clamp(1.125rem,1rem + .4vw,1.3125rem);line-height:1.6;color:var(--stein);max-width:54ch}
.muted{color:var(--stein)}
.prose p+p{margin-top:1rem}
.prose p{max-width:68ch}
.section--dark .lead,.section--dark .muted{color:var(--on-dark-muted)}
.section--forest .lead,.section--forest .muted{color:var(--on-forest-muted)}

.label{
  display:inline-flex;align-items:center;gap:.75rem;
  font:600 .8125rem/1.1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--stein);
}
.label--rule::before{content:"";width:28px;height:2px;background:var(--ocker-600);flex:none}
.label--accent{color:var(--ocker-900)}
.section--dark .label,.site-footer .label{color:var(--on-dark-muted)}
.section--forest .label{color:var(--on-forest-muted)}
.on-photo .label{color:var(--leinen)}

.section-head{display:flex;flex-direction:column;gap:1rem;max-width:720px}
.section-head--split{max-width:none;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.section-head--split>div{display:flex;flex-direction:column;gap:1rem;max-width:720px}

/* ---------- Buttons ---------- */
.btn{
  --h:52px;position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  min-height:var(--h);padding:0 1.5rem;border-radius:var(--radius);border:1.5px solid transparent;
  font:600 1.0625rem/1 var(--font-body);letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-slow) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}
.btn--lg{--h:58px;padding:0 1.75rem;font-size:1.125rem}
.btn--block{width:100%}
.btn .icon{transition:transform var(--dur-base) var(--ease-standard)}
.btn:hover .icon--arrow{transform:translateX(3px)}

.btn--primary{background:var(--ocker-600);color:var(--anthrazit-800)}
.btn--primary:hover{background:var(--ocker-400);color:var(--anthrazit-800)}
.btn--primary:active{background:var(--ocker-600)}

/* Sekundär: Anthrazit „streicht" sich beim Hover von links ein */
.btn--secondary{border-color:var(--anthrazit-800);color:var(--anthrazit-800);background:transparent}
.btn--secondary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--anthrazit-800);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease-out)}
.btn--secondary:hover{color:var(--leinen)}
.btn--secondary:hover::before{transform:scaleX(1)}
.on-dark .btn--secondary,.section--dark .btn--secondary,.section--forest .btn--secondary{border-color:var(--leinen);color:var(--leinen)}
.on-dark .btn--secondary::before,.section--dark .btn--secondary::before,.section--forest .btn--secondary::before{background:var(--leinen)}
.on-dark .btn--secondary:hover,.section--dark .btn--secondary:hover,.section--forest .btn--secondary:hover{color:var(--anthrazit-800)}

.btn--ghost{--h:44px;padding:0;border:0;background:none;color:var(--anthrazit-800);overflow:visible}
.btn--ghost span{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size var(--dur-slow) var(--ease-out);padding-bottom:2px}
.btn--ghost:hover{color:var(--anthrazit-800)}
.btn--ghost:hover span{background-size:100% 1px}
.section--dark .btn--ghost,.section--forest .btn--ghost{color:var(--leinen)}

.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:30;background:var(--leinen);border-bottom:1px solid var(--sandgrau)}
.header-inner{display:flex;align-items:center;gap:2rem;min-height:var(--header-h)}
.wordmark{display:inline-flex;flex-direction:column;gap:.3rem;text-decoration:none;color:var(--anthrazit-800);line-height:1}
.wordmark:hover{color:var(--anthrazit-800)}
.wordmark__name{font-family:var(--font-display);font-weight:600;font-variation-settings:var(--fv-display);font-size:1.75rem;letter-spacing:.06em;line-height:.9}
.wordmark__sub{font:600 .625rem/1 var(--font-body);letter-spacing:.24em;text-transform:uppercase}
.wordmark--inverse{color:var(--leinen)}
.wordmark--inverse:hover{color:var(--leinen)}

.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:2.25rem}
.main-nav a{position:relative;display:block;padding:.5rem 0;color:var(--anthrazit-800);text-decoration:none;font-weight:600;font-size:1.0625rem}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--anthrazit-800);transform:scaleX(0);transform-origin:right;transition:transform var(--dur-slow) var(--ease-out)}
.main-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.main-nav a[aria-current="page"]::after{background:var(--ocker-600);transform:scaleX(1)}

.header-phone{display:inline-flex;align-items:center;gap:.6rem;padding-left:2rem;border-left:1px solid var(--sandgrau);color:var(--anthrazit-800);text-decoration:none;font-weight:600;font-size:1.125rem;white-space:nowrap}
.header-phone .icon{color:var(--tanne-800)}
.header-phone:hover{color:var(--ocker-900)}
.header-phone small{display:block;font-size:.75rem;font-weight:400;color:var(--stein);letter-spacing:0}

.nav-toggle{display:none;margin-left:auto;align-items:center;gap:.5rem;min-height:48px;padding:0 .25rem;background:none;border:0;cursor:pointer;font-weight:600}
.nav-toggle .icon{width:26px;height:26px}
.mobile-nav{display:none}

@media (max-width:980px){
  :root{--header-h:72px}
  .main-nav,.header-phone{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-nav{
    display:block;position:fixed;inset:0;z-index:50;background:var(--leinen);
    padding:1rem var(--pad) 2rem;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--dur-slow) var(--ease-standard),transform var(--dur-slow) var(--ease-out),visibility 0s linear var(--dur-slow);
  }
  .mobile-nav.is-open{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-slow) var(--ease-standard),transform var(--dur-slow) var(--ease-out)}
  .mobile-nav__top{display:flex;align-items:center;justify-content:space-between;min-height:calc(var(--header-h) - 1rem);border-bottom:1px solid var(--sandgrau);margin-bottom:1rem}
  .mobile-nav ul{display:flex;flex-direction:column}
  .mobile-nav li{border-bottom:1px solid var(--sandgrau)}
  .mobile-nav a.mobile-nav__link{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 0;font-family:var(--font-display);font-variation-settings:var(--fv-display);font-weight:600;font-size:1.75rem;color:var(--anthrazit-800);text-decoration:none}
  .mobile-nav a.mobile-nav__link[aria-current="page"]{color:var(--ocker-900)}
  .mobile-nav .sub a{font-family:var(--font-body);font-size:1.125rem;padding:.75rem 0 .75rem 1rem}
  .mobile-nav__cta{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}
  .mobile-nav__cta p{color:var(--stein);font-size:1rem}
}

/* ---------- Mobile Anrufleiste ---------- */
.callbar{display:none}
@media (max-width:860px){
  .callbar{
    display:grid;grid-template-columns:1.2fr 1fr;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:.625rem var(--pad) calc(.625rem + env(safe-area-inset-bottom));
    background:var(--leinen);border-top:1px solid var(--sandgrau);
    transform:translateY(110%);transition:transform var(--dur-slow) var(--ease-out);
  }
  .callbar.is-visible{transform:none}
  .callbar .btn{--h:50px;padding:0 1rem;font-size:1rem}
  body{padding-bottom:76px}
}

/* ---------- Hero Startseite ---------- */
.hero{position:relative;padding-block:clamp(2.5rem,6vw,5rem) clamp(4rem,8vw,6.5rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.75rem}
.hero-copy .display{max-width:12ch;font-size:clamp(2.6rem,1rem + 4.1vw,5.2rem)}
.hero-facts{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:1rem;color:var(--stein)}
.hero-facts li{display:inline-flex;align-items:center;gap:.5rem}
.hero-facts .icon{color:var(--tanne-800);width:18px;height:18px}

.hero-visual{position:relative}
.media{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--leinen-tief)}
.media img{width:100%;height:100%;object-fit:cover}
.media-inner{position:absolute;inset:-10% 0;will-change:transform}
.media-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media,.media--portrait{aspect-ratio:4/5}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{max-width:620px}
  .hero-media{aspect-ratio:5/4}
}
@media (max-width:620px){
  .hero-media{aspect-ratio:1/1}
}

/* ---------- Versprechen ---------- */
.promise{border-top:1px solid var(--sandgrau);border-bottom:1px solid var(--sandgrau);background:var(--kalk)}
.promise-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}
.promise-item{display:flex;flex-direction:column;gap:.625rem;padding:2.25rem 2.25rem 2.5rem;border-left:1px solid var(--sandgrau)}
.promise-item:last-child{border-right:1px solid var(--sandgrau)}
.promise-item .icon{width:26px;height:26px;color:var(--tanne-800);margin-bottom:.5rem}
.promise-item p{font-size:1rem;color:var(--stein);line-height:1.55}
@media (max-width:980px){
  .promise-item{padding:1.75rem 1.5rem 2rem}
}
@media (max-width:860px){
  .promise-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .promise-item,.promise-item:last-child{border-left:0;border-right:0;padding:1.35rem 0;display:grid;grid-template-columns:26px 1fr;column-gap:1rem;row-gap:.25rem}
  .promise-item .icon{grid-row:span 2;margin:.15rem 0 0}
  .promise-item+.promise-item{border-top:1px solid var(--sandgrau)}
}

/* ---------- Manifest ---------- */
.manifest-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:2rem clamp(2rem,5vw,5rem);align-items:start}
.manifest-grid>.label{margin-top:1.1rem}
.manifest-text{font-family:var(--font-display);font-variation-settings:var(--fv-display-lg);font-weight:600;font-size:clamp(1.75rem,1.1rem + 2.4vw,3.25rem);line-height:1.18;letter-spacing:-.02em;text-wrap:pretty}
.manifest-text .word{transition:opacity .15s linear}
.manifest-sign{grid-column:2;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.manifest-sign__line{width:64px;height:2px;background:var(--ocker-600)}
.manifest-sign strong{display:block;font-size:1.125rem}
.manifest-sign div span{color:var(--stein);font-size:1rem}
.manifest-sign .btn{margin-left:auto}
@media (max-width:860px){
  .manifest-grid{grid-template-columns:1fr}
  .manifest-sign{grid-column:1}
  .manifest-sign .btn{margin-left:0}
}

/* ---------- Leistungskarten ---------- */
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:clamp(2.5rem,5vw,4rem)}
.card-service{
  position:relative;display:flex;flex-direction:column;background:var(--kalk);border:1px solid var(--sandgrau);border-radius:var(--radius);
  color:var(--anthrazit-800);text-decoration:none;overflow:hidden;transition:border-color var(--dur-base) var(--ease-standard);
}
.card-service::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ocker-600);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-reveal) var(--ease-out)}
.card-service:hover{border-color:var(--anthrazit-800);color:var(--anthrazit-800)}
.card-service:hover::after{transform:scaleX(1)}
.card-service__media{aspect-ratio:4/3;overflow:hidden;background:var(--leinen-tief)}
.card-service__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-reveal) var(--ease-standard)}
.card-service:hover .card-service__media img{transform:scale(1.04)}
.card-service__body{display:flex;flex-direction:column;gap:.75rem;padding:1.75rem 1.75rem 2rem;flex:1}
.card-service__no{font:600 .8125rem/1 var(--font-body);letter-spacing:.1em;color:var(--stein)}
.card-service__body p{font-size:1.0625rem;color:var(--stein);line-height:1.55}
.checklist{display:flex;flex-direction:column;gap:.5rem}
.checklist li{display:flex;gap:.625rem;align-items:flex-start;line-height:1.45}
.checklist .icon{color:var(--tanne-800);width:18px;height:18px;margin-top:.2em}
.card-service .checklist{font-size:1rem;margin-top:.25rem}
.card-service__more{margin-top:auto;padding-top:1.25rem;display:inline-flex;align-items:center;gap:.5rem;font-weight:600}
.card-service__more .icon{transition:transform var(--dur-base) var(--ease-standard)}
.card-service:hover .card-service__more .icon{transform:translateX(3px)}

.card-other{display:flex;flex-direction:column;justify-content:center;gap:1.25rem;padding:2.25rem;background:var(--tanne-800);color:var(--kalk);border-radius:var(--radius)}
.card-other p{color:var(--on-forest-muted)}
.card-other .btn{align-self:flex-start}
@media (max-width:980px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.service-grid{grid-template-columns:1fr}}

/* ---------- Bildband mit Zitat ---------- */
.band-wrap{padding-block:0}
.band{position:relative;height:clamp(460px,82vh,780px);overflow:hidden;color:var(--leinen);will-change:clip-path}
.band .media-inner{inset:-14% 0}
.band__scrim{position:absolute;inset:0;background:var(--scrim-bottom)}
.band__content{position:relative;height:100%;display:flex;align-items:flex-end;padding-bottom:clamp(2.5rem,6vw,5rem)}
.band blockquote{display:flex;flex-direction:column;gap:1.5rem;max-width:760px}
.band blockquote p{max-width:none}
.band .label{color:var(--leinen)}

/* ---------- Vorher / Nachher ---------- */
.ba-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.ba{
  --pos:50%;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--leinen-tief);
  cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y;
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--ocker-600);pointer-events:none}
.ba__knob{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:999px;background:var(--ocker-600);color:var(--anthrazit-800);display:grid;place-items:center;transition:transform var(--dur-base) var(--ease-standard)}
.ba__knob svg{width:26px;height:26px}
.ba.is-dragging .ba__knob{transform:scale(1.06)}
.ba__tag{position:absolute;bottom:1rem;padding:.45rem .7rem;border-radius:var(--radius);background:rgba(28,27,26,.58);color:var(--leinen);font:600 .75rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.ba__tag--before{left:1rem}
.ba__tag--after{right:1rem}
.ba input[type="range"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ba:has(input:focus-visible) .ba__knob{box-shadow:0 0 0 3px var(--anthrazit-800),0 0 0 7px rgba(217,142,61,.55)}
.ba-caption{margin-top:.875rem;font-size:.9375rem;color:var(--stein)}

.quote{border-left:2px solid var(--ocker-600);padding:.25rem 0 .25rem 1.5rem;display:flex;flex-direction:column;gap:.875rem}
.quote p{font-family:var(--font-display);font-variation-settings:var(--fv-display);font-weight:600;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.4}
.quote footer{font-size:1rem;color:var(--stein)}
.quote footer strong{color:var(--anthrazit-800)}
.section--forest .quote footer,.section--forest .quote footer strong{color:var(--on-forest-muted)}
@media (max-width:860px){.ba-grid{grid-template-columns:1fr}.ba{aspect-ratio:1/1}}

/* ---------- Ablauf ---------- */
.process-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2.5rem,7vw,7rem);align-items:start}
.process-head{position:sticky;top:3rem;display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.steps-wrap{position:relative;padding-left:clamp(2.5rem,5vw,4rem)}
.steps-track{position:absolute;left:0;top:.5rem;bottom:.5rem;width:1px;background:var(--on-dark-line)}
.steps-track span{position:absolute;left:-.5px;top:0;width:2px;height:100%;background:var(--ocker-600);transform:scaleY(var(--p,0));transform-origin:top}
.step{position:relative;padding-block:0 clamp(2.5rem,5vw,4rem)}
.step:last-child{padding-bottom:0}
.step::before{
  content:"";position:absolute;left:calc(-1 * clamp(2.5rem,5vw,4rem) - 5px);top:.55rem;width:11px;height:11px;border-radius:999px;
  background:var(--anthrazit-800);border:2px solid var(--on-dark-line);transition:background-color var(--dur-slow),border-color var(--dur-slow);
}
.step.is-active::before{background:var(--ocker-600);border-color:var(--ocker-600)}
.step__no{display:block;font:600 .8125rem/1 var(--font-body);letter-spacing:.1em;color:var(--on-dark-muted);margin-bottom:.875rem}
.step h3{margin-bottom:.75rem;transition:color var(--dur-slow)}
.step p{color:var(--on-dark-muted);max-width:46ch}
.js .step:not(.is-active) h3{color:var(--on-dark-muted)}
@media (max-width:860px){
  .process-grid{grid-template-columns:1fr}
  .process-head{position:static}
}

/* ---------- Projektstreifen ---------- */
.project-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;margin-top:clamp(2.5rem,5vw,4rem)}
.project-strip>*:nth-child(even){margin-top:4rem}
.figure{display:flex;flex-direction:column;gap:.875rem}
.figure .media{aspect-ratio:4/5}
.figure figcaption{display:flex;flex-direction:column;gap:.35rem}
.figure figcaption .label{font-size:.75rem}
.figure figcaption span:last-child{font-size:1rem;line-height:1.45}
@media (max-width:980px){.project-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.project-strip>*:nth-child(even){margin-top:2.5rem}}
@media (max-width:520px){.project-strip{gap:1rem}.project-strip>*:nth-child(even){margin-top:1.5rem}}

/* ---------- Einzugsgebiet ---------- */
.area-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.area-list{border-top:1px solid var(--sandgrau)}
.area-list li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--sandgrau)}
.area-list .town{font-family:var(--font-display);font-variation-settings:var(--fv-display);font-weight:600;font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);line-height:1.1;letter-spacing:-.015em}
.area-list .dist{font-size:.9375rem;color:var(--stein);white-space:nowrap}
.area-list li:first-child .town{color:var(--tanne-800)}
@media (max-width:860px){.area-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.faq-grid .section-head{position:sticky;top:3rem}
.faq details{border-top:1px solid var(--sandgrau)}
.faq details:last-child{border-bottom:1px solid var(--sandgrau)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-variation-settings:var(--fv-display);font-weight:600;font-size:clamp(1.15rem,1.05rem + .4vw,1.375rem);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--tanne-800)}
.faq .chev{flex:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--sandgrau);border-radius:999px;transition:transform var(--dur-slow) var(--ease-out),background-color var(--dur-base),border-color var(--dur-base)}
.faq .chev svg{width:18px;height:18px}
.faq details[open] .chev{transform:rotate(180deg);background:var(--anthrazit-800);border-color:var(--anthrazit-800);color:var(--leinen)}
.faq .answer{overflow:hidden}
.faq .answer p{padding:0 3.5rem 1.75rem 0;max-width:62ch}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}.faq-grid .section-head{position:static}.faq .answer p{padding-right:0}}

/* ---------- CTA ---------- */
.cta-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:end}
.cta-grid .stack-lg{align-items:flex-start}
.cta-card{display:flex;flex-direction:column;gap:1.25rem;padding:clamp(1.75rem,3vw,2.5rem);border:1px solid var(--on-forest-line);border-radius:var(--radius)}
.cta-phone{display:inline-flex;padding:.5rem 0;align-items:center;gap:.875rem;color:var(--kalk);text-decoration:none;font-family:var(--font-display);font-variation-settings:var(--fv-display-lg);font-weight:600;font-size:clamp(1.75rem,1.2rem + 2.2vw,3rem);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.cta-phone .icon{width:.75em;height:.75em;color:var(--ocker-600)}
.cta-phone:hover{color:var(--ocker-200)}
.cta-meta{display:flex;flex-direction:column;gap:.35rem;font-size:1rem;color:var(--on-forest-muted)}
.cta-meta div{display:flex;gap:.6rem;align-items:center}
.cta-meta .icon{width:18px;height:18px;color:var(--ocker-600)}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{background:var(--anthrazit-900);color:var(--leinen);padding-block:clamp(3.5rem,7vw,5.5rem) 2rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem}
.footer-col{display:flex;flex-direction:column;gap:1rem}
.footer-col ul{display:flex;flex-direction:column;gap:0}
.footer-col ul a{display:inline-block;padding:.35rem 0}
.site-footer a{color:var(--leinen);text-decoration:none}
.site-footer a:hover{color:var(--ocker-400)}
.footer-col p,.footer-col address{color:var(--on-dark-muted);font-size:1rem;line-height:1.6}
.footer-phone{display:inline-block;padding:.35rem 0;font-family:var(--font-display);font-variation-settings:var(--fv-display);font-weight:600;font-size:1.75rem;line-height:1.1;color:var(--ocker-600)!important}
.footer-phone:hover{color:var(--ocker-400)!important}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.5rem;border-top:1px solid var(--on-dark-line);font-size:.9375rem;color:var(--on-dark-muted)}
.footer-bottom ul{display:flex;gap:1.5rem}
.footer-bottom li{color:var(--on-dark-muted)}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Unterseiten: Kopf mit Foto ---------- */
.page-hero{position:relative;min-height:clamp(460px,72vh,680px);display:flex;align-items:flex-end;color:var(--leinen);overflow:hidden;background:var(--anthrazit-800)}
.page-hero__media{position:absolute;inset:0;overflow:hidden}
.page-hero__media .media-inner{inset:-8% 0}
.page-hero__media img{transform:scale(1.08);transition:transform 1.8s var(--ease-out)}
.is-loaded .page-hero__media img{transform:none}
.page-hero__scrim{position:absolute;inset:0;background:var(--scrim-bottom)}
.page-hero__content{position:relative;padding-block:4rem clamp(2.5rem,5vw,4rem);display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.page-hero__content .lead{color:rgba(242,238,230,.86);max-width:56ch}
.page-hero .label{color:var(--leinen)}

.page-intro{padding-block:clamp(3.5rem,8vw,6.5rem) clamp(2.5rem,5vw,4rem)}
.page-intro .stack-lg{max-width:860px}

.service-tabs{background:var(--leinen);border-bottom:1px solid var(--sandgrau)}
.service-tabs ul{display:flex;gap:2rem;overflow-x:auto;scrollbar-width:none}
.service-tabs ul::-webkit-scrollbar{display:none}
.service-tabs a{position:relative;display:block;padding:1.1rem 0;white-space:nowrap;color:var(--anthrazit-800);text-decoration:none;font-weight:600;font-size:1rem}
.service-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--anthrazit-800);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease-out)}
.service-tabs a:hover::after{transform:scaleX(1)}
.service-tabs a[aria-current="page"]::after{background:var(--ocker-600);transform:scaleX(1)}

.service-detail{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.service-detail .checklist{display:grid;grid-template-columns:1fr 1fr;gap:.875rem 2rem;margin-top:1rem}
.service-detail .checklist .icon{color:var(--ocker-900)}
.info-card{position:sticky;top:2rem;display:flex;flex-direction:column;gap:1.25rem;background:var(--kalk);border:1px solid var(--sandgrau);border-radius:var(--radius);padding:2rem}
.info-card hr{border:0;border-top:1px solid var(--sandgrau);margin:0}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{display:inline-flex;align-items:center;min-height:30px;padding:0 .7rem;border-radius:var(--radius);background:var(--tanne-200);color:var(--tanne-900);font-size:.875rem;font-weight:600}
@media (max-width:860px){
  .service-detail{grid-template-columns:1fr}
  .service-detail .checklist{grid-template-columns:1fr}
  .info-card{position:static}
}

.gallery-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:clamp(2rem,4vw,3rem)}
.gallery-3 .media{aspect-ratio:4/5}
@media (max-width:860px){.gallery-3{grid-template-columns:1fr 1fr}.gallery-3>*:last-child{display:none}}
@media (max-width:520px){.gallery-3{grid-template-columns:1fr}.gallery-3>*:last-child{display:flex}}

/* ---------- Leistungsübersicht ---------- */
.service-rows{display:flex;flex-direction:column}
.service-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding-block:clamp(3rem,6vw,5rem);border-top:1px solid var(--sandgrau)}
.service-row:nth-child(even) .service-row__media{order:2}
.service-row__media{aspect-ratio:5/4}
.service-row__body{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.service-row__no{font-family:var(--font-display);font-variation-settings:var(--fv-display-lg);font-weight:600;font-size:1rem;color:var(--ocker-900);letter-spacing:.02em}
@media (max-width:860px){.service-row{grid-template-columns:1fr}.service-row:nth-child(even) .service-row__media{order:0}}

/* ---------- Projekte ---------- */
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.filter button{min-height:44px;padding:0 1.1rem;border:1px solid var(--sandgrau);border-radius:var(--radius);background:transparent;cursor:pointer;font-weight:600;font-size:1rem;transition:background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base)}
.filter button:hover{border-color:var(--anthrazit-800)}
.filter button[aria-pressed="true"]{background:var(--anthrazit-800);border-color:var(--anthrazit-800);color:var(--leinen)}
.projects{columns:3 320px;column-gap:1.5rem;margin-top:clamp(2rem,4vw,3rem)}
.projects .figure{break-inside:avoid;margin-bottom:2.25rem}
.projects .figure[hidden]{display:none}
.projects .figure .media{aspect-ratio:var(--ratio,4/5)}

/* ---------- Über mich ---------- */
.about-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.about-hero .media{aspect-ratio:4/5}
.about-hero h1{overflow-wrap:break-word;hyphens:manual}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--sandgrau)}
.fact{padding:2rem 1.5rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.fact strong{font-family:var(--font-display);font-variation-settings:var(--fv-display-lg);font-weight:600;font-size:clamp(2.25rem,1.8rem + 1.6vw,3.25rem);line-height:1;letter-spacing:-.02em}
.fact span{color:var(--stein);font-size:1rem}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(2.5rem,5vw,4rem)}
.value{display:flex;flex-direction:column;gap:.875rem;padding-top:1.5rem;border-top:1px solid var(--on-dark-line)}
.value .step__no{margin:0}
.value p{color:var(--on-dark-muted)}
@media (max-width:860px){
  .about-hero{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr}
}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.contact-aside{display:flex;flex-direction:column;gap:2rem;position:sticky;top:2rem}
.contact-phone{display:inline-flex;padding:.5rem 0;align-items:center;gap:1rem;color:var(--anthrazit-800);text-decoration:none;font-family:var(--font-display);font-variation-settings:var(--fv-display-lg);font-weight:600;font-size:clamp(2.25rem,1.6rem + 2.4vw,3.5rem);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.contact-phone .icon{width:.7em;height:.7em;color:var(--tanne-800)}
.contact-phone:hover{color:var(--ocker-900)}
.contact-list{display:flex;flex-direction:column;border-top:1px solid var(--sandgrau)}
.contact-list li{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--sandgrau)}
.contact-list .icon{width:22px;height:22px;color:var(--tanne-800);margin-top:.15rem}
.contact-list a .icon{display:inline-block;width:15px;height:15px;margin:0 0 0 .2rem;vertical-align:-2px;color:currentColor}
.contact-list strong{display:block;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stein);margin-bottom:.15rem}
.mini-steps{counter-reset:s;display:flex;flex-direction:column;gap:.875rem}
.mini-steps li{counter-increment:s;display:flex;gap:1rem;font-size:1rem;line-height:1.5}
.mini-steps li::before{content:counter(s,decimal-leading-zero);font-weight:600;color:var(--ocker-900);letter-spacing:.05em;min-width:1.75rem}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}.contact-aside{position:static}}

.form-card{background:var(--kalk);border:1px solid var(--sandgrau);border-radius:var(--radius);padding:clamp(1.5rem,4vw,2.75rem)}
.form{display:flex;flex-direction:column;gap:1.5rem}
.form fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.form legend,.field>label{font-weight:600;font-size:1.0625rem;padding:0;margin-bottom:.5rem}
.form fieldset legend{margin-bottom:.25rem}
.field{display:flex;flex-direction:column}
.field>label{margin-bottom:.5rem}
.req{color:var(--ocker-900)}
.optional{font-weight:400;color:var(--stein);font-size:.9375rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media (max-width:620px){.form-row{grid-template-columns:1fr}}
.input,.select,.textarea{
  width:100%;min-height:52px;padding:.8rem 1rem;border:1px solid var(--sandgrau);border-radius:var(--radius);background:var(--leinen);
  font-size:1.0625rem;line-height:1.4;color:var(--anthrazit-800);
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),background-color var(--dur-fast);
}
.input::placeholder,.textarea::placeholder{color:#8E877C}
.input:hover,.select:hover,.textarea:hover{border-color:var(--stein)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--anthrazit-800);box-shadow:var(--focus-ring);background:var(--kalk)}
.textarea{min-height:150px;resize:vertical}
.select{appearance:none;-webkit-appearance:none;padding-right:3rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232B2A28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
[aria-invalid="true"]{border-color:var(--ocker-900)!important;border-width:2px}
.field-error{display:none;margin-top:.5rem;font-size:.9375rem;color:var(--ocker-900);font-weight:600}
.field.has-error .field-error,fieldset.has-error .field-error,.check-wrap.has-error .field-error{display:block}

.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.choices--2{grid-template-columns:1fr 1fr}
@media (max-width:620px){.choices{grid-template-columns:1fr}}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{display:flex;align-items:center;gap:.75rem;min-height:52px;padding:.65rem 1rem;border:1px solid var(--sandgrau);border-radius:var(--radius);background:var(--leinen);font-size:1rem;line-height:1.3;transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.choice span::before{content:"";flex:none;width:18px;height:18px;border-radius:999px;border:1.5px solid var(--stein);background:var(--kalk);box-shadow:inset 0 0 0 4px var(--kalk);transition:background-color var(--dur-base),border-color var(--dur-base)}
.choice:hover span{border-color:var(--stein)}
.choice input:checked+span{border-color:var(--anthrazit-800);background:var(--kalk)}
.choice input:checked+span::before{border-color:var(--anthrazit-800);background:var(--ocker-600)}
.choice input:focus-visible+span{box-shadow:var(--focus-ring);border-color:var(--anthrazit-800)}

.check{display:flex;gap:.875rem;align-items:flex-start;cursor:pointer;font-size:1rem;line-height:1.5}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:.1rem 0 0;border:1.5px solid var(--stein);border-radius:var(--radius);background:var(--kalk);display:grid;place-items:center;cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.check input::after{content:"";width:6px;height:11px;border:solid var(--leinen);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg) scale(0);transition:transform var(--dur-base) var(--ease-out)}
.check input:checked{background:var(--anthrazit-800);border-color:var(--anthrazit-800)}
.check input:checked::after{transform:translateY(-1px) rotate(45deg) scale(1)}
.check input:focus-visible{box-shadow:var(--focus-ring);outline:none}
.hp{position:absolute!important;left:0;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;clip:rect(0 0 0 0)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.form-foot p{font-size:.9375rem;color:var(--stein)}
.form-status{display:none;padding:1rem 1.25rem;border-radius:var(--radius);border:1px solid var(--ocker-900);background:var(--ocker-200);font-size:1rem}
.form-status.is-visible{display:block}
.form .btn[aria-busy="true"]{pointer-events:none;opacity:.7}

.form-success{display:none;flex-direction:column;gap:1.25rem;align-items:flex-start}
.form-success.is-visible{display:flex;animation:rise .7s var(--ease-out) both}
.form-success__icon{width:56px;height:56px;border-radius:999px;background:var(--tanne-800);color:var(--kalk);display:grid;place-items:center}
.form-success__icon svg{width:28px;height:28px}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ==========================================================================
   Bewegung – ruhig, aber spürbar. Nichts federt, nichts hüpft.
   Alles nur mit aktivem JS (.js), damit ohne Skript nichts unsichtbar bleibt.
   ========================================================================== */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="fade"]{transform:none}

/* „Abklebeband abziehen": das Bild wird entlang einer sauberen Kante freigelegt */
.js [data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--ease-tape);transition-delay:var(--d,0ms)}
.js [data-reveal="clip"].is-in{clip-path:inset(0 0 0 0)}
.js [data-reveal="clip-x"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.25s var(--ease-tape);transition-delay:var(--d,0ms)}
.js [data-reveal="clip-x"].is-in{clip-path:inset(0 0 0 0)}
.js [data-reveal^="clip"] img{transform:scale(1.14);transition:transform 1.8s var(--ease-out);transition-delay:var(--d,0ms)}
.js [data-reveal^="clip"].is-in img{transform:scale(1)}

.js [data-reveal="line"]{opacity:1;transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-tape);transition-delay:var(--d,0ms)}
.js [data-reveal="line"].is-in{transform:scaleX(1)}

/* Überschriften: Wörter steigen aus einer Kante auf */
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .1em 0;margin:0 -.08em -.1em 0}
.js [data-split] .w>span{display:inline-block;transform:translateY(108%);transition:transform 1.05s var(--ease-out);transition-delay:calc(var(--i) * 55ms + var(--d,0ms))}
.js [data-split].is-in .w>span{transform:none}

/* Platzhalter sichtbar machen: Seite mit ?platzhalter aufrufen */
.show-ph [data-ph]{outline:2px dashed var(--ocker-600)!important;outline-offset:4px;position:relative}
.show-ph [data-ph]::after{content:"Platzhalter: " attr(data-ph);position:absolute;left:0;top:0;z-index:20;transform:translateY(-100%);max-width:320px;padding:.3rem .5rem;background:var(--ocker-600);color:var(--anthrazit-800);font:600 .75rem/1.3 var(--font-body);letter-spacing:0;text-transform:none;white-space:normal;border-radius:2px;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important;transition-delay:0ms!important}
  .js [data-reveal],.js [data-reveal^="clip"],.js [data-reveal="line"]{opacity:1;transform:none;clip-path:none}
  .js [data-reveal^="clip"] img,.js [data-split] .w>span,.page-hero__media img{transform:none}
}

/* ---------- Sehr schmale Geräte (≤ 380 px) ---------- */
@media (max-width:380px){
  .display,.hero-copy .display{font-size:2.25rem}
  .h1{font-size:2rem}
  .h2{font-size:1.75rem}
  .cta-card{padding:1.25rem}
  .cta-phone{font-size:1.625rem;gap:.625rem}
  .contact-phone{font-size:2rem;gap:.625rem}
  .btn--lg{padding:0 1.25rem}
}