/* ═══════════════════════════════════════════════════════════════════
   HAUS-SKIN v2 (23.09.2026) — inc/haus-skin.php
   »Das Haus«: Lookbook-Struktur in Rompes EIGENER Farbwelt —
   Ivory, Schwarz, Champagner. (v1 hatte die Tannen-Palette eines
   Kunden-Entwurfs übernommen — von Max verworfen: „warum grün?!")
   Schicht über main.css: dezenter Token-Shift + Haus-Sektionen.
   ═══════════════════════════════════════════════════════════════════ */

body.rompe-haus{
  --bg:#FAFAF7;
  --bg-grey:#EEEBE4;
  --white:#fff;
  --text:#1a1a1a;
  --text-light:#6a6864;
  --primary:#0D0D0F;
  --primary-lift:#2A2A2C;
  --accent:#8C6D3F;                /* Bronze: Kicker, Signale (lesbar auf Ivory) */
  --accent-light:#A6845C;
  --border:#D9D5CC;
  --shadow:0 1px 0 var(--border);
  --shadow-lg:0 30px 80px -20px rgba(0,0,0,.25);
  --haus-dark:#101013;
  --haus-gold:#C9A96A;             /* Champagner: Akzente auf Dunkel */
  --haus-paper:#F7F5F0;
  background:var(--bg);
  color:var(--text);
}

/* ── Typografie: eine Stimme (Outfit), Akzente über Farbe ── */
body.rompe-haus h1 em,
body.rompe-haus h2 em{font-family:var(--font-h);font-style:normal;font-weight:inherit;letter-spacing:inherit;color:var(--accent)}
body.rompe-haus .section--dark h2 em,
body.rompe-haus .final-cta h2 em,
body.rompe-haus .footer-cta-headline em{color:var(--haus-gold)}
body.rompe-haus .hero h1 em{color:var(--haus-gold)}
body.rompe-haus ::selection{background:var(--primary);color:#fff}
body.rompe-haus .chapter-no{color:var(--accent)}
body.rompe-haus .eyebrow{color:var(--accent)}
body.rompe-haus .section--dark .hero-issue{color:var(--haus-gold)}

/* ── Header ── */
body.rompe-haus .site-header{background:rgba(250,250,247,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
/* Mobil KEIN backdrop-filter: er macht den Header zum Containing-Block für
   position:fixed-Nachfahren — das Fullscreen-Menü klebte sonst am Header (Bugfix 26.09.) */
@media(max-width:1000px){
  body.rompe-haus .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(250,250,247,.97)}
}

/* ── Preise & Signale ── */
body.rompe-haus .preis-liste__preis,
body.rompe-haus .haus-station__price .amt,
body.rompe-haus .haus-look__total .amt{color:var(--primary)}
body.rompe-haus .chk{color:var(--accent)}

/* ═══ HAUS-SEKTIONEN (front-page.php) ═══ */

/* Hero: Ivory-Split mit Lookbook-Foto */
body.rompe-haus .haus-hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:stretch;background:var(--bg)}
body.rompe-haus .haus-hero__copy{display:flex;flex-direction:column;justify-content:center;gap:1.7rem;padding:7.5rem clamp(1.5rem,4.5vw,4.5rem) 5rem clamp(1.25rem,4vw,3.5rem)}
body.rompe-haus .haus-hero__copy h1{font-size:clamp(2.9rem,6.2vw,6rem);font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--primary)}
body.rompe-haus .haus-hero__copy h1 em{color:var(--accent)}
body.rompe-haus .haus-hero__sub{max-width:520px;font-size:clamp(.98rem,1.25vw,1.12rem);line-height:1.7;color:var(--text-light)}
body.rompe-haus .haus-hero__actions{display:flex;flex-wrap:wrap;gap:.9rem}
body.rompe-haus .haus-hero__foot{display:flex;flex-wrap:wrap;gap:1.75rem;font-size:.78rem;color:var(--text-light);letter-spacing:.04em}
body.rompe-haus .haus-hero__media{position:relative;overflow:hidden;background:var(--bg-grey)}
body.rompe-haus .haus-hero__media img{position:absolute;inset:0;width:100%;height:132%;object-fit:cover;object-position:0% 12%}
body.rompe-haus .haus-hero__credit{position:absolute;left:1.1rem;bottom:1rem;background:rgba(250,250,247,.92);padding:.5rem .85rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-light)}
body.rompe-haus .haus-label{font-size:.74rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--text-light)}
body.rompe-haus .haus-label .dot{color:var(--accent)}

/* Rundgang */
body.rompe-haus .haus-station{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.75rem,4vw,4rem);align-items:center;padding-block:clamp(2.25rem,4.5vw,4rem);border-top:1px solid var(--border)}
body.rompe-haus .haus-station:last-of-type{border-bottom:1px solid var(--border)}
body.rompe-haus .haus-station:nth-of-type(even) .haus-station__media{order:2}
body.rompe-haus .haus-station__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-grey)}
body.rompe-haus .haus-station__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.65,.25,1)}
body.rompe-haus .haus-station:hover .haus-station__media img{transform:scale(1.035)}
body.rompe-haus .haus-station__no{position:absolute;top:1rem;left:1rem;background:rgba(250,250,247,.92);padding:.45rem .75rem;font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--primary);z-index:2}
body.rompe-haus .haus-station__body{display:flex;flex-direction:column;gap:.85rem;padding-block:.5rem}
body.rompe-haus .haus-station__body h3{font-size:clamp(1.5rem,2.5vw,2.1rem);font-weight:700;letter-spacing:-.025em;color:var(--primary)}
body.rompe-haus .haus-station__body p{font-size:.94rem;line-height:1.7;color:var(--text-light);max-width:520px}
body.rompe-haus .haus-station__pieces{font-size:.88rem;line-height:1.8;color:var(--text)}
body.rompe-haus .haus-station__price{display:inline-flex;align-items:baseline;gap:.6rem;margin-top:.3rem}
body.rompe-haus .haus-station__price .amt{font-family:var(--font-display);font-size:1.3rem;font-weight:700}
body.rompe-haus .haus-station__price .per{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-light)}
body.rompe-haus .haus-station__link{margin-top:.25rem;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);align-self:flex-start;border-bottom:1px solid var(--accent);padding-bottom:3px}

/* Prinzip (Nachtschwarz mit Champagner) */
body.rompe-haus .haus-prinzip{background:var(--haus-dark);color:var(--haus-paper)}
body.rompe-haus .haus-prinzip .haus-label{color:rgba(247,245,240,.55)}
body.rompe-haus .haus-prinzip h2{color:#fff}
body.rompe-haus .haus-prinzip h2 em{color:var(--haus-gold)}
body.rompe-haus .haus-prinzip .section-header p{color:rgba(247,245,240,.7)}
body.rompe-haus .haus-prinzip__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1px;background:rgba(247,245,240,.16);border:1px solid rgba(247,245,240,.16)}
body.rompe-haus .haus-prinzip__cell{background:var(--haus-dark);padding:2.1rem 2rem 2.5rem;display:flex;flex-direction:column;gap:.85rem}
body.rompe-haus .haus-prinzip__cell .num{font-family:var(--font-display);font-size:.8rem;font-weight:700;letter-spacing:.22em;color:var(--haus-gold)}
body.rompe-haus .haus-prinzip__cell h3{font-size:1.3rem;font-weight:600;color:#fff;letter-spacing:-.015em}
body.rompe-haus .haus-prinzip__cell p{font-size:.9rem;line-height:1.7;color:rgba(247,245,240,.7)}

/* Zwei Wege */
body.rompe-haus .haus-wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:1.75rem}
body.rompe-haus .haus-weg{border:1px solid var(--border);background:#fff;display:flex;flex-direction:column}
body.rompe-haus .haus-weg--dark{background:var(--primary);border-color:var(--primary);color:var(--haus-paper)}
body.rompe-haus .haus-weg__media{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
body.rompe-haus .haus-weg__media>span{display:block;position:relative;aspect-ratio:3/4;overflow:hidden}
body.rompe-haus .haus-weg__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
body.rompe-haus .haus-weg__body{padding:1.9rem 2rem 2.25rem;display:flex;flex-direction:column;gap:.85rem;flex-grow:1}
body.rompe-haus .haus-weg__body .haus-label{color:var(--accent)}
body.rompe-haus .haus-weg--dark .haus-label{color:var(--haus-gold)}
body.rompe-haus .haus-weg__body h3{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;color:var(--primary)}
body.rompe-haus .haus-weg--dark h3{color:#fff}
body.rompe-haus .haus-weg__body p{font-size:.94rem;line-height:1.7;color:var(--text-light)}
body.rompe-haus .haus-weg--dark .haus-weg__body p{color:rgba(247,245,240,.75)}
body.rompe-haus .haus-weg__facts{display:flex;flex-direction:column;gap:.5rem;font-size:.88rem;margin-top:.25rem}
body.rompe-haus .haus-weg__facts span::before{content:'\2014';color:var(--accent);margin-right:.6rem}
body.rompe-haus .haus-weg--dark .haus-weg__facts span::before{color:var(--haus-gold)}
body.rompe-haus .haus-weg__body .btn{align-self:flex-start;margin-top:auto}
body.rompe-haus .haus-weg--dark .btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
body.rompe-haus .haus-weg--dark .btn-outline:hover{background:#fff;color:var(--primary)}

/* Looks */
body.rompe-haus .haus-looks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:1.75rem}
body.rompe-haus .haus-look{background:#fff;border:1px solid var(--border);display:flex;flex-direction:column}
body.rompe-haus .haus-look__media{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
body.rompe-haus .haus-look__media img{width:100%;aspect-ratio:3/4.2;object-fit:cover;object-position:top}
body.rompe-haus .haus-look__body{padding:1.5rem 1.6rem 1.75rem;display:flex;flex-direction:column;gap:.75rem;flex-grow:1}
body.rompe-haus .haus-look__body h3{font-size:1.2rem;font-weight:700;letter-spacing:-.015em;color:var(--primary)}
body.rompe-haus .haus-look__items{display:flex;flex-direction:column;gap:.45rem;font-size:.85rem;color:var(--text-light)}
body.rompe-haus .haus-look__items div{display:flex;justify-content:space-between;gap:.75rem}
body.rompe-haus .haus-look__items div span:last-child{font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
body.rompe-haus .haus-look__items a{border-bottom:1px dotted var(--border)}
body.rompe-haus .haus-look__items a:hover{color:var(--primary);border-color:var(--primary)}
body.rompe-haus .haus-look__total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--border);padding-top:.75rem;margin-top:.35rem}
body.rompe-haus .haus-look__total .lbl{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-light)}
body.rompe-haus .haus-look__total .amt{font-family:var(--font-display);font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
body.rompe-haus .haus-look__team{font-size:.78rem;color:var(--text-light)}
body.rompe-haus .haus-look-note{margin-top:1.6rem;font-size:.78rem;color:var(--text-light);line-height:1.6}

/* Lookbook-Prozess + Seiten-Streifen */
body.rompe-haus .haus-lookbook{background:var(--bg-grey)}
body.rompe-haus .haus-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:1.75rem;margin-bottom:clamp(3rem,6vw,5rem)}
body.rompe-haus .haus-step{display:flex;flex-direction:column;gap:.6rem}
body.rompe-haus .haus-step .num{font-family:var(--font-display);font-size:1.9rem;font-weight:300;color:var(--accent)}
body.rompe-haus .haus-step h3{font-size:1.05rem;font-weight:600;color:var(--primary)}
body.rompe-haus .haus-step p{font-size:.88rem;line-height:1.65;color:var(--text-light)}
body.rompe-haus .haus-deckstrip{display:flex;gap:clamp(1.25rem,3vw,2.5rem);overflow-x:auto;padding:.6rem .25rem 1.6rem;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
body.rompe-haus .haus-deckpage{flex:0 0 min(720px,86%);scroll-snap-align:start;transform:rotate(var(--tilt,0deg));margin:0}
body.rompe-haus .haus-deckpage__frame{position:relative;display:block;background:#fff;padding:10px;box-shadow:0 24px 60px -28px rgba(0,0,0,.35)}
body.rompe-haus .haus-deckpage__frame img{width:100%;height:auto;display:block}
body.rompe-haus .haus-deckpage__patch{position:absolute;background:#F0EBDF;pointer-events:none}
body.rompe-haus .haus-deckpage figcaption,
body.rompe-haus .haus-deckcap{margin-top:.5rem;font-size:.78rem;color:var(--text-light);letter-spacing:.06em}

/* Final-CTA (Nachtschwarz + Champagner) */
body.rompe-haus .final-cta{background:var(--primary);color:#fff;padding-block:clamp(5rem,9vw,8.5rem);text-align:left}
body.rompe-haus .final-cta h2{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:700;letter-spacing:-.03em;line-height:1.06;color:#fff;margin-bottom:2rem}
body.rompe-haus .final-cta__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.4rem}
body.rompe-haus .final-cta__micro{font-size:.82rem;color:rgba(255,255,255,.55);letter-spacing:.04em}
body.rompe-haus .final-cta .btn-ghost{border:1px solid rgba(255,255,255,.5);color:#fff}
body.rompe-haus .final-cta .btn-ghost:hover{border-color:#fff}

/* Mobil */
@media (max-width:960px){
  body.rompe-haus .haus-hero{grid-template-columns:1fr}
  body.rompe-haus .haus-hero__media{min-height:52vh;order:-1}
  body.rompe-haus .haus-hero__copy{padding-top:2.5rem}
  body.rompe-haus .haus-station,
  body.rompe-haus .haus-station:nth-of-type(even) .haus-station__media{grid-template-columns:1fr;order:0}
}