/* ============================================================================
   MULTI-PAUL · ZIP-Redesign  (tpl_modified_responsive_mp2)
   ----------------------------------------------------------------------------
   Design-System portiert aus dem React-Entwurf "Multi-Paul — Durchdachte
   Helfer" auf die Smarty-Klassen des modified-eCommerce responsive Templates.

   Wird in css/general.css.php NACH stylesheet.css geladen und gewinnt damit
   die Kaskade. Fonts kommen per <link> (Google Fonts) aus general.css.php.
   ========================================================================== */

:root {
  /* ----- Farbe (aus ZIP, als hex fuer breite Browser-Kompatibilitaet) ----- */
  --mp-bg:        #f6f6f1;
  --mp-bg-2:      #eeeee7;
  --mp-surface:   #ffffff;
  --mp-ink:       #202924;
  --mp-ink-2:     #45514a;
  --mp-muted:     #79847d;
  --mp-line:      #e6e6de;
  --mp-line-2:    #d6d6cc;
  --mp-accent:    #2f6b46;
  --mp-accent-2:  #25563a;
  --mp-accent-ink:#ffffff;
  --mp-accent-tint:#e7efe9;
  --mp-danger:    #b8542a;

  /* ----- Typografie ----- */
  --mp-font:      'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --mp-mono:      'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ----- Metrik ----- */
  --mp-radius:    4px;
  --mp-radius-lg: 8px;
  --mp-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --mp-shadow:    0 22px 50px -28px rgba(20, 40, 28, 0.35);
}

/* ===========================================================================
   1. Globals — Body, Typografie, Links
   ========================================================================= */
body {
  background: var(--mp-bg) !important;
  color: var(--mp-ink) !important;
  font-family: var(--mp-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body, p, td, .lr_desc, .pd_description, input, select, textarea, button {
  font-family: var(--mp-font) !important;
}

h1, h2, h3, h4, h5, h6,
.headline_big, .box_category_header, .box3_header, .lb_title, .cb_title {
  font-family: var(--mp-font) !important;
  letter-spacing: -0.02em;
  color: var(--mp-ink);
}

h1 { font-weight: 800 !important; letter-spacing: -0.03em; }
h2, h3, h4 { font-weight: 700 !important; }

a { color: var(--mp-ink); transition: color .2s var(--mp-ease); }
a:hover { color: var(--mp-accent); text-decoration: none; }

/* generische Magenta -> Akzent Umfaerbung der haeufigsten Marken-Selektoren */
.headline_big,
#content h1, #content h2, #content h3 { color: var(--mp-ink) !important; }

/* mono / eyebrow Helfer (fuer eigene Markup-Bausteine) */
.mp-mono {
  font-family: var(--mp-mono) !important;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
}

/* ===========================================================================
   2. Layout-Breite & Grundgeruest
   ========================================================================= */
#layout_wrap { background: var(--mp-bg); }
#layout_content { max-width: 1240px; }

/* ===========================================================================
   3. Announce-Bar (neu, oben in index.html eingefuegt)
   ========================================================================= */
.mp_announce {
  background: var(--mp-ink);
  color: var(--mp-bg);
  font-family: var(--mp-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
  display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap;
}
.mp_announce span { display: inline-flex; align-items: center; gap: 8px; opacity: .9; }
.mp_announce .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mp-accent); }
@media (max-width: 620px) {
  .mp_announce { gap: 14px; }
  .mp_announce span:nth-child(n+3) { display: none; }
}

/* ===========================================================================
   4. Top-Navbar (utility nav) + Logo + Suche  (Header)
   ========================================================================= */
#layout_navbar {
  background: var(--mp-ink) !important;
  border: none !important;
}
#layout_navbar .topnavigation,
#layout_navbar .topnavigation a,
#layout_navbar .topnavigation li { color: var(--mp-bg) !important; }
#layout_navbar .topnavigation a { font-size: 12.5px; opacity: .85; transition: opacity .2s var(--mp-ease); }
#layout_navbar .topnavigation a:hover { opacity: 1; color: #fff !important; }
#layout_navbar .topnavigation .fas,
#layout_navbar .topnavigation .far { color: var(--mp-accent) !important; }

#layout_logo {
  background: rgba(246,246,241,0.82) !important;
  -webkit-backdrop-filter: saturate(1.1) blur(14px);
  backdrop-filter: saturate(1.1) blur(14px);
  position: sticky; top: 0; z-index: 40;
  padding: 14px 0;
}
#logo img { max-height: 56px; width: auto; }

/* Suche im ZIP-Look */
#search .search_inner {
  border: 1px solid var(--mp-line-2) !important;
  border-radius: var(--mp-radius) !important;
  background: var(--mp-surface) !important;
  overflow: hidden;
}
#search .search_inner input[type=text] {
  border: none !important; background: transparent !important;
  font-family: var(--mp-font) !important; color: var(--mp-ink) !important;
}
#search .search_inner input[type=text]:focus { box-shadow: none !important; }

/* ===========================================================================
   5. Content-Navbar (sidebar toggle, contact, checkout, cart, wishlist)
   ========================================================================= */
#content_navbar { border-bottom: 1px solid var(--mp-line); }
.contentnavigation a { color: var(--mp-ink-2) !important; font-weight: 500; }
.contentnavigation a:hover { color: var(--mp-accent) !important; }
.contentnavigation .fas, .contentnavigation .far { color: var(--mp-accent); }

/* Warenkorb-Box (#cart_short) */
#cart_short a { color: var(--mp-ink) !important; }
#cart_short .cart_01 .fas { color: var(--mp-accent) !important; }
#cart_short .cart_03 { color: var(--mp-accent) !important; font-family: var(--mp-mono); font-weight: 600; }
.toggle_cart {
  background: var(--mp-surface) !important;
  border: 1px solid var(--mp-line) !important;
  border-radius: var(--mp-radius-lg) !important;
  box-shadow: var(--mp-shadow);
}
.toggle_cart .tc_list a { color: var(--mp-ink-2) !important; }
.toogle_cart_links a strong { color: var(--mp-accent) !important; }

/* ===========================================================================
   6. Boxen linke Spalte  (Kategorien + box3)
   ========================================================================= */
.box_category, .box3 {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  padding: 4px 0 6px;
  margin-bottom: 18px;
  overflow: hidden;
}
.box_category_header, .box3_header {
  font-family: var(--mp-mono) !important;
  font-size: 11px !important; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600 !important;
  color: var(--mp-ink) !important;
  background: transparent !important;
  padding: 16px 18px 10px !important;
}
.box_category_line, .box3_line {
  border: none !important;
  border-top: 1px solid var(--mp-line) !important;
  background: none !important; height: 0 !important; margin: 0 18px 8px !important;
}
.box3_sub { color: var(--mp-muted); font-size: 13px; padding: 0 18px; }

/* Kategorie-Menue: Magenta -> Akzent */
ul#categorymenu li a { color: var(--mp-ink-2) !important; transition: color .2s var(--mp-ease); }
ul#categorymenu li a:hover { color: var(--mp-accent) !important; }
ul#categorymenu li.active1 a, ul#categorymenu li.activeparent1 a,
ul#categorymenu li.active2 a, ul#categorymenu li.activeparent2 a,
ul#categorymenu li.active3 a, ul#categorymenu li.activeparent3 a,
ul#categorymenu li.active4 a, ul#categorymenu li.activeparent4 a,
ul#categorymenu li.active5 a, ul#categorymenu li.activeparent5 a {
  color: var(--mp-accent) !important;
  background-color: var(--mp-accent-tint) !important;
  border-bottom-color: var(--mp-line) !important;
}
.footerlist a { color: var(--mp-ink-2) !important; }
.footerlist a:hover { color: var(--mp-accent) !important; }
.footerlist .fas { color: var(--mp-accent); }

/* Kategorie-Eintraege: dunkle Basis-Balken (#363839) -> helle Karten-Optik */
ul#categorymenu li.level1 a, ul#categorymenu li.level2 a,
ul#categorymenu li.level3 a, ul#categorymenu li.level4 a,
ul#categorymenu li.level5 a {
  color: var(--mp-ink-2) !important;
  background: var(--mp-surface) !important;
  border-bottom: 1px solid var(--mp-line) !important;
}
ul#categorymenu li a:hover { color: var(--mp-accent) !important; opacity: 1 !important; }
/* letzter Menuepunkt: keine Trennlinie zur Kartenkante (gilt je Liste, auch verschachtelt) */
ul#categorymenu li:last-child > a { border-bottom: none !important; }

/* Sidebar-Boxen .box1 / .box2 (Schnellkauf, Login, Hersteller, Versandland) als Karten */
.box1, .box2 {
  background: var(--mp-surface) !important;
  border: 1px solid var(--mp-line) !important;
  border-radius: var(--mp-radius-lg) !important;
  padding: 0 18px 14px !important;
  margin-bottom: 18px !important;
}
.box_header {
  color: var(--mp-ink) !important;
  font-family: var(--mp-mono) !important;
  font-size: 11px !important; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600 !important;
  height: auto !important; line-height: 1.4 !important;
  padding: 16px 0 10px !important;
}
.box_header .fas { color: var(--mp-accent) !important; }
.box_line { border-top: 1px solid var(--mp-line) !important; background: transparent !important; }
.box_sub { color: var(--mp-muted) !important; }
.box_sub a { color: var(--mp-ink) !important; }
.box_sub a:hover { color: var(--mp-accent) !important; }
.box_select_inner { background: var(--mp-bg-2) !important; border-radius: var(--mp-radius); }
.box_select a { border-bottom: 1px solid var(--mp-line) !important; color: var(--mp-ink-2) !important; }
.box_select a:hover { color: var(--mp-accent) !important; }
a.show_all { color: var(--mp-accent) !important; }

/* ===========================================================================
   7. Buttons  (CSS-Buttons des Shops)
   ========================================================================= */
.cssButton {
  font-family: var(--mp-font) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  border-radius: var(--mp-radius) !important;
  padding: 11px 18px !important;
  min-height: 0 !important;
  transition: background-color .2s var(--mp-ease), border-color .2s var(--mp-ease), opacity .2s var(--mp-ease) !important;
}
/* Color1 = Primaer -> Akzent-Gruen */
.cssButtonColor1 {
  background-color: var(--mp-accent) !important;
  border: 1px solid var(--mp-accent) !important;
  color: var(--mp-accent-ink) !important;
}
.cssButtonColor1:hover { background-color: var(--mp-accent-2) !important; border-color: var(--mp-accent-2) !important; opacity: 1 !important; }
/* Color2 (war Magenta) -> dunkel/ink */
.cssButtonColor2 {
  background-color: var(--mp-ink) !important;
  border: 1px solid var(--mp-ink) !important;
  color: #fff !important;
}
.cssButtonColor2:hover { background-color: #2c3a32 !important; border-color: #2c3a32 !important; opacity: 1 !important; }
/* Color3 = Ghost/Outline */
.cssButtonColor3 {
  background: transparent !important;
  border: 1px solid var(--mp-line-2) !important;
  color: var(--mp-ink) !important;
}
.cssButtonColor3:hover { border-color: var(--mp-ink) !important; color: var(--mp-ink) !important; background: transparent !important; }
/* Color4 bleibt gruen, an Akzent angeglichen */
.cssButtonColor4 { background-color: var(--mp-accent) !important; border-color: var(--mp-accent) !important; }
.cssButtonColor5 { color: var(--mp-ink-2) !important; }
.cssButtonColor5:hover { color: var(--mp-accent) !important; }

/* ===========================================================================
   8. Produkt-Listing  (BOXANSICHT — Karten wie im ZIP)
   ========================================================================= */
.listingcontainer, .listingcontainer_full {
  display: flex; flex-wrap: wrap;
  margin-left: -12px !important; margin-right: -12px !important;
}
.listingbox {
  width: 50% !important;
  float: none !important;
  padding: 0 12px !important;
  margin: 0 0 24px !important;
  box-sizing: border-box;
}
@media (max-width: 620px) { .listingbox { width: 100% !important; } }
.listingbox .lb_inner {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex; flex-direction: column;
  padding: 0 0 22px !important;
  transition: border-color .3s var(--mp-ease), transform .3s var(--mp-ease), box-shadow .3s var(--mp-ease);
}
.listingbox .lb_inner:hover { border-color: var(--mp-line-2); transform: translateY(-3px); box-shadow: var(--mp-shadow); }
.lb_image { border-bottom: 1px solid var(--mp-line); background: var(--mp-bg-2); margin: 0 !important; }
.lb_image img { width: 100%; height: auto; }
.lb_new_flag {
  background: var(--mp-surface) !important; color: var(--mp-ink-2) !important;
  border: 1px solid var(--mp-line);
  font-family: var(--mp-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 10px !important; border-radius: 3px;
}
.lb_title { padding: 18px 22px 0 !important; }
.lb_title a { font-size: 20px !important; font-weight: 700 !important; color: var(--mp-ink) !important; font-family: var(--mp-font); }
.lb_title a:hover { color: var(--mp-accent) !important; }
.lb_shipping, .lb_tax { padding: 0 22px !important; color: var(--mp-muted) !important; font-size: 12px; }
.lb_price { padding: 10px 22px 0 !important; }
.lb_price, .lb_price .price {
  font-family: var(--mp-font) !important; font-weight: 700 !important; font-size: 22px !important;
  color: var(--mp-ink) !important; letter-spacing: -0.01em;
}
.lb_rating_icons { padding: 8px 22px 0 !important; }
.lb_rating_icons .fas { color: var(--mp-line-2); }
.lb_rating_icons .fas.full { color: var(--mp-accent); }
.lb_buttons { padding: 16px 22px 0 !important; margin-top: auto !important; display: flex; gap: 10px; }
.lb_buttons .cssButtonPos11 { flex: 1; margin: 0 !important; }

/* Row-Ansicht (Listenmodus) leicht angeglichen */
.listingrow .lr_inner {
  background: var(--mp-surface); border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg); padding: 20px !important; margin-bottom: 18px;
}
.lr_title a { font-family: var(--mp-font) !important; font-weight: 700 !important; color: var(--mp-ink) !important; }
.lr_title a:hover { color: var(--mp-accent) !important; }
.lr_price { font-family: var(--mp-font) !important; font-weight: 700 !important; color: var(--mp-ink) !important; }
.lr_rating_icons .fas.full { color: var(--mp-accent); }

/* ===========================================================================
   9. Bestseller-Karussell
   ========================================================================= */
.carousel_box .carousel_box_inner {
  background: var(--mp-surface); border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg); overflow: hidden;
  transition: border-color .3s var(--mp-ease), transform .3s var(--mp-ease);
}
.carousel_box .carousel_box_inner:hover { border-color: var(--mp-line-2); transform: translateY(-2px); }
.cb_image { background: var(--mp-bg-2); }
.cb_title, .cb_title_inner { font-family: var(--mp-font) !important; color: var(--mp-ink) !important; font-weight: 600; }

/* ===========================================================================
   10. Startseite — Welcome / Headlines
   ========================================================================= */
.homesite { color: var(--mp-ink-2); font-size: 16px; line-height: 1.65; }
.headline_big {
  font-family: var(--mp-font) !important;
  font-size: clamp(26px, 3.4vw, 40px) !important;
  font-weight: 700 !important; color: var(--mp-ink) !important;
  letter-spacing: -0.02em; margin: 8px 0 22px !important;
}

/* ===========================================================================
   11. Produktdetailseite (PDP)
   ========================================================================= */
.product_headline h1 { font-size: clamp(30px, 4vw, 50px) !important; font-weight: 800 !important; }
#product_details .pd_big_image {
  border: 1px solid var(--mp-line); border-radius: var(--mp-radius-lg);
  overflow: hidden; background: var(--mp-bg-2);
}
.pd_small_image .pd_small_image_inner {
  border: 1px solid var(--mp-line) !important; border-radius: var(--mp-radius) !important;
  background: var(--mp-bg-2); overflow: hidden;
}
.pd_small_image .pd_small_image_inner:hover { border-color: var(--mp-accent) !important; }
.pd_summarybox {
  background: var(--mp-surface) !important;
  border: 1px solid var(--mp-line) !important;
  border-radius: var(--mp-radius-lg) !important;
}
.pd_price, #pd_puprice, .pd_price .price {
  font-family: var(--mp-font) !important; font-weight: 700 !important;
  color: var(--mp-ink) !important; font-size: 30px !important; letter-spacing: -0.02em;
}
.pd_tax, .pd_vpe { color: var(--mp-muted) !important; font-family: var(--mp-mono); font-size: 11px; }
.addtobasket { border-top: 1px solid var(--mp-line); padding-top: 18px; }
.pd_rating_icons .fas.full { color: var(--mp-accent); }
.pd_infobox .pd_inforow { border-bottom: 1px solid var(--mp-line); color: var(--mp-ink-2); }
.pd_infobox .pd_inforow strong { color: var(--mp-ink); }
.pd_iconlist a { color: var(--mp-ink-2) !important; }
.pd_iconlist a:hover { color: var(--mp-accent) !important; }
.pd_iconlist .fas, .pd_iconlist .far { color: var(--mp-accent); }
h4.detailbox {
  font-family: var(--mp-mono) !important; font-size: 12px !important; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mp-ink-2) !important;
  border-bottom: 1px solid var(--mp-line); padding-bottom: 12px;
}
.pd_description { color: var(--mp-ink-2); font-size: 16px; line-height: 1.65; }

/* ===========================================================================
   12. Warenkorb-Seite + Checkout
   ========================================================================= */
.highlightbox {
  background: var(--mp-surface) !important;
  border: 1px solid var(--mp-line) !important;
  border-radius: var(--mp-radius-lg) !important;
}
.highlightbox table, .productstable { font-family: var(--mp-font); }
.productstable th, .ot_row, .ot_total {
  font-family: var(--mp-font) !important;
}
.ot_total, .ot_total .price { color: var(--mp-ink) !important; font-weight: 700 !important; }
/* Checkout-Schritte / Boxen */
.checkout_step, .checkout_box, .clickbox {
  border: 1px solid var(--mp-line) !important; border-radius: var(--mp-radius-lg) !important;
  background: var(--mp-surface) !important;
}
.checkout_headline, .checkout_step_headline { color: var(--mp-ink) !important; font-family: var(--mp-font) !important; }

/* Eingaben generell */
input[type=text], input[type=password], input[type=email], input[type=tel],
select, textarea {
  border: 1px solid var(--mp-line-2) !important;
  border-radius: var(--mp-radius) !important;
  font-family: var(--mp-font) !important;
  color: var(--mp-ink) !important;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=tel]:focus, select:focus, textarea:focus {
  border-color: var(--mp-accent) !important;
  box-shadow: 0 0 0 3px var(--mp-accent-tint) !important;
}

/* Meldungen */
.errormessage { border-radius: var(--mp-radius) !important; }
.infomessage { border-left: 3px solid var(--mp-accent) !important; }

/* ===========================================================================
   13. Footer (dunkel, ZIP-Look) + Copyright
   ========================================================================= */
#layout_footer {
  background: var(--mp-ink) !important;
  color: #c9cfca !important;
  border-top: none !important;
  margin-top: 56px;
}
#layout_footer .box3, #layout_footer .footer_box, #layout_footer .footer_box_inner {
  background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
}
#layout_footer .box3_header {
  color: #aeb6b0 !important; background: transparent !important;
}
#layout_footer .box3_line { border-top-color: rgba(255,255,255,0.12) !important; margin-left: 0 !important; margin-right: 0 !important; }
#layout_footer .footerlist a,
#layout_footer .box3_sub,
#layout_footer a { color: #c9cfca !important; }
#layout_footer .footerlist a:hover,
#layout_footer a:hover { color: #fff !important; }
#layout_footer .footerlist .fas { color: var(--mp-accent) !important; }
#layout_footer input[type=text], #layout_footer input[type=email] {
  background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.16) !important; color: #fff !important;
}
.mod_copyright {
  background: var(--mp-ink) !important;
  color: #8b938d !important;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: var(--mp-mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 22px 0;
}
.mod_copyright .cop_magenta { color: var(--mp-accent) !important; }
.mod_copyright .cop_grey { color: #8b938d !important; }

/* Hide the modified-shop Core-injected powered-by line (GPL allows hiding the rendered attribution). */
body > .copyright,
#layout_wrap + .copyright,
div.copyright:has(> a[href*="modified-shop.org"]) { display: none !important; }

/* Payment-Chips (ersetzt box3_image in box_miscellaneous) */
.mp_pay { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 2px; }
.mp_pay .chip {
  font-family: var(--mp-mono); font-size: 10px; letter-spacing: 0.06em;
  padding: 6px 11px; border: 1px solid rgba(255,255,255,0.18); border-radius: 3px; color: #c9cfca;
}

/* ===========================================================================
   14. Diverse Magenta-Reste -> Akzent / Ink
   ========================================================================= */
.breadcrumb_info, #breadcrumb a:hover { color: var(--mp-accent) !important; }
.price, .productlisting_price { color: var(--mp-ink); }
.product_navi a:hover { color: var(--mp-accent) !important; }
hr { border-color: var(--mp-line) !important; }

/* ============================================================================
   Fix-Runde 2 — Suche, Produktbild, Footer-Chips, Buttons, Header, Menue
   ========================================================================== */

/* Produktbild: keine Verzerrung (Basis = Aspect-Box + zentriertes Bild) */
.lb_image { background: var(--mp-bg-2) !important; margin: 0 !important; }
.lb_image img {
  width: auto !important; height: auto !important;
  max-width: 100% !important; max-height: 100% !important;
}

/* Suche: Feld + Button gleich hoch, buendig, eckige Innenkanten */
#search .search_inner { display: flex !important; align-items: stretch !important; }
#search .search_inner .search_cat .SumoSelect > .CaptionCont,
#search .search_inner .search_cat select {
  height: 46px !important; background: var(--mp-bg-2) !important;
  border: none !important; color: var(--mp-ink) !important;
}
/* Kategorie-Caption horizontal + vertikal zentriert (Pfeil bleibt absolut rechts) */
#search .search_inner .search_cat .SumoSelect > .CaptionCont {
  display: flex !important; align-items: center !important; justify-content: center !important;
}
#search .search_inner .search_cat .SumoSelect > .CaptionCont > span {
  padding: 0 !important; float: none !important;
}
#search .search_inner .search_cat select { text-align: center !important; }
#search .search_inner .search_input input { height: 46px !important; border-radius: 0 !important; }
#search .cssButtonPos2 { width: auto !important; height: auto !important; display: flex !important; }
#search .cssButtonPos2 .cssButton {
  height: 46px !important; border-radius: 0 !important; padding: 0 22px !important; min-height: 0 !important;
}

/* Footer-Zahlungschips: sauberes 2x2-Raster, gleiche Breite */
.mp_pay { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 220px; }
.mp_pay .chip { text-align: center; }

/* Buttons: flex-zentriert; kompakte Varianten klein, CTAs gross */
.cssButton { display: flex !important; align-items: center; justify-content: center; gap: 6px; }
.cssButtonPos1 .cssButton, .cssButtonPos2 .cssButton, .cssButtonPos3 .cssButton,
.cssButtonPos5 .cssButton, .cssButtonPos6 .cssButton {
  padding: 0 14px !important; min-height: 0 !important; height: 38px;
}
.cssButtonPos1 { width: 46px !important; }
.cssButtonPos1 .cssButton { padding: 0 !important; }
.cssButtonPos10 .cssButton, .cssButtonPos11 .cssButton, .cssButtonPos4 .cssButton,
.cssButtonPos7 .cssButton, .cssButtonPos8 .cssButton, .cssButtonPos9 .cssButton {
  min-height: 44px;
}

/* Box-Header einheitlich, kein Ueberlaufen (geringeres Tracking) */
.box_category_header, .box3_header, .box_header {
  letter-spacing: 0.08em !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Linke Menue-Boxen: einheitliche linke Kante (18px) */
ul#categorymenu li a { padding: 9px 18px !important; }
.box_category { padding: 0 0 6px !important; }

/* Quickie-Formular (Schnellkauf) sauber in einer Reihe */
.quickie_form label { display: flex !important; gap: 8px; align-items: stretch; }
.quickie_form input[type=text] { flex: 1; height: 38px; }
.box1 .quickie_form .cssButtonPos1 { position: static !important; float: none !important; top: auto; right: auto; }

/* ============================================================================
   Fix-Runde 3 — Sticky-Header entfernt, Footer-Ausrichtung, Inhaltsbreite
   ========================================================================== */

/* Header NICHT mehr sticky (ueberlappte Inhalt + linkes Menue beim Scrollen) */
#layout_logo {
  position: static !important;
  background: var(--mp-bg) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* Inhaltsbreite auf native 1140px zurueck (konsistent mit Footer) */
#layout_content { max-width: 1140px !important; }

/* Footer: Spalten gleichmaessig verteilt und buendig unter dem Inhalt */
.layout_footer_inner { max-width: 1140px !important; }
.footer_box_row { display: flex !important; flex-wrap: wrap; margin: 0 -10px !important; }
.footer_box { float: none !important; width: auto !important; flex: 1 1 200px; }

/* ============================================================================
   Fix-Runde 4 — Footer schmaler/verteilt, Login-Button-Zeile
   ========================================================================== */

/* Footer: schmalere Sektionen, gleichmaessig ueber die Breite verteilt */
.footer_box_row { justify-content: space-between !important; margin: 0 !important; }
.footer_box { flex: 0 1 auto !important; width: auto !important; max-width: 240px; min-width: 170px; }

/* Login-Box: "Passwort vergessen?" + Anmelden sauber in einer Zeile */
#loginBox .box_sub_button {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 10px; line-height: 1.4 !important;
}
#loginBox .box_sub_button .cssButtonPos3 { float: none !important; width: auto !important; }

/* ============================================================================
   Fix-Runde 5 — Content-Karten Padding (Login/Account/Checkout), Buttons gruen
   ========================================================================== */

/* .highlightbox = zentrale Content-Karte: Innen-Padding, damit Text nicht klebt */
div.highlightbox { padding: 22px 26px !important; }
div.highlightbox.plainleft, div.highlightbox.plainright, div.highlightbox.plainfull {
  padding: 16px 0 !important; background: transparent !important; border: none !important;
}
div.highlightbox h4 {
  margin: 0 0 18px !important; padding: 0 0 12px !important;
  border-bottom: 1px solid var(--mp-line) !important; color: var(--mp-ink) !important;
}
div.highlightbox.checkoutborder { border: 1px solid var(--mp-accent) !important; }

/* Checkout-/Content-Boxen ebenfalls mit Innen-Padding */
.checkout_step, .checkout_box, .clickbox { padding: 22px 26px !important; }

/* Primaer-Buttons einheitlich gruen (Login "Anmelden" war Color2 = dunkel) */
.cssButtonColor2 {
  background-color: var(--mp-accent) !important; border-color: var(--mp-accent) !important; color: #fff !important;
}
.cssButtonColor2:hover { background-color: var(--mp-accent-2) !important; border-color: var(--mp-accent-2) !important; }

/* Fix-Runde 6 (Hero-Sektion) entfernt 2026-07-08 — Hero-Inhalte liegen auf der
   Microsite multi-paul.de, im Shop war es Bloat. Markup-Gegenstueck aus
   index.html ebenfalls entfernt. */

/* ============================================================================
   Fix-Runde 7 — PayPal CSS-Express-Button auf Buttonhoehe
   HINWEIS: Der PayPal-Button (paypal_smart) und das Banner (.pp-message via
   paypal.Messages) sind SDK-iframes — Hoehe/Layout steuert das PayPal-Modul
   (Admin), nicht das Template-CSS. Hier nur der CSS-Fallback-Button.
   ========================================================================== */
.cssButtonColor6 { height: auto !important; min-height: 44px !important; }

/* ============================================================================
   Fix-Runde 8 — Text-Logo (Multi-Paul) statt Default-modified-Grafik
   ========================================================================== */
.mp_logo {
  font-family: var(--mp-font); font-weight: 800; font-size: 30px;
  letter-spacing: -0.03em; color: var(--mp-ink); line-height: 1; display: inline-block;
}
.mp_logo sup { font-size: 0.42em; font-weight: 600; top: -0.95em; color: var(--mp-muted); }

/* ============================================================================
   Fix-Runde 10 — Hero zweispaltig wie ZIP-Referenz (Text gross links,
   Produktinszenierungs-Karte rechts). Ersetzt die Fix-Runde-9-Schrumpfung.
   ========================================================================== */