body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/* ============================================================
   MACHINERA – GLOBALES DESIGN  (Hell/Dunkel umschaltbar)
   ------------------------------------------------------------
   Architektur:
   - HELL ist der Standard = die nativen Komponenten-Stylesheets
     (bundles/.../css/*.css) sind bereits ein helles Theme.
   - DUNKEL wird über die Root-Klasse  html.mm-dark  aktiviert;
     alle dunklen Overrides hängen darunter.
   - Umschalten global über den Button in der Navigation
     (Theme-Script in tl_layout.head, Persistenz via localStorage
     Schlüssel "mm_theme", Default = dark laut Design-Spec).
   Backup des vorigen Stands: files/css/style.css.bak-2026-07-08
   ============================================================ */

/* Schriften wie machinet-v4: Barlow Semi Condensed (Text) + Saira Semi Condensed
   / Space Grotesk (Überschriften). */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Saira+Semi+Condensed:wght@600&display=swap');

/* ---------------------------------------------------------------- Tokens */
:root {
  --color-dark:        #0f1923;
  --color-dark-mid:    #1a2535;
  --color-dark-light:  #243044;
  --color-accent:      #e85d26;
  --color-accent-dark: #c04b1e;
  --color-white:       #ffffff;
  --color-bg:          #0f1923;
  --color-surface:     #1a2535;
  --color-border:      rgba(255,255,255,0.08);
  --color-border-mid:  rgba(255,255,255,0.15);
  --color-text:        #ffffff;
  --color-text-mid:    rgba(255,255,255,0.7);
  --color-text-muted:  rgba(255,255,255,0.4);

  --font-sans: 'Barlow Semi Condensed', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'Saira Semi Condensed', 'Space Grotesk', 'Barlow Semi Condensed', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px; --space-xl:40px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-pill:20px;
  --shadow-hover: 0 4px 20px rgba(0,0,0,0.35);
}

/* ======================================================= BASIS (HELL) === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  background: #f4f6f9;   /* helles Standard-Theme */
  overflow-x: clip;      /* verhindert horizontales Scrollen durch Full-Width-Elemente (bricht kein sticky) */
}

/* Überschriften in der v4-Display-Schrift (Saira Semi Condensed), leicht
   negativer Laufweite. Fließtext/Buttons/Eingaben bleiben Barlow (var(--font-sans)). */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); letter-spacing: -0.015em; }

/* Formularelemente erben die Schrift NICHT vom body – Browser setzen dort ihre
   eigene UA-Schrift (in Chrome/Edge: Arial). Ohne diese Regel fallen Buttons,
   Eingabefelder, Auswahllisten und Textfelder aus der Machinet-Typografie;
   im Filter betraf das u. a. alle Facetten-Toggles, Such- und Baujahr-Felder,
   die Sortier-Auswahl und die Ansichts-Umschalter.
   Nur Element-Spezifität (0,0,1) – damit gezielte Klassenregeln wie der
   Twemoji-Flaggenfont der Sprachumschaltung weiterhin gewinnen. */
button, input, select, textarea, optgroup { font-family: var(--font-sans); }

img { max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: #2d3c62; text-decoration: none; }
a:hover { color: var(--color-accent); }
ul { margin: 0; padding: 0; list-style: none; }
.clear { clear: both; }
.invisible { position: absolute; left: -9999px; }

/* ------------------------------------------------- Seitenrahmen (neutral) */
#wrapper { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
#container { display: flow-root; }

/* Full-Width-Utility: bricht aus dem zentrierten #wrapper (max 1400px) aus und
   spannt ein Element über die GESAMTE Seitenbreite. Auf jedes Content-Element
   anwendbar (z. B. „Ungefiltertes HTML"). Innen sollte ein eigener zentrierter
   Container (max-width) den Inhalt wieder begrenzen. */
.mm_fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Der Contao-Clearfix „.block { overflow: hidden }" auf .mod_article würde den
   Full-Width-Ausbruch abschneiden – für Artikel mit Full-Width-Inhalt aufheben. */
.mod_article:has(.mm_fullbleed),
.mod_article:has(.mm_how) { overflow: visible; }
#main .inside { padding: 0 0 60px; }
@media (min-width: 768px) {
  #container:has(#left) { padding-left: 300px; }
  #container:has(#left) #left { position: absolute; top: 0; left: 0; width: 300px; float: none; margin: 0; right: auto; }
  #left .inside { padding-right: 30px; }
}

/* Maschinenkarten: oben wie unten abrunden + Inhalt (Bild) sauber beschneiden,
   damit das Bild die runden Ecken bzw. den orangen Hover-Rahmen nicht überdeckt.
   Theme-neutral (gilt in Hell und Dunkel). */
.maschinen_markt_liste_element { border-radius: var(--radius-lg); overflow: hidden; }
.mm_ta_track .maschinen_markt_liste_element { border-radius: 6px; }

/* ============================================================================
   Header im machinet-v4-Stil (theme-aware): HELL = Standard (v4 hell),
   DUNKEL = html.mm-dark (v4 dunkel). Zwei Zeilen:
     .mm_topbar   = Utility-Leiste: Hauptnavigation (Menue mit Icons) + Sprache + Theme
     .mm_hdr_main = Logo · Kategorien-Menue · KI-Suche (Pill) · Merken · Verkaufen
   Full-Bleed ueber die ganze Seitenbreite; Inhalt je Band auf 1400px zentriert.
   ============================================================================ */
#header {
  --hb-bg: 244,246,248;
  --hb-topbar-bg: #eaeff3;
  --hb-surface: #ffffff;
  --hb-surface2: #eef2f6;
  --hb-text: #0d151d;
  --hb-muted: #566573;
  --hb-icon: #0f1923;
  --hb-border: rgba(13,21,29,0.10);
  --hb-border-strong: rgba(13,21,29,0.18);
  --hb-accent: #e85d26;
  --hb-accent-hover: #cf4d1c;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 0;
  position: sticky; top: 0; z-index: 100;
  font-family: var(--font-sans);
}
html.mm-dark #header {
  --hb-bg: 13,21,29;
  --hb-topbar-bg: #08111a;
  --hb-surface: #131f2a;
  --hb-surface2: #1b2a37;
  --hb-text: #f2f6fa;
  --hb-muted: #90a2b2;
  --hb-icon: #f2f6fa;
  --hb-border: rgba(255,255,255,0.08);
  --hb-border-strong: rgba(255,255,255,0.16);
}
#header .inside { display: block; position: relative; max-width: none; width: 100%; margin: 0; padding: 0; }

/* ---- Zeile 1: Topbar (Utility-Leiste, rechtsbuendig) ---------------------- */
#header .mm_topbar { width: 100%; background: var(--hb-topbar-bg); border-bottom: 1px solid var(--hb-border); }
#header .mm_topbar_inner { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 14px; max-width: 1400px; margin: 0 auto; padding: 6px 20px; }
#header .mm_topbar_nav .mod_navigation { display: block; }
#header .mm_topbar_nav ul.level_1 { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
#header .mm_topbar_nav li { display: flex; align-items: center; }
#header .mm_topbar_nav li + li::before { content: ''; flex: 0 0 auto; width: 1px; height: 13px; background: var(--hb-border-strong); margin: 0 12px; }
#header .mm_topbar_nav li a,
#header .mm_topbar_nav li strong {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--hb-muted); font-size: 13px; font-weight: 500; line-height: 1;
  padding: 5px 0; white-space: nowrap; transition: color .15s;
}
#header .mm_topbar_nav li a:hover { color: var(--hb-accent); text-decoration: none; }
#header .mm_topbar_nav li strong { color: var(--hb-accent); }
#header .mm_topbar_nav li a::before,
#header .mm_topbar_nav li strong::before {
  content: ''; flex: 0 0 auto; width: 14px; height: 14px;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
#header .ico-home a::before, #header .ico-home strong::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E"); }
#header .ico-filter a::before, #header .ico-filter strong::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='17' x2='20' y2='17'/%3E%3Ccircle cx='9' cy='7' r='2'/%3E%3Ccircle cx='15' cy='12' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='17' x2='20' y2='17'/%3E%3Ccircle cx='9' cy='7' r='2'/%3E%3Ccircle cx='15' cy='12' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E"); }
#header .ico-ki a::before, #header .ico-ki strong::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l1.6 5.6L19 9l-5.4 1.4L12 16l-1.6-5.6L5 9l5.4-1.4z'/%3E%3Cpath d='M19 14l.6 2.1 2.1.6-2.1.6-.6 2.1-.6-2.1L16 17.3l2.1-.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l1.6 5.6L19 9l-5.4 1.4L12 16l-1.6-5.6L5 9l5.4-1.4z'/%3E%3Cpath d='M19 14l.6 2.1 2.1.6-2.1.6-.6 2.1-.6-2.1L16 17.3l2.1-.6z'/%3E%3C/svg%3E"); }
#header .ico-bell a::before, #header .ico-bell strong::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); }
#header .ico-heart a::before, #header .ico-heart strong::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-.9-1a5.5 5.5 0 1 0-7.8 7.8l.9 1L12 21.2l7.8-7.8.9-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-.9-1a5.5 5.5 0 1 0-7.8 7.8l.9 1L12 21.2l7.8-7.8.9-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); }
#header .ico-history a::before, #header .ico-history strong::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v6h6'/%3E%3Cpath d='M3.5 13a9 9 0 1 0 2-7L3 9'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v6h6'/%3E%3Cpath d='M3.5 13a9 9 0 1 0 2-7L3 9'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); }
#header .ico-dealer a::before, #header .ico-dealer strong::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E"); }
#header .ico-map a::before, #header .ico-map strong::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }

/* Topbar-Utils: Login (Icon+Text) · Sprache · Theme-Umschalter */
#header .mm_topbar_utils { display: flex; align-items: center; gap: 8px; }
#header .mm_topbar_login { display: inline-flex; align-items: center; gap: 6px; color: var(--hb-muted); font-size: 13px; font-weight: 500; }
#header .mm_topbar_login:hover { color: var(--hb-accent); text-decoration: none; }
#header .mm_topbar_login svg { width: 14px; height: 14px; display: block; }

/* Theme-Umschalter (per JS in die Topbar-Utils injiziert). Icon = mask, folgt
   der Textfarbe -> im Hell-Topbar dunkel, im Dunkel-Topbar hell. */
#header .mm-theme-toggle {
  flex: 0 0 auto; margin: 0; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--hb-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
#header .mm-theme-toggle:hover { background: var(--hb-surface2); color: var(--hb-text); }
#header .mm-theme-toggle .mm-theme-ico {
  width: 16px; height: 16px; display: block; background-color: currentColor;
  -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat;
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIxIDEyLjc5QTkgOSAwIDEgMSAxMS4yMSAzIDcgNyAwIDAgMCAyMSAxMi43OXoiLz48L3N2Zz4=');
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIxIDEyLjc5QTkgOSAwIDEgMSAxMS4yMSAzIDcgNyAwIDAgMCAyMSAxMi43OXoiLz48L3N2Zz4=');
}
html.mm-dark #header .mm-theme-toggle .mm-theme-ico {
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNCIvPjxsaW5lIHgxPSIxMiIgeTE9IjIiIHgyPSIxMiIgeTI9IjQiLz48bGluZSB4MT0iMTIiIHkxPSIyMCIgeDI9IjEyIiB5Mj0iMjIiLz48bGluZSB4MT0iNC45MyIgeTE9IjQuOTMiIHgyPSI2LjM0IiB5Mj0iNi4zNCIvPjxsaW5lIHgxPSIxNy42NiIgeTE9IjE3LjY2IiB4Mj0iMTkuMDciIHkyPSIxOS4wNyIvPjxsaW5lIHgxPSIyIiB5MT0iMTIiIHgyPSI0IiB5Mj0iMTIiLz48bGluZSB4MT0iMjAiIHkxPSIxMiIgeDI9IjIyIiB5Mj0iMTIiLz48bGluZSB4MT0iNC45MyIgeTE9IjE5LjA3IiB4Mj0iNi4zNCIgeTI9IjE3LjY2Ii8+PGxpbmUgeDE9IjE3LjY2IiB5MT0iNi4zNCIgeDI9IjE5LjA3IiB5Mj0iNC45MyIvPjwvc3ZnPg==');
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNCIvPjxsaW5lIHgxPSIxMiIgeTE9IjIiIHgyPSIxMiIgeTI9IjQiLz48bGluZSB4MT0iMTIiIHkxPSIyMCIgeDI9IjEyIiB5Mj0iMjIiLz48bGluZSB4MT0iNC45MyIgeTE9IjQuOTMiIHgyPSI2LjM0IiB5Mj0iNi4zNCIvPjxsaW5lIHgxPSIxNy42NiIgeTE9IjE3LjY2IiB4Mj0iMTkuMDciIHkyPSIxOS4wNyIvPjxsaW5lIHgxPSIyIiB5MT0iMTIiIHgyPSI0IiB5Mj0iMTIiLz48bGluZSB4MT0iMjAiIHkxPSIxMiIgeDI9IjIyIiB5Mj0iMTIiLz48bGluZSB4MT0iNC45MyIgeTE9IjE5LjA3IiB4Mj0iNi4zNCIgeTI9IjE3LjY2Ii8+PGxpbmUgeDE9IjE3LjY2IiB5MT0iNi4zNCIgeDI9IjE5LjA3IiB5Mj0iNC45MyIvPjwvc3ZnPg==');
}

/* ---- Zeile 2: Hauptzeile (Logo · Kategorien · Suche · Aktionen) ----------- */
#header .mm_hdr_main { width: 100%; background: rgba(var(--hb-bg), 0.92); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--hb-border); }
#header .mm_hdr_main_inner { display: flex; align-items: center; gap: 20px; max-width: 1400px; margin: 0 auto; padding: 12px 20px; }

/* Logo als Inline-SVG mit SVGArtista-Einblend-Animation (laeuft bei jedem
   Seitenaufruf). MACHI (svg-elem-1..5) = Textfarbe (theme-aware), NET + Windrad
   (svg-elem-6..15) = Orange. Basis-fill bleibt gesetzt -> auch bei reduzierter
   Bewegung korrekt sichtbar. */
#header .mm_hdr_brand { flex: 0 0 auto; display: inline-flex; align-items: center; }
#header .mm_hdr_logo { height: 34px; width: auto; display: block; }
#header .mm_hdr_logo .svg-elem-1, #header .mm_hdr_logo .svg-elem-2, #header .mm_hdr_logo .svg-elem-3,
#header .mm_hdr_logo .svg-elem-4, #header .mm_hdr_logo .svg-elem-5 { fill: #0d151d; }
html.mm-dark #header .mm_hdr_logo .svg-elem-1, html.mm-dark #header .mm_hdr_logo .svg-elem-2,
html.mm-dark #header .mm_hdr_logo .svg-elem-3, html.mm-dark #header .mm_hdr_logo .svg-elem-4,
html.mm-dark #header .mm_hdr_logo .svg-elem-5 { fill: #eef2f6; }
#header .mm_hdr_logo .svg-elem-6,  #header .mm_hdr_logo .svg-elem-7,  #header .mm_hdr_logo .svg-elem-8,
#header .mm_hdr_logo .svg-elem-9,  #header .mm_hdr_logo .svg-elem-10, #header .mm_hdr_logo .svg-elem-11,
#header .mm_hdr_logo .svg-elem-12, #header .mm_hdr_logo .svg-elem-13, #header .mm_hdr_logo .svg-elem-14,
#header .mm_hdr_logo .svg-elem-15 { fill: #e94e1b; }

@keyframes mm-logo-text-light { from { fill: transparent; } to { fill: #0d151d; } }
@keyframes mm-logo-text-dark  { from { fill: transparent; } to { fill: #eef2f6; } }
@keyframes mm-logo-accent     { from { fill: transparent; } to { fill: #e94e1b; } }

#header .mm_hdr_logo path, #header .mm_hdr_logo rect {
  animation-duration: .7s; animation-timing-function: cubic-bezier(.47,0,.745,.715);
  animation-iteration-count: 1; animation-fill-mode: both;
}
#header .mm_hdr_logo .svg-elem-1 { animation-name: mm-logo-text-light; animation-delay: .8s; }
#header .mm_hdr_logo .svg-elem-2 { animation-name: mm-logo-text-light; animation-delay: .9s; }
#header .mm_hdr_logo .svg-elem-3 { animation-name: mm-logo-text-light; animation-delay: 1s; }
#header .mm_hdr_logo .svg-elem-4 { animation-name: mm-logo-text-light; animation-delay: 1.1s; }
#header .mm_hdr_logo .svg-elem-5 { animation-name: mm-logo-text-light; animation-delay: 1.2s; }
html.mm-dark #header .mm_hdr_logo .svg-elem-1,
html.mm-dark #header .mm_hdr_logo .svg-elem-2,
html.mm-dark #header .mm_hdr_logo .svg-elem-3,
html.mm-dark #header .mm_hdr_logo .svg-elem-4,
html.mm-dark #header .mm_hdr_logo .svg-elem-5 { animation-name: mm-logo-text-dark; }
#header .mm_hdr_logo .svg-elem-6  { animation-name: mm-logo-accent; animation-delay: 1.3s; }
#header .mm_hdr_logo .svg-elem-7  { animation-name: mm-logo-accent; animation-delay: 1.4s; }
#header .mm_hdr_logo .svg-elem-8  { animation-name: mm-logo-accent; animation-delay: 1.5s; }
#header .mm_hdr_logo .svg-elem-9  { animation-name: mm-logo-accent; animation-delay: 1.6s; }
#header .mm_hdr_logo .svg-elem-10 { animation-name: mm-logo-accent; animation-delay: 1.7s; }
#header .mm_hdr_logo .svg-elem-11 { animation-name: mm-logo-accent; animation-delay: 1.8s; }
#header .mm_hdr_logo .svg-elem-12 { animation-name: mm-logo-accent; animation-delay: 1.9s; }
#header .mm_hdr_logo .svg-elem-13 { animation-name: mm-logo-accent; animation-delay: 2s; }
#header .mm_hdr_logo .svg-elem-14 { animation-name: mm-logo-accent; animation-delay: 2.1s; }
#header .mm_hdr_logo .svg-elem-15 { animation-name: mm-logo-accent; animation-delay: 2.2s; }
@media (prefers-reduced-motion: reduce) {
  #header .mm_hdr_logo path, #header .mm_hdr_logo rect { animation: none; }
}

#header .mm_hdr_kat { flex: 0 0 auto; }
#header .mm_hdr_search { flex: 1 1 auto; min-width: 0; }
#header .mm_hdr_actions { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* KI-Suche als v4-Pill (Lupe + Feld + oranger Button in einer Kapsel) */
#header .mm_hdr_search .mm_startsuche { margin: 0; max-width: none; }
#header .mm_hdr_search .mm_startsuche_form {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 42px;
  padding: 0 6px 0 14px; border: 1px solid var(--hb-border); border-radius: 10px;
  background: var(--hb-surface2); transition: border-color .15s;
}
#header .mm_hdr_search .mm_startsuche_form:focus-within { border-color: var(--hb-accent); }
#header .mm_hdr_search .mm_startsuche_form::before {
  content: ''; flex: 0 0 auto; width: 18px; height: 18px; background-color: var(--hb-icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
}
#header .mm_hdr_search:focus-within .mm_startsuche_form::before { background-color: var(--hb-accent); }
#header .mm_hdr_search .mm_startsuche_input {
  flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0;
  background: transparent; color: var(--hb-text); font-size: 15px; font-family: var(--font-sans);
  outline: none; box-shadow: none;
}
#header .mm_hdr_search .mm_startsuche_input::placeholder { color: var(--hb-muted); }
#header .mm_hdr_search .mm_startsuche_btn {
  flex: 0 0 auto; height: 32px; padding: 0 16px; border: 0; cursor: pointer; border-radius: 8px;
  background: var(--hb-accent); color: #fff; font-size: 14px; font-weight: 500; font-family: var(--font-sans);
}
#header .mm_hdr_search .mm_startsuche_btn:hover { background: var(--hb-accent-hover); }
#header .mm_hdr_search .mm_startsuche_recent { display: none !important; }

/* Aktionen rechts: Merken (Icon-Button) + Verkaufen (oranger Button) */
#header .mm_hdr_fav {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--hb-border-strong); border-radius: 10px; background: var(--hb-surface);
  color: var(--hb-icon); transition: color .15s, border-color .15s;
}
#header .mm_hdr_fav:hover { border-color: var(--hb-accent); color: var(--hb-accent); }
#header .mm_hdr_fav svg { width: 20px; height: 20px; display: block; }
#header .mm_hdr_sell {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 10px;
  background: var(--hb-accent); color: #fff; font-weight: 500; font-size: 15px; white-space: nowrap; transition: background .15s;
}
#header .mm_hdr_sell:hover { background: var(--hb-accent-hover); color: #fff; text-decoration: none; }

/* ============================================================================
   Sprachwechsler als Flaggen-Dropdown (eigenstaendige Komponente .mm_langsw).
   Toggle rein per <details>/<summary> – kein externes JS noetig; ein kleines
   Inline-Skript im Header-Modul schliesst bei Aussenklick + setzt die aktive
   Fahne. Fahnen sind Emoji (wie auf den Karten). Noch OHNE echte Umschaltung.
   ============================================================================ */
/* Flaggen-Emoji rendern unter Windows in Chrome/Edge nicht (das System hat
   keinen Flaggen-Font) – sie fallen auf die Laendercode-Buchstaben zurueck.
   Dieser Webfont liefert die Flaggen-Glyphen fuer genau diesen Unicode-Bereich
   (Regional Indicator Symbols U+1F1E6–U+1F1FF); alle anderen Zeichen fallen
   durch die font-family-Kette weiter. Firefox bringt eigene Emoji-Flaggen mit. */
@font-face {
  font-family: 'Twemoji Country Flags';
  src: url('../../files/fonts/TwemojiCountryFlags.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF;
}
.mm_langsw { position: relative; }
.mm_langsw > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 6px;
  border-radius: 6px; color: inherit; font-size: 14px; font-weight: 600;
  transition: background .15s, color .15s;
}
.mm_langsw > summary::-webkit-details-marker { display: none; }
#header .mm_langsw > summary { color: var(--hb-muted); }
#header .mm_langsw > summary:hover,
#header .mm_langsw[open] > summary { background: var(--hb-surface2); color: var(--hb-text); }
.mm_langsw_flag { font-family: 'Twemoji Country Flags', 'Inter', system-ui, sans-serif; font-size: 18px; line-height: 1; }
.mm_langsw_caret {
  width: 7px; height: 7px; margin-left: 1px; opacity: .65;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.mm_langsw[open] .mm_langsw_caret { transform: rotate(-135deg); }

.mm_langsw_menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 300;
  width: min(520px, 92vw); padding: 12px;
  background: #fff; border: 1px solid #e6eaf1; border-radius: 12px;
  box-shadow: 0 20px 44px rgba(15,25,35,.30);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 4px;
}
.mm_langsw_menu::before {                      /* Pfeilspitze nach oben */
  content: ''; position: absolute; top: -7px; right: 22px; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid #e6eaf1; border-top: 1px solid #e6eaf1; transform: rotate(45deg);
}
.mm_langsw_item {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 0; border: 1px solid transparent; border-radius: 7px;
  background: transparent; cursor: pointer; font-size: 22px; line-height: 1;
  font-family: 'Twemoji Country Flags', 'Inter', system-ui, sans-serif;
  color: #0f1923;   /* Fallback-Buchstaben (Browser ohne Flaggen-Font) lesbar auf hellem Panel */
}
.mm_langsw_item:hover { background: #f2f4f7; border-color: #e6eaf1; }
.mm_langsw_item.is-active { background: rgba(232,93,38,.12); border-color: var(--color-accent); }

/* Dark-Mode: dunkles Panel */
html.mm-dark .mm_langsw_menu { background: #1a2535; border-color: rgba(255,255,255,.10); }
html.mm-dark .mm_langsw_menu::before { background: #1a2535; border-color: rgba(255,255,255,.10); }
html.mm-dark .mm_langsw_item { color: #f2f6fa; }   /* Fallback-Buchstaben lesbar auf dunklem Panel */
html.mm-dark .mm_langsw_item:hover { background: #243044; border-color: rgba(255,255,255,.14); }

/* Schmale Screens: Suchfeld in eigene Zeile, Topbar/Aktionen kompakter */
@media (max-width: 900px) {
  #header .mm_hdr_main_inner { flex-wrap: wrap; }
  #header .mm_hdr_search { order: 5; flex: 1 1 100%; }
}
@media (max-width: 560px) {
  #header .mm_hdr_search .mm_startsuche_form { height: 40px; }
  #header .mm_hdr_search .mm_startsuche_btn { height: 30px; padding: 0 12px; }
  #header .mm_hdr_sell { padding: 0 12px; }
}

/* Alte, lokale Filter-/Merklisten-Umschalter entfallen (global ersetzt) */
.mm_dark_toggle { display: none !important; }

/* ======================================================= DUNKEL-THEME === */
/* Aktiv nur mit  html.mm-dark . Ohne die Klasse gilt das helle Standard-Theme
   (native Komponenten-CSS). */

html.mm-dark body { background: var(--color-dark); color: var(--color-text); }
html.mm-dark a { color: inherit; }
html.mm-dark a:hover { color: var(--color-accent); }
html.mm-dark h1, html.mm-dark h2, html.mm-dark h3, html.mm-dark h4 { color: var(--color-text); }

html.mm-dark ::-webkit-scrollbar { width: 8px; height: 8px; }
html.mm-dark ::-webkit-scrollbar-track { background: var(--color-dark); }
html.mm-dark ::-webkit-scrollbar-thumb { background: var(--color-dark-light); border-radius: 4px; }

/* Modul-Titel */
html.mm-dark .mm_top_angebote_title,
html.mm-dark .mm_top_maschinen_title,
html.mm-dark .mm_zuletzt_title,
html.mm-dark .mm_haendler_profil_name,
html.mm-dark .mm_haendler_h2,
html.mm-dark .reader_marke { color: var(--color-text) !important; }

/* Maschinenkarten */
html.mm-dark .maschinen_markt_liste_element {
  background: var(--color-surface) !important;
  /* Voller 1px-Rahmen (0.5px verschwand je nach Zoom/DPI durch Subpixel-Rundung),
     etwas kräftigeres Weiß → bei allen Maschinenkarten zuverlässig sichtbar. */
  border: 1px solid var(--color-border-mid) !important;
  border-radius: var(--radius-lg);
}
html.mm-dark .maschinen_markt_liste_element:hover { border-color: var(--color-accent) !important; box-shadow: var(--shadow-hover); }
html.mm-dark .maschinen_markt_liste_element .title_1,
html.mm-dark .maschinen_markt_liste_element .title_2 { color: var(--color-text) !important; }
html.mm-dark .maschinen_markt_liste_element .title_3,
html.mm-dark .maschinen_markt_liste_element .list_deteils,
html.mm-dark .maschinen_markt_liste_element .list_deteils_title,
html.mm-dark .maschinen_markt_liste_element .list_deteils_wert { color: var(--color-text-mid) !important; }
html.mm-dark .maschinen_markt_liste_element ul.list_deteils li.odd  { background: rgba(255,255,255,0.06) !important; }
html.mm-dark .maschinen_markt_liste_element ul.list_deteils li.even { background: transparent !important; }
html.mm-dark .maschinen_markt_liste_element ul.list_deteils li { border-color: var(--color-border) !important; }
html.mm-dark .maschinen_markt_liste_element .preis_title { color: var(--color-text) !important; }
html.mm-dark .maschinen_markt_liste_img img,
html.mm-dark .mm_ta_track .maschinen_markt_liste_img img { background: var(--color-bg) !important; }
html.mm-dark .maschinen_markt_trennlinie { border-color: var(--color-border) !important; }

/* Kategorie-Grid-Kacheln */
html.mm-dark .mm_kat_tile { background: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; }
html.mm-dark .mm_kat_sortbtn { background: var(--color-surface) !important; color: var(--color-text-mid) !important; border-color: var(--color-border-mid) !important; }
html.mm-dark .mm_kat_sortbtn.is-active { background: var(--color-accent) !important; color: #fff !important; border-color: var(--color-accent) !important; }

/* Händler-Karten + Liste-Toolbar */
html.mm-dark .mm_haendler_card { background: var(--color-surface) !important; border-color: var(--color-border) !important; }
html.mm-dark .mm_haendler_card_name { color: var(--color-text) !important; }
html.mm-dark .mm_haendler_card_ort { color: var(--color-text-mid) !important; }
html.mm-dark .mm_haendler_count, html.mm-dark .mm_haendler_sortlbl { color: var(--color-text-mid) !important; }
html.mm-dark .mm_haendler_profil_adresse, html.mm-dark .mm_haendler_profil_text { color: var(--color-text-mid) !important; }

/* Regler-/Karussell-Leisten */
html.mm-dark .mm_ta_control { background: var(--color-surface) !important; border-color: var(--color-border) !important; }
html.mm-dark .mm_ta_ctl_label, html.mm-dark .mm_ta_ctl_val { color: var(--color-text) !important; }
html.mm-dark .mm_ta_hint { color: var(--color-text-muted) !important; }
html.mm-dark .mm_ta_arrow { background: var(--color-surface) !important; color: var(--color-text) !important; }
html.mm-dark .mm_ta_arrow:hover { background: var(--color-accent) !important; color: #fff !important; }

/* Reader-Detailseite */
html.mm-dark .reader_marke, html.mm-dark .reader_unterschrift { color: var(--color-text) !important; }
html.mm-dark .reader_Details_Liste li, html.mm-dark .list_title { color: var(--color-text-mid) !important; }
html.mm-dark .AngebotsDetails { color: var(--color-text) !important; }

/* Button-Links (farbiger Hintergrund) behalten im Dunkelmodus weiße Schrift –
   der generische Link-Hover (html.mm-dark a:hover -> orange) darf sie nicht kapern. */
html.mm-dark .mm_letzte_suche_btn, html.mm-dark .mm_letzte_suche_btn:hover,
html.mm-dark .mm_ta_more, html.mm-dark .mm_ta_more:hover,
html.mm-dark .mm_haendler_more, html.mm-dark .mm_haendler_more:hover { color: #fff; }

/* Eingaben bleiben in BEIDEN Themes hell (gute Lesbarkeit) */
input[type="text"], input[type="email"], input[type="search"], input[type="number"],
select, textarea { background: #fff; color: #1a2535; }

/* -------------------------------------------------------------- Responsive */
@media (max-width: 700px) {
  #header .mm_hdr_logo { height: 30px; }
  #header .mm_topbar_nav li a, #header .mm_topbar_nav li strong { font-size: 12px; }
  #header .mm_topbar_nav li + li::before { margin: 0 8px; }
  #wrapper { padding: 0 12px; }
}

/* Topbar-Navigation bei schmaler Breite: nur Icons, Text ausgeblendet.
   font-size:0 kollabiert den Text-Knoten (bleibt fuer Screenreader lesbar),
   das ::before-Icon behaelt seine feste Groesse. Greift zwischen 861px und
   900px – darunter uebernimmt der mobile Header (siehe unten). */
@media (max-width: 860px) {
  #header .mm_topbar_nav ul.level_1 { gap: 2px; }
  #header .mm_topbar_nav li + li::before { display: none; }
  #header .mm_topbar_nav li a,
  #header .mm_topbar_nav li strong {
    gap: 0; font-size: 0; padding: 8px; border-radius: 8px;
  }
  #header .mm_topbar_nav li a:hover,
  #header .mm_topbar_nav li strong { background: var(--hb-surface2); }
  #header .mm_topbar_nav li a::before,
  #header .mm_topbar_nav li strong::before { width: 18px; height: 18px; }
}

/* ==========================================================================
   MOBILER HEADER (<= 900px)

   Logo · Kategorien · Such-Icon · Burger. Die obere Leiste entfaellt; ihre
   Punkte (Navigation, Login, Sprache, Theme) wandern in das Burger-Panel,
   das maschinen_markt_header_mobil.js aus den vorhandenen Knoten aufbaut.

   Alles haengt an html.mm-mobilnav: die Klasse setzt das Skript erst NACH
   erfolgreichem Aufbau. Ohne JS bleibt der Desktop-Header sichtbar und
   vollstaendig bedienbar (kein Menue waere sonst erreichbar).
   ========================================================================== */
.mm_hdr_mobil_bar { display: none; }

@media (max-width: 900px) {
  /* Obere Leiste raus – Inhalte stecken im Panel. */
  html.mm-mobilnav #header .mm_topbar { display: none; }

  /* Seitenabstand: #header .inside hat mobil kein Padding, das Logo stiess
     sonst am Rand an (gemessen: -4px links, Burger 4px rechts). */
  html.mm-mobilnav #header .mm_hdr_main_inner {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 16px;
  }

  /* Logo links, Kategorien direkt daneben, Bedienleiste rechts. */
  html.mm-mobilnav #header .mm_hdr_brand { flex: 0 0 auto; margin-right: 2px; }
  html.mm-mobilnav #header .mm_hdr_logo { height: 30px; }
  html.mm-mobilnav #header .mm_hdr_kat { flex: 0 1 auto; min-width: 0; }
  html.mm-mobilnav #header .mm_hdr_actions { display: none; }

  html.mm-mobilnav .mm_hdr_mobil_bar {
    display: flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto;
  }
  html.mm-mobilnav .mm_hdr_suchbtn,
  html.mm-mobilnav .mm_hdr_burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 0; cursor: pointer;
    border: 1px solid var(--hb-border); border-radius: 10px;
    background: var(--hb-surface); color: var(--hb-text);
  }
  html.mm-mobilnav .mm_hdr_suchbtn[aria-expanded="true"],
  html.mm-mobilnav .mm_hdr_burger[aria-expanded="true"] {
    background: var(--color-accent); border-color: var(--color-accent); color: #fff;
  }

  /* Burger/Schliessen-Icon per CSS umschalten. Beide Icons liegen im Button –
     ein Austausch per innerHTML wuerde den geklickten Knoten aus dem DOM
     entfernen und den „Klick ausserhalb"-Handler fehlleiten. */
  html.mm-mobilnav .mm_hdr_burger .mm_ico_auf,
  html.mm-mobilnav .mm_hdr_burger .mm_ico_zu { display: none; line-height: 0; }
  html.mm-mobilnav .mm_hdr_burger[aria-expanded="false"] .mm_ico_auf,
  html.mm-mobilnav .mm_hdr_burger[aria-expanded="true"] .mm_ico_zu { display: inline-flex; }

  /* Suchzeile: standardmaessig aus, per Icon als eigene Zeile eingeblendet. */
  html.mm-mobilnav #header .mm_hdr_search { display: none; }
  html.mm-mobilnav #header .mm_hdr_search.is-offen {
    display: block; flex: 1 0 100%; order: 9; margin: 0 0 10px;
  }

  /* ---------------------------------------------------------------- Panel */
  html.mm-mobilnav .mm_hdr_mobil_panel {
    border-top: 1px solid var(--hb-border);
    background: var(--hb-surface);
    max-height: calc(100dvh - 70px); overflow-y: auto;
    padding: 6px 20px 18px;
  }
  html.mm-mobilnav .mm_hdr_mobil_panel[hidden] { display: none; }

  .mm_hdr_mobil_kopf {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0 6px; font-size: 12px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase; color: var(--hb-muted);
  }
  .mm_hdr_mobil_zu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; cursor: pointer;
    border: 0; border-radius: 8px; background: transparent; color: var(--hb-text);
  }
  .mm_hdr_mobil_zu:hover { background: var(--hb-surface2); }

  .mm_hdr_mobil_sek + .mm_hdr_mobil_sek {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hb-border);
  }
  .mm_hdr_mobil_sek_titel {
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--hb-muted); margin-bottom: 8px;
  }

  /* Navigationspunkte: volle Breite, Icon + Text.
     ⚠️ Die Selektoren brauchen das `#header`-Praefix: der Klon behaelt die
     Klasse .mm_topbar_nav (fuer die ico-*-Maskenregeln), und die Icon-Only-
     Regel `#header .mm_topbar_nav li a { font-size: 0 }` aus dem 860px-Block
     schlaegt per ID jede klassenbasierte Regel. Gleiche Spezifitaet + spaeter
     im Stylesheet = diese Regeln gewinnen. */
  #header .mm_hdr_mobil_nav,
  #header .mm_hdr_mobil_nav ul.level_1 { width: 100%; }
  #header .mm_hdr_mobil_nav ul.level_1 {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  }
  #header .mm_hdr_mobil_nav li { width: 100%; }
  #header .mm_hdr_mobil_nav li + li::before { display: none; }
  #header .mm_hdr_mobil_nav li a,
  #header .mm_hdr_mobil_nav li strong {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    font-size: 16px; font-weight: 500; padding: 11px 10px; border-radius: 8px;
    color: var(--hb-text); width: 100%;
  }
  #header .mm_hdr_mobil_nav li strong,
  #header .mm_hdr_mobil_nav li a:hover { background: var(--hb-surface2); }
  #header .mm_hdr_mobil_nav li strong { color: var(--color-accent); }
  #header .mm_hdr_mobil_nav li a::before,
  #header .mm_hdr_mobil_nav li strong::before { width: 20px; height: 20px; }

  /* Merken + Verkaufen als Buttonpaar */
  .mm_hdr_mobil_aktionen { display: flex; gap: 10px; }
  html.mm-mobilnav .mm_hdr_mobil_fav,
  html.mm-mobilnav .mm_hdr_mobil_sell {
    flex: 1 1 0; min-height: 46px; padding: 0 14px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 15px; font-weight: 500;
  }
  html.mm-mobilnav .mm_hdr_mobil_fav {
    border: 1px solid var(--hb-border); background: var(--hb-surface); color: var(--hb-text);
  }

  /* Login + Theme in einer Zeile */
  .mm_hdr_mobil_meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  html.mm-mobilnav .mm_hdr_mobil_login { font-size: 15px; }

  /* Sprachen: im Panel liegt das komplette <details class="mm_langsw">
     (noetig fuer den closest()-Handler im Header-Markup). Sein <summary>
     (Flagge + Chevron) waere hier doppelt – die Liste steht ja offen. */
  html.mm-mobilnav .mm_hdr_mobil_lang summary { display: none; }
  html.mm-mobilnav .mm_hdr_mobil_lang details.mm_langsw { position: static; }

  /* Das verschobene Menue ist im Panel dauerhaft offen und wird zur
     Kachelreihe – die Dropdown-Positionierung der Topbar entfaellt. */
  html.mm-mobilnav .mm_hdr_mobil_lang .mm_langsw_menu {
    position: static; display: flex; flex-wrap: wrap; gap: 6px;
    min-width: 0; width: auto; padding: 0;
    border: 0; box-shadow: none; background: transparent; opacity: 1;
    visibility: visible; transform: none;
    /* 43 Sprachen wuerden das Panel sonst extrem lang machen -> eigene Scrollbox. */
    max-height: 190px; overflow-y: auto;
  }
  html.mm-mobilnav .mm_hdr_mobil_lang .mm_langsw_item {
    flex: 0 0 auto; padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--hb-border); background: var(--hb-surface);
  }
  html.mm-mobilnav .mm_hdr_mobil_lang .mm_langsw_item.is-active {
    border-color: var(--color-accent); color: var(--color-accent);
  }

  /* Kategorie-Mega-Panel darf das offene Menue nicht ueberlagern. */
  html.mm-mobilnav.mm-mobilnav-offen #header .mm_katmenu_panel { display: none; }
}

/* Schmale Telefone: Logo 165px + „Kategorien" 135px + Bedienleiste 88px passen
   nicht in eine Zeile (bei 390px verfuegbar: ~350px) – der Header brach um.
   Logo kleiner, Kategorie-Beschriftung auf das Icon reduziert. */
@media (max-width: 560px) {
  /* wrap bleibt: die eingeblendete Suchzeile MUSS in eine eigene Zeile
     umbrechen koennen (flex-basis 100%). Nur die Elemente werden schmaler. */
  html.mm-mobilnav #header .mm_hdr_main_inner { gap: 8px; }
  html.mm-mobilnav #header .mm_hdr_logo { height: 26px; }
  html.mm-mobilnav #header .mm_katmenu_label { display: none; }
  html.mm-mobilnav #header .mm_katmenu_btn { padding: 9px 10px; }
  html.mm-mobilnav .mm_hdr_suchbtn,
  html.mm-mobilnav .mm_hdr_burger { width: 40px; height: 40px; }

  /* Die Suchzeile bleibt umbrechbar – sie ist als eigene Zeile gewollt. */
  html.mm-mobilnav #header .mm_hdr_search.is-offen { flex-basis: 100%; }
}