/* =========================================================================
   MEGA-INSERATE — Chrome-Theme fuer Unterseiten.
   Laedt NACH custom.css. Stylt NUR Header / Footer / Tab-Bar / Buttons —
   keine globalen Resets, damit bestehende Seiteninhalte unveraendert bleiben.
   ========================================================================= */

.mi-shell { max-width: 1240px; margin: 0 auto; padding: 0; }
@media (max-width: 1270px) { .mi-shell { padding: 0 15px; } }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid #EFEEEA;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.site-header .mi-shell { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.site-header .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.site-header .brand-mark { width: 32px; height: 32px; border-radius: 8px; background: #D64535; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; }
.site-header .brand-word { font-weight: 800; font-size: 17px; letter-spacing: -.3px; color: #1C1D22; }
.site-header .brand-word span { color: #9A9CA3; font-weight: 600; }
.site-header .nav { display: flex; align-items: center; gap: 26px; font-size: 14px; }
.site-header .nav a { color: #54565E; text-decoration: none; }
.site-header .nav a:hover { color: #1C1D22; }
.site-header .header-right { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 14px; }
.site-header .header-right a { display: inline-flex; align-items: center; gap: 6px; color: #54565E; text-decoration: none; }
.site-header .header-right a:hover { color: #1C1D22; }
.site-header .heart { color: #D64535; font-size: 15px; line-height: 1; }
.site-header .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 600; padding: 10px 16px; cursor: pointer; text-decoration: none; white-space: nowrap; text-transform: none; letter-spacing: 0; line-height: 1.2; }
.site-header .btn-primary { background: #D64535; color: #fff; }
.site-header .btn-primary:hover { background: #BE3A2B; }
@media (max-width: 720px) {
  .site-header .mi-shell { min-height: 60px; gap: 14px; }
  .site-header .nav { display: none; }
  .site-header .header-right .label { display: none; }
}

/* --- Footer --------------------------------------------------------------- */
.site-footer { border-top: 1px solid #EFEEEA; background: #fff; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 44px; }
.site-footer .mi-shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 28px; flex-wrap: wrap; }
.site-footer .copy { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #9A9CA3; }
.site-footer .copy .m { width: 24px; height: 24px; border-radius: 6px; background: #D64535; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0; float: none; }
.site-footer nav ul.additional_links { float: none; text-align: left; }
.site-footer nav li { list-style: none; float: none; border: 0; }
.site-footer nav a, .site-footer nav li a, .site-footer .additional_links a { color: #54565E !important; font-size: 13px; text-decoration: none; }
.site-footer nav a:hover, .site-footer nav li a:hover, .site-footer .additional_links a:hover { color: #1C1D22 !important; }

/* --- Mobile Tab-Bar ------------------------------------------------------- */
.mi-bottomnav { display: none; }
@media (max-width: 720px) {
  body { padding-bottom: 74px; }
  .mi-bottomnav {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 1000;
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid #EFEEEA; padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    align-items: center; justify-content: space-around;
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  }
  .mi-bottomnav__item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #B8BABF; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; text-decoration: none; }
  .mi-bottomnav__item svg { width: 21px; height: 21px; }
  .mi-bottomnav__item--active { color: #D64535; }
  .mi-bottomnav__fab svg { background: #1C1D22; color: #fff; border-radius: 8px; width: 30px; height: 30px; padding: 5px; margin-top: -2px; }
}

/* --- Karten (mi-card) auf neue Optik bringen (Konsistenz mit Startseite) --- */
.mi-card { display: flex; flex-direction: column; gap: 11px; position: relative; color: inherit; }
.mi-card__img { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #F1F0EC; border: 1px solid #EFEEEA; }
.mi-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.mi-card:hover .mi-card__img img { transform: scale(1.03); }
.mi-card__badge { position: absolute; top: 9px; left: 9px; background: rgba(28,29,34,.8); color: #fff; font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; padding: 4px 8px; border-radius: 5px; }
.mi-card__body { display: flex; flex-direction: column; }
.mi-card__price { order: -1; font-weight: 800; font-size: 15px; color: #1C1D22; }
.mi-card__title { font-size: 13.5px; color: #31333A; margin: 2px 0 0; line-height: 1.3; font-weight: 500; }
.mi-card__meta { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: #9A9CA3; margin-top: 5px; text-transform: uppercase; }
.mi-card__desc { display: none; }
.mi-card__wappen { position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; border-radius: 50%; background: #fff; padding: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }

/* --- Marktplatz: dekorative Leerzeile ('.items') zog eine Linie ueber die
   ganze Breite (mit Rahmen oben/unten) - entfernen --- */
.items, .items > div { border: 0 !important; background: transparent !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; margin: 0 !important; }

/* --- Marktplatz: Kategorie-Chips mit mehr Luft --- */
.mi-cat-strip { gap: 16px !important; padding-bottom: 6px !important; margin-bottom: 8px !important; }

/* --- Kategorie-Leiste: Scroll-Pfeile links/rechts --- */
.mi-cat-wrap { position: relative; margin-top: 16px; }
.mi-cat-wrap .mi-cat-strip { margin-top: 0 !important; }
.mi-cat-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #E7E5E0; background: #fff; color: #1C1D22; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0,0,0,.32); padding: 0; }
.mi-cat-nav:hover { border-color: #9A9CA3; background: #FBFAF8; }
.mi-cat-nav svg { width: 18px; height: 18px; display: block; }
.mi-cat-nav--prev { left: -4px; }
.mi-cat-nav--next { right: -4px; }
.mi-cat-wrap::before, .mi-cat-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 46px; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .2s; }
.mi-cat-wrap::before { left: 0; background: linear-gradient(90deg, #fff 25%, rgba(255,255,255,0)); }
.mi-cat-wrap::after { right: 0; background: linear-gradient(270deg, #fff 25%, rgba(255,255,255,0)); }
.mi-cat-wrap.has-prev::before { opacity: 1; }
.mi-cat-wrap.has-next::after { opacity: 1; }

/* --- Marktplatz-Filterleiste: mehr Luft, nichts abschneiden --- */
.mi-filter-bar { max-width: 100% !important; overflow: visible !important; flex-wrap: wrap !important; gap: 14px !important; }
.mi-filter-bar__sort { margin-left: auto !important; }
.mi-filter-bar input[type="submit"] { flex: 0 0 auto !important; }

/* --- Konto-Menue im Header (Dropdown) ------------------------------------- */
.site-header .mi-acct { position: relative; }
.site-header .mi-acct > .label { cursor: pointer; }
.site-header .mi-acct__menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid #E7E5E0; border-radius: 12px; box-shadow: 0 12px 30px -18px rgba(0,0,0,.35); padding: 8px; min-width: 210px; z-index: 1100; }
.site-header .mi-acct:hover .mi-acct__menu { display: block; }
.site-header .mi-acct__menu ul { list-style: none; margin: 0; padding: 0; }
.site-header .mi-acct__menu li { list-style: none; }
.site-header .mi-acct__menu a { display: block; padding: 9px 12px; font-size: 14px; color: #54565E; text-decoration: none; border-radius: 8px; white-space: nowrap; }
.site-header .mi-acct__menu a:hover { color: #1C1D22; background: #F4F3EF; }
.site-header .mi-acct__menu img { display: none; }
@media (max-width: 720px) { .site-header .mi-acct { display: none; } }