/* Haus Heim Handwerk – Dirk Hennseler · mobile first, keine externen Ressourcen */
:root{
  --gold:#a8822f; --gold-hell:#c9a55a; --dunkel:#1c1c1a; --dunkel-2:#2a2926;
  --creme:#f4f0e8; --creme-2:#ebe5d8; --text:#262522; --grau:#6b675f; --weiss:#fff;
  --linie:#ddd5c5; --max:1120px; --gap:16px;
  --schrift:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--schrift);font-size:17px;line-height:1.55;color:var(--text);background:var(--weiss);padding-bottom:64px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.75rem,6vw,2.75rem);font-weight:750}
h2{font-size:clamp(1.3rem,4.4vw,1.75rem);font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gap)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.kicker{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:650;margin:0 0 .5em;display:block}
.kicker-gold{color:var(--gold-hell)}
.lead{font-size:1.1rem;color:var(--grau);max-width:46em}
.ic{width:24px;height:24px;flex:none}
.ic-gold{color:var(--gold-hell)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--dunkel)}
.logo{width:42px;height:42px;color:var(--dunkel);flex:none}
.logo-voll{height:46px;width:auto;flex:none}
.fuss-marke .logo-voll{height:64px}
.marke{min-width:0}
.marke-txt{min-width:0}
.marke-txt{display:flex;flex-direction:column;line-height:1.15}
.marke-txt strong{font-size:.95rem;white-space:nowrap}
.marke-txt span{font-size:.68rem;color:var(--grau)}
.kopf-nav{display:flex;align-items:center;gap:14px}
.kopf-tel{display:none;align-items:center;gap:6px;text-decoration:none;font-weight:600}
.kopf-nav .btn-rund{padding:9px 15px;font-size:.84rem;white-space:nowrap}

/* Runder Anfrage-Button mit Blickfang nach 1 Sekunde */
.btn-rund{display:inline-block;border-radius:999px;padding:13px 24px;font-weight:650;text-decoration:none;
  background:var(--dunkel);color:#fff;border:2px solid var(--dunkel);transition:background .2s,color .2s,transform .2s}
.btn-rund:hover{background:var(--gold);border-color:var(--gold)}
.btn-blick{animation:blick 1.2s ease 1s 1 both}
@keyframes blick{
  0%{background:var(--dunkel);border-color:var(--dunkel);transform:scale(1)}
  35%{background:var(--gold);border-color:var(--gold);transform:scale(1.07);box-shadow:0 0 0 8px rgba(168,130,47,.18)}
  100%{background:var(--gold);border-color:var(--gold);transform:scale(1);box-shadow:0 0 0 0 rgba(168,130,47,0)}
}
@media (prefers-reduced-motion:reduce){.btn-blick{animation:none;background:var(--gold);border-color:var(--gold)}html{scroll-behavior:auto}}

/* Hero */
.hero{padding:28px 0 18px}
.hero h1{max-width:20ch}

/* Aktions-Slider – schwebende Karte über dem Startbereich */
.hero-start{background:var(--creme);padding-bottom:26px}
.hero-raster{display:grid;gap:18px}
.slider-wrap{position:relative;z-index:2;min-width:0}
.slider{background:var(--dunkel);color:#fff;border:2px solid var(--gold);box-shadow:0 22px 48px -12px rgba(28,28,26,.55),0 0 0 6px rgba(168,130,47,.12);overflow:hidden}
.slides{display:grid}
.slide{grid-area:1/1;display:flex;align-items:flex-start;gap:14px;padding:20px 18px 14px;color:#fff;text-decoration:none;
  opacity:0;transform:translateX(-40px);transition:transform .6s ease,opacity .6s ease;pointer-events:none;visibility:hidden}
.slide.ist{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.slide.raus{opacity:0;transform:translateX(70%);visibility:visible}
.aktion-ic{width:52px;height:52px;border:2px solid var(--gold-hell);display:grid;place-items:center;color:var(--gold-hell);flex:none}
.aktion-ic .ic{width:30px;height:30px}
.aktion-txt{display:flex;flex-direction:column;gap:3px}
.aktion-txt .kicker{margin:0;color:var(--gold-hell)}
.aktion-txt strong{font-size:1.2rem;line-height:1.25}
.aktion-sub{font-size:.9rem;color:#cfc9bc}
.aktion-mehr{display:inline-flex;align-items:center;gap:8px;margin-top:8px;color:var(--gold-hell);font-weight:650;font-size:.92rem}
.aktion-mehr .ic{width:18px;height:18px;transition:transform .2s}
.slide:hover .aktion-mehr .ic{transform:translateX(4px)}
.slider-steuer{display:flex;align-items:center;justify-content:space-between;padding:0 14px 14px 84px}
.slider:not(.js) .slider-steuer{display:none}
.punkte{display:flex;gap:8px}
.punkt{width:26px;height:4px;border:0;padding:0;background:#4a4741;cursor:pointer}
.punkt.ist{background:var(--gold-hell)}
.weiter{width:46px;height:46px;border-radius:999px;border:0;background:var(--gold);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.weiter:hover{background:var(--gold-hell);transform:translateX(3px)}
.weiter .ic{width:22px;height:22px}
.aktion-pfeil{margin-left:auto;flex:none}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}

.block{padding-top:28px;padding-bottom:8px}
.abschnitt-kopf{margin-bottom:14px}

/* Komplettsanierung – große Karte */
.komplett{display:grid;background:var(--dunkel);color:#fff;text-decoration:none;border-left:5px solid var(--gold)}
.komplett-bild{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.komplett-bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.komplett:hover .komplett-bild img{transform:scale(1.03)}
.siegel{position:absolute;right:12px;top:12px;background:var(--gold);color:#fff;font-weight:750;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px}
.komplett-txt{display:flex;flex-direction:column;padding:20px 18px 22px}
.komplett-h{display:flex;align-items:center;gap:10px;font-size:clamp(1.35rem,5vw,1.9rem);line-height:1.2;margin-bottom:8px}
.komplett-h .ic{width:30px;height:30px}
.komplett-p{color:#d6d0c3;margin-bottom:12px}
.mehr{display:inline-flex;align-items:center;gap:8px;color:var(--gold-hell);font-weight:650;margin-top:6px}
.mehr .ic{width:20px;height:20px}

/* Häkchenlisten */
.haken{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px}
.haken li{display:flex;gap:10px;align-items:flex-start}
.haken .ic{width:20px;height:20px;color:var(--gold);margin-top:2px}
.komplett .haken .ic{color:var(--gold-hell)}

/* Einzelleistungen – eckige Karten mit Icon */
.raster{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.raster .karte:last-child:nth-child(odd){grid-column:span 2}
.karte{display:flex;flex-direction:column;gap:10px;padding:16px 14px;background:var(--creme);border-left:4px solid var(--gold);
  text-decoration:none;color:var(--text);min-height:100%;transition:background .2s,transform .2s}
.karte:hover{background:var(--creme-2);transform:translateY(-2px)}
.karte-ic{width:52px;height:52px;display:grid;place-items:center;background:var(--dunkel);color:var(--gold-hell);flex:none}
.karte-ic .ic{width:30px;height:30px}
.karte-ic.gross{width:64px;height:64px;margin-bottom:14px}.karte-ic.gross .ic{width:36px;height:36px}
.karte-txt{display:flex;flex-direction:column;gap:4px}
.karte-txt strong{font-size:1rem;line-height:1.25}
.karte-txt span{font-size:.84rem;color:var(--grau);line-height:1.35}

/* Partner-Karte */
.partner{display:flex;align-items:center;gap:14px;padding:18px 16px;border:2px solid var(--dunkel);text-decoration:none}
.partner>span:nth-child(2){display:flex;flex-direction:column;gap:3px}
.partner>span:nth-child(2)>span{font-size:.9rem;color:var(--grau)}
.partner:hover{background:var(--creme)}

/* Person */
.person{background:var(--creme);margin-top:32px;padding:32px 0}
.person-in{display:grid;gap:20px}
.person-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;border-left:5px solid var(--gold)}

.region p{color:var(--grau)}

/* Kontakt */
.kontakt{background:var(--dunkel);color:#fff;padding:36px 0;margin-top:32px}
.kontakt .kicker{color:var(--gold-hell)}
.kontakt-txt{color:#d6d0c3;max-width:44em}
.kontakt-wege{display:grid;gap:10px;margin:18px 0 10px}
.weg{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid #4a4741;text-decoration:none;background:var(--dunkel-2)}
.weg:hover{border-color:var(--gold-hell)}
.weg .ic{width:28px;height:28px;color:var(--gold-hell)}
.weg>span{display:flex;flex-direction:column}
.weg>span span{color:#cfc9bc;font-size:.92rem;word-break:break-all}
.hinweis-klein{font-size:.86rem;color:#a9a397;margin:6px 0 0}

.makler{padding-top:22px;padding-bottom:26px}
.makler p{font-size:.86rem;color:var(--grau);border-left:3px solid var(--linie);padding-left:12px;margin:0}

/* Unterseiten */
.pfad{font-size:.84rem;color:var(--grau);padding-top:16px}
.pfad a{color:var(--grau)}
.seite-kopf{padding-top:18px;padding-bottom:20px}
.seite-kopf .btn-rund{margin-top:6px}
.seite-bild img{width:100%;aspect-ratio:16/9;object-fit:cover;border-left:5px solid var(--gold)}
.seite-inhalt{display:grid;gap:24px;padding-top:26px}
.kasten{background:var(--creme);border-left:5px solid var(--gold);padding:20px 18px}
.text h2{margin-top:.6em}
.text p{max-width:42em}
.region-zeile{font-size:.9rem;color:var(--grau)}
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.schritte li{display:grid;grid-template-columns:44px 1fr;gap:2px 12px;padding:14px;border:2px solid var(--dunkel)}
.schritte .nr{grid-row:span 2;width:44px;height:44px;background:var(--gold);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.2rem}
.schritte span:last-child{color:var(--grau);font-size:.95rem}

/* Galerie – seitlich wischen */
.galerie-block{padding-top:30px}
.galerie{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gap) 10px;scrollbar-width:thin;
  max-width:var(--max);margin:0 auto}
.galerie figure{margin:0;flex:0 0 80%;scroll-snap-align:start}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover}
.galerie figcaption{font-size:.8rem;color:var(--grau);padding-top:6px}

.faq{padding-top:28px}
.faq details{border-bottom:1px solid var(--linie);padding:12px 0}
.faq summary{font-weight:650;cursor:pointer}
.faq details p{margin:.6em 0 0;color:var(--grau)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--creme);text-decoration:none;font-size:.9rem;border-left:3px solid var(--gold)}
.chip .ic{width:18px;height:18px;color:var(--gold)}
.chip:hover{background:var(--creme-2)}
.weitere{padding-bottom:30px}

.recht{padding-top:28px;padding-bottom:40px;max-width:820px}
.recht h2{font-size:1.15rem;margin-top:1.4em}
.recht p,.recht li{color:#3d3b37}

/* Fuß */
.fuss{background:#121211;color:#bdb7aa;font-size:.9rem;padding:32px 0 10px}
.fuss a{color:#e6e0d3}
.fuss-raster{display:grid;gap:22px}
.fuss-marke{display:flex;gap:12px;align-items:center;margin-bottom:12px;color:#fff}
.fuss-marke .logo{color:#fff}
.fuss-h{color:var(--gold-hell);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700;margin-bottom:6px}
.fuss-liste{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:4px}
.fuss-liste a{text-decoration:none}.fuss-liste a:hover{text-decoration:underline}
.fuss-klein{font-size:.84rem}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid #2e2d2a;margin-top:18px;padding-top:12px;font-size:.8rem}

/* Feste Kontaktleiste (mobil) */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);background:var(--dunkel);border-top:3px solid var(--gold);padding-bottom:env(safe-area-inset-bottom)}
.leiste a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;color:#fff;text-decoration:none;font-size:.78rem;font-weight:600}
.leiste a+a{border-left:1px solid #3a3833}
.leiste .ic{width:22px;height:22px;color:var(--gold-hell)}

/* Tablet */
@media (min-width:640px){
  .raster{grid-template-columns:repeat(3,1fr);gap:12px}
  .raster .karte:last-child:nth-child(odd){grid-column:auto}
  .kontakt-wege{grid-template-columns:repeat(3,1fr)}
  .galerie figure{flex-basis:46%}
  .kopf-tel{display:flex}
  .logo-voll{height:56px}
}
/* Desktop */
@media (min-width:900px){
  body{padding-bottom:0}
  .leiste{display:none}
  .logo{width:50px;height:50px}
  .logo-voll{height:62px}
  .kopf-in{min-height:76px}
  .hero{padding:48px 0 26px}
  .komplett{grid-template-columns:1.15fr 1fr}
  .komplett-bild{aspect-ratio:auto;min-height:380px}
  .komplett-txt{padding:34px 32px;justify-content:center}
  .raster{grid-template-columns:repeat(4,1fr)}
  .karte{padding:20px 18px}
  .person-in{grid-template-columns:2fr 3fr;align-items:center;gap:40px}
  .seite-inhalt{grid-template-columns:1fr 1.3fr;align-items:start}
  .seite-inhalt .schritte{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
  .galerie figure{flex-basis:32%}
  .fuss-raster{grid-template-columns:1.3fr 1fr 1fr}
  .hero-start{padding-bottom:40px}
  .hero{padding-top:40px}
  .hero-raster{grid-template-columns:1fr 2fr;gap:40px;align-items:center}
  .hero-start h1{font-size:2.3rem;max-width:none}
  .hero-start .lead{font-size:1rem;margin:0}
  .slide{padding:26px 28px 16px;gap:22px;align-items:center}
  .aktion-ic{width:64px;height:64px}.aktion-ic .ic{width:36px;height:36px}
  .aktion-txt strong{font-size:1.45rem}
  .slider-steuer{padding:0 22px 18px 114px}
}

/* Kopfzeile schmal */
.marke-txt>span{white-space:nowrap}
@media (max-width:479px){.nur-gross{display:none}.kopf-in{gap:8px}.marke{gap:8px}.logo-voll{height:42px}}
@media (max-width:359px){.marke-txt>span{display:none}}
@media (min-width:900px){.logo-voll{height:74px}.kopf-in{min-height:96px}.fuss-marke .logo-voll{height:80px}}

@media (max-width:899px){.hero-start .lead{font-size:1rem;margin-bottom:0}}