/* Gemeinsame Gestaltung fuer alle Seiten. Einmal geladen, danach im
   Zwischenspeicher -- auf Mobilfunk der Unterschied zwischen einer
   und achtzehn Uebertragungen derselben 22 KB.
   Schriften stecken mit drin, damit es EIN Abruf bleibt.
   Erzeugt von tools/baue_shop.py aus vorlagen/quelle.html
   plus vorlagen/modern.css. NICHT hier aendern. */
/* Schriften liegen neben der Seite, nicht bei Google.
   Ein Abruf zu fonts.gstatic.com schickt die IP jeder Besucherin ins
   Ausland -- bei 152-ФЗ genau das, was ein russischer Shop nicht
   braucht. Golos Text als variable Fassung (400..700), Tenor Sans hat
   nur einen Schnitt. Nur Kyrillisch und Latin. */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 700;font-display:swap;src:url('shrift/golos-400-700-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 700;font-display:swap;src:url('shrift/golos-400-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Tenor Sans';font-style:normal;font-weight:400;font-display:swap;src:url('shrift/tenor-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Tenor Sans';font-style:normal;font-weight:400;font-display:swap;src:url('shrift/tenor-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


:root{
  /* palette — warm wool neutrals, one madder accent */
  --bg:#f4f0e8;
  --surface:#fbf8f1;
  --band:#e7dfcf;
  --ink:#2d2921;
  --ink-soft:#5a5345;
  --muted:#857c6c;
  --line:#d9d1c0;
  --line-strong:#ada288;
  --accent:#a23b22;
  --accent-deep:#86301c;
  --accent-ink:#fdf6ed;
  --moss:#5e6c44;
  --wool-1:#cbc2b1;
  --wool-2:#b2a893;
  --wool-3:#8d836e;
  --wool-4:#6e6656;
  --tex:rgb(45 41 33 / 0.05);
  --glyph:rgb(45 41 33 / 0.16);

  /* type */
  --font-display:"Tenor Sans","Golos Text",sans-serif;
  --font-body:"Golos Text","Segoe UI",Arial,sans-serif;
  --fs-hero:clamp(32px, 8vw, 56px);
  --fs-h1:clamp(26px, 5vw, 38px);
  --fs-h2:clamp(22px, 4vw, 28px);
  --fs-h3:20px;
  --fs-lead:18px;
  --fs-body:16px;
  --fs-s:14px;
  --fs-xs:12px;
  --lh-tight:1.12;
  --lh-body:1.55;
  --ls-caps:0.08em;

  /* spacing scale */
  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:20px;
  --s6:24px;
  --s8:32px;
  --s10:40px;
  --s12:48px;
  --s16:64px;
  --s20:80px;
  --s24:96px;

  /* structure */
  --container:1280px;
  --pad:16px;
  --tap:44px;
  --field-h:50px;
  --check:22px;
  --thumb:72px;
  --measure:640px;
  --radius:0px;
  --radius-round:50%;
  --line-w:1px;
  --line-w2:2px;
  --tr:0.2s ease;
}
@media (min-width:720px){:root{--pad:24px}}
@media (min-width:1080px){:root{--pad:32px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
svg{display:block}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:var(--line-w2) solid var(--accent);outline-offset:var(--s1)}
::placeholder{color:var(--muted)}
::selection{background:var(--band)}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.screen{padding-block:var(--s16);scroll-margin-top:var(--s4)}
@media (min-width:1080px){.screen{padding-block:var(--s24)}}
#catalog,#cart,#done{background:var(--surface)}

/* ---------- header ---------- */
.site-head{background:var(--bg);border-bottom:var(--line-w) solid var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-block:var(--s4)}
.brand{display:flex;flex-direction:column;gap:var(--s1);text-decoration:none;color:var(--ink)}
.brand-name{font-family:var(--font-display);font-size:var(--fs-h2);line-height:var(--lh-tight)}
.brand-tag{font-size:var(--fs-xs);color:var(--muted)}
.cart-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding-inline:var(--s4);
  border:var(--line-w) solid var(--ink);
  font-size:var(--fs-s);font-weight:500;white-space:nowrap;
  text-decoration:none;color:var(--ink);
  transition:background-color var(--tr),color var(--tr);
}
.cart-btn:hover{background:var(--ink);color:var(--surface)}
.cart-btn:active{background:var(--ink-soft)}
.head-nav{border-top:var(--line-w) solid var(--line)}
.nav-row{display:flex;gap:var(--s6);overflow-x:auto;scrollbar-width:none}
.nav-row::-webkit-scrollbar{display:none}
.nav-link{
  position:relative;display:inline-flex;align-items:center;
  min-height:var(--tap);white-space:nowrap;
  font-size:var(--fs-s);color:var(--ink-soft);text-decoration:none;
  transition:color var(--tr);
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:var(--s2);
  height:var(--line-w);background:var(--ink);
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.25s ease;
}
.nav-link:hover{color:var(--ink)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-wide{display:none}
@media (min-width:720px){.nav-wide{display:inline-flex}}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:var(--s2) var(--s6);
  border:var(--line-w) solid transparent;border-radius:var(--radius);
  font-size:var(--fs-body);font-weight:500;line-height:1.3;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color var(--tr),border-color var(--tr),color var(--tr),transform var(--tr);
}
.btn:active{transform:translateY(var(--s1))}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-deep)}
.btn-big{width:100%;min-height:var(--field-h);font-size:var(--fs-lead)}
.text-link{
  color:var(--ink);text-decoration:underline;
  text-underline-offset:var(--s1);text-decoration-thickness:var(--line-w);
  transition:color var(--tr);
}
.text-link:hover{color:var(--accent)}

/* ---------- chips & markers ---------- */
.chips{display:flex;gap:var(--s2);overflow-x:auto;padding-block:var(--s1);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding-inline:var(--s4);white-space:nowrap;
  border:var(--line-w) solid var(--line-strong);border-radius:var(--radius);
  background:transparent;font-size:var(--fs-s);color:var(--ink);text-decoration:none;
  transition:background-color var(--tr),border-color var(--tr),color var(--tr);
}
.chip:hover{border-color:var(--ink)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.marker{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-xs);color:var(--ink-soft);letter-spacing:0.02em}
.marker-dot{width:var(--s2);height:var(--s2);background:var(--moss);border-radius:var(--radius-round);flex:none}
.marker-order{
  border:var(--line-w) solid var(--line-strong);border-radius:var(--radius);
  padding:var(--s1) var(--s2);color:var(--ink-soft);background:transparent;
}

/* ---------- image slots (photo placeholders, 3:4 portrait) ---------- */
.slot{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  background-color:var(--tone, var(--wool-2));
  display:flex;align-items:center;justify-content:center;
  transition:filter var(--tr);
}
.slot::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,var(--tex) 0,var(--tex) var(--line-w),transparent var(--line-w),transparent var(--s2));
}
.slot::after{
  content:"";position:absolute;inset:var(--s2);
  border:var(--line-w) dashed var(--line-strong);pointer-events:none;
}
.slot-a{--tone:var(--wool-1)}
.slot-b{--tone:var(--wool-2)}
.slot-c{--tone:var(--wool-3)}
.slot-d{--tone:var(--wool-4)}
.slot-glyph{width:38%;height:auto}
/* Echte Fotos von Ekaterina. Wo eins liegt, deckt es den Platz und das
   Ersatzzeichen verschwindet -- die Beschriftung bleibt weg, sie sagte ja nur,
   was dort hinsoll. Wo KEIN Foto liegt, bleibt der Platzhalter absichtlich
   stehen: das sind genau die Aufnahmen, die noch fehlen. */
.slot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.slot:has(.slot-img) .slot-glyph{display:none}
.slot:has(.slot-img) .slot-label{display:none}
.slot:has(.slot-img)::before{display:none}
.slot:has(.slot-img)::after{display:none}
.slot-glyph path{fill:none;stroke:var(--glyph);stroke-width:var(--line-w2);stroke-linejoin:round;stroke-linecap:round}
.slot-label{
  position:absolute;left:var(--s2);bottom:var(--s2);z-index:1;
  max-width:calc(100% - var(--s4));
  background:var(--surface);border:var(--line-w) solid var(--line);
  padding:var(--s1) var(--s2);
  font-size:var(--fs-xs);line-height:1.35;color:var(--ink-soft);
}
.slot-mini .slot-glyph{display:none}

/* ---------- cards & grids ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
@media (min-width:720px){.grid{grid-template-columns:repeat(3,1fr);gap:var(--s5)}}
@media (min-width:1080px){.grid{grid-template-columns:repeat(4,1fr);gap:var(--s6)}}
.card{display:flex;flex-direction:column;gap:var(--s2);min-width:0;text-decoration:none;color:var(--ink)}
.card .slot{margin-bottom:var(--s1)}
.card:hover .slot{filter:brightness(0.96)}
.card-name{font-weight:500;line-height:1.35}
.card:hover .card-name{text-decoration:underline;text-underline-offset:var(--s1);text-decoration-thickness:var(--line-w)}
.card .marker{align-self:flex-start}
.card-price{font-weight:600}
.card-meta{font-size:var(--fs-xs);color:var(--muted)}

/* ---------- type helpers ---------- */
.page-title{font-family:var(--font-display);font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:400}
.section-title{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.25;font-weight:400}
.block-title{font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.3;font-weight:400}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-soft)}
.quiet{font-size:var(--fs-s);color:var(--muted)}

/* ---------- hero ---------- */
.hero{display:grid;gap:var(--s8);align-items:center}
@media (min-width:1080px){.hero{grid-template-columns:1.1fr 0.9fr;gap:var(--s12)}}
.hero-inner{display:flex;flex-direction:column;gap:var(--s5);align-items:flex-start}
.hero-title{font-family:var(--font-display);font-size:var(--fs-hero);line-height:var(--lh-tight);font-weight:400;max-width:14ch}
.hero-sub{max-width:32ch}
@keyframes rise{from{opacity:0;transform:translateY(var(--s3))}}

.hero-inner>*:nth-child(2){animation-delay:0.08s}
.hero-inner>*:nth-child(3){animation-delay:0.16s}


/* ---------- claims ---------- */
.claims{display:grid;gap:var(--s6);margin-block-start:var(--s16)}
@media (min-width:720px){.claims{grid-template-columns:repeat(3,1fr);gap:var(--s8)}}
@media (min-width:1080px){.claims{margin-block-start:var(--s20)}}
.claim{border-top:var(--line-w) solid var(--ink);padding-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.claim-title{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:400}
.claim p{font-size:var(--fs-s);color:var(--ink-soft)}

/* ---------- categories ---------- */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin-block-start:var(--s16)}
@media (min-width:720px){.cats{grid-template-columns:repeat(4,1fr);gap:var(--s5)}}
@media (min-width:1080px){.cats{margin-block-start:var(--s20)}}
.cat-name{font-family:var(--font-display);font-size:var(--fs-h3)}

/* ---------- making band ---------- */
.band{background:var(--band);margin-block-start:var(--s16);padding-block:var(--s12)}
@media (min-width:1080px){.band{margin-block-start:var(--s20);padding-block:var(--s16)}}
.band-head{display:grid;gap:var(--s4);margin-bottom:var(--s8)}
@media (min-width:1080px){.band-head{grid-template-columns:1fr 1.2fr;gap:var(--s12);align-items:start;margin-bottom:var(--s10)}}
.band-text{font-size:var(--fs-lead);line-height:1.5;color:var(--ink);max-width:44ch}
.band-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
@media (min-width:720px){.band-slots{grid-template-columns:repeat(4,1fr)}}

/* ---------- catalog ---------- */
.cat-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s4);margin-bottom:var(--s5)}
.cat-count{color:var(--muted);font-size:var(--fs-s)}
.cat-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s4);margin-bottom:var(--s6)}
.sort{display:flex;align-items:center;gap:var(--s3);flex:none}
.sort-label{font-size:var(--fs-s);color:var(--ink-soft)}
.select-wrap{position:relative;display:inline-flex}
.select{
  appearance:none;-webkit-appearance:none;
  min-height:var(--tap);border:var(--line-w) solid var(--line-strong);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);
  padding-inline:var(--s3) var(--s8);
  font-family:var(--font-body);font-size:var(--fs-s);
  cursor:pointer;
}
.select:hover{border-color:var(--ink)}
.select-wrap::after{
  content:"";position:absolute;right:var(--s3);top:50%;pointer-events:none;
  width:var(--s2);height:var(--s2);
  border-right:var(--line-w2) solid var(--ink-soft);border-bottom:var(--line-w2) solid var(--ink-soft);
  transform:translateY(-70%) rotate(45deg);
}

/* ---------- product page ---------- */
.pdp{display:grid;gap:var(--s8)}
@media (min-width:1080px){.pdp{grid-template-columns:1.05fr 0.95fr;gap:var(--s12);align-items:start}}
.gallery{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.pdp-info{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.pdp-name{font-family:var(--font-display);font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:400}
.pdp-price{font-size:var(--fs-h2);font-weight:600;margin-top:var(--s2)}
.pdp-lead{color:var(--ink-soft);max-width:38ch}
.buy{display:flex;flex-direction:column;gap:var(--s5)}
.size-block{display:flex;flex-direction:column;gap:var(--s3)}
.size-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
.size-head .text-link{font-size:var(--fs-s)}
.size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
@media (min-width:720px){.size-grid{grid-template-columns:repeat(7,1fr)}}
.size-btn{
  min-height:var(--field-h);
  border:var(--line-w) solid var(--line-strong);border-radius:var(--radius);
  background:var(--surface);font-size:var(--fs-body);font-weight:500;
  transition:background-color var(--tr),border-color var(--tr),color var(--tr);
}
.size-btn:hover{border-color:var(--ink)}
.size-btn.is-selected{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.size-btn:disabled{
  color:var(--muted);border-color:var(--line);background:transparent;
  text-decoration:line-through;cursor:not-allowed;
}
.size-note{font-size:var(--fs-s);color:var(--ink-soft)}
.size-help{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s2)}
.size-table{width:100%;border-collapse:collapse;font-size:var(--fs-s);scroll-margin-top:var(--s6)}
.size-table th,.size-table td{padding:var(--s3) var(--s2);border-bottom:var(--line-w) solid var(--line);text-align:left}
.size-table thead th{
  font-size:var(--fs-xs);font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:var(--ls-caps);
  border-bottom:var(--line-w) solid var(--line-strong);
}
.size-table .is-picked{background:var(--band)}

.check{display:flex;align-items:flex-start;gap:var(--s3);cursor:pointer;min-height:var(--tap)}
.check input{
  appearance:none;-webkit-appearance:none;flex:none;margin:var(--s1) 0 0;
  width:var(--check);height:var(--check);
  border:var(--line-w) solid var(--line-strong);border-radius:var(--radius);
  background:transparent;cursor:pointer;position:relative;
  transition:background-color var(--tr),border-color var(--tr);
}
.check input:hover{border-color:var(--ink)}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{
  content:"";position:absolute;left:calc(var(--s2) - var(--s1));top:var(--s1);
  width:var(--s2);height:var(--s3);
  border:solid var(--surface);border-width:0 var(--line-w2) var(--line-w2) 0;
  transform:rotate(45deg);
}
.check-text{font-size:var(--fs-s);line-height:1.5}
.option{border:var(--line-w) solid var(--line);padding:var(--s4)}
.option:hover{border-color:var(--line-strong)}
.option .check-text{font-weight:500;color:var(--ink)}
.option-note{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s1)}

.assure li{padding-block:var(--s2);border-top:var(--line-w) solid var(--line);font-size:var(--fs-s);color:var(--ink-soft)}
.assure li:last-child{border-bottom:var(--line-w) solid var(--line)}

.pdp-extra{display:grid;gap:var(--s8);margin-top:var(--s16)}
@media (min-width:720px){.pdp-extra{grid-template-columns:1fr 1fr;gap:var(--s12)}}
.pdp-block{display:flex;flex-direction:column;gap:var(--s3)}
.pdp-block p{color:var(--ink-soft);max-width:52ch}
.similar{margin-top:var(--s16)}
.similar .section-title{margin-bottom:var(--s5)}
.sim-row{display:flex;gap:var(--s4);overflow-x:auto;padding-bottom:var(--s2);scrollbar-width:none}
.sim-row::-webkit-scrollbar{display:none}
.sim-row .card{flex:0 0 46%}
@media (min-width:720px){
  .sim-row{display:grid;grid-template-columns:repeat(3,minmax(0, 260px));overflow:visible;padding-bottom:0}
  .sim-row .card{flex:none}
}

/* ---------- cart ---------- */
.cart-layout{display:grid;gap:var(--s8);margin-top:var(--s6)}
@media (min-width:1080px){.cart-layout{grid-template-columns:1fr minmax(0, 380px);gap:var(--s12);align-items:start}}
.cart-list{border-top:var(--line-w) solid var(--line)}
.cart-row{
  display:grid;grid-template-columns:var(--thumb) 1fr;gap:var(--s4);
  padding-block:var(--s5);border-bottom:var(--line-w) solid var(--line);
}
@media (min-width:1080px){.cart-row{grid-template-columns:var(--thumb) 1fr auto;align-items:center;gap:var(--s8)}}
.cart-thumb{width:var(--thumb)}
.cart-info{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.cart-name{font-weight:500}
.cart-meta{font-size:var(--fs-xs);color:var(--muted)}
.cart-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin-top:var(--s3)}
@media (min-width:1080px){.cart-actions{margin-top:0;gap:var(--s6)}}
.cart-price{font-weight:600;margin-left:auto}
@media (min-width:1080px){.cart-price{margin-left:0;min-width:var(--s24);text-align:right}}
.qty{display:inline-flex;border:var(--line-w) solid var(--line-strong)}
.qty button{
  width:var(--tap);height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-lead);transition:background-color var(--tr);
}
.qty button:hover{background:var(--band)}
.qty span{
  min-width:var(--tap);display:inline-flex;align-items:center;justify-content:center;
  border-inline:var(--line-w) solid var(--line);font-weight:500;
}
.remove-btn{
  min-height:var(--tap);display:inline-flex;align-items:center;
  font-size:var(--fs-s);color:var(--muted);text-decoration:underline;
  text-underline-offset:var(--s1);transition:color var(--tr);
}
.remove-btn:hover{color:var(--accent)}
.summary{border:var(--line-w) solid var(--line);background:var(--surface);padding:var(--s5)}
#cart .summary{background:var(--bg)}
.summary-row{display:flex;justify-content:space-between;gap:var(--s4);padding-block:var(--s2);font-size:var(--fs-s)}
.summary-muted{color:var(--muted);text-align:right}
.summary-total{border-top:var(--line-w) solid var(--line-strong);margin-top:var(--s2);padding-top:var(--s3);font-size:var(--fs-lead);font-weight:600}
.summary .btn{margin-top:var(--s4)}
.summary-note{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s3)}
.cart-empty{
  margin-top:var(--s12);
  border:var(--line-w) dashed var(--line-strong);
  padding:var(--s12) var(--s5);
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);text-align:center;
}
.empty-title{font-family:var(--font-display);font-size:var(--fs-h3)}

/* ---------- checkout ---------- */
.checkout{max-width:var(--measure)}
.form{display:flex;flex-direction:column;gap:var(--s6);margin-top:var(--s6)}
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field-label{font-size:var(--fs-s);font-weight:500}
.field-opt{font-weight:400;color:var(--muted)}
.field-note{font-size:var(--fs-xs);color:var(--muted)}
.input{
  width:100%;min-height:var(--field-h);
  border:0;border-bottom:var(--line-w) solid var(--line-strong);border-radius:var(--radius);
  background:transparent;color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);
  padding:var(--s2) 0;
  transition:border-color var(--tr),background-color var(--tr);
}
.input:hover{border-bottom-color:var(--ink)}
.input:focus{outline:none;border-bottom:var(--line-w2) solid var(--accent);background:var(--surface)}
.input:focus-visible{outline:none;border-bottom:var(--line-w2) solid var(--accent);background:var(--surface)}
.area{min-height:calc(var(--field-h) * 2);resize:vertical;line-height:1.5}
.pay{display:flex;flex-direction:column;gap:var(--s3)}
.pay-card{
  display:flex;align-items:flex-start;gap:var(--s3);cursor:pointer;
  border:var(--line-w) solid var(--line);padding:var(--s4);
  transition:border-color var(--tr);
}
.pay-card:hover{border-color:var(--line-strong)}
.pay-card input{
  appearance:none;-webkit-appearance:none;flex:none;margin:var(--s1) 0 0;
  width:var(--check);height:var(--check);
  border:var(--line-w) solid var(--line-strong);border-radius:var(--radius-round);
  background:transparent;cursor:pointer;position:relative;
  transition:border-color var(--tr);
}
.pay-card input:checked{border-color:var(--accent)}
.pay-card input:checked::after{
  content:"";position:absolute;inset:var(--s1);
  background:var(--accent);border-radius:var(--radius-round);
}
.pay-card:has(input:checked){border:var(--line-w2) solid var(--accent);padding:calc(var(--s4) - var(--line-w))}
.pay-body{display:flex;flex-direction:column;gap:var(--s1)}
.pay-title{font-weight:500}
.pay-text{font-size:var(--fs-s);color:var(--ink-soft)}
.form-note{font-size:var(--fs-s);color:var(--muted)}

/* ---------- done ---------- */
.done-wrap{max-width:var(--measure);margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.done-mark{width:var(--s16);height:var(--s16)}
.done-ring{fill:none;stroke:var(--ink);stroke-width:var(--line-w2)}
.done-tick{fill:none;stroke:var(--moss);stroke-width:var(--line-w2);stroke-linecap:round;stroke-linejoin:round}
.done-num{font-size:var(--fs-lead);color:var(--ink-soft)}
.done-text{color:var(--ink-soft);max-width:46ch}
.done-sum{width:100%;margin-top:var(--s4);text-align:left}

/* ---------- footer ---------- */
.site-foot{background:var(--band);border-top:var(--line-w) solid var(--line-strong);padding-block:var(--s12) var(--s8)}
.foot-grid{display:grid;gap:var(--s8)}
@media (min-width:720px){.foot-grid{grid-template-columns:1.2fr 1fr;gap:var(--s12)}}
.foot-brand{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.foot-name{font-size:var(--fs-h3)}
.foot-contact{margin-top:var(--s3);font-size:var(--fs-s);color:var(--ink-soft);max-width:36ch}
.foot-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s8)}
@media (min-width:1080px){.foot-nav{grid-template-columns:repeat(3,1fr)}}
.foot-link{
  display:inline-flex;align-items:center;min-height:var(--tap);
  font-size:var(--fs-s);color:var(--ink-soft);text-decoration:none;
  transition:color var(--tr);
}
.foot-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:var(--s1)}
.seller{
  margin-top:var(--s10);min-height:var(--s16);
  border:var(--line-w) dashed var(--line-strong);
}

/* Auftakt nur als Zugabe, nie als Voraussetzung.
   Vorher stand hier `animation: rise ... both` auf allen Kindern des Heros.
   Mit fill-mode both haelt das Element vor dem Lauf den Anfangszustand der
   Kehre, und der ist `opacity: 0` -- laeuft die Animation nicht (Energiesparen,
   ein Browser in einer App, ein Robot, ein Bildschirmfoto), ist die
   Ueberschrift des Shops unsichtbar. Bei brauer.pro war genau das per
   Bildschirmfoto belegt.
   Jetzt umgekehrt: sichtbar ist der Normalzustand. */
@media (prefers-reduced-motion:no-preference){
  .hero-inner>*{animation:rise 0.5s ease both}
  .hero-slot{animation:rise 0.6s ease both}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ===========================================================================
   Nachtrag zu KIMIs Gestaltung. KIMIs Palette und Schriften bleiben --
   Golos Text auf wollfarbenem Grund ist gut und passt zum Material.
   Geändert wird, was nach 2019 aussieht, und ergänzt, was der Shop braucht.

   Zu Nike und Adidas: deren MECHANIK ist die Referenz (Größenraster statt
   Auswahlliste, Tabelle am Wähler) und die ist unverändert richtig. Ihre Optik
   ist Massenware für Millionen Artikel -- ein Handwerksladen mit zehn Modellen
   darf und soll anders aussehen.

   Vier Sachen, die aktuelle Shops tun und die hier fehlten:

   1. Feste Kaufleiste unten auf dem Telefon. Der Knopf steht sonst unter der
      Größentabelle, also drei Bildschirme tief.
   2. Bilder randlos. Ein Foto mit Rand herum wirkt wie ein Ausdruck, ein
      randloses wirkt wie Ware.
   3. Waagerechte Galerie mit Fangpunkten statt Briefmarken darunter.
   4. Kein Schattenwurf. Haarlinien statt Wolken -- Schatten waren der Look von
      2017 und machen jede Fläche unruhig.
   =========================================================================== */

/* ---- 1. Kaufleiste: liegt fest unten, immer erreichbar ---------------- */
.buy-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(12px);
  border-top:var(--line-w) solid var(--line-strong);
  padding:var(--s3) var(--s4);
  padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom, 0px));
}
.buy-bar-in{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; gap:var(--s4);
}
.buy-bar-price{ display:block; font-size:var(--fs-h3); font-weight:600; line-height:1.1 }
.buy-bar-size{ display:block; font-size:var(--fs-s); color:var(--ink-soft);
                white-space:nowrap }
@media (max-width:380px){
  /* Auf sehr schmalen Geraeten hat der Knopf Vorrang vor dem Hinweis. */
  .buy-bar-size{ font-size:var(--fs-xs) }
  .buy-bar-btn{ flex:0 1 10rem }
}
.buy-bar-btn{ margin-left:auto; flex:0 1 14rem; min-height:3rem }
/* Platz schaffen, damit die Leiste nichts verdeckt */
body:has(.buy-bar) .site-foot{ padding-bottom:6rem }
@media (min-width:960px){
  /* Am Rechner ist der Knopf ohnehin im Blick -- dort stört eine Leiste. */
  .buy-bar{ position:static; backdrop-filter:none; border-top:0;
            border-bottom:var(--line-w) solid var(--line-strong); display:none }
  body:has(.buy-bar) .site-foot{ padding-bottom:0 }
}

/* ---- 2. Bilder randlos, Karten ohne Kasten --------------------------- */
@media (max-width:719px){
  .grid{ gap:var(--s5) var(--s3) }
  .card{ border:0; padding:0; background:none }
  .card .slot{ border-radius:var(--radius); }
}
.card{ box-shadow:none }
.card:hover .slot-img{ transform:scale(1.03) }
.slot-img{ transition:transform .5s cubic-bezier(.2,.7,.2,1) }
.card .slot{ overflow:hidden }

/* Preis und Name klarer trennen, Meta ruhiger */
.card-name{ line-height:1.25 }
.card-price{ font-weight:600 }
.card-meta{ color:var(--ink-soft); font-size:var(--fs-xs) }

/* ---- 3. Galerie mit Fangpunkten statt Briefmarken -------------------- */
@media (max-width:719px){
  .gallery-thumbs, .thumbs{
    display:flex; gap:var(--s2); overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-inline:calc(var(--s4) * -1); padding-inline:var(--s4);
  }
  .gallery-thumbs::-webkit-scrollbar, .thumbs::-webkit-scrollbar{ display:none }
  .thumbs > *{ flex:0 0 26%; scroll-snap-align:start }
}

/* ---- 4. Haarlinien statt Schatten ----------------------------------- */
.summary, .pay-card, .size-table, .cart-row{ box-shadow:none }

/* ---- Größenwahl: Zustände, die man wirklich sieht -------------------- */
.size-btn{ cursor:pointer }
.size-btn:hover:not(:disabled){ border-color:var(--ink); }
.size-btn.is-selected, .size-btn.is-sel{
  background:var(--ink); color:var(--surface); border-color:var(--ink);
}
.size-btn:disabled, .size-btn.is-out{
  cursor:not-allowed; color:var(--muted);
  text-decoration:line-through; background:transparent;
  border-style:dashed; opacity:.7;
}
.size-btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
.size-grid--warn .size-btn:not(:disabled){ border-color:var(--accent) }
.size-warn{
  margin:var(--s2) 0 0; font-size:var(--fs-s); font-weight:500;
  color:var(--accent);
}

/* ---- kurze Rückmeldung nach dem Hinzufügen --------------------------- */
.toast{
  position:fixed; z-index:60; left:var(--s4); right:var(--s4);
  bottom:calc(5.5rem + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  background:var(--ink); color:var(--surface);
  border-radius:var(--radius); padding:var(--s3) var(--s4);
  font-size:var(--fs-s);
  opacity:0; transform:translateY(.75rem);
  transition:opacity .24s ease, transform .24s ease;
  pointer-events:none;
}
.toast.is-on{ opacity:1; transform:none; pointer-events:auto }
.toast-link{ margin-left:auto; color:var(--surface); text-decoration:underline;
             text-underline-offset:.2em; white-space:nowrap }
@media (min-width:720px){
  .toast{ left:auto; right:var(--s5); bottom:var(--s5); max-width:26rem }
}

/* ---- Warenkorb: Zeilen, die auf dem Telefon nicht quetschen ---------- */
.cart-row{
  display:grid; grid-template-columns:5rem 1fr; gap:var(--s3) var(--s4);
  padding:var(--s4) 0; border-bottom:var(--line-w) solid var(--line);
  align-items:start;
}
.cart-thumb{ width:5rem; border-radius:var(--radius); overflow:hidden }
.cart-info{ display:flex; flex-direction:column; gap:.15rem; min-width:0 }
.cart-name{ font-weight:500 }
.cart-meta{ font-size:var(--fs-s); color:var(--ink-soft) }
.cart-price{ font-weight:600; margin-top:var(--s2) }
.cart-tools{
  grid-column:1 / -1; display:flex; align-items:center; gap:var(--s4);
  flex-wrap:wrap;
}
.qty{ display:inline-flex; align-items:center; border:var(--line-w) solid var(--line-strong);
      border-radius:var(--radius); overflow:hidden }
.qty button{
  min-width:2.75rem; min-height:2.75rem; border:0; background:var(--surface);
  font-size:1.1rem; cursor:pointer; color:var(--ink);
}
.qty button:hover{ background:var(--wool-1) }
.qty button:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px }
.qty span{ min-width:2.5rem; text-align:center; font-variant-numeric:tabular-nums }
.cart-del{
  background:none; border:0; padding:var(--s2) 0; cursor:pointer;
  color:var(--ink-soft); font-size:var(--fs-s); text-decoration:underline;
  text-underline-offset:.2em; font-family:inherit;
}
.cart-del:hover{ color:var(--accent) }
.cart-sum{ margin-top:var(--s5); display:flex; flex-direction:column; gap:var(--s3) }
.cart-sum-row{ display:flex; justify-content:space-between; gap:var(--s4);
               font-size:var(--fs-s) }
.cart-sum-total{ font-size:var(--fs-body); padding-top:var(--s3);
                 border-top:var(--line-w) solid var(--line-strong) }
.cart-note{ font-size:var(--fs-s); color:var(--ink-soft); margin:0 }
.muted{ color:var(--ink-soft) }
.cart-empty{ padding:var(--s10) 0; display:flex; flex-direction:column;
             align-items:flex-start; gap:var(--s4) }

/* ---- Kasse: Fehler zeigen, wo sie sind ------------------------------ */
.field.is-bad .input, .is-bad .input{ border-color:var(--accent) }
.field.is-bad .field-label, .is-bad > span{ color:var(--accent) }
label.is-bad{ color:var(--accent) }

/* ---- Bestätigung ---------------------------------------------------- */
.zakaz-nr{
  font-size:var(--fs-h2); font-weight:600; letter-spacing:.02em; margin:0 0 var(--s4);
}
.zakaz-text{
  text-align:left; white-space:pre-wrap; font-family:inherit;
  font-size:var(--fs-s); line-height:1.6; color:var(--ink-soft);
  background:var(--wool-1); border-radius:var(--radius);
  padding:var(--s4); margin:0 0 var(--s5); overflow-x:auto;
}
.send-row{ display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s4) }
@media (min-width:720px){ .send-row{ flex-direction:row } .send-row > *{ flex:1 } }

/* ---- Textseiten (Rückgabe, Lieferung, Datenschutz) ------------------ */
.doc{ max-width:44rem }
.doc h2{ margin:var(--s6) 0 var(--s3) }
.doc p, .doc li{ color:var(--ink-soft) }
.doc strong{ color:var(--ink) }
.doc ul{ padding-left:1.25rem }
.doc li{ margin-bottom:.4rem }
.doc .luecke{
  background:var(--wool-1); border:var(--line-w) dashed var(--line-strong);
  border-radius:var(--radius); padding:.05rem .45rem; white-space:nowrap;
}
.doc table{ width:100%; border-collapse:collapse; margin:0 0 var(--s4) }
.doc th, .doc td{ text-align:left; padding:.55rem .7rem;
                  border-bottom:var(--line-w) solid var(--line) }
.doc th{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em;
         color:var(--ink-soft) }

/* ---- Sonstiges ------------------------------------------------------ */
.chip{ cursor:pointer }
.chip.is-on, .chip.is-active{ background:var(--ink); color:var(--surface);
                              border-color:var(--ink) }
[hidden]{ display:none !important }

@media (prefers-reduced-motion:reduce){
  .slot-img, .toast{ transition:none !important }
  .card:hover .slot-img{ transform:none }
}


/* ---- Hinweis zur Groesse: fertige Paar oder Nachbau ------------------- */
/* Der Satz steht direkt unter dem Groessenraster, weil er dort gelesen wird
   -- nicht in der Beschreibung, die niemand zu Ende liest. */
.razmer-zametka{
  margin:var(--s3) 0 0; font-size:var(--fs-s); line-height:1.55;
  color:var(--ink-soft);
  border-left:2px solid var(--line-strong); padding-left:var(--s3);
}
.razmer-zametka.is-gotovo{ border-left-color:#2f7d4f; color:var(--ink) }
.razmer-zametka.is-zakaz{ border-left-color:var(--accent); color:var(--ink) }

/* Die Groesse vom Foto sichtbar hervorheben: dieses eine Paar liegt fertig da. */
.size-btn.is-gotov{ box-shadow:inset 0 0 0 2px var(--line-strong) }
.size-btn.is-gotov.is-selected{ box-shadow:none }

/* ---- Galerie ---------------------------------------------------------- */
.thumbs{ display:flex; gap:var(--s2); margin-top:var(--s2) }
.thumb{
  flex:0 0 auto; width:78px; padding:0; border:var(--line-w) solid var(--line);
  border-radius:var(--radius); overflow:hidden; background:none; cursor:pointer;
  line-height:0;
}
.thumb img{ width:100%; height:auto; display:block }
.thumb.is-on{ border-color:var(--ink) }
.thumb:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }


/* Honigtopf. Fuer Menschen unsichtbar, fuer einfache Bots ein Feld wie jedes
   andere -- wer es ausfuellt, bekommt eine freundliche Antwort und landet
   nirgends. Bewusst NICHT display:none: manche Bots ueberspringen genau das. */
.honig{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }


/* ===========================================================================
   Runde 2 nach Davens Durchsicht.
   =========================================================================== */

/* ---- Kasse: sie stand linksbuendig auf halber Seitenbreite und wirkte
   dadurch leer. Ein Formular liest sich in einer schmalen Spalte besser --
   das Auge springt nicht ueber leere Flaechen. ------------------------- */
.checkout{ max-width:34rem; margin-inline:auto }
.checkout .page-title{ text-align:center; margin-bottom:var(--s6) }
.checkout .field{ margin-bottom:var(--s5) }
.checkout .block-title{ text-align:center }
.kasse-mitte{ text-align:center }

/* Kein Zweispalter: die Markierung .checkout-raster gibt es gar nicht, die
   Regeln waeren tote Zeilen gewesen. Und die 60rem, die hier standen, haben
   die 34rem oben ueberschrieben -- das Formular war wieder 960 px breit und
   genauso leer wie vorher. Ein Formular liest sich in EINER schmalen Spalte. */
@media (min-width:900px){
  .checkout{ max-width:38rem }
}

/* ---- Produktfotos: Rahmen in der Farbe der Seite, damit das Bild nicht
   einfach im Beige verschwindet. Innen eine feine Linie, aussen ein warmer
   Schatten -- kein Kasten, nur eine Kante. ------------------------------- */
.slot-main, .card .slot{
  border:var(--line-w) solid var(--line-strong);
  border-radius:var(--radius); overflow:hidden;
  background:var(--wool-1);
}
.slot-main{
  box-shadow:0 1px 0 var(--surface) inset, 0 10px 30px rgb(45 41 33 / .09);
}
.card .slot{ box-shadow:0 4px 14px rgb(45 41 33 / .06) }

/* ---- Schwebender Kontaktknopf ---------------------------------------- */
.kontakt-knopf{
  position:fixed; right:var(--s4); z-index:50;
  bottom:calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:12px 18px; border:0; border-radius:999px;
  background:var(--accent); color:var(--accent-ink);
  font:inherit; font-size:var(--fs-s); font-weight:500;
  box-shadow:0 6px 20px rgb(45 41 33 / .22); cursor:pointer;
}
.kontakt-knopf:hover{ background:var(--accent-deep) }
body:has(.buy-bar) .kontakt-knopf{ bottom:calc(5.5rem + env(safe-area-inset-bottom, 0px)) }
@media (min-width:960px){
  body:has(.buy-bar) .kontakt-knopf{ bottom:var(--s4) }
}

.kontakt-blatt{
  position:fixed; right:var(--s4); z-index:51;
  bottom:calc(4.5rem + env(safe-area-inset-bottom, 0px));
  width:min(20rem, calc(100vw - 2 * var(--s4)));
  background:var(--surface); border:var(--line-w) solid var(--line-strong);
  border-radius:var(--radius); padding:var(--s4);
  box-shadow:0 12px 40px rgb(45 41 33 / .22);
}
body:has(.buy-bar) .kontakt-blatt{ bottom:calc(9rem + env(safe-area-inset-bottom, 0px)) }
@media (min-width:960px){
  body:has(.buy-bar) .kontakt-blatt{ bottom:calc(4.5rem + env(safe-area-inset-bottom, 0px)) }
}
.kontakt-blatt h3{ margin:0 0 var(--s3); font-size:var(--fs-body) }
.kontakt-blatt a{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) 0; border-top:var(--line-w) solid var(--line);
  color:var(--ink); text-decoration:none;
}
.kontakt-blatt a:first-of-type{ border-top:0 }
.kontakt-blatt a:hover{ color:var(--accent) }
.kontakt-blatt .k-was{ display:block; font-size:var(--fs-xs); color:var(--muted) }

/* ---- Telefonmaske: die Vorlage bleibt sichtbar, auch beim Tippen ------ */
.input.tel-maske{ font-variant-numeric:tabular-nums; letter-spacing:.02em }

/* Der Kontaktknopf ist ein Verweis, soll aber wie ein Knopf aussehen --
   ohne die Unterstreichung, die alle anderen Verweise tragen. */
.kontakt-knopf{ text-decoration:none }
.kontakt-knopf:hover{ text-decoration:none; color:var(--accent-ink) }


/* ===========================================================================
   Winterrahmen am Heldenbild.

   Valenki sind Winterschuhe -- zur Saison darf das Bild das auch sagen. Der
   Rahmen ist bewusst zurueckhaltend: Farbe aus der Palette (das Krapprot der
   Seite), eine feine helle Innenlinie wie Raureif, vier Flocken auf den Ecken.
   Kein Gruen, kein Gold, keine Girlande -- der Laden verkauft Handarbeit aus
   Wolle, nicht Weihnachtsschmuck.

   Abschalten: WINTER = False in tools/baue_shop.py. Diese Regeln koennen
   stehen bleiben, ohne den Rahmen greifen sie nirgends.
   =========================================================================== */
.zima-ramka{
  position:relative;
  padding:10px;
  border-radius:calc(var(--radius) + 10px);
  background:
    linear-gradient(140deg,
      var(--accent) 0%, var(--accent-deep) 38%,
      var(--accent) 62%, var(--accent-deep) 100%);
  box-shadow:0 14px 38px rgb(45 41 33 / .16);
}

/* Die helle Innenlinie sitzt zwischen Rahmen und Foto -- sie trennt das
   kraeftige Rot von der Wolle, sonst franst der Uebergang aus. */
.zima-ramka::before{
  content:""; position:absolute; inset:5px;
  border:1px solid rgb(253 246 237 / .55);
  border-radius:calc(var(--radius) + 5px);
  pointer-events:none;
}

/* Im Rahmen wird aus dem Platzhalter-Kasten ein normales Bild.

   Warum: .slot ist ein Kasten mit festem Seitenverhaeltnis, Fuellfarbe und
   Textur, und .slot-img liegt absolut darin. Im Zierrahmen hat das nicht mehr
   gestimmt -- zu sehen war nur die olivgruene Fuellfarbe, das Foto lag
   irgendwo darunter. Ein Bild, das einfach ein Bild ist, kann das nicht
   passieren, und der Rahmen legt sich dann genau an die Bildkante. */
.zima-ramka .hero-slot{
  /* display:block statt des geerbten flex: als Flex-Kasten mit
     align-items:center bekommt das Bild auf schmalen Schirmen keine Hoehe --
     zu sehen war dann nur der rote Rahmen. */
  display:block;
  border:0; margin:0; padding:0;
  border-radius:var(--radius); overflow:hidden;
  background:none; aspect-ratio:auto; min-height:0;
  animation:none;                 /* das "rise both" der Vorlage nicht erben */
}
.zima-ramka .hero-slot::before,
.zima-ramka .hero-slot::after,
.zima-ramka .hero-slot .slot-glyph,
.zima-ramka .hero-slot .slot-label{ display:none }
.zima-ramka .hero-slot .slot-img{
  position:static; inset:auto;
  display:block; width:100%; height:auto;
  /* Seitenverhaeltnis fest, damit die Hoehe nicht von der Ladereihenfolge
     abhaengt -- sonst springt die Seite beim Laden. */
  aspect-ratio:3/4; object-fit:cover;
}

.zima-ramka .ecke{
  position:absolute; width:38px; height:38px; z-index:2;
  color:var(--accent-ink);
  filter:drop-shadow(0 1px 2px rgb(45 41 33 / .35));
}
.zima-ramka .ecke .flocke{ width:100%; height:100% }
/* Die Flocken sitzen zur Haelfte ausserhalb: der Rahmen wirkt dadurch
   handgelegt statt aufgeklebt. */
.ecke-lo{ top:-17px; left:-17px; transform:rotate(-12deg) }
.ecke-ro{ top:-17px; right:-17px; transform:rotate(14deg) }
.ecke-lu{ bottom:-17px; left:-17px; transform:rotate(20deg) }
.ecke-ru{ bottom:-17px; right:-17px; transform:rotate(-8deg) }

@media (max-width:719px){
  .zima-ramka{ padding:7px }
  .zima-ramka::before{ inset:3px }
  .zima-ramka .ecke{ width:29px; height:29px }
  .ecke-lo, .ecke-ro{ top:-13px }
  .ecke-lu, .ecke-ru{ bottom:-13px }
  .ecke-lo, .ecke-lu{ left:-13px }
  .ecke-ro, .ecke-ru{ right:-13px }
}

/* Ein langsames Glimmen, damit der Rahmen lebt. Wer Bewegung abgestellt hat,
   bekommt ein ruhiges Bild -- das ist keine Information, nur Schmuck. */
@media (prefers-reduced-motion:no-preference){
  .zima-ramka .ecke{ animation:flocke-glimmen 7s ease-in-out infinite }
  .ecke-ro{ animation-delay:1.6s }
  .ecke-lu{ animation-delay:3.2s }
  .ecke-ru{ animation-delay:4.8s }
}
@keyframes flocke-glimmen{
  0%, 100%{ opacity:.85 }
  50%     { opacity:1 }
}


/* ===========================================================================
   Erster Eindruck / erster-eindruck

   Der Startabschnitt hatte 96 px Polster oben UND ein 693 px hohes Bild.
   Weil die Spalten mittig ausgerichtet sind, rutschte der Titel dadurch weit
   unter die Bildschirmmitte -- beim Oeffnen sah man vor allem Leerraum.

   Jetzt: weniger Polster oben, das Bild schmaler (und damit kuerzer), und der
   ganze Abschnitt so hoch wie der Schirm, mit dem Inhalt in der Mitte. Wer die
   Seite oeffnet, sieht Titel, Satz, Knopf und Ware auf einen Blick.
   =========================================================================== */
#home.screen{
  padding-top:var(--s6);
  padding-bottom:var(--s10);
}

@media (min-width:900px){
  #home.screen{
    /* svh statt vh: auf dem Telefon zaehlt vh die Adressleiste mit und der
       Abschnitt wird hoeher als der Schirm. */
    min-height:calc(100svh - 11rem);
    display:grid; align-content:center;
  }
  /* Kuerzeres Bild = hoeher sitzender Titel. Das Foto bleibt gross genug,
     um die Handarbeit zu zeigen -- darum geht es hier. */
  #home .zima-ramka,
  #home .hero-slot{ max-width:23rem; margin-inline-start:auto }
}

@media (max-width:899px){
  /* Auf dem Telefon steht das Bild unter dem Text. Dort ist ein volles
     Seitenverhaeltnis zu viel Hoehe -- der Knopf waere weg vom Schirm. */
  #home .zima-ramka{ max-width:20rem; margin-inline:auto }
}

/* ===========================================================================
   Scrollleiste

   Die graue Leiste des Systems stand quer zum warmen Beige. Firefox nimmt
   scrollbar-color, alles auf WebKit die ::-webkit-Regeln -- deshalb beides.
   Die Breite bleibt bedienbar: eine haardünne Leiste sieht schick aus und
   trifft man mit der Maus nicht.
   =========================================================================== */
html{
  scrollbar-color:var(--wool-2) var(--band);
  scrollbar-width:thin;
}
::-webkit-scrollbar{ width:13px; height:13px }
::-webkit-scrollbar-track{ background:var(--band) }
::-webkit-scrollbar-thumb{
  background:var(--wool-2);
  border-radius:999px;
  border:3px solid var(--band);   /* Rand laesst den Griff schlanker wirken */
}
::-webkit-scrollbar-thumb:hover{ background:var(--wool-3) }
::-webkit-scrollbar-corner{ background:var(--band) }

/* Der "под заказ"-Hinweis lief ueber die ganze Spaltenbreite: .marker setzt
   inline-flex, aber als <p> in einer Flex-Spalte streckt sich der Kasten
   trotzdem. Also ausdruecklich schrumpfen lassen. */
.marker-order{ display:inline-flex; width:auto; align-self:flex-start; margin-right:auto }


/* ===========================================================================
   Runde 3 nach Davens Durchsicht (30.09.2026): "mach alles ein bisschen
   schoener". Steht bewusst GANZ am Ende -- bei gleicher Spezifitaet gewinnt
   die spaetere Regel, sonst wirken die Aenderungen still nicht.
   =========================================================================== */

/* ---- Fuss klebt unten. Kurze Seiten (Warenkorb, Danke) hatten den Fuss in
   der Mitte und darunter einen leeren Streifen. ------------------------- */
body{ min-height:100vh; display:flex; flex-direction:column }
body > main{ flex:1 0 auto }

/* ---- Produktseite: Miniaturen LINKS neben dem Bild, Bild kleiner --------
   Auf dem Telefon bleibt die waagerechte Leiste unter dem Bild. */
@media (min-width:900px){
  .pdp{
    grid-template-columns:auto minmax(0, 1fr);
    gap:var(--s12); align-items:start;
  }
  .gallery{
    display:grid; grid-template-columns:4.75rem minmax(0, 1fr);
    gap:var(--s3); align-items:start;
    position:sticky; top:var(--s6);
  }
  .gallery .slot-main{ grid-column:2; grid-row:1 }
  .gallery .thumbs{
    grid-column:1; grid-row:1; margin-top:0;
    display:flex; flex-direction:column; gap:var(--s2);
  }
  .gallery .thumb{ width:100% }
  /* Das Bild passt auf den Bildschirm, statt ihn zu fuellen. */
  /* Rahmen hat 3:4 fest -- also die BREITE begrenzen, dann passt die Hoehe
     auch auf einen Laptop (1366x657). */
  .gallery .slot-main{ width:min(28.5rem, calc((100vh - 11rem) * 3 / 4), 40vw) }
}

/* ---- Rueckmeldung "im Warenkorb": Karte im Stil der Seite ---------------
   Vorher ein schwarzer Balken unten rechts, der den Kontaktknopf verdeckte. */
.toast{
  position:fixed; z-index:60;
  left:var(--s4); right:var(--s4); top:var(--s4); bottom:auto;
  display:grid; grid-template-columns:4rem minmax(0,1fr) auto;
  gap:var(--s3) var(--s4); align-items:start;
  background:var(--surface); color:var(--ink);
  border:var(--line-w) solid var(--line-strong); border-radius:var(--radius);
  padding:var(--s4);
  box-shadow:0 18px 48px rgb(45 41 33 / .18);
  font-size:var(--fs-s);
  opacity:0; transform:translateY(-.75rem);
  transition:opacity .24s ease, transform .24s ease;
  pointer-events:none;
}
.toast.is-on{ opacity:1; transform:none; pointer-events:auto }
.toast-bild{ width:4rem; aspect-ratio:3/4; overflow:hidden; border:var(--line-w) solid var(--line); line-height:0 }
.toast-bild img{ width:100%; height:100%; object-fit:cover; display:block }
.toast-text{ display:flex; flex-direction:column; gap:.2rem; min-width:0 }
.toast-kopf{ display:flex; align-items:center; gap:var(--s2); color:var(--moss); font-weight:600;
             font-size:var(--fs-xs); letter-spacing:var(--ls-caps); text-transform:uppercase }
.toast-name{ font-weight:500; font-size:var(--fs-body); line-height:1.3 }
.toast-meta{ color:var(--ink-soft) }
.toast-zu{
  border:0; background:none; cursor:pointer; color:var(--muted);
  font-size:1.35rem; line-height:1; padding:.1rem .3rem; margin:-.2rem -.3rem 0 0;
}
.toast-zu:hover{ color:var(--ink) }
.toast-knoepfe{ grid-column:1 / -1; display:flex; gap:var(--s2) }
.toast-knoepfe .btn{ flex:1; min-height:2.75rem; font-size:var(--fs-s); padding-inline:var(--s3) }
.btn-leise{ background:transparent; color:var(--ink); border:var(--line-w) solid var(--line-strong) }
.btn-leise:hover{ border-color:var(--ink) }
@media (min-width:720px){
  .toast{ left:auto; right:var(--s6); top:var(--s6); width:24rem }
}

/* ---- Warenkorb: Bild | Name, Groesse, Menge | Preis ------------------- */
.cart-row{
  grid-template-columns:5.5rem minmax(0,1fr) auto;
  grid-template-areas:"bild info preis" "bild tools preis";
  gap:var(--s2) var(--s5); padding:var(--s5) 0; align-items:start;
}
.cart-thumb{ grid-area:bild; width:5.5rem }
.cart-info{ grid-area:info }
.cart-name a{ color:inherit; text-decoration:none }
.cart-name a:hover{ text-decoration:underline; text-underline-offset:.2em }
.cart-tools{ grid-area:tools; margin-top:var(--s2) }
.cart-preis{ grid-area:preis; font-weight:600; font-size:var(--fs-lead); white-space:nowrap }
.cart-del{ border:0; background:none; color:var(--muted); cursor:pointer; font:inherit;
           font-size:var(--fs-s); text-decoration:underline; text-underline-offset:.2em;
           min-height:2.75rem }
.cart-del:hover{ color:var(--accent) }
@media (max-width:519px){
  .cart-row{ grid-template-columns:4.5rem minmax(0,1fr); grid-template-areas:"bild info" "bild preis" "tools tools" }
  .cart-thumb{ width:4.5rem }
  .cart-preis{ font-size:var(--fs-body) }
}
.cart-sum{ background:var(--surface); border:var(--line-w) solid var(--line); padding:var(--s5) }
@media (min-width:900px){
  .cart-layout{ grid-template-columns:minmax(0,1fr) 22rem; gap:var(--s12); align-items:start }
  .cart-layout .cart-zeilen{ grid-column:1; grid-row:1; border-top:var(--line-w) solid var(--line) }
  .cart-layout .cart-sum{ grid-column:2; grid-row:1; position:sticky; top:var(--s6) }
}

/* ---- Kasse: Eingaben links, Bestellung rechts --------------------------
   Eine schmale Spalte mit nackten Linien wirkte leer und die Summe stand
   ganz unten. Jetzt wie in jedem guten Shop: rechts immer sichtbar, was man
   bestellt und was es kostet. */
.checkout{ max-width:none }
@media (min-width:1000px){
  .checkout{ max-width:64rem }
  .checkout .page-title{ text-align:left }
  .form.kasse-raster{
    display:grid; grid-template-columns:minmax(0,1fr) 22rem;
    gap:var(--s12); align-items:start;
  }
  .kasse-rechts{ position:sticky; top:var(--s6) }
}
.checkout .field{ margin-bottom:var(--s4) }
.kasse-links, .kasse-rechts{ display:flex; flex-direction:column; gap:var(--s2); min-width:0 }
.kasse-rechts{ gap:var(--s4) }
.kasse-rechts .summary{ order:-1; margin:0 }
.checkout .block-title{ text-align:left; font-size:var(--fs-h3) }

/* Felder als Kasten statt nackter Linie: man sieht, wo man tippt. */
.checkout .input{
  border:var(--line-w) solid var(--line-strong); border-radius:var(--radius);
  background:var(--surface); padding:0 var(--s4); min-height:var(--field-h);
  font-size:var(--fs-body);
}
.checkout textarea.input{ padding:var(--s3) var(--s4); min-height:6rem }
.checkout .input:hover{ border-color:var(--ink-soft) }
.checkout .input:focus, .checkout .input:focus-visible{
  border:var(--line-w2) solid var(--accent); padding-inline:calc(var(--s4) - 1px); outline:none;
}
.checkout .is-bad .input{ border-color:var(--accent) }

/* Knopf fuer die СДЭК-Karte: sah aus wie Text. */
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  width:100%; min-height:var(--field-h);
  background:transparent; color:var(--ink);
  border:var(--line-w) solid var(--ink); border-radius:var(--radius);
  font:inherit; font-weight:500; cursor:pointer;
}
.btn-secondary:hover{ background:var(--ink); color:var(--surface) }
.btn-secondary svg{ width:1.1rem; height:1.1rem; flex:0 0 auto }
#cdek-chosen:empty{ display:none }
#cdek-chosen{ padding:var(--s3) var(--s4); background:color-mix(in srgb, var(--moss) 10%, var(--surface));
              border-left:3px solid var(--moss); font-size:var(--fs-s) }

/* ---- Fuss: eine ruhige Zeile Verweise, nichts bricht um ---------------- */
.site-foot{ padding-block:var(--s10) var(--s6) }
.foot-nav{ display:flex; flex-wrap:wrap; gap:0 var(--s6); align-content:start }
.foot-link{ white-space:nowrap; min-height:2.5rem }
@media (min-width:900px){
  .foot-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:start }
  .foot-nav{ justify-content:flex-end; column-gap:var(--s8) }
}

/* Preise und kurze Bezeichnungen brechen nicht mitten durch ("2 500 / ₽"). */
.cart-sum .cart-sum-row > :first-child{ white-space:nowrap }
#kasse-uebersicht .cart-sum-row > :first-child{ min-width:0 }
.cart-sum-row > :last-child{ text-align:right }
.cart-sum-row strong, .cart-sum-row > :last-child:not(.muted){ white-space:nowrap }
.cart-sum-row{ gap:var(--s4) }
/* Der Hauptbereich fuellt die Hoehe in der Farbe seines Inhalts -- sonst liegt
   unter kurzen Seiten ein Streifen in anderer Farbe. */
body > main{ display:flex; flex-direction:column }
body > main > :last-child{ flex:1 0 auto }