/* ZEMA Wohnemotionen — Entwurf 6 "Maison"
   Referenz-Prinzip: boehmler.de — Farbflächen, die hinter den Bildern hervorstehen,
   ruhiges Einrichtungshaus-Auftreten, Projekt-Einblicke, Leistungsliste */

:root{
  --oliv:#6E7C22;
  --oliv-dark:#55611A;
  --oliv-deep:#3E470F;
  --salbei:#BAC38C;
  --salbei-bg:#E9EDD9;
  --tanne:#1B5B3F;
  --gold:#A8934F;

  --ink:#1C1C19;
  --ink-70:#57574F;
  --ink-40:#96968C;
  --line:#E3E1D8;
  --paper:#FFFFFF;
  --paper-warm:#FAF8F3;

  --wrap:1300px;
  --wide:1560px;
  --gut:clamp(20px,4.5vw,60px);
  --ease:cubic-bezier(.22,.72,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.86;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wide{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut)}

/* ── Typo ── */
/* Messwerte der Referenz: Roboto 300, 60px, Laufweite 6px, Versalien */
h1,h2,h3{margin:0;font-family:"Roboto",sans-serif;font-weight:400;line-height:1.22;letter-spacing:.1em;text-transform:uppercase}  /* boehmler: 60px/400 */
.h1{font-size:clamp(2rem,4.2vw,3.75rem);overflow-wrap:break-word;hyphens:auto}
.h2{font-size:clamp(1.5rem,2.6vw,2.5rem);letter-spacing:.1em}
.h3{font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.34;letter-spacing:.06em;font-weight:400}
.h1 b,.h2 b{font-weight:500;color:var(--oliv)}
.eyebrow{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  font-weight:500;margin:0 0 1.2rem;display:flex;align-items:center;gap:.9rem
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;flex:none}
.eyebrow--c{justify-content:center}
.lead{font-size:clamp(1rem,1.2vw,1.13rem);color:var(--ink-70);max-width:62ch;margin:1.3rem 0 0}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:.8rem;padding:1.05rem 2.1rem;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  border:1px solid var(--ink);transition:.35s var(--ease)
}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--oliv{background:var(--oliv);border-color:var(--oliv);color:#fff}
.btn--oliv:hover{background:var(--oliv-deep);border-color:var(--oliv-deep)}
.btn--light{border-color:rgba(255,255,255,.6);color:#fff}
.btn--light:hover{background:#fff;color:var(--ink)}

/* ── Header ── */
.hdr{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
     border-bottom:1px solid transparent;transition:.35s var(--ease)}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:2rem;height:96px;transition:height .35s var(--ease)}
.hdr.is-stuck .hdr__in{height:74px}
.hdr__logo img{height:46px;width:auto;transition:height .35s var(--ease)}
.hdr.is-stuck .hdr__logo img{height:36px}
.nav{display:flex;gap:2.2rem;margin-left:auto}
.nav a{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;position:relative;padding:.45rem 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--oliv);transition:right .4s var(--ease)}
.nav a:hover{color:var(--oliv)}
.nav a:hover::after{right:0}
@media(max-width:1100px){.nav{display:none}}
.hdr__cta{display:flex;align-items:center;gap:1.2rem}
.hdr__tel{font-size:.9rem;letter-spacing:.04em;color:var(--oliv);font-weight:500;white-space:nowrap}
@media(max-width:1300px){.hdr__tel{display:none}}
@media(max-width:600px){.hdr__cta .btn{display:none}}
.burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:7px;align-items:flex-end;margin-left:auto}
.burger span{display:block;height:1px;background:var(--ink);transition:.35s var(--ease)}
.burger span:nth-child(1){width:28px}.burger span:nth-child(2){width:20px}
.burger.is-open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger.is-open span:nth-child(2){width:28px;transform:translateY(-4px) rotate(-45deg)}
@media(max-width:1100px){.burger{display:flex}}
.drawer{position:fixed;inset:0 0 0 auto;width:min(420px,100%);background:var(--paper-warm);z-index:100;
  transform:translateX(100%);transition:transform .45s var(--ease);padding:1.6rem var(--gut) 2rem;
  overflow-y:auto;display:flex;flex-direction:column}
.drawer.is-open{transform:none}
.drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.4rem}
.drawer__head img{height:38px;width:auto}
.drawer__close{font-size:2rem;line-height:1;padding:.2rem .5rem;color:var(--ink-70)}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{font-size:1.5rem;font-weight:300;padding:.85rem 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateX(18px);transition:.45s var(--ease)}
.drawer.is-open nav a{opacity:1;transform:none}
.drawer__foot{margin-top:auto;padding-top:2rem;color:var(--ink-70);font-size:.94rem}
.drawer__foot a{color:var(--oliv)}
.scrim{position:fixed;inset:0;background:rgba(28,28,25,.45);z-index:99;opacity:0;pointer-events:none;transition:opacity .4s}
.scrim.is-open{opacity:1;pointer-events:auto}

/* ── Hero ── */
.hero{padding:clamp(3rem,6vw,6rem) 0 0}
.hero__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.hero__grid > *{min-width:0}
@media(max-width:960px){.hero__grid{grid-template-columns:1fr}}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem}

/* ══ Signature: Farbfläche hinter dem Bild ══ */
.cf{position:relative;display:block}
.cf::before{
  content:"";position:absolute;background:var(--salbei);
  inset:auto -34px -34px 34px;top:34px;z-index:0;
  transition:transform .8s var(--ease)
}
.cf > img,.cf > .cf__img{position:relative;z-index:1;width:100%;display:block}
.cf:hover::before{transform:translate(10px,10px)}
.cf--oliv::before{background:var(--oliv)}
.cf--tanne::before{background:var(--tanne)}
.cf--gold::before{background:var(--gold)}
.cf--left::before{inset:auto 34px -34px -34px;top:34px}
.cf--sm::before{inset:auto -20px -20px 20px;top:20px}
@media(max-width:640px){
  .cf::before,.cf--left::before,.cf--sm::before{inset:auto -14px -14px 14px;top:14px}
}
.cf img{aspect-ratio:4/3.1;object-fit:cover}
.cf--tall img{aspect-ratio:3/3.8}

/* ── Sections ── */
.sec{padding:clamp(4.5rem,9vw,8.5rem) 0}
.sec--warm{background:var(--paper-warm)}
.sec--sage{background:var(--salbei-bg)}
.sec--ink{background:var(--ink);color:var(--paper)}
.sec--ink .h2,.sec--ink .h3{color:var(--paper)}
.sec--ink .lead{color:rgba(255,255,255,.72)}
.head{max-width:62ch;margin-bottom:clamp(2.5rem,4.5vw,4rem)}
.head--c{margin-inline:auto;text-align:center}
.head--c .lead{margin-inline:auto}
.head--c .eyebrow{justify-content:center}

/* Leistungen */
.leist{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
@media(max-width:760px){.leist{grid-template-columns:1fr}}
.leist__i{
  display:flex;gap:1.5rem;align-items:flex-start;padding:2rem 1.5rem 2rem 0;
  border-bottom:1px solid var(--line);transition:.35s var(--ease)
}
.leist__i:nth-child(odd){padding-right:2.5rem}
.leist__i:nth-child(even){padding-left:2.5rem;border-left:1px solid var(--line)}
@media(max-width:760px){.leist__i:nth-child(even){padding-left:0;border-left:0}}
.leist__i:hover{background:var(--paper-warm)}
.leist__n{font-size:.74rem;letter-spacing:.14em;color:var(--gold);font-weight:500;padding-top:.4rem;flex:none}
.leist__i h3{margin-bottom:.4rem}
.leist__i p{margin:0;color:var(--ink-70);font-size:.95rem}

/* Projekte */
.proj{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2.5rem,4vw,4rem) clamp(1.6rem,2.6vw,3rem)}
@media(max-width:960px){.proj{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.proj{grid-template-columns:1fr}}
.proj__i .h3{margin-bottom:.3rem}
.proj__i p{margin:0;color:var(--ink-70);font-size:.93rem}

/* ══ Signature 2: Projekt-Reveal (Geometrie nach boehmler.de vermessen) ══
   Ruhe:  Tafel translateY(100%)  – vollstaendig unter der Bildkante
          Text  translateY(-200%) – doppelte Eigenhoehe darueber, weggeschnitten
   Hover: beide auf 0 – die weisse Tafel schiebt sich ueber den Bildfuss,
          das Bild wirkt dadurch nach oben verkuerzt; der Text laeuft
          gegenlaeufig nach und setzt sich weich.
   Beide Ebenen: transform .4s ease-in-out (Originalwert)                     */
.proj__i .pv{position:relative;display:block;overflow:hidden}
.proj__i figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:var(--paper);overflow:hidden;
  padding:23px clamp(16px,1.6vw,22px) 14px;
  transform:translateY(100%);
  transition:transform .4s ease-in-out
}
.proj__i .pv__w{
  transform:translateY(-200%);
  transition:transform .4s ease-in-out
}
.proj__i:hover figcaption,
.proj__i:focus-within figcaption{transform:translateY(0)}
.proj__i:hover .pv__w,
.proj__i:focus-within .pv__w{transform:translateY(0)}

/* ohne Zeigegeraet: Text steht dauerhaft unter dem Bild, nichts verdeckt */
@media(hover:none){
  .proj__i .pv{overflow:visible}
  .proj__i figcaption{
    position:static;transform:none;background:none;
    padding:2.4rem 0 0;overflow:visible
  }
  .proj__i .pv__w{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .proj__i figcaption,.proj__i .pv__w{transition:none}
}

/* Zitat */
.quote{text-align:center;max-width:24ch;margin-inline:auto}
.quote p{font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.32;font-weight:300;margin:0}
.quote cite{display:block;margin-top:2rem;font-style:normal;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-40)}

/* Marken */
.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);max-width:940px;margin-inline:auto}
@media(max-width:640px){.brands{grid-template-columns:repeat(2,1fr)}}
.brands span{display:flex;align-items:center;justify-content:center;overflow:hidden;height:96px;background:#fff;
  border:1px solid var(--line);padding:18px 22px;transition:.3s var(--ease)}
.brands span:hover{border-color:var(--salbei);transform:translateY(-3px)}
.brands img{width:100%;height:100%;object-fit:contain;object-position:center}

/* MHK */
.mhk{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.8rem,3.5vw,3.4rem);align-items:center}
@media(max-width:940px){.mhk{grid-template-columns:1fr;text-align:center;justify-items:center}}
.mhk__logo{background:#fff;padding:1.3rem 1.6rem;flex:none}
.mhk__logo img{height:70px;width:auto}
.mhk p{margin:.7rem 0 0;color:var(--ink-70);font-size:.96rem;max-width:56ch}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
@media(max-width:900px){.kontakt{grid-template-columns:1fr}}
.kontakt dl{display:grid;grid-template-columns:8.5rem 1fr;gap:.7rem 1.4rem;margin:2rem 0 2.4rem;font-size:1rem}
.kontakt dt{color:var(--ink-40);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding-top:.35rem}
.kontakt dd{margin:0}
.kontakt dd a{color:var(--oliv)}

/* Footer */
.ft{background:var(--ink);color:rgba(255,255,255,.62);padding:clamp(4rem,7vw,5.5rem) 0 0;font-size:.94rem}
.ft__g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:clamp(2rem,4vw,3.5rem);padding-bottom:3.2rem}
@media(max-width:940px){.ft__g{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft__g{grid-template-columns:1fr}}
.ft h4{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:#fff;margin:0 0 1.4rem;font-weight:500}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.ft a:hover{color:#fff}
.ft__logo img{height:42px;filter:brightness(0) invert(1);margin-bottom:1.5rem;width:auto}
.ft__bar{border-top:1px solid rgba(255,255,255,.14);padding:1.5rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.83rem}
.ft__bar nav{display:flex;gap:1.7rem;flex-wrap:wrap}

/* Reveal */
[data-rv]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-rv].is-in{opacity:1;transform:none}
.is-static,a.is-static{cursor:default;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  [data-rv]{opacity:1;transform:none;transition:none}
  .cf::before{transition:none}
  html{scroll-behavior:auto}
}
/* Social-Links — Farben erbt der jeweilige Kontext über currentColor */
.soc{display:inline-flex;align-items:center;gap:.5rem}
.soc__l{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border:1px solid currentColor;border-radius:50%;opacity:.72;
  transition:opacity .25s ease,background-color .25s ease,color .25s ease,transform .25s ease
}
.soc__l:hover{opacity:1;transform:translateY(-2px)}
.soc--bare .soc__l{border:0;width:auto;height:auto;padding:.2rem}
.soc--solid .soc__l:hover{background:currentColor}
.soc--solid .soc__l:hover svg{color:var(--soc-hover-ink,#fff)}
.soc--sm .soc__l{width:32px;height:32px}
.soc--sm svg{width:16px;height:16px}
.soc__label{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.7;margin-right:.3rem}

/* ── Tap-Ziele auf Touchgeräten vergrößern ──
   Gemessen: Footer-Textlinks 18–22px hoch, Slider-Punkte 38×4px.
   Empfehlung 44px, Mindestmaß nach WCAG 2.5.8 sind 24px. Die Optik bleibt
   unverändert, nur die anklickbare Fläche wächst. */
@media (hover: none), (max-width: 768px) {
  .ft ul a,
  .ft__bar nav a,
  .topbar a,
  .top a {
    display: inline-block;
    padding-block: .42rem;
  }
  .ft ul { gap: .3rem }
  .hdr__tel, .kopf-soc a { min-height: 44px; display: inline-flex; align-items: center }
  /* Slider-Punkte: Balken bleibt schmal, Trefferfläche wird hoch */
  .dot { position: relative }
  .dot::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: -20px; bottom: -20px;
  }
  /* Pfeile und runde Schalter auf Mindestmaß */
  .arrow, .gal__btn, .rail__btn, .runter { min-width: 44px; min-height: 44px }
  /* Kontaktangaben in Definitionslisten und Textlinks */
  dd a, dl a, .studio__body a, .studio__b a, .kontakt a, .oz a, .mhk a[href^="tel"] {
    display: inline-block; padding-block: .4rem;
  }
  /* Unterstrichene Textlinks der Entwürfe 2 und 8 */
  .lnk, .a, .card__lnk, .welt__lnk, .rg-card__meta a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  /* Logo-Link und Menü-Umschalter mit unsichtbar vergrößerter Fläche */
  .hdr__logo, .umschalter { position: relative }
  .hdr__logo::after, .umschalter::after {
    content: ""; position: absolute; left: -8px; right: -8px;
    top: 50%; height: 44px; transform: translateY(-50%);
  }
}