:root{
  /* echte Ziegelfarben aus dem Musterkoffer, dazu Zinkgrau und Sommerhimmel */
  --naturrot:#B4472C;
  --tanne:#3D5A46;
  --zink:#6E767C;
  --tinte:#2B2422;
  --putz:#F6F1EA;
  --karte:#FFFFFF;
  --himmel:#CFE0E8;
  --sonne:#E9A93C;

  --ziegel:var(--naturrot);      /* wird vom Farbwähler überschrieben */

  --s--2:clamp(.73rem,.71rem + .1vw,.8rem);
  --s--1:clamp(.86rem,.83rem + .13vw,.95rem);
  --s-0:clamp(1.02rem,.99rem + .16vw,1.12rem);
  --s-1:clamp(1.18rem,1.08rem + .4vw,1.45rem);
  --s-2:clamp(1.55rem,1.2rem + 1.6vw,2.65rem);
  --s-3:clamp(2.2rem,1.4rem + 3.5vw,4.5rem);
  --space:clamp(1.4rem,1.1rem + 1.5vw,2.5rem);
  --edge:clamp(1.2rem,.7rem + 2.5vw,3.25rem);
}
*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dt,dd{margin:0;padding:0;}
body{
  font-family:'Figtree',system-ui,sans-serif;
  font-size:var(--s-0);line-height:1.65;font-weight:400;
  color:var(--tinte);background:var(--putz);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--tanne);outline-offset:3px;}
[id]{scroll-margin-top:3.5rem;}

.v-display{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;line-height:1.02;letter-spacing:-.03em;}
.v-wrap{width:min(72rem,100%);margin-inline:auto;padding-inline:var(--edge);}
.v-mark{display:inline-block;font-size:var(--s--2);letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:var(--tinte);background:var(--sonne);padding:.3rem .75rem;border-radius:1rem;}

/* ── Präsenzo-Leiste ── */
.pz{background:var(--tinte);color:var(--putz);font-size:var(--s--1);}
.pz__in{width:min(72rem,100%);margin-inline:auto;padding:.65rem var(--edge);
  display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:center;justify-content:center;text-align:center;}
.pz__cta{color:var(--sonne);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}

/* ── Kopf ── */
.kopf{background:var(--karte);}
.kopf__in{width:min(72rem,100%);margin-inline:auto;padding:1rem var(--edge);
  display:flex;align-items:center;gap:var(--space);flex-wrap:wrap;}
.haus{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:var(--s-1);
  letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:.5rem;}
.haus i{width:1.15rem;height:1.15rem;border-radius:.3rem;background:var(--ziegel);display:block;}
.nav{margin-inline-start:auto;display:flex;gap:.4rem;flex-wrap:wrap;font-size:var(--s--1);font-weight:600;}
.nav a{text-decoration:none;color:var(--tinte);padding:.4rem .9rem;border-radius:1.4rem;}
.nav a:hover{background:var(--putz);}
.nav a[aria-current="page"]{background:var(--tinte);color:var(--putz);}

/* ── Hero ── */
.gieb{background:var(--karte);padding-block:clamp(2.25rem,1.7rem + 3vw,4rem) clamp(2.5rem,1.9rem + 3vw,4.25rem);}
.gieb h1{font-size:var(--s-3);max-width:16ch;margin-top:1rem;}
.gieb h1 span{color:var(--ziegel);}
.gieb__lede{margin-top:1.3rem;max-width:46ch;font-size:var(--s-1);line-height:1.5;color:#6B5F59;}
.gieb__reihe{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.7rem;}

.b-voll{display:inline-block;background:var(--tinte);color:var(--putz);text-decoration:none;
  font-size:var(--s--1);font-weight:700;padding:.95rem 1.8rem;border-radius:2rem;border:2px solid var(--tinte);}
.b-voll:hover{background:var(--ziegel);border-color:var(--ziegel);}
.b-linie{display:inline-block;text-decoration:none;border:2px solid var(--tinte);border-radius:2rem;
  font-size:var(--s--1);font-weight:700;padding:.95rem 1.8rem;}
.b-linie:hover{background:var(--sonne);border-color:var(--sonne);}

/* ── Signatur: der Ziegelfarben-Wähler ── */
.waehler{margin-top:clamp(2.25rem,1.7rem + 2.5vw,3.5rem);}
.zw{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.dach{border-radius:1.4rem;overflow:hidden;border:2px solid var(--tinte);background:var(--himmel);}
.dach-svg{display:block;width:100%;height:auto;}
.zg-himmel{fill:var(--himmel);}
.zg{fill:var(--ziegel);}
.zg-hoch{fill:#FFFFFF;fill-opacity:.22;}
.zg-tief{fill:#000000;fill-opacity:.22;}
.zg-kante{fill:#000000;fill-opacity:.3;}
.zg-fuge{fill:#000000;fill-opacity:.22;}
.zg-first{fill:var(--ziegel);filter:brightness(.88);}
.kamin rect{fill:#B9AEA2;}
.kamin-blech{fill:#8A9296;}
.zg-rinne{fill:#8A9296;}

.farben{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;}
.farben label{display:flex;align-items:center;gap:.5rem;cursor:pointer;
  background:var(--karte);border:2px solid rgba(43,36,34,.16);border-radius:2rem;
  padding:.4rem .9rem .4rem .45rem;font-size:var(--s--2);font-weight:700;}
.farben label:hover{border-color:var(--tinte);}
.farben label i{width:1.35rem;height:1.35rem;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(43,36,34,.25);}

/* die acht Farben — jede setzt --ziegel für die ganze Seite,
   deshalb stehen die Radios ganz oben im body und nicht beim Wähler */
#z1:checked ~ *{--ziegel:#B4472C;}
#z2:checked ~ *{--ziegel:#9C4127;}
#z3:checked ~ *{--ziegel:#7C3A25;}
#z4:checked ~ *{--ziegel:#5A2E22;}
#z5:checked ~ *{--ziegel:#3D5A46;}
#z6:checked ~ *{--ziegel:#5A6067;}
#z7:checked ~ *{--ziegel:#34373A;}
#z8:checked ~ *{--ziegel:#17181A;}
#z1:checked ~ * label[for="z1"],#z2:checked ~ * label[for="z2"],
#z3:checked ~ * label[for="z3"],#z4:checked ~ * label[for="z4"],
#z5:checked ~ * label[for="z5"],#z6:checked ~ * label[for="z6"],
#z7:checked ~ * label[for="z7"],#z8:checked ~ * label[for="z8"]{
  border-color:var(--tinte);background:var(--sonne);}
#z1:focus-visible ~ * label[for="z1"],#z2:focus-visible ~ * label[for="z2"],
#z3:focus-visible ~ * label[for="z3"],#z4:focus-visible ~ * label[for="z4"],
#z5:focus-visible ~ * label[for="z5"],#z6:focus-visible ~ * label[for="z6"],
#z7:focus-visible ~ * label[for="z7"],#z8:focus-visible ~ * label[for="z8"]{
  outline:3px solid var(--tanne);outline-offset:2px;}

.waehler__notiz{margin-top:1rem;font-size:var(--s--1);color:#6B5F59;max-width:56ch;}

/* ── Abschnitte ── */
.reihe{padding-block:clamp(3rem,2.2rem + 4vw,5.5rem);}
.reihe--karte{background:var(--karte);}
.reihe--tinte{background:var(--tinte);color:var(--putz);}
.reihe--tinte .v-mark{background:var(--sonne);color:var(--tinte);}
.reihe__kopf{max-width:50ch;}
.reihe__kopf h2{font-size:var(--s-2);margin-top:.8rem;}
.reihe__kopf p{margin-top:.9rem;color:#6B5F59;}
.reihe--tinte .reihe__kopf p{color:rgba(246,241,234,.78);}

/* ── Ziegelformen ── */
.formen{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
@media (min-width:42rem){.formen{grid-template-columns:1fr 1fr;}}
@media (min-width:64rem){.formen{grid-template-columns:repeat(4,1fr);}}
.form{background:var(--karte);border:2px solid var(--tinte);border-radius:1.2rem;
  padding:1.4rem;display:flex;flex-direction:column;}
.reihe--karte .form{background:var(--putz);}
.form svg{display:block;width:100%;height:auto;margin-bottom:1rem;}
.form h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:var(--s-1);letter-spacing:-.02em;}
.form p{margin-top:.55rem;font-size:var(--s--1);color:#6B5F59;}
.form__fuss{margin-top:auto;padding-top:1rem;font-size:var(--s--2);font-weight:800;color:var(--tinte);}

/* ── Bänder ── */
.punkte{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
@media (min-width:44rem){.punkte{grid-template-columns:1fr 1fr;}}
@media (min-width:66rem){.punkte{grid-template-columns:repeat(3,1fr);}}
.punkt{border-top:4px solid var(--sonne);padding-top:1rem;}
.punkt h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:var(--s-1);letter-spacing:-.02em;}
.punkt p{margin-top:.5rem;font-size:var(--s--1);color:#6B5F59;}
.reihe--tinte .punkt p{color:rgba(246,241,234,.78);}

/* ── Liste ── */
.liste{margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
.eintrag{display:grid;gap:.35rem 1.5rem;grid-template-columns:1fr;
  padding-block:1.25rem;border-bottom:2px solid rgba(43,36,34,.12);}
.reihe--tinte .eintrag{border-bottom-color:rgba(246,241,234,.2);}
.eintrag:first-child{border-top:2px solid rgba(43,36,34,.12);}
.reihe--tinte .eintrag:first-child{border-top-color:rgba(246,241,234,.2);}
@media (min-width:50rem){.eintrag{grid-template-columns:minmax(11rem,.8fr) minmax(0,1.7fr) auto;align-items:baseline;}}
.eintrag__name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:var(--s-1);letter-spacing:-.02em;}
.eintrag__text{font-size:var(--s--1);color:#6B5F59;}
.reihe--tinte .eintrag__text{color:rgba(246,241,234,.78);}
.eintrag__wert{font-size:var(--s--2);font-weight:800;background:var(--sonne);color:var(--tinte);
  padding:.25rem .7rem;border-radius:1rem;white-space:nowrap;justify-self:start;}

/* ── Bild ── */
.bild{margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
.bild img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:1.4rem;border:2px solid var(--tinte);}
.bild figcaption{margin-top:.7rem;font-size:var(--s--2);letter-spacing:.12em;text-transform:uppercase;color:#6B5F59;font-weight:700;}

/* ── Kontakt ── */
.paare{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
@media (min-width:44rem){.paare{grid-template-columns:1fr 1fr;}}
.paar h3{font-size:var(--s--2);font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.85rem;}
.paar__zeile{display:flex;justify-content:space-between;gap:1rem;padding-block:.55rem;
  border-bottom:2px solid rgba(43,36,34,.12);font-size:var(--s--1);}
.reihe--tinte .paar__zeile{border-bottom-color:rgba(246,241,234,.2);}
.paar__zeile span:last-child{font-weight:700;text-align:right;}

/* ── Unterseiten ── */
.oben{background:var(--karte);padding-block:clamp(2.5rem,1.9rem + 3vw,4.25rem);}
.oben h1{font-size:var(--s-2);max-width:21ch;margin-top:.8rem;}
.oben h1 span{color:var(--ziegel);}
.oben p{margin-top:1rem;max-width:50ch;color:#6B5F59;font-size:var(--s-1);line-height:1.5;}

.fuss{padding-block:2.5rem;font-size:var(--s--1);color:#6B5F59;}
.fuss a{color:var(--tinte);font-weight:700;}
.fuss p + p{margin-top:.45rem;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}