/* Lannertmarkt + Ille — shared layout (header / footer / global) */

/* Immer helles Farbschema: sonst rendert der Browser im Dark-Mode
   native Checkboxen/Radios/Selects schwarz statt weiß. */
:root, html, body.hi-body { color-scheme: light; }

:root {
  --hi-red: #d0111b;
  --hi-red-dark: #b00e16;
  --hi-dark: #2b2b2b;
  --hi-darker: #1f1f1f;
  --hi-light: #f2f2f2;
  /* Seitenhintergrund: kein reines Weiß, sonst "schwimmen" die weißen Karten */
  --hi-page: #f6f7f9;
  --hi-radius: 6px;
  --hi-header-h: 210px;
}

* { box-sizing: border-box; }

/* Sprungziele nicht unter der klebenden Kopfzeile verstecken.
   Frueher stand hier html{scroll-padding-top}. Das galt aber auch fuer den
   Fokus-Scroll des Suchfelds: die Kopfzeile klebt oben und liegt damit immer
   im Padding-Bereich, also schob Chrome die Seite bei jedem Tastendruck ein
   Stueck nach oben. Als scroll-margin am Sprungziel wirkt der Abstand nur
   noch bei Ankern und scrollIntoView. */
:root { --hi-anchor-pad: 220px; }
[id] { scroll-margin-top: var(--hi-anchor-pad); }
.hi-header, .hi-header [id] { scroll-margin-top: 0; }

body.hi-body {
  margin: 0;
  padding: 0;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1f1f1f;
  background: #fff;
  overflow-x: hidden;
}

/* zero-specificity defaults so component rules below always win */
:where(.hi-body a) { color: inherit; }
.hi-body a { text-decoration: none; }
.hi-body a:hover { text-decoration: none; opacity: .85; }

.hi-body :focus,
.hi-body :focus-visible { outline: none !important; box-shadow: none !important; }

/* всегда родной светлый чекбокс/радио (daisyUI красит их тёмным) */
.hi-body input[type="checkbox"],
.hi-body input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  color-scheme: light;
  accent-color: var(--hi-red);
  background: #fff;
  border: 0;
  width: 16px;
  height: 16px;
  opacity: 1;
}

.hi-body button,
.hi-body input,
.hi-body select,
.hi-body textarea { font-family: inherit; border-radius: var(--hi-radius); }

.hi-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: 46px;
}

/* ---------- header ---------- */

.hi-header {
  position: sticky;
  top: 0;
  z-index: 800;
  background: var(--hi-red);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

.hi-topbar {
  background: var(--hi-dark);
  color: #fff;
  font-size: 14px;
}

.hi-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 42px;
}

.hi-topbar__left a { text-decoration: none; font-weight: 600; }
.hi-topbar__sep { opacity: .85; margin: 0 2px; }

.hi-topbar__center {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hi-topbar__btn {
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 4px 16px;
  font-weight: 600;
  white-space: nowrap;
}

.hi-topbar__right { white-space: nowrap; }

.hi-main-bar { background: var(--hi-red); }

.hi-main-bar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 110px;
}

.hi-burger { display: none; }

.hi-header .hi-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff !important;
  font-family: 'Archivo Black', 'Barlow', sans-serif;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: .06em;
  flex: 0 0 auto;
}

.hi-search-wrap { flex: 1 1 auto; max-width: 640px; margin-inline: auto; }

.hi-search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--hi-light);
  border-radius: 4px;
  height: 52px;
}

.hi-search__input {
  flex: 1 1 auto;
  height: 52px;
  border: 0;
  background: transparent;
  padding: 0 20px;
  font-size: 16px;
  color: #1f1f1f;
}

.hi-search__input::placeholder { color: #8a8a8a; }

.hi-search__btn {
  border: 0;
  background: transparent;
  width: 56px;
  height: 52px;
  font-size: 20px;
  color: #1f1f1f;
  cursor: pointer;
}

.hi-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
  overflow: hidden;
  z-index: 900;
}

.hi-suggest a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
}

.hi-suggest a:last-child { border-bottom: 0; }
.hi-suggest a:hover { background: var(--hi-light); }
.hi-suggest img { width: 44px; height: 44px; object-fit: contain; }
.hi-suggest__name { flex: 1 1 auto; font-size: 14px; }
.hi-suggest__price { font-weight: 700; white-space: nowrap; }

.hi-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  color: #fff;
}

.hi-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 22px;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.hi-search-toggle { display: none; }

.hi-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #fff;
  color: var(--hi-red);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.hi-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hi-cart { position: relative; display: flex; align-items: center; gap: 6px; }
.hi-cart__total { color: #fff; font-weight: 600; white-space: nowrap; }

/* Warenkorb ist eine Schublade am rechten Rand, kein Dropdown.
   Panel und Abdunklung liegen im Stapelkontext der Kopfzeile (z-index 800),
   deshalb decken sie den Seiteninhalt ab, ohne aus dem Header zu wandern. */
.hi-cart__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 1;
}

.hi-cart__backdrop.is-open { opacity: 1; }
.hi-cart__backdrop[hidden] { display: none; }

.hi-cart__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #1f1f1f;
  border-radius: 0;
  box-shadow: -14px 0 40px rgba(0, 0, 0, .25);
  padding: 0;
  transform: translateX(100%);
  transition: transform .26s ease;
  z-index: 2;
}

.hi-cart__panel.is-open { transform: translateX(0); }
.hi-cart__panel[hidden] { display: none; }

.hi-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e7e7e9;
}

.hi-cart__title { font-weight: 700; font-size: 17px; }
.hi-cart__count { color: #6b6b6b; font-weight: 600; }

.hi-cart__close {
  border: 0;
  background: transparent;
  color: #1f1f1f;
  font-size: 28px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.hi-cart__close:hover { color: var(--hi-red); }

.hi-cart__scroll { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px; }

.hi-cart__foot {
  flex: 0 0 auto;
  border-top: 1px solid #e7e7e9;
  padding: 12px 16px 16px;
  background: #fff;
}

.hi-cart__list { list-style: none; margin: 0 0 10px; padding: 0; }
.hi-cart__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eee; }
.hi-cart__thumb img { width: 48px; height: 48px; object-fit: contain; }
.hi-cart__info { flex: 1 1 auto; display: flex; flex-direction: column; font-size: 14px; }
.hi-cart__name { font-weight: 600; }
.hi-cart__qty { color: #666; white-space: nowrap; }
.hi-cart__remove { border: 0; background: transparent; color: #999; cursor: pointer; }
.hi-cart__totals div { display: flex; justify-content: space-between; font-size: 14px; padding: 2px 0; }
.hi-cart__actions { display: flex; gap: 8px; margin-top: 10px; }
.hi-cart__actions .hi-btn { flex: 1 1 0; text-align: center; }
.hi-cart__empty { text-align: center; color: #666; margin: 12px 0; }

.hi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.hi-btn--red { background: var(--hi-red); color: #fff; }
.hi-btn--red:hover { background: var(--hi-red-dark); opacity: 1; }
.hi-btn--ghost { background: var(--hi-light); color: #1f1f1f; }

/* ---------- nav ---------- */

.hi-nav { background: var(--hi-red); }
.hi-nav__inner { position: relative; }

.hi-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0;
  column-gap: 34px;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 58px;
}

.hi-nav__item { position: relative; height: 100%; display: flex; align-items: center; }

.hi-nav__link {
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 58px;
}

/* подменю не гаснет мгновенно: 0.35 с форы на увод мыши */
.hi-nav__sub {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .16s ease .32s, visibility 0s linear .48s;
}

.hi-nav__item:hover > .hi-nav__sub,
.hi-nav__sub:hover {
  visibility: visible;
  opacity: 1;
  transition: opacity .12s ease 0s, visibility 0s linear 0s;
}

.hi-nav__sub-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .2);
  border-radius: 0 0 6px 6px;
  padding: 18px 24px;
  min-width: 260px;
  max-width: 720px;
}

.hi-nav__sub-link { font-size: 15px; color: #1f1f1f; }
.hi-nav__sub-link:hover { color: var(--hi-red); }

/* ---------- left drawer ---------- */

.hi-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  max-width: 86vw;
  height: 100%;
  background: #fff;
  z-index: 1100;
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow-y: auto;
  scrollbar-width: none;
}

.hi-drawer::-webkit-scrollbar { width: 0; }
.hi-drawer.is-open { transform: translateX(0); }

.hi-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--hi-red);
  color: #fff;
  padding: 16px 20px;
  font-weight: 700;
}

.hi-drawer__close { border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.hi-drawer__list, .hi-drawer__sub { list-style: none; margin: 0; padding: 0; }
.hi-drawer__list > li > a { display: block; padding: 12px 20px; font-weight: 600; border-bottom: 1px solid #eee; }
.hi-drawer__sub > li > a { display: block; padding: 8px 20px 8px 34px; font-size: 14px; color: #555; }

.hi-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 1050;
}

/* ---------- main ---------- */

.hi-main { display: block; min-height: 40vh; background: var(--hi-page); }

/* ---------- footer ---------- */

.hi-footer { background: var(--hi-dark); color: #fff; }

/* .hi-footer-scoped, чтобы правила футера не проигрывали home.css (грузится позже) */
.hi-footer .hi-newsletter { background: var(--hi-darker); border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 0; }

.hi-footer .hi-newsletter__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding-block: 40px;
}

.hi-footer .hi-newsletter__text { margin: 0; max-width: 620px; font-size: 16px; line-height: 1.5; }

.hi-footer .hi-newsletter__form {
  display: flex;
  justify-self: start;
  align-items: center;
  background: #fff;
  border-radius: 4px;
  height: 52px;
  width: 430px;
  max-width: 100%;
  overflow: hidden;
}

.hi-footer .hi-newsletter__icon { display: flex; align-items: center; justify-content: center; width: 52px; flex: 0 0 auto; color: #1f1f1f; }
.hi-footer .hi-newsletter__input { flex: 1 1 auto; min-width: 0; border: 0; height: 52px; padding: 0 10px; color: #1f1f1f; font-size: 15px; background: #fff; }
.hi-footer .hi-newsletter__input::placeholder { color: #8a8a8a; }

.hi-footer .hi-newsletter__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 44px;
  margin-right: 5px;
  border: 0;
  border-radius: 4px;
  background: #000 !important;
  color: #fff;
  cursor: pointer;
}

.hi-footer__main { padding-block: 74px 62px; }

.hi-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}

.hi-footer__logo {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  background: var(--hi-red);
  color: #fff;
  width: 106px;
  height: 106px;
  padding: 0 14px;
  font-family: 'Archivo Black', 'Barlow', sans-serif;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: .04em;
}

/* Breites Logo statt der frueheren quadratischen Marke: Breite fest, Hoehe aus
   dem Seitenverhaeltnis (607x158), damit nichts verzerrt wird. */
.hi-footer__logo-img { display: block; width: 190px; height: auto; }

.hi-footer__label { margin: 22px 0 8px; font-size: 15px; }
.hi-footer__label a { text-decoration: none; }
.hi-footer a.hi-footer__phone { display: inline-block; font-size: 22px; font-weight: 700; text-decoration: none; margin-bottom: 10px; }
.hi-footer__hours { margin: 0 0 8px; font-size: 15px; }
.hi-footer__cta { margin-top: 10px; }
.hi-footer__trust { display: flex; align-items: center; gap: 8px; margin-top: 26px; }

.hi-trust {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: contain;
}

.hi-footer__title { margin: 0 0 30px; font-size: 17px; font-weight: 700; }
.hi-footer__list { list-style: none; margin: 0; padding: 0; }
.hi-footer__list li { margin-bottom: 14px; font-size: 15px; }
.hi-footer__text { margin: 0 0 22px; font-size: 15px; }
.hi-footer__text a { text-decoration: none; }

.hi-footer__bottom { background: var(--hi-darker); padding-block: 26px 16px; font-size: 13px; color: rgba(255, 255, 255, .6); }

.hi-footer__social { display: flex; align-items: center; justify-content: center; gap: 18px; }

.hi-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, .75);
}

.hi-social:hover { color: #fff; opacity: 1; }

.hi-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}

.hi-footer__legal a { text-decoration: none; }

/* ---------- cookie banner ---------- */

.hi-cookie {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hi-cookie[hidden] { display: none; }

.hi-cookie__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 31, 31, .55);
  backdrop-filter: blur(2px);
}

.hi-cookie__dialog {
  position: relative;
  width: 100%;
  max-width: 1000px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  border-top: 4px solid var(--hi-red);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: hi-cookie-in .28s ease-out both;
}

@keyframes hi-cookie-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hi-cookie__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 26px 0;
}

.hi-cookie__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  background: var(--hi-red);
  color: #fff;
}

.hi-cookie__title {
  margin: 0;
  flex: 1 1 auto;
  font-size: 22px;
  font-weight: 700;
  color: var(--hi-darker);
}

.hi-cookie__close {
  border: 0;
  background: none;
  color: #6b6b6b;
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  border-radius: 999px;
}

.hi-cookie__close:hover { background: var(--hi-light); color: var(--hi-darker); }

.hi-cookie__body {
  display: grid;
  grid-template-columns: 1.15fr 1fr .85fr;
  gap: 28px;
  padding: 18px 26px 22px;
}

.hi-cookie__col { min-width: 0; }
.hi-cookie__col p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: #4a4a4a; }
.hi-cookie__col p:last-child { margin-bottom: 0; }
.hi-cookie__col a { color: var(--hi-red); text-decoration: none; font-weight: 600; }

.hi-cookie__lead { font-weight: 700 !important; color: var(--hi-darker) !important; }

.hi-cookie__points { list-style: none; margin: 0; padding: 0; }

.hi-cookie__points li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  font-size: 14px;
  line-height: 1.45;
  color: #4a4a4a;
}

.hi-cookie__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hi-red);
}

.hi-cookie__col--actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
}

.hi-cookie__dialog .hi-cookie__btn {
  width: 100%;
  padding: 13px 18px;
  font-size: 15px;
  border-radius: var(--hi-radius);
  border: 2px solid transparent;
}

.hi-cookie__dialog .hi-cookie__btn--outline {
  background: #fff;
  color: var(--hi-darker);
  border-color: var(--hi-darker);
}

.hi-cookie__dialog .hi-cookie__btn--outline:hover { background: var(--hi-light); opacity: 1; }

.hi-cookie__link-btn {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--hi-darker);
  padding: 8px 4px;
  text-decoration: none;
}

.hi-cookie__link-btn:hover { color: var(--hi-red); }

/* --- Anpassen --- */

.hi-cookie__prefs { padding: 4px 26px 22px; }
.hi-cookie__prefs[hidden] { display: none; }

.hi-cookie__prefs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.hi-cookie__pref {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
}

.hi-cookie__pref-text { display: block; flex: 1 1 auto; }
.hi-cookie__pref-name { display: block; font-weight: 700; font-size: 14px; color: var(--hi-darker); }
.hi-cookie__pref-desc { display: block; font-size: 13px; line-height: 1.4; color: #6b6b6b; margin-top: 2px; }

.hi-cookie__switch { position: relative; flex: 0 0 42px; width: 42px; height: 24px; margin-top: 2px; }

.hi-body .hi-cookie__switch input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 2;
}

.hi-cookie__slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #cfcfcf;
  transition: background .18s ease;
}

.hi-cookie__slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .18s ease;
}

.hi-cookie__switch input:checked ~ .hi-cookie__slider { background: var(--hi-red); }
.hi-cookie__switch input:checked ~ .hi-cookie__slider::after { transform: translateX(18px); }
.hi-cookie__switch--locked { opacity: .65; }
.hi-cookie__switch--locked input { cursor: not-allowed; }

.hi-cookie__prefs-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.hi-cookie__prefs-actions .hi-cookie__btn { width: auto; }
.hi-cookie__prefs-actions .hi-cookie__link-btn { margin-right: auto; }

.hi-cookie__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 14px 26px;
  border-top: 1px solid #e8e8e8;
  background: #fafafa;
  border-radius: 0 0 10px 10px;
  font-size: 14px;
  font-weight: 600;
}

.hi-cookie__foot a { color: var(--hi-darker); }
.hi-cookie__foot a:hover { color: var(--hi-red); }

@media (max-width: 1023px) {
  .hi-cookie__body { grid-template-columns: 1fr 1fr; }
  .hi-cookie__col--actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hi-cookie__col--actions .hi-cookie__btn { width: auto; flex: 1 1 220px; }
}

@media (max-width: 767px) {
  .hi-cookie { padding: 12px; }
  .hi-cookie__dialog { max-height: calc(100vh - 24px); }
  .hi-cookie__head { padding: 18px 18px 0; }
  .hi-cookie__title { font-size: 19px; }
  .hi-cookie__body { grid-template-columns: 1fr; gap: 18px; padding: 16px 18px 20px; }
  .hi-cookie__col--actions { flex-direction: column; }
  .hi-cookie__col--actions .hi-cookie__btn { width: 100%; flex: none; }
  .hi-cookie__prefs { padding: 0 18px 20px; }
  .hi-cookie__prefs-grid { grid-template-columns: 1fr; }
  .hi-cookie__prefs-actions .hi-cookie__btn { width: 100%; }
  .hi-cookie__prefs-actions .hi-cookie__link-btn { margin-right: 0; width: 100%; }
  .hi-cookie__foot { padding: 12px 18px; gap: 16px; }
}

/* ---------- toasts ---------- */

.hi-toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.hi-toasts:empty { display: none; }

/* einheitlich: weiße Schrift auf Hausrot, Links fett statt unterstrichen */
.hi-toasts .alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
  background: var(--hi-red);
  color: #fff;
  border: 0;
  border-radius: var(--hi-radius);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.45;
  width: 360px;
  max-width: 100%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  opacity: 1;
  animation: hi-toast-in .18s ease-out;
}

@keyframes hi-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.hi-toasts .alert > .hi-toast__text {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hi-toasts .alert a,
.hi-toasts .alert a:hover { color: #fff; text-decoration: none; font-weight: 700; }

.hi-toasts .hi-toast__close {
  flex: 0 0 auto;
  align-self: center;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: .9;
  transition: background .15s ease, opacity .15s ease;
}

.hi-toasts .hi-toast__close:hover { opacity: 1; background: rgba(255, 255, 255, .3); }

.hi-toasts .alert-success,
.hi-toasts .alert-danger { background: var(--hi-red); }
.hi-toasts .btn-close { display: none; }

/* старый отдельный контейнер каталога больше не используется */
#hc-toast { display: none !important; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .hi-container { padding-inline: 24px; }
  .hi-nav__list { gap: 22px; overflow-x: auto; scrollbar-width: none; }
  .hi-nav__list::-webkit-scrollbar { height: 0; }
  .hi-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 767px) {
  .hi-container { padding-inline: 16px; }

  .hi-topbar__left,
  .hi-topbar__right { display: none; }

  .hi-topbar__inner { justify-content: center; height: auto; padding-block: 10px; }
  .hi-topbar__center { flex-direction: column; gap: 8px; text-align: center; }
  .hi-topbar__claim { font-size: 15px; }

  .hi-main-bar__inner { height: 74px; gap: 8px; justify-content: space-between; }

  .hi-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    cursor: pointer;
    order: 2;
  }

  .hi-burger span { display: block; width: 26px; height: 2px; background: #fff; }

  .hi-header .hi-logo { order: 1; font-size: 19px; }
  .hi-actions { order: 3; gap: 6px; }
  .hi-search-toggle { display: inline-flex; }
  .hi-cart__total { display: none; }

  .hi-search-wrap {
    order: 4;
    flex: 0 0 100%;
    max-width: none;
    display: none;
    padding-bottom: 12px;
  }

  .hi-search-wrap.is-open { display: block; }
  .hi-main-bar__inner { flex-wrap: wrap; height: auto; padding-block: 12px; }

  .hi-nav { display: none; }

  .hi-footer .hi-newsletter__inner { grid-template-columns: 1fr; align-items: stretch; gap: 20px; padding-block: 28px; }
  .hi-footer .hi-newsletter__form { width: 100%; }
  .hi-footer__main { padding-block: 32px; }
  .hi-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .hi-footer__title { margin-bottom: 16px; }
  .hi-footer__legal { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }


  .hi-toasts { right: 16px; left: 16px; bottom: 16px; align-items: center; }
  .hi-toasts .alert { max-width: 100%; width: 100%; }
}

/* ---------- section-01-header — 1:1 c референсом lannertmarkt-ille.de ---------- */

:root { --hi-header-h: 170px; --hi-anchor-pad: 180px; }

.hi-header .hi-container { padding-inline: 48px; }

.hi-topbar__caret { font-size: 12px; margin-left: 2px; }

.hi-main-bar__inner { height: 81px; gap: 24px; }

.hi-header .hi-logo { display: flex; align-items: center; flex: 0 0 auto; margin-left: 4px; }
/* Neues Logo ist breiter als hoch (607x158); Hoehe so gewaehlt, dass die Breite
   der frueheren Wortmarke entspricht - Seitenverhaeltnis bleibt unveraendert. */
.hi-logo__img { display: block; height: 62px; width: auto; }

.hi-search-wrap { flex: 0 1 641px; max-width: 641px; margin-left: auto; margin-right: 0; }
.hi-search { height: 51px; }
.hi-search__input { height: 51px; }
.hi-search__btn { height: 51px; width: 52px; font-size: 21px; }

.hi-actions { gap: 4px; margin-right: 4px; }
.hi-icon-btn { font-size: 21px; }
.hi-cart { gap: 8px; }

.hi-nav__list { flex-wrap: nowrap; column-gap: 39px; min-height: 47px; }
.hi-nav__item { height: 47px; }
.hi-nav__link { position: relative; height: 47px; font-weight: 700; font-size: 16.5px; }
.hi-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #fff;
}

@media (max-width: 1100px) {
  .hi-header .hi-container { padding-inline: 24px; }
  .hi-nav__list { column-gap: 26px; }
}

@media (max-width: 767px) {
  .hi-topbar__inner { height: auto; padding-block: 6px; }
  .hi-topbar__center { flex-direction: row; align-items: center; gap: 18px; }
  .hi-topbar__claim { display: block; max-width: 152px; font-size: 13px; line-height: 1.2; text-align: center; }
  .hi-topbar__btn { font-size: 13px; padding: 4px 14px; }

  .hi-main-bar__inner { height: 78px; padding-block: 0; gap: 4px; justify-content: flex-start; }
  .hi-header .hi-logo { margin-left: 0; }
  .hi-logo__img { height: 44px; }

  .hi-burger { order: 2; margin-left: auto; gap: 5px; align-items: center; }
  .hi-burger span { width: 24px; }
  .hi-actions { order: 3; gap: 4px; margin-right: 0; }
  .hi-icon-btn { width: 40px; height: 40px; font-size: 22px; }

  .hi-search-wrap { flex: 0 0 100%; max-width: none; margin-left: 0; }
}

/* ---------- Rutine: шапка/футер/бейджи/скругления ---------- */

/* футер до самого низа даже на короткой странице, без белой полосы под ним */
html { background: var(--hi-darker); }

body.hi-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--hi-darker);
}

body.hi-body > .hi-main { flex: 1 0 auto; background: var(--hi-page); }
body.hi-body > .hi-footer { flex: 0 0 auto; }

/* шапка липкая на всех страницах и полностью непрозрачная */
.hi-header {
  position: sticky;
  top: 0;
  z-index: 800;
  background: var(--hi-red);
  isolation: isolate;
}

.hi-topbar, .hi-main-bar, .hi-nav { background-clip: padding-box; }

/* каталог-панель выше шапки и cookie-баннера */
.hi-drawer { z-index: 1250; }
.hi-drawer-backdrop { z-index: 1240; }

/* бейджи: в углу иконки, без наложения на соседнюю подпись */
.hi-badge {
  top: 1px;
  right: 1px;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--hi-red);
}

.hi-actions #hi-wishlist { display: inline-flex; }
.hi-cart__total { margin-left: 2px; }

/* единое скругление полей и выпадашек */
.hi-search,
.hi-suggest,
.hi-footer .hi-newsletter__form { border-radius: var(--hi-radius); }

.hi-body .hi-search__input,
.hi-body .hi-newsletter__input { border-radius: var(--hi-radius) 0 0 var(--hi-radius); }

/* фокус подсвечивает всю плашку подписки, а не рисует кривую рамку у input */
.hi-footer .hi-newsletter__input:focus,
.hi-footer .hi-newsletter__input:focus-visible { outline: 0; box-shadow: none; }
.hi-footer .hi-newsletter__form:focus-within { box-shadow: 0 0 0 2px rgba(195, 23, 34, .6); }

/* выбор сохранённого адреса в браузере красит поле в голубой (#e8f0fe) и меняет
   цвет текста — возвращаем белый фон и тёмный текст. Фон рисуем внутренней
   тенью: сам background-color при автозаполнении переопределить нельзя. */
.hi-footer .hi-newsletter__input:-webkit-autofill,
.hi-footer .hi-newsletter__input:-webkit-autofill:hover,
.hi-footer .hi-newsletter__input:-webkit-autofill:focus,
.hi-footer .hi-newsletter__input:-webkit-autofill:active,
.hi-footer .hi-newsletter__input:autofill {
  -webkit-text-fill-color: #1f1f1f;
  color: #1f1f1f;
  caret-color: #1f1f1f;
  background-color: #fff !important;
  -webkit-box-shadow: 0 0 0 100px #fff inset !important;
  box-shadow: 0 0 0 100px #fff inset !important;
  filter: none;
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* ---------- breadcrumbs (shared by every page) ----------
   First entry is the house icon instead of the word "Home", the trail stays
   on one line. The icon is drawn from an inline SVG mask, so it does not
   depend on the icon webfont. */
.hi-body .hp-crumbs,
.hi-body .hc-crumbs,
.hi-body .hco-crumbs,
.hi-body .breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  list-style: none;
  margin: 16px 0 18px;
  padding: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #6b6b6b;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.hi-body .hp-crumbs::-webkit-scrollbar,
.hi-body .hc-crumbs::-webkit-scrollbar,
.hi-body .hco-crumbs::-webkit-scrollbar,
.hi-body .breadcrumb::-webkit-scrollbar { height: 0; }

.hi-body .hp-crumbs li,
.hi-body .hc-crumbs li,
.hi-body .hco-crumbs li,
.hi-body .breadcrumb li { display: flex; align-items: center; gap: 6px; min-width: 0; }

.hi-body .breadcrumb li + li::before { content: '\203A'; color: #b7b9be; }

.hi-body .hp-crumbs li:first-child > a,
.hi-body .hc-crumbs li:first-child > a,
.hi-body .hco-crumbs li:first-child > a,
.hi-body .breadcrumb li:first-child > a {
  display: inline-flex;
  align-items: center;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.hi-body .hp-crumbs li:first-child > a > *,
.hi-body .hc-crumbs li:first-child > a > *,
.hi-body .hco-crumbs li:first-child > a > *,
.hi-body .breadcrumb li:first-child > a > * { display: none; }

.hi-body .hp-crumbs li:first-child > a::before,
.hi-body .hc-crumbs li:first-child > a::before,
.hi-body .hco-crumbs li:first-child > a::before,
.hi-body .breadcrumb li:first-child > a::before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  background-color: var(--hi-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.7 1.5 11.3h3.2V21h5.6v-6.2h3.4V21h5.6v-9.7h3.2z'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.7 1.5 11.3h3.2V21h5.6v-6.2h3.4V21h5.6v-9.7h3.2z'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
}

/* ---------- Rutine 9: Mobilansicht (390 px) ----------
   Klebrig bleibt nur die Hauptleiste: Burger links, Logo daneben, rechts genau
   drei Symbole (Konto, Merkzettel, Warenkorb) mit Zählern. Die Suche steht
   dauerhaft in einer zweiten Zeile, damit kein Umschalter nötig ist. */
@media (max-width: 767px) {
  /* Die Servicezeile entfaellt, die Hauptleiste klebt direkt oben. */
  .hi-header { top: 0; }

  .hi-main-bar__inner {
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    padding-block: 8px 0;
    gap: 6px;
  }

  /* Burger ganz links, Logo direkt daneben, Symbole rechts */
  .hi-burger { order: 0; margin-left: 0; margin-right: 2px; }
  .hi-header .hi-logo { order: 1; margin-right: auto; }
  .hi-actions { order: 3; gap: 2px; }

  .hi-search-toggle { display: none !important; }

  .hi-search-wrap {
    order: 4;
    display: block;
    flex: 0 0 100%;
    max-width: none;
    margin: 0;
    padding-bottom: 8px;
  }

  .hi-search,
  .hi-search__input,
  .hi-search__btn { height: 42px; }

  .hi-search__btn { width: 46px; font-size: 17px; }
  .hi-search__input { font-size: 15px; }

  /* Zähler auch ohne Text sichtbar halten */
  .hi-icon-btn { width: 38px; height: 38px; font-size: 20px; }
  .hi-badge { font-size: 10px; min-width: 16px; height: 16px; line-height: 16px; }

  :root { --hi-anchor-pad: 130px; }
}

/* ---------- Menue-Button (drei Striche) in der Kopfzeile ----------
   Der Katalog-Schieber gab es nur auf dem Handy. Der Knopf steht jetzt auf
   jeder Breite links neben dem Logo und oeffnet/schliesst dieselbe Schublade. */
.hi-header .hi-burger {
  order: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  height: 42px;
  padding: 0 12px;
  margin: 0 6px 0 0;
  border: 0;
  border-radius: var(--hi-radius);
  background: rgba(0, 0, 0, .12);
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease;
}

.hi-header .hi-burger:hover,
.hi-header .hi-burger:focus-visible { background: rgba(0, 0, 0, .26); }
.hi-header .hi-burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hi-header .hi-burger[aria-expanded="true"] { background: rgba(0, 0, 0, .3); }

.hi-header .hi-burger__bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 22px;
  height: 18px;
  background: none;
}

.hi-header .hi-burger__bars > span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .18s ease, opacity .18s ease;
}

.hi-header .hi-burger[aria-expanded="true"] .hi-burger__bars > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hi-header .hi-burger[aria-expanded="true"] .hi-burger__bars > span:nth-child(2) { opacity: 0; }
.hi-header .hi-burger[aria-expanded="true"] .hi-burger__bars > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hi-header .hi-burger__label {
  width: auto;
  height: auto;
  background: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: #fff;
}

@media (max-width: 900px) {
  /* Auf schmalen Leisten bleiben nur die drei Striche */
  .hi-header .hi-burger { padding: 0 9px; gap: 0; }
  .hi-header .hi-burger__label { display: none; }
}

/* ---------- Zaehler an Merkzettel und Warenkorb ---------- */
.hi-header .hi-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  background: #fff;
  color: var(--hi-red);
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--hi-red);
}

.hi-header .hi-badge[hidden] { display: none; }

/* kurzer Puls, wenn sich der Zaehler aendert */
.hi-header .hi-badge.is-bump { animation: hi-badge-bump .36s ease; }

@keyframes hi-badge-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---------- keine Unterstreichungen im ganzen Shop ---------- */

.hi-body a,
.hi-body a:hover,
.hi-body a:focus,
.hi-body u,
.hi-body ins,
.hi-body summary,
.hi-body abbr[title] { text-decoration: none; }

/* ---------- Handy: Symbole in derselben Zeile wie das Logo ----------
   Burger + Logo + Konto/Merkzettel/Warenkorb passten bei 360-390 px nicht in
   eine Zeile (Summe > verfuegbare Breite), deshalb rutschten die Symbole unter
   das Logo. Logo und Symbole werden etwas kleiner, damit die erste Zeile haelt;
   die Suche bleibt weiterhin die zweite Zeile. */
@media (max-width: 767px) {
  .hi-main-bar__inner { gap: 4px; }

  .hi-header .hi-burger { order: 0; flex: 0 0 auto; margin-right: 4px; padding: 0 10px; }

  .hi-header .hi-logo {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
    margin-right: auto;
  }

  .hi-logo__img { height: 38px; max-width: 100%; }

  .hi-actions {
    order: 2;
    flex: 0 0 auto;
    gap: 2px;
    margin-left: auto;
    margin-right: 0;
  }

  .hi-icon-btn { width: 36px; height: 36px; font-size: 19px; }

  .hi-search-wrap { order: 4; flex: 0 0 100%; max-width: none; }
}

@media (max-width: 359px) {
  .hi-logo__img { height: 32px; }
  .hi-icon-btn { width: 32px; height: 32px; font-size: 17px; }
  .hi-header .hi-burger { padding: 0 8px; }
}