/* ==========================================================================
   EAK HAUSTECHNIK — Design System
   1. Tokens        2. Reset        3. Typografie     4. Layout / Raster
   5. Buttons       6. Header/Nav   7. Hero           8. Leistungen
   9. Ueber uns    10. Vorteile    11. Projekte      12. Ablauf
  13. Kontakt      14. Footer      15. Subseiten     16. Motion / Utilities
   ========================================================================== */

/* 1. TOKENS ================================================================ */
:root{
  /* Basis */
  --paper:#ffffff;
  --stone:#f3f3f0;          /* helles Warmgrau */
  --stone-2:#e9e9e4;
  --ink:#0e0f10;            /* Schwarz */
  --ink-2:#1a1c1e;
  --muted:#6c7075;
  --line:#dededa;
  --line-dark:#2b2e31;

  /* Markenfarben — an das Logo angelehnt, hier zentral anpassbar */
  --rot:#d42a26;            /* Gas */
  --orange:#ee7c10;         /* Solar / Gastro */
  --gruen:#3e9b3a;          /* Lueftung */
  --blau:#0b62a4;           /* Wasser / Heizung */

  /* Typografie */
  --f-display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* Raster */
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --maxw:1440px;
  --radius:2px;

  /* Rhythmus */
  --sp-section:clamp(4.5rem,9vw,9rem);
  --ease:cubic-bezier(.22,.61,.36,1);

  --header-h:78px;
}

/* 2. RESET ================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-display); font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button,input,textarea,select{font:inherit; color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
:focus-visible{outline:2px solid var(--blau); outline-offset:3px}
::selection{background:var(--ink); color:#fff}
hr{border:0; border-top:1px solid var(--line); margin:0}

/* 3. TYPOGRAFIE ============================================================ */
.h-xl,.h-lg,.h-md,.h-sm{
  font-family:var(--f-display); font-weight:600;
  letter-spacing:-.032em; line-height:1.02; text-wrap:balance;
}
.h-xl{font-size:clamp(2.75rem,1.4rem + 6.4vw,6rem); line-height:.96; letter-spacing:-.04em}
.h-lg{font-size:clamp(2rem,1.25rem + 3.4vw,3.75rem); line-height:1.02}
.h-md{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem); line-height:1.1; letter-spacing:-.026em}
.h-sm{font-size:clamp(1.125rem,1.05rem + .4vw,1.375rem); line-height:1.2; letter-spacing:-.018em; font-weight:600}

.eyebrow{
  font-family:var(--f-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:.75rem;
}
.eyebrow::before{
  content:""; width:28px; height:3px; flex:none;
  background:linear-gradient(90deg,var(--rot) 0 25%,var(--orange) 25% 50%,var(--gruen) 50% 75%,var(--blau) 75% 100%);
}
.lead{font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem); line-height:1.6; color:#3a3d40; max-width:62ch; text-wrap:pretty}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono); font-size:.8125rem; letter-spacing:.06em}

/* 4. LAYOUT ================================================================ */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--sp-section)}
.section--stone{background:var(--stone)}
.section--ink{background:var(--ink); color:#fff}
.section--ink .lead{color:#b6babd}
.section--ink .eyebrow{color:#8b9095}

.sec-head{display:grid; gap:1.5rem; margin-bottom:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:900px){
  .sec-head{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:end; gap:3rem}
  .sec-head__aside{padding-bottom:.4rem}
}
.sec-head__title{display:grid; gap:1.125rem}

/* Vier-Farb-Signatur */
.spectrum{height:3px; width:100%; border:0;
  background:linear-gradient(90deg,var(--rot) 0 25%,var(--orange) 25% 50%,var(--gruen) 50% 75%,var(--blau) 75% 100%)}

/* 5. BUTTONS =============================================================== */
.btn{
  --b-bg:var(--ink); --b-fg:#fff; --b-bd:var(--ink);
  position:relative; display:inline-flex; align-items:center; gap:.75rem;
  padding:1rem 1.6rem; background:var(--b-bg); color:var(--b-fg);
  border:1px solid var(--b-bd); border-radius:var(--radius);
  font-size:.875rem; font-weight:600; letter-spacing:.01em; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  overflow:hidden; isolation:isolate;
}
.btn__arrow{flex:none; transition:transform .4s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn:active{transform:translateY(0)}
.btn--ghost{--b-bg:transparent; --b-fg:var(--ink); --b-bd:var(--line)}
.btn--ghost:hover{--b-bg:var(--ink); --b-fg:#fff; --b-bd:var(--ink)}
.btn--light{--b-bg:#fff; --b-fg:var(--ink); --b-bd:#fff}
.btn--light:hover{--b-bg:transparent; --b-fg:#fff; --b-bd:rgba(255,255,255,.45)}
.btn--outline-light{--b-bg:transparent; --b-fg:#fff; --b-bd:rgba(255,255,255,.35)}
.btn--outline-light:hover{--b-bg:#fff; --b-fg:var(--ink); --b-bd:#fff}
.btn--block{width:100%; justify-content:center}

/* Textlink mit Unterstrich-Animation */
.link-u{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9375rem;
  padding-bottom:2px; background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .45s var(--ease);
}
.link-u:hover{background-size:100% 1px}

/* 6. HEADER / NAVIGATION =================================================== */
.topline{height:3px; background:linear-gradient(90deg,var(--rot) 0 25%,var(--orange) 25% 50%,var(--gruen) 50% 75%,var(--blau) 75% 100%)}

.topbar{background:var(--ink); color:#c9cdd1}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:40px; flex-wrap:wrap}
.topbar a{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.05em; display:inline-flex; align-items:center; gap:.5rem; padding-block:.5rem; transition:color .25s}
.topbar a:hover{color:#fff}
.topbar__group{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap}
.topbar__claim{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.08em; color:#82878c}
@media (max-width:720px){ .topbar__claim{display:none} }
@media (max-width:639px){
  .topbar__inner{justify-content:center}
  .topbar__group{gap:1.25rem; width:100%; justify-content:space-between}
  .topbar a[href^="mailto"]{display:none}
  .topbar a{font-size:.6875rem}
}

.header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--line); transition:box-shadow .3s var(--ease)}
.header.is-stuck{box-shadow:0 10px 30px -22px rgba(0,0,0,.45)}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:var(--header-h); transition:height .35s var(--ease)}
.header.is-stuck .header__inner{height:64px}

.brand{display:inline-flex; align-items:center; gap:.75rem}
.brand__mark{width:36px; height:36px; flex:none; transition:transform .5s var(--ease)}
.header.is-stuck .brand__mark{width:32px; height:32px}
.brand:hover .brand__mark{transform:translateY(-2px)}
.brand__text{display:grid; line-height:1}
.brand__name{font-weight:700; font-size:1.0625rem; letter-spacing:.01em}
.brand__sub{font-family:var(--f-mono); font-size:.5625rem; letter-spacing:.28em; color:var(--muted); margin-top:4px}

.nav{display:none}
@media (min-width:980px){
  .nav{display:flex; align-items:center; gap:2rem}
  .nav a{position:relative; font-size:.9rem; font-weight:500; padding-block:.4rem; color:#33373a; transition:color .25s}
  .nav a::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
  .nav a:hover{color:var(--ink)} .nav a:hover::after{transform:scaleX(1)}
  .nav a.is-active{color:var(--ink)} .nav a.is-active::after{transform:scaleX(1); background:var(--blau)}
}
.header__cta{display:none}
@media (min-width:980px){ .header__cta{display:inline-flex} }

.burger{display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; padding:0 11px; background:none; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer}
.burger span{display:block; height:1.5px; background:var(--ink); transition:transform .35s var(--ease), opacity .25s}
.burger span:nth-child(2){width:70%; margin-left:auto}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (min-width:980px){ .burger{display:none} }

.mobile-nav{position:fixed; inset:0; z-index:99; background:var(--paper); padding-top:calc(var(--header-h) + 44px);
  transform:translateY(-100%); visibility:hidden; transition:transform .5s var(--ease), visibility .5s; overflow-y:auto}
.mobile-nav.is-open{transform:translateY(0); visibility:visible}
.mobile-nav ol{border-top:1px solid var(--line)}
.mobile-nav li{border-bottom:1px solid var(--line)}
.mobile-nav a{display:flex; align-items:baseline; gap:1rem; padding:1.15rem 0; font-size:1.5rem; font-weight:600; letter-spacing:-.02em}
.mobile-nav a span{font-family:var(--f-mono); font-size:.6875rem; color:var(--muted); letter-spacing:.1em}
.mobile-nav__foot{padding-block:2rem; display:grid; gap:.75rem}
.mobile-nav__foot a{font-family:var(--f-mono); font-size:.875rem; letter-spacing:.04em}
body.is-locked{overflow:hidden}

/* 7. HERO ================================================================== */
.hero{position:relative; background:var(--ink); color:#fff; isolation:isolate; overflow:hidden}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 42%; opacity:.62; transform:scale(1.06); animation:heroZoom 16s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(14,15,16,.86) 0%,rgba(14,15,16,.42) 38%,rgba(14,15,16,.80) 82%,rgba(14,15,16,.96) 100%)}
.hero__inner{position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(600px,92svh,900px); padding-top:clamp(5rem,14vh,9rem); padding-bottom:clamp(2rem,5vh,3rem)}
.hero__eyebrow{color:#cfd3d6}
.hero__eyebrow::before{width:40px}
.hero__title{margin-top:1.75rem; max-width:17ch; color:#fff}
.hero__sub{margin-top:1.75rem; max-width:56ch; font-size:clamp(1.0625rem,1rem + .5vw,1.3125rem); line-height:1.58; color:#d3d7da; text-wrap:pretty}
.hero__actions{margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.875rem}

/* Leistungs-Index am Hero-Fuss */
.hero__index{margin-top:clamp(3rem,7vh,5rem); border-top:1px solid rgba(255,255,255,.16); padding-top:1.25rem;
  display:flex; gap:1.75rem; flex-wrap:wrap}
.hero__index li{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:#aeb3b7}
.hero__index i{width:7px; height:7px; flex:none; background:currentColor; border-radius:50%}
.hero__index .c-rot{color:var(--rot)} .hero__index .c-orange{color:var(--orange)}
.hero__index .c-gruen{color:var(--gruen)} .hero__index .c-blau{color:var(--blau)}
.hero__index li span{color:#aeb3b7}
@media (max-width:640px){ .hero__index{gap:.75rem 1.25rem} }

.scroll-cue{position:absolute; right:var(--gutter); bottom:2.25rem; display:none; writing-mode:vertical-rl;
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.scroll-cue::after{content:""; display:block; width:1px; height:44px; margin:.75rem auto 0; background:linear-gradient(rgba(255,255,255,.6),transparent); animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
@media (min-width:1200px){ .scroll-cue{display:block} }

/* 8. LEISTUNGEN ============================================================ */
.svc-grid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
@media (min-width:620px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .svc-grid{grid-template-columns:repeat(4,1fr)} }

.svc{--accent:var(--ink); position:relative; background:var(--paper); padding:clamp(1.75rem,2.6vw,2.5rem) clamp(1.5rem,2.2vw,2rem) clamp(2rem,3vw,2.75rem);
  display:flex; flex-direction:column; gap:1rem; min-height:250px; transition:background .4s var(--ease), transform .4s var(--ease)}
.svc::before{content:""; position:absolute; top:0; left:0; height:3px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.svc:hover{background:#fafaf8}
.svc:hover::before{transform:scaleX(1)}
.svc__no{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em; color:#a9adb1}
.svc__icon{width:40px; height:40px; color:var(--accent); margin-top:.25rem; transition:transform .5s var(--ease)}
.svc:hover .svc__icon{transform:translateY(-3px)}
.svc__title{font-size:1.1875rem; font-weight:600; letter-spacing:-.02em; margin-top:.35rem}
.svc__text{font-size:.9375rem; line-height:1.6; color:var(--muted); text-wrap:pretty}
.svc__more{margin-top:auto; padding-top:1rem; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease), transform .4s var(--ease)}
.svc:hover .svc__more, .svc:focus-within .svc__more{opacity:1; transform:translateY(0)}
.svc__link{position:absolute; inset:0}
.a-rot{--accent:var(--rot)} .a-orange{--accent:var(--orange)}
.a-gruen{--accent:var(--gruen)} .a-blau{--accent:var(--blau)} .a-ink{--accent:var(--ink)}

/* 9. UEBER UNS ============================================================= */
.about{display:grid; gap:clamp(2.5rem,6vw,5rem); align-items:center}
@media (min-width:960px){ .about{grid-template-columns:minmax(0,.92fr) minmax(0,1fr)} }
.about__media{position:relative}
.about__media::before{content:""; position:absolute; left:-16px; top:0; bottom:0; width:4px; z-index:0;
  background:linear-gradient(180deg,var(--rot) 0 25%,var(--orange) 25% 50%,var(--gruen) 50% 75%,var(--blau) 75% 100%)}
@media (max-width:560px){ .about__media::before{left:-10px; width:3px} }
.about__img{position:relative; z-index:1; width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(.18) contrast(1.04)}
.about__img-2{position:absolute; right:-12px; bottom:-34px; width:42%; max-width:220px; aspect-ratio:1/1; object-fit:cover;
  z-index:2; border:8px solid var(--paper); display:none}
@media (min-width:560px){ .about__img-2{display:block} }
.section--stone .about__img-2{border-color:var(--stone)}
.about__body{display:grid; gap:1.5rem}
.about__body p{color:#3a3d40; text-wrap:pretty}
.about__list{display:grid; gap:.875rem; margin-top:.25rem}
.about__list li{display:flex; gap:.875rem; align-items:flex-start; font-size:.9688rem}
.about__list svg{flex:none; width:20px; height:20px; margin-top:.25rem; color:var(--gruen)}

.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:1rem}
@media (min-width:760px){ .stats{grid-template-columns:repeat(3,1fr)} }
.stats__item{background:var(--paper); padding:1.5rem 1.25rem}
.section--stone .stats__item{background:var(--stone)}
.stats__n{font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem); font-weight:600; letter-spacing:-.04em; line-height:1}
.stats__n--text{font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem); white-space:nowrap}
.stats__l{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-top:.6rem}

/* 10. VORTEILE ============================================================= */
.adv-grid{display:grid; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark)}
@media (min-width:640px){ .adv-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .adv-grid{grid-template-columns:repeat(4,1fr)} }
.adv{background:var(--ink); padding:clamp(2rem,3.2vw,2.75rem) clamp(1.5rem,2.4vw,2rem); display:grid; gap:1rem; align-content:start;
  transition:background .45s var(--ease)}
.adv:hover{background:#151719}
.adv__n{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.16em; color:#71767a}
.adv__rule{width:40px; height:3px; background:var(--accent,#fff); transition:width .5s var(--ease)}
.adv:hover .adv__rule{width:72px}
.adv__t{font-size:1.25rem; font-weight:600; letter-spacing:-.024em}
.adv__d{font-size:.9375rem; line-height:1.62; color:#a5aaae; text-wrap:pretty}
.adv__check{width:22px; height:22px; color:var(--accent,#fff)}

/* 11. PROJEKTE ============================================================= */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.5rem}
.filter{padding:.6rem 1.05rem; background:transparent; border:1px solid var(--line); border-radius:100px; cursor:pointer;
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
  transition:color .3s, border-color .3s, background .3s}
.filter:hover{color:var(--ink); border-color:#bfbfba}
.filter[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}

.proj-grid{display:grid; gap:clamp(1rem,2vw,1.75rem)}
@media (min-width:680px){ .proj-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){
  .proj-grid{grid-template-columns:repeat(6,1fr)}
  .proj{grid-column:span 2}
  .proj--wide{grid-column:span 3}
}
.proj{position:relative; display:block; background:var(--ink); overflow:hidden; transition:opacity .45s var(--ease), transform .45s var(--ease)}
.proj[hidden]{display:none}
.proj__img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease), opacity .5s var(--ease); opacity:.92}
.proj--wide .proj__img{aspect-ratio:16/10}
.proj:hover .proj__img{transform:scale(1.05); opacity:.72}
.proj__body{position:absolute; inset:auto 0 0 0; padding:clamp(1.25rem,2.2vw,1.75rem);
  background:linear-gradient(transparent,rgba(14,15,16,.58) 38%,rgba(14,15,16,.93) 100%); color:#fff}
.proj__cat{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase; color:#d7dbde}
.proj__cat i{width:7px; height:7px; background:var(--accent,#fff); border-radius:50%; flex:none}
.proj__t{font-size:clamp(1.0625rem,1rem + .45vw,1.375rem); font-weight:600; letter-spacing:-.022em; margin-top:.45rem}
.proj__m{font-family:var(--f-mono); font-size:.6875rem; color:#9ea3a7; margin-top:.4rem; letter-spacing:.05em}
.proj__arrow{position:absolute; top:1rem; right:1rem; width:38px; height:38px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); backdrop-filter:blur(6px); color:#fff; border-radius:50%;
  opacity:0; transform:translate(-6px,6px); transition:opacity .4s var(--ease), transform .4s var(--ease)}
.proj:hover .proj__arrow{opacity:1; transform:translate(0,0)}
.proj-note{margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between}

/* 12. ABLAUF =============================================================== */
.steps{display:grid; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
@media (min-width:720px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{background:var(--paper); padding:clamp(2rem,3.4vw,3rem) clamp(1.5rem,2.4vw,2rem); display:grid; gap:.875rem; align-content:start; position:relative}
.section--stone .step{background:var(--stone)}
.step__n{font-family:var(--f-mono); font-size:clamp(2.5rem,2rem + 2.4vw,4rem); font-weight:400; line-height:1;
  color:transparent; -webkit-text-stroke:1px #c7c7c2; letter-spacing:-.02em; transition:color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease)}
.step:hover .step__n{color:var(--ink); -webkit-text-stroke-color:var(--ink)}
.step__t{font-size:1.1875rem; font-weight:600; letter-spacing:-.022em; margin-top:.5rem}
.step__d{font-size:.9375rem; line-height:1.62; color:var(--muted); text-wrap:pretty}
.step__dot{position:absolute; top:0; left:0; width:100%; height:2px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.step:hover .step__dot{transform:scaleX(1)}

/* 13. KONTAKT ============================================================== */
.contact{display:grid; gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:1000px){ .contact{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} }

.form-card{background:#fff; color:var(--ink); padding:clamp(1.75rem,3.2vw,2.75rem); border-radius:var(--radius)}
.form-grid{display:grid; gap:1.125rem}
@media (min-width:560px){ .form-grid__2{grid-template-columns:1fr 1fr} }
.field{display:grid; gap:.5rem}
.field label{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.field label .req{color:var(--rot)}
.field input,.field textarea,.field select{
  width:100%; padding:.85rem 0; background:transparent; border:0; border-bottom:1px solid var(--line);
  border-radius:0; font-size:1rem; transition:border-color .3s var(--ease)}
.field textarea{resize:vertical; min-height:120px; line-height:1.6}
.field input:hover,.field textarea:hover,.field select:hover{border-color:#b9b9b4}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--ink); border-bottom-width:2px; padding-bottom:calc(.85rem - 1px)}
.field input::placeholder,.field textarea::placeholder{color:#b0b4b8}
.field.has-error input,.field.has-error textarea{border-color:var(--rot)}
.field__err{font-family:var(--f-mono); font-size:.6875rem; color:var(--rot); min-height:0; display:none}
.field.has-error .field__err{display:block}

.check{display:flex; gap:.75rem; align-items:flex-start; font-size:.8438rem; line-height:1.55; color:var(--muted)}
.check input{appearance:none; flex:none; width:20px; height:20px; margin-top:1px; border:1px solid #b9b9b4; border-radius:2px;
  background:#fff; cursor:pointer; transition:background .25s, border-color .25s; display:grid; place-content:center}
.check input::after{content:""; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0); transition:transform .2s var(--ease)}
.check input:checked{background:var(--ink); border-color:var(--ink)}
.check input:checked::after{transform:rotate(-45deg) scale(1)}
.check a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.check.has-error input{border-color:var(--rot)}
.honey{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form-status{display:none; padding:.95rem 1.1rem; border-left:3px solid var(--gruen); background:#f3f8f3; font-size:.9063rem}
.form-status.is-error{border-color:var(--rot); background:#fdf4f4}
.form-status.is-visible{display:block}

.contact-info{display:grid; gap:2rem; align-content:start}
.info-block{display:grid; gap:.5rem}
.info-block__k{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.15em; text-transform:uppercase; color:#8b9095}
.info-block__v{font-size:1.0625rem; line-height:1.6}
.info-block a:hover{color:#fff}
.contact-rows{display:grid; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark)}
.contact-row{background:var(--ink); padding:1.25rem 1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition:background .3s var(--ease)}
a.contact-row:hover{background:#17191b}
.contact-row__l{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:#82878c}
.contact-row__v{font-size:1.0625rem; font-weight:500; letter-spacing:-.01em; text-align:right}

/* Karte mit Zwei-Klick-Loesung (DSGVO) */
.map{position:relative; margin-top:clamp(3rem,6vw,4.5rem); aspect-ratio:21/9; background:#17191b; border:1px solid var(--line-dark); overflow:hidden}
@media (max-width:900px){ .map{aspect-ratio:16/10} }
@media (max-width:560px){ .map{aspect-ratio:4/5} }
.map iframe{width:100%; height:100%; border:0; display:block}
.map__consent{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:1rem; text-align:center; padding:2rem;
  background-image:radial-gradient(circle at 1px 1px,#2c3033 1px,transparent 0); background-size:22px 22px}
.map__consent p{max-width:44ch; font-size:.9375rem; color:#a5aaae; text-wrap:pretty}
.map__pin{width:34px; height:34px; color:var(--rot)}

/* 14. FOOTER =============================================================== */
.footer{background:var(--ink); color:#9ea3a7; padding-top:clamp(3.5rem,7vw,5.5rem)}
.footer__top{display:grid; gap:2.75rem; padding-bottom:3.5rem}
@media (min-width:760px){ .footer__top{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1060px){ .footer__top{grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:3rem} }
.footer .brand__name{color:#fff} .footer .brand__sub{color:#71767a}
.footer__claim{margin-top:1.5rem; max-width:34ch; font-size:.9375rem; line-height:1.62; color:#9ea3a7}
.footer__h{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.15em; text-transform:uppercase; color:#71767a; margin-bottom:1.15rem}
.footer__list{display:grid; gap:.7rem}
.footer__list a, .footer address a{font-size:.9375rem; transition:color .25s}
.footer__list a:hover, .footer address a:hover{color:#fff}
.footer address{font-style:normal; font-size:.9375rem; line-height:1.85}
.footer__bottom{border-top:1px solid var(--line-dark); padding-block:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem 2rem; align-items:center; justify-content:space-between}
.footer__bottom p, .footer__bottom a{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.05em; color:#71767a}
.footer__bottom a:hover{color:#fff}
.footer__legal{display:flex; flex-wrap:wrap; gap:1.5rem}
.to-top{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase}
.to-top svg{transition:transform .35s var(--ease)}
.to-top:hover svg{transform:translateY(-3px)}

/* 15. SUBSEITEN (Impressum / Datenschutz) ================================== */
.page-head{background:var(--stone); padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--line)}
.prose{max-width:74ch; display:grid; gap:1.25rem}
.prose h2{font-size:clamp(1.25rem,1.1rem + .8vw,1.625rem); font-weight:600; letter-spacing:-.024em; margin-top:2.25rem; line-height:1.2}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.0625rem; font-weight:600; margin-top:1.25rem}
.prose p, .prose li{color:#3a3d40; font-size:.9688rem; line-height:1.72}
.prose ul{display:grid; gap:.55rem; padding-left:1.1rem; list-style:disc}
.prose a{text-decoration:underline; text-underline-offset:3px}
.prose strong{font-weight:600; color:var(--ink)}
.prose .box{background:var(--stone); padding:1.5rem; border-left:3px solid var(--ink)}

/* 16. MOTION / UTILITIES =================================================== */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-reveal].is-in{opacity:1; transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}

.skip{position:absolute; left:-9999px; z-index:200; padding:1rem 1.5rem; background:var(--ink); color:#fff}
.skip:focus{left:1rem; top:1rem}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.img-ph{background-size:cover; background-position:center}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  [data-reveal]{opacity:1; transform:none}
  .hero__media img{animation:none; transform:none}
}

@media print{
  .header,.topbar,.mobile-nav,.burger,.map,.hero__actions,.footer__bottom{display:none !important}
  body{color:#000} .section{padding-block:1.5rem}
}