/* ============================================================
   FLORENTINO — Streetwear Shop Mockup (no functionality)
   Modern, clean streetwear-editorial look. Dark, sharp, minimal
   ornamentation — bold type and real space do the talking.
   ============================================================ */

/* ============================================================
   SCHRIFTEN — lokal ausgeliefert, NICHT über fonts.googleapis.com.
   Ein Einbinden von dort überträgt die Besucher-IP an Google und ist
   ohne Einwilligung ein DSGVO-Verstoß (LG München I, 3 O 17493/20).
   Dateien und Lizenzen: ../fonts/  (siehe README.md dort)

   unicode-range sorgt dafür, dass latin-ext nur geladen wird, wenn eine
   Seite wirklich Zeichen daraus braucht — deutsche Umlaute liegen in latin.
   ============================================================ */

/* Work Sans — Variable Font, deckt 400–900 mit einer Datei ab */
@font-face{
  font-family:'Work Sans';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../fonts/worksans-var-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:'Work Sans';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../fonts/worksans-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Anton — nur 400, für die grossen Headlines */
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/anton-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:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Permanent Marker — Zitate/Akzente, gibt es nur als latin */
@font-face{
  font-family:'Permanent Marker';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/permanentmarker-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{
  --black:#0a0908;
  --near-black:#131110;
  --panel:#17140f;
  --panel-2:#1c1815;
  --line: rgba(247,241,228,.12);
  --line-strong: rgba(247,241,228,.22);

  --wine:#7c0f24;
  --wine-bright:#c3172f;
  --wine-dark:#3a0812;

  --teal:#1f4548;
  --teal-bright:#3a8b92;
  --teal-dark:#122c2e;

  --cream:#f7f1e4;
  --cream-dim:#ddd3bf;
  --cream-faint:#a89a80;

  --shadow-sm: 0 6px 16px rgba(0,0,0,.35);
  --shadow-md: 0 18px 40px rgba(0,0,0,.4);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.5);

  /* Harte Versatzschatten statt Weichzeichner — das Element sitzt auf der
     Seite wie ein aufgeklebter Aufkleber, nicht wie ein schwebendes Objekt. */
  --offset-xs: 3px 3px 0 var(--wine-bright);
  --offset-sm: 4px 4px 0 var(--wine-bright);
  --offset-md: 6px 6px 0 var(--wine-bright);
  --offset-teal: 4px 4px 0 var(--teal-bright);
  --offset-cream: 4px 4px 0 var(--cream);

  /* Schräglagen für Sticker und Badges */
  --tilt-a: -3.5deg;
  --tilt-b: 2.5deg;
  --tilt-c: -6deg;

  --font-display:'Anton', sans-serif;      /* big headlines only */
  --font-alt:'Work Sans', sans-serif;      /* everything you must actually read */
  --font-script:'Permanent Marker', cursive;
  --font-body:'Work Sans', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:auto;
  /* verhindert, dass iOS im Querformat die Schrift aufbläst */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  position:relative;
  overflow-x:clip;
}
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
img{ max-width:100%; height:auto; display:block; }

/* Hintergrundbilder werden per Default bis in die Border-Box gemalt. Wo der
   Rahmen durchscheinend ist (--line = 12 % Creme), blitzt an der Kante das
   ungedimmte Bild durch — Abdunkel-Overlays liegen auf der Padding-Box und
   reichen dort nicht hin. padding-box schneidet das Bild am Rahmen ab. */
.coming-soon,
.page-banner,
.statement,
.pdp-main,
.pdp-thumbs div,
.cart-item .thumb,
.mini-cart-row .thumb,
.search-hit-media{
  background-clip:padding-box;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,select{ font-family:inherit; }

:focus-visible{
  outline:2px solid var(--wine-bright);
  outline-offset:2px;
}
/* Maus-/Touch-Klicks bekommen keinen Ring, Tastatur schon */
:focus:not(:focus-visible){ outline:none; }

.wrap{
  max-width:1240px; margin:0 auto; position:relative;
  /* 18px auf dem Handy, 32px ab Tablet — ohne eigene Breakpoints */
  padding:0 clamp(18px, 4vw, 32px);
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  /* negativ statt positiv: Anton rueckt zusammen und wird zur Wand */
  letter-spacing:-.5px;
  /* nie unter 1.0 — sonst stossen Umlautpunkte an die Zeile darueber */
  line-height:1.02;
  margin:0;
  color:var(--cream);
}
.script{ font-family:var(--font-script); text-transform:none; letter-spacing:0; }

.eyebrow{
  font-family:var(--font-alt);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2.5px;
  font-size:12px;
  color:var(--wine-bright);
}

/* ---------- sticker-badges: schräg geklebt, harter Versatz ---------- */
.badge, .tape{
  position:absolute;
  font-family:var(--font-alt);
  font-weight:800;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  background:var(--cream);
  color:var(--black);
  padding:9px 15px;
  z-index:5;
  white-space:nowrap;
  border-radius:0;
  transform:rotate(var(--tilt-a));
  box-shadow:var(--offset-xs);
}
.badge.wine, .tape.wine{ background:var(--wine-bright); color:var(--cream); box-shadow:var(--offset-cream); }
.badge.teal, .tape.teal{ background:var(--teal-bright); color:var(--black); box-shadow:var(--offset-xs); }
.badge.outline, .tape.outline{
  background:var(--black); border:2px solid var(--cream); color:var(--cream); box-shadow:var(--offset-xs);
}
/* zweiter Sticker auf derselben Fläche kippt in die Gegenrichtung */
.badge.two, .tape.two, .badge:nth-of-type(even), .tape:nth-of-type(even){ transform:rotate(var(--tilt-b)); }

.halftone{ position:relative; }
.halftone::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.45;
  background-image:radial-gradient(rgba(247,241,228,.09) 1.4px, transparent 1.4px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* ---------- buttons — klotzig, mit Druckpunkt ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-alt);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:15px;
  padding:16px 30px;
  border:2px solid var(--cream);
  background:var(--wine-bright);
  border-color:var(--cream);
  color:var(--cream);
  box-shadow:var(--offset-cream);
  transition:transform .1s ease, box-shadow .1s ease, background-color .15s ease, color .15s ease;
  white-space:nowrap;
}
/* Hover hebt an, Klick drueckt den Button in seinen Schatten */
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--cream); }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--cream); }
.btn.ghost{ background:transparent; box-shadow:var(--offset-sm); }
.btn.ghost:hover{ background:var(--cream); color:var(--black); box-shadow:6px 6px 0 var(--wine-bright); }
.btn.dark{ background:var(--black); box-shadow:var(--offset-sm); }
.btn.dark:hover{ background:var(--cream); color:var(--black); box-shadow:6px 6px 0 var(--wine-bright); }
.btn.block{ width:100%; }
.btn.sm{ padding:11px 18px; font-size:13px; box-shadow:var(--offset-xs); }
.btn[disabled]{ opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---------- topbar / marquee — lauter, als Band gedacht ---------- */
.marquee{
  background:var(--wine-bright);
  color:var(--cream);
  overflow:hidden;
  white-space:nowrap;
  position:relative;
  border-bottom:3px solid var(--cream);
}
.marquee .bar{ height:0; }
.marquee .track{
  display:inline-block;
  padding:12px 0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:15px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  animation:scroll 26s linear infinite;
}
.marquee span{ padding:0 22px; color:var(--cream); }
.marquee span::after{ content:"★"; margin-left:22px; color:var(--black); font-size:11px; vertical-align:middle; }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- header ---------- */
header.site{
  background:var(--near-black);
  border-bottom:3px solid var(--cream);
  position:sticky; top:0; z-index:100;
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  /* nur vertikal setzen — sonst überschreibt die Kurzform das Seiten-Padding von .wrap */
  padding-top:18px; padding-bottom:18px;
  gap:24px;
}
.logo{
  font-family:var(--font-display);
  font-size:22px;
  letter-spacing:1px;
  color:var(--cream);
  line-height:1;
  display:inline-flex;
  align-items:center;
  transition:transform .15s ease;
}
/* das Logo kippt beim Drüberfahren kurz an */
.logo:hover{ transform:rotate(var(--tilt-b)); }
.logo img{ height:26px; width:auto; display:block; }
.logo span{ color:var(--wine-bright); }

nav.main-nav{ display:flex; gap:26px; align-items:center; }
nav.main-nav a{
  font-family:var(--font-alt);
  font-weight:800;
  font-size:13px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--cream-dim);
  padding:7px 9px;
  border-bottom:0;
  transition:color .12s ease, background-color .12s ease, transform .12s ease;
}
/* Hover legt einen Block hinter die Schrift statt einer Unterstreichung */
nav.main-nav a:hover, nav.main-nav a.active{
  color:var(--black);
  background:var(--cream);
  transform:rotate(var(--tilt-b));
}

/* ---------- main nav: dropdowns ---------- */
.nav-item{ position:relative; display:flex; align-items:center; gap:5px; }
.sub-toggle{
  display:none;
  background:none; border:0; padding:0;
  color:var(--cream-dim); cursor:pointer;
  line-height:0;
}
.nav-item.has-sub > a{ padding-right:14px; }
.nav-item.has-sub::after{
  content:"";
  position:absolute; right:0; top:50%;
  width:5px; height:5px;
  margin-top:-4px;
  border-right:1.5px solid var(--cream-faint);
  border-bottom:1.5px solid var(--cream-faint);
  transform:rotate(45deg);
  transition:border-color .15s ease;
  pointer-events:none;
}
.nav-item.has-sub:hover::after{ border-color:var(--wine-bright); }
.sub-nav{
  display:none;
  position:absolute; top:100%; left:-18px;
  min-width:220px;
  padding:10px 0;
  background:var(--panel);
  border:2px solid var(--cream);
  box-shadow:var(--offset-sm);
  z-index:120;
}
.nav-item.has-sub:hover .sub-nav,
.nav-item.has-sub:focus-within .sub-nav{ display:block; }
nav.main-nav .sub-nav a{
  display:block;
  padding:9px 18px;
  font-size:12px;
  letter-spacing:1.2px;
  border-bottom:0;
  border-left:2px solid transparent;
  color:var(--cream-dim);
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
nav.main-nav .sub-nav a:hover{
  color:var(--cream);
  background:var(--panel-2);
  border-left-color:var(--wine-bright);
  /* im Dropdown kein Kippen — das ist den Hauptpunkten vorbehalten */
  transform:none;
}
.header-actions{ display:flex; align-items:center; gap:16px; }
.icon-btn{
  position:relative;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--cream);
  background:transparent;
  padding:0;
  color:var(--cream);
  transition:transform .1s ease, box-shadow .1s ease, background-color .12s ease, color .12s ease;
}
.icon-btn:hover{
  background:var(--cream); color:var(--black);
  transform:translate(-2px,-2px);
  box-shadow:var(--offset-sm);
}
.icon-btn:active{ transform:translate(0,0); box-shadow:none; }
.cart-count{
  position:absolute; top:-9px; right:-9px;
  background:var(--wine-bright); color:var(--cream);
  font-family:var(--font-alt); font-weight:800; font-size:10px;
  min-width:20px; height:20px; padding:0 4px;
  border-radius:0;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--cream);
  transform:rotate(var(--tilt-b));
}

/* ---------- breadcrumb ---------- */
.breadcrumb{
  padding:18px 0;
  font-size:12px;
  font-weight:600;
  color:var(--cream-faint);
  text-transform:uppercase;
  letter-spacing:1px;
}
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 0; }
.breadcrumb a:hover{ color:var(--wine-bright); }
.breadcrumb .sep{ margin:0 8px; color:var(--cream-faint); opacity:.5; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:clamp(420px, 72vh, 620px);
  min-height:clamp(420px, 72dvh, 620px);
  display:flex;
  align-items:flex-end;
  background-size:cover;
  background-position:center 18%;
  border-bottom:3px solid var(--cream);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,9,8,.92) 4%, rgba(10,9,8,.5) 38%, rgba(10,9,8,.28) 78%);
  z-index:1;
}
.hero-content{ position:relative; z-index:2; padding-top:64px; padding-bottom:68px; width:100%; }
.hero h1{
  /* bis 140px — die Zeile soll die Seite fuellen, nicht hoeflich drinstehen */
  font-size:clamp(52px, 11vw, 140px);
  line-height:1.0;
  letter-spacing:-2px;
  color:var(--cream);
  /* bricht bewusst ueber die linke Raster-Kante hinaus */
  margin-left:-.06em;
}
.hero h1 em{
  font-style:normal;
  color:var(--wine-bright);
  -webkit-text-stroke:2px var(--wine-bright);
}
.hero p{
  max-width:500px;
  font-size:18px;
  font-weight:600;
  color:var(--cream);
  margin:22px 0 32px;
  /* Textblock sitzt auf einem Balken statt frei zu schweben */
  border-left:4px solid var(--wine-bright);
  padding-left:16px;
}
.hero-ctas{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; position:relative; }
/* Auf die Rasterkante setzen statt auf 0 — durch Drehung und Versatzschatten
   ragen die Sticker sonst aus dem Viewport und wirken angeschnitten. */
.hero .tape, .hero .badge{ top:34px; left:clamp(18px, 4vw, 32px); }
.hero .tape.two, .hero .badge.two{ top:34px; left:auto; right:clamp(18px, 4vw, 32px); }

/* ---------- sections ---------- */
section{ padding:96px 0; position:relative; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:48px; flex-wrap:wrap; position:relative; z-index:2;
  /* harte Kante unter jeder Sektionsueberschrift */
  border-bottom:3px solid var(--cream);
  padding-bottom:20px;
}
.section-head h2{
  font-size:clamp(34px, 5.2vw, 68px);
  letter-spacing:-1.5px;
  line-height:1.0;
}
.section-head .lead{
  color:var(--cream);
  font-weight:600;
  max-width:380px;
  font-size:15px;
  /* Lead kippt leicht gegen die Ueberschrift */
  transform:rotate(var(--tilt-b));
  background:var(--wine-bright);
  padding:10px 14px;
  box-shadow:var(--offset-cream);
}

.stripe{ background:var(--panel); border-top:3px solid var(--cream); border-bottom:3px solid var(--cream); }
.stripe.teal{ background:var(--teal-dark); }
.stripe.wine{ background:var(--wine-dark); }

/* ---------- category cards (home) ---------- */
.cat-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:18px;
  position:relative; z-index:2;
}
.cat-card{
  position:relative; aspect-ratio:3/4; overflow:hidden; display:block;
  border:2px solid var(--cream);
  transition:transform .15s ease, box-shadow .15s ease;
}
/* jede zweite Kachel sitzt tiefer — das Raster franst absichtlich aus */
.cat-card:nth-child(even){ margin-top:34px; }
.cat-card .img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .4s ease;
}
.cat-card .img::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.88) 8%, rgba(0,0,0,.05) 55%);
}
.cat-card .tag{
  position:absolute; left:18px; bottom:16px; z-index:2;
  font-family:var(--font-display);
  font-size:clamp(24px, 3vw, 38px);
  letter-spacing:-1px;
  line-height:1;
  text-transform:uppercase;
  color:var(--cream);
}
.cat-card .count{
  position:absolute; right:14px; top:14px; z-index:2;
  font-family:var(--font-alt);
  font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--black); background:var(--cream);
  padding:5px 9px;
  transform:rotate(var(--tilt-a));
}
.cat-card:hover{ transform:translate(-4px,-4px); box-shadow:var(--offset-md); }
.cat-card:hover .img{ transform:scale(1.06); }

/* ---------- product grid ---------- */
/* Vorher: gap:1px auf farbigem Grund, die Karten bildeten eine fugenlose
   Tabelle. Jetzt ist jede Karte ein eigenes Objekt mit Rahmen — nur so
   funktionieren Versatz und harter Schatten. */
.prod-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:18px;
  position:relative; z-index:2;
  background:none;
}
.prod-card{
  background:var(--panel);
  border:2px solid var(--cream);
  display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
/* versetztes Raster */
.prod-card:nth-child(even){ margin-top:28px; }
.prod-card:hover{
  transform:translate(-4px,-4px);
  box-shadow:var(--offset-md);
  position:relative; z-index:3;
}
.prod-media{
  position:relative;
  aspect-ratio:1/1.1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border-bottom:2px solid var(--cream);
}
.prod-media > svg{ width:44%; height:44%; opacity:.9; }
.prod-media img{ width:100%; height:100%; object-fit:cover; }
.prod-badge{
  position:absolute; top:12px; left:12px;
  font-family:var(--font-alt);
  font-weight:800;
  font-size:10px; letter-spacing:1.2px; text-transform:uppercase;
  padding:6px 11px;
  background:var(--wine-bright); color:var(--cream);
  border-radius:0;
  transform:rotate(var(--tilt-c));
  box-shadow:var(--offset-cream);
}
.prod-badge.soldout{ background:var(--cream-faint); color:var(--black); box-shadow:var(--offset-xs); }
.prod-badge.new{ background:var(--teal-bright); color:var(--black); box-shadow:var(--offset-xs); }
.prod-info{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.prod-info .cat{
  font-size:10px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--black); background:var(--teal-bright);
  align-self:flex-start;
  padding:3px 8px;
}
.prod-info h3{
  font-family:var(--font-display); font-weight:400;
  font-size:22px; letter-spacing:-.4px; text-transform:uppercase;
  color:var(--cream); line-height:1.05;
}
.prod-price{ display:flex; align-items:baseline; gap:10px; margin-top:2px; }
/* Ersparnis unter dem Preis.
   Der äussere div trägt width:100% und erzwingt damit im umbrechenden
   Flex-Row von .pdp-price eine eigene Zeile (in der Spalte .prod-info stört
   das nicht). Sichtbar ist nur der innere span — so bleibt der Badge so
   breit wie sein Text statt über die ganze Karte zu laufen. */
.price-saving{ width:100%; line-height:1; }
.price-saving span{
  display:inline-block;
  background:var(--teal-bright);
  color:var(--black);
  font-family:var(--font-alt);
  font-weight:800;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:0;
  white-space:nowrap;
  transform:rotate(var(--tilt-b));
  box-shadow:var(--offset-xs);
}
.pdp-price .price-saving span{ font-size:14px; padding:8px 13px; letter-spacing:1.2px; }
.prod-price .now{ font-family:var(--font-alt); font-weight:800; font-size:18px; color:var(--cream); }
.prod-price .old{ font-size:13px; font-weight:600; color:var(--cream-faint); text-decoration:line-through; }
.prod-add{
  margin-top:auto;
  border:2px solid var(--cream);
  background:transparent;
  color:var(--cream);
  font-family:var(--font-alt);
  font-weight:800;
  letter-spacing:1px; text-transform:uppercase;
  padding:12px; font-size:12px;
  transition:transform .1s ease, box-shadow .1s ease, background-color .12s ease, color .12s ease;
}
.prod-add:hover{
  background:var(--cream); color:var(--black);
  transform:translate(-2px,-2px);
  box-shadow:var(--offset-xs);
}
.prod-add:active{ transform:translate(0,0); box-shadow:none; }

/* flat colour blocks behind product icon art */
.swatch-wine{ background:linear-gradient(155deg, var(--wine-dark), var(--wine)); }
.swatch-teal{ background:linear-gradient(155deg, var(--teal-dark), var(--teal)); }
.swatch-black{ background:linear-gradient(155deg, #0d0c0a, #201c19); }
.swatch-cream{ background:linear-gradient(155deg, #2a251f, #3a332a); }

/* ---------- quote / brand statement ---------- */
.statement{
  position:relative;
  padding:140px 0;
  background-size:cover; background-position:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.statement{ border-top:3px solid var(--cream); border-bottom:3px solid var(--cream); }
.statement::before{ content:""; position:absolute; inset:0; background:rgba(10,9,8,.72); }
.statement .wrap{ position:relative; z-index:1; text-align:center; }
.statement p{
  font-family:var(--font-script);
  font-size:clamp(28px,4vw,48px);
  color:var(--cream);
  max-width:800px;
  margin:0 auto;
  line-height:1.25;
}
.statement .by{
  display:inline-block; margin-top:26px;
  font-family:var(--font-alt);
  font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--black); background:var(--cream);
  padding:7px 14px;
  transform:rotate(var(--tilt-a));
  box-shadow:var(--offset-xs);
}

/* ---------- footer ---------- */
footer.site{
  background:var(--near-black);
  border-top:3px solid var(--cream);
  padding:72px 0 24px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid var(--line);
}
.foot-grid h4{
  display:inline-block;
  font-family:var(--font-alt);
  font-weight:800;
  font-size:12px; letter-spacing:1.5px;
  color:var(--black); background:var(--cream);
  padding:5px 11px;
  margin-bottom:18px;
  text-transform:uppercase;
  transform:rotate(var(--tilt-b));
}
.foot-grid li{ margin-bottom:11px; }
.foot-grid a{ color:var(--cream-dim); font-size:14px; font-weight:600; }
/* dynamisches Hauptmenü in der Footer-Spalte: gleiche Optik wie die Listen daneben */
.foot-menu{ display:flex; flex-direction:column; align-items:flex-start; }
.foot-menu .nav-item{ display:block; width:auto; margin-bottom:11px; }
.foot-grid a:hover{ color:var(--wine-bright); }
.foot-brand .logo{ font-size:24px; }
.foot-brand .logo img{ height:30px; }

.foot-brand p{ color:var(--cream-dim); font-weight:500; font-size:14px; max-width:280px; margin-top:16px; }
.newsletter{ display:flex; margin-top:18px; border:2px solid var(--cream); box-shadow:var(--offset-sm); }
.newsletter input{
  flex:1; background:transparent; border:0; padding:13px 14px;
  color:var(--cream); font-size:14px; outline:none;
}
.newsletter button{
  background:var(--wine-bright); border:0; color:var(--cream);
  font-family:var(--font-alt); font-weight:800; letter-spacing:1.2px; padding:0 22px;
  text-transform:uppercase; font-size:12px;
  transition:background-color .12s ease, color .12s ease;
}
.newsletter button:hover{ background:var(--cream); color:var(--black); }
.social-row{ display:flex; gap:10px; margin-top:20px; }
.social-row a{
  width:36px; height:36px; border:2px solid var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-alt); font-size:11px; font-weight:800;
  transition:transform .1s ease, box-shadow .1s ease, background-color .12s ease, color .12s ease;
}
.social-row a:hover{
  background:var(--cream); color:var(--black);
  transform:translate(-2px,-2px); box-shadow:var(--offset-xs);
}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:22px; font-size:12px; font-weight:500; color:var(--cream-faint);
  flex-wrap:wrap; gap:10px;
}
.foot-bottom a{ margin-left:16px; }
.foot-bottom a:hover{ color:var(--wine-bright); }

/* ---------- generic page banner ---------- */
.page-banner{
  position:relative;
  padding:80px 0 56px;
  background-size:cover; background-position:center;
  border-bottom:1px solid var(--line);
}
.page-banner::before{ content:""; position:absolute; inset:0; background:rgba(9,8,7,.7); }
.page-banner .wrap{ position:relative; z-index:1; }
.page-banner h1{ font-size:clamp(38px,5.4vw,64px); }
.page-banner p{ color:var(--cream-dim); font-weight:500; margin-top:12px; font-size:16px; max-width:560px; }

/* ---------- filter bar ---------- */
.filter-bar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  padding:24px 0; border-bottom:1px solid var(--line); margin-bottom:40px;
}
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ cursor:pointer; white-space:nowrap; }
.chip{
  border:1px solid var(--line-strong);
  padding:8px 15px; font-size:12px; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
  color:var(--cream-dim);
}
.chip.active{ background:var(--wine-bright); border-color:var(--wine-bright); color:var(--cream); font-weight:700; }
.chip:hover{ border-color:var(--cream); color:var(--cream); }
.sort{
  display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--cream-faint);
}
.sort select{
  background:var(--panel); color:var(--cream); border:1px solid var(--line-strong); padding:9px 12px; font-weight:500;
}

.pagination{ display:flex; justify-content:center; gap:6px; margin-top:56px; }
.pagination a{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); font-family:var(--font-alt); font-weight:600; font-size:13px;
}
.pagination a.active{ background:var(--wine-bright); border-color:var(--wine-bright); color:var(--cream); }
.pagination a:hover{ border-color:var(--cream); }

/* ---------- product detail ---------- */
.pdp{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:flex-start; position:relative; z-index:2; }
.pdp-gallery{ position:sticky; top:96px; }
.pdp-main{
  position:relative;
  border:1px solid var(--line);
  aspect-ratio:4/5; overflow:hidden; background-size:cover; background-position:center 18%;
}
.pdp-thumbs{
  display:flex; gap:8px; margin-top:12px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pdp-thumbs::-webkit-scrollbar{ display:none; }
.pdp-thumbs div{
  width:76px; height:76px; border:1px solid var(--line); cursor:pointer;
  flex:none; scroll-snap-align:start;
  background-size:cover; background-position:center;
  transition:border-color .15s ease;
}
.pdp-thumbs div.active{ border-color:var(--wine-bright); }
.pdp-info .eyebrow{ margin-bottom:10px; display:block; }
.pdp-info h1{ font-size:clamp(32px,3.8vw,44px); line-height:1.05; }
.stars{ color:var(--wine-bright); letter-spacing:2px; font-size:14px; margin:14px 0 4px; font-weight:600; }
.stars span{ color:var(--cream-faint); font-size:13px; font-weight:500; margin-left:8px; }
.pdp-price{ display:flex; align-items:baseline; gap:14px; margin:16px 0 5px; flex-wrap:wrap; }
.pdp-price .now{ font-family:var(--font-alt); font-weight:800; font-size:34px; color:var(--wine-bright); }
.pdp-price .old{ font-size:22px; font-weight:500; color:var(--cream-faint); text-decoration:line-through; }
.pdp-price .badge{
  position:static;
  font-size:10px; font-weight:700; letter-spacing:.5px; padding:5px 9px; border:1px solid var(--teal-bright); background:transparent; color:var(--teal-bright); text-transform:uppercase; border-radius:2px;
}
.pdp-info p{ font-weight:500; color:var(--cream-dim); }
.opt-block{ margin-bottom:28px; }
.opt-label{ display:flex; justify-content:space-between; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--cream-dim); margin-bottom:12px; }
.opt-label a{ color:var(--wine-bright); font-size:11px; font-weight:600; text-decoration:underline; }
.swatches{ display:flex; gap:10px; }
.swatches .sw{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--black); outline:2px solid transparent; outline-offset:2px; cursor:pointer;
}
.swatches .sw.active{ outline-color:var(--cream); }
.sizes{ display:flex; gap:8px; flex-wrap:wrap; }
.sizes button{
  min-width:50px; padding:11px 6px; border:1px solid var(--line-strong); background:transparent; color:var(--cream);
  font-family:var(--font-alt); font-weight:600; font-size:13px;
}
.sizes button.active{ border-color:var(--wine-bright); background:var(--wine-bright); color:var(--cream); }
.sizes button[disabled]{ opacity:.3; text-decoration:line-through; cursor:not-allowed; }
.qty-row{ display:flex; align-items:center; gap:18px; margin-bottom:24px; }
.qty-row .opt-label{ margin:0 !important; }
.stepper{ display:flex; align-items:center; border:1px solid var(--line-strong); }
.stepper button{ width:38px; height:42px; background:transparent; border:0; color:var(--cream); font-size:16px; font-weight:600; }
.stepper span{ width:36px; text-align:center; font-family:var(--font-alt); font-weight:700; }
.pdp-ctas{ display:flex; gap:12px; margin-bottom:14px; }
.pdp-note{ font-size:13px; font-weight:500; color:var(--cream-dim); display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.pdp-note b{ color:var(--cream); }

.tabs{ margin-top:48px; border-top:1px solid var(--line); }
.tab-heads{
  display:flex; gap:0; border-bottom:1px solid var(--line);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tab-heads::-webkit-scrollbar{ display:none; }
.tab-heads div{
  flex:none; white-space:nowrap; cursor:pointer;
  padding:16px 20px 16px 0; margin-right:24px; font-family:var(--font-alt); font-weight:600; font-size:13px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--cream-faint); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab-heads div.active{ color:var(--cream); border-color:var(--wine-bright); }
.tab-body{ padding:26px 0; color:var(--cream-dim); font-weight:500; font-size:15px; max-width:640px; }
.tab-body ~ .tab-body{ display:none; }
.tab-body ul{ margin-top:12px; }
.tab-body li{ margin-bottom:8px; padding-left:18px; position:relative; }
.tab-body li::before{ content:"—"; position:absolute; left:0; color:var(--wine-bright); }

/* ---------- product photo / illustrated tee mockup ---------- */
.tee-mock{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.tee-shape-wrap{ position:relative; width:58%; aspect-ratio:210/230; }
.tee-shape{
  display:block; width:100%; height:100%;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.45));
}
.tee-shape path{ fill:currentColor; }
.tee-shape path.tee-shade{ fill:#000; opacity:.14; }
.tee-shape.tee-black{ color:#211d19; }
.tee-shape.tee-wine{ color:#5c1322; }
.tee-shape.tee-olive{ color:#3a3a24; }
.tee-tag{
  position:absolute; top:11%; left:50%; transform:translateX(-50%);
  font-family:var(--font-alt); font-weight:700; font-size:6.5px; letter-spacing:1.4px;
  color:rgba(247,241,228,.4); text-transform:uppercase;
  border:1px solid rgba(247,241,228,.28); padding:2px 6px;
}
.tee-print{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-42%);
  text-align:center; width:80%;
}
.tee-print .word{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:15px; letter-spacing:1px; color:var(--cream); line-height:1;
  display:block;
}
.tee-print .sub{
  display:block; margin-top:5px;
  font-family:var(--font-alt); font-weight:700; letter-spacing:1.5px;
  font-size:5.5px; color:var(--cream-dim); text-transform:uppercase;
}
.tee-print.vertical{ writing-mode:vertical-rl; text-orientation:upright; width:auto; text-align:center; transform:translate(-50%,-50%); top:50%; }
.tee-print.vertical .word{ font-size:13px; letter-spacing:4px; }
.tee-print.vertical .sub{ writing-mode:horizontal-tb; display:inline-block; margin-top:8px; }

.pdp-main.mock{ display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#1c1917,#221d18); }
.pdp-main.mock .tee-shape-wrap{ width:50%; }
.pdp-main.mock .tee-print .word{ font-size:30px; letter-spacing:2px; }
.pdp-main.mock .tee-print.vertical .word{ font-size:20px; letter-spacing:7px; }
.pdp-main.mock .tee-print .sub{ font-size:11px; letter-spacing:2.5px; margin-top:10px; }
.pdp-main.mock .tee-tag{ font-size:9px; padding:3px 8px; }
.pdp-thumbs .tee-shape-wrap{ width:70%; }

/* ---------- homepage product spotlight ---------- */
.spotlight{ display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; align-items:center; position:relative; z-index:2; }
.spotlight-media{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  background:linear-gradient(160deg,#211c17,#2a2419);
  display:flex; align-items:center; justify-content:center;
}
.spotlight-media .tee-shape-wrap{ width:46%; }
.spotlight-media .tee-print .word{ font-size:26px; letter-spacing:2px; }
.spotlight-media .tee-print.vertical .word{ font-size:16px; letter-spacing:5px; }
.spotlight-media .tee-print .sub{ font-size:9px; letter-spacing:2px; margin-top:8px; }
.spotlight-media .tee-tag{ font-size:8px; padding:3px 7px; }
.spotlight-copy p{ font-weight:500; color:var(--cream-dim); max-width:480px; margin:16px 0 26px; }
.spotlight-copy .pdp-price{ margin:0 0 26px; }

/* ---------- filter: hidden state ---------- */
.prod-card.is-hidden{ display:none; }

/* ---------- empty cart ---------- */
.empty-cart{
  text-align:center; padding:70px 20px; border:1px dashed var(--line-strong);
}
.empty-cart p{ color:var(--cream-dim); font-weight:500; margin:14px 0 26px; }
.empty-cart .script{ font-size:36px; color:var(--wine-bright); }

/* ---------- cart ---------- */
.cart-layout{ display:grid; grid-template-columns:1.7fr 1fr; gap:56px; align-items:flex-start; position:relative; z-index:2; }
/* Grid-Spalten schrumpfen per Default nicht unter ihre Inhaltsbreite
   (min-width:auto) — auf schmalen Phones lief der Checkout dadurch ueber. */
.cart-layout > *{ min-width:0; }
.form-card, .summary-card{ min-width:0; }
.cart-table{ width:100%; border-collapse:collapse; }
.cart-table thead th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--cream-faint);
  border-bottom:1px solid var(--line); padding-bottom:14px;
}
.cart-table td{ border-bottom:1px solid var(--line); padding:22px 8px; vertical-align:middle; }
.cart-item{ display:flex; gap:16px; align-items:center; }
.cart-item .thumb{ width:72px; height:84px; border:1px solid var(--line); background-size:cover; background-position:center; flex:none; }
.cart-item h4{ font-family:var(--font-alt); font-weight:700; font-size:15px; letter-spacing:0; margin-bottom:6px; text-transform:none; }
.cart-item .meta{ font-size:12px; font-weight:500; color:var(--cream-faint); text-transform:uppercase; letter-spacing:.4px; }
.cart-price{ font-family:var(--font-alt); font-weight:700; font-size:15px; color:var(--cream); white-space:nowrap; }
.cart-remove{ background:none; border:0; color:var(--cream-faint); font-size:18px; }
.cart-remove:hover{ color:var(--wine-bright); }

.promo{ display:flex; gap:10px; margin-top:28px; }
.promo input{ flex:1; background:var(--panel); border:1px solid var(--line-strong); color:var(--cream); padding:13px 14px; font-weight:500; }

.summary-card{
  background:var(--panel); border:1px solid var(--line); padding:30px;
}
.summary-card h3{ font-family:var(--font-alt); font-weight:700; text-transform:none; font-size:19px; margin-bottom:22px; }
.summary-row{ display:flex; justify-content:space-between; font-size:14px; font-weight:500; color:var(--cream-dim); margin-bottom:13px; }
.summary-row.total{ color:var(--cream); font-family:var(--font-alt); font-weight:800; font-size:20px; border-top:1px solid var(--line); padding-top:18px; margin-top:8px; }
.summary-row.total span:last-child{ color:var(--wine-bright); }
.trust-row{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.trust-row span{ font-size:11px; font-weight:600; letter-spacing:.2px; color:var(--cream-faint); border:1px solid var(--line); padding:6px 10px; }

/* ---------- checkout ---------- */
.steps{ display:flex; align-items:center; gap:10px; margin-bottom:48px; flex-wrap:wrap; position:relative; z-index:2; }
.steps .step{ display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--cream-faint); }
.steps .num{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-alt); font-weight:700; font-size:12px;
}
.steps .step.done .num, .steps .step.active .num{ border-color:var(--wine-bright); background:var(--wine-bright); color:var(--cream); }
.steps .step.active{ color:var(--cream); }
.steps .line{ width:32px; height:1px; background:var(--line-strong); }

.form-card{ background:var(--panel); border:1px solid var(--line); padding:32px; margin-bottom:24px; position:relative; z-index:2; }
.form-card h3{ font-family:var(--font-alt); font-weight:700; text-transform:none; font-size:18px; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* display:grid schlaegt sonst das hidden-Attribut des Browsers — die
   Kartenfelder blieben bei PayPal stehen und wurden als Pflicht geprueft. */
.form-grid[hidden]{ display:none; }
.form-grid.full{ grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.span2{ grid-column:1 / -1; }
.field label{ font-size:11px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--cream-faint); }
.field input, .field select{
  background:var(--near-black); border:1px solid var(--line-strong); color:var(--cream);
  padding:13px 14px; font-size:14px; font-weight:500; outline:none;
}
.field input:focus, .field select:focus{ border-color:var(--wine-bright); }

.pay-options{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pay-opt{
  border:1px solid var(--line-strong); padding:16px 10px; text-align:center;
  font-family:var(--font-alt); font-weight:600; font-size:12px; letter-spacing:.2px; color:var(--cream-dim);
}
.pay-opt.active{ border-color:var(--wine-bright); color:var(--cream); background:rgba(195,23,47,.08); }

.mini-cart-row{ display:flex; gap:12px; align-items:center; margin-bottom:18px; }
.mini-cart-row .thumb{ width:48px; height:56px; border:1px solid var(--line); background-size:cover; background-position:center; flex:none; }
.mini-cart-row .name{ font-size:13px; font-weight:600; color:var(--cream); }
.mini-cart-row .meta{ font-size:11px; font-weight:500; color:var(--cream-faint); }
.mini-cart-row .price{ margin-left:auto; font-family:var(--font-alt); font-weight:700; font-size:13px; }

/* ---------- checkout: schlanke Hülle ---------- */
/* Im Checkout gibt es bewusst keine Navigation. Was bleibt, ist ein Logo
   ohne Link, ein Sicherheitshinweis und genau ein bewusster Rückweg. */
.checkout-head .header-row{ gap:16px; }
.checkout-head-meta{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:flex-end; }
.secure-note{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-alt); font-weight:700;
  font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:var(--teal-bright);
}
.back-link{
  font-family:var(--font-alt); font-weight:700;
  font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:var(--cream-faint);
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.back-link:hover{ color:var(--cream); }

.checkout-foot{ padding:32px 0 28px; }
.checkout-foot .trust-row{ margin:0 0 20px; justify-content:center; }
.foot-legal{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px 24px; flex-wrap:wrap;
  padding-top:18px; border-top:1px solid var(--line);
  font-size:12px; font-weight:500; color:var(--cream-faint);
}
.foot-legal nav{ display:flex; gap:20px; flex-wrap:wrap; }
.foot-legal a{ color:var(--cream-faint); }
.foot-legal a:hover{ color:var(--cream); }

/* ---------- checkout: Kopfzeile statt irreführender Schrittanzeige ---------- */
/* Vorher standen dort drei Schritte, obwohl alles auf einer Seite passiert —
   das lässt mehr Arbeit erwarten, als tatsächlich kommt. */
.checkout-head-row{ margin-bottom:30px; position:relative; z-index:2; }
.checkout-head-row h1{ font-size:clamp(30px, 4vw, 46px); letter-spacing:-1px; }
.checkout-reassure{
  margin:10px 0 0;
  font-size:15px; font-weight:600;
  color:var(--cream-dim);
}

/* ---------- checkout: Bestellübersicht ---------- */
.summary-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:20px; }
.summary-head h3{ margin:0; }
.summary-count{
  font-family:var(--font-alt); font-weight:700;
  font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:var(--cream-faint);
  white-space:nowrap;
}
.summary-sums{ border-top:1px solid var(--line); margin-top:8px; padding-top:16px; }
.mini-cart-empty{ font-size:14px; font-weight:500; color:var(--cream-faint); margin:0 0 8px; }

.mini-cart-row{ align-items:flex-start; padding-bottom:16px; border-bottom:1px solid var(--line); }
.mini-cart-body{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.mini-cart-qty{ display:flex; align-items:center; gap:12px; margin-top:4px; flex-wrap:wrap; }
.mini-cart-qty .stepper{ border:1px solid var(--line-strong); }
.mini-cart-qty .stepper button{ width:30px; height:30px; font-size:15px; }
.mini-cart-qty .stepper span{ width:28px; font-size:13px; }
.mini-cart-remove{
  background:none; border:0; padding:0;
  font-family:var(--font-alt); font-weight:600;
  font-size:11px; letter-spacing:.4px;
  color:var(--cream-faint);
  border-bottom:1px solid currentColor;
}
.mini-cart-remove:hover{ color:var(--wine-bright); }

.field-note{ font-size:11px; font-weight:500; color:var(--cream-faint); }
.opt-hint{ font-weight:500; text-transform:none; letter-spacing:0; }
.opt-sub{ font-weight:500; font-size:11px; color:var(--cream-faint); }
.opt-price{ font-family:var(--font-alt); font-weight:700; white-space:nowrap; }
.shipping-opt{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  text-align:left; padding:15px 18px;
}
.method-note{
  margin:14px 0 0; font-size:13px; font-weight:500; color:var(--cream-dim);
}
.method-note[hidden]{ display:none; }
.order-note{ font-size:12px; color:var(--cream-faint); margin-top:14px; text-align:center; }

/* Pflichtfeld leer: markieren statt nach dem Absenden scheitern lassen */
.field.has-error input, .field.has-error select{ border-color:var(--wine-bright); }
.field.has-error label{ color:var(--wine-bright); }

/* ---------- checkout: Sticky-Leiste (Handy) ---------- */
.checkout-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  display:none;
  align-items:center; justify-content:space-between; gap:16px;
  padding:12px clamp(14px, 4vw, 24px);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--near-black);
  border-top:2px solid var(--cream);
}
.checkout-bar[hidden]{ display:none; }
.checkout-bar-sum{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.checkout-bar-sum .k{
  font-family:var(--font-alt); font-weight:700;
  font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--cream-faint);
}
.checkout-bar-sum .v{ font-family:var(--font-alt); font-weight:800; font-size:18px; color:var(--cream); }

/* Toast mit Rückgängig-Schaltfläche */
.toast-undo{ display:flex; align-items:center; gap:16px; }
.toast-undo button{
  background:none; border:0; padding:0;
  font-family:var(--font-alt); font-weight:800;
  font-size:12px; letter-spacing:1px; text-transform:uppercase;
  color:var(--wine-bright);
  border-bottom:2px solid currentColor;
  white-space:nowrap;
}

/* ---------- success ---------- */
.success{
  min-height:66vh;
  min-height:66dvh; display:flex; align-items:center; justify-content:center; text-align:center;
  position:relative; overflow:hidden;
}
.success .wrap{ position:relative; z-index:1; }
.stamp{
  display:inline-block; border:1.5px solid var(--teal-bright); color:var(--teal-bright);
  font-family:var(--font-alt); font-weight:700; font-size:13px; letter-spacing:2.5px; text-transform:uppercase;
  padding:10px 22px; margin-bottom:28px;
}
.success h1{ font-size:clamp(42px,7vw,88px); line-height:.98; margin-bottom:20px; }
.success p.lead{ font-size:18px; font-weight:500; color:var(--cream-dim); max-width:520px; margin:0 auto 36px; }
.order-box{
  display:inline-flex; gap:42px; background:var(--panel); border:1px solid var(--line);
  padding:26px 42px; margin-bottom:42px; flex-wrap:wrap; justify-content:center;
}
.order-box div{ text-align:left; }
.order-box .k{ font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--cream-faint); margin-bottom:5px; }
.order-box .v{ font-family:var(--font-alt); font-weight:700; font-size:16px; color:var(--cream); }
.success-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- coming soon ---------- */
.coming-soon{
  position:relative;
  display:flex; align-items:center;
  min-height:76vh; min-height:76dvh;
  padding:88px 0;
  text-align:center;
  background-size:cover; background-position:center 20%;
  border-bottom:1px solid var(--line);
}
.coming-soon::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,9,8,.94) 6%, rgba(10,9,8,.72) 55%, rgba(10,9,8,.6) 100%);
}
.coming-soon .wrap{ position:relative; z-index:1; }
.coming-soon .stamp{ border-color:var(--wine-bright); color:var(--wine-bright); }
.coming-soon h1{
  font-size:clamp(42px, 7.5vw, 92px);
  /* Nicht enger: bei .95 stossen in Anton die Umlautpunkte einer Folgezeile
     (ÄRGER) an die Zeile darueber. 1.06 laesst sie gerade frei. */
  line-height:1.06;
  margin-bottom:22px;
}
.coming-soon h1 em{ font-style:normal; color:var(--wine-bright); }
.coming-soon .lead{
  font-size:18px; font-weight:500; color:var(--cream-dim);
  max-width:560px; margin:0 auto;
}
.coming-soon .newsletter{
  max-width:440px;
  margin:30px auto 0;
}
.coming-soon .social-row{ justify-content:center; margin-top:26px; }
.coming-note{
  font-size:12px; font-weight:500; color:var(--cream-faint);
  margin:12px 0 0;
}

.countdown{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
  max-width:480px;
  margin:38px auto 4px;
}
.countdown[hidden]{ display:none; }
.count-box{
  border:1px solid var(--line-strong);
  background:rgba(10,9,8,.55);
  padding:16px 6px;
}
.count-num{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(26px, 4.2vw, 44px);
  line-height:1;
  color:var(--cream);
  font-variant-numeric:tabular-nums;
}
.count-label{
  display:block; margin-top:9px;
  font-family:var(--font-alt); font-weight:700;
  font-size:10px; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--cream-faint);
}
.countdown-done{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  margin:38px 0 4px;
}
.countdown-done[hidden]{ display:none; }
.countdown-done .script{
  font-family:var(--font-script);
  font-size:clamp(26px, 4vw, 40px);
  color:var(--wine-bright);
}

/* ---------- suche ---------- */
.search-overlay{ position:fixed; inset:0; z-index:200; display:none; }
.search-overlay.open{ display:block; }
.search-scrim{
  position:absolute; inset:0;
  background:rgba(10,9,8,.82);
  -webkit-backdrop-filter:blur(2px);
          backdrop-filter:blur(2px);
}
.search-panel{
  position:relative;
  background:var(--near-black);
  border-bottom:1.5px solid var(--wine-bright);
  box-shadow:var(--shadow-lg);
  max-height:100vh; max-height:100dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  animation:searchIn .18s ease;
}
@keyframes searchIn{
  from{ transform:translateY(-14px); opacity:0; }
  to{ transform:none; opacity:1; }
}

.search-form{
  display:flex; align-items:center; gap:14px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.search-form > svg{ color:var(--cream-faint); flex:none; }
.search-input{
  flex:1; min-width:0;
  background:transparent; border:0; outline:none;
  color:var(--cream);
  font-family:var(--font-alt);
  font-weight:700;
  font-size:clamp(20px, 3vw, 30px);
  letter-spacing:-.2px;
  padding:4px 0;
}
.search-input::placeholder{ color:var(--cream-faint); font-weight:600; }
/* native Kreuze der Browser raus — wir haben einen eigenen Button */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }

.search-clear, .search-close{
  flex:none;
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--cream-faint);
  font-family:var(--font-alt); font-weight:700;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  padding:9px 12px;
  transition:border-color .15s ease, color .15s ease;
}
.search-clear:hover, .search-close:hover{ border-color:var(--wine-bright); color:var(--wine-bright); }
.search-clear[hidden]{ display:none; }

.search-body{ padding:18px 0 34px; }
.search-status{
  font-family:var(--font-alt); font-weight:600;
  font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--cream-faint);
  margin-bottom:14px;
}
.search-results{ display:flex; flex-direction:column; gap:2px; }

.search-hit{
  display:flex; align-items:center; gap:16px;
  padding:10px 12px;
  border:1px solid transparent;
  transition:background-color .12s ease, border-color .12s ease;
}
.search-hit:hover{ background:var(--panel); border-color:var(--line-strong); }
/* Tastatur-Auswahl muss deutlich vom blossen Hover unterscheidbar sein */
.search-hit.is-active{
  background:var(--panel-2);
  border-color:var(--line-strong);
  box-shadow:inset 3px 0 0 var(--wine-bright);
}
.search-hit-media{
  width:52px; height:60px; flex:none;
  border:1px solid var(--line);
  background-size:cover; background-position:center;
}
.search-hit-text{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.search-hit-name{
  font-family:var(--font-alt); font-weight:700; font-size:15px;
  color:var(--cream);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.search-hit-name mark{ background:transparent; color:var(--wine-bright); font-weight:800; }
.search-hit-cat{
  font-size:11px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--cream-faint);
}
.search-hit-price{
  margin-left:auto; flex:none;
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--font-alt); font-weight:700; font-size:15px;
  color:var(--wine-bright);
  white-space:nowrap;
}
.search-hit-price .old{
  font-size:12px; font-weight:500; color:var(--cream-faint); text-decoration:line-through;
}

.search-suggest{ display:flex; flex-wrap:wrap; gap:8px; }
.search-suggest button{
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--cream-dim);
  font-family:var(--font-alt); font-weight:600;
  font-size:12px; letter-spacing:.4px; text-transform:uppercase;
  padding:9px 15px;
  transition:border-color .15s ease, color .15s ease;
}
.search-suggest button:hover{ border-color:var(--cream); color:var(--cream); }

.search-empty{ padding:22px 0 8px; }
.search-empty .script{
  font-family:var(--font-script);
  font-size:26px; color:var(--wine-bright);
  display:block; margin-bottom:8px;
}
.search-empty p{ color:var(--cream-dim); font-weight:500; margin:0; font-size:15px; }

.search-skeleton{ display:flex; flex-direction:column; gap:2px; }
.search-skeleton i{
  display:block; height:82px;
  background:linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%);
  background-size:200% 100%;
  animation:searchShimmer 1.1s linear infinite;
}
@keyframes searchShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* ---------- mobile nav toggle ---------- */
.nav-toggle{
  display:none;
  width:36px; height:36px;
  border:1px solid var(--line-strong);
  background:transparent;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ display:block; width:16px; height:1.5px; background:var(--cream); transition:transform .2s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- toasts ---------- */
.toast-wrap{
  position:fixed; right:20px; bottom:20px; z-index:1000;
  display:flex; flex-direction:column; gap:10px;
  pointer-events:none;
}
.toast{
  font-family:var(--font-alt); font-weight:600; font-size:13px;
  background:var(--cream); color:var(--black);
  box-shadow:var(--shadow-md);
  padding:14px 20px;
  max-width:320px;
  transform:translateX(120%);
  transition:transform .25s ease;
}
.toast.wine{ background:var(--wine-bright); color:var(--cream); }
.toast.show{ transform:translateX(0); }

@keyframes cartBump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.3); } 100%{ transform:scale(1); } }
.icon-btn.bump{ animation:cartBump .35s ease; }

/* ---------- responsive ---------- */
/* ---------- legal / static content pages ---------- */
.legal-content{ max-width:760px; }
.legal-content h2{
  font-family:var(--font-alt); font-weight:800; text-transform:none;
  font-size:24px; letter-spacing:0; margin:44px 0 14px;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{
  font-family:var(--font-alt); font-weight:700; text-transform:none;
  font-size:16px; letter-spacing:0; margin:26px 0 10px; color:var(--cream);
}
.legal-content p{ color:var(--cream-dim); font-size:15px; line-height:1.75; margin:0 0 14px; }
.legal-content ul{ padding-left:20px; list-style:disc; margin:0 0 14px; }
.legal-content li{ color:var(--cream-dim); font-size:15px; line-height:1.75; margin-bottom:6px; }
.legal-content a{ color:var(--wine-bright); text-decoration:underline; }
.legal-content table{ width:100%; border-collapse:collapse; margin:0 0 20px; }
.legal-content table td, .legal-content table th{ border:1px solid var(--line); padding:10px 12px; font-size:14px; color:var(--cream-dim); text-align:left; vertical-align:top; }
.legal-content table th{ color:var(--cream); font-weight:700; }

.placeholder-note{
  background:var(--panel); border:1px solid var(--wine-bright);
  padding:16px 20px; font-size:13px; line-height:1.6; color:var(--cream-dim);
  margin-bottom:44px;
}
.placeholder-note b{ color:var(--wine-bright); }

/* ---------- price / VAT microcopy ---------- */
.price-note{ font-size:12px; font-weight:500; color:var(--cream-faint); margin-top:2px; }
.grid-price-note{ font-size:12px; font-weight:500; color:var(--cream-faint); margin-top:20px; text-align:right; }

/* ---------- reviews ---------- */
.reviews{ margin-top:48px; border-top:1px solid var(--line); padding-top:36px; }
.reviews-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:8px; }
.reviews-head h3{ font-family:var(--font-alt); font-weight:800; text-transform:none; font-size:19px; margin:0; }
.reviews-disclosure{ font-size:12px; color:var(--cream-faint); max-width:560px; line-height:1.6; margin-bottom:28px; }
.review-item{ padding:22px 0; border-top:1px solid var(--line); }
.review-item:first-of-type{ border-top:none; }
.review-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.review-stars{ color:var(--wine-bright); font-size:13px; letter-spacing:1px; }
.review-name{ font-family:var(--font-alt); font-weight:700; font-size:14px; color:var(--cream); }
.review-meta{ font-size:12px; color:var(--cream-faint); }
.review-body{ font-size:14px; color:var(--cream-dim); line-height:1.65; }
.review-verified{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--teal-bright); letter-spacing:.3px; margin-top:8px; }

/* ---------- checkout consent ---------- */
.check-row{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--cream-dim); line-height:1.5; margin:20px 0; }
.check-row input{ margin-top:3px; width:16px; height:16px; accent-color:var(--wine-bright); flex:none; }
.check-row a{ color:var(--wine-bright); text-decoration:underline; }

/* ---------- checkout: lighter, higher-trust surface ---------- */
.checkout-light{ background:var(--cream); color:var(--black); }
.checkout-light .steps .step{ color:rgba(10,9,8,.5); }
.checkout-light .steps .num{ border-color:rgba(10,9,8,.25); }
.checkout-light .steps .step.done .num, .checkout-light .steps .step.active .num{ background:var(--wine-bright); border-color:var(--wine-bright); color:#fff; }
.checkout-light .steps .step.active{ color:var(--black); }
.checkout-light .steps .line{ background:rgba(10,9,8,.15); }

.checkout-light .form-card{ background:#fff; border-color:rgba(10,9,8,.12); }
.checkout-light .form-card h3{ color:var(--black); border-bottom-color:rgba(10,9,8,.12); }
.checkout-light .opt-label{ color:rgba(10,9,8,.6); }
.checkout-light .field label{ color:rgba(10,9,8,.55); }
.checkout-light .field input, .checkout-light .field select{ background:#fff; border-color:rgba(10,9,8,.2); color:var(--black); }
.checkout-light .field input::placeholder{ color:rgba(10,9,8,.35); }
.checkout-light .field input:focus, .checkout-light .field select:focus{ border-color:var(--wine-bright); }

.checkout-light .pay-opt{ border-color:rgba(10,9,8,.2); color:rgba(10,9,8,.65); background:#fff; cursor:pointer; }
.checkout-light .pay-opt.active{ border-color:var(--wine-bright); background:rgba(195,23,47,.06); color:var(--black); }

.checkout-light .summary-card{ background:#fff; border-color:rgba(10,9,8,.12); }
.checkout-light .summary-card h3{ color:var(--black); }
.checkout-light .summary-row{ color:rgba(10,9,8,.6); }
.checkout-light .summary-row.total{ color:var(--black); border-top-color:rgba(10,9,8,.12); }
.checkout-light .price-note{ color:rgba(10,9,8,.5); }
.checkout-light .check-row{ color:rgba(10,9,8,.65); }
.checkout-light .trust-row span{ color:rgba(10,9,8,.5); border-color:rgba(10,9,8,.15); }
.checkout-light .mini-cart-row .name{ color:var(--black); }
.checkout-light .mini-cart-row .meta{ color:rgba(10,9,8,.5); }
.checkout-light .mini-cart-row .price{ color:var(--black); }
.checkout-light .mini-cart-row{ border-bottom-color:rgba(10,9,8,.12); }
.checkout-light .mini-cart-empty{ color:rgba(10,9,8,.5); }
.checkout-light .summary-count{ color:rgba(10,9,8,.5); }
.checkout-light .summary-sums{ border-top-color:rgba(10,9,8,.12); }
.checkout-light .checkout-head-row h1{ color:var(--black); }
.checkout-light .checkout-reassure{ color:rgba(10,9,8,.62); }
.checkout-light .field-note, .checkout-light .opt-sub, .checkout-light .order-note{ color:rgba(10,9,8,.5); }
.checkout-light .method-note{ color:rgba(10,9,8,.65); }
.checkout-light .mini-cart-remove{ color:rgba(10,9,8,.5); }
.checkout-light .mini-cart-remove:hover{ color:var(--wine-bright); }
.checkout-light .mini-cart-qty .stepper{ border-color:rgba(10,9,8,.2); }
.checkout-light .mini-cart-qty .stepper button,
.checkout-light .mini-cart-qty .stepper span{ color:var(--black); }
.checkout-light .field.has-error input, .checkout-light .field.has-error select{ border-color:var(--wine-bright); }

/* generic click-to-select for any group of .pay-opt cards */
.pay-opt{ cursor:pointer; }

/* B2B: company fields hidden until "Firma" is chosen */
.company-field{ display:none; }
.company-field.show{ display:flex; }

/* ============================================================
   RESPONSIVE
   1100  grosse Tablets / kleine Laptops
    980  Nav klappt ein, zweispaltige Layouts
    768  Tablet hoch / grosse Phones
    600  Phone
    380  kleine Phones
   Dazu: Touch-Geraete, reduzierte Bewegung, Druck.
   ============================================================ */

/* ---------- 1100: enger werdende Desktop-Raster ---------- */
@media (max-width: 1100px){
  .prod-grid{ grid-template-columns:repeat(3,1fr); }
  .prod-card:nth-child(even){ margin-top:20px; }
  .cat-card:nth-child(even){ margin-top:24px; }
  .pdp{ gap:44px; }
  .spotlight{ gap:48px; }
  .cart-layout{ gap:36px; }
  nav.main-nav{ gap:24px; }
  section{ padding:80px 0; }
  .statement{ padding:110px 0; }
}

/* ---------- 980: Navigation klappt ein ---------- */
@media (max-width: 980px){
  nav.main-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--near-black); border-bottom:1px solid var(--line);
    padding:8px clamp(18px, 4vw, 32px) 18px;
    /* laengere Menues duerfen scrollen statt aus dem Viewport zu laufen */
    max-height:calc(100vh - 100%);
    max-height:calc(100dvh - 100%);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  nav.main-nav.open{ display:flex; }
  nav.main-nav a{ padding:12px 10px; width:100%; border-bottom:1px solid var(--line); }
  /* im aufgeklappten Menue nicht kippen — das verrutscht die Trennlinien */
  nav.main-nav a:hover, nav.main-nav a.active{ transform:none; }
  .nav-toggle{ display:flex; }

  /* Menuepunkte werden zu Accordion-Zeilen */
  .nav-item{ width:100%; flex-wrap:wrap; gap:0; }
  .nav-item.has-sub{ border-bottom:1px solid var(--line); }
  .nav-item.has-sub > a{ flex:1; padding-right:0; border-bottom:0; }
  .nav-item.has-sub::after{ display:none; }
  .sub-toggle{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-right:-12px;
  }
  .sub-toggle svg{ transition:transform .2s ease; }
  .nav-item.open .sub-toggle svg{ transform:rotate(180deg); }
  .nav-item.has-sub:hover .sub-nav,
  .nav-item.has-sub:focus-within .sub-nav{ display:none; }
  .sub-nav{
    position:static;
    width:100%;
    min-width:0;
    padding:0 0 8px;
    background:none;
    border:0;
    box-shadow:none;
  }
  .nav-item.open .sub-nav{ display:block; }
  nav.main-nav .sub-nav a{
    padding:10px 0 10px 16px;
    border-bottom:0;
    border-left:2px solid var(--line-strong);
  }
  nav.main-nav .sub-nav a:hover{ background:none; }

  /* Layout */
  .cat-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .prod-grid{ grid-template-columns:repeat(3,1fr); gap:14px; }
  .hero h1{ letter-spacing:-1px; margin-left:0; }
  .section-head{ padding-bottom:16px; margin-bottom:36px; }
  .pdp{ grid-template-columns:1fr; gap:36px; }
  .pdp-gallery{ position:static; }
  .cart-layout{ grid-template-columns:1fr; gap:32px; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .pay-options{ grid-template-columns:repeat(2,1fr); }
  .spotlight{ grid-template-columns:1fr; gap:36px; }
  .hero-content{ padding-top:48px; padding-bottom:52px; }
}

/* ---------- 768: Tablet hochkant / grosse Phones ---------- */
@media (max-width: 768px){
  section{ padding:64px 0; }
  .statement{ padding:88px 0; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .form-grid{ grid-template-columns:1fr; }
  .section-head{ margin-bottom:32px; }
  .section-head .lead{ max-width:none; }
  /* Der gekippte Lead-Block braucht in der schmalen Spalte geraden Stand */
  .section-head .lead{ transform:none; align-self:flex-start; }
  .pdp-info h1{ font-size:clamp(28px,6vw,38px); }
  .summary-card, .form-card{ padding:24px; }
  .tabs{ margin-top:36px; }
  .reviews{ margin-top:36px; }

  /* 16px verhindert, dass iOS beim Fokus ins Formular hineinzoomt */
  .field input, .field select,
  .newsletter input, .promo input, .sort select{
    font-size:16px;
  }
}

/* ---------- 600: Phone ---------- */
@media (max-width: 600px){
  section{ padding:52px 0; }
  .statement{ padding:72px 0; }
  .foot-grid{ grid-template-columns:1fr; gap:28px; padding-bottom:32px; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }
  .foot-bottom a{ margin-left:0; margin-right:16px; }
  .tape, .badge{ display:none; }
  .header-actions{ gap:10px; }
  .header-actions .icon-btn[title="Konto"]{ display:none; }

  .hero{ min-height:clamp(360px, 62vh, 480px); }
  .hero h1{ font-size:clamp(40px, 13vw, 62px); letter-spacing:-1px; }
  .hero p{ border-left-width:3px; padding-left:12px; }
  .hero p{ font-size:16px; margin:16px 0 24px; }
  .hero-ctas{ gap:10px; }
  .hero-ctas .btn{ flex:1 1 auto; }

  /* Kein Versatz mehr: bei zwei Spalten wirkt er wie ein Layoutfehler,
     nicht wie Absicht — und kostet nur Scrollweg. */
  .prod-card:nth-child(even){ margin-top:0; }
  .cat-card:nth-child(even){ margin-top:0; }
  .prod-grid, .cat-grid{ gap:10px; }
  /* Auf Touch gibt es keinen Hover — der harte Schatten kommt fest dran */
  .prod-card, .cat-card{ box-shadow:var(--offset-xs); }
  .prod-info{ padding:14px; gap:6px; }
  .prod-info h3{ font-size:17px; }
  .prod-info .cat{ font-size:9px; letter-spacing:1px; }
  .prod-add{ padding:10px; font-size:11px; }
  .cat-card .tag{ font-size:19px; left:16px; bottom:14px; }
  .cat-card .count{ right:12px; top:12px; }

  .btn{ padding:14px 22px; font-size:14px; }
  .page-banner{ padding:56px 0 40px; }
  .filter-bar{ padding:18px 0; margin-bottom:28px; }
  .pagination{ margin-top:36px; }

  /* Newsletter/Gutschein stapeln statt zu quetschen */
  .newsletter, .promo{ flex-direction:column; }
  /* gestapelt: Rahmen UND Schatten weg, sonst haengt der Versatzschatten
     an einem unsichtbaren Kasten. Input und Button tragen ihn selbst. */
  .newsletter{ border:0; box-shadow:none; gap:10px; }
  .newsletter input{ border:2px solid var(--cream); }
  .newsletter button{ padding:14px 20px; box-shadow:var(--offset-cream); }

  /* Warenkorb-Tabelle wird zur Kartenliste */
  .cart-table thead{ display:none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{ display:block; width:100%; }
  .cart-table tr{
    position:relative;
    border-bottom:1px solid var(--line);
    padding:18px 0;
  }
  .cart-table td{ border:0; padding:0; }
  .cart-table td + td{ margin-top:12px; }
  .cart-table td:last-child{
    position:absolute; top:18px; right:0; margin-top:0; width:auto;
  }
  .cart-remove{ padding:4px 6px; }

  .summary-card, .form-card{ padding:20px; }
  .order-box{ gap:24px; padding:20px 24px; width:100%; }
  .success-ctas .btn{ flex:1 1 auto; }
  .empty-cart{ padding:48px 16px; }
  .empty-cart .script{ font-size:28px; }

  .steps{ gap:8px; margin-bottom:32px; }
  .steps .line{ width:16px; }
  .steps .step{ font-size:11px; }

  /* Toast nutzt die volle Breite statt rechts zu kleben */
  .toast-wrap{ left:14px; right:14px; bottom:14px; }
  .toast{ max-width:none; }

  /* Coming Soon: enger, Countdown-Kaesten schmaler */
  .coming-soon{ padding:60px 0; min-height:0; }
  .coming-soon .lead{ font-size:16px; }
  .countdown{ gap:8px; }
  .count-box{ padding:12px 4px; }
  .count-label{ font-size:9px; letter-spacing:1.2px; }

  /* Checkout: Bestellleiste einblenden, Platz am Seitenende freihalten */
  .checkout-bar{ display:flex; }
  body.is-checkout{ padding-bottom:78px; }
  .checkout-head-meta{ gap:14px; }
  .secure-note{ font-size:10px; letter-spacing:.6px; }
  .foot-legal{ flex-direction:column; align-items:flex-start; }
  .foot-legal nav{ gap:14px; }
  .summary-card .btn.block{ font-size:14px; }

  /* Suche: Panel fuellt den Screen, Treffer kompakter */
  .search-panel{ min-height:100vh; min-height:100dvh; }
  .search-form{ gap:10px; padding:16px 0; }
  .search-form > svg{ width:18px; height:18px; }
  .search-close{ padding:9px 10px; }
  .search-hit{ gap:12px; padding:10px 8px; }
  .search-hit-media{ width:44px; height:52px; }
  .search-hit-name{ font-size:14px; }
  .search-hit-price{ font-size:14px; }
}

/* ---------- 380: kleine Phones ---------- */
@media (max-width: 380px){
  /* Produkte bleiben bewusst 2-spaltig — mehr Ware oberhalb der Falz.
     Die Kategorie-Kacheln sind dagegen gross und vertragen nur eine Spalte. */
  .cat-grid{ grid-template-columns:1fr; }
  .pay-options{ grid-template-columns:1fr; }
  .search-hit-price .old{ display:none; }
  .prod-info{ padding:11px; }
  .prod-card, .cat-card{ border-width:1.5px; box-shadow:none; }
  .prod-add{ padding:9px 4px; font-size:10px; letter-spacing:.2px; }
  .marquee .track{ font-size:11px; letter-spacing:1.8px; }
  .wrap{ padding:0 14px; }
}

/* ---------- Touch: groessere Trefferflaechen ---------- */
@media (pointer: coarse){
  .icon-btn, .nav-toggle{ width:44px; height:44px; }
  .pagination a{ width:44px; height:44px; }
  .social-row a{ width:40px; height:40px; }
  .stepper button{ width:44px; height:46px; }
  .sizes button{ min-width:52px; padding:14px 8px; }
  .swatches .sw{ width:36px; height:36px; }
  .chip{ padding:11px 16px; }
  .foot-grid li{ margin-bottom:4px; }
  .foot-grid li a{ display:inline-block; padding:7px 0; }
  .foot-menu .nav-item{ margin-bottom:4px; padding:7px 0; }
  .cart-remove{ min-width:44px; min-height:44px; }
  .tab-heads div{ padding-top:18px; padding-bottom:18px; }
  /* Auf Touch bleibt ein :hover nach dem Antippen haengen. Die Effekte
     werden deshalb neutralisiert — aber auf den Ruhezustand zurueck, nicht
     auf "gar nichts", sonst verschwinden die harten Schatten beim Tippen. */
  .prod-card:hover, .cat-card:hover{ transform:none; box-shadow:var(--offset-xs); }
  .cat-card:hover .img{ transform:none; }
  .btn:hover{ transform:none; box-shadow:var(--offset-cream); }
  .btn.ghost:hover, .btn.dark:hover{ box-shadow:var(--offset-sm); }
  .icon-btn:hover, .social-row a:hover, .prod-add:hover{ transform:none; box-shadow:none; }
  nav.main-nav a:hover{ transform:none; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .marquee .track{ animation:none; transform:none; }
}

/* ---------- Druck ---------- */
@media print{
  .marquee, header.site, footer.site, .nav-toggle, .toast-wrap, .prod-add, .btn{ display:none !important; }
  body{ background:#fff; color:#000; }
  body::after{ display:none; }
}