/* Startseite – Vertrauen, Entstehung, Küchenmodelle, Google-Rezensionen.
   Gleiche Gestaltungssprache wie Schrankzeile & Schauraum: Papier #f2f0e8, Tinte #26261f, Akzent #9d343a. */
:root{--hp-ink:#26261f;--hp-muted:#6c685d;--hp-accent:#9d343a;--hp-paper:#f2f0e8;--hp-line:rgba(38,38,31,.12)}
.hp-wrap{max-width:1400px;margin:0 auto}
.hp-eyebrow{margin:0 0 12px;color:var(--hp-accent);font-size:10px;font-weight:700;letter-spacing:.16em}
.hp-title{margin:0;font:500 clamp(30px,3.3vw,52px)/1.06 'Manrope',sans-serif;letter-spacing:-.045em;color:var(--hp-ink)}
.hp-title em{font-style:normal;color:var(--hp-accent)}
.hp-lead{margin:0;max-width:360px;font-size:14px;line-height:1.6;color:var(--hp-muted)}
.hp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(22px,2.6vw,38px)}
.hp-stars{display:inline-flex;gap:2px;color:#e0a526}
.hp-stars svg{width:15px;height:15px;fill:currentColor;stroke:none}

/* ---------- 1. Vertrauensleiste ---------- */
.trust-strip{position:relative;z-index:2;background:var(--hp-paper);border-top:1px solid var(--hp-line);border-bottom:1px solid var(--hp-line);font-family:'DM Sans',sans-serif}
.trust-strip ul{list-style:none;margin:0 auto;padding:0 clamp(16px,4vw,64px);max-width:1528px;display:grid;grid-template-columns:repeat(4,1fr)}
.trust-strip li{display:flex;align-items:center;gap:14px;padding:22px clamp(10px,1.6vw,26px);border-left:1px solid var(--hp-line);min-width:0}
.trust-strip li:first-child{border-left:0;padding-left:0}
.trust-strip a{color:inherit;display:flex;align-items:center;gap:14px;min-width:0}
.trust-ico{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1px var(--hp-line);color:var(--hp-accent)}
.trust-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.trust-score{font:700 22px/1 'Manrope',sans-serif;letter-spacing:-.03em;color:var(--hp-ink)}
.trust-strip b{display:block;font:600 14px/1.25 'Manrope',sans-serif;letter-spacing:-.01em;color:var(--hp-ink)}
.trust-strip small{display:block;margin-top:3px;font-size:12px;color:var(--hp-muted);line-height:1.35}
.trust-rating{display:flex;flex-direction:column;gap:4px}
.trust-rating .row{display:flex;align-items:center;gap:8px}

/* ---------- 2. Entstehung: Rohbau → Küche ---------- */
.making{background:var(--hp-paper);padding:clamp(64px,8vw,120px) clamp(16px,4vw,64px) clamp(56px,7vw,100px);font-family:'DM Sans',sans-serif;color:var(--hp-ink)}
.making-mark{display:flex;align-items:center;gap:14px;margin-bottom:18px;color:var(--hp-muted);font-size:11px;letter-spacing:.14em;font-weight:700}
.making-mark strong{font:600 30px/1 'Manrope',sans-serif;letter-spacing:-.04em;color:var(--hp-ink)}
.compare{position:relative;aspect-ratio:16/9;overflow:hidden;background:#d9d4c8;user-select:none;touch-action:pan-y;cursor:ew-resize;--pos:50%}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare .after{clip-path:inset(0 0 0 var(--pos))}
.compare .before{transition:opacity .45s ease}
.compare .before.swap{opacity:0}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 24px rgba(0,0,0,.25)}
.compare-handle::after{content:"";position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326261f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 8px 24px rgba(20,18,12,.28)}
.compare-tag{position:absolute;top:18px;padding:7px 12px;border-radius:999px;background:rgba(20,19,16,.55);backdrop-filter:blur(8px);color:#f6f3ec;font-size:10px;font-weight:700;letter-spacing:.14em;pointer-events:none}
.compare-tag.l{left:18px}.compare-tag.r{right:18px;background:rgba(246,243,236,.9);color:var(--hp-ink)}
.compare-note{position:absolute;right:18px;bottom:16px;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.75);pointer-events:none}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare:focus-within .compare-handle::after{outline:2px solid var(--hp-accent);outline-offset:3px}
.making-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:0;border-bottom:1px solid var(--hp-line)}
.making-steps button{position:relative;text-align:left;background:none;padding:22px 24px 24px 0;color:var(--hp-muted);border-top:2px solid var(--hp-line);transition:color .3s}
.making-steps button::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--hp-accent);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.making-steps button.active{color:var(--hp-ink)}
.making-steps button.active::before{width:100%}
.making-steps span{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--hp-accent);margin-bottom:10px}
.making-steps b{display:block;font:600 clamp(17px,1.5vw,22px)/1.2 'Manrope',sans-serif;letter-spacing:-.03em}
.making-steps small{display:block;margin-top:6px;font-size:13px;line-height:1.5;max-width:300px}
.making-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px;flex-wrap:wrap}
.making-foot p{margin:0;font-size:14px;color:var(--hp-muted);max-width:520px;line-height:1.6}
.hp-btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--hp-accent);color:#fff;font-size:13px;font-weight:700;box-shadow:0 8px 22px rgba(157,52,58,.25);transition:transform .3s,background .3s}
.hp-btn:hover{transform:translateY(-2px);background:#b13b42}
.hp-btn.ghost{background:transparent;color:var(--hp-ink);box-shadow:inset 0 0 0 1px rgba(38,38,31,.25)}
.hp-btn.ghost:hover{background:#fff}

/* ---------- 3. Küchenmodelle ---------- */
.models{background:#ebe8df;padding:clamp(64px,8vw,120px) 0 clamp(56px,7vw,100px);font-family:'DM Sans',sans-serif;color:var(--hp-ink);overflow:hidden}
.models .hp-wrap{padding:0 clamp(16px,4vw,64px);box-sizing:content-box}
.models-filter{display:flex;gap:8px;flex-wrap:wrap}
.models-filter button{min-height:38px;padding:0 16px;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px rgba(38,38,31,.22);font-size:12px;font-weight:600;color:var(--hp-ink);transition:background .3s,color .3s}
.models-filter button.active{background:var(--hp-ink);color:#f6f3ec;box-shadow:none}
.models-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(clamp(16px,4vw,64px),calc((100vw - 1400px)/2)) 18px;scrollbar-width:none;scroll-padding-left:max(clamp(16px,4vw,64px),calc((100vw - 1400px)/2))}
.models-track::-webkit-scrollbar{display:none}
.model{flex:0 0 clamp(250px,23vw,320px);scroll-snap-align:start;background:#f6f3ec;display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,opacity .35s;box-shadow:0 1px 0 rgba(38,38,31,.06)}
.model:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(40,34,24,.14)}
.model[hidden]{display:none}
.model-front{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(180deg,#e4ded2,#d8d1c3);display:grid;place-items:center}
/* stilisierte Front: Schrankfront mit Griff / Griffmulde / Rahmen */
.model-front i{position:relative;display:block;width:58%;aspect-ratio:3/5;background:var(--c,#efeae1);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 40px -18px rgba(40,32,20,.45),0 2px 4px rgba(40,32,20,.15);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.model:hover .model-front i{transform:perspective(900px) rotateY(-14deg)}
.model-front i::before,.model-front i::after{content:"";position:absolute}
.f-groove i::before{left:0;right:0;top:9%;height:5px;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.05))}
.f-groove2 i::after{left:0;right:0;top:54%;height:5px;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.05))}
.f-handle i::before{right:9%;top:38%;width:5px;height:22%;border-radius:3px;background:linear-gradient(90deg,#7a776f,#d9d6cf 45%,#8b877e)}
.f-frame i::after{inset:11% 12%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08),inset 2px 2px 0 rgba(255,255,255,.35),0 0 0 2px rgba(255,255,255,.18)}
.f-knob i::before{right:12%;top:44%;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e6e3dc,#7d786e)}
.f-wood i{background:repeating-linear-gradient(92deg,rgba(80,52,24,.06) 0 3px,transparent 3px 11px),var(--c)}
.f-multi i{background:linear-gradient(180deg,#c9553f 0 33%,#3f6b73 33% 66%,#d9b45a 66%)}
.model-front .two{position:absolute;right:14%;bottom:16%;width:24%;aspect-ratio:3/5;background:var(--c2,#c8b394);box-shadow:0 14px 24px -12px rgba(40,32,20,.45)}
.model-tag{position:absolute;left:14px;top:14px;padding:6px 10px;border-radius:999px;background:rgba(246,243,236,.85);font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--hp-muted)}
.model-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.model-body h3{margin:0;font:600 22px/1.1 'Manrope',sans-serif;letter-spacing:-.035em}
.model-body p{margin:0;font-size:13px;color:var(--hp-muted);line-height:1.5}
.model-links{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}
.model-links a{font-size:12px;font-weight:700}
.model-links .ask{color:var(--hp-accent)}
.model-links .ext{color:var(--hp-muted);font-weight:600}
.models-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:8px}
.models-foot p{margin:0;font-size:13px;color:var(--hp-muted);max-width:560px;line-height:1.6}
.models-nav{display:flex;gap:8px}
.models-nav button{width:46px;height:46px;border-radius:50%;background:#f6f3ec;box-shadow:inset 0 0 0 1px rgba(38,38,31,.18);font-size:18px;color:var(--hp-ink)}
.models-nav button:hover{background:#fff}

/* ---------- 4. Google-Rezensionen ---------- */
.reviews{background:var(--hp-paper);padding:clamp(64px,8vw,120px) clamp(16px,4vw,64px);font-family:'DM Sans',sans-serif;color:var(--hp-ink)}
.reviews-grid{display:grid;grid-template-columns:minmax(260px,.8fr) 2fr;gap:clamp(24px,4vw,64px);align-items:start}
.reviews-score{position:sticky;top:110px}
.reviews-score .big{display:flex;align-items:flex-end;gap:14px;margin:6px 0 10px}
.reviews-score .big strong{font:500 clamp(72px,8vw,120px)/.85 'Manrope',sans-serif;letter-spacing:-.06em}
.reviews-score .big .hp-stars svg{width:22px;height:22px}
.reviews-score .count{font-size:14px;color:var(--hp-muted);margin:0 0 18px}
.reviews-topics{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 24px;padding:0;list-style:none}
.reviews-topics li{padding:7px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--hp-line);font-size:12px;font-weight:600}
.reviews-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.reviews-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review{background:#fff;padding:26px 24px 22px;display:flex;flex-direction:column;gap:16px;box-shadow:0 1px 0 rgba(38,38,31,.06);position:relative}
.review::before{content:"“";position:absolute;right:18px;top:4px;font:500 80px/1 'Manrope',sans-serif;color:rgba(157,52,58,.12)}
.review blockquote{margin:0;font:500 clamp(16px,1.25vw,19px)/1.45 'Manrope',sans-serif;letter-spacing:-.015em}
.review footer{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--hp-line)}
.review .avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#ebe5d8;font:700 13px/1 'Manrope',sans-serif;color:var(--hp-ink)}
.review footer b{display:block;font-size:13px}
.review footer small{display:block;font-size:11px;color:var(--hp-muted);margin-top:2px}
.reviews-src{margin:14px 0 0;font-size:11px;color:var(--hp-muted)}

/* Einblenden */
.hp-reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.hp-reveal.in{opacity:1;transform:none}

@media (max-width:1100px){
  .trust-strip ul{grid-template-columns:repeat(2,1fr)}
  .trust-strip li:nth-child(3){border-left:0;padding-left:0}
  .trust-strip li:nth-child(n+3){border-top:1px solid var(--hp-line)}
  .reviews-grid{grid-template-columns:1fr}
  .reviews-score{position:static}
}
@media (max-width:820px){
  .hp-head{display:block}.hp-head .hp-lead{margin-top:12px}
  .trust-strip li{padding:16px 10px;gap:10px}
  .trust-ico{width:34px;height:34px}.trust-ico svg{width:17px;height:17px}
  .trust-strip b{font-size:12.5px}.trust-strip small{font-size:11px}
  .trust-score{font-size:18px}
  .compare{aspect-ratio:4/3.4}
  .compare-handle::after{width:44px;height:44px;margin:-22px 0 0 -22px}
  .making-steps{grid-template-columns:repeat(3,1fr)}
  .making-steps button{padding:14px 10px 14px 0}
  .making-steps small{display:none}
  .making-steps b{font-size:14px}
  .model{flex-basis:72vw}
  .models-nav{display:none}
  .reviews-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.hp-reveal{opacity:1;transform:none;transition:none}.model,.model-front i{transition:none}}
/* Feinschliff */
.review{margin:0}
.making-steps{align-items:start}
.making-steps button{align-self:stretch}
.model-links{flex-wrap:wrap;row-gap:6px}
@media (max-width:820px){.reviews-list{gap:12px}.review{padding:22px 20px 18px}}