/* Selbst gehostete Schriften – kein Aufruf an Google im Browser.
   Google Fonts direkt einzubinden gilt in Deutschland als datenschutz-
   rechtlich problematisch (LG Muenchen I, 3 O 17493/20). */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts-mp/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts-mp/92zatBhPNqw73oDd4iYl.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts-mp/92zatBhPNqw73ord4iYl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts-mp/92zatBhPNqw73oTd4g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts-mp/92zatBhPNqw73oDd4iYl.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts-mp/92zatBhPNqw73ord4iYl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts-mp/92zatBhPNqw73oTd4g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts-mp/92zatBhPNqw73oDd4iYl.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts-mp/92zatBhPNqw73ord4iYl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts-mp/92zatBhPNqw73oTd4g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   Maison Privé – Gestaltung
   Wird vom Template automatisch als css/tpl_custom.css zuletzt geladen.
   Der Shop-Kern bleibt unangetastet; alles hier ist eine Schicht darueber.

   Haltung: Der Kauf ist intim und soll wuerdevoll wirken, nicht anruechig.
   Deshalb der dunkle Raum statt der ueblichen weissen Shop-Flaeche – die
   Diskretion des Produkts wird zur Gestaltung. Gold traegt genau eine
   Aufgabe: es markiert, was echt und wertvoll ist (Preis, Marke, Aktion).

   Signatur: die Haarlinie. Sie liegt still unter Ueberschriften und
   entzuendet sich am Rand einer Karte, sobald man sie beruehrt – das
   Siegel-Motiv des Hauses, uebersetzt in ein Detail.
   ========================================================================== */

:root {
  --noir:      #08070A;  /* Seite – Schwarz mit einem Hauch Violett, nie reines #000 */
  --onyx:      #121016;  /* erhabene Flaechen, Karten */
  --umbra:     #221E28;  /* Haarlinien, Trenner */
  --or:        #C8A253;  /* Altgold – die einzige Akzentfarbe */
  --or-clair:  #E8D6A6;  /* Gold-Lichter, Hover, Fokus */
  --champagne: #EDE6DA;  /* Fliesstext auf Dunkel */
  --cendre:    #8E8794;  /* Nebentext */

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  --linie: 1px solid var(--umbra);
  --ruhe:  180ms cubic-bezier(.2,.6,.3,1);
}

/* ---------------------------------------------- Rahmenfarben global daempfen
   Das Basis-Stylesheet setzt Rahmen in #ccc, #ddd, #eee, #d9d9d9 und #e1e1e1.
   Auf schwarzem Grund leuchten die als weisse Linien quer durch die Seite.
   Statt jede Stelle einzeln zu jagen: alles auf die Haarlinie ziehen und
   Gold anschliessend dort wieder setzen, wo es hingehoert (Regeln weiter
   unten sind spezifischer und gewinnen).
   Das Basis-Stylesheet arbeitet an mehreren Stellen mit !important, deshalb
   muss der Reset ebenfalls durchgreifen. Goldene Raender werden weiter unten
   ausdruecklich wieder gesetzt. */
.layout_wrap *,
.layout_wrap *::before,
.layout_wrap *::after,
.layout_wrap hr {
  border-color: var(--umbra) !important;
}

/* --------------------------------------------------------------- Grundlage */
html, body {
  background: var(--noir);
  color: var(--champagne);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body, .layout_wrap, .theme_default, #wrapper, .layout_content,
.main_content, .content_wrap {
  background: var(--noir) !important;
  color: var(--champagne);
}

h1, h2, h3, h4, .title, .subline, .content_box_header, .lb_title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--champagne);
}

/* .title gehoert NICHT in diese Regel: die Klasse traegt im Nova-Template
   sowohl Abschnittsueberschriften als auch kleine Beschriftungen in den
   Kopf-Aufklappern. Auf 2.6rem gesetzt wurde daraus im Anmeldefeld ein
   41-px-Schriftzug "Kundenkonto erstellen". */
h1 { font-size: 2.6rem; line-height: 1.15; margin: 0 0 .6em; }
.title { font-size: 1.5rem; line-height: 1.25; }
h2 { font-size: 1.9rem; line-height: 1.25; margin: 1.8em 0 .5em; }
h3 { font-size: 1.35rem; margin: 1.6em 0 .4em; }

p  { color: var(--champagne); }
li { color: var(--champagne); }
strong, b { font-weight: 500; color: #fff; }
em { color: var(--cendre); font-style: italic; }
hr { border: 0; border-top: var(--linie); margin: 2.5rem 0; }

a         { color: var(--or); text-decoration: none; transition: color var(--ruhe); }
a:hover   { color: var(--or-clair); }
::selection { background: var(--or); color: var(--noir); }

/* Tastaturbedienung muss sichtbar bleiben */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--or-clair);
  outline-offset: 2px;
}

/* Signatur: goldene Haarlinie unter Abschnittsueberschriften */
h2::after, .content_box_header::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 1px;
  background: var(--or);
  margin-top: .55rem;
  opacity: .85;
}

/* ------------------------------------------------------------------ Kopf */
.layout_header, .layout_header_inner {
  background: var(--noir) !important;
  border-bottom: var(--linie);
}
.flex_header_row { padding: .5rem 0; }

.col_logo img { max-height: 62px; width: auto; }

/* Die runden Icon-Knoepfe im Kopf sassen auf Hellgrau */
#toggle_search, #toggle_settings, #toggle_account, #toggle_cart,
.toggle_search > div, .col_search .search_button {
  background: var(--onyx) !important;
  color: var(--or) !important;
  border: var(--linie);
}
#toggle_search:hover, #toggle_settings:hover,
#toggle_account:hover, #toggle_cart:hover {
  border-color: var(--or) !important;
  color: var(--or-clair) !important;
}

/* Aufklapp-Flaechen (Suche, Konto, Warenkorb, Einstellungen) */
.toggle_search, .toggle_settings, .toggle_account, .toggle_cart,
.box-search, .box-login, .settingsbox, .suggestionsBox, .mega_menu {
  background: var(--onyx) !important;
  color: var(--champagne) !important;
  border: var(--linie);
  box-shadow: 0 18px 50px rgba(0,0,0,.65);
}
.toggle_headline {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--or);
}

/* --- Kopf-Aufklapper kompakt halten -----------------------------------------
   Die grosszuegigen Abstaende fuer Formulare im Seiteninhalt sind hier fehl am
   Platz: das Anmeldefeld ist ein schmales Panel, kein Seitenformular. */
.box-login .title, .toggle_account .title, .settingsbox .title,
.toggle_cart .title, .box-search .title {
  font-family: var(--sans) !important;
  font-size: .85rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--champagne) !important;
  padding: 0 !important;
}
.box-login .title::after, .toggle_account .title::after { display: none; }

.toggle_account input[type=text], .toggle_account input[type=email],
.toggle_account input[type=password], .box-login input {
  padding: .5rem .7rem !important;
  font-size: .9rem !important;
}
.toggle_account .cssButton, .toggle_account .cssButtonText,
.box-login .cssButton, .box-login .cssButtonText {
  padding: .6rem 1rem !important;
  font-size: .72rem !important;
}
/* Die beiden Verweise unter dem Schalter sind Nebenwege, keine Ueberschriften */
.toggle_account .toggle_action_1, .toggle_account a { font-size: .85rem; }

/* Feldbeschriftungen standen mit 16px dicht ueber dem Eingabefeld und klebten
   optisch an dessen Rahmen. Als kleine Versalzeile mit Luft darunter sitzt die
   Beziehung Beschriftung-Feld richtig. */
/* Beim Passwortfeld liegt zwischen Beschriftung und Eingabe noch ein
   span.field_input, das die Beschriftung ueberlagerte. Als Spalten-Flexbox
   stapeln sich Beschriftung und Feld verlaesslich, egal wie tief verschachtelt. */
.toggle_account label, .box-login label, .settingsbox label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .35rem;
  font-size: .68rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cendre) !important;
  line-height: 1.5;
}
/* span.field_input ist ein bordierter Kasten mit eigenem Polster. Sein Rahmen
   begann auf Hoehe der Beschriftung und schnitt sie durch (gemessen: Kasten ab
   226px, Text 217–228px). Der Wrapper braucht keine eigene Optik – Rahmen und
   Hintergrund tragen das Eingabefeld und die Augen-Schaltflaeche darin. */
.toggle_account label .field_input, .box-login label .field_input {
  display: block;
  width: 100%;
  margin-top: .45rem;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.toggle_account .field_item_1, .box-login .field_item_1 {
  padding: .3rem 0 .75rem !important;
}
.toggle_account .field_item_1 input, .box-login .field_item_1 input {
  margin-top: .35rem;
}
/* Das Auge zum Passwort-Einblenden sass als eigener Kasten daneben */
.field_eye {
  border: var(--linie) !important;
  border-left: 0 !important;
  background: var(--onyx) !important;
  color: var(--cendre) !important;
}
.field_eye:hover { color: var(--or) !important; }
.field_password { background: transparent !important; }

/* Der Hinweis "Kundengruppe: Gast" kam mit blauem Standard-Symbol */
.infomessage {
  background: var(--onyx) !important;
  border: var(--linie);
  color: var(--cendre) !important;
  font-size: .78rem !important;
}
/* Das Symbol ist ein ::before mit Font-Awesome-Zeichen in Signalblau
   (#296AAB auf hellblauem Feld) – das passt nicht zu Schwarz und Gold. */
.infomessage::before {
  background: rgba(200, 162, 83, .10) !important;
  color: var(--or) !important;
}
.infomessage .icon, .infomessage i {
  background: transparent !important;
  color: var(--or) !important;
}

/* --------------------------------------------------------------- Navigation
   Das Navigationsband liegt in .layout_categories und war hellgrau (#f0f0f0) –
   auf Desktop-Breite ein weisser Balken quer ueber die Seite. Faellt bei
   schmalen Fenstern nicht auf, weil dort das Mobilmenue greift. */
.layout_categories, .layout_categories_inner {
  background: var(--noir) !important;
  border-top: var(--linie);
  border-bottom: var(--linie);
}
.menu_items, .mobile_menu { background: transparent !important; }

.menu_items > li.level1 > a,
.mobile_menu > li.level1 > a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--champagne) !important;
  padding: 1rem .95rem;
  position: relative;
}
.menu_items > li.level1 > a:hover,
.menu_items > li.active1 > a,
.menu_items > li.activeparent1 > a {
  color: var(--or) !important;
}
/* Signatur, zweite Anwendung: Linie faehrt unter dem aktiven Punkt aus */
.menu_items > li.level1 > a::after {
  content: "";
  position: absolute;
  left: .95rem; right: .95rem; bottom: .6rem;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ruhe);
}
.menu_items > li.level1 > a:hover::after,
.menu_items > li.active1 > a::after { transform: scaleX(1); }

.level2 a, .subcats_item a { color: var(--cendre) !important; }
.level2 a:hover, .subcats_item a:hover { color: var(--or) !important; }

.subcats_item, .subcats_item_inner {
  background: var(--onyx) !important;
  border: var(--linie);
  transition: border-color var(--ruhe);
}
.subcats_item:hover { border-color: var(--or) !important; }
.subcats_title { font-family: var(--serif); font-size: 1.15rem; color: var(--champagne); }

/* --- Aufklappmenue unter einem Navigationspunkt -----------------------------
   Hier standen zwei Groessen nebeneinander, die nicht zueinander passten:
   "Alles anzeigen" wurde von der Schalter-Regel als gerahmter Kasten gesetzt,
   die Unterkategorien darunter mit 12px. Beide jetzt auf einer Stufe. */
.mega_menu > .cf, .mega_menu > div { padding: .5rem .9rem 1rem !important; }

.mega_menu .overview a {
  border: 0 !important;
  background: transparent !important;
  padding: .5rem .2rem .7rem !important;
  font-size: .78rem !important;
  letter-spacing: .12em;
  text-transform: none;
  color: var(--or) !important;
}
.mega_menu .overview a:hover { color: var(--or-clair) !important; }
.mega_menu .overview { border-bottom: var(--linie); margin-bottom: .4rem !important; }

.mega_menu li.level2 > a {
  display: block;
  font-family: var(--sans);
  font-size: .78rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cendre) !important;
  padding: .5rem 0 !important;
  border-bottom: 1px solid var(--umbra) !important;
  transition: color var(--ruhe), border-color var(--ruhe);
}
.mega_menu li.level2 > a:hover {
  color: var(--or) !important;
  border-bottom-color: var(--or) !important;
}
.mega_menu li.level2 { padding: 0 1.2rem !important; margin: 0 !important; }

.breadcrumb {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cendre);
  padding: 1.6rem 0 .4rem;
}
.breadcrumb a { color: var(--cendre); }
.breadcrumb a:hover { color: var(--or); }

/* ------------------------------------------------------------ Produktkarten */
.listingbox, .lb_inner {
  background: var(--onyx) !important;
  border: var(--linie) !important;
  border-radius: 0 !important;
  transition: border-color var(--ruhe), transform var(--ruhe);
}
.lb_inner { padding-bottom: 1rem; }
.listingbox:hover .lb_inner, .lb_inner:hover {
  border-color: var(--or) !important;
  transform: translateY(-2px);
}
.lb_image, .prod_image { background: var(--noir) !important; }

.lb_title, .lb_title a, .lb_title_inner {
  font-family: var(--serif) !important;
  font-size: 1.2rem !important;
  font-weight: 400;
  color: var(--champagne) !important;
  line-height: 1.3;
}
.lb_title a:hover { color: var(--or) !important; }

.lb_price, .value_price {
  font-family: var(--serif) !important;
  font-size: 1.45rem !important;
  color: var(--or) !important;
  letter-spacing: .01em;
}
/* Achtung: .standard_price umschliesst im Nova-Template den NORMALEN Preis,
   nicht einen durchgestrichenen Altpreis. Hier also kein line-through. */
.standard_price { color: var(--or) !important; }
.lb_tax, .lb_shipping {
  font-size: .72rem;
  color: var(--cendre) !important;
  letter-spacing: .04em;
}
.lb_tax a, .lb_shipping a { color: var(--cendre) !important; text-decoration: underline; }

/* Das grelle gruene NEU-Fahnchen passt nicht zum Haus */
.lb_new_flag {
  background: transparent !important;
  color: var(--or) !important;
  border: 1px solid var(--or) !important;
  border-radius: 0 !important;
  font-family: var(--sans);
  font-size: .62rem !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .25rem .6rem !important;
}

/* --------------------------------------------------------------- Schalter
   Nur echte Schaltflaechen vergolden. Ein pauschales "button" traf auch die
   Karussell-Pfeile und die Icon-Knoepfe im Kopf – die wurden dadurch zu
   goldenen Kloetzen am Rand der Produktreihen. */
.cssButton, .cssButtonText, input[type=submit] {
  font-family: var(--sans) !important;
  font-weight: 500;
  font-size: .78rem !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 0 !important;
  border: 1px solid var(--or) !important;
  background: var(--or) !important;
  color: var(--noir) !important;
  padding: .85rem 1.6rem !important;
  transition: background var(--ruhe), color var(--ruhe);
}
.cssButton:hover, .cssButtonText:hover, input[type=submit]:hover {
  background: var(--or-clair) !important;
  color: var(--noir) !important;
}
/* Karussell-Pfeile bleiben dezente Icons, keine Schaltflaechen */
button.splide__arrow {
  background: rgba(18,16,22,.85) !important;
  border: var(--linie) !important;
  color: var(--or) !important;
  padding: 0 !important;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50% !important;
}
button.splide__arrow:hover { border-color: var(--or) !important; background: var(--onyx) !important; }
button.splide__arrow svg { fill: var(--or); }
/* Zweitrangige Aktionen bleiben zurueckhaltend */
.cssButtonColor2, .cssButtonColor3 {
  background: transparent !important;
  color: var(--or) !important;
}
.cssButtonColor2:hover, .cssButtonColor3:hover {
  background: var(--or) !important;
  color: var(--noir) !important;
}
.cssButtonIcon { color: inherit !important; }

/* --------------------------------------------------------------- Formulare */
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=search], input[type=number], select, textarea, .field_input {
  background: var(--onyx) !important;
  border: var(--linie) !important;
  border-radius: 0 !important;
  color: var(--champagne) !important;
  font-family: var(--sans);
  padding: .7rem .85rem !important;
}
input::placeholder, textarea::placeholder { color: var(--cendre); }
input:focus, select:focus, textarea:focus { border-color: var(--or) !important; }
label, .field_text, .inputRequirement { color: var(--cendre); }

/* ------------------------------------------------------- Inhalt und Kaesten */
.content_box, .content_big, .overview, .infomessage, .footer_item {
  background: transparent !important;
  color: var(--champagne);
}
.content_box_header {
  font-size: 1.15rem;
  color: var(--champagne);
  margin-bottom: .8rem;
}
.content_box_text, .content_box_list { color: var(--cendre); }
.content_box_list a { color: var(--cendre); }
.content_box_list a:hover { color: var(--or); }

/* Newsletter-Band – der einzige leicht abgesetzte Block */
.layout_subfooter {
  background: var(--onyx) !important;
  border-top: var(--linie);
  border-bottom: var(--linie);
  color: var(--champagne);
}
.sf_newsletter_heading {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--champagne);
}
.sf_newsletter_text     { color: var(--cendre); }
.sf_newsletter_disclaim { color: #6E6875; font-size: .78rem; }

/* Fussbereich – im ersten Entwurf war der Text fast unlesbar dunkel */
.layout_footer { background: var(--noir) !important; }
.layout_footer .content_box_header {
  color: var(--champagne);
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.layout_footer .content_box_text,
.layout_footer .content_box_list,
.layout_footer .content_box_list a,
.layout_footer p, .layout_footer li, .layout_footer div {
  color: #B4ADBA;
}
.layout_footer .content_box_text strong  { color: var(--champagne); }
.footer_row, .footer_item { background: transparent !important; }

/* Die Fusszeilen-Links stecken in li.level1 und erbten daraus #333 aus dem
   Basis-Stylesheet – auf Schwarz praktisch unsichtbar. Deshalb breit gefasst. */
/* Der Linktext steckt zusaetzlich in einem span mit eigener Farbe – deshalb
   muss der span mitgefaerbt werden, sonst bleibt er auf #333. */
.layout_footer a,
.layout_footer a span,
.layout_footer li a,
.layout_footer .level1 a,
.layout_footer .content_box_list a { color: #B4ADBA !important; }
.layout_footer a:hover,
.layout_footer a:hover span,
.layout_footer li a:hover { color: var(--or) !important; }

table { border-collapse: collapse; }
table th, table td { border-bottom: var(--linie); padding: .7rem .5rem; }
table th { font-family: var(--sans); font-size: .72rem; letter-spacing: .16em;
           text-transform: uppercase; color: var(--cendre); font-weight: 400; }

/* Eigene Auszeichnungen aus den Inhaltsseiten */
.mp-claim {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--or);
  margin: 0 0 2rem;
}
.mp-intro { font-size: 1.1rem; color: var(--cendre); max-width: 46rem; }
.mp-model {
  border-top: var(--linie);
  padding-top: 2rem;
  margin-top: 2.5rem;
}
.mp-age {
  border-left: 2px solid var(--or);
  padding: .2rem 0 .2rem 1rem;
  color: var(--champagne);
}
.mp-todo {
  border: 1px dashed var(--umbra);
  padding: .9rem 1.1rem;
  color: var(--cendre);
  font-size: .88rem;
}

/* ------------------------------------------------------------ Produktseite */
.pd_manu a { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
             color: var(--or) !important; }
.pd_heading h1 { font-size: 2.4rem; }
.pd_rating_icons { color: var(--or); }
.pd_rating_count, .pd_heading_inforow { color: var(--cendre); font-size: .85rem; }
.pd_manu_image img { border: var(--linie); }

/* ------------------------------------------------------------------- Fuss */
.layout_footer, footer { background: var(--noir) !important; border-top: var(--linie); }

/* ------------------------------------------------------- Altersabfrage 18+ */
#mp-age { background: var(--noir); font-family: var(--serif); }
#mp-age-box {
  background: var(--onyx);
  border: 1px solid var(--or);
  max-width: 30rem;
}
#mp-age-box .mp-brand {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .42em;
  color: var(--or);
}
#mp-age-box h2 { font-family: var(--serif); font-size: 1.9rem; color: var(--champagne); }
#mp-age-box h2::after { display: none; }
#mp-age-box p { font-family: var(--sans); color: var(--cendre); }
#mp-age-box button {
  font-family: var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .76rem;
  background: var(--or);
  border-color: var(--or);
  color: var(--noir);
}
#mp-age-box button.mp-no { background: transparent; color: var(--or); }
#mp-age-box .mp-legal { color: #6E6875; }

/* ================================================================
   Nachzuegler aus dem Basis-Stylesheet
   Ermittelt mit einem Kontrast-Durchlauf ueber die gerenderten Seiten,
   nicht geraten. Zwei Sorten: helle Flaechen, auf denen heller Text
   unsichtbar wurde, und dunkler Text (#333/#555/#666) auf Schwarz.
   Auffaelligster Fall: die H1 der Produktseite stand auf #333.
   ================================================================ */

/* -- helle Flaechen -- */
.toggle_closer, .toggle_headline,
.CaptionCont, .field_password,
.content_full_colored,
.resp-tabs-container, .resp-tabs-list, .resp-tab-content, .resp-tab-contents, .resp-accordion,
.mm-ocd__content, .mm-spn, .mm-listitem {
  background: var(--onyx) !important;
  border-color: var(--umbra) !important;
}
.content_full_colored { border-top: var(--linie); border-bottom: var(--linie); }
.resp-tab-active { background: var(--noir) !important; border-color: var(--or) !important; }

/* -- dunkler Text -- */
.title, .nolink,
.pd_manu, .pd_manu a, .manu_image_padding,
.resp-accordion, .resp-arrow, .resp-tabs-list li,
.CaptionCont, .mm-listitem a {
  color: var(--champagne) !important;
}
.limit, .limit a,
.pd_rating_count, .pd_tax, .pd_added,
.toggle_closer, .field_eye, .icon,
.pd_heading_inforow {
  color: var(--cendre) !important;
}
.pd_tax a, .pd_added a { color: var(--cendre) !important; text-decoration: underline; }

/* Der Titel der Produktseite ist die wichtigste Zeile der Seite */
h1.manu_image_padding, .pd_heading h1 {
  color: var(--champagne) !important;
  font-family: var(--serif) !important;
}
.pd_manu a { color: var(--or) !important; }

/* Freistehende Links, die noch #333 aus dem Basis-Stylesheet erben.
   Bewusst nicht auf alle a-Elemente, sonst faerbt es die Schalter um. */
.layout_wrap a:not(.cssButton):not(.cssButtonText):not([class*=splide]) {
  color: var(--or);
}
.layout_wrap a:not(.cssButton):not(.cssButtonText):hover { color: var(--or-clair); }
/* .layout_footer stand hier faelschlich mit drin und hat die Fusszeilen-
   Korrektur weiter oben wieder auf "inherit" (= #333) zurueckgesetzt. */
.lb_title a, .subcats_item a, .menu_items a { color: inherit; }

/* Aufklappbare Reiter der Produktseite: der aktive war noch weiss */
.resp-accordion, .resp-accordion.resp-tab-active,
.resp-tabs-list li, .resp-tabs-list li.resp-tab-active {
  background: var(--onyx) !important;
  color: var(--champagne) !important;
  border-color: var(--umbra) !important;
}
/* Der aktive Reiter der Produktseite.
   stylesheet.css setzt ihn mit `.pd_accordion h2.resp-tab-active { background:
   #fff !important }` – das ist spezifischer als eine Klassenkombination allein.
   Deshalb hier dieselbe Selektorform, damit die spaetere Datei gewinnt. */
.resp-accordion.resp-tab-active, .resp-tabs-list li.resp-tab-active,
.pd_tabs h2.resp-tab-active,      .pd_tabs div.resp-tab-active,
.pd_accordion h2.resp-tab-active, .pd_accordion div.resp-tab-active,
.pd_tabs .resp-tabs-list li.resp-tab-active {
  background: var(--onyx) !important;
  border-bottom-color: var(--or) !important;
  color: var(--or) !important;
}
/* Die inaktiven Reiter und der Inhaltsbereich daneben */
.pd_tabs h2.resp-accordion, .pd_accordion h2.resp-accordion,
.pd_tabs .resp-tab-content, .pd_accordion .resp-tab-content {
  background: var(--onyx) !important;
  color: var(--champagne) !important;
}
.pd_tabs, .pd_accordion { background: transparent !important; }

/* Kleingedrucktes: lesbar, aber zurueckhaltend */
.cop_grey, .sf_newsletter_disclaim, .font_small { color: var(--cendre) !important; }

/* Symbolschrift im Kopf und in Listen bleibt gold, nicht grau */
.fa-solid, .fa-regular, .fa-brands { color: inherit; }

/* ---------------------------------------------------------- Banner-Bildzeile
   Der Banner-Titel lag als graue Kachel mitten im Bild. Als zurueckhaltende
   Zeile unten links stoert er die Aufnahme nicht mehr. */
.banner_item_content {
  background: transparent !important;
  /* Das Element bringt einen 1px-Rahmen mit – der stand als duenner Kasten
     mitten im Bild, sobald der graue Hintergrund weg war. */
  border: 0 !important;
  padding: 0 0 1.6rem 1.6rem !important;
  text-align: left;
}
.banner_item_content span,
.banner_item_content a {
  color: var(--champagne) !important;
  font-family: var(--sans) !important;
  font-size: .74rem !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,.9);
  background: transparent !important;
}

/* --------------------------------------------- Suchleiste und Restflaechen */
/* Das Kategorie-Auswahlfeld der Suche ("Alle") stand auf #eee. */
.search_cat, .search_cat_mode, .search_inner, .search_input,
.SumoSelect > .CaptionCont, .SumoSelect .optWrapper,
.SumoSelect .optWrapper > .options li.opt {
  background: var(--onyx) !important;
  color: var(--champagne) !important;
}
.SumoSelect .optWrapper > .options li.opt:hover,
.SumoSelect .optWrapper > .options li.opt.selected {
  background: var(--umbra) !important;
  color: var(--or) !important;
}
.box-search, .search_inner { border: var(--linie); }

/* "Alle anzeigen" ueber den Artikelreihen war ein hellgrauer Kasten.
   Der Link sitzt in div.more innerhalb von .box_products_head. */
.more a, .box_products_head .more a, .overview a, a.button_more {
  background: transparent !important;
  border: 1px solid var(--umbra) !important;
  color: var(--or) !important;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .55rem 1rem;
  transition: border-color var(--ruhe), color var(--ruhe);
}
.more a:hover, .box_products_head .more a:hover, .overview a:hover, a.button_more:hover {
  border-color: var(--or) !important;
  color: var(--or-clair) !important;
}

/* ------------------------------------------------------------- Kleinkram */
img { max-width: 100%; height: auto; }

@media (max-width: 767px) {
  h1, .title { font-size: 2rem; }
  .mp-claim { font-size: 1.2rem; }
  .menu_items > li.level1 > a { padding: .8rem .7rem; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .menu_items > li.level1 > a::after { transition: none; }
}