/* =========================================================
   mexikanische-moebel.de – 1a Direktimport
   Palette: gewachste Pinie, Kalkputz, Talavera-Blau,
            Markenrot/-orange aus dem 1a-Logo
   ========================================================= */

:root{
  --tinte:      #2b211b;   /* dunkles Nussbraun, Fließtext */
  --tinte-weich:#5d5047;
  --kalk:       #ffffff;
  --papier:     #f8f3ec;   /* warmer Kalkputz */
  --sand:       #ece0d1;
  --sand-linie: #d9c8b3;
  --honig:      #c88a3a;
  --rot:        #c1391e;   /* Markenrot */
  --orange:     #ef8b21;   /* Markenorange */
  --talavera:   #17566b;   /* Kachelblau als Gegenakzent */
  --nacht:      #251d19;

  --breit: 1180px;
  --radius: 3px;
  --schatten: 0 18px 44px -28px rgba(43,33,27,.55);

  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans:  "Alegreya Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:7.5rem; -webkit-text-size-adjust:100%}
@media (min-width:860px){ html{scroll-padding-top:8.5rem} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:clamp(1.02rem,.98rem + .25vw,1.14rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}
a{color:var(--rot)}
a:focus-visible,summary:focus-visible,details:focus-visible{
  outline:3px solid var(--talavera); outline-offset:3px; border-radius:2px;
}

h1,h2,h3{font-family:var(--serif); font-weight:700; line-height:1.14; letter-spacing:-.008em; margin:0 0 .5em}
h1{font-size:clamp(2.1rem,1.35rem + 3.3vw,4rem)}
h2{font-size:clamp(1.62rem,1.2rem + 1.7vw,2.5rem)}
h3{font-size:clamp(1.24rem,1.08rem + .7vw,1.6rem)}
p{margin:0 0 1.05em; max-width:68ch}

.wrap{width:min(100% - 2.4rem, var(--breit)); margin-inline:auto}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--nacht); color:#fff; padding:.7rem 1.1rem; font-weight:600;
}
.skip:focus{left:.5rem; top:.5rem}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--sand-linie);
}
.kopf__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:3.4rem; padding:.45rem 0;
}
.marke img{width:150px; height:auto}
@media (min-width:860px){ .marke img{width:210px} .kopf__bar{min-height:4.2rem} }

.shopknopf{
  display:inline-block; flex:none;
  background:var(--rot); color:#fff; text-decoration:none;
  font-family:var(--sans); font-weight:700; font-size:.94rem;
  padding:.6rem 1.05rem; border-radius:var(--radius);
  box-shadow:0 2px 0 0 #8f2513;
}
.shopknopf:hover{background:#a92f18}
.shopknopf__kurz{display:inline}
.shopknopf__lang{display:none}
@media (min-width:560px){ .shopknopf__kurz{display:none} .shopknopf__lang{display:inline} }

.kopf__nav{border-top:1px solid var(--sand); background:var(--papier)}
.kopf__nav ul{
  display:flex; gap:.15rem; list-style:none; margin:0; padding:0;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.kopf__nav ul::-webkit-scrollbar{display:none}
.kopf__nav a{
  display:block; white-space:nowrap; text-decoration:none;
  color:var(--tinte-weich); font-size:.9rem; font-weight:600;
  padding:.55rem .8rem; border-bottom:2px solid transparent;
}
.kopf__nav a:hover{color:var(--rot); border-bottom-color:var(--orange)}

/* ---------- Hero ---------- */
.hero{position:relative; isolation:isolate; background:var(--nacht)}
.hero__bild{position:absolute; inset:0; z-index:-2}
.hero__bild img{width:100%; height:100%; object-fit:cover; object-position:58% 50%}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(37,29,25,.93) 0%, rgba(37,29,25,.82) 38%, rgba(37,29,25,.34) 68%, rgba(37,29,25,.18) 100%);
}
.hero__inhalt{padding:clamp(3.2rem,9vw,7rem) 0 clamp(3rem,8vw,6rem); color:#fdf8f1; max-width:none}
.hero h1{color:#fff; max-width:15ch; text-wrap:balance}
.hero__zeile{
  font-size:.86rem; font-weight:700; letter-spacing:.06em; color:var(--orange);
  margin:0 0 .9rem; text-transform:none;
}
.hero__text{max-width:46ch; color:#efe4d6; font-size:clamp(1.05rem,1rem + .35vw,1.22rem)}
.hero__knoepfe{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem; max-width:none}

.knopf{
  display:inline-block; text-decoration:none; font-weight:700;
  padding:.85rem 1.5rem; border-radius:var(--radius); font-size:1rem;
  border:2px solid transparent;
}
.knopf--voll{background:var(--orange); color:#2b211b; border-color:var(--orange)}
.knopf--voll:hover{background:#d97a15; border-color:#d97a15}
.knopf--rand{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.knopf--rand:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.knopf--rand-hell{background:transparent; color:var(--tinte); border-color:var(--sand-linie)}
.knopf--rand-hell:hover{border-color:var(--tinte); background:#fff}

/* ---------- Intro ---------- */
.intro{padding:clamp(3rem,6vw,4.8rem) 0}
.intro__raster{display:grid; gap:clamp(2rem,4vw,3.4rem)}
@media (min-width:900px){ .intro__raster{grid-template-columns:1.55fr 1fr; align-items:start} }

.fakten{list-style:none; margin:0; padding:0; display:grid; gap:0}
.fakten li{
  display:flex; flex-direction:column; gap:.1rem;
  padding:.95rem 0; border-top:1px solid var(--sand-linie);
}
.fakten li:last-child{border-bottom:1px solid var(--sand-linie)}
.fakten strong{font-family:var(--serif); font-size:1.32rem; color:var(--talavera)}
.fakten span{font-size:.95rem; color:var(--tinte-weich)}

/* ---------- Kachelband (Talavera) ---------- */
.fliese{
  height:14px;
  background:
    repeating-linear-gradient(90deg,
      var(--talavera) 0 14px,
      var(--papier) 14px 28px,
      var(--rot) 28px 42px,
      var(--papier) 42px 56px,
      var(--orange) 56px 70px,
      var(--papier) 70px 84px);
  border-block:1px solid var(--sand-linie);
  opacity:.9;
}

/* ---------- Finish-Abschnitt ---------- */
.stile{padding:clamp(3rem,6vw,4.8rem) 0 0}
.abschnitt-kopf{margin-bottom:2rem}
.abschnitt-kopf p{max-width:62ch; color:var(--tinte-weich)}

.swatches{
  list-style:none; margin:0 0 clamp(2.4rem,5vw,3.6rem); padding:0;
  display:grid; gap:.7rem;
}
@media (min-width:640px){ .swatches{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .swatches{grid-template-columns:repeat(4,1fr)} }
.swatches a{
  display:flex; flex-direction:column; gap:.1rem; height:100%;
  text-decoration:none; color:var(--tinte); background:var(--kalk);
  border:1px solid var(--sand-linie); border-top:4px solid var(--honig);
  padding:1rem 1.05rem; font-weight:700; font-family:var(--serif); font-size:1.12rem;
}
.swatches a:hover{border-color:var(--tinte-weich); box-shadow:var(--schatten)}
.swatches em{font-family:var(--sans); font-style:normal; font-weight:400; font-size:.92rem; color:var(--tinte-weich)}
.swatches li:nth-child(2) a{border-top-color:#e8e2d8}
.swatches li:nth-child(3) a{border-top-color:#3b2d26}
.swatches li:nth-child(4) a{border-top-color:#f3f0ea}

.swatch{
  display:inline-block; width:1.05rem; height:1.05rem; margin-right:.5rem;
  border-radius:50%; vertical-align:-.12rem; border:1px solid rgba(43,33,27,.28);
}
.swatch--honig{background:linear-gradient(135deg,#dda95f,#b3762c)}
.swatch--wh{background:linear-gradient(135deg,#ffffff 52%,#d9a457 52%)}
.swatch--kolonial{background:linear-gradient(135deg,#4a3a32,#241b16)}
.swatch--wa{background:linear-gradient(135deg,#ffffff,#e4ded3)}

.finish{padding:clamp(2.6rem,5vw,4.2rem) 0}
.finish--hell{background:var(--kalk); border-block:1px solid var(--sand-linie)}
.finish--dunkel{background:var(--nacht); color:#f2e9de; border-block:1px solid #3a2e27}
.finish--dunkel h3{color:#fff}
.finish--dunkel .merkmale li{border-color:#42342c}
.finish--dunkel .merkmale strong{color:var(--orange)}
.finish--dunkel .finish__links a{background:transparent; color:#f4ece2; border-color:rgba(255,255,255,.42)}
.finish--dunkel .finish__links a:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff}
.finish--dunkel figcaption{color:#c9bcaf}

.finish__raster{display:grid; gap:clamp(1.6rem,3.5vw,3rem); align-items:center}
@media (min-width:900px){
  .finish__raster{grid-template-columns:1fr 1fr}
  .finish__raster--gedreht .finish__bild{order:2}
}
.finish__bild img{width:100%; box-shadow:var(--schatten)}
.finish__marke{
  display:flex; align-items:center; font-size:.85rem; font-weight:700;
  letter-spacing:.05em; color:var(--tinte-weich); margin:0 0 .6rem;
}
.finish--dunkel .finish__marke{color:#c4b5a6}
.finish--dunkel .swatch{border-color:rgba(255,255,255,.5)}

.merkmale{list-style:none; margin:0 0 1.4rem; padding:0}
.merkmale li{padding:.55rem 0; border-top:1px solid var(--sand-linie); font-size:.98rem}
.merkmale li:first-child{border-top:none}
.merkmale strong{
  display:block; font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.04em; color:var(--rot); margin-bottom:.05rem;
}

.finish__links{display:flex; flex-wrap:wrap; gap:.5rem; max-width:none; margin:0}
.finish__links a{
  display:inline-block; text-decoration:none; font-size:.92rem; font-weight:600;
  color:var(--tinte); border:1px solid var(--sand-linie); background:var(--papier);
  padding:.45rem .85rem; border-radius:var(--radius);
}
.finish--hell .finish__links a{background:var(--papier)}
.finish__links a:hover{border-color:var(--rot); color:var(--rot)}
.finish__alle{background:var(--rot)!important; color:#fff!important; border-color:var(--rot)!important}
.finish__alle:hover{background:#a92f18!important}

/* ---------- Galerien ---------- */
.galerie{display:grid; gap:1.1rem; margin-top:clamp(1.8rem,4vw,2.8rem)}
.galerie figure{margin:0}
.galerie img{width:100%; box-shadow:var(--schatten)}
.galerie figcaption{
  margin-top:.55rem; font-size:.9rem; color:var(--tinte-weich); max-width:56ch;
}
@media (min-width:700px){
  .galerie--zwei{grid-template-columns:repeat(2,1fr)}
  .galerie--drei{grid-template-columns:repeat(3,1fr)}
}
.galerie--drei img{aspect-ratio:3/2; object-fit:cover}
.galerie--eins{max-width:920px}

/* ---------- Themenabschnitte ---------- */
.thema{padding:clamp(3rem,6vw,4.8rem) 0}
.thema--sand{background:var(--sand); border-block:1px solid var(--sand-linie)}
.thema__raster{display:grid; gap:clamp(1.8rem,4vw,3rem)}
@media (min-width:920px){
  .thema__raster{grid-template-columns:1.6fr 1fr; align-items:start}
  .thema__raster--gedreht{grid-template-columns:1fr 1.6fr}
  .thema__raster--gedreht .thema__links{order:-1}
}
.thema__hinweis{
  border-left:3px solid var(--talavera); padding:.15rem 0 .15rem .95rem;
  color:var(--tinte-weich); font-size:.97rem;
}
.thema__links{background:var(--kalk); border:1px solid var(--sand-linie); padding:1.3rem 1.4rem}
.thema--sand .thema__links{background:var(--papier)}
.thema__links h3{font-size:1.18rem; margin-bottom:.7rem}
.thema__links ul{list-style:none; margin:0; padding:0}
.thema__links li{border-top:1px solid var(--sand-linie)}
.thema__links li:first-child{border-top:none}
.thema__links a{display:block; padding:.6rem 0; text-decoration:none; color:var(--tinte); font-weight:600; font-size:.97rem}
.thema__links a:hover{color:var(--rot)}

/* ---------- Qualität ---------- */
.qualitaet{background:var(--talavera); color:#eef5f7; padding:clamp(3rem,6vw,4.6rem) 0}
.qualitaet h2{color:#fff; margin-bottom:1.6rem}
.qualitaet h3{color:#ffd9a8; font-size:1.2rem; margin-bottom:.3rem}
.qualitaet p{color:#dbe8ed; font-size:.99rem; margin:0}
.qualitaet__raster{display:grid; gap:1.8rem 2.4rem}
@media (min-width:700px){ .qualitaet__raster{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1050px){ .qualitaet__raster{grid-template-columns:repeat(4,1fr)} }

/* ---------- FAQ ---------- */
.faq{padding:clamp(3rem,6vw,4.8rem) 0}
.faq h2{margin-bottom:1.4rem}
.faq details{border-top:1px solid var(--sand-linie); background:transparent}
.faq details:last-of-type{border-bottom:1px solid var(--sand-linie)}
.faq summary{
  cursor:pointer; list-style:none; padding:1rem 2.6rem 1rem 0; position:relative;
  font-family:var(--serif); font-weight:700; font-size:clamp(1.08rem,1rem + .35vw,1.3rem);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:.5rem; top:1.45rem;
  width:.66rem; height:.66rem; border-right:2px solid var(--rot); border-bottom:2px solid var(--rot);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg); top:1.7rem}
.faq summary:hover{color:var(--rot)}
.faq__antwort{padding:0 2.6rem .3rem 0}
.faq__antwort p{color:var(--tinte-weich); margin-bottom:1rem}

/* ---------- Schluss-CTA ---------- */
.schluss{
  background:var(--nacht); color:#f4ece2; text-align:center;
  padding:clamp(3rem,6vw,4.6rem) 0;
}
.schluss h2{color:#fff}
.schluss p{margin-inline:auto; color:#ddd0c2}
.schluss .hero__knoepfe{justify-content:center}
.schluss .knopf--rand-hell{color:#f4ece2; border-color:rgba(255,255,255,.4)}
.schluss .knopf--rand-hell:hover{background:rgba(255,255,255,.1); border-color:#fff}

/* ---------- Fuß ---------- */
.fuss{background:var(--papier); border-top:1px solid var(--sand-linie); padding:clamp(2.6rem,5vw,3.6rem) 0 1.4rem}
.fuss h2{font-size:1.1rem; font-family:var(--sans); font-weight:700; letter-spacing:.02em; margin-bottom:.7rem}
.fuss p,.fuss address{font-size:.95rem; color:var(--tinte-weich); font-style:normal; line-height:1.75}
.fuss__logo{width:180px; margin-bottom:.9rem}
.fuss__raster{display:grid; gap:2rem}
@media (min-width:700px){ .fuss__raster{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .fuss__raster{grid-template-columns:1.4fr 1.1fr 1fr 1fr} }
.fuss__links{list-style:none; margin:0; padding:0}
.fuss__links li{margin-bottom:.35rem}
.fuss__links a,.fuss address a{color:var(--tinte); text-decoration:none; font-size:.95rem}
.fuss__links a:hover,.fuss address a:hover{color:var(--rot); text-decoration:underline}
.fuss__zeile{
  margin:2.2rem auto 0; padding-top:1.1rem; border-top:1px solid var(--sand-linie);
  font-size:.86rem; color:var(--tinte-weich); max-width:none;
}

@media print{
  .kopf,.hero__knoepfe,.schluss{display:none}
  body{background:#fff}
}

/* ---------- Rechtstexte (Impressum u. Ä.) ---------- */
.rechtskopf{padding:clamp(2.4rem,5vw,4rem) 0 clamp(1.8rem,4vw,2.8rem)}
.rechtskopf h1{font-size:clamp(2rem,1.4rem + 2.2vw,3.1rem); margin-bottom:.35em}
.rechtskopf p{color:var(--tinte-weich); max-width:58ch}

.brotkrumen{font-size:.88rem; color:var(--tinte-weich); margin-bottom:1.1rem}
.brotkrumen a{color:var(--tinte-weich); text-decoration:none}
.brotkrumen a:hover{color:var(--rot); text-decoration:underline}
.brotkrumen span[aria-hidden]{margin:0 .35rem; color:var(--sand-linie)}

.rechtstext{padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(3rem,6vw,4.6rem)}
.rechtskopf .wrap,
.rechtstext .wrap{width:min(100% - 2.4rem, 820px); margin-inline:auto}
.rechtstext h2{
  font-size:clamp(1.14rem,1.02rem + .45vw,1.38rem);
  margin:2.1rem 0 .45em; padding-top:1.1rem; border-top:1px solid var(--sand-linie);
}
.rechtstext > .wrap > h2:first-of-type{margin-top:0; padding-top:0; border-top:none}
.rechtstext p{max-width:70ch}
.rechtstext__zurueck{margin-top:2.6rem}

.zeiten{margin:0 0 1.05em; display:grid; gap:0}
.zeiten dt{font-weight:700; padding-top:.5rem}
.zeiten dd{margin:0; padding-bottom:.5rem; color:var(--tinte-weich); border-bottom:1px solid var(--sand-linie)}
@media (min-width:620px){
  .zeiten{grid-template-columns:auto 1fr; column-gap:1.6rem}
  .zeiten dt{border-top:1px solid var(--sand-linie); padding:.5rem 0}
  .zeiten dd{border-top:1px solid var(--sand-linie); border-bottom:none; padding:.5rem 0}
  .zeiten dt:first-of-type,.zeiten dd:first-of-type{border-top:none}
}