/* ============================================================
   Lokal eingebundene Schriften — keine Anfrage an Google
   ============================================================ */
@font-face{ font-family:"Barlow"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Barlow"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Barlow"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Barlow Semi Condensed"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Barlow Semi Condensed"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face{ font-family:"Caveat"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/caveat-latin-600-normal.woff2") format("woff2"); }

/* ============================================================
   efm — Design-Tokens (direkt aus dem Flyer abgeleitet)
   ============================================================ */
:root{
  --navy:      #00162B;
  --navy-soft: #0A2440;
  --navy-line: #12314F;
  --green:     #7E9908;
  --green-hi:  #9CBC1C;
  --paper:     #F3F3F3;
  --white:     #FFFFFF;
  --ink:       #16232F;
  --ink-mute:  #4A5A68;

  --wrap: 1180px;
  --gap: clamp(1.5rem, 4vw, 3.5rem);

  --step--1: clamp(.82rem, .8rem + .1vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.075rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.9rem);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,.cond{
  font-family:"Barlow Semi Condensed","Barlow",sans-serif;
  font-weight:700;
  line-height:1.06;
  letter-spacing:.005em;
  margin:0;
}
h2{ font-size:var(--step-2); }
h3{ font-size:var(--step-1); line-height:1.2; }
p{ margin:0 0 1em; max-width:64ch; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
section{ padding-block:clamp(3.5rem,7vw,6.5rem); }

.script{
  font-family:"Caveat",cursive;
  font-weight:600;
  font-size:clamp(1.7rem,1.2rem + 2vw,2.9rem);
  line-height:1.15;
  letter-spacing:.01em;
}
.script .accent{ color:var(--green); }
.on-navy .script .accent{ color:var(--green-hi); }

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:3px solid var(--green);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Logo ---------- */
.logo{ display:inline-flex; flex-direction:column; align-items:center; text-decoration:none; line-height:1; }
.logo-mark{ position:relative; display:block; padding-top:.42em; }
.logo-word{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700;
  font-size:var(--logo-size,2.5rem); letter-spacing:-.02em; color:var(--navy); display:block;
}
.logo-roof{ position:absolute; top:0; left:14%; width:74%; height:.42em; overflow:visible; }
.logo-roof path{ fill:none; stroke:var(--green); stroke-width:9; stroke-linecap:square; }
.logo-sub{
  font-size:calc(var(--logo-size,2.5rem) * .175);
  letter-spacing:.005em; color:var(--navy); margin-top:.28em; white-space:nowrap;
}
.logo--light .logo-word,.logo--light .logo-sub{ color:var(--white); }
.logo--light .logo-roof path{ stroke:var(--green-hi); }

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(243,243,243,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #DCDEDA;
}
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem; }
.site-head .logo{ --logo-size:1.85rem; }
.nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.nav a{
  text-decoration:none; font-weight:500; font-size:var(--step--1);
  color:var(--navy); padding:.35rem 0; border-bottom:2px solid transparent;
}
.nav a:hover{ border-bottom-color:var(--green); }
.nav .btn{ border-bottom:0; }
.btn{
  display:inline-block; background:var(--green); color:#fff; text-decoration:none;
  font-weight:600; font-size:var(--step--1); padding:.7rem 1.35rem; border:0; cursor:pointer;
  font-family:inherit; letter-spacing:.01em;
}
.btn:hover{ background:#6C840A; }
.btn--ghost{ background:transparent; color:var(--white); box-shadow:inset 0 0 0 2px var(--green-hi); }
.btn--ghost:hover{ background:var(--green-hi); color:var(--navy); }
.nav-toggle{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; }

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; inset:100% 0 auto 0; background:var(--paper);
    border-bottom:1px solid #DCDEDA; flex-direction:column; align-items:stretch;
    gap:0; padding:.5rem 1.25rem 1.25rem; display:none;
  }
  .nav[data-open="true"]{ display:flex; }
  .nav a{ padding:.85rem 0; border-bottom:1px solid #E2E4E0; }
  .nav .btn{ margin-top:.75rem; text-align:center; }
}

/* ---------- Bildflächen ---------- */
.media{ position:relative; overflow:hidden; background:var(--navy-soft); }
.media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Hero ---------- */
.hero{ background:var(--paper); padding-block:0; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:stretch; }
.hero-copy{ padding:clamp(2.5rem,5vw,4.5rem) clamp(1.25rem,4vw,3.5rem) clamp(2.5rem,5vw,4rem) 0; align-self:center; }
.hero-eyebrow{ font-size:var(--step--1); font-weight:600; color:var(--green); margin-bottom:1.1rem; }
.hero h1{ font-size:var(--step-3); }
.hero h1 .line{ display:block; }
.hero h1 .werte{ color:var(--green); }
.hero-lead{ margin-top:1.6rem; color:var(--ink-mute); font-size:var(--step-1); line-height:1.45; max-width:34ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.hero-actions .btn:nth-child(2){ background:transparent; color:var(--navy); box-shadow:inset 0 0 0 2px var(--navy); }
.hero-actions .btn:nth-child(2):hover{ background:var(--navy); color:#fff; }
.hero-visual{ position:relative; min-height:clamp(340px,52vh,600px); }
.hero-visual .media{ position:absolute; inset:0; }
.hero-claim{
  position:absolute; left:clamp(1rem,3vw,2.5rem); bottom:clamp(1rem,3vw,2.5rem);
  background:var(--navy); color:#fff; padding:1.25rem 1.6rem;
  display:flex; align-items:center; gap:1.1rem; max-width:min(92%,26rem);
}
.hero-claim svg{ flex:none; width:44px; height:44px; stroke:var(--green-hi); }
.hero-claim p{ margin:0; font-family:"Barlow Semi Condensed",sans-serif; font-weight:600;
  font-size:1.15rem; line-height:1.25; letter-spacing:.01em; }
.hero-claim .ziel{ color:var(--green-hi); }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy{ padding:2.5rem 0 2rem; }
  .hero-visual{ min-height:56vw; }
}

/* ---------- Warum efm ---------- */
.why{ background:var(--white); }
.why-head{ display:flex; align-items:baseline; gap:.5ch; flex-wrap:wrap; }
.why-head .brand{ color:var(--green); }
.rule{ width:64px; height:4px; background:var(--green); margin:1.1rem 0 2.75rem; }
.why-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(1.75rem,4vw,3.25rem); }
.why-item{ display:grid; grid-template-columns:56px 1fr; gap:1.25rem; align-items:start; }
.why-item svg{ width:52px; height:52px; stroke:var(--green); fill:none; stroke-width:1.6; }
.why-item h3{ margin-bottom:.4rem; }
.why-item p{ margin:0; color:var(--ink-mute); }

/* ---------- Leistungen ---------- */
.services{ background:var(--paper); }
.services-head{ background:var(--navy); color:#fff; display:inline-block; padding:1.15rem 3.5rem 1.15rem 1.5rem; margin-left:-1.5rem; }
.services-head h2{ font-size:var(--step-2); }
.services-head .sub{ color:var(--green-hi); }
.service-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:0 clamp(2rem,5vw,4rem); margin-top:2.75rem; }
.service{ display:grid; grid-template-columns:44px 1fr; gap:1.1rem; padding:1.4rem 0; border-bottom:1px solid #D8DAD5; }
.service svg{ width:38px; height:38px; stroke:var(--green); fill:none; stroke-width:1.6; margin-top:.15rem; }
.service h3{ font-size:1.06rem; letter-spacing:.02em; text-transform:none; margin-bottom:.3rem; }
.service p{ margin:0; font-size:var(--step--1); color:var(--ink-mute); line-height:1.55; }
.services .script{ margin-top:3rem; color:var(--navy); }

/* ---------- Handwerk ---------- */
.craft{ background:var(--white); }
.craft h2 .aus{ color:var(--green); }
.tile-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.25rem; margin-top:2.75rem; }
.tile{ position:relative; background:var(--navy); }
.tile .media{ aspect-ratio:3/2; }
.tile--icon .media{ display:grid; place-items:center; background:#0B2540; }
.tile--icon .media svg{ width:64px; height:64px; stroke:var(--green-hi); fill:none; stroke-width:1.3; }
.tile-badge{
  position:absolute; top:.75rem; left:.75rem; width:44px; height:44px; border-radius:50%;
  background:var(--white); box-shadow:0 0 0 2px var(--green); display:grid; place-items:center;
}
.tile-badge svg{ width:24px; height:24px; stroke:var(--green); fill:none; stroke-width:1.7; }
.tile-cap{ padding:.85rem 1rem 1rem; color:#fff; }
.tile-cap strong{ font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; font-size:1rem; letter-spacing:.03em; display:block; }
.tile-cap span{ font-size:var(--step--1); color:#A9BACA; }
.craft .script{ margin-top:3rem; color:var(--navy); text-align:center; }

/* ---------- Vertrauen / on-navy ---------- */
.trust{ background:var(--navy); color:#fff; }
.trust-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.trust .media{ aspect-ratio:3/4; }
.check-list{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:1rem; }
.check-list li{ display:grid; grid-template-columns:26px 1fr; gap:.9rem; align-items:start; font-size:var(--step-0); }
.check-list svg{ width:20px; height:20px; stroke:var(--green-hi); fill:none; stroke-width:2.4; margin-top:.35rem; }
.trust .years{ display:grid; grid-template-columns:44px 1fr; gap:1.1rem; align-items:start;
  border-top:1px solid var(--navy-line); border-bottom:1px solid var(--navy-line); padding:1.5rem 0; margin-bottom:2rem; }
.trust .years svg{ width:38px; height:38px; stroke:var(--green-hi); fill:none; stroke-width:1.6; }
.trust .years p{ margin:0; color:#C6D3DE; }
.trust h2{ margin-bottom:1.5rem; }
@media (max-width:820px){ .trust-grid{ grid-template-columns:1fr; } .trust .media{ aspect-ratio:4/3; } }

/* ---------- Materialvergleich Bad ---------- */
.compare-section{ background:var(--paper); }
.compare-intro{ max-width:60ch; margin-bottom:2.25rem; }
.compare{
  --pos:50%;
  position:relative; aspect-ratio:11/6; overflow:hidden; background:var(--navy-soft);
  touch-action:pan-y;
}
.compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare-top{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.compare-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  opacity:0; cursor:ew-resize; z-index:3; -webkit-appearance:none; appearance:none; background:none;
}
.compare-handle{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff;
  transform:translateX(-1px); z-index:2; pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,22,43,.25);
}
.compare-handle::after{
  content:""; position:absolute; top:50%; left:50%; width:46px; height:46px;
  transform:translate(-50%,-50%); border-radius:50%; background:#fff;
  box-shadow:0 2px 14px rgba(0,22,43,.35);
}
.compare-handle::before{
  content:"‹ ›"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:1; font-size:1.35rem; letter-spacing:.15em; color:var(--navy); line-height:1;
}
.compare-range:focus-visible + .compare-handle::after{ box-shadow:0 0 0 4px var(--green); }
.compare-tag{
  position:absolute; bottom:1rem; z-index:2; background:rgba(0,22,43,.82); color:#fff;
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; letter-spacing:.04em;
  font-size:var(--step--1); padding:.4rem .8rem; pointer-events:none;
}
.compare-tag--l{ left:1rem; } .compare-tag--r{ right:1rem; }
.compare-hint{ font-size:var(--step--1); color:var(--ink-mute); margin:.9rem 0 0; }
@media (max-width:700px){ .compare{ aspect-ratio:4/3; } }

/* ---------- Kontakt ---------- */
.contact{ background:var(--paper); }
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4.5rem); }
.contact-details{ font-size:var(--step-0); }
.contact-details dl{ margin:2rem 0 0; display:grid; gap:1.15rem; }
.contact-details .row{ display:grid; grid-template-columns:30px 1fr; gap:1rem; align-items:start; }
.contact-details svg{ width:22px; height:22px; stroke:var(--green); fill:none; stroke-width:1.7; margin-top:.3rem; }
.contact-details a{ text-decoration:none; border-bottom:1px solid rgba(126,153,8,.5); }
.contact-details a:hover{ border-bottom-color:var(--green); }
.contact-details dt{ font-size:var(--step--1); color:var(--ink-mute); }
.contact-details dd{ margin:0; font-weight:500; }

form{ display:grid; gap:1.1rem; }
.field{ display:grid; gap:.35rem; }
.field label{ font-size:var(--step--1); font-weight:600; color:var(--navy); }
.field .req{ color:var(--green); }
input,select,textarea{
  font:inherit; font-size:var(--step-0); color:var(--ink); background:var(--white);
  border:1px solid #C9CDC6; padding:.75rem .9rem; width:100%;
}
input:hover,select:hover,textarea:hover{ border-color:var(--navy); }
textarea{ min-height:9rem; resize:vertical; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.consent{ display:grid; grid-template-columns:22px 1fr; gap:.75rem; align-items:start; font-size:var(--step--1); color:var(--ink-mute); }
.consent input{ width:18px; height:18px; margin-top:.3rem; accent-color:var(--green); }
.form-note{ font-size:var(--step--1); color:var(--ink-mute); margin:0; }
.form-status{ font-size:var(--step--1); font-weight:600; color:var(--green); min-height:1.4em; margin:0; }
.form-status[data-state="error"]{ color:#B3261E; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } .two{ grid-template-columns:1fr; } }

/* ---------- Skyline + Footer ---------- */
.skyline{ display:block; width:100%; height:auto; }
.skyline path{ fill:none; stroke:var(--green); stroke-width:2.5; stroke-linejoin:round; }
.site-foot{ background:var(--navy); color:#fff; padding-top:0; }
.site-foot .skyline{ margin-bottom:-2px; }
.site-foot .skyline path{ stroke:var(--green-hi); }
.foot-grid{ display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:end; padding-block:clamp(2rem,4vw,3rem); }
.site-foot .logo{ --logo-size:2.6rem; align-items:flex-start; }
.foot-links{ display:flex; gap:1.5rem; flex-wrap:wrap; font-size:var(--step--1); }
.foot-links a{ text-decoration:none; border-bottom:1px solid transparent; color:#C6D3DE; }
.foot-links a:hover{ border-bottom-color:var(--green-hi); color:#fff; }
.foot-meta{ border-top:1px solid var(--navy-line); padding-block:1.25rem; font-size:var(--step--1); color:#8FA4B8; }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr; align-items:start; gap:1.5rem; } }

/* ---------- Ein einziger Auftritt beim Laden ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{ opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards; }
  .hero-copy > :nth-child(1){ animation-delay:.05s; }
  .hero-copy > :nth-child(2){ animation-delay:.13s; }
  .hero-copy > :nth-child(3){ animation-delay:.21s; }
  .hero-copy > :nth-child(4){ animation-delay:.29s; }
  @keyframes rise{ to{ opacity:1; transform:none; } }
}
/* ---------- Rechtstexte ---------- */
.legal{ background:var(--white); }
.legal-wrap{ width:min(100% - 2.5rem, 46rem); margin-inline:auto; }
.legal h1{ font-size:var(--step-2); }
.legal h2{ font-size:var(--step-1); margin:2.5rem 0 .75rem; }
.legal h3{ font-size:1.05rem; margin:1.75rem 0 .4rem; }
.legal p,.legal li{ color:var(--ink); }
.legal address{ font-style:normal; margin-bottom:1em; }
.legal ul{ padding-left:1.2rem; }
.legal li{ margin-bottom:.4rem; }
.legal .updated{ font-size:var(--step--1); color:var(--ink-mute); }
.legal a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(126,153,8,.6);
  text-underline-offset:3px; }
.legal a:hover{ text-decoration-color:var(--green); }
.back-link{ display:inline-block; margin-bottom:2rem; font-size:var(--step--1);
  text-decoration:none; color:var(--ink-mute); }
.back-link:hover{ color:var(--navy); }

/* ---------- Honeypot: für Menschen unsichtbar, für Bots verlockend ---------- */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }