/**
 * Template :: ew_evelations_cloneparts
 * ============================================================================
 * Cloneparts.de – Design-Override für das Basis-Template "ew_evelations"
 *
 * Diese Datei wird VOM ÜBERSCHREIBUNGSTEMPLATE geladen, NACH dem kompilierten
 * LESS des Basis-Templates. Es genügen daher reine CSS-Overrides – das
 * Basis-LESS (template.less) bleibt unangetastet.
 *
 * Enthält die GRUNDLEGENDE Design-Ebene:
 *   - Farbschema ("Heat"-Gradient Gelb -> Orange -> Rot, aus dem Logo)
 *   - Schriften (Saira / Inter / JetBrains Mono, lokal gehostet -> DSGVO)
 *   - Überschriften, Fließtext, Links
 *   - Buttons, Suche, Navigation, Warenkorb
 *   - Produktkacheln (Boxen), Preise, Badges
 *   - Header & Footer
 *
 * Hinweis: Primär-/Sekundärfarbe lassen sich in xt:Commerce auch über die
 * Plugin-Konfiguration setzen; die hier gesetzten CSS-Overrides gewinnen
 * jedoch und sind unabhängig von dieser Konfiguration.
 * ============================================================================
 */

/* ===========================================================================
   1. SCHRIFTEN – lokal gehostet (kein Google-CDN, DSGVO-konform)
   Pfad-Konvention wie im Basis-Template: ./../../<template>/fonts/...
   =========================================================================== */
@font-face{font-family:"Saira";font-style:normal;font-weight:500;font-display:swap;
  src:url("./../../ew_evelations_cloneparts/fonts/saira/saira-500.woff2") format("woff2");}
@font-face{font-family:"Saira";font-style:normal;font-weight:600;font-display:swap;
  src:url("./../../ew_evelations_cloneparts/fonts/saira/saira-600.woff2") format("woff2");}
@font-face{font-family:"Saira";font-style:normal;font-weight:700;font-display:swap;
  src:url("./../../ew_evelations_cloneparts/fonts/saira/saira-700.woff2") format("woff2");}
@font-face{font-family:"Saira";font-style:normal;font-weight:800;font-display:swap;
  src:url("./../../ew_evelations_cloneparts/fonts/saira/saira-800.woff2") format("woff2");}

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("./../../ew_evelations_cloneparts/fonts/inter/inter-400.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("./../../ew_evelations_cloneparts/fonts/inter/inter-500.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("./../../ew_evelations_cloneparts/fonts/inter/inter-600.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("./../../ew_evelations_cloneparts/fonts/inter/inter-700.woff2") format("woff2");}

@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("./../../ew_evelations_cloneparts/fonts/jetbrains-mono/jetbrains-mono-500.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("./../../ew_evelations_cloneparts/fonts/jetbrains-mono/jetbrains-mono-700.woff2") format("woff2");}

/* ===========================================================================
   2. DESIGN-TOKENS (CSS-Custom-Properties)
   =========================================================================== */
:root{
  /* Markenfarben aus dem Logo */
  --cp-red:#E2231A;
  --cp-orange:#F7861B;
  --cp-amber:#FFB200;
  --cp-yellow:#FFC400;

  /* Neutrale Töne */
  --cp-ink:#15181C;          /* Haupttext / Überschriften */
  --cp-graphite:#2D323A;     /* Footer / dunkle Flächen – dunkles Grau (heller als zuvor) */
  --cp-graphite-2:#3A4049;
  --cp-slate:#5C6672;        /* Sekundärtext */
  --cp-slate-2:#8A929C;
  --cp-line:#E4E8EC;         /* Rahmen / Trennlinien */
  --cp-mist:#F4F6F8;         /* heller, kühler Hintergrund */
  --cp-mist-2:#EDF1F4;
  --cp-white:#FFFFFF;

  /* Signatur-Verlauf */
  --cp-heat:linear-gradient(90deg,#FFC400 0%,#F7861B 48%,#E2231A 100%);
  --cp-heat-soft:linear-gradient(90deg,rgba(255,196,0,.14),rgba(247,134,27,.14),rgba(226,35,26,.14));

  /* Schatten */
  --cp-shadow-sm:0 1px 2px rgba(21,24,28,.06),0 1px 3px rgba(21,24,28,.05);
  --cp-shadow-md:0 6px 18px rgba(21,24,28,.08),0 2px 6px rgba(21,24,28,.05);
  --cp-shadow-lg:0 18px 48px rgba(21,24,28,.14);

  /* Radien */
  --cp-r:14px;
  --cp-r-sm:10px;
  --cp-r-lg:22px;

  /* Schrift-Rollen */
  --cp-ff-head:"Saira",system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --cp-ff-body:"Inter",system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --cp-ff-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

/* ===========================================================================
   3. BASIS-TYPOGRAFIE & FLÄCHEN
   =========================================================================== */
body{
  font-family:var(--cp-ff-body) !important;
  color:var(--cp-ink);
  background:var(--cp-white);
  font-size:16.5px;
  line-height:1.6;
}
#site-wrap{background:var(--cp-white);}
.subpage-wrap{background:var(--cp-mist);}

p{line-height:1.65;}
small,.small{font-family:var(--cp-ff-body);color:var(--cp-slate);}

a{color:var(--cp-ink);}
a:hover,a:focus{color:var(--cp-red);text-decoration:none;}

/* Sekundärtext / Bootstrap-Helfer an Palette angleichen */
.text-muted{color:var(--cp-slate) !important;}
.text-primary{color:var(--cp-red) !important;}

/* ----- Überschriften ----- */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.headline,.headline-underline{
  font-family:var(--cp-ff-head) !important;
  color:var(--cp-ink);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.12;
}
h1,.h1{font-size:34px;}
h2,.h2{font-size:27px;}
h3,.h3{font-size:22px;}
h4,.h4{font-size:18px;}

/* fette Inline-Elemente: echte Strichstärke statt Bold-Sonderfont */
b,strong,dt,th{font-family:var(--cp-ff-body) !important;font-weight:700 !important;}

/* technische Daten / Artikelnummern / Badges -> Datenblatt-Anmutung */
.products-model,.model,.products-vpe,.tax-info,.shipping-info,
.badge,.label,.delivery-time{font-family:var(--cp-ff-mono);}

/* ----- Überschriften-Akzent: Heat-Unterstreichung ----- */
.headline-underline{
  position:relative;
  padding-bottom:12px;
  border-bottom:0 !important;
}
.headline-underline:after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:64px;height:4px;border-radius:4px;
  background:var(--cp-heat);
}

/* Wort-Highlight im Heat-Verlauf (Utility-Klasse) */
.cp-heat-text{
  background:var(--cp-heat);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ----- Content-Überschriften (z.B. "WILLKOMMEN") -----
   Original-Template nutzt eine 45°-Schraffur + orangefarbenen Linksbalken.
   Hier: Schraffur raus, klare Saira-Überschrift mit Heat-Linksbalken. */
.breaking-headline{
  background:none !important;
  background-color:transparent !important;
  border:0 !important;
  border-left:5px solid transparent !important;
  border-image:linear-gradient(180deg,#FFC400 0%,#F7861B 50%,#E2231A 100%) 1 !important;
  color:var(--cp-ink) !important;
  font-family:var(--cp-ff-head) !important;
  font-weight:700 !important;
  font-size:24px !important;
  text-transform:uppercase;
  letter-spacing:.01em;
  padding:2px 0 2px 16px !important;
  margin:0 0 24px !important;
}

/* ===========================================================================
   4. BUTTONS
   =========================================================================== */
.btn{
  font-family:var(--cp-ff-head) !important;
  font-weight:700;
  letter-spacing:.01em;
  border-radius:var(--cp-r-sm) !important;
  border:0 none;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.btn:active{transform:translateY(1px);}

/* Primär- / Warenkorb-Aktionen -> Heat-Verlauf */
.btn-primary,
.btn-cart,
.btn-cart-listing,
.btn-cart-mobile,
.button-cart,
.submit-button.btn,
a.btn-primary{
  background:var(--cp-heat) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 6px 16px rgba(226,35,26,.24);
}
.btn-primary:hover,.btn-primary:focus,
.btn-cart:hover,.btn-cart:focus,
.btn-cart-listing:hover,
.btn-cart-mobile:hover,
.button-cart:hover,.button-cart:focus,
.submit-button.btn:hover{
  color:#fff !important;
  box-shadow:0 10px 24px rgba(226,35,26,.32);
  transform:translateY(-1px);
}

/* Sekundär-/Standard-Buttons (Filter, Sortierung, Ansicht, Pager, Comboboxen)
   -> dezent hell statt dunkel; an das Gesamtdesign angepasst (kein volles Heat) */
.btn-secondary,
.btn-default,
.bootstrap-select > .btn,
.btn-group .btn-default,
.dropdown-toggle.btn-default{
  background:#fff !important;
  color:var(--cp-ink) !important;
  border:1px solid var(--cp-line) !important;
  box-shadow:var(--cp-shadow-sm);
}
.btn-secondary:hover,.btn-default:hover,
.btn-secondary:focus,.btn-default:focus,
.bootstrap-select > .btn:hover,
.open > .dropdown-toggle.btn-default{
  background:var(--cp-mist) !important;
  color:var(--cp-red) !important;
  border-color:var(--cp-line) !important;
}
/* Aktiver Zustand (z.B. gewählte Listen-/Kachelansicht) -> dezenter Heat-Akzent */
.btn-group > .btn-default.active,
.btn-default.active,
.btn-default:active{
  background:var(--cp-heat) !important;
  color:#fff !important;
  border-color:transparent !important;
}

/* Ghost-Variante (z.B. Filter, dezente Aktionen) */
.btn-link{color:var(--cp-red) !important;}
.btn-link:hover{color:var(--cp-orange) !important;}

/* ===========================================================================
   5. HEADER
   =========================================================================== */
#header,
#header .header-bg{
  background:var(--cp-white) !important;
  border-bottom:1px solid var(--cp-line);
}
/* Logo-/Such-Zeile in der Höhe straffen (Original-Padding ist ~36px) */
#header .header-bg #header-top{
  padding-top:12px !important;
  padding-bottom:12px !important;
}
#header .branding .logo{margin:0;}
#header .branding .logo img{height:auto;max-height:52px;}
#header .slogan{
  font-family:var(--cp-ff-body);
  color:var(--cp-slate) !important;
  font-size:13px;
  margin:2px 0 0;
}
#header .header-info{color:var(--cp-slate) !important;font-family:var(--cp-ff-body);}

/* obere Meta-Leiste (Konto / Checkout / Suche) dezent */
#header .user.text-muted a{color:var(--cp-slate) !important;font-family:var(--cp-ff-body);}
#header .user.text-muted a:hover{color:var(--cp-red) !important;}
#header .user .fa{color:var(--cp-orange);}

/* ===========================================================================
   6. SUCHE
   =========================================================================== */
#box-search .form-control.keywords{
  border:1.6px solid var(--cp-line);
  border-radius:var(--cp-r-sm) 0 0 var(--cp-r-sm);
  font-family:var(--cp-ff-body);
  height:46px;
  box-shadow:none;
}
#box-search .form-control.keywords:focus{
  border-color:var(--cp-orange);
  box-shadow:0 0 0 4px rgba(247,134,27,.12);
}
#box-search .submit-button.btn{
  background:var(--cp-heat) !important;
  color:#fff !important;
  border-radius:0 var(--cp-r-sm) var(--cp-r-sm) 0 !important;
}

/* ===========================================================================
   7. HAUPTNAVIGATION (Mega-Menü)
   =========================================================================== */
#main-navigation.navbar-default{
  background:var(--cp-white) !important;
  border:0 !important;
  border-bottom:1px solid var(--cp-line);
  box-shadow:var(--cp-shadow-sm);
  border-radius:0;
}
#main-navigation .navbar-nav > li > a,
#main-navigation .navbar-nav > li > a.dropdown-linker,
#main-navigation .btn-home{
  font-family:var(--cp-ff-head) !important;
  font-weight:600;
  font-size:15px;
  color:var(--cp-ink) !important;
  background:transparent !important;
  position:relative;
}
/* Desktop: Padding/Schriftgröße so straffen, dass alle Menüpunkte in EINE
   Zeile passen. Reserve für weitere Punkte: lange Labels dürfen innerhalb
   des Punktes umbrechen statt die ganze Leiste auf zwei Zeilen zu drücken. */
@media (min-width:768px){
  #main-navigation .navbar-nav > li > a{
    padding-left:11px !important;
    padding-right:11px !important;
    font-size:14px !important;
    letter-spacing:0;
    line-height:1.15;
    white-space:normal;
    text-align:center;
  }
  #main-navigation .navbar-nav > li > a:after{left:11px;right:11px;}
}
/* Heat-Unterstreichung bei Hover / aktiv */
#main-navigation .navbar-nav > li > a:after{
  content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;
  background:var(--cp-heat);border-radius:3px 3px 0 0;
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
#main-navigation .navbar-nav > li:hover > a:after,
#main-navigation .navbar-nav > li.active > a:after,
#main-navigation .navbar-nav > li.open > a:after{transform:scaleX(1);}
#main-navigation .navbar-nav > li > a:hover,
#main-navigation .navbar-nav > li.active > a,
#main-navigation .navbar-nav > li:hover > a{color:var(--cp-red) !important;background:transparent !important;}

/* Dropdown-Panels */
#main-navigation .dropdown-menu{
  border:1px solid var(--cp-line);
  border-radius:var(--cp-r-sm);
  box-shadow:var(--cp-shadow-md);
  padding:8px;
}
#main-navigation .dropdown-menu > li > a{border-radius:6px;font-family:var(--cp-ff-body);}
#main-navigation .dropdown-menu > li > a:hover,
#main-navigation .dropdown-menu > li > a:focus{
  background:var(--cp-mist) !important;color:var(--cp-red) !important;
}

/* Warenkorb-Button im Header */
.nav-button-cart .button-cart .fa{color:#fff;}

/* ===========================================================================
   8. PRODUKTKACHELN / BOXEN
   =========================================================================== */
.product-listing .thumbnail,
.product-listing .panel,
.products-box .thumbnail,
.product-listing-v2 .thumbnail,
.product-listing-slider .thumbnail{
  background:#fff;
  border:1px solid var(--cp-line) !important;
  border-radius:var(--cp-r) !important;
  box-shadow:var(--cp-shadow-sm);
  transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease;
  overflow:hidden;
}
.product-listing .thumbnail:hover,
.product-listing .panel:hover,
.products-box .thumbnail:hover,
.product-listing-v2 .thumbnail:hover,
.product-listing-slider .thumbnail:hover{
  transform:translateY(-3px);
  box-shadow:var(--cp-shadow-md);
  border-color:var(--cp-line) !important;
}
/* Produkttitel in der Kachel */
.product-listing .headline,
.products-box .headline,
.product-listing .caption .headline{
  font-family:var(--cp-ff-head) !important;
  font-weight:600;
  color:var(--cp-ink) !important;
}
.product-listing .headline a:hover{color:var(--cp-red) !important;}

/* allgemeine Panels / Boxen */
.panel{border-radius:var(--cp-r) !important;border-color:var(--cp-line);}
.panel-default > .panel-heading{
  background:var(--cp-mist) !important;
  border-bottom:1px solid var(--cp-line);
  font-family:var(--cp-ff-head);
}
.well,.box{border-radius:var(--cp-r);border-color:var(--cp-line);}

/* ===========================================================================
   9. PREISE
   =========================================================================== */
.price,
.product-price,
.price-new,
.current-price,
.products-price .price,
.product-listing .price,
.products-box .price{
  font-family:var(--cp-ff-head) !important;
  font-weight:700 !important;
  color:var(--cp-red) !important;
}
.price-old,
.price-tag .price-old,
.product-price-old{
  color:var(--cp-slate) !important;
  text-decoration:line-through;
  font-weight:500;
}
.tax-value .price,.tax-info .price{
  font-family:var(--cp-ff-body) !important;
  color:var(--cp-slate) !important;
  font-weight:400 !important;
}
/* Rabatt-Badge */
.panel-discount .price-discount{
  background:var(--cp-red) !important;
  color:#fff !important;
  font-family:var(--cp-ff-mono);
  border-radius:var(--cp-r-sm);
}

/* ===========================================================================
   10. BADGES / LABELS / STATUS
   =========================================================================== */
.label-primary,.badge-primary{background:var(--cp-red) !important;color:#fff !important;}
.label-success{background:#1FA463 !important;}
.label-warning{background:var(--cp-amber) !important;color:var(--cp-ink) !important;}
.label{border-radius:6px;padding:.3em .6em;font-weight:700;}

/* "Neu"-/Aktions-Marker in der Kachel */
.product-listing .ribbon,
.product-listing .product-status,
.products-box .product-status{
  background:var(--cp-heat) !important;color:#fff !important;
  font-family:var(--cp-ff-head);border-radius:var(--cp-r-sm);
}

/* ===========================================================================
   11. FORMULARE / EINGABEN
   =========================================================================== */
.form-control{
  border:1.5px solid var(--cp-line);
  border-radius:var(--cp-r-sm);
  font-family:var(--cp-ff-body);
  box-shadow:none;
  color:var(--cp-ink);
}
.form-control:focus{
  border-color:var(--cp-orange);
  box-shadow:0 0 0 4px rgba(247,134,27,.12);
}
label{font-family:var(--cp-ff-head);color:var(--cp-ink);}

/* ===========================================================================
   12. NAVIGATION / BREADCRUMB / PAGINATION
   =========================================================================== */
.breadcrumb{
  background:transparent;
  font-family:var(--cp-ff-body);
  font-size:13.5px;
  color:var(--cp-slate);
}
.breadcrumb > .active{color:var(--cp-ink);}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover{
  background:var(--cp-red) !important;
  border-color:var(--cp-red) !important;
  color:#fff !important;
}
.pagination > li > a{color:var(--cp-ink);}
.pagination > li > a:hover{color:var(--cp-red);}

/* Tabs (Produktseite: Beschreibung / Technische Daten / ...) */
.nav-tabs > li > a{font-family:var(--cp-ff-head);color:var(--cp-slate);}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus{
  color:var(--cp-ink) !important;
  border-bottom-color:transparent;
}
.nav-tabs{border-bottom:2px solid var(--cp-line);}

/* ===========================================================================
   13. FOOTER (Graphit)
   =========================================================================== */
#footer{
  background:var(--cp-graphite) !important;
  color:#C7CDD4;
}
#footer,#footer p,#footer li,#footer .text-muted{color:#C7CDD4 !important;}
#footer .headline,#footer .headline-underline{
  color:#fff !important;
  border-bottom:0 !important;
  position:relative;
  padding-bottom:10px;
}
/* Strich unter den Footer-Überschriften im Heat-Design statt einfarbig grau */
#footer .headline:after,#footer .headline-underline:after{
  content:"";
  display:block !important;
  position:absolute;left:0;bottom:0;
  width:100%;height:2px;border-radius:2px;
  background:var(--cp-heat);
}
#footer a{color:#C7CDD4;}
#footer a:hover{color:#fff;}
#footer .footer-list li:before{color:var(--cp-amber) !important;}
/* Eingaben (Newsletter) im Footer */
#footer .form-control{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff;}
#footer .form-control::placeholder{color:#8A929C;}
/* Hersteller-Combobox: heller Hintergrund + dunkle Schrift -> auch aufgeklappt
   lesbar (vorher weiß auf weiß); native Pfeil-Ausrichtung statt verschobenem Rand */
#footer select.form-control,
#footer #manufacturers{
  background:#fff !important;
  color:var(--cp-ink) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  height:auto !important;
  padding:9px 12px !important;
  line-height:1.4 !important;
  border-radius:var(--cp-r-sm) !important;
  box-shadow:none !important;
  -webkit-appearance:menulist !important;
  -moz-appearance:menulist !important;
  appearance:menulist !important;
}
#footer select.form-control option,
#footer #manufacturers option{ background:#fff; color:var(--cp-ink); }
#footer-meta{background:#24282F !important;color:#8A929C;}
#footer-meta a{color:#AEB5BE;}
#footer-meta a:hover{color:#fff;}

/* ===========================================================================
   14. SONSTIGES
   =========================================================================== */
hr{border-top-color:var(--cp-line);}
::selection{background:rgba(247,134,27,.22);}

/* Akzent-Trennlinie als Utility */
.cp-heat-rule{height:4px;width:64px;border-radius:4px;background:var(--cp-heat);}

/* ===========================================================================
   15. OPTIMIERUNGEN – Iteration 2
   (Header-Höhe, Content-Überschriften, Navigation, Footer-Menü, Steuerzeile)
   =========================================================================== */

/* ----- 15.1 Header kompakter: weniger Luft um Logo/Suche ----- */
#header .header-bg #header-top{
  padding-top:15px !important;
  padding-bottom:15px !important;
}
#header .branding .logo img{max-height:50px !important;}
#header .branding{display:flex;align-items:center;}
#header .header-info{margin-top:0;}

/* Mobiles Logo begrenzen – Pendant zur Desktop-Regel */
.mobile-logo-container .logo { margin: 0; }
.mobile-logo-container .logo img {
  max-height: 64px;   /* Wunschhöhe – hier justieren (z. B. 56–72px) */
  width: auto;        /* Breite folgt der Höhe statt 100% Container */
  max-width: 100%;    /* Sicherheitsnetz gegen Überlauf rechts */
  height: auto;
  margin: 0 auto;     /* zentrieren (img-responsive ist display:block) */
}

/* Konto-Links aus der Metanavigation entfernen (wandern in den Header) */
#meta-navigation .pull-right.user { display: none !important; }

/* ----- 15.2 Content-Überschriften (.breaking-headline) entschärfen -----
   Weg vom schraffierten Original-Hintergrund -> klare Cloneparts-Headline
   mit Heat-Unterstreichung statt Streifenmuster + Farbbalken. */
.breaking-headline{
  background:none !important;
  background-color:transparent !important;
  border-left:0 !important;
  color:var(--cp-ink) !important;
  font-family:var(--cp-ff-head) !important;
  font-weight:700 !important;
  position:relative;
  padding:2px 0 14px 0 !important;
  margin:0 0 26px 0 !important;
}
.breaking-headline:after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:64px;height:4px;border-radius:4px;
  background:var(--cp-heat);
}

/* ----- 15.3 Hauptnavigation: alles in EINE Zeile, Labels dürfen umbrechen -----
   Nur im Desktop-Bereich (ab 768px); die Mobile-Navigation bleibt unberührt.
   WICHTIG: ausschließlich das Hauptmenü (:not(.nav-button-cart)) ansprechen,
   damit die separate Warenkorb-Leiste nicht zwangsweise eingeblendet wird. */
@media (min-width:768px){
  #main-navigation .navbar-nav:not(.nav-button-cart){
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
  }
  #main-navigation .navbar-nav:not(.nav-button-cart) > li{
    display:flex;
    float:none;
  }
  #main-navigation .navbar-nav:not(.nav-button-cart) > li > a,
  #main-navigation .navbar-nav:not(.nav-button-cart) > li > a.dropdown-linker,
  #main-navigation .btn-home{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    white-space:normal;          /* Umbruch innerhalb eines Menüpunkts erlaubt */
    line-height:1.18;
    padding:10px 13px !important; /* schmaler -> mehr Punkte passen in eine Zeile */
    font-size:14px !important;
  }
  /* Heat-Unterstreichung an die schmalere Polsterung anpassen */
  #main-navigation .navbar-nav:not(.nav-button-cart) > li > a:after{left:9px;right:9px;}
}

/* ----- 15.4 Footer-Menü: Punkte entfernen, Widerruf-Button absetzen ----- */
#footer .footer-list{margin-bottom:0;}
#footer .footer-list li{
  margin-left:0 !important;
  line-height:30px;
}
#footer .footer-list li:before{
  content:none !important;
  display:none !important;
}
#footer .footer-list li a{padding-left:0 !important;}

/* "Vertrag widerrufen" (li.btn.btn-success) als eigenständiger,
   dezenter Button auf eigener Zeile statt als eingereihter Listenpunkt */
#footer .footer-list li.btn,
#footer .footer-list li.btn-success{
  display:inline-block;
  float:none;
  background:transparent !important;
  border:1.5px solid rgba(255,255,255,.30) !important;
  color:#fff !important;
  border-radius:var(--cp-r-sm) !important;
  padding:9px 16px !important;
  margin:0 0 16px 0 !important;
  line-height:1.2 !important;
  font-family:var(--cp-ff-head) !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
#footer .footer-list li.btn a{
  color:#fff !important;
  display:inline;
  padding:0 !important;
}
#footer .footer-list li.btn:hover{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.55) !important;
}

/* ----- 15.5 Steuerhinweis: ganz unten, ohne farbige Box ----- */
#footer .tax-footer,
#footer p.tax-footer.img-thumbnail{
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:6px 0 2px 0 !important;
  text-align:center;
  line-height:1.45;
}
#footer .tax-footer small{
  color:var(--cp-slate-2) !important;
  font-family:var(--cp-ff-body);
}
/* die umschließende Footer-Zeile nicht künstlich aufblähen */
#footer .footer-accordion > .row:last-of-type,
#footer #footer-accordion > .row:last-of-type{margin-top:0;}

/* ----- 15.6 Warenkorb-Button in der Navi: Originalverhalten wiederherstellen -----
   Standardmäßig ausgeblendet (der Warenkorb steht bereits im Header);
   erscheint nur, wenn die Navigation beim Scrollen andockt (.affix). */
#main-navigation .nav-button-cart{display:none !important;}

/* Affix: rechts Platz reservieren und den Warenkorb dort NEBEN dem Menü
   absolut positionieren – sonst verdrängt das volle Menü den float:right-Button
   in die nächste Zeile. */
#main-navigation.affix .navbar-collapse,
#main-navigation.affix-bottom .navbar-collapse{ position:relative; }
#main-navigation.affix .navbar-nav:not(.nav-button-cart),
#main-navigation.affix-bottom .navbar-nav:not(.nav-button-cart){ padding-right:72px; }
#main-navigation.affix .nav-button-cart,
#main-navigation.affix-bottom .nav-button-cart{
  display:block !important;
  position:absolute; right:15px; top:50%;
  transform:translateY(-50%);
  margin:0; float:none;
}
/* Heat-Button statt leerer Box */
#main-navigation .nav-button-cart .button-cart{
  background:var(--cp-heat) !important;
  border:0 !important;
  color:#fff !important;
  border-radius:var(--cp-r-sm) !important;
}
#main-navigation .nav-button-cart .button-cart .fa{color:#fff !important;}

/* Beim Scrollen (Affix) wird rechts Platz für den Warenkorb reserviert –
   damit die 8 Menüpunkte trotzdem nicht auf 3 Zeilen umbrechen, hier enger
   gepolstert und etwas kleiner gesetzt. */
#main-navigation.affix .navbar-nav:not(.nav-button-cart) > li > a,
#main-navigation.affix-bottom .navbar-nav:not(.nav-button-cart) > li > a,
#main-navigation.affix .navbar-nav:not(.nav-button-cart) > li > a.dropdown-linker,
#main-navigation.affix-bottom .navbar-nav:not(.nav-button-cart) > li > a.dropdown-linker{
  padding:7px 7px !important;
  font-size:12.5px !important;
  line-height:1.1;
}
#main-navigation.affix .navbar-nav:not(.nav-button-cart) > li > a:after,
#main-navigation.affix-bottom .navbar-nav:not(.nav-button-cart) > li > a:after{ left:7px; right:7px; }

/* ===========================================================================
   16. HEADER-BUTTONS vereinheitlicht (Konto = Warenkorb) + Suchbutton-Feinschliff
   Ersetzt die früheren .cp-account-* / .cp-cart-badge / 15.7- und
   "Header rechts"-Regeln. Konto und Warenkorb nutzen jetzt dieselben
   Bausteine (.cp-hdr-*) und sind dadurch garantiert gleich groß.

   Voraussetzung im Template:
   - box_account.html und box_cart.html verwenden die .cp-hdr-* Struktur
     (Icon-Kreis .cp-hdr-icon, Label .cp-hdr-label, Badge .cp-hdr-badge,
      Login-Status .cp-hdr-status).
   =========================================================================== */

/* Anordnung rechts: Suche -> Konto -> Warenkorb.
   align-items:flex-start -> Suchfeld und Icon-Kreise liegen OBEN bündig
   (die Labels "Anmelden"/"Warenkorb" hängen darunter). */
#header-top .col-md-6{
  display:flex; align-items:flex-start; justify-content:flex-end; gap:14px;
}
#header-top #box-search { order:1; float:none; margin:0; }
#header-top #box-account{ order:2; }
#header-top .box-cart   { order:3; float:none; margin:0; }
/* Konto und Warenkorb auf gleiche Breite -> gleichmäßiger Abstand statt
   label-abhängiger (Anmelden vs. Warenkorb) Verschiebung */
#header-top #box-account,
#header-top .box-cart{ min-width:74px; text-align:center; }

/* Einheitlicher, dezenter Schatten: komplette Suchbox (Feld + Button) und
   die beiden Header-Icons (Konto + Warenkorb) */
#box-search .form-control.keywords,
#box-search .btn-group button,
#box-search .submit-button.btn,
.cp-hdr-icon{
  box-shadow:0 4px 12px rgba(226,35,26,.16);
}

/* Konto + Warenkorb: identische Bausteine */
.cp-hdr-btn{ display:inline-block; text-decoration:none; color:inherit; text-align:center; line-height:1; }
.cp-hdr-icon{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;   /* eine Stelle für die Größe – beide ziehen mit */
  background:var(--cp-heat); color:#fff;
}
.cp-hdr-icon .fa{ color:#fff; font-size:19px; line-height:1; }
.cp-hdr-label{
  display:block; margin-top:4px;
  font-family:var(--cp-ff-body);
  font-size:12px; line-height:1.15; color:var(--cp-slate); white-space:nowrap;
}
.cp-hdr-btn:hover .cp-hdr-label{ color:var(--cp-red); }

/* Warenkorb-Anzahl als Badge auf dem Icon */
.cp-hdr-badge{
  position:absolute; top:-5px; right:-5px;
  min-width:19px; height:19px; padding:0 5px;
  border-radius:10px;
  background:var(--cp-ink); color:#fff;
  font-family:var(--cp-ff-mono);
  font-size:11px; line-height:19px; font-weight:700; text-align:center;
  box-shadow:0 0 0 2px #fff;
}

/* Login-Status: grüner Punkt am Konto-Icon (nur eingeloggt) */
.cp-hdr-status{
  position:absolute; bottom:0; right:0;
  width:12px; height:12px; border-radius:50%;
  background:#28a745; box-shadow:0 0 0 2px #fff;
}

/* Suchbutton bündig ans Feld (Feld 46px hoch, Button gleich hoch, kein Überlappen) */
#box-search .form-control.keywords{ padding-right:14px; }   /* Basis-40px (für Überlappung) zurücknehmen */
#box-search .btn-group button,
#box-search .submit-button.btn{
  width:46px; height:46px;   /* = Feldhöhe (Basis war 40px) */
  margin-left:0;             /* Basis: -30px Überlappung entfernen */
  padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:0 var(--cp-r-sm) var(--cp-r-sm) 0 !important;
  background:var(--cp-heat) !important;
}
#box-search .btn-group button .fa{ color:#fff; font-size:16px; }

/* ===========================================================================
   17. RESPONSIVE-FEINSCHLIFF: Mobile-Buttons (XS) + Tablet-Bereich (SM)
   =========================================================================== */

/* ----- 17.1 Mobile (XS): Header-Buttons im Heat-Design, einheitlich groß -----
   Betrifft Burger, Home, Suche und den neuen Konto-Button in der Navbar.
   (Der Warenkorb braucht hier nichts – er erscheint als Fußleiste,
    sobald ein Artikel im Korb ist.)
   WICHTIG: nur im XS-Bereich aktiv – sonst würde display:inline-flex am
   .navbar-toggle Bootstraps display:none überschreiben und der Burger
   erschiene auch auf dem Desktop. */
@media (max-width:767px){

/* gemeinsame Optik + EINHEITLICHE Höhe/vertikale Position für alle vier */
#main-navigation .navbar-toggle,
#main-navigation .btn-mobile.home-btn,
#main-navigation .btn-mobile.search-btn,
#main-navigation .btn-mobile.account-btn{
  height:44px; min-width:48px;
  margin-top:10px !important; margin-bottom:10px !important;
  background:var(--cp-heat) !important;
  border:0 !important;
  border-radius:var(--cp-r-sm) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(226,35,26,.22);
}

/* Burger links – Balken vertikal zentrieren */
#main-navigation .navbar-toggle{
  float:left;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 14px;
}
#main-navigation .navbar-toggle .icon-bar{ background:#fff !important; }

/* rechte Buttons – mehr Abstand für die Bedienbarkeit (≈14px Lücke) */
#main-navigation .btn-mobile.home-btn,
#main-navigation .btn-mobile.search-btn,
#main-navigation .btn-mobile.account-btn{
  float:right;
  margin-left:7px !important; margin-right:7px !important;
  display:inline-flex; align-items:center; justify-content:center;
}
#main-navigation .btn-mobile .fa{ color:#fff !important; font-size:17px; }

}/* Ende @media (max-width:767px) – 17.1 nur XS */

/* ----- 17.2 Tablet (SM, 768–991px): Suche + Konto einblenden ----- */
@media (min-width:768px) and (max-width:991px){
  /* header-info weicht, um Platz für die Buttons zu schaffen */
  #header-top .col-md-2{ display:none; }
  #header-top .branding.col-sm-4{ width:40%; }
  #header-top .col-md-6.col-sm-4{ width:60%; }

  /* Suchfeld + Konto-Button im Tablet sichtbar machen (heben hidden-sm auf) */
  #header-top #box-search { display:block !important; }
  #header-top #box-account{ display:block !important; }

  /* Hauptmenü: engere Polsterung + kleinere Schrift -> sauberere Umbrüche */
  #main-navigation .navbar-nav:not(.nav-button-cart) > li > a,
  #main-navigation .navbar-nav:not(.nav-button-cart) > li > a.dropdown-linker{
    padding:9px 7px !important;
    font-size:12.5px !important;
    line-height:1.12;
  }
  #main-navigation .navbar-nav:not(.nav-button-cart) > li > a:after{ left:7px; right:7px; }
}

/* ===========================================================================
   18. FOOTER: 4-Spalten-Layout (Anordnung wie ProNautics)
   Setzt das umgebaute Footer-Markup voraus – EINE Reihe mit 4 Spalten:
   Kontakt | Informationen | Inhalt | Hersteller+Zahlungsweisen.
   =========================================================================== */
/* Ersatz für die entfallene zweite Footer-Reihe (Abstand nach unten) */
#footer .footer-top{ padding-bottom:28px; }
/* Abstand zwischen Hersteller-Auswahl und Zahlungsweisen in Spalte 4 */
#footer .footer-col-brand > * + *{ margin-top:20px; }

/* ===========================================================================
   19. SIDEBAR-BOXEN im Kategorie-Listing (z.B. "Zuletzt angesehen", "Neue Artikel")
   - Überschriften lesbar (vorher helle Schrift auf hellem Grund)
   - dezenter Karten-Look passend zu den Produktkacheln
   =========================================================================== */
/* Überschriften: dunkel + Heat-Akzentstrich statt unleserlich hell */
#content .secondary .sidebar-box .headline,
#content .secondary .sidebar-box .headline-underline,
#content .secondary .headline,
#content .secondary .headline-underline{
  color:var(--cp-ink) !important;
  background:none !important;
  position:relative;
  margin-top:0;
  padding-bottom:10px;
  border-bottom:0 !important;
}
#content .secondary .sidebar-box .headline:after,
#content .secondary .sidebar-box .headline-underline:after,
#content .secondary .headline:after,
#content .secondary .headline-underline:after{
  content:"";
  display:block;
  position:absolute;left:0;bottom:0;
  width:48px;height:3px;border-radius:3px;
  background:var(--cp-heat);
}
/* Box als dezente Karte (wie die Produktkacheln) */
#content .secondary .sidebar-box{
  background:#fff;
  border:1px solid var(--cp-line);
  border-radius:var(--cp-r);
  box-shadow:var(--cp-shadow-sm);
  padding:16px;
  margin-bottom:16px;
}
#content .secondary .sidebar-box:last-child{ margin-bottom:0; }