/* ============================================================
   IG BAU SANIERUNG: gemeinsames Stylesheet aller Seiten
   Aenderungen hier wirken auf jeder Seite.
   Gliederung: Grundlagen, Kopf, Startseite, Seitenkoepfe,
   Unterseiten, Desktop-Anpassungen ganz unten.
   ============================================================ */

html{color-scheme:light only}
:root{
  color-scheme:light only;
  --ink:#241609;
  --espresso:#4A2E18;
  --walnut:#7A5433;
  --sand:#B08B54;
  --sand-soft:#E3D4BC;
  --paper:#FBFAF8;
  --paper-2:#F2EDE6;
  --line:rgba(36,22,9,.15);
  --line-soft:rgba(36,22,9,.08);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{background-color:#FBFAF8}
body{
  margin:0; background-color:#FBFAF8; color:#241609;
  font-family:"Archivo",system-ui,sans-serif; font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px}

h1,h2,h3{font-weight:600; letter-spacing:-.035em; line-height:1.06; margin:0}
h1{font-size:clamp(2.15rem,8.2vw,4.3rem)}
h2{font-size:clamp(1.75rem,5.6vw,2.9rem)}
h3{font-size:1.12rem; letter-spacing:-.02em; line-height:1.25}
p{margin:0}
.lead{
  font-family:"Newsreader",Georgia,serif; font-weight:300;
  font-size:clamp(1.08rem,4vw,1.42rem); line-height:1.62; color:var(--espresso);
  max-width:34em;
}

/* ---------- Header ---------- */
.hdr{
  position:sticky; top:0; z-index:60;
  background-color:#FBFAF8; background-color:rgba(251,250,248,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.hdr__in{display:flex; align-items:center; gap:14px; height:66px}
.logo{display:flex; align-items:center; text-decoration:none; margin-right:auto}
.logo img{height:42px; width:auto}
.nav{display:none}
.nav a{
  text-decoration:none; font-size:.92rem; font-weight:500; padding:6px 0;
  border-bottom:1.5px solid transparent;
}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--sand)}
.call{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background:var(--espresso); color:#fff; font-size:.88rem; font-weight:600;
  padding:10px 15px; border-radius:2px; white-space:nowrap;
}
.call:hover{background:var(--ink)}
.call{display:none}
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:40px; padding:0 9px; background:none;
  border:1px solid var(--line); border-radius:2px; cursor:pointer;
}
.burger span{display:block; height:1.6px; background:var(--ink); transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.mnav{
  display:none; border-top:1px solid var(--line-soft); background-color:#FBFAF8;
  padding:8px 0 18px;
}
.mnav.open{display:block}
.mnav a{
  display:block; text-decoration:none; padding:13px 22px; font-size:1.05rem; font-weight:500;
  border-bottom:1px solid var(--line-soft);
}

/* ---------- Hero ---------- */
.hero{
  position:relative; background-color:#241609; overflow:hidden;
  min-height:clamp(560px,82vh,700px); display:flex; align-items:flex-end;
}
.hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85;
}
.hero__grad{
  position:absolute; inset:0;
  background:linear-gradient(178deg,rgba(20,12,5,.55) 0%,rgba(20,12,5,.14) 26%,rgba(20,12,5,.62) 62%,rgba(20,12,5,.90) 100%);
}
.hero__body{position:relative; z-index:2; width:100%; padding:110px 0 36px; color:#fff}
.hero h1{color:#fff; max-width:14ch; text-wrap:balance}
.hero__sub{
  margin-top:16px; max-width:40ch; color:rgba(255,255,255,.86);
  font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:clamp(1.03rem,3.9vw,1.28rem); line-height:1.58;
}
.hero__acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:2px; text-decoration:none;
  font-weight:600; font-size:.95rem; border:1.5px solid transparent;
}
.btn--sand{background:var(--sand); color:#1b1005}
.btn--sand:hover{background:#c39c60}
.btn--ghost{border-color:rgba(255,255,255,.45); color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--dark{background:var(--espresso); color:#fff}
.btn--dark:hover{background:var(--ink)}
.btn--outline{border-color:var(--line); color:var(--ink)}
.btn--outline:hover{border-color:var(--espresso)}

/* Google-Bewertung unter den Hero-Buttons, anklickbar */
.hero__rating{
  display:inline-flex; align-items:center; gap:11px; margin-top:20px;
  text-decoration:none; color:#fff;
  padding:9px 14px 9px 13px; border-radius:2px;
  border:1px solid rgba(255,255,255,.28);
  background-color:rgba(255,255,255,.08);
  transition:border-color .2s ease, background-color .2s ease;
}
.hero__rating:hover{border-color:rgba(255,255,255,.55); background-color:rgba(255,255,255,.14)}
.hero__stars{display:inline-flex; gap:2px; flex:none}
.hero__stars svg{fill:#E8B44A; color:#E8B44A}
.hero__rating b{font-weight:700; font-size:.95rem; letter-spacing:-.01em}
.hero__rating span{font-size:.88rem; color:rgba(255,255,255,.78)}
.hero__rating .hero__arrow{flex:none; opacity:.6}
.hero__rating span{white-space:nowrap}
@media (max-width:430px){
  .hero__rating{gap:9px; padding:9px 11px}
  .hero__rating span{font-size:.85rem}
  .nur-breit{display:none}
}

/* ---------- Faktenleiste ---------- */
.facts{background-color:#4A2E18; color:rgba(255,255,255,.92)}
.facts ul{list-style:none; margin:0; padding:16px 0; display:grid; gap:9px}
.facts li{display:flex; gap:10px; align-items:flex-start; font-size:.92rem}
.facts svg{flex:none; margin-top:3px; opacity:.75}
.facts b{color:#fff; font-weight:600}

/* ---------- Sections ---------- */
section{padding:clamp(52px,11vw,104px) 0; background-color:#FBFAF8}
.eyebrow{
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-weight:300;
  color:var(--walnut); font-size:1.02rem; margin-bottom:10px;
}
.sec-intro{max-width:44ch}
.sec-intro h2{text-wrap:balance}
.sec-intro p{margin-top:16px; color:rgba(36,22,9,.74)}

/* Kernleistungen */
.core{display:grid; gap:34px; margin-top:38px}
.core__item figure{margin:0}
.core__item img{width:100%; height:230px; object-fit:cover; border-radius:2px}
.core__item h3{margin-top:18px; font-size:1.42rem; letter-spacing:-.03em}
.core__item p{margin-top:10px; color:rgba(36,22,9,.74); font-size:.98rem}
.core__num{
  font-family:"Newsreader",Georgia,serif; color:var(--sand);
  font-size:.95rem; letter-spacing:.02em;
}

/* Leistungsliste */
.more{margin-top:46px; border-top:1px solid var(--line)}
.more h3{padding-top:24px; font-size:1rem; font-weight:600; color:var(--walnut)}
.more ul{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:0}
.more li{
  padding:13px 0 13px 26px; border-bottom:1px solid var(--line-soft);
  font-size:1rem; position:relative;
}
.more li::before{
  content:""; position:absolute; left:0; top:22px;
  width:12px; height:1.5px; background:var(--sand);
}

/* Projekte */
.work{background-color:#F2EDE6}
.grid{display:grid; gap:14px; margin-top:34px}
figure.card{margin:0; background-color:#ffffff; border-radius:2px; overflow:hidden}
figure.card img{width:100%; height:250px; object-fit:cover}
figure.card figcaption{padding:14px 16px 18px; font-size:.92rem; color:rgba(36,22,9,.72)}
figure.card.tall img{height:380px}

/* Ablauf */
.steps{margin-top:36px; counter-reset:s}
.step{
  padding:22px 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:56px 1fr; gap:4px 16px; align-items:start;
}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{
  font-family:"Newsreader",Georgia,serif; font-size:1.5rem; color:var(--sand); line-height:1;
  padding-top:3px;
}
.step p{grid-column:2; margin-top:7px; color:rgba(36,22,9,.72); font-size:.97rem}

/* Warum */
.why{background-color:#241609; color:#fff}
.why h2{color:#fff}
.why .eyebrow{color:var(--sand)}
.why__list{display:grid; gap:0; margin-top:34px}
.why__item{padding:26px 0; border-top:1px solid rgba(255,255,255,.16)}
.why__item:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.why__item h3{color:#fff; font-size:1.22rem}
.why__item p{margin-top:9px; color:rgba(255,255,255,.72); font-size:.97rem}

/* FAQ */
details{border-bottom:1px solid var(--line)}
details summary{
  list-style:none; cursor:pointer; padding:20px 30px 20px 0; position:relative;
  font-weight:600; font-size:1.04rem; letter-spacing:-.015em;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:""; position:absolute; right:4px; top:27px; width:11px; height:11px;
  border-right:1.6px solid var(--walnut); border-bottom:1.6px solid var(--walnut);
  transform:rotate(45deg); transition:transform .2s;
}
details[open] summary::after{transform:rotate(-135deg); top:31px}
details p{padding:0 0 20px; color:rgba(36,22,9,.74); font-size:.97rem; max-width:60ch}
.faq{margin-top:30px; border-top:1px solid var(--line)}

/* Kontakt */
.contact{background-color:#F2EDE6}
.contact__box{background-color:#ffffff; padding:30px 24px; border-radius:2px}
.contact__box h2{text-wrap:balance}
.contact__box .lead{margin-top:14px}
.contact__acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.contact__meta{margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft); font-size:.94rem; color:rgba(36,22,9,.72)}
.contact__meta a{color:var(--espresso)}

/* Footer */
.ftr{background-color:#241609; color:rgba(255,255,255,.68); padding:0 0 96px}
.ftr__weave{
  height:8px;
  background:repeating-linear-gradient(45deg,var(--sand) 0 10px,transparent 10px 20px),
             repeating-linear-gradient(-45deg,var(--walnut) 0 10px,transparent 10px 20px);
  opacity:.7;
}
.ftr__in{padding-top:44px; display:grid; gap:30px}
.ftr img{height:56px; width:auto; filter:brightness(0) invert(1); opacity:.92}
.ftr h4{margin:0 0 12px; font-size:.82rem; font-weight:600; color:#fff; letter-spacing:.02em}
.ftr a{color:rgba(255,255,255,.72); text-decoration:none; display:block; padding:5px 0}
.ftr a:hover{color:#fff}
.ftr__legal{margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font-size:.84rem; display:grid; gap:8px}
.ftr__legal nav{display:flex; gap:18px}
.ftr__legal nav a{display:inline}

/* Sticky Mobile Bar */
.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:grid; grid-template-columns:1fr 1fr;
  background-color:#4A2E18; border-top:1px solid rgba(255,255,255,.14);
}
.bar a{
  text-align:center; padding:15px 8px; color:#fff; text-decoration:none;
  font-weight:600; font-size:.92rem;
}
.bar a+a{border-left:1px solid rgba(255,255,255,.18)}

:focus-visible{outline:2.5px solid var(--sand); outline-offset:3px}

/* Reveal */
.rv{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}


@media (prefers-color-scheme: dark){
  html,body{background-color:#FBFAF8; color:#241609}
  section{background-color:#FBFAF8}
  h1,h2,h3,p,li,summary,a{color:inherit}
  .why h2,.why h3,.why__item p,.hero h1,.hero__sub,.facts,.facts b,.ftr,.bar a,.call{color:#fff}
  .why__item p{color:rgba(255,255,255,.74)}
  .hero__sub{color:rgba(255,255,255,.88)}
}

/* ============================================================
   SEITENKOEPFE
   Verwendet von: leistungen, projekte, faq, kontakt,
   impressum, datenschutz, danke
   ============================================================ */
.phead{background-color:#241609; color:#fff; padding:clamp(88px,15vw,150px) 0 clamp(44px,8vw,72px)}
.phead h1{color:#fff; max-width:18ch; text-wrap:balance; font-size:clamp(2rem,7.4vw,3.6rem)}
.phead .eyebrow{color:var(--sand)}
.phead p{margin-top:18px; max-width:46ch; color:rgba(255,255,255,.76);
  font-family:"Newsreader",Georgia,serif; font-size:clamp(1.04rem,3.8vw,1.3rem); line-height:1.6}

/* Kursive Zwischenzeile ueber Ueberschriften */
.srv__kicker,.pset__kicker,.fgroup__kicker{
  font-family:"Newsreader",Georgia,serif; font-style:italic;
  color:var(--walnut); font-size:1rem; margin-bottom:9px;
}

/* ============================================================
   LEISTUNGSSEITE (leistungen.html)
   ============================================================ */
.jump{background-color:#F2EDE6; padding:22px 0}
.jump ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.jump a{
  display:inline-block; text-decoration:none; font-size:.88rem; font-weight:500;
  padding:8px 13px; border:1px solid var(--line); border-radius:2px; background-color:#fff;
}
.jump a:hover{border-color:var(--espresso)}

.srv{padding:clamp(46px,9vw,86px) 0; background-color:#FBFAF8; border-top:1px solid var(--line-soft)}
.srv:nth-of-type(even){background-color:#F6F2EC}
.srv__grid{display:grid; gap:26px}
.srv h2{font-size:clamp(1.5rem,5vw,2.25rem); text-wrap:balance}
.srv__text{margin-top:15px; color:rgba(36,22,9,.76); max-width:56ch}
.srv__text + .srv__text{margin-top:12px}
.srv ul.ticks{list-style:none; margin:20px 0 0; padding:0}
.srv ul.ticks li{
  padding:10px 0 10px 24px; border-bottom:1px solid var(--line-soft);
  font-size:.97rem; position:relative;
}
.srv ul.ticks li::before{
  content:""; position:absolute; left:0; top:19px; width:11px; height:1.5px; background:var(--sand);
}
.srv figure{margin:0}
.srv figure img{width:100%; height:250px; object-fit:cover; border-radius:2px}
.srv figcaption{margin-top:10px; font-size:.88rem; color:rgba(36,22,9,.62)}

.aud{background-color:#241609; color:#fff}
.aud h2{color:#fff}
.aud .eyebrow{color:var(--sand)}
.aud__list{display:grid; gap:0; margin-top:32px}
.aud__item{padding:26px 0; border-top:1px solid rgba(255,255,255,.16)}
.aud__item:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.aud__item h3{color:#fff; font-size:1.2rem}
.aud__item p{margin-top:9px; color:rgba(255,255,255,.72); font-size:.97rem}


/* ============================================================
   PROJEKTSEITE (projekte.html)
   ============================================================ */
.pset{padding:clamp(46px,9vw,86px) 0; background-color:#FBFAF8}
.pset:nth-of-type(even){background-color:#F2EDE6}
.pset__head{max-width:46ch}
.pset__head h2{font-size:clamp(1.5rem,5vw,2.2rem); text-wrap:balance}
.pset__head p{margin-top:14px; color:rgba(36,22,9,.74)}
.pgrid{display:grid; gap:16px; margin-top:32px}
.pcard{margin:0; background-color:#ffffff; border-radius:2px; overflow:hidden}
.pcard img{width:100%; height:260px; object-fit:cover; display:block}
.pcard figcaption{padding:16px 18px 20px}
.pcard b{display:block; font-size:1.02rem; letter-spacing:-.02em; margin-bottom:6px}
.pcard span{display:block; font-size:.94rem; color:rgba(36,22,9,.7); line-height:1.6}
.pcard.wide img{height:300px}

.note{
  margin-top:34px; padding:20px 22px; background-color:#ffffff;
  border-left:3px solid var(--sand); font-size:.95rem; color:rgba(36,22,9,.76);
}
.pset:nth-of-type(even) .note{background-color:#FBFAF8}


/* ============================================================
   FAQ-SEITE (faq.html)
   ============================================================ */
.fgroup{padding:clamp(40px,8vw,72px) 0; background-color:#FBFAF8}
.fgroup:nth-of-type(even){background-color:#F2EDE6}
.fgroup h2{font-size:clamp(1.35rem,4.6vw,1.95rem)}
.fgroup .faq{margin-top:24px; border-top:1px solid var(--line); max-width:76ch}

/* ============================================================
   KONTAKTSEITE (kontakt.html)
   ============================================================ */
.direct{background-color:#F2EDE6; padding:clamp(40px,8vw,64px) 0}
.direct__grid{display:grid; gap:14px}
.dcard{
  background-color:#ffffff; padding:22px; border-radius:2px; text-decoration:none;
  display:block; border:1px solid var(--line-soft);
}
.dcard:hover{border-color:var(--espresso)}
.dcard svg{color:var(--walnut)}
.dcard b{display:block; margin-top:12px; font-size:1.05rem; letter-spacing:-.02em}
.dcard span{display:block; margin-top:5px; font-size:.93rem; color:rgba(36,22,9,.7); line-height:1.55}

.formsec{padding:clamp(46px,9vw,86px) 0; background-color:#FBFAF8}
.formsec__grid{display:grid; gap:36px}
form{margin-top:26px}
.field{margin-bottom:16px}
.field label{display:block; font-size:.9rem; font-weight:600; margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:1rem; color:#241609;
  background-color:#ffffff; border:1px solid var(--line); border-radius:2px;
  padding:13px 14px; -webkit-appearance:none; appearance:none;
}
.field select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A5433' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--walnut); outline:none; box-shadow:0 0 0 3px rgba(176,139,84,.22)}
.field small{display:block; margin-top:6px; font-size:.84rem; color:rgba(36,22,9,.6)}
.check{display:flex; gap:11px; align-items:flex-start; margin:20px 0 22px}
.check input{width:19px; height:19px; flex:none; margin-top:3px; accent-color:#4A2E18}
.check label{font-size:.9rem; line-height:1.55; color:rgba(36,22,9,.78); font-weight:400}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.aside{background-color:#F6F2EC; padding:26px; border-radius:2px; align-self:start}
.aside h3{font-size:1.1rem}
.aside p{margin-top:12px; font-size:.95rem; color:rgba(36,22,9,.74)}
.aside ul{list-style:none; margin:16px 0 0; padding:0}
.aside li{padding:9px 0 9px 24px; position:relative; font-size:.95rem; border-bottom:1px solid var(--line-soft)}
.aside li::before{content:""; position:absolute; left:0; top:18px; width:11px; height:1.5px; background:var(--sand)}
.aside__meta{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:.94rem; line-height:1.75}
.aside__meta a{color:var(--espresso)}


/* ============================================================
   RECHTSSEITEN (impressum, datenschutz, danke)
   ============================================================ */
.legal{padding:clamp(44px,8vw,80px) 0; background-color:#FBFAF8}
.legal .wrap{max-width:760px}
.legal h2{font-size:clamp(1.25rem,4.2vw,1.7rem); margin-top:44px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.05rem; margin-top:26px}
.legal p{margin-top:12px; color:rgba(36,22,9,.8); font-size:.99rem}
.legal ul{margin:12px 0 0; padding-left:20px; color:rgba(36,22,9,.8); font-size:.99rem}
.legal li{margin-bottom:7px}
.legal a{color:var(--espresso)}
.legal .box{margin-top:16px; padding:18px 20px; background-color:#F2EDE6; border-left:3px solid var(--sand); font-size:.97rem}
.legal ol{margin:16px 0 0; padding-left:20px; color:rgba(36,22,9,.8)}
.legal ol li{margin-bottom:9px}

/* ============================================================
   DESKTOP AB 860 PIXEL
   Alle Desktop-Anpassungen stehen gesammelt hier unten.
   ============================================================ */
@media (min-width:860px){

  .srv__grid{grid-template-columns:1.15fr .85fr; gap:52px; align-items:start}
  .srv__grid--flip .srv__body{order:2}
  .srv__grid--flip figure{order:1}
  .srv figure img{height:330px}
  .srv--plain .srv__grid{grid-template-columns:1fr 1fr; gap:52px}
  .aud__list{grid-template-columns:repeat(3,1fr); gap:0 34px}
  .aud__item{border-bottom:1px solid rgba(255,255,255,.16)}

  .pgrid{grid-template-columns:1fr 1fr; gap:22px}
  .pcard img{height:320px}
  .pcard.wide{grid-column:1 / -1}
  .pcard.wide img{height:460px}

  .direct__grid{grid-template-columns:repeat(3,1fr); gap:18px}
  .formsec__grid{grid-template-columns:1.25fr .75fr; gap:52px; align-items:start}

  .nav{display:flex; gap:26px; align-items:center; margin-right:22px}
  .call{display:inline-flex}
  .burger{display:none}
  .mnav{display:none !important}
  .bar{display:none}
  .ftr{padding-bottom:0}
  .hero__body{padding-bottom:52px}
  .facts ul{grid-template-columns:repeat(3,1fr); gap:22px; padding:20px 0}
  .core{grid-template-columns:1fr 1fr; gap:44px}
  .core__item img{height:300px}
  .more ul{grid-template-columns:1fr 1fr; column-gap:44px}
  .grid{grid-template-columns:repeat(3,1fr); gap:18px}
  .grid .span2{grid-column:span 2}
  figure.card img{height:280px}
  figure.card.tall img{height:440px}
  .step{grid-template-columns:80px 1fr}
  .why__list{grid-template-columns:repeat(3,1fr); gap:0 34px}
  .why__item{border-bottom:1px solid rgba(255,255,255,.16)}
  .contact__box{padding:56px 54px}
  .ftr__in{grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px}
  .ftr__legal{grid-template-columns:1fr auto; align-items:center}
}