/* =========================================================================
   Mestex Fashion — „Atelier am Jadebusen"  ·  TwoPixels CMS
   Eigenständige Couture-/Handwerks-Identität: die Goldnaht als Signatur.
   Display Fraunces · Body Work Sans · Etikett Space Mono
   ========================================================================= */
:root{
  --wine:#7a2440; --wine-2:#9b2f53; --wine-ink:#5c1a30;
  --gold:#b3873a; --gold-deep:#8a6410; --gold-soft:#e8d9b0;
  --linen:#efe9dd; --linen-2:#e5dccb; --paper:#f8f4ec;
  --ink:#241a1d; --ink-2:#4a3b40; --muted:#8a7a80;
  --line:#d8cdbb;
  --stitch: repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 16px);
  --stitch-v: repeating-linear-gradient(0deg,var(--gold) 0 8px,transparent 8px 16px);
  --wrap:1180px;
  --fdisp:'Fraunces',Georgia,'Times New Roman',serif;
  --fbody:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fmono:'Space Mono','Courier New',ui-monospace,monospace;
  --shadow:0 18px 40px rgba(36,26,29,.16);
  --cms-accent:#9b2f53;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fbody);color:var(--ink);background:var(--linen);
  line-height:1.68;font-size:clamp(1rem,.55vw+.9rem,1.06rem);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 .4em;font-family:var(--fdisp);font-weight:400;line-height:1.04;letter-spacing:-.01em;font-optical-sizing:auto}
h1{font-size:clamp(2.6rem,7vw,5.2rem);font-weight:340}
h2{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:360}
h3{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:420}
p{margin:0 0 1rem}
.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--wine);color:#fff;padding:.7rem 1.2rem;z-index:200}
.skip:focus{left:0}

/* ---- Etikett / Care-Label (Signatur-Utility) ---- */
.label{font-family:var(--fmono);text-transform:uppercase;letter-spacing:.22em;font-size:.7rem;color:var(--gold-deep);font-weight:400}
.label--light{color:var(--gold-soft)}
.chip{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--fmono);text-transform:uppercase;
  letter-spacing:.16em;font-size:.66rem;border:1px solid var(--gold);color:var(--gold-deep);padding:.4rem .8rem;border-radius:2px}
.chip--light{color:var(--gold-soft);border-color:rgba(179,135,58,.6)}
.chip::before{content:"";width:14px;height:0;border-top:2px dashed var(--gold);opacity:.9}

/* ---- Naht-Trenner (Signatur) ---- */
.seam{height:2px;background:var(--stitch);opacity:.75;border:0;margin:0}
.seam-wrap{padding:0;margin:0}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--fmono);text-transform:uppercase;letter-spacing:.12em;
  font-size:.78rem;padding:1rem 1.6rem;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  transition:background .2s,color .2s,transform .2s;border-radius:2px}
.btn:hover{transform:translateY(-2px)}
.btn--wine{background:var(--wine);border-color:var(--wine);color:var(--paper)}
.btn--wine:hover{background:var(--wine-ink)}
.btn--gold{background:transparent;border-color:var(--gold);color:var(--gold-deep)}
.btn--gold:hover{background:var(--gold);color:#fff}
.btn--ghost{border-color:rgba(248,244,236,.5);color:var(--paper)}
.btn--ghost:hover{background:rgba(248,244,236,.12)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex:none}

/* ---- Selvage (Stoffkante oben) ---- */
.selvage{background:var(--ink);color:var(--linen);font-family:var(--fmono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.selvage .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0;min-height:34px}
.selvage a{color:var(--gold-soft)}
.selvage .sv-r{display:flex;gap:1.4rem}
@media(max-width:640px){.selvage .sv-coord{display:none}}

/* ---- Masthead ---- */
.masthead{position:sticky;top:0;z-index:100;background:var(--linen);border-bottom:2px dashed var(--gold)}
.masthead .wrap{display:flex;align-items:center;gap:1.5rem;min-height:78px}
.brand{display:flex;align-items:center;gap:.75rem;margin-right:auto}
.brand .mono{width:44px;height:44px;flex:none;border:1.5px solid var(--wine);border-radius:50%;display:grid;place-items:center;
  font-family:var(--fdisp);font-size:1.5rem;color:var(--wine);background:var(--paper)}
.brand .bname{font-family:var(--fdisp);font-size:1.5rem;line-height:1;color:var(--ink);letter-spacing:.01em}
.brand .bname em{font-style:italic;color:var(--wine)}
.brand .btag{display:block;font-family:var(--fmono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-top:3px}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav a{font-family:var(--fmono);text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:var(--ink-2);padding:.3rem 0;position:relative}
.nav a:hover{color:var(--wine)}
.nav a.active{color:var(--wine)}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--stitch)}
.nav .navcta{border:1.5px solid var(--wine);color:var(--wine);padding:.55rem 1rem;border-radius:2px}
.nav .navcta:hover{background:var(--wine);color:var(--paper)}
.burger{display:none;width:46px;height:46px;border:1.5px solid var(--ink);background:var(--paper);position:relative;cursor:pointer;padding:0;flex:none;border-radius:2px}
.burger i{position:absolute;left:12px;width:22px;height:2px;background:var(--ink);transition:.25s}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:29px}
.burger[aria-expanded="true"] i:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){top:22px;transform:rotate(-45deg)}

/* ---- HERO (asymmetrisch, Weinrot-Panel + Bild im Nahtrahmen) ---- */
.hero{background:var(--linen)}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:min(84vh,760px)}
.hero .left{background:var(--wine);color:var(--paper);padding:clamp(2.6rem,5vw,4.6rem);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.hero .left::after{content:"";position:absolute;inset:14px;border:2px dashed rgba(232,217,176,.4);pointer-events:none}
.hero .left .inner{position:relative;z-index:2;max-width:34rem}
.hero h1{color:var(--paper);margin:.6rem 0 .2rem}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero .lede{color:rgba(248,244,236,.86);font-size:clamp(1.02rem,1.2vw,1.18rem);max-width:40ch;margin:1.3rem 0 2rem}
.hero .hero-cta{display:flex;flex-wrap:wrap;gap:.9rem}
.hero .right{position:relative;background:var(--linen-2)}
.hero .right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .right::after{content:"";position:absolute;inset:18px;border:2px dashed var(--gold);pointer-events:none;z-index:2}
.hero .vlabel{position:absolute;top:50%;right:20px;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--fmono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--paper);z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.5)}
@media(max-width:860px){
  .hero .grid{grid-template-columns:1fr;min-height:0}
  .hero .right{min-height:56vw}
}

/* ---- Section-Grundlagen ---- */
.section{padding:clamp(3rem,6vw,5.5rem) 0}
.section--linen{background:var(--linen)}
.section--paper{background:var(--paper)}
.section--wine{background:var(--wine);color:var(--paper)}
.section--ink{background:var(--ink);color:var(--linen)}
.shead{max-width:60ch;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.shead.center{margin-inline:auto;text-align:center}
.shead .label{display:block;margin-bottom:.9rem}
.shead h2{color:inherit}
.shead p{color:var(--ink-2);font-size:1.08rem;max-width:52ch}
.section--wine .shead p,.section--ink .shead p{color:rgba(248,244,236,.82)}

/* ---- Manifest-Intro (großes Zitat) ---- */
.manifest .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,3.5rem);align-items:start}
.manifest .idx{font-family:var(--fdisp);font-size:clamp(3rem,7vw,6rem);color:var(--gold);line-height:.8;font-style:italic}
.manifest blockquote{margin:0;font-family:var(--fdisp);font-size:clamp(1.5rem,3vw,2.4rem);font-weight:340;line-height:1.28;color:var(--ink)}
.manifest blockquote b{color:var(--wine);font-weight:340}
.manifest .sig{margin-top:1.4rem;font-family:var(--fmono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
@media(max-width:640px){.manifest .wrap{grid-template-columns:1fr}}

/* ---- Leistungen als Pflegeetikett-Spec-Sheet ---- */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.spec{background:var(--paper);border:2px dashed var(--gold);border-radius:3px;padding:1.8rem 1.6rem;position:relative;display:flex;flex-direction:column;min-height:230px}
.spec .no{font-family:var(--fmono);font-size:.68rem;letter-spacing:.16em;color:var(--gold-deep)}
.spec h3{margin:.7rem 0 .5rem;color:var(--wine)}
.spec p{color:var(--ink-2);font-size:.97rem;margin:0}
.spec .care{margin-top:auto;padding-top:1.1rem;font-family:var(--fmono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-top:1px dashed var(--line)}
@media(max-width:820px){.specs{grid-template-columns:1fr}}

/* ---- Kollektion / Lookbook (asymmetrisch) ---- */
.lookbook{display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem}
.lot{position:relative;overflow:hidden;background:var(--linen-2);border-radius:3px}
.lot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform .6s ease}
.lot:hover img{transform:scale(1.05)}
.lot .cap{position:absolute;left:0;bottom:0;right:0;padding:1rem 1.1rem;color:var(--paper);
  background:linear-gradient(to top,rgba(36,26,29,.9),transparent);z-index:2}
.lot .cap .k{font-family:var(--fmono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);display:block;margin-bottom:.25rem}
.lot .cap .t{font-family:var(--fdisp);font-size:1.25rem;line-height:1.1}
.lot .badge{position:absolute;top:.8rem;left:.8rem;z-index:3;font-family:var(--fmono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:#fff;padding:.3rem .6rem;border-radius:2px}
.lot.big{grid-column:span 7}
.lot.small{grid-column:span 5}
.lot.third{grid-column:span 4}
.lot.tall img{aspect-ratio:3/4}
@media(max-width:820px){.lot.big,.lot.small,.lot.third{grid-column:span 12}.lookbook{gap:1rem}}

/* ---- Fanshop-Crest-Board ---- */
.crests{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.6rem}
.crest{border:2px dashed rgba(232,217,176,.5);border-radius:3px;padding:1.8rem;display:flex;gap:1.2rem;align-items:center;background:rgba(0,0,0,.12)}
.crest .em{width:64px;height:64px;flex:none;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;font-family:var(--fdisp);font-size:1.6rem;color:var(--gold-soft)}
.crest h3{color:var(--paper);margin:0 0 .2rem}
.crest p{color:rgba(248,244,236,.72);font-size:.92rem;margin:0}
@media(max-width:640px){.crests{grid-template-columns:1fr}}

/* ---- Split (Bild + Text, im Nahtrahmen) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
.split .pic{position:relative;border-radius:3px;overflow:hidden}
.split .pic::after{content:"";position:absolute;inset:14px;border:2px dashed var(--gold);z-index:2;pointer-events:none}
.split .pic img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split.rev .pic{order:2}
.checklist{list-style:none;padding:0;margin:1.3rem 0 1.8rem;display:grid;gap:.9rem}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;color:var(--ink-2)}
.checklist li::before{content:"";width:18px;height:0;border-top:2px dashed var(--gold);transform:translateY(-4px)}
.checklist b{color:var(--ink);font-weight:600;font-family:var(--fbody)}
@media(max-width:820px){.split{grid-template-columns:1fr}.split.rev .pic{order:0}}

/* ---- Prozess (Steppung 01-04) ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px dashed var(--gold)}
.step{padding:1.8rem 1.4rem;border-right:2px dashed var(--gold)}
.step:last-child{border-right:0}
.step .no{font-family:var(--fdisp);font-style:italic;font-size:2.4rem;color:var(--gold);line-height:1}
.step h3{margin:.6rem 0 .4rem;font-size:1.2rem}
.step p{color:var(--ink-2);font-size:.93rem;margin:0}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step{border-bottom:2px dashed var(--gold)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}.step{border-right:0}}

/* ---- Standort / Kontakt (Bestellzettel) ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.order{background:var(--paper);border:2px dashed var(--gold);border-radius:3px;padding:clamp(1.6rem,3vw,2.4rem)}
.order .label{display:block;margin-bottom:1.2rem}
.field{display:grid;gap:.4rem;margin-bottom:1.1rem}
.field label{font-family:var(--fmono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field textarea{font:inherit;font-family:var(--fbody);padding:.8rem .9rem;border:1px solid var(--line);background:var(--linen);color:var(--ink);border-radius:2px}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 2px rgba(155,47,83,.15)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.consent{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.85rem;color:var(--muted);margin-bottom:1.2rem;line-height:1.5}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--wine)}
.consent a{color:var(--wine);text-decoration:underline;text-underline-offset:2px}
.factsheet{display:grid;gap:0}
.fact{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.1rem 0;border-bottom:2px dashed var(--line)}
.fact:first-child{border-top:2px dashed var(--line)}
.fact .k{font-family:var(--fmono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);padding-top:.2rem}
.fact .v{font-size:1.02rem;color:var(--ink)}
.fact .v a:hover{color:var(--wine)}
.mapwrap{margin-top:1.4rem;border:2px dashed var(--gold);border-radius:3px;overflow:hidden}
.mapwrap iframe{width:100%;height:300px;border:0;display:block;filter:grayscale(.3) sepia(.1)}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}.frow{grid-template-columns:1fr}}

/* ---- FAQ ---- */
.faq{max-width:820px}
.faq details{border-bottom:2px dashed var(--line);padding:.4rem 0}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 0;font-family:var(--fdisp);font-size:1.25rem;color:var(--ink);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{font-family:var(--fmono);color:var(--gold-deep);font-size:1.2rem;flex:none}
.faq details[open] summary .pm{color:var(--wine)}
.faq .body{padding:0 0 1.2rem;color:var(--ink-2)}
.faq .body p{margin:0}

/* ---- CTA ---- */
.closing{background:var(--wine);color:var(--paper);text-align:center;position:relative}
.closing::before,.closing::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--stitch);opacity:.6}
.closing::before{top:22px}.closing::after{bottom:22px}
.closing h2{color:var(--paper)}
.closing p{color:rgba(248,244,236,.85);max-width:48ch;margin:1rem auto 2rem}
.closing .hero-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ---- Page-Head (Unterseiten) ---- */
.phead{background:var(--wine);color:var(--paper);padding:clamp(3rem,6vw,4.6rem) 0 clamp(2.4rem,4vw,3.4rem);position:relative}
.phead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--stitch)}
.phead .crumb{font-family:var(--fmono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:.9rem}
.phead .crumb a:hover{color:var(--paper)}
.phead h1{color:var(--paper);font-size:clamp(2.4rem,5.5vw,4rem)}
.phead p{color:rgba(248,244,236,.85);max-width:56ch;margin:.8rem 0 0}

/* ---- Prose (Impressum/Datenschutz) ---- */
.prose{max-width:70ch}
.prose h2{font-size:1.5rem;color:var(--wine);margin:2rem 0 .6rem}
.prose h2:first-child{margin-top:0}
.prose a{color:var(--wine);text-decoration:underline;text-underline-offset:3px}
.prose p{color:var(--ink-2)}

/* ---- Colophon (Footer als Wäscheetikett) ---- */
.colophon{background:var(--ink);color:rgba(239,233,221,.7);padding:clamp(2.6rem,5vw,3.6rem) 0 1.6rem}
.colophon .top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2rem}
.colophon .bname{font-family:var(--fdisp);font-size:1.6rem;color:var(--paper);display:block;margin-bottom:.6rem}
.colophon .bname em{font-style:italic;color:var(--gold-soft)}
.colophon p{font-size:.9rem;max-width:32ch;color:rgba(239,233,221,.6)}
.colophon h4{font-family:var(--fmono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 .9rem}
.colophon ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.colophon a{color:rgba(239,233,221,.72);font-size:.92rem}
.colophon a:hover{color:var(--paper)}
.colophon .fine{margin-top:2.2rem;padding-top:1.3rem;border-top:2px dashed rgba(179,135,58,.4);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 1.4rem;font-family:var(--fmono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(239,233,221,.5)}
.colophon .fine a:hover{color:var(--paper)}
.tp-credit{color:var(--gold-soft)}.tp-credit b{color:var(--paper)}
@media(max-width:820px){.colophon .top{grid-template-columns:1fr 1fr}.colophon .top>div:first-child{grid-column:1/-1}}
@media(max-width:520px){.colophon .top{grid-template-columns:1fr}}

/* ---- Mobile Sticky-Bar ---- */
.mobilebar{display:none}
@media(max-width:760px){
  .mobilebar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--ink);border-top:2px dashed var(--gold)}
  .mobilebar a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem;font-family:var(--fmono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--linen)}
  .mobilebar a:first-child{background:var(--wine);color:var(--paper)}
  .mobilebar a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
  body{padding-bottom:54px}
}

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

/* ---- Responsive nav ---- */
@media(max-width:860px){
  .nav{position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--linen);
    border-bottom:2px dashed var(--gold);padding:.4rem 1.3rem 1.3rem;transform:translateY(-14px);opacity:0;pointer-events:none;transition:.22s;box-shadow:var(--shadow)}
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:1rem 0;border-bottom:1px dashed var(--line)}
  .nav a.active::after{display:none}
  .nav .navcta{margin-top:.9rem;text-align:center}
  .burger{display:block}
}