/* Seidenkrawatte.ch — Design-System
   QUELLE. Wird von generator/main.py nach site/assets/theme.css kopiert.
   Nicht in site/assets/ bearbeiten — das wird bei jedem Build überschrieben.

   Gestaltungsentscheid: zurückhaltend-editorial statt Bild-dominant.
   Grund: 906 von 993 Produktbildern liegen unter 800 px kurzer Kante.
   Grossflächige Produktbilder würden diese Schwäche ausstellen.
   Stattdessen: Typografie trägt die Wertigkeit, Bilder in ruhigem, festem Rahmen. */

:root{
  --paper:#FAF8F5;      --paper-2:#F2EEE8;   --card:#FFFFFF;
  --ink:#1A1A18;        --ink-2:#4A4843;     --ink-3:#7A766E;
  --line:#E2DCD2;       --line-2:#CFC7B9;
  --accent:#6E1B2B;     --accent-2:#8A2437;  --accent-ink:#FFFFFF;
  --gold:#A8894C;
  --ok:#2C6E49;         --warn:#8A5A00;

  --f-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --f-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;   --s7:3rem;  --s8:4rem;   --s9:6rem;

  --wrap:1180px; --wrap-text:68ch;
  --radius:2px;
  --shadow:0 1px 2px rgba(26,26,24,.05),0 8px 24px -12px rgba(26,26,24,.12);
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#141311; --paper-2:#1C1B18; --card:#1F1E1A;
    --ink:#F2EFE9;   --ink-2:#C6C1B7;   --ink-3:#918B7F;
    --line:#2E2C27;  --line-2:#3E3B34;
    --accent:#C98494; --accent-2:#DDA0AD; --accent-ink:#141311;
    --gold:#C9A968;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-ui); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius)}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s5)}
.prose{max-width:var(--wrap-text)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:99;background:var(--card);padding:var(--s3) var(--s4);border:1px solid var(--ink)}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; line-height:1.2; margin:0 0 var(--s4); letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem)}
h2{font-size:clamp(1.45rem,1.15rem + 1.3vw,2rem); margin-top:var(--s7)}
h3{font-size:1.2rem; margin-top:var(--s5)}
p{margin:0 0 var(--s4)}
.lead{font-size:1.12rem; color:var(--ink-2)}
.eyebrow{font-family:var(--f-ui); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s2)}
.muted{color:var(--ink-3)}
.small{font-size:.86rem}

/* ---------- Kopfbereich ---------- */
.topbar{background:var(--ink); color:var(--paper); font-size:.8rem; letter-spacing:.03em}
.topbar .wrap{display:flex; gap:var(--s5); justify-content:center; flex-wrap:wrap; padding-block:var(--s2)}
.topbar span{display:flex; align-items:center; gap:.4rem}
.topbar span+span::before{content:"·"; color:var(--ink-3); margin-right:.55rem}

.masthead{border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:20}
.masthead .wrap{display:flex; align-items:center; gap:var(--s5); padding-block:var(--s4)}
.logo{font-family:var(--f-display); font-size:1.35rem; font-weight:600; text-decoration:none; letter-spacing:-.02em; white-space:nowrap}
.logo span{color:var(--accent)}
.nav{display:flex; gap:var(--s5); margin-left:auto; flex-wrap:wrap}
.nav a{text-decoration:none; font-size:.93rem; padding-block:var(--s1); border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--accent)}
.tools{display:flex; align-items:center; gap:var(--s4); margin-left:var(--s2)}
.lang{display:flex; gap:var(--s1); font-size:.82rem}
.lang a{text-decoration:none; padding:.15rem .4rem; border:1px solid var(--line-2); border-radius:var(--radius)}
.lang a[aria-current]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.cartlink{text-decoration:none; font-size:.9rem; display:flex; align-items:center; gap:.4rem; white-space:nowrap}
.cartcount{background:var(--accent); color:var(--accent-ink); border-radius:999px; min-width:1.4em; padding:0 .4em; text-align:center; font-size:.78rem; font-variant-numeric:tabular-nums}

/* ---------- Brotkrumen ---------- */
.crumbs{font-size:.84rem; color:var(--ink-3); padding-block:var(--s4) 0}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem}
.crumbs li::after{content:"›"; margin-left:.35rem; color:var(--line-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---------- Produktraster ---------- */
.grid{display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); margin:var(--s6) 0 0; padding:0; list-style:none}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s, transform .15s}
.card:hover{border-color:var(--line-2); transform:translateY(-2px)}
.card a{text-decoration:none; display:flex; flex-direction:column; height:100%}
/* Bildrahmen fix — kaschiert unterschiedliche Originalauflösungen */
.thumb{aspect-ratio:3/4; background:var(--paper-2); display:grid; place-items:center; overflow:hidden; border-bottom:1px solid var(--line)}
.thumb img{width:100%; height:100%; object-fit:cover; object-position:center}
.card-body{padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1}
.card-name{font-family:var(--f-display); font-size:1rem; line-height:1.3; margin:0}
.card-art{font-size:.76rem; color:var(--ink-3); letter-spacing:.05em}
.card-price{margin-top:auto; font-size:.95rem; font-variant-numeric:tabular-nums}
.card-price b{font-weight:600}
.badge{display:inline-block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:.15rem .45rem; border:1px solid currentColor; border-radius:var(--radius); margin-left:.35rem}
.badge-out{color:var(--warn)}

/* ---------- Produktseite ---------- */
.pdp{display:grid; gap:var(--s7); grid-template-columns:minmax(0,1fr); margin-top:var(--s5)}
@media (min-width:900px){ .pdp{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--s8)} }
.gallery{display:flex; flex-direction:column; gap:var(--s3)}
.gallery-main{aspect-ratio:3/4; background:var(--paper-2); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden}
.gallery-main img{width:100%; height:100%; object-fit:cover}
.gallery-thumbs{display:flex; gap:var(--s2); flex-wrap:wrap}
.gallery-thumbs button{width:64px; aspect-ratio:3/4; padding:0; border:1px solid var(--line); background:var(--paper-2); cursor:pointer; overflow:hidden; border-radius:var(--radius)}
.gallery-thumbs button[aria-current="true"]{border-color:var(--accent); border-width:2px}
.gallery-thumbs img{width:100%; height:100%; object-fit:cover}

.price-now{font-family:var(--f-display); font-size:2rem; font-variant-numeric:tabular-nums; margin:0}
.price-hint{color:var(--ink-2); font-size:.92rem; margin:var(--s1) 0 var(--s5)}

.tiers{width:100%; border-collapse:collapse; margin:var(--s4) 0 var(--s5); font-size:.92rem; font-variant-numeric:tabular-nums}
.tiers caption{text-align:left; font-family:var(--f-display); font-size:1.05rem; margin-bottom:var(--s3); color:var(--ink)}
.tiers th,.tiers td{text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line)}
.tiers th{font-weight:600; color:var(--ink-2); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase}
.tiers td:last-child,.tiers th:last-child{text-align:right}
.tiers tr[data-active]{background:var(--paper-2)}
.tiers tr[data-active] td{font-weight:600}

.specs{width:100%; border-collapse:collapse; font-size:.93rem; margin:var(--s5) 0}
.specs th,.specs td{text-align:left; padding:.55rem 0; border-bottom:1px solid var(--line); vertical-align:top}
.specs th{font-weight:500; color:var(--ink-3); width:42%}

.buybox{border:1px solid var(--line-2); background:var(--card); padding:var(--s5); border-radius:var(--radius); margin:var(--s5) 0}
.qty{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4)}
.qty label{font-size:.9rem; color:var(--ink-2)}
.qty input{width:4.5rem; padding:.5rem; font-size:1rem; font-family:inherit; border:1px solid var(--line-2); background:var(--paper); color:var(--ink); border-radius:var(--radius); text-align:center}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:inherit; font-size:1rem; font-weight:500;
  padding:.85rem 1.6rem; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  border-radius:var(--radius); cursor:pointer; text-decoration:none; transition:background .15s}
.btn:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--paper-2); border-color:var(--ink-3)}
.btn-wide{width:100%}

.trust{list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s2); font-size:.9rem; color:var(--ink-2)}
.trust li{display:flex; gap:.55rem; align-items:flex-start}
.trust li::before{content:"✓"; color:var(--ok); font-weight:700; flex:none}

/* ---------- Abschnitte ---------- */
.section{padding-block:var(--s7)}
.section-alt{background:var(--paper-2); border-block:1px solid var(--line)}
.hero{padding-block:var(--s8) var(--s7); border-bottom:1px solid var(--line)}
.hero h1{margin-bottom:var(--s4)}
.hero .lead{max-width:56ch}
.hero-actions{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5)}

.tiles{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); list-style:none; padding:0; margin:var(--s5) 0 0}
.tile{border:1px solid var(--line); background:var(--card); border-radius:var(--radius)}
.tile a{display:block; padding:var(--s4); text-decoration:none}
.tile a:hover{background:var(--paper-2)}
.tile strong{display:block; font-family:var(--f-display); font-size:1rem; font-weight:600; margin-bottom:.15rem}
.tile span{font-size:.82rem; color:var(--ink-3)}
.swatch{display:block; width:100%; height:6px; border-radius:999px; margin-bottom:var(--s3); background:var(--sw,var(--line-2))}

.pager{display:flex; gap:var(--s2); justify-content:center; margin-top:var(--s7); flex-wrap:wrap}
.pager a,.pager span{padding:.5rem .85rem; border:1px solid var(--line); text-decoration:none; border-radius:var(--radius); font-size:.9rem; font-variant-numeric:tabular-nums}
.pager [aria-current]{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.note{border-left:3px solid var(--gold); padding:var(--s3) var(--s4); background:var(--paper-2); margin:var(--s5) 0; font-size:.93rem}

/* ---------- Warenkorb ---------- */
.linerow{display:grid; grid-template-columns:72px 1fr auto; gap:var(--s4); align-items:center; padding:var(--s4) 0; border-bottom:1px solid var(--line)}
.linerow .thumb{aspect-ratio:3/4; border:1px solid var(--line)}
.linerow input{width:3.6rem; padding:.35rem; text-align:center; border:1px solid var(--line-2); background:var(--paper); color:var(--ink); border-radius:var(--radius); font-family:inherit}
.totals{margin-top:var(--s5); font-variant-numeric:tabular-nums}
.totals div{display:flex; justify-content:space-between; padding:.45rem 0; border-bottom:1px solid var(--line)}
.totals .grand{font-family:var(--f-display); font-size:1.3rem; font-weight:600; border-bottom:none; padding-top:var(--s4)}
.save{color:var(--ok); font-weight:600}

/* ---------- Formulare ---------- */
.field{margin-bottom:var(--s4)}
.field label{display:block; font-size:.88rem; color:var(--ink-2); margin-bottom:var(--s2)}
.field input,.field textarea,.field select{width:100%; padding:.7rem .8rem; font-family:inherit; font-size:1rem;
  border:1px solid var(--line-2); background:var(--card); color:var(--ink); border-radius:var(--radius)}
.field .err,.err{color:var(--accent); font-size:.9rem; margin-top:var(--s2)}
fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); margin:0 0 var(--s5)}
legend{font-family:var(--f-display); font-size:1.05rem; padding-inline:var(--s2)}
.radio{display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:var(--s2); cursor:pointer}
.radio:has(input:checked){border-color:var(--accent); background:var(--paper-2)}
.radio input{margin-top:.3rem; flex:none}

/* ---------- Fussbereich ---------- */
.foot{border-top:1px solid var(--line); background:var(--paper-2); margin-top:var(--s9); padding-block:var(--s7) var(--s5); font-size:.9rem}
.foot-grid{display:grid; gap:var(--s6); grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.foot h4{font-family:var(--f-ui); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s3)}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s2)}
.foot a{text-decoration:none; color:var(--ink-2)}
.foot a:hover{color:var(--ink); text-decoration:underline}
.foot-legal{margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--line); color:var(--ink-3); font-size:.83rem;
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}

@media (max-width:640px){
  body{font-size:16px}
  .masthead .wrap{flex-wrap:wrap; gap:var(--s3)}
  .nav{order:3; width:100%; margin-left:0; gap:var(--s4); overflow-x:auto; padding-bottom:var(--s2)}
  .tools{margin-left:auto}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--s4)}
  .linerow{grid-template-columns:56px 1fr; row-gap:var(--s2)}
  .topbar .wrap{gap:var(--s3)}
  .topbar span+span::before{content:""; margin:0}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }
@media print{ .masthead,.topbar,.foot,.buybox{display:none} }