/* =====================================================================
   Verso — Design System · „Quiet Luxury" Editorial Pass
   (Platzhalter-Marke — Farben, Typo & Name frei anpassbar)
   Schriften für Produktion DSGVO-konform selbst hosten (nicht via Google-CDN).
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap");

:root {
  /* Palette — dezente bone/greige Basis (vom Kunden ausdrücklich als
     "dezent und passend" bestätigt). RAL 4003 Erikaviolett wird laut
     Vorgabe nur "ganz zart" als Akzent auf einzelnen Feldern eingesetzt
     (--violet), NICHT als dominante Button-/CTA-Farbe. */
  --bg:        #F6F3EC;
  --surface:   #FFFFFF;
  --surface-2: #EDE7DC;
  --ink:       #17140F;
  --ink-soft:  #4A443B;
  --muted:     #6E6858;   /* dunkler für bessere Lesbarkeit (Zielgruppe: älteres Publikum) */
  --line:      #E4DDD0;
  --accent:    #9C7E5A;   /* gedämpftes Greige-Gold — primäre CTA-Farbe */
  --accent-dk: #7A6142;
  --violet:    #A85578;   /* RAL 4003 Erikaviolett (Näherung) — nur sparsame Akzente */
  --violet-dk: #833F5C;
  --sale:      #8B4A3B;   /* gedämpfte Terrakotta */
  --ok:        #4C7A57;

  /* Typo */
  --serif: "Cormorant Garamond", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Maße */
  --wrap: 1280px;
  --radius: 0px;
  --shadow-sm: 0 1px 2px rgba(23,20,15,.05);
  --shadow-md: 0 18px 50px rgba(23,20,15,.12);
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1,h2,h3,h4 { font-family: var(--serif); font-weight: 500; line-height: 1.06; letter-spacing: -.01em; color: var(--ink); margin: 0; }
/* Eyebrow: größer, wärmer (Akzentfarbe statt blassem Grau), moderater Sperrsatz — besser lesbar für ein älteres Publikum */
.eyebrow { font-family: var(--sans); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dk); font-weight: 600; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 28px; }
.section { padding-block: 84px; }
.center { text-align: center; }
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 16px 34px; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font-family: var(--sans); font-size: .82rem; letter-spacing: .04em; text-transform: none; font-weight: 600;
  border-radius: var(--radius); transition: all .3s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--gold { background: var(--accent-dk); border-color: var(--accent-dk); color:#fff; }
.btn--gold:hover { background: var(--ink); border-color: var(--ink); color:#fff; }
.btn--sm { padding: 11px 20px; font-size: .78rem; }
.btn--block { width: 100%; }

/* ---------- Announcement ---------- */
.announce {
  background: var(--surface-2); color: var(--ink-soft); text-align: center;
  font-size: .82rem; letter-spacing: .01em; padding: 11px 16px; font-weight: 500;
}
.announce strong { color: var(--ink); font-weight: 600; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 40; background: rgba(246,243,236,.82);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.header__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; }
.brand { font-family: var(--serif); font-size: 2rem; letter-spacing: .34em; font-weight: 600; padding-left: .34em; }
.brand span { color: var(--ink); }
.nav { display: flex; gap: 32px; justify-self: center; }
.nav a { font-family: var(--sans); font-size: .86rem; letter-spacing: .02em; font-weight: 500; padding: 8px 0; position: relative; color: var(--ink-soft); }
.nav a::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background: var(--ink); transition: width .35s var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }
.header__actions { display: flex; gap: 20px; justify-self: end; align-items: center; }
.iconbtn { background: none; border: none; padding: 4px; color: var(--ink); display: inline-flex; position: relative; }
.iconbtn svg { width: 21px; height: 21px; stroke-width: 1.4; }
.cart-count { position: absolute; top: -6px; right: -8px; background: var(--ink); color:#fff;
  font-size: .6rem; min-width: 16px; height: 16px; border-radius: 999px; display: grid; place-items:center; font-family: var(--sans); font-weight:600; }
.burger { display: none; background:none; border:none; padding:4px; }
.burger svg { width: 24px; height: 24px; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1fr 1.12fr; min-height: 92vh; }
.hero__text { display: flex; flex-direction: column; justify-content: center; padding: 72px clamp(28px,6vw,120px); background: var(--bg); }
.hero__text h1 { font-size: clamp(3rem, 6.2vw, 5.6rem); margin: 28px 0 28px; line-height: 1; font-weight: 500; }
.hero__text p { max-width: 40ch; color: var(--ink-soft); font-size: 1.04rem; line-height: 1.75; margin: 0 0 42px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__img { position: relative; overflow: hidden; }

/* Elevierte Platzhalter: reicher Verlauf + Filmkorn (wirkt wie Stoff/Editorial) */
.ph { position: relative; overflow: hidden; background: linear-gradient(140deg, #ece4d6 0%, #d3bd9f 55%, #b59a78 100%); }
.ph::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.4; mix-blend-mode:multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px; }
.ph::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: .9rem; letter-spacing:.3em; text-transform: uppercase; color: rgba(23,20,15,.3); }
.hero__img .ph { height: 100%; }

/* ---------- USP strip ---------- */
.usp { border-block: 1px solid var(--line); background: var(--surface); }
.usp__grid { display: grid; grid-template-columns: repeat(4,1fr); }
.usp__item { display: flex; gap: 13px; align-items: center; justify-content: center; padding: 28px 16px; text-align:left; }
.usp__item + .usp__item { border-left: 1px solid var(--line); }
.usp__item svg { width: 24px; height: 24px; color: var(--ink); stroke-width: 1.3; flex: none; }
.usp__item b { display:block; font-size: .8rem; font-weight: 500; letter-spacing:.02em; }
.usp__item small { color: var(--muted); font-size: .8rem; }

/* ---------- Section head ---------- */
.sec-head { text-align:center; max-width: 62ch; margin: 0 auto 60px; }
.sec-head h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); margin: 18px 0 14px; font-weight: 500; }
.sec-head p { color: var(--muted); margin: 0; font-size: 1.02rem; }

/* ---------- Category grid ---------- */
.cats { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.cat { position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; display:block; }
.cat .ph { position:absolute; inset:0; transition: transform 1s var(--ease); }
.cat:hover .ph { transform: scale(1.05); }
.cat__label { position:absolute; left:0; right:0; bottom:0; padding: 22px; background: linear-gradient(transparent, rgba(23,20,15,.6));
  color:#fff; font-family: var(--serif); font-size: 1.5rem; font-weight:500; letter-spacing:.01em; }
.cat__label small { display:block; font-family: var(--sans); font-size:.8rem; letter-spacing:.02em; opacity:.92; margin-top:5px; }

/* ---------- Product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 44px 28px; }
.card { position: relative; }
.card__media { position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; background: var(--surface-2); }
.card__media .ph { position:absolute; inset:0; transition: opacity .5s var(--ease); }
.card__media .ph--2 { opacity: 0; }
.card:hover .ph--2 { opacity: 1; }
.card__media img { transition: transform 1s var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }
.badge { position:absolute; top:14px; left:14px; z-index:2; background: var(--ink); color:#fff;
  font-family: var(--sans); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; padding: 5px 10px; border-radius: 0; }
.badge--soft { background: rgba(23,20,15,.62); backdrop-filter: blur(2px); }
.quick { position:absolute; left:14px; right:14px; bottom:14px; z-index:2; opacity:0; transform: translateY(10px);
  transition: all .4s var(--ease); }
.card:hover .quick { opacity:1; transform: translateY(0); }
.card__cat { font-size:.78rem; letter-spacing:.02em; color: var(--accent-dk); font-weight:600; }
.card__title { font-family: var(--serif); font-size: 1.32rem; font-weight:500; margin: 5px 0 7px; line-height:1.15; }
.card__title a:hover { color: var(--accent-dk); }
.price { display:flex; gap:10px; align-items:baseline; }
.price .now { font-weight: 700; font-size: 1.05rem; letter-spacing:.01em; }
.price .now.is-sale { color: var(--sale); }
.price .was { color: var(--muted); text-decoration: line-through; font-size:.84rem; }
.stars { color: var(--accent); letter-spacing:3px; font-size:.78rem; }

/* ---------- Story band ---------- */
.story { display:grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--surface); }
.story__img { min-height: 560px; }
.story__body { padding: clamp(40px,6vw,96px); display:flex; flex-direction:column; justify-content:center; }
.story__body h2 { font-size: clamp(2rem,3.4vw,3rem); margin: 18px 0 22px; font-weight:500; }
.story__body p { color: var(--ink-soft); margin: 0 0 18px; font-size:1.02rem; line-height:1.8; }

/* ---------- Reviews ---------- */
.reviews { background: var(--surface-2); }
.reviews__grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.review p { font-family: var(--serif); font-size: 1.3rem; line-height:1.42; color: var(--ink); margin:0; }
.review__who { font-size:.8rem; margin-top: 20px; letter-spacing:.02em; }
.review__who b { display:block; font-weight:600; }
.review__who .verified { color: var(--ok); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- Scroll-Reveal (dezent, editorial) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: opacity, transform; }
  .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Newsletter ---------- */
.news { background: var(--ink); color: #f2ece1; }
.news .sec-head h2 { color:#fff; }
.news .sec-head p { color: #cdc4b5; }
.news form { display:flex; gap:10px; max-width: 480px; margin: 0 auto; }
.news input { flex:1; padding: 14px 16px; border: 1px solid #4a443b; background: #2a2620; color:#fff; border-radius: var(--radius); }
.news input::placeholder { color:#9a9184; }
.news small { display:block; text-align:center; margin-top:14px; color:#9a9184; font-size:.72rem; }

/* ---------- Footer ---------- */
.footer { background: var(--surface); border-top: 1px solid var(--line); }
.footer__grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-block: 56px; }
.footer h4 { font-family: var(--sans); font-size:.9rem; letter-spacing:.02em; margin-bottom: 16px; color: var(--ink); font-weight:700; }
.footer ul { list-style:none; padding:0; margin:0; }
.footer li { margin-bottom: 9px; }
.footer a { color: var(--muted); font-size:.9rem; }
.footer a:hover { color: var(--ink); }
.footer__brand .brand { font-size: 1.5rem; }
.footer__brand p { color: var(--muted); font-size:.9rem; max-width: 34ch; margin: 14px 0; }
.footer__social { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.footer__social:empty { display:none; margin:0; }
.footer__social-btn { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background: var(--surface-2); color: var(--ink-soft); font-size:.62rem; font-weight:700; letter-spacing:.01em; overflow:hidden; }
.footer__social-btn:hover { background: var(--ink); color:#fff; border-color: var(--ink); }
.pay { display:flex; gap:8px; flex-wrap:wrap; }
.pay span { border:1px solid var(--line); border-radius:4px; padding: 4px 8px; font-size:.66rem; letter-spacing:.06em; color: var(--muted); background: var(--surface-2); }
.footer__bar { border-top:1px solid var(--line); padding-block: 20px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.78rem; color: var(--muted); }

/* ---------- Cart drawer ---------- */
.drawer-scrim { position: fixed; inset:0; background: rgba(30,27,23,.4); opacity:0; visibility:hidden; transition:.3s; z-index: 60; }
.drawer-scrim.open { opacity:1; visibility:visible; }
.drawer { position: fixed; top:0; right:0; height:100%; width: min(410px, 92vw); background: var(--bg);
  transform: translateX(100%); transition: transform .35s var(--ease); z-index: 61; display:flex; flex-direction:column; }
.drawer.open { transform: translateX(0); }
.drawer__head { display:flex; justify-content:space-between; align-items:center; padding: 20px 22px; border-bottom:1px solid var(--line); }
.drawer__head h3 { font-size:1.1rem; }
.drawer__items { flex:1; overflow:auto; padding: 12px 22px; }
.citem { display:grid; grid-template-columns: 64px 1fr auto; gap:12px; padding: 14px 0; border-bottom:1px solid var(--line); }
.citem .ph { border-radius:3px; aspect-ratio: 3/4; }
.citem b { font-family: var(--serif); font-weight:500; font-size:.95rem; }
.citem small { color: var(--muted); }
.citem .rm { background:none; border:none; color: var(--muted); font-size:.75rem; text-decoration:underline; padding:0; margin-top:6px; }
.drawer__foot { border-top:1px solid var(--line); padding: 20px 22px; }
.drawer__foot .row { display:flex; justify-content:space-between; margin-bottom: 6px; }
.drawer__empty { text-align:center; color: var(--muted); padding: 40px 0; }

/* ---------- Breadcrumb + filters (shop) ---------- */
.crumb { font-size:.78rem; color: var(--muted); padding-block: 22px; }
.crumb a:hover { color: var(--ink); }
.shop-head { text-align:center; padding-bottom: 10px; }
.shop-head h1 { font-size: clamp(2rem,3.5vw,2.8rem); }
.toolbar { display:flex; justify-content:space-between; align-items:center; border-block:1px solid var(--line);
  padding: 14px 0; margin-bottom: 34px; font-size:.85rem; }
.chip { border:1px solid var(--line); background: var(--surface); border-radius:999px; padding:7px 14px; font-size:.78rem; margin-right:8px; }
.chip.is-on { background: var(--ink); color:#fff; border-color: var(--ink); }

/* ---------- Product detail ---------- */
.pdp { display:grid; grid-template-columns: 1.1fr 1fr; gap: 46px; padding-top: 30px; }
.gallery { display:grid; grid-template-columns: 72px 1fr; gap: 12px; }
.gallery__thumbs { display:flex; flex-direction:column; gap:10px; }
.gallery__thumbs .ph { aspect-ratio: 3/4; border-radius:3px; cursor:pointer; border:1px solid var(--line); }
.gallery__main .ph { aspect-ratio: 3/4; border-radius: var(--radius); }
.pdp__info .price { font-size: 1.3rem; margin: 14px 0; }
.pdp__info h1 { font-size: clamp(1.6rem,2.6vw,2.2rem); }
.swatches { display:flex; gap:10px; margin: 8px 0 22px; }
.swatch { width:30px; height:30px; border-radius:999px; border:1px solid var(--line); cursor:pointer; outline-offset:3px; }
.swatch.is-on { outline: 2px solid var(--ink); }
.sizes { display:flex; gap:8px; flex-wrap:wrap; margin: 8px 0 24px; }
.size { min-width:46px; padding: 10px; border:1px solid var(--line); background:var(--surface); border-radius:3px; font-size:.85rem; }
.size.is-on { border-color: var(--ink); background: var(--ink); color:#fff; }
.qtyrow { display:flex; gap:14px; align-items:center; margin-bottom: 18px; }
.qty { display:flex; align-items:center; border:1px solid var(--line); border-radius:3px; }
.qty button { background:none; border:none; padding: 12px 16px; font-size:1rem; }
.qty span { min-width: 30px; text-align:center; }
.acc { border-top:1px solid var(--line); }
.acc__item { border-bottom:1px solid var(--line); }
.acc__q { width:100%; text-align:left; background:none; border:none; padding: 16px 0; display:flex; justify-content:space-between; font-weight:600; font-size:.9rem; }
.acc__a { max-height:0; overflow:hidden; transition: max-height .3s var(--ease); color: var(--ink-soft); }
.acc__a p { margin: 0 0 14px; }
.acc__item.open .acc__a { max-height: 320px; }
.taxnote { font-size:.76rem; color: var(--muted); margin-top:-6px; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color:#fff; padding: 13px 22px; border-radius: var(--radius); font-size:.85rem;
  opacity:0; visibility:hidden; transition:.3s; z-index: 80; box-shadow: var(--shadow-md); }
.toast.show { opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero__img { min-height: 46vh; order: -1; }
  .cats, .grid { grid-template-columns: repeat(2,1fr); }
  .usp__grid { grid-template-columns: repeat(2,1fr); }
  .usp__item:nth-child(3) { border-left: 0; }
  .usp__item { border-top: 1px solid var(--line); }
  .story, .pdp { grid-template-columns: 1fr; }
  .reviews__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header__row { grid-template-columns: auto 1fr auto; column-gap: 8px; }
  /* Wortmarke schrumpft auf schmalen Screens, sonst sprengt sie den Header
     (breiter Sperrsatz drängt Warenkorb-Icon über den sichtbaren Bereich hinaus) */
  .brand { font-size: 1.35rem; letter-spacing: .16em; padding-left: .16em; white-space: nowrap; }
  .header__actions { gap: 12px; }
  .nav.open { display:flex; position:absolute; top:74px; left:0; right:0; justify-self:stretch; width:auto;
    flex-direction:column; gap:0; background: var(--bg); border-bottom:1px solid var(--line); padding: 8px 24px; z-index: 39; box-shadow: var(--shadow-md); }
  .nav.open a { padding: 12px 0; border-bottom:1px solid var(--line); }
  .gallery { grid-template-columns: 1fr; }
  .gallery__thumbs { flex-direction:row; }
  .gallery__thumbs .ph { width: 70px; }
}
@media (max-width: 560px) {
  .cats, .grid, .usp__grid, .footer__grid { grid-template-columns: 1fr; }
  .section { padding-block: 52px; }
}

/* =====================================================================
   Checkout
   ===================================================================== */
.co-header { border-bottom:1px solid var(--line); background: var(--surface); }
.co-header .wrap { display:flex; align-items:center; justify-content:space-between; height:70px; }
.co-secure { display:flex; align-items:center; gap:8px; font-size:.78rem; color: var(--muted); }
.co-secure svg { width:18px; height:18px; color: var(--ok); }
.co-steps { display:flex; gap:10px; justify-content:center; font-size:.76rem; color:var(--muted); padding:18px 0 6px; }
.co-steps b { color: var(--ink); }
.co-steps span::after { content:"›"; margin-left:10px; color:var(--line); }
.co-steps span:last-child::after { content:""; }

.checkout { display:grid; grid-template-columns: 1.35fr 1fr; gap:48px; padding: 20px 0 80px; align-items:start; }
.co-form h2 { font-size:1.15rem; margin: 26px 0 14px; }
.co-form h2:first-child { margin-top: 8px; }

/* Checkout steps (collapsible accordion on mobile, plain sections on desktop — see .co-desktop below) */
.co-step { border:1px solid var(--line); border-radius: var(--radius); margin-bottom:12px; background: var(--surface); overflow:hidden; }
.co-step summary { list-style:none; display:flex; align-items:center; gap:12px; padding:16px 18px; cursor:pointer; font-size:1.05rem; user-select:none; }
.co-step summary::-webkit-details-marker { display:none; }
.co-step summary::after { content:"›"; margin-left:auto; font-size:1.3rem; color: var(--muted); transform:rotate(90deg); transition:transform .15s; }
.co-step[open] summary::after { transform:rotate(-90deg); }
.co-step__num { display:grid; place-items:center; width:24px; height:24px; border-radius:999px; background: var(--surface-2); border:1px solid var(--line); font-size:.74rem; font-weight:700; flex:none; }
.co-step[open] .co-step__num { background: var(--ink); color:#fff; border-color: var(--ink); }
.co-step__title { font-family: var(--serif); font-weight:500; }
.co-step__status { font-size:.78rem; color: var(--ok); font-weight:400; }
.co-step__body { padding: 2px 18px 18px; }
.co-next { margin-top:8px; }
.co-optional { margin: -4px 0 14px; border:none; }
.co-optional summary { list-style:none; cursor:pointer; font-size:.78rem; color: var(--muted); padding:4px 0; text-decoration:underline; }
.co-optional summary::-webkit-details-marker { display:none; }
.co-optional[open] summary { margin-bottom:8px; }

/* Desktop: no accordion chrome, every section fully visible like a normal long form */
@media (min-width: 901px) {
  .co-step { border:none; margin-bottom:0; background:transparent; }
  .co-step summary { pointer-events:none; padding: 26px 0 14px; font-size:1.15rem; }
  .co-step:first-of-type summary { padding-top:8px; }
  .co-step summary::after { display:none; }
  .co-step__num { display:none; }
  .co-step__status { display:none; }
  .co-step__body { padding: 0; }
  .co-next { display:none; }
}

.field { margin-bottom:14px; }
.field label { display:block; font-size:.76rem; letter-spacing:.04em; color: var(--ink-soft); margin-bottom:6px; font-weight:600; }
.field input, .field select, .field textarea { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-family: inherit; font-size:1rem; color: var(--ink); } /* 16px: verhindert Auto-Zoom bei Fokus auf iOS */
.field textarea { resize: vertical; min-height: 120px; line-height:1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline:2px solid var(--accent); outline-offset:0; border-color: var(--accent); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--sale); }
.co-row2 { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.co-row-plz { display:grid; grid-template-columns: 120px 1fr; gap:14px; }

.pay-opts, .ship-opts { display:flex; flex-direction:column; gap:10px; margin: 6px 0 8px; }
.opt { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius: var(--radius); padding:14px 16px; cursor:pointer; background: var(--surface); }
.opt.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt input { accent-color: var(--ink); width:16px; height:16px; }
.opt .opt__main { flex:1; font-size:.9rem; }
.opt .opt__main small { display:block; color: var(--muted); font-size:.76rem; }
.opt .opt__price { font-weight:600; font-size:.9rem; }
.opt .tags { font-size:.66rem; color: var(--muted); }

.consent { display:flex; gap:10px; align-items:flex-start; margin:14px 0; font-size:.82rem; color: var(--ink-soft); }
.consent input { margin-top:3px; width:16px; height:16px; accent-color: var(--ink); flex:none; }
.consent.invalid { color: var(--sale); }
.consent a { text-decoration:underline; }

/* Summary */
.summary { position: sticky; top: 90px; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.summary h3 { font-size:1.05rem; margin-bottom:16px; }
.sum-item { display:grid; grid-template-columns:56px 1fr auto; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.86rem; }
.sum-item .ph { aspect-ratio:3/4; border-radius:3px; }
.sum-item b { font-family: var(--serif); font-weight:500; }
.sum-item small { color: var(--muted); }
.sum-line { display:flex; justify-content:space-between; padding:7px 0; font-size:.9rem; }
.sum-total { display:flex; justify-content:space-between; padding-top:12px; margin-top:6px; border-top:2px solid var(--ink); font-size:1.15rem; font-weight:700; }
.sum-total small { font-weight:400; }
.promo { display:flex; gap:8px; margin:14px 0; }
.promo input { flex:1; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius); }
.co-note { font-size:.74rem; color: var(--muted); margin-top:12px; line-height:1.5; }
.co-success { text-align:center; max-width:560px; margin: 40px auto; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 48px 32px; }
.co-success .check { width:64px; height:64px; border-radius:999px; background: var(--ok); color:#fff; display:grid; place-items:center; margin:0 auto 20px; }
.co-success .check svg { width:32px; height:32px; }
.co-empty { text-align:center; padding: 80px 0; }

@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; }
  .summary { position: static; order:-1; }
}

/* =====================================================================
   Content pages (About / FAQ / Contact / Legal) + Cart page
   ===================================================================== */
.page-hero { text-align:center; padding: 56px 0 6px; }
.page-hero h1 { font-size: clamp(2rem,3.6vw,2.9rem); margin: 10px 0 8px; }
.page-hero p { color: var(--muted); max-width: 60ch; margin: 0 auto; }

.prose { max-width: 760px; margin-inline:auto; }
.prose h2 { font-size: 1.3rem; margin: 30px 0 10px; }
.prose h3 { font-size: 1rem; margin: 20px 0 8px; }
.prose p, .prose li { color: var(--ink-soft); margin: 0 0 12px; }
.prose ul { padding-left: 20px; }
.prose a { color: var(--accent-dk); text-decoration: underline; }
.prose .lead { font-size: 1.1rem; color: var(--ink); font-family: var(--serif); }
.legal-box { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 18px; }
.legal-meta { font-size:.82rem; color: var(--muted); }

.faq { max-width: 780px; margin-inline:auto; }
.faq .acc__q { font-size: 1rem; padding: 20px 0; }
.faq .acc__a p { font-size: .95rem; }
.faq-cat { font-size:1rem; letter-spacing:.01em; color: var(--accent-dk); font-weight:700; margin: 36px 0 8px; }

.contact-grid { display:grid; grid-template-columns: 1.3fr .9fr; gap: 46px; align-items:start; }
.contact-aside { background: var(--surface-2); border:1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.contact-aside h3 { font-size:1.05rem; margin-bottom: 12px; }
.contact-aside p { color: var(--ink-soft); font-size:.92rem; margin: 0 0 14px; }
.contact-aside .row { display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-size:.9rem; }
.contact-aside .row svg { width:18px; height:18px; color: var(--accent-dk); flex:none; margin-top:2px; }
.form-ok { background:#eef5ef; border:1px solid #cfe3d4; color: var(--ok); border-radius: var(--radius); padding: 14px 16px; font-size:.9rem; margin-bottom:16px; }

/* Cart page */
.cartpage { display:grid; grid-template-columns: 1.55fr .8fr; gap: 44px; padding: 20px 0 80px; align-items:start; }
.cart-row { display:grid; grid-template-columns: 96px 1fr auto; gap: 18px; padding: 20px 0; border-bottom:1px solid var(--line); align-items:center; }
.cart-row .ph { aspect-ratio:3/4; border-radius:3px; }
.cart-row b { font-family: var(--serif); font-weight:500; font-size:1.05rem; }
.cart-row small { color: var(--muted); }
.cart-row .rm { background:none; border:none; color: var(--muted); font-size:.78rem; text-decoration:underline; padding:0; margin-top:8px; }
.cart-row .line-price { font-weight:700; text-align:right; min-width:80px; }
.cart-controls { display:flex; align-items:center; gap:14px; margin-top:8px; }
.cart-empty { text-align:center; padding: 80px 0; }

@media (max-width: 900px) {
  .contact-grid, .cartpage { grid-template-columns: 1fr; }
  .cartpage .summary { position: static; }
}
@media (max-width: 560px) {
  .cart-row { grid-template-columns: 72px 1fr; }
  .cart-row .line-price { grid-column: 2; text-align:left; }
}

/* =====================================================================
   Produktbilder, Suche, Cookie-Banner
   ===================================================================== */
.card__media img, .gallery__main img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gallery__main { position:relative; }
.gallery__thumbs img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:3px; border:1px solid var(--line); cursor:pointer; }

/* Suche */
.search-ov { position:fixed; inset:0; background:rgba(251,248,243,.98); backdrop-filter:blur(4px); z-index:70; display:none; flex-direction:column; }
.search-ov.open { display:flex; }
.search-ov__bar { border-bottom:1px solid var(--line); background:var(--surface); }
.search-ov__bar .wrap { display:flex; align-items:center; gap:16px; height:88px; }
.search-ov__bar svg { width:24px; height:24px; color:var(--muted); flex:none; }
.search-ov__bar input { flex:1; border:none; background:none; font-family:var(--serif); font-size:clamp(1.3rem,3vw,2rem); color:var(--ink); outline:none; }
.search-ov__close { background:none; border:none; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); cursor:pointer; }
.search-ov__body { flex:1; overflow:auto; }
.search-ov__body .wrap { padding-block:34px; }
.search-hint { color:var(--muted); }
.search-terms { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

/* Cookie-Banner */
.cookie { position:fixed; left:16px; right:16px; bottom:16px; max-width:540px; margin-inline:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:22px 24px; z-index:66; display:none; }
.cookie.show { display:block; }
.cookie h4 { font-family:var(--serif); font-size:1.1rem; margin:0 0 6px; }
.cookie p { color:var(--ink-soft); font-size:.86rem; margin:0 0 14px; }
.cookie p a { color:var(--accent-dk); text-decoration:underline; }
.cookie__row { display:flex; gap:10px; flex-wrap:wrap; }
.cookie__row .btn { flex:1; }
@media (max-width:420px){ .cookie__row { flex-direction:column; } }

/* =====================================================================
   Konto / Login / Registrierung  (Mobile-First)
   ===================================================================== */
.hidden { display: none !important; }
.hidden-init { display: none; }
.auth-wrap { max-width: 460px; margin: 26px auto 60px; padding: 0 16px; }
.auth-card { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-sm); }
.auth-head { text-align:center; margin-bottom: 20px; }
.auth-head h1 { font-size: 1.7rem; }
.auth-head p { color: var(--muted); font-size:.9rem; margin:6px 0 0; }

.auth-tabs { display:flex; background: var(--surface-2); border:1px solid var(--line); border-radius: 999px; padding:4px; margin-bottom: 20px; }
.auth-tabs button { flex:1; border:none; background:none; padding:10px; border-radius:999px; font-size:.9rem; font-weight:600; color: var(--muted); }
.auth-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* Social login */
.social-list { display:flex; flex-direction:column; gap:10px; }
.social-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:13px 16px; border:1px solid var(--line);
  background: var(--surface); border-radius: var(--radius); font-size:.9rem; font-weight:600; color: var(--ink); transition: background .2s; }
.social-btn:hover { background: var(--surface-2); }
.social-btn svg, .social-btn img { width:20px; height:20px; flex:none; }
.social-btn--apple { background: var(--ink); color:#fff; border-color: var(--ink); }
.social-btn--apple:hover { background:#000; }

.auth-divider { display:flex; align-items:center; gap:12px; color: var(--muted); font-size:.78rem; margin: 18px 0; }
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background: var(--line); }

.auth-form .field { margin-bottom:14px; }
.auth-form input { font-size:16px; padding:13px 14px; } /* 16px: kein Auto-Zoom auf iOS */
.auth-row { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; margin: -4px 0 14px; }
.auth-row a { color: var(--accent-dk); text-decoration:underline; }
.auth-err { color: var(--sale); font-size:.85rem; min-height:1em; margin-bottom:8px; }
.auth-note { text-align:center; font-size:.8rem; color: var(--muted); margin-top:16px; }
.auth-note a { color: var(--accent-dk); text-decoration:underline; }

.guest-track { max-width:460px; margin: 16px auto 0; padding:0 16px; }
.guest-track .acc__q { font-size:.9rem; }

/* Konto-Dashboard */
.account { max-width: 860px; margin: 24px auto 70px; padding: 0 16px; }
.account__head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.account__head h1 { font-size: clamp(1.5rem,4vw,2rem); }
.account__grid { display:grid; grid-template-columns: 1fr; gap:18px; }
.account-card { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.account-card h2 { font-size:1.1rem; margin:0 0 14px; }
.order-item { border:1px solid var(--line); border-radius: var(--radius); padding:14px 16px; margin-bottom:12px; }
.order-item__top { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.86rem; }
.order-item__top b { font-family: var(--serif); }
.order-status { font-size:.72rem; padding:3px 10px; border-radius:999px; background:#eef5ef; border:1px solid #cfe3d4; color: var(--ok); }
.order-lines { color: var(--muted); font-size:.85rem; margin-top:8px; }

@media (min-width: 720px) {
  .auth-card { padding: 34px 32px; }
  .account__grid { grid-template-columns: 1fr 1fr; }
  .account__grid .account-card--orders { grid-column: 1 / -1; }
}

/* =====================================================================
   Sprachauswahl (Flaggen-Dropdown)
   ===================================================================== */
.flag { display:inline-flex; width:20px; height:14px; flex:none; border-radius:2px; overflow:hidden; box-shadow: 0 0 0 1px rgba(23,20,15,.1); }
.flag svg { width:100%; height:100%; display:block; }
.langpick { position: relative; }
.langpick__btn { display:inline-flex; align-items:center; gap:7px; background:none; border:none; color:var(--ink);
  font-family:var(--sans); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; padding:6px 2px; cursor:pointer; }
.langpick__chev { width:13px; height:13px; opacity:.55; transition: transform .25s var(--ease); }
.langpick.open .langpick__chev { transform: rotate(180deg); }
.langpick__menu { position:absolute; top:calc(100% + 12px); right:0; min-width:186px; background:var(--surface); border:1px solid var(--line);
  box-shadow: var(--shadow-md); padding:6px; z-index:50; opacity:0; visibility:hidden; transform: translateY(-6px); transition: all .22s var(--ease); }
.langpick.open .langpick__menu { opacity:1; visibility:visible; transform:none; }
.langpick__opt { display:flex; align-items:center; gap:11px; width:100%; background:none; border:none; padding:10px 12px;
  font-family:var(--sans); font-size:.86rem; letter-spacing:.02em; color:var(--ink-soft); cursor:pointer; text-align:left; }
.langpick__opt:hover { background:var(--surface-2); color:var(--ink); }
.langpick__opt.is-on { color:var(--ink); font-weight:600; }
@media (max-width:960px){ .langpick__name { display:none; } .langpick__menu { right:0; } }

/* =====================================================================
   Registrierungsseite (Split-Layout, editorial)
   ===================================================================== */
.reg { display:grid; grid-template-columns: 1.05fr 1fr; min-height: calc(100vh - 84px); }
.reg__aside { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding: clamp(40px,5vw,64px); color:#fff; }
.reg__aside .ph { position:absolute; inset:0; z-index:0; }
.reg__aside::before { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(rgba(23,20,15,.12), rgba(23,20,15,.66)); }
.reg__aside > * { position:relative; z-index:2; }
.reg__aside .eyebrow { color: rgba(255,255,255,.8); }
.reg__aside .brand { color:#fff; font-size:2.1rem; margin-bottom: 6px; }
.reg__aside h2 { color:#fff; font-size: clamp(1.8rem,2.6vw,2.6rem); margin: 14px 0 0; max-width: 16ch; }
.reg__benefits { list-style:none; padding:0; margin:26px 0 0; }
.reg__benefits li { display:flex; gap:11px; align-items:flex-start; margin-bottom:13px; font-size:.96rem; color: rgba(255,255,255,.92); }
.reg__benefits svg { width:19px; height:19px; flex:none; margin-top:2px; color:#fff; }
.reg__form { display:flex; align-items:center; justify-content:center; padding: 56px 24px; }
.reg__form-inner { width:100%; max-width: 400px; }
.reg__form .auth-head { text-align:left; }
@media (max-width: 860px){ .reg { grid-template-columns: 1fr; } .reg__aside { display:none; } .reg__form { padding: 32px 18px 56px; } }

/* =====================================================================
   Video (Hero + Marken-Video-Band)
   ===================================================================== */
.hero__img { background: linear-gradient(140deg,#ece4d6,#b59a78); }
.hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.videoband { position:relative; overflow:hidden; min-height: 84vh; display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; background:#17140f; }
.videoband__vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.videoband::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(rgba(23,20,15,.34), rgba(23,20,15,.58)); }
.videoband__inner { position:relative; z-index:2; max-width: 60ch; padding: 60px 28px; }
.videoband__inner .eyebrow { color: rgba(255,255,255,.8); }
.videoband__inner h2 { color:#fff; font-size: clamp(2.2rem,4.6vw,4rem); margin: 18px 0 20px; font-weight:500; line-height:1.02; }
.videoband__inner p { color: rgba(255,255,255,.9); font-size: 1.06rem; line-height:1.7; margin: 0 auto 32px; max-width: 46ch; }
.videoband .btn { border-color:#fff; background:transparent; color:#fff; }
.videoband .btn:hover { background:#fff; color: var(--ink); border-color:#fff; }
.videoband__badge { position:absolute; left:24px; bottom:22px; z-index:2; display:flex; align-items:center; gap:8px; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.videoband__badge span { width:26px; height:26px; border:1px solid rgba(255,255,255,.6); border-radius:999px; display:grid; place-items:center; }