/* =========================================================================================
   tpl_ersatzteile_original: Design "Original zuerst", Version 2 "fein" (Handoff vom 13.10.2026, Paket V2), Artikelseite aus Paket V3 (14.10.2026)
   Wird von Nova NACH stylesheet.css geladen (css/general.css.php, "tpl_custom.css") und ueberschreibt es.
   Gelb / Schwarz / Weiss, Haarlinien (1 px), keine Rundungen, keine Schatten. Nummern, Preise und Labels in Monospace.
   Schriften: Archivo (400/500/600) und JetBrains Mono (400/500), lokal gehostet (css/fonts/, SIL OFL, siehe README-eo.txt dort).
   Aufbau: 0 Schriften, 1 Tokens, 2 Grundlagen, 3 Kopf, 4 Suche, 5 Startseite, 6 Karten, 7 Listen, 7b Artikelseite,
           8 Fussleiste, 9 Nova-Seiten (Konto, Warenkorb, Kasse), 10 Tablet, 11 Mobil
   ========================================================================================= */

/* ---- 0 Schriften ------------------------------------------------------------------------ */
/* Die Adresse ist vom Shop-Stamm aus geschrieben: Nova fasst die CSS-Dateien zu templates/<name>/stylesheet.min.css zusammen,
   relative Adressen wuerden dann ins Leere zeigen. Aenderung des Ordnernamens: hier nachziehen. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/templates/tpl_ersatzteile_original/css/fonts/archivo-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/templates/tpl_ersatzteile_original/css/fonts/archivo-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/templates/tpl_ersatzteile_original/css/fonts/archivo-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/templates/tpl_ersatzteile_original/css/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/templates/tpl_ersatzteile_original/css/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

/* ---- 1 Tokens ------------------------------------------------------------------------- */
:root {
  --c-yellow: #efd36a;
  --c-yellow-soft: #fcf5de;
  --c-ink: #141414;
  --c-paper: #fff;
  --c-surface: #f6f6f4;
  --c-rule: #e2e2e2;
  --c-rule-card: #ececec;
  --c-rule-ink: #3a3a3a;
  --c-muted: #6b6b6b;
  --c-placeholder: #767676;   /* Entwurf: #8a8a8a (3,5:1); #767676 erreicht 4,5:1 */
  --c-on-ink: #b4b4b4;
  --c-footer: #a8a8a8;
  --c-star: #e3b84a;          /* Sterne im Bewertungsbereich (Entwurf V3) */
  --c-ok: #3f8f55;            /* Lieferzeit-Punkt: der Entwurf legt nur Orange fest, Gruen und Rot dazu (Text steht immer dabei) */
  --c-limited: #d9902a;       /* eingeschraenkt (Entwurf V3) */
  --c-none: #b3261e;          /* nicht lieferbar */
  --line: 1px solid var(--c-ink);
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --pad-x: 56px;
  --max: 1280px;
}
@supports (background: color-mix(in oklab, red 50%, white)) {
  :root { --c-yellow-soft: color-mix(in oklab, var(--c-yellow) 22%, #fff); }
}

/* ---- 2 Grundlagen ---------------------------------------------------------------------- */
body {
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
}
a, a:link, a:visited, a:active { color: var(--c-ink); }
a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }

/* keine Rundungen, keine Schatten (Siegel und Optionsfelder ausgenommen) */
.layout_wrap *:not(.eo-seal),
.layout_wrap *::before,
.layout_wrap *::after,
.layout_wrap ~ #colorbox * {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.layout_wrap .eo-seal,
.layout_wrap .eo-seal__in { border-radius: 50% !important; }
.layout_wrap .cus_radio label::before,
.layout_wrap .cus_radio label::after { border-radius: 50% !important; }
/* einziger Schatten im Design: das Shopauskunft-Siegel */
.layout_wrap .eo-trust__link { box-shadow: 0 1px 3px rgba(0, 0, 0, .12) !important; }

/* sichtbarer Fokus: 2 px, dunkel auf hell, gelb auf schwarz */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}
.eo-band a:focus-visible, .eo-footer a:focus-visible, .eo-footer button:focus-visible { outline-color: var(--c-yellow); }

/* Ueberschriften der Nova-Seiten im Design: leicht, in Normalschreibung */
h1, h2, h3, h4, .headline, .subline {
  font-family: var(--f-display);
  text-transform: none;
  color: var(--c-ink);
  letter-spacing: -.02em;
}
h1, .headline { font-weight: 600; font-size: 36px; line-height: 1.1; letter-spacing: -.025em; }
h2 { font-weight: 600; font-size: 24px; line-height: 1.15; border-bottom: 0; }
h3 { font-weight: 600; font-size: 18px; }
h4, .subline { font-weight: 600; border-bottom: 1px solid var(--c-rule); }

.layout_content { margin-bottom: 0; }
.layout_content.dm_home { margin: 0; }
.layout_content:not(.dm_home) { padding-bottom: 64px; }
/* Seitenbreite der Nova-Inhalte wie im Design: hoechstens 1280 px, seitlicher Innenabstand 56 / 32 / 20 px (wie Kopf und Startseite) */
.layout_content .content_big, .layout_content .content_medium, .layout_content .content_small {
  max-width: var(--max);
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* Schmale Hilfsklassen */
.eo-kicker { font: 400 12px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }

/* ---- 3 Kopf ---------------------------------------------------------------------------- */
.eo-header { background: var(--c-yellow); position: relative; z-index: 30; border-bottom: 1px solid rgba(20, 20, 20, .18); }
.eo-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font: 400 12px/1.2 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.eo-logo, .eo-logo:link, .eo-logo:visited {
  font: 600 20px/1 var(--f-display);
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}
.eo-logo:hover { text-decoration: none; }
.eo-logo__o { border-bottom: 2px solid var(--c-ink); padding-bottom: 1px; }
.eo-logo__tld { font: 400 12px/1 var(--f-mono); letter-spacing: 0; }
.eo-nav { display: flex; align-items: center; gap: 12px; }
.eo-nav__list { display: flex; gap: 28px; align-items: center; list-style: none; margin: 0; padding: 0; }
.eo-nav__list a, .eo-nav__list a:link, .eo-nav__list a:visited { color: var(--c-ink); text-decoration: none; }
.eo-nav__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.eo-nav__list a.eo-cart, .eo-nav__list a.eo-cart:link, .eo-nav__list a.eo-cart:visited {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--c-ink);
  padding: 7px 12px;
}
.eo-cart__n { background: var(--c-ink); color: var(--c-yellow); padding: 1px 6px; }
.eo-cart__k { display: none; }   /* kurzes Wort "Korb", nur mobil */
.eo-nav__list a.eo-cart:hover { text-decoration: none; background: var(--c-ink); color: var(--c-yellow); }
.eo-nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
  font: 400 12px/1 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
}
.eo-header--checkout .eo-nav__list--checkout a { text-decoration: underline; text-underline-offset: 3px; }

/* Innenseiten (alle ausser Startseite und Kasse; Entwurf V3): Logo | Suche | Menue in EINER Zeile, 16 px Innenabstand.
   Unter 1024 px steht die Suche in einer zweiten Zeile (Abschnitte 10 und 11). */
.eo-header--inner .eo-header__inner { padding-top: 16px; padding-bottom: 16px; gap: 40px; justify-content: flex-start; }
.eo-header--inner .eo-nav { margin-left: auto; }
.eo-header__search { flex: 1 1 auto; min-width: 0; max-width: 560px; }
.eo-header__search .eo-search-wrap { max-width: none; }

/* nur fuer Screenreader sichtbar */
.eo-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- 4 Suche --------------------------------------------------------------------------- */
.eo-search-wrap { position: relative; max-width: 820px; }
.layout_wrap .eo-search { display: flex; background: var(--c-paper); border: var(--line); align-items: stretch; height: 64px; }
.layout_wrap .eo-search .eo-search__input,
.layout_wrap .eo-search .eo-search__input:hover,
.layout_wrap .eo-search .eo-search__input:focus {
  flex: 1;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 0 22px;
  font: 400 18px/1.2 var(--f-mono);
  color: var(--c-ink);
  background: transparent !important;
  border: 0 !important;
  outline: 0;
  letter-spacing: 0;
}
.layout_wrap .eo-search .eo-search__input:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -4px; }
.layout_wrap .eo-search .eo-search__input::placeholder { color: var(--c-placeholder); font-style: normal; opacity: 1; }
.layout_wrap .eo-search .eo-search__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-ink);
  color: #fff;
  margin: 0;
  padding: 0 32px;
  border: 0;
  font: 500 16px/1 var(--f-display);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  min-height: 44px;
}
.eo-arrow { font-family: var(--f-mono); }
.layout_wrap .eo-search .eo-search__btn:hover { background: #333; }
.layout_wrap .eo-search .eo-search__btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* Vorschlagsliste der Suche (Nova-Autocomplete) */
.eo-search-wrap .suggestionsBox {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-paper);
  border: var(--line);
  border-top: 0;
  z-index: 60;
  font: 400 16px/1.3 var(--f-mono);
}
.eo-search-wrap .suggestionList a { display: block; padding: 12px 22px; border-bottom: 1px solid var(--c-rule); text-decoration: none; }
.eo-search-wrap .suggestionList a:hover { background: var(--c-yellow-soft); }

/* Suche in der Kopfzeile der Innenseiten (Entwurf V3): 44 px hoch, Eingabe 14 px, Knopf "Suchen ->" 14 px */
.layout_wrap .eo-header__search .eo-search { height: 44px; }
.layout_wrap .eo-header__search .eo-search .eo-search__input,
.layout_wrap .eo-header__search .eo-search .eo-search__input:hover,
.layout_wrap .eo-header__search .eo-search .eo-search__input:focus { font-size: 14px; padding: 0 16px; }
.layout_wrap .eo-header__search .eo-search .eo-search__btn { padding: 0 20px; font-size: 14px; }

/* ---- 5 Startseite ---------------------------------------------------------------------- */
.eo-hero { background: var(--c-yellow); }
.eo-hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px var(--pad-x) 64px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 48px;
  align-items: start;
}
.eo-hero__main { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.layout_wrap h1.eo-hero__title {
  margin: 0; padding: 0; border: 0;
  display: flex; flex-direction: column; gap: 18px;
  font: 600 68px/1 var(--f-display);
  letter-spacing: -.03em;
  text-transform: none;
  text-wrap: balance;
}
.eo-hero__kicker { font: 400 14px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.eo-hero__search { max-width: 820px; }

.eo-seal {
  width: 200px; height: 200px;
  border: 1px solid var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(8deg);
}
.eo-seal__in {
  width: 176px; height: 176px;
  background: var(--c-ink); color: var(--c-yellow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center;
}
.eo-seal__small { font: 400 10px/1.2 var(--f-mono); letter-spacing: .18em; }
.eo-seal__big { font: 600 28px/1 var(--f-display); letter-spacing: .02em; }

.eo-band { background: var(--c-ink); color: #fff; }
.eo-band__inner { max-width: var(--max); margin: 0 auto; padding: 56px var(--pad-x); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; }
.layout_wrap h2.eo-band__lead { margin: 0; padding: 0; border: 0; color: #fff; font: 500 32px/1.15 var(--f-display); letter-spacing: -.015em; text-wrap: balance; }
.eo-band__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 14px; line-height: 1.55; color: var(--c-on-ink); }
.eo-band__cols > div { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--c-rule-ink); padding-top: 16px; }
.eo-band__cols > div:first-child { border-top-color: var(--c-yellow); }
.eo-band__cols b { color: #fff; font: 500 16px/1.3 var(--f-display); }
.eo-band__cols > div:first-child b { color: var(--c-yellow); }

.eo-brands { border-bottom: 1px solid var(--c-rule); }
.eo-brands__inner { max-width: var(--max); margin: 0 auto; padding: 18px var(--pad-x); display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.eo-brands__label { flex: none; font: 400 11px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; background: var(--c-yellow); color: var(--c-ink); padding: 4px 8px; }
.eo-brands__list { flex: 1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; font: 500 15px/1.3 var(--f-display); color: var(--c-rule-ink); }
.eo-brands__list a, .eo-brands__list a:link, .eo-brands__list a:visited { color: inherit; text-decoration: none; }
.eo-brands__list a:hover { text-decoration: underline; text-underline-offset: 3px; }

.eo-section__inner { max-width: var(--max); margin: 0 auto; padding: 80px var(--pad-x); display: flex; flex-direction: column; gap: 32px; }
.eo-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.eo-section__head--end { align-items: flex-end; gap: 40px; }
.eo-section__head--end > div { display: flex; flex-direction: column; gap: 10px; }
.layout_wrap h2.eo-h2 {
  margin: 0; padding: 0; border: 0;
  font: 600 40px/1 var(--f-display);
  text-transform: none;
  letter-spacing: -.025em;
}
.eo-more, .eo-more:link, .eo-more:visited { font: 400 12px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; white-space: nowrap; }
.eo-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.eo-kicker--right { text-align: right; letter-spacing: .06em; }

.eo-addons { background: var(--c-yellow); }
.eo-addons .eo-section__inner { padding-top: 64px; padding-bottom: 64px; gap: 28px; }

.eo-photo { height: 420px; overflow: hidden; filter: grayscale(1); }
.eo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.eo-info { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.eo-info--solo { grid-template-columns: minmax(0, 1fr); }
.eo-info__text { max-width: 100%; padding: 56px var(--pad-x); display: flex; flex-direction: column; gap: 14px; }
.eo-info .eo-kicker { color: var(--c-muted); }
.eo-info__lead { margin: 0; max-width: 760px; font: 500 30px/1.2 var(--f-display); letter-spacing: -.015em; text-wrap: balance; }
.eo-trust { padding: 56px var(--pad-x); display: flex; align-items: center; justify-content: center; background: var(--c-surface); border-left: 1px solid var(--c-rule); }
.eo-trust__link { display: block; line-height: 0; }
.eo-trust__img { display: block; width: 150px; height: auto; }

.eo-howto { border-top: 1px solid var(--c-rule); padding: 48px 0; }
.eo-howto .content_small { max-width: var(--max); padding: 0 var(--pad-x); }

/* ---- 6 Karten -------------------------------------------------------------------------- */
/* Raster mit Haarlinien: der Rahmen oben/links am Raster, rechts/unten an der Karte (auch ein unvollstaendiger Satz bleibt sauber) */
.eo-grid { display: grid; border-top: 1px solid var(--c-rule); border-left: 1px solid var(--c-rule); background: var(--c-paper); }
.eo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eo-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; border: 0; background: transparent; }

.eo-badge {
  align-self: flex-start;
  display: inline-block;
  font: 500 10px/1.3 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  background: var(--c-yellow);
  color: var(--c-ink);
  padding: 3px 7px;
}
.eo-badge--acc { background: transparent; color: #555; border: 1px solid #c8c8c8; padding: 2px 7px; }

.eo-card {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px;
  border-right: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  background: var(--c-paper);
  min-width: 0;
}
.eo-card:hover, .eo-card:focus-within { background: var(--c-yellow-soft); }
.eo-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.eo-card__ship { font: 400 11px/1.3 var(--f-mono); color: var(--c-muted); text-align: right; }
.eo-card__img { position: relative; height: 140px; background: var(--c-surface); overflow: hidden; }
.eo-card__img img, .eo-mini__img img {
  position: absolute; inset: 16px;
  width: calc(100% - 32px); height: calc(100% - 32px);
  object-fit: contain;
  mix-blend-mode: multiply;
}
.eo-nophoto { position: absolute; left: 8px; bottom: 8px; font: 400 10px/1.3 var(--f-mono); color: var(--c-muted); }
.eo-card__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.eo-card__nr { font: 500 26px/1 var(--f-mono); letter-spacing: -.02em; overflow-wrap: anywhere; }
.eo-card__gm { font: 400 12px/1.3 var(--f-mono); color: var(--c-muted); }
.eo-card__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--c-rule-card); padding-top: 14px; margin-top: auto; }
.layout_wrap h3.eo-card__name { margin: 0; padding: 0; border: 0; min-width: 0; font: 500 16px/1.3 var(--f-display); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; hyphens: auto; }
.eo-card__link, .eo-card__link:link, .eo-card__link:visited { color: inherit; text-decoration: none; }
.eo-card__link:hover { text-decoration: none; }
.eo-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.eo-card__price { font: 500 18px/1.2 var(--f-mono); white-space: nowrap; }
.eo-card__price .small_price, .eo-mini__price .small_price { font-size: 11px; font-weight: 400; }
.eo-card__price .old_price, .eo-mini__price .old_price { font-weight: 400; font-size: 13px; color: var(--c-muted); }
.eo-card__tax { position: relative; z-index: 2; font: 400 11px/1.3 var(--f-mono); color: var(--c-muted); }
.eo-card__tax a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.eo-mini { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--c-paper); min-width: 0; }
.layout_wrap .eo-mini__img { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-surface); }
.eo-mini__img img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
.layout_wrap h3.eo-mini__name { margin: 0; padding: 0; border: 0; min-height: 36px; font: 500 14px/1.3 var(--f-display); text-transform: none; letter-spacing: 0; hyphens: auto; overflow-wrap: anywhere; }
.eo-mini__name a, .eo-mini__name a:link, .eo-mini__name a:visited { text-decoration: none; }
.eo-mini__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.eo-mini__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.eo-mini__price { font: 500 14px/1.2 var(--f-mono); letter-spacing: -.02em; white-space: nowrap; }
.eo-mini__tax { font: 400 11px/1.3 var(--f-mono); color: var(--c-muted); }
.eo-mini__tax a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.eo-add { margin: 0; }
.layout_wrap .eo-add .eo-add__btn {
  position: relative;
  width: 32px; height: 32px; min-height: 32px; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--c-ink);
  border: var(--line);
  font: 400 18px/1 var(--f-display);
  cursor: pointer;
}
/* Trefferflaeche mindestens 44 px, auch wenn die Flaeche 32 px zeigt */
.layout_wrap .eo-add .eo-add__btn::after { content: ""; position: absolute; inset: -6px; }
.layout_wrap .eo-add .eo-add__btn:hover { background: var(--c-ink); color: var(--c-yellow); }

/* ---- 7 Listen und Suchergebnis --------------------------------------------------------- */
.layout_wrap h1.eo-list-title { margin: 32px 0 24px; padding: 0; border: 0; font: 600 40px/1 var(--f-display); letter-spacing: -.025em; text-transform: none; overflow-wrap: anywhere; }
.layout_wrap h1.eo-list-title .eo-list-title__nr { font: 500 40px/1 var(--f-mono); letter-spacing: -.02em; }
.eo-grid--list { margin: 24px 0; }
.breadcrumb { font: 400 12px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; margin: 20px 0 0; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb span.current { font-weight: 500; }
.product_listing .filter_pagination_bar { margin: 8px 0; }

/* Seitennavigation (Nova pagination) */
.pagination_list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pagination_list ul li a, .pagination_list ul li span {
  display: inline-block; min-width: 44px; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--c-rule); background: var(--c-paper); color: var(--c-ink);
  font: 500 14px/1.4 var(--f-mono); text-align: center; text-decoration: none;
}
.pagination_list ul li a:hover, .pagination_list ul li.active a, .pagination_list ul li.active span { background: var(--c-ink); color: var(--c-yellow); border-color: var(--c-ink); }

/* Suche ohne Treffer (module/error_message.html) */
.eo-nohit { max-width: 760px; margin: 40px 0 24px; }
.layout_wrap h1.eo-nohit__title { margin: 0 0 16px; padding: 0; border: 0; font: 600 28px/1.15 var(--f-display); letter-spacing: -.02em; }
.eo-nohit__nr { margin: 0 0 20px; font: 500 40px/1 var(--f-mono); letter-spacing: -.02em; overflow-wrap: anywhere; }
.eo-nohit__text { margin: 0 0 24px; color: var(--c-muted); }
.layout_wrap a.eo-nohit__btn, .layout_wrap a.eo-nohit__btn:link, .layout_wrap a.eo-nohit__btn:visited {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 28px;
  background: var(--c-ink); color: #fff; font: 500 16px/1 var(--f-display); text-decoration: none;
}
.layout_wrap a.eo-nohit__btn:hover { background: #333; color: #fff; text-decoration: none; }

/* ---- 7b Artikelseite (Entwurf V3 "Artikelseite") ------------------------------------------------ */
.layout_content.dm_productinfo { padding-bottom: 0; }
.layout_content.dm_productinfo #product_info { margin: 0; }   /* Nova gibt #product_info 40 px Aussenabstand: haette einen weissen Streifen unter der Kopfzeile ergeben */
.eo-pd__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }

/* Kopf (gelb): Brotkrumen, Nummer + Name (eine H1), Etikett und Bewertung. Variante C (Standard) oder D (EO_PRODUCT_HEAD). */
.eo-pdhead { background: var(--c-yellow); }
.eo-pdhead__inner { max-width: var(--max); margin: 0 auto; padding: 40px var(--pad-x) 36px; display: flex; flex-direction: column; gap: 14px; }
.eo-crumbs { font: 400 11px/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.eo-crumbs__list { display: flex; flex-wrap: wrap; gap: 2px 10px; list-style: none; margin: 0; padding: 0; }
.eo-crumbs__list li { margin: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
.eo-crumbs__list li + li::before { content: "/"; margin-right: 10px; }
.eo-crumbs a, .eo-crumbs a:link, .eo-crumbs a:visited { text-decoration: none; }
.eo-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.eo-crumbs__back { display: none; }   /* nur mobil: "<- Opel" */

.eo-pdhead__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.layout_wrap h1.eo-pdhead__title { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; text-transform: none; letter-spacing: 0; }
.eo-pdhead__nr { font: 500 64px/1 var(--f-mono); letter-spacing: -.035em; overflow-wrap: anywhere; }
.eo-pdhead__name { font: 500 28px/1.1 var(--f-display); letter-spacing: -.015em; overflow-wrap: anywhere; hyphens: auto; }
.layout_wrap h1.eo-pdhead__title--row { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; }
.eo-pdhead__meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.eo-pdhead__badge { display: flex; align-items: center; height: 24px; padding: 0 9px; background: var(--c-ink); color: var(--c-yellow); font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.eo-pdhead__badge--acc { background: transparent; color: var(--c-ink); border: var(--line); }
.eo-pdhead__rating, .eo-pdhead__rating:link, .eo-pdhead__rating:visited { display: flex; align-items: center; gap: 8px; font: 400 12px/1 var(--f-mono); text-decoration: none; }
.eo-pdhead__ratingtext { text-decoration: underline; text-underline-offset: 3px; }
.eo-pdhead__line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 400 12px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.eo-pdhead__kind { font-weight: 500; }
.eo-pdhead .eo-stars__on { color: var(--c-ink); }
.eo-pdhead .eo-stars__off { color: rgba(20, 20, 20, .28); }

/* Sterne als Textzeichen (der Entwurf nutzt keine Icons); Schriftliste, damit der Stern ueberall gleich aussieht */
.eo-stars { display: inline-flex; flex: none; font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif; font-size: 14px; line-height: 1; letter-spacing: .08em; }
.eo-stars__on { color: var(--c-star); }
.eo-stars__off { color: #d8d8d4; }
.eo-stars--lg { font-size: 22px; letter-spacing: .12em; }

/* Raster: Bild | Datenblatt | Kaufbox (DOM-Reihenfolge Bild, Kaufbox, Datenblatt = mobile Reihenfolge) */
.eo-pd__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; grid-template-areas: "media sheet buy"; gap: 40px; align-items: start; padding: 48px 0; }
.eo-pd__media { grid-area: media; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.eo-pd__sheet { grid-area: sheet; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.eo-buybox { grid-area: buy; }
.eo-pd__frame { background: var(--c-surface); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.eo-pd__frame img { max-width: calc(100% - 32px); max-height: calc(100% - 32px); object-fit: contain; mix-blend-mode: multiply; cursor: zoom-in; }
.eo-pd__frame--empty { align-items: flex-end; justify-content: flex-start; padding: 12px; }
.eo-pd__nophoto { font: 400 11px/1.3 var(--f-mono); color: var(--c-muted); }
.eo-pd__photohint { margin: 0; font: 400 11px/1.5 var(--f-mono); color: var(--c-placeholder); }
.eo-pd__photohint--m { display: none; }   /* mobil steht der Hinweis am Ende des Datenblatts */

/* Datenblatt */
.eo-sheet__label { font: 400 11px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); }
.eo-sheet__list { display: grid; grid-template-columns: 150px minmax(0, 1fr); margin: 0; border-top: var(--line); }
.eo-sheet__list dt { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--c-rule); font: 400 11px/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); }
.eo-sheet__list dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--c-rule); font: 400 15px/1.5 var(--f-mono); overflow-wrap: anywhere; }
.eo-sheet__list dd.is-empty { color: var(--c-muted); }
.eo-sheet__list dd a { text-decoration: underline; text-underline-offset: 3px; }
.eo-sheet__text { margin: 6px 0 0; font: 400 14px/1.6 var(--f-display); color: var(--c-rule-ink); }
.eo-sheet__note { margin-top: 0; }
.eo-sheet__text a { text-decoration: underline; text-underline-offset: 3px; }

/* Kaufbox */
.eo-buybox { border: var(--line); padding: 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.eo-buybox__price { display: flex; flex-direction: column; gap: 4px; }
.eo-buybox__amount { font: 500 34px/1.1 var(--f-mono); letter-spacing: -.02em; }
.eo-buybox__amount .small_price { font-size: 13px; font-weight: 400; letter-spacing: 0; }
.eo-buybox__amount .old_price { font-size: 18px; font-weight: 400; color: var(--c-muted); }
.eo-buybox__pack { font: 400 13px/1.4 var(--f-mono); }
.eo-buybox__tax { font: 400 11px/1.4 var(--f-mono); color: var(--c-muted); }
.eo-buybox__tax a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.eo-buybox__ship { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule); font: 400 13px/1.4 var(--f-mono); }
.eo-buybox__shiplabel { color: var(--c-muted); }
.eo-buybox__shipstate { display: inline-flex; align-items: center; gap: 8px; text-align: right; }
.layout_wrap .eo-dot { flex: none; width: 8px; height: 8px; border-radius: 50% !important; background: var(--c-ok); }
.layout_wrap .eo-dot--limited { background: var(--c-limited); }
.layout_wrap .eo-dot--none { background: var(--c-none); }
.eo-buybox__more { font-size: 13px; }
.eo-buybox__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
.eo-pd__qty { min-width: 0; }
.layout_wrap .eo-pd__qty input[type=tel], .layout_wrap .eo-pd__qty input[type=text] {
  display: block; width: 100%; height: 52px; margin: 0; padding: 0; text-align: center; font: 400 16px/1 var(--f-mono); border: var(--line); background: var(--c-paper);
}
.layout_wrap .eo-pd__cart {
  height: 52px; padding: 0 16px;
  background: var(--c-ink); color: #fff;
  border: 0;
  font: 500 16px/1 var(--f-display); text-transform: none; letter-spacing: 0;
  cursor: pointer;
}
.layout_wrap .eo-pd__cart:hover { background: #333; }
.eo-buybox__usp { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font: 400 12px/1.4 var(--f-mono); color: var(--c-rule-ink); }
.eo-buybox__usp li { margin: 0; padding: 0; }

/* "Oft zusammen gekauft": Liste (module/also_purchased.html) */
.eo-pd__rel { padding-bottom: 56px; }
.eo-pd__rel > .eo-pd__inner { display: flex; flex-direction: column; gap: 16px; }
.eo-rel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.layout_wrap h2.eo-rel__title { margin: 0; padding: 0; border: 0; font: 600 24px/1.15 var(--f-display); letter-spacing: -.02em; }
.eo-rel__fits { font: 400 11px/1.5 var(--f-mono); color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; text-align: right; }
.eo-pd__rel--solo { padding-bottom: 40px; }
.eo-pd__rel--solo .eo-rel__fits { text-align: left; }
.eo-rel__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: var(--line); }
.eo-rel__row { position: relative; display: grid; grid-template-columns: 56px 140px minmax(0, 1fr) 160px 110px 44px; gap: 20px; align-items: center; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--c-rule); }
.eo-rel__row:hover, .eo-rel__row:focus-within { background: var(--c-yellow-soft); }
.eo-rel__img { display: block; position: relative; width: 56px; height: 56px; background: var(--c-surface); overflow: hidden; }
.eo-rel__img img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; mix-blend-mode: multiply; }
.eo-rel__nr { font: 500 17px/1.2 var(--f-mono); letter-spacing: -.02em; overflow-wrap: anywhere; }
.eo-rel__name { min-width: 0; font: 400 15px/1.35 var(--f-display); overflow-wrap: anywhere; hyphens: auto; }
.eo-rel__link, .eo-rel__link:link, .eo-rel__link:visited { color: inherit; text-decoration: none; }
.eo-rel__link:hover { text-decoration: none; }
.eo-rel__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.eo-rel__stock { font: 400 11px/1.3 var(--f-mono); color: var(--c-muted); }
.eo-rel__price { font: 500 15px/1.2 var(--f-mono); text-align: right; white-space: nowrap; }
.eo-rel__price .small_price { font-size: 11px; font-weight: 400; }
.eo-rel__row .eo-add { position: relative; z-index: 2; justify-self: end; }
.layout_wrap .eo-rel__row .eo-add .eo-add__btn { width: 36px; height: 36px; min-height: 36px; }
.layout_wrap .eo-rel__row .eo-add .eo-add__btn::after { inset: -4px; }
.eo-rel__tax { margin: 0; font: 400 11px/1.4 var(--f-mono); color: var(--c-muted); }
.eo-rel__tax a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Bewertungen (module/products_reviews.html) */
.eo-pd__reviews { border-top: 1px solid var(--c-rule); scroll-margin-top: 16px; }
.eo-pd__reviews > .eo-pd__inner { padding-top: 56px; padding-bottom: 56px; }
.eo-rev { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "summary list" "actions list"; grid-template-rows: auto 1fr; gap: 24px 40px; align-items: start; }
.eo-rev--empty { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "actions"; grid-template-rows: auto; }
.eo-rev__summary { grid-area: summary; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.eo-rev__actions { grid-area: actions; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.eo-rev__list { grid-area: list; border-top: var(--line); min-width: 0; }
.layout_wrap h2.eo-rev__title { margin: 0; padding: 0; border: 0; font: 600 24px/1.15 var(--f-display); letter-spacing: -.02em; }
.eo-rev__score { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.eo-rev__avg { display: flex; align-items: baseline; gap: 10px; }
.eo-rev__avg b { font: 500 48px/1 var(--f-mono); letter-spacing: -.03em; }
.eo-rev__avg span { font: 400 13px/1 var(--f-mono); color: var(--c-muted); }
.eo-rev__count, .eo-rev__none { margin: 0; font: 400 12px/1.4 var(--f-mono); color: var(--c-muted); }
.eo-rev__note { margin: 0; }
.eo-rev__write, .eo-rev__write:link, .eo-rev__write:visited {
  display: inline-flex; align-items: center; min-height: 36px; padding: 10px 14px;
  border: var(--line); color: var(--c-ink);
  font: 400 12px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
}
.eo-rev__write:hover { background: var(--c-ink); color: var(--c-yellow); text-decoration: none; }
.eo-rev__all, .eo-rev__all:link, .eo-rev__all:visited { font: 400 12px/1.4 var(--f-mono); text-decoration: underline; text-underline-offset: 3px; }
.eo-rev__item { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--c-rule); }
.eo-rev__who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.eo-rev__who .eo-stars { font-size: 15px; letter-spacing: .1em; }
.eo-rev__author { font: 500 14px/1.3 var(--f-display); }
.eo-rev__date { font: 400 11px/1.3 var(--f-mono); color: var(--c-muted); }
.eo-rev__text { margin: 0; max-width: 640px; font: 400 15px/1.65 var(--f-display); color: var(--c-rule-ink); text-wrap: pretty; overflow-wrap: anywhere; }

.eo-pd__block { border-top: 1px solid var(--c-rule); padding: 32px 0; }
.eo-pd__more { padding-bottom: 32px; }
.eo-pd__more .subline, .eo-pd__more .box_products_head .title { font: 600 40px/1 var(--f-display); text-transform: none; letter-spacing: -.025em; border: 0; margin: 0 0 20px; padding: 0; }

/* Produktkarten in Nova-Karussellen (Cross-Selling, ...): Karte mit eigenem Rahmen */
.splide .eo-card, .splide .eo-mini { border: 1px solid var(--c-rule); height: 100%; }
.splide__slide { padding: 0 6px; }
.box_products_head .title { font: 600 40px/1 var(--f-display); text-transform: none; letter-spacing: -.025em; border: 0; }

/* ---- 8 Fussleiste ---------------------------------------------------------------------- */
.eo-footer { background: var(--c-ink); color: var(--c-footer); }
.eo-footer__inner { max-width: var(--max); margin: 0 auto; padding: 24px var(--pad-x); display: flex; justify-content: space-between; align-items: center; gap: 24px; font: 400 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.eo-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.eo-footer a, .eo-footer a:link, .eo-footer a:visited { color: var(--c-footer); text-decoration: none; }
.eo-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Widerrufsformular (Baustein "withdraw"): der Link steht in der Fussleiste jeder Seite und ist als Schaltflaeche hervorgehoben */
.eo-footer__links li.eo-footer__withdraw a, .eo-footer__links li.eo-footer__withdraw a:link, .eo-footer__links li.eo-footer__withdraw a:visited {
  display: inline-block; padding: 6px 12px; border: 1px solid #fff; color: #fff;
}
.eo-footer__links li.eo-footer__withdraw a:hover { background: var(--c-yellow); border-color: var(--c-yellow); color: var(--c-ink); text-decoration: none; }
.eo-footer__price { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x) 24px; font: 400 11px/1.5 var(--f-mono); color: #8a8a8a; }
.eo-footer__price a, .eo-footer__price a:link, .eo-footer__price a:visited { color: #8a8a8a; text-decoration: underline; text-underline-offset: 3px; }

/* ---- 9 Nova-Seiten (Konto, Warenkorb, Kasse, Inhalte): nur Tokens -------------------------- */
.layout_wrap input[type=text], .layout_wrap input[type=password], .layout_wrap input[type=email], .layout_wrap input[type=tel],
.layout_wrap select, .layout_wrap textarea {
  border: 1px solid var(--c-ink);
  background-color: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-display);
}
.layout_wrap input[type=text]:focus, .layout_wrap input[type=password]:focus, .layout_wrap input[type=email]:focus, .layout_wrap input[type=tel]:focus,
.layout_wrap select:focus, .layout_wrap textarea:focus { border-color: var(--c-ink); background-color: var(--c-paper); }
.cssButton { font-family: var(--f-display); font-weight: 500; text-transform: none; border: 1px solid var(--c-ink); }
.cssButtonColor1 { background: var(--c-paper); color: var(--c-ink); }
.cssButtonColor2, .cssButtonColor3, .cssButtonColor4, .cssButtonColor5 { background: var(--c-ink); color: #fff; }
.cssButton button { font-family: inherit; font-weight: inherit; text-transform: inherit; }
.cssButton button.cssButtonText { min-height: 44px; min-width: 44px; }   /* Zur Kasse, Weiter zu Schritt n, Kaufen, Aktualisieren: die Flaeche des Knopfes (Nova: 42 px) mindestens 44 x 44 px */
.cssButton:hover { background: var(--c-yellow); color: var(--c-ink); }
.content_site h1, .content_site h2 { margin-top: 24px; }
.errormessage, .infomessage, .successmessage, .giftmessage { border: 1px solid var(--c-ink); }
/* Shopmeldung ganz oben (ueber der Kopfzeile, unter der Adminleiste): volle Breite, ohne Aussenabstand */
.eo-notice .errormessage { margin: 0; border-width: 0 0 1px; }

/* Warenkorb: Schnellbestellung (Teilenummer eingeben, landet im Warenkorb) */
.eo-quick { margin: 0 0 32px; }
.layout_wrap h2.eo-quick__title { margin: 0 0 8px; padding: 0; border: 0; font: 600 24px/1.1 var(--f-display); letter-spacing: -.02em; }
.eo-quick__text { margin: 0 0 12px; font: 400 13px/1.4 var(--f-mono); color: var(--c-muted); }
.eo-quick .eo-search { max-width: 760px; height: 52px; }
.layout_wrap .eo-quick .eo-search .eo-search__input,
.layout_wrap .eo-quick .eo-search .eo-search__input:hover,
.layout_wrap .eo-quick .eo-search .eo-search__input:focus { font-size: 16px; padding: 0 18px; }
.layout_wrap .eo-quick .eo-search .eo-search__btn { padding: 0 24px; }

/* Fussleiste: Lieferland (Nova-Box "settingsbox") */
.eo-footer__country { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x) 12px; font: 400 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--c-footer); }
.eo-footer__country .settingsbox { display: block; }
.eo-footer__country .field_item_1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eo-footer__country .SumoSelect > .CaptionCont { border: 1px solid var(--c-rule-ink); background: var(--c-ink); color: #fff; min-height: 40px; }
.eo-footer__country .SumoSelect > .CaptionCont > span { color: #fff; font: 400 13px/1.4 var(--f-mono); }
.eo-footer__country .SumoSelect > .optWrapper { color: var(--c-ink); }

/* Urheberhinweis von modified (wird vom Shop nach dem Seitenrahmen ausgegeben, bleibt sichtbar): in die Fussleiste einpassen */
.copyright {
  margin: 0; padding: 0 var(--pad-x) 24px; width: 100%;
  background: var(--c-ink); color: #8a8a8a;
  text-align: left;
  font: 400 11px/1.5 var(--f-mono);
}
.copyright .cop_magenta, .copyright .cop_grey { color: #8a8a8a; }
.parseTime { background: var(--c-ink); margin: 0; padding: 0 var(--pad-x) 12px; color: #8a8a8a; text-align: left; font: 400 10px/1.4 var(--f-mono); }

/* Bewegung: nur ein kurzer Wechsel der Hintergrundfarbe (hoechstens 120 ms), nicht bei reduzierter Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .eo-card, .eo-add__btn, .eo-search__btn, .eo-pd__cart, .eo-rel__row, .eo-rev__write { transition: background-color 120ms ease-out, color 120ms ease-out; }
}

/* ---- 10 Tablet (bis 1279 px) ----------------------------------------------------------- */
@media (max-width: 1279px) {
  :root { --pad-x: 32px; }
  .layout_wrap h1.eo-hero__title { font-size: 56px; }
  .eo-band__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .eo-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eo-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eo-brands__list { justify-content: flex-start; gap: 6px 22px; }

  /* Artikelseite: schmalere Spalten (bei 1024 px blieben sonst 220 px fuer das Datenblatt) */
  .eo-pd__grid { grid-template-columns: 260px minmax(0, 1fr) 320px; gap: 32px; }
  .eo-sheet__list { grid-template-columns: 120px minmax(0, 1fr); }
  .eo-pdhead__nr { font-size: 56px; }
  .eo-buybox { padding: 20px; }
}
@media (max-width: 1023px) {
  .eo-hero__inner { grid-template-columns: minmax(0, 1fr) 150px; gap: 32px; }
  .layout_wrap h1.eo-hero__title { font-size: 48px; }
  .eo-seal { width: 150px; height: 150px; }
  .eo-seal__in { width: 132px; height: 132px; gap: 5px; }
  .eo-seal__big { font-size: 21px; }
  .eo-nav__list { gap: 18px; }
  .eo-info { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .eo-info__lead { font-size: 26px; }

  /* Kopfzeile der Innenseiten: die Suche steht in einer zweiten Zeile ueber die ganze Breite */
  .eo-header--inner .eo-header__inner { flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; }
  .eo-header__search { order: 3; flex: 1 0 100%; max-width: none; }

  /* Artikelseite: Bild und Datenblatt nebeneinander, die Kaufbox darunter ueber die ganze Breite */
  .eo-pd__grid { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "media sheet" "buy buy"; }
  .eo-pdhead__nr { font-size: 48px; }
  .eo-rel__head { flex-wrap: wrap; gap: 8px 24px; }   /* "Passt auch fuer ..." rutscht unter die Ueberschrift statt sie umzubrechen */
  .layout_wrap h2.eo-rel__title { white-space: nowrap; }
  .eo-rel__row { grid-template-columns: 56px 110px minmax(0, 1fr) 130px 100px 44px; gap: 16px; }
  .eo-rev { grid-template-columns: 220px minmax(0, 1fr); gap: 24px 32px; }
  .eo-rev__item { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
}

/* ---- 11 Mobil (bis 767 px) ------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --pad-x: 20px; }

  /* Kopfzeile: Logo links, rechts "Korb" und Menue-Knopf (je 44 px hoch); die Suche der Innenseiten (48 px, Pfeil-Knopf) in der Zeile darunter */
  .eo-header__inner, .eo-header--inner .eo-header__inner { padding-top: 12px; padding-bottom: 14px; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
  .eo-logo { font-size: 17px; }
  .eo-logo__tld { font-size: 10px; }
  .eo-nav { margin-left: auto; width: auto; gap: 8px; }
  .eo-nav__toggle {
    display: block; order: 2; flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0;
    font-size: 0; line-height: 0; color: transparent;   /* der Text "Menue" bleibt fuer Screenreader, sichtbar sind die drei Striche */
    background-image: linear-gradient(var(--c-ink), var(--c-ink)), linear-gradient(var(--c-ink), var(--c-ink)), linear-gradient(var(--c-ink), var(--c-ink));
    background-repeat: no-repeat;
    background-size: 16px 1.5px;
    background-position: center 15px, center 21px, center 27px;
  }
  .eo-nav__list { order: 1; gap: 0; }
  .eo-nav__list li:not(:last-child) { display: none; }
  .eo-nav__list.is-open {
    flex-direction: column; align-items: flex-start; gap: 18px;
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 20px var(--pad-x) 24px;
    background: var(--c-yellow);
    border-top: 1px solid rgba(20, 20, 20, .18); border-bottom: 1px solid rgba(20, 20, 20, .18);
  }
  .eo-nav__list.is-open li:not(:last-child) { display: block; }
  .eo-nav__list a { display: inline-block; padding: 10px 0; min-height: 44px; }
  .eo-nav__list a.eo-cart { display: flex; align-items: center; height: 44px; min-height: 44px; padding: 0 12px; gap: 6px; font-size: 11px; letter-spacing: .06em; }
  .eo-cart__w { display: none; }
  .eo-cart__k { display: inline; }
  .eo-nav__list.is-open .eo-cart__w { display: inline; }
  .eo-nav__list.is-open .eo-cart__k { display: none; }

  .layout_wrap .eo-header__search .eo-search { flex-direction: row; height: 48px; border: var(--line); background: var(--c-paper); gap: 0; }
  .layout_wrap .eo-header__search .eo-search .eo-search__input,
  .layout_wrap .eo-header__search .eo-search .eo-search__input:hover,
  .layout_wrap .eo-header__search .eo-search .eo-search__input:focus { flex: 1; height: auto; padding: 0 14px; font-size: 13px; background: transparent !important; border: 0 !important; }
  .layout_wrap .eo-header__search .eo-search .eo-search__btn { width: 52px; height: auto; min-height: 44px; padding: 0; justify-content: center; font: 400 16px/1 var(--f-mono); }
  .eo-header__search .eo-search__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .eo-hero__inner { display: block; padding-top: 56px; padding-bottom: 40px; }
  .eo-hero__main { gap: 28px; }
  .layout_wrap h1.eo-hero__title { font-size: 40px; padding-right: 108px; min-height: 96px; }
  .eo-seal { position: absolute; right: var(--pad-x); top: 24px; width: 96px; height: 96px; }
  .eo-seal__in { width: 84px; height: 84px; gap: 3px; }
  .eo-seal__small { font-size: 6px; letter-spacing: .12em; }
  .eo-seal__big { font-size: 15px; }
  .layout_wrap .eo-search { flex-direction: column; height: auto; border: 0; background: transparent; gap: 8px; }
  .layout_wrap .eo-search .eo-search__input,
  .layout_wrap .eo-search .eo-search__input:hover,
  .layout_wrap .eo-search .eo-search__input:focus { height: 56px; flex: none; font-size: 16px; padding: 0 18px; background: var(--c-paper) !important; border: var(--line) !important; }
  .layout_wrap .eo-search .eo-search__btn { height: 56px; min-height: 56px; width: 100%; justify-content: center; }

  .eo-band__inner { padding: 40px var(--pad-x); gap: 28px; }
  .layout_wrap h2.eo-band__lead { font-size: 26px; }
  .eo-band__cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .eo-brands__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .eo-brands__list { gap: 4px 16px; }

  .eo-section__inner { padding: 48px var(--pad-x); }
  .eo-addons .eo-section__inner { padding: 40px var(--pad-x); }
  .layout_wrap h2.eo-h2 { font-size: 30px; }
  .eo-section__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .eo-kicker--right { text-align: left; }
  .eo-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .eo-card { padding: 20px; }

  .eo-addons .eo-grid--6 {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 4px;
  }
  .eo-addons .eo-mini { flex: 0 0 160px; scroll-snap-align: start; }

  .eo-photo { height: 240px; }
  .eo-info { grid-template-columns: minmax(0, 1fr); }
  .eo-info__text { padding: 40px var(--pad-x); }
  .eo-info__lead { font-size: 24px; }
  .eo-trust { padding: 40px var(--pad-x); border-left: 0; border-top: 1px solid var(--c-rule); }

  .eo-footer__inner { flex-direction: column; align-items: flex-start; }
  .eo-footer__links li.eo-footer__withdraw a, .eo-footer__links li.eo-footer__withdraw a:link, .eo-footer__links li.eo-footer__withdraw a:visited { display: inline-flex; align-items: center; min-height: 44px; }

  /* Kasse mobil: allein stehende Links und Auswahlfelder mit 44 px Trefferflaeche (Kassentest 14.10.2026: Loeschen 28 px, "Adresse aendern" 14 px, Land 36 px) */
  .of_action > span.of_delete .cssButton { min-height: 44px; }
  .of_action > span.of_delete .cssButtonText, .of_action > span.of_delete .cssButtonIcon { line-height: 42px; }
  a.arrow { display: inline-block; padding: 15px 0; margin: -15px 0; }
  .ordertotal_row.ot_select select, .shipping_container select { min-height: 44px; }
  .eo-logo, .eo-logo:link, .eo-logo:visited { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .breadcrumb a, .breadcrumb a:link, .breadcrumb a:visited { position: relative; }
  .breadcrumb a::after { content: ""; position: absolute; left: -4px; right: -4px; top: -14px; bottom: -14px; }   /* Trefferflaeche 44 px, ohne die Unterstreichung zu verschieben */
  .layout_wrap input[type=password] { min-height: 44px; }
  .layout_wrap h1.eo-list-title { font-size: 30px; }
  .layout_wrap h1.eo-list-title .eo-list-title__nr { font-size: 30px; }
  h1, .headline { font-size: 28px; }
  .eo-pd__more .subline, .eo-pd__more .box_products_head .title, .box_products_head .title { font-size: 28px; }

  /* Artikelseite mobil: Kopf, Bild, Kaufbox, Datenblatt, Oft zusammen gekauft, Bewertungen */
  .eo-pdhead__inner { padding: 20px var(--pad-x) 24px; gap: 14px; }
  .eo-crumbs__list { display: none; }
  /* Trefferflaechen mindestens 44 px, ohne das Layout zu verschieben (Innenabstand + negativer Aussenabstand) */
  .eo-crumbs__back, .eo-crumbs__back:link, .eo-crumbs__back:visited { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -10px 0; align-self: flex-start; }
  .eo-pdhead__row { gap: 12px; }
  .eo-pdhead__nr { font-size: 38px; }
  .eo-pdhead__name { font-size: 20px; line-height: 1.15; letter-spacing: -.01em; }
  .eo-pdhead__meta { gap: 8px; }
  .eo-pdhead__badge { height: 22px; padding: 0 8px; font-size: 10px; }
  .eo-pdhead__rating { flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; padding: 7px 0; margin: -7px 0; }
  .eo-pdhead .eo-stars { font-size: 13px; letter-spacing: .06em; }
  .layout_wrap h1.eo-pdhead__title--row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .eo-pdhead__line { font-size: 11px; gap: 6px 10px; }
  .eo-pdhead--d .eo-pdhead__rating { flex-direction: row; align-items: center; gap: 6px; padding: 14px 0; margin: -14px 0; }

  .eo-pd__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "buy" "sheet"; gap: 20px; padding: 20px 0; }
  .eo-pd__frame { aspect-ratio: 4 / 3; }
  .eo-pd__frame--empty { aspect-ratio: auto; height: 96px; padding: 10px; }   /* Abweichung vom Entwurf: nur 0,7 % der Artikel haben ein Foto */
  .eo-pd__nophoto { font-size: 10px; }
  .eo-pd__media .eo-pd__photohint { display: none; }
  .eo-pd__photohint--m { display: block; font-size: 10px; }
  .eo-buybox { padding: 18px; gap: 14px; }
  .eo-buybox__amount { font-size: 30px; }
  .eo-buybox__pack { font-size: 12px; }
  .eo-buybox__ship { padding: 10px 0; font-size: 12px; }
  .eo-buybox__row { grid-template-columns: 56px minmax(0, 1fr); }
  .eo-buybox__usp { gap: 6px; font-size: 11px; }
  .eo-sheet__list { grid-template-columns: 128px minmax(0, 1fr); }
  .eo-sheet__list dt { padding: 11px 0; font-size: 10px; }
  .eo-sheet__list dd { padding: 9px 0; font-size: 14px; }

  .eo-pd__rel { padding-bottom: 32px; }
  .eo-pd__rel > .eo-pd__inner { gap: 12px; }
  .eo-rel__head { display: contents; }   /* Titel, Liste, "Passt auch fuer", Preishinweis: Reihenfolge ueber order */
  .layout_wrap h2.eo-rel__title { order: 1; font-size: 20px; }
  .eo-rel__list { order: 2; }
  .eo-rel__fits { order: 3; text-align: left; font-size: 10px; line-height: 1.6; letter-spacing: .06em; }
  .eo-rel__tax { order: 4; }
  .eo-rel__row { grid-template-columns: 44px minmax(0, 1fr) auto 44px; grid-template-areas: "img nr price add" "img name price add"; gap: 2px 12px; padding: 8px 0; }
  .eo-rel__img { grid-area: img; width: 44px; height: 44px; }
  .eo-rel__nr { grid-area: nr; font-size: 14px; align-self: end; }
  .eo-rel__name { grid-area: name; font-size: 13px; align-self: start; }
  .eo-rel__stock { display: none; }
  .eo-rel__price { grid-area: price; font-size: 14px; }
  .eo-rel__row .eo-add { grid-area: add; }
  .layout_wrap .eo-rel__row .eo-add .eo-add__btn { width: 44px; height: 44px; min-height: 44px; }
  .layout_wrap .eo-rel__row .eo-add .eo-add__btn::after { inset: 0; }

  .eo-pd__reviews > .eo-pd__inner { padding-top: 28px; padding-bottom: 28px; }
  .eo-rev { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "list" "actions"; grid-template-rows: auto; gap: 16px; }
  .eo-rev--empty { grid-template-areas: "summary" "actions"; }
  .layout_wrap h2.eo-rev__title { font-size: 20px; }
  .eo-rev__summary { gap: 6px; }
  .eo-rev__score { flex-direction: row; align-items: center; gap: 10px; }
  .eo-rev__avg b { font-size: 28px; }
  .eo-rev__avg span { display: none; }
  .eo-stars--lg { font-size: 18px; letter-spacing: .1em; }
  .eo-rev__count { font-size: 11px; }
  .eo-rev__actions { align-items: stretch; }
  .eo-rev__write, .eo-rev__write:link, .eo-rev__write:visited { justify-content: center; min-height: 48px; }
  .eo-rev__all, .eo-rev__all:link, .eo-rev__all:visited { align-self: flex-start; padding: 14px 0; margin: -14px 0; }
  .eo-rev__item { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 0; }
  .eo-rev__who { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "stars date" "author author"; gap: 8px; align-items: center; }
  .eo-rev__who .eo-stars { grid-area: stars; font-size: 14px; letter-spacing: .08em; }
  .eo-rev__date { grid-area: date; }
  .eo-rev__author { grid-area: author; }
  .eo-rev__text { font-size: 14px; line-height: 1.6; }
}