/* ==========================================================================
   FADN STORE · gemeinsame Styles für alle Seiten
   Announcement-Bar · Header (inkl. Overlay-Variante) · Mobiles Menü ·
   Buttons · Footer · Warenkorb-Drawer · Toast
   Standalone HTML/CSS/JS · deploybar (z. B. IONOS)
   ========================================================================== */

/* ---------- Schriften lokal (DSGVO: keine Verbindung zu Google-Servern) ----------
   Inter als Variable Font, selbst gehostet unter assets/fonts/.
   Dadurch werden beim Seitenaufruf keine IP-Adressen an Google übertragen. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-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;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-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;
}

/* ---------- Poppins · alle Überschriften ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-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; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins-800-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: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Space Grotesk · Überschriften und Fließtext ----------
   Die proportionale Schwester von Space Mono, gleiche Zeichnung, nur nicht
   dicktengleich. Dadurch wirken Überschriften, Fließtext und die Mono-Labels
   wie eine Familie statt wie zwei Schriften nebeneinander.
   Variable Font, eine Datei deckt 400 bis 700 ab. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-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: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-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;
}

/* ---------- Space Mono · Announcement, Header, Labels ---------- */
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-mono-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; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-mono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-mono-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: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-mono-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ======================================================================
     SCHRIFTEN — hier umstellen, nirgends sonst.
     --font-heading gilt für ALLE Überschriften der ganzen Seite.
     Eine andere Schrift einbauen heißt: Datei nach assets/fonts/ legen,
     oben ein @font-face ergänzen und hier den Namen eintragen. Fertig.
     ====================================================================== */
  /* Eine Familie in zwei Breiten: Space Grotesk für alles Gelesene,
     Space Mono für Labels. Poppins und Inter liegen weiter unter
     assets/fonts/ und sind oben als @font-face angemeldet — für einen
     Wechsel reicht es, hier den Namen zu tauschen. */
  --font-heading: "Space Grotesk", system-ui, sans-serif;  /* alle Überschriften */
  --font-ui: "Space Mono", ui-monospace, monospace;        /* Announcement, Header, Labels */
  --font-body: "Space Grotesk", system-ui, sans-serif;     /* Fließtext */

  /* Gewichte: nur diese drei werden benutzt, damit nichts auseinanderläuft. */
  --w-head: 600;      /* Überschriften */
  --w-strong: 500;    /* Hervorhebungen, Produktnamen */
  --w-body: 400;      /* Fließtext */

  /* ---------- Farben ---------- */
  --ink: #0b0b0b;          /* Schrift und dunkle Flächen */
  --paper: #e7e4dd;        /* Hintergrund, warmes Studio-Licht */
  --bone: #f4f1ea;         /* helle Schrift auf dunklem Grund */
  --grey: #dcd8d0;         /* dezente Flächen, Hover */
  --tile: #c9c7c2;         /* Bildhintergrund */
  --line: rgba(11, 11, 11, .14);
  --muted: #6c6a66;
  --red: #e4022b;          /* der einzige Akzent */
  --header-h: 66px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--w-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }

/* Alle Überschriften hängen an einer einzigen Variablen (siehe :root).
   Gewicht und Laufweite kommen ebenfalls von hier, damit keine Seite ihr
   eigenes 700 oder 800 mitbringt. */
h1, h2, h3, h4, h5, h6,
.pdp__title, .section-title, .item__name, .lab__card-name, .product__name, .tile__name {
  font-family: var(--font-heading);
  font-weight: var(--w-head);
  letter-spacing: -.015em;
  line-height: 1.15;
}
strong, b { font-weight: var(--w-strong); }

/* Kleine Labels im Monospace-Look — Announcement, Header, Buttons, Meta-Zeilen. */
.ui-mono {
  font-family: var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ==========================================================================
   KAMERA-CURSOR
   Ersetzt den Mauszeiger auf Geräten mit echter Maus: ein Sucherrahmen aus
   vier Ecken mit rotem Aufnahmepunkt. Über Überschriften, Produktnamen und
   dem Logo wird der Sucher groß und rot. Beim Klicken gibt es einen kurzen
   Auslöser. Auf Touchgeräten und bei "reduzierte Bewegung" bleibt der
   normale Systemzeiger.
   ========================================================================== */
/* Rahmen und Aufnahmepunkt sind zwei getrennte Elemente auf derselben Position.
   Grund: der Rahmen invertiert sich gegen den Hintergrund (mix-blend-mode).
   Läge der rote Punkt darin, würde er mitinvertiert. Außerdem schottet jedes
   Elternelement mit transform das Blending ab — deshalb sitzt der Blend-Modus
   direkt auf dem Element, das auch verschoben wird, und nicht auf einem Kind. */
.cursor-sq,
.cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 24px; height: 24px;
  pointer-events: none;
  opacity: 0;
  transition: width .28s cubic-bezier(.22, 1, .36, 1),
              height .28s cubic-bezier(.22, 1, .36, 1),
              opacity .2s ease;
}
.cursor-sq.is-on,
.cursor-dot.is-on { opacity: 1; }

/* Der Sucherrahmen: vier Ecken, kein durchgehender Rand.
   Weiß plus Differenz heißt: auf Dunklem und auf Bildern wird er weiß,
   auf dem hellen Papierton und auf Weiß wird er schwarz. */
.cursor-sq { mix-blend-mode: difference; }
.cursor-sq__c {
  position: absolute; width: 30%; height: 30%;
  border: 1.6px solid #fff;
  transition: border-color .2s ease, width .28s ease, height .28s ease;
}
.cursor-sq__c--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.cursor-sq__c--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.cursor-sq__c--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.cursor-sq__c--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Aufnahmepunkt, innen in der oberen rechten Ecke. */
.cursor-dot::after {
  content: "";
  position: absolute; top: 15%; right: 15%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--red);
  transition: width .25s ease, height .25s ease, opacity .2s ease;
}

/* über Links und Buttons: Sucher etwas größer */
.cursor-sq.is-link, .cursor-dot.is-link { width: 38px; height: 38px; }
/* über Überschriften, Produktnamen und Logo: großer roter Sucher */
.cursor-sq.is-head, .cursor-dot.is-head { width: 62px; height: 62px; }
/* rot statt invertiert — deshalb hier kein Blending */
.cursor-sq.is-head { mix-blend-mode: normal; }
.cursor-sq.is-head .cursor-sq__c { border-color: var(--red); width: 26%; height: 26%; }
.cursor-dot.is-head::after { width: 6px; height: 6px; }

/* Auslösen: der Sucher zuckt kurz zusammen. */
.cursor-sq.is-shot, .cursor-dot.is-shot { width: 16px; height: 16px; transition-duration: .07s; }
.cursor-dot.is-shot::after { opacity: .25; }

/* Zonen mit eigenem Zeiger.
   Über dem Magazin verschwindet der Sucher und es greift eine echte Hand:
   dort wird gezogen und geblättert, nicht fotografiert. Gesteuert über
   [data-cursor="hand"] am Element, siehe fadn.js. */
.cursor-sq.is-off, .cursor-dot.is-off { opacity: 0; }

/* Der Systemzeiger wird nur ausgeblendet, solange wirklich mit der Maus
   bedient wird. Die Klasse input-mouse setzt FADN.input in fadn.js aus dem
   pointerType des letzten Ereignisses, nicht aus der Bildschirmbreite.
   Auf einem Touch-Notebook heißt das: Maus bewegen blendet den Systemzeiger
   aus, antippen bringt ihn sofort zurück. */
html.has-sq-cursor.input-mouse,
html.has-sq-cursor.input-mouse body,
html.has-sq-cursor.input-mouse a,
html.has-sq-cursor.input-mouse button,
html.has-sq-cursor.input-mouse label { cursor: none; }
/* Eingabefelder behalten den Textcursor, sonst tippt es sich blind. */
html.has-sq-cursor.input-mouse input,
html.has-sq-cursor.input-mouse textarea,
html.has-sq-cursor.input-mouse select { cursor: auto; }

/* Greifzeiger in der Magazin-Zone, Knöpfe darin bleiben ein Zeigefinger. */
html.has-sq-cursor.input-mouse [data-cursor="hand"],
html.has-sq-cursor.input-mouse [data-cursor="hand"] * { cursor: grab; }
html.has-sq-cursor.input-mouse [data-cursor="hand"]:active,
html.has-sq-cursor.input-mouse [data-cursor="hand"] *:active { cursor: grabbing; }
html.has-sq-cursor.input-mouse [data-cursor="hand"] button,
html.has-sq-cursor.input-mouse [data-cursor="hand"] a { cursor: pointer; }

/* Auf Touch bleibt der Sucher grundsätzlich unsichtbar, auch wenn vorher
   eine Maus im Spiel war. */
html.input-touch .cursor-sq,
html.input-touch .cursor-dot { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .cursor-sq { display: none; }
}

/* Header-Hover: rote Naht, die von links einläuft. */
.stitch-link { position: relative; }
.stitch-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  background: repeating-linear-gradient(to right, var(--red) 0 6px, transparent 6px 11px);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.76, 0, .24, 1);
}
.stitch-link:hover::after,
.stitch-link.is-active::after { transform: scaleX(1); }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ---------- Announcement-Marquee ---------- */
.announce {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  min-height: 32px;
  align-items: center;
  position: relative;
  z-index: 45;
}
.announce__track {
  display: flex;
  flex: none;
  animation: marquee 40s linear infinite;
}
.announce__group { display: flex; align-items: center; flex: none; }
.announce__item {
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 0;
}
.announce__item::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(11, 11, 11, .25);
  margin: 0 34px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: grid;
  /* Navigation links in der Ecke · Logo mittig · Symbole rechts */
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "nav logo icons";
  align-items: center;
  padding: 13px clamp(18px, 4vw, 48px);
  gap: 18px;
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.site-header__logo { grid-area: logo; justify-self: center; }
.site-header__logo img { height: 32px; width: auto; display: block; }
.site-header__logo .logo--white { display: none; }

.site-header__nav {
  grid-area: nav;
  justify-self: start;
  display: flex;
  gap: clamp(14px, 2.2vw, 28px);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-header__nav a { position: relative; padding: 4px 0; color: inherit; }

.site-header__icons { grid-area: icons; display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.site-header__icons svg { width: 20px; height: 20px; display: block; }
.site-header__icons button,
.site-header__icons a { opacity: .85; transition: opacity .2s ease; position: relative; color: inherit; }
.site-header__icons button:hover,
.site-header__icons a:hover { opacity: 1; }

/* Warenkorb-Zähler */
.cart-count {
  position: absolute;
  top: -7px; right: -9px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  display: none;
}
.cart-count.is-visible { display: block; }

/* Hamburger (nur mobil sichtbar) */
.site-header__burger { grid-area: burger; display: none; justify-self: start; width: 26px; height: 26px; }
.site-header__burger svg { width: 26px; height: 26px; }

/* --- Header-Gruppe (Announce + Header) --- */
/* Beide Wrapper müssen aus dem Layout genommen werden, sonst klebt der Header
   nur innerhalb seines Elternelements — und das ist genauso hoch wie der Header
   selbst, wodurch sticky wirkungslos bleibt. Erst wenn auch #chromeTop auf
   display: contents steht, ist .site-header ein direktes Kind von <body> und
   klebt am Fensterrand. */
#chromeTop { display: contents; }
.header-group { display: contents; }

/* Startseite: Gruppe liegt transparent über dem Vollbild-Hero.
   Ganz oben alles weiß über dem Video; ab wenig Scroll wird sie solide. */
.header-group--overlay {
  display: block;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 45;
}
/* dezenter Scrim für Lesbarkeit der weißen Schrift über hellem Video;
   verschwindet, sobald der Header solide wird */
.header-group--overlay::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 260%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .42), transparent);
  pointer-events: none;
  z-index: -1;
  transition: opacity .35s ease;
}
.header-group--overlay.is-solid::before { opacity: 0; }
.header-group--overlay .announce {
  background: transparent;
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .3);
  transition: background .35s ease, color .35s ease;
}
.header-group--overlay .announce__item::after { background: rgba(255,255,255,.5); }
.header-group--overlay .site-header {
  position: static;
  background: transparent;
  border-bottom-color: transparent;
  color: #fff;
}
.header-group--overlay .site-header__logo .logo--black { display: none; }
.header-group--overlay .site-header__logo .logo--white { display: block; }

/* Solide-Zustand nach dem Scrollen (ab 10px) */
.header-group--overlay.is-solid .announce { background: var(--paper); color: var(--ink); border-bottom-color: var(--line); }
.header-group--overlay.is-solid .announce__item::after { background: rgba(0,0,0,.25); }
.header-group--overlay.is-solid .site-header {
  background: var(--paper);
  border-bottom-color: var(--line);
  color: var(--ink);
}
.header-group--overlay.is-solid .site-header__logo .logo--black { display: block; }
.header-group--overlay.is-solid .site-header__logo .logo--white { display: none; }

/* ---------- Schwarzer Button ---------- */
.fadn-btn {
  display: inline-block;
  width: 100%;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  transition: opacity .25s ease;
  cursor: pointer;
}
.fadn-btn:hover { opacity: .82; }
.fadn-btn--ghost { background: none; color: var(--ink); border: 1px solid var(--ink); }

/* ==========================================================================
   PRODUKTKARTE — eine Definition für die ganze Seite.
   Gilt für die Kollektion (.tile) und für die Switcher auf Startseite und
   Produktseite (.product). Beide sehen dadurch identisch aus. Wie viele
   Karten nebeneinander passen, regelt jede Seite selbst; Typografie,
   Nummer und Verhalten kommen von hier.
   ========================================================================== */
.tile__media,
.product__media {
  position: relative;
  background: var(--tile);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

/* Laufende Nummer, mix-blend-mode hält sie auf hellen wie dunklen Fotos lesbar */
.tile__num,
.product__num {
  position: absolute; top: 12px; left: 14px; z-index: 3;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em;
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}

.tile__info,
.product__info { padding: 12px 4px 20px; }

.tile__name,
.product__name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.tile__price,
.product__price {
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--ink);
  margin-top: 5px;
}
.tile__pricenote,
.product__pricenote {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- Mobiles Menü (Slide-in) ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
}
.mobile-menu.is-open { visibility: visible; pointer-events: auto; }
.mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .35s ease;
}
.mobile-menu.is-open .mobile-menu__overlay { opacity: 1; }
.mobile-menu__panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(82vw, 340px);
  background: var(--paper);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(-100%);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
  overflow-y: auto;
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.mobile-menu__top img { height: 30px; }
.mobile-menu__close { width: 30px; height: 30px; }
.mobile-menu__close svg { width: 24px; height: 24px; }
.mobile-menu__panel nav { display: flex; flex-direction: column; }
.mobile-menu__panel nav a {
  padding: 14px 0;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__panel nav a.is-active { color: var(--red); }

/* ---------- Warenkorb-Drawer ---------- */
.cart {
  position: fixed;
  inset: 0;
  z-index: 70;
  visibility: hidden;
  pointer-events: none;
}
.cart.is-open { visibility: visible; pointer-events: auto; }
.cart__overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .35s ease;
}
.cart.is-open .cart__overlay { opacity: 1; }
.cart__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(92vw, 420px);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}
.cart.is-open .cart__panel { transform: translateX(0); }
.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.cart__head h2 { font-size: 15px; font-weight: var(--w-head); letter-spacing: .1em; text-transform: uppercase; }
.cart__close { width: 28px; height: 28px; }
.cart__close svg { width: 22px; height: 22px; }
.cart__body { flex: 1; overflow-y: auto; padding: 12px 24px; }
.cart__empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: 14px; }
.cart__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cart__item img { width: 64px; height: 80px; object-fit: cover; background: var(--grey); }
.cart__item-name { font-size: 14px; font-weight: 600; }
.cart__item-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
/* Zusatzangaben einer Custom-Anfrage (Farbe, Platzierung, Motiv) */
.cart__item-note {
  font-size: 11.5px; line-height: 1.5; color: var(--muted);
  margin-top: 6px; padding-left: 9px; border-left: 2px solid var(--red);
}
.cart__item-price { font-size: 13.5px; margin-top: 4px; }
.cart__item-remove { font-size: 12px; color: var(--muted); text-decoration: underline; margin-top: 6px; }
.cart__item-remove:hover { color: var(--red); }
.cart__foot { padding: 18px 24px 24px; border-top: 1px solid var(--line); }
.cart__sum { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.cart__sum--ship { color: var(--muted); font-size: 13px; }
.cart__sum--total { font-weight: 700; font-size: 15px; padding-top: 8px; border-top: 1px solid var(--line); }
.cart__freehint { font-size: 11.5px; font-weight: 600; color: var(--ink); margin-top: 8px; }
.cart__note { font-size: 11.5px; line-height: 1.55; color: var(--muted); margin: 10px 0 0; }
.cart__note a { text-decoration: underline; text-underline-offset: 2px; }

/* Bestätigung vor dem Absenden der Anfrage */
.cart__consent { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); cursor: pointer; }
.cart__consent input { margin-top: 2px; width: 15px; height: 15px; flex: none; accent-color: var(--ink); cursor: pointer; }
.cart__consent a { text-decoration: underline; text-underline-offset: 2px; }
.fadn-btn:disabled { opacity: .4; cursor: not-allowed; }
.fadn-btn:disabled:hover { opacity: .4; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 24px);
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 4px;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(40px, 6vw, 70px) clamp(18px, 4vw, 48px) 28px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}
.site-footer__col h4 { font-family: var(--font-ui); letter-spacing: .12em;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
/* kurzer Strich unter der Spaltenüberschrift (wie im Shop) */
.site-footer__col h4::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: #6a6a6a;
  margin-top: 12px;
}
.site-footer__col a {
  display: block;
  font-size: 13.5px;
  color: #d0d0d0;
  margin-bottom: 12px;
  transition: color .2s ease;
}
/* Hover wie bei den Social-Icons: rot. */
.site-footer__col a:hover { color: var(--red); }
.site-footer__col p { font-size: 13.5px; color: #d0d0d0; max-width: 300px; }

/* Social-Icons als Kreise */
.site-footer__social-row { display: flex; gap: 12px; }
.site-footer__social-row a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin: 0;
  border: 1px solid #4a4a4a;
  border-radius: 999px;
  transition: border-color .25s ease, background .25s ease;
}
.site-footer__social-row a:hover { border-color: var(--red); background: rgba(228, 2, 43, .12); }
.site-footer__social-row svg { width: 19px; height: 19px; }

/* fadn-Logo rechts außen */
.site-footer__brand { display: flex; align-items: flex-start; justify-content: flex-end; }
.site-footer__brand img { height: clamp(58px, 7vw, 92px); width: auto; }

.site-footer__bottom {
  max-width: 1400px;
  margin: 44px auto 0;
  padding-top: 22px;
  border-top: 1px solid #2a2a2a;
}
.site-footer__bottom p { font-size: 12px; color: #9a9a9a; }
/* Preisangabenverordnung: gilt für alle Preise auf der Seite, steht deshalb einmal im Footer */
.site-footer__price-note { max-width: 780px; margin-bottom: 10px; line-height: 1.6; }
.site-footer__price-note a { text-decoration: underline; text-underline-offset: 2px; }

/* mobil: Footer-Spalten ausklappbar */
.site-footer__col--toggle .site-footer__col-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 0;
  border-bottom: 1px solid #2a2a2a;
}
.site-footer__col-toggle svg { width: 16px; height: 16px; transition: transform .3s ease; }

/* ---------- Statische Textseiten (Impressum etc.) ---------- */
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 40px) clamp(60px, 8vw, 100px);
}
.legal h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: var(--w-head); letter-spacing: -.02em; margin-bottom: 24px; }
.legal h2 { font-size: 19px; font-weight: var(--w-head); margin: 30px 0 10px; }
.legal p, .legal li { font-size: 14.5px; color: #333; margin-bottom: 12px; }
.legal ul, .legal ol { padding-left: 20px; margin-bottom: 12px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal__meta { font-size: 13px; color: var(--muted); }
.legal__source { font-size: 12.5px; color: var(--muted); margin-top: 30px; }

/* Formulare auf Kontakt- und Widerrufsseite */
.mailform { display: grid; gap: 16px; max-width: 520px; margin-top: 22px; }
.mailform label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.mailform input,
.mailform textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--bone);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
}
.mailform input:focus,
.mailform textarea:focus { outline: 1px solid var(--ink); }
.mailform textarea { resize: vertical; }
.mailform__note { font-size: 12px; color: var(--muted); margin: 0; }
.legal .legal__hint {
  background: var(--grey);
  border-left: 3px solid var(--red);
  padding: 14px 18px;
  font-size: 13.5px;
  color: #555;
  margin-bottom: 28px;
}

/* ==========================================================================
   NEWSLETTER — eine Definition für alle Seiten.
   Markup und Anmeldung kommen aus chrome.js und landen in #chromeNews.
   Lag vorher nur in index.html, deshalb stehen die Breakpoints hier bei
   der Definition und nicht in der Leiter weiter unten.
   ========================================================================== */
.newsletter { display: grid; grid-template-columns: 2fr 1fr; min-height: 480px; margin-top: clamp(20px, 4vw, 50px); }
.newsletter__media { position: relative; overflow: hidden; background: var(--ink); }
.newsletter__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
/* Claim sitzt mittig im Bild, nicht am linken Rand */
.newsletter__claim {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  padding: 0 24px; text-align: center;
  font-family: var(--font-heading); font-weight: var(--w-head);
  font-size: clamp(26px, 3.6vw, 44px); letter-spacing: -.02em;
  color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
.newsletter__panel { background: var(--bone); display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 56px) clamp(22px, 3vw, 48px); text-align: center; }
.newsletter__panel h3 { font-size: clamp(19px, 2vw, 24px); }
.newsletter__panel p { font-size: 14px; margin-top: 8px; }
.newsletter__form { margin-top: 22px; display: grid; gap: 10px; }
.newsletter__form input { width: 100%; padding: 13px 16px; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 14px; }
.newsletter__form input:focus { outline: 1px solid var(--ink); }
.newsletter__note { font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.newsletter__note a { text-decoration: underline; text-underline-offset: 2px; }
.newsletter__consent { display: flex; gap: 9px; align-items: flex-start; text-align: left; font-size: 11.5px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.newsletter__consent input { width: 15px; height: 15px; margin-top: 1px; flex: none; accent-color: var(--ink); cursor: pointer; }
.newsletter__consent a { text-decoration: underline; text-underline-offset: 2px; }
.newsletter__done { margin-top: 22px; font-size: 14px; font-weight: 600; display: none; }

@media (min-width: 1600px) {
  .newsletter { max-width: 1800px; margin-inline: auto; min-height: 560px; }
}
@media (max-width: 1100px) {
  .newsletter { grid-template-columns: 1.4fr 1fr; min-height: 420px; }
}
@media (max-width: 860px) {
  .newsletter { grid-template-columns: 1fr; min-height: 0; }
  .newsletter__media { min-height: 340px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .site-header {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "burger logo icons";
    padding: 12px 18px;
  }
  .site-header__nav { display: none; }
  .site-header__logo { justify-self: center; }
  .site-header__burger { display: grid; place-items: center; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 0; }
  .site-footer__social { margin-top: 26px; }
  .site-footer__brand { justify-content: flex-start; margin-top: 30px; }

  /* Footer-Spalten als Akkordeon */
  .site-footer__col--toggle h4 { display: none; }
  .site-footer__col--toggle .site-footer__col-toggle { display: flex; }
  .site-footer__col--toggle .site-footer__col-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
  }
  .site-footer__col--toggle.is-open .site-footer__col-body { grid-template-rows: 1fr; }
  .site-footer__col--toggle.is-open .site-footer__col-toggle svg { transform: rotate(45deg); }
  .site-footer__col-body > div { overflow: hidden; padding-top: 4px; }
  .site-footer__col--toggle a { margin-bottom: 14px; }
}