/*
		mobileLysel_swiss.css - Swiss-Plissees: Optik des mobilen Ablaufs wie im Shop (Dunkelblau, Rot, Inter, eckiger).
		Wird nach mobileLysel.css geladen (plissee-konfigurator.php). Aendert nur Farben/Formen, keine Abstaende/Logik.
		04.11.2026	Claude		Erste Version, inkl. Ruecksetzen allgemeiner Shop-Styles (button, input, label), die in #mobileLysel durchschlagen.
*/

/* ---------- Farben / Schrift ---------- */
body.mlActive #mobileLysel {
		--ml-blau: #00226A;
		--ml-ink: #00226A;
		--ml-grau: #5C6B8A;
		--ml-linie: #D4DAE8;
		--ml-flaeche: #EEF1F8;
		--ml-orange: #C70707;
		--sp-rot: #C70707;
		--sp-hell: #F6F8FC;
		color: var(--ml-ink);
		font-family: Inter, Arial, sans-serif;
}
#mobileLysel, #mobileLysel button, #mobileLysel input, #mobileLysel select, #mobileLysel textarea, #mobileLysel a { font-family: Inter, Arial, sans-serif; }

/* ---------- Formen: Shop ist eckig (2-4 px) ---------- */
#mobileLysel .ml-cta,
#mobileLysel .ml-btn-rand,
#mobileLysel .ml-mehr,
#mobileLysel .ml-chip,
#mobileLysel .ml-licht,
#mobileLysel .ml-mass,
#mobileLysel .ml-resize,
#mobileLysel .ml-optionen,
#mobileLysel .ml-zus,
#mobileLysel .ml-messen,
#mobileLysel .ml-hinweis,
#mobileLysel .ml-plus-hinweis,
#mobileLysel .ml-wk-naechstes,
#mobileLysel .ml-zus-3d,
#mobileLysel .ml-stepper,
#mobileLysel .ml-stepper button { border-radius: 4px; }
#mobileLysel .ml-sheet { border-radius: 8px 8px 0 0; }

/* ---------- Akzente ---------- */
#mobileLysel .ml-cta.inaktiv { background: #9AA8C7; }
#mobileLysel .ml-cta-hell, #mobileLysel .ml-zus-3d-icon { background: var(--ml-flaeche); color: var(--ml-blau) !important; }
#mobileLysel .ml-btn-blau { background: var(--ml-blau); }
#mobileLysel .ml-btn-blau-outline { border-color: var(--ml-blau); color: var(--ml-blau) !important; }
#mobileLysel .ml-resize.aktiv, #mobileLysel .ml-plus-box { background: var(--sp-hell); }
#mobileLysel .ml-plus-box, #mobileLysel .ml-wk-plus { border-color: #9AA8C7; }
#mobileLysel .ml-vollbild-kopf { background: var(--ml-blau); }
#mobileLysel .ml-vollbild-inhalt { color: var(--ml-ink); }
#mobileLysel .ml-offen, #mobileLysel .ml-wk-meldung { color: var(--sp-rot) !important; }
#mobileLysel .ml-badge-mini, #mobileLysel .ml-badge-stoff.top { background: var(--sp-rot); }
#mobileLysel .ml-plus-hinweis .ml-chip { background: var(--ml-blau); border-color: var(--ml-blau); }
#mobileLysel .ml-zus { background: var(--sp-hell); }

/* ---------- Allgemeine Shop-Regeln (layout.css) neutralisieren ---------- */
/* body hat line-height: 1.5em (= fest 24px, wird vererbt) */
body.mlActive #mobileLysel { line-height: normal; }
/* button / img aus layout.css: niedrige Spezifitaet, die Klassen aus mobileLysel.css gewinnen weiter */
button:where(#mobileLysel *) { margin: 0; padding: 0; font-weight: inherit; line-height: normal; text-decoration: none; }
img:where(#mobileLysel *) { margin: 0; }
/* input:not([type=checkbox]) aus layout.css (Rahmen, Hintergrund, padding 1em) */
#mobileLysel .ml-mass input { flex: 1; min-width: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; font-size: 20px; font-weight: 700; color: var(--ml-ink); -webkit-appearance: none; appearance: textfield; }
#mobileLysel .ml-mass input::placeholder { color: #9AA8C7; font-weight: 500; font-size: 17px; }
#mobileLysel .ml-mass span { color: var(--ml-grau); }
#mobileLysel .ml-resize b img { display: inline-block; }
#mobileLysel .ml-resize-text > span { color: var(--ml-grau); }
/* Shop-Knopf "Footer ausklappen" liegt unten links ueber der Preisleiste */
body.mlActive #layoutFooterAusklappButton { display: none !important; }

/* ---------- Preisleiste: Inter ist breiter als die Schrift auf plissee-held ---------- */
#mobileLysel .ml-leiste { gap: 10px; }
#mobileLysel .ml-leiste .ml-cta { padding: 0 14px; font-size: 15px; }
#mobileLysel .ml-leiste-preis small { white-space: nowrap; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
#mobileLysel .ml-leiste-preis .ml-offen { white-space: normal; overflow: visible; line-height: 1.25; }

/* layout.css: button:hover faerbt auch die Kontur (outline-color) */
#mobileLysel button:hover { outline-color: transparent; }

/* Anleitungs-Buttons im Befestigungs-Fenster (orange/blau wie im Desktop-Konfigurator) */
#mobileLysel .ml-anl { border-radius: 4px; }
#mobileLysel .ml-anl.blau { background: var(--ml-blau); }
#mobileLysel .ml-anl.orange { background: var(--sp-rot); }
#mobileLysel .ml-weitere-modelle { border-radius: 4px; }
#mobileLysel .ml-garantie { border-radius: 4px; }
#mobileLysel .ml-garantie.aktiv { background: var(--sp-hell); }
#mobileLysel .ml-garantie-text { color: var(--ml-grau); }

/* ---------- :hover-Kopien (erzeugt mit hover_fix.py aus mobileLysel.css + obigen Regeln) ----------
   layout.css faerbt jeden button:hover um (var(--btn1BgHover)); auf Handys bleibt :hover nach dem Tippen haengen.
   Bei Aenderungen an den Farben in mobileLysel.css neu erzeugen: python3 hover_fix.py mobileLysel.css <oberer Teil dieser Datei> */
#mobileLysel button:hover { color: inherit; }
#mobileLysel small:hover { color: var(--ml-grau); }
#mobileLysel .ml-icon-btn:hover { background: var(--ml-flaeche); }
#mobileLysel .ml-preview:hover { background: #EEECE7; }
#mobileLysel .ml-preview-label:hover { background: rgba(255,255,255,.92); }
#mobileLysel .ml-preview-btns button:hover { background: rgba(255,255,255,.95); }
#mobileLysel .ml-link:hover { background: none; color: var(--ml-blau) !important; }
#mobileLysel .ml-link.ml-dunkel:hover { color: var(--ml-ink) !important; }
#mobileLysel .ml-meta:hover { color: var(--ml-grau); }
#mobileLysel .ml-schnell-item:hover { background: none; }
#mobileLysel .ml-schnell-item img:hover, #mobileLysel .ml-plus-box:hover { background: #EEECE7; }
#mobileLysel .ml-plus-box:hover { border-color: #9DBFEA; background: #F2F7FE; color: var(--ml-blau); }
#mobileLysel .ml-plus span:last-child:hover { color: var(--ml-blau); }
#mobileLysel .ml-chip:hover { border-color: #D6D6D2; background: #fff; }
#mobileLysel .ml-chip.aktiv:hover { background: var(--ml-ink); border-color: var(--ml-ink); color: #fff !important; }
#mobileLysel .ml-chip.aktiv small:hover { color: #fff; }
#mobileLysel .ml-bef:hover { background: #fff; }
#mobileLysel .ml-bef > img:hover { background: #F4F3EF; }
#mobileLysel .ml-info-btn:hover { background: rgba(255,255,255,.95); }
#mobileLysel .ml-aufpreis:hover { color: #4a4a47; }
#mobileLysel .ml-aufpreis.ink:hover { color: #2E7D32; }
#mobileLysel .ml-messen:hover { background: #FFF4E2; border-color: #F2B45A; }
#mobileLysel .ml-messen-titel span:hover { background: var(--ml-orange); color: #fff; }
#mobileLysel .ml-messen ul:hover { color: #3a3a38; }
#mobileLysel .ml-btn-orange:hover { background: var(--ml-orange); color: #fff !important; }
#mobileLysel .ml-btn-orange-outline:hover { background: #fff; border-color: var(--ml-orange); color: #B35F00 !important; }
#mobileLysel .ml-mass:hover { border-color: #D6D6D2; }
#mobileLysel .ml-mass.fehler:hover { border-color: #b3261e; }
#mobileLysel .ml-mass span:hover { color: #4a4a47; }
#mobileLysel .ml-mass input:hover { background: transparent; }
#mobileLysel .ml-grenzen:hover { color: var(--ml-grau); }
#mobileLysel .ml-resize:hover { border-color: var(--ml-linie); }
#mobileLysel .ml-resize.aktiv:hover { border-color: var(--ml-blau); background: #F2F7FE; }
#mobileLysel .ml-resize-text > span:hover { color: #4a4a47; }
#mobileLysel .ml-optionen:hover { border-color: var(--ml-linie); }
#mobileLysel .ml-optionen-kopf:hover { background: none; }
#mobileLysel .ml-opt-unter:hover { color: var(--ml-grau); }
#mobileLysel .ml-modell-aktiv:hover { border-color: var(--ml-blau); }
#mobileLysel .ml-modell-aktiv i:hover { background: var(--ml-blau); color: #fff; }
#mobileLysel .ml-weitere-modelle:hover { border-color: var(--ml-linie); background: #fff; }
#mobileLysel .ml-farbe-kachel:hover { background: #fff; }
#mobileLysel .ml-profil:hover { background: #fff; }
#mobileLysel .ml-hinweis:hover { background: #FFF6DC; }
#mobileLysel .ml-stepper:hover { background: var(--ml-flaeche); }
#mobileLysel .ml-stepper button:hover { background: #fff; }
#mobileLysel .ml-leiste:hover { background: #fff; }
#mobileLysel .ml-cta:hover { background: var(--ml-blau); color: #fff !important; }
#mobileLysel .ml-cta.inaktiv:hover { background: #B7C9E2; }
#mobileLysel .ml-sheet-bg:hover { background: rgba(20,20,20,.4); }
#mobileLysel .ml-sheet:hover { background: #fff; }
#mobileLysel .ml-griff:hover { background: #D6D6D2; }
#mobileLysel .ml-farbgruppe:hover { background: none; }
#mobileLysel .ml-farbgruppe small:hover { color: var(--ml-ink); }
#mobileLysel .ml-farbpunkt:hover { border-color: #fff; background: #ccc; }
#mobileLysel .ml-farbpunkt.beige:hover { background: #d4be8d; }
#mobileLysel .ml-farbpunkt.blau:hover { background: #3485ff; }
#mobileLysel .ml-farbpunkt.braun:hover { background: #6f3e18; }
#mobileLysel .ml-farbpunkt.gelb:hover { background: #fffc00; }
#mobileLysel .ml-farbpunkt.gruen:hover { background: #73b525; }
#mobileLysel .ml-farbpunkt.orange:hover { background: #ff6501; }
#mobileLysel .ml-farbpunkt.rosa:hover { background: #ed008c; }
#mobileLysel .ml-farbpunkt.rot:hover { background: #ea0001; }
#mobileLysel .ml-farbpunkt.schwarz:hover { background: #000; }
#mobileLysel .ml-farbpunkt.violett:hover { background: #9349aa; }
#mobileLysel .ml-farbpunkt.weiss:hover { background: #fff; }
#mobileLysel .ml-farbpunkt.grau:hover { background: #838383; }
#mobileLysel .ml-stoff:hover { background: none; }
#mobileLysel .ml-vgl-btn:hover { background: rgba(255,255,255,.95); }
#mobileLysel .ml-vgl-btn.aktiv:hover { background: var(--ml-ink); color: #fff !important; }
#mobileLysel .ml-stoff img:hover { background: #EEECE7; }
#mobileLysel .ml-mehr:hover { border-color: var(--ml-ink); background: #fff; }
#mobileLysel .ml-leer:hover { color: #4a4a47; }
#mobileLysel .ml-anl:hover { color: #fff !important; }
#mobileLysel .ml-anl.orange:hover { background: #F28A1C; }
#mobileLysel .ml-anl.blau:hover { background: #3580C0; }
#mobileLysel .ml-info-preis:hover { color: #4a4a47; }
#mobileLysel .ml-vollbild:hover { background: #fff; }
#mobileLysel .ml-vollbild-kopf:hover { background: #1B3B5C; color: #fff; }
#mobileLysel .ml-vollbild-kopf h3:hover { color: #fff; }
#mobileLysel .ml-vollbild-kopf button:hover { background: rgba(255,255,255,.14); color: #fff !important; }
#mobileLysel .ml-vollbild-inhalt:hover { color: #1B3B5C; }
#mobileLysel .ml-vollbild-inhalt hr:hover { background: var(--ml-linie); }
#mobileLysel .ml-modell-foto:hover { border-color: var(--ml-linie); }
#mobileLysel .ml-btn-blau:hover { background: #3A8FD9; color: #fff !important; }
#mobileLysel .ml-btn-blau-outline:hover { border-color: #3A8FD9; background: #fff; color: #3A8FD9 !important; }
#mobileLysel .ml-licht:hover { border-color: #D6D6D2; background: #fff; }
#mobileLysel .ml-licht.aktiv:hover { border-color: var(--ml-ink); background: #F2F2F0; }
#mobileLysel .ml-filter-mehr:hover { border-color: var(--ml-linie); }
#mobileLysel .ml-filter-mehr-kopf:hover { background: none; }
#mobileLysel .ml-vgl-leiste:hover { background: #fff; }
#mobileLysel .ml-detail-bilder img:hover { background: #EEECE7; }
#mobileLysel .ml-detail-licht:hover { background: #F4F3EF; }
#mobileLysel .ml-detail-zeilen span:hover { color: var(--ml-grau); }
#mobileLysel .ml-laden:hover { color: var(--ml-grau); }
#mobileLysel .ml-btn-rand:hover { border-color: var(--ml-ink); background: #fff; }
#mobileLysel .ml-vollbild-kopf.ml-hell:hover { background: #fff; color: var(--ml-ink); }
#mobileLysel .ml-vollbild-kopf.ml-hell h3:hover { color: var(--ml-ink); }
#mobileLysel .ml-vollbild-kopf.ml-hell button:hover { background: var(--ml-flaeche); color: var(--ml-ink) !important; }
#mobileLysel .ml-vgl-spalte:hover { color: var(--ml-ink); }
#mobileLysel .ml-cta-hell:hover { background: #E8F1FD; color: var(--ml-blau) !important; }
#mobileLysel .ml-preview.ist3d:hover { background: #fff; }
#mobileLysel .ml-badge-mini:hover { background: #151515; color: #fff; }
#mobileLysel .ml-badge-stoff:hover { background: rgba(255,255,255,.95); color: #151515; }
#mobileLysel .ml-badge-stoff.top:hover { background: #151515; color: #fff; }
#mobileLysel .ml-badge-bef:hover { background: #FFF4E2; color: #8a4b00; }
#mobileLysel .ml-plus-hinweis:hover { background: #FFF6DC; }
#mobileLysel .ml-plus-hinweis .ml-chip:hover { background: #151515; border-color: #151515; color: #fff !important; }
#mobileLysel .ml-preview.ist3d .ml-3d-info:hover { background: #fff; }
#mobileLysel .ml-preview.ist3d .ml-3d-fuss:hover { background: #fff; }
#mobileLysel .ml-ebene3 .ml-vollbild-inhalt:hover { color: var(--ml-ink); }
#mobileLysel .ml-messen:hover { background: #EEF7EF; border-color: #9ED0A6; }
#mobileLysel .ml-messen-titel span:hover { background: #2E7D32; }
#mobileLysel .ml-btn-orange:hover { background: #2E7D32; }
#mobileLysel .ml-btn-orange-outline:hover { border-color: #2E7D32; color: #1F5E24 !important; }
#mobileLysel .ml-mass.ml-hervor:hover { border-color: var(--ml-blau); }
#mobileLysel .ml-offen:hover { color: #8a4b00 !important; }
#mobileLysel .ml-cta.inaktiv:hover { background: #8FB4E8; }
#mobileLysel .ml-zus:hover { background: #F4F3EF; }
#mobileLysel .ml-zus-kopf img:hover { background: #E4E2DC; }
#mobileLysel .ml-zus-zeilen span:hover { color: var(--ml-grau); }
#mobileLysel .ml-zus-zeilen b.offen:hover { color: var(--ml-grau); }
#mobileLysel .ml-zus-3d:hover { border-color: var(--ml-blau); background: #fff; }
#mobileLysel .ml-zus-3d b:hover { color: var(--ml-blau); }
#mobileLysel .ml-zus-3d > span:last-child:hover { color: var(--ml-blau); }
#mobileLysel .ml-zus-3d-icon:hover { background: #E8F1FD; color: var(--ml-blau); }
#mobileLysel .ml-mass.fehler:hover { background: #FDF3F2; }
#mobileLysel .ml-mass-fehler:hover { color: #b3261e; }
#mobileLysel .ml-mass-fehler button:hover { background: #FDE7E5; color: #8c1d18 !important; }
#mobileLysel .ml-mass-fehler button b:hover { color: var(--ml-blau); }
#mobileLysel .ml-seite-rahmen:hover { background: #fff; }
#mobileLysel .ml-seite-rahmen.ml-seite-video:hover { background: #000; }
#mobileLysel .ml-vertrauen:hover { color: #2E7D32; }
#mobileLysel .ml-vertrauen button:hover, #mobileLysel .ml-vertrauen span:hover { background: none; color: inherit !important; }
#mobileLysel .ml-stoff-sheet .ml-opt-titel:hover { color: var(--ml-grau); }
#mobileLysel .ml-chip-mehr.offen:hover { border-color: var(--ml-ink); }
#mobileLysel .ml-resize-frage p:hover { color: #3a3a38; }
#mobileLysel .ml-resize-karte:hover { border-color: #9ED0A6; background: #EEF7EF; }
#mobileLysel .ml-resize-karte > b i:hover { background: #2E7D32; color: #fff; }
#mobileLysel .ml-resize-nein:hover { background: none; color: var(--ml-grau) !important; }
#mobileLysel .ml-wk-haken:hover { background: #2E7D32; color: #fff; }
#mobileLysel .ml-wk-artikel img:hover { background: var(--ml-flaeche); }
#mobileLysel .ml-wk-artikel .ml-wk-preis:hover { color: var(--ml-ink) !important; }
#mobileLysel .ml-wk-meldung:hover { color: #8a4b00; }
#mobileLysel .ml-wk-versand:hover { color: #2E7D32; }
#mobileLysel .ml-wk-naechstes:hover { border-color: var(--ml-blau); background: #F2F7FE; }
#mobileLysel .ml-wk-naechstes b:hover { color: var(--ml-blau); }
#mobileLysel .ml-wk-naechstes > span:last-child:hover { color: var(--ml-blau); }
#mobileLysel .ml-wk-plus:hover { background: #fff; border-color: #9DBFEA; color: var(--ml-blau); }
#mobileLysel .ml-garantie:hover { border-color: var(--ml-linie); }
#mobileLysel .ml-garantie.aktiv:hover { border-color: var(--ml-blau); background: #F2F7FE; }
#mobileLysel .ml-garantie-text:hover { color: #4a4a47; }
#mobileLysel .ml-cta.inaktiv:hover { background: #9AA8C7; }
#mobileLysel .ml-cta-hell:hover, #mobileLysel .ml-zus-3d-icon:hover { background: var(--ml-flaeche); color: var(--ml-blau) !important; }
#mobileLysel .ml-btn-blau:hover { background: var(--ml-blau); }
#mobileLysel .ml-btn-blau-outline:hover { border-color: var(--ml-blau); color: var(--ml-blau) !important; }
#mobileLysel .ml-resize.aktiv:hover, #mobileLysel .ml-plus-box:hover { background: var(--sp-hell); }
#mobileLysel .ml-plus-box:hover, #mobileLysel .ml-wk-plus:hover { border-color: #9AA8C7; }
#mobileLysel .ml-vollbild-kopf:hover { background: var(--ml-blau); }
#mobileLysel .ml-vollbild-inhalt:hover { color: var(--ml-ink); }
#mobileLysel .ml-offen:hover, #mobileLysel .ml-wk-meldung:hover { color: var(--sp-rot) !important; }
#mobileLysel .ml-badge-mini:hover, #mobileLysel .ml-badge-stoff.top:hover { background: var(--sp-rot); }
#mobileLysel .ml-plus-hinweis .ml-chip:hover { background: var(--ml-blau); border-color: var(--ml-blau); }
#mobileLysel .ml-zus:hover { background: var(--sp-hell); }
#mobileLysel .ml-mass input:hover { background: transparent; color: var(--ml-ink); }
#mobileLysel .ml-mass span:hover { color: var(--ml-grau); }
#mobileLysel .ml-resize-text > span:hover { color: var(--ml-grau); }
#mobileLysel button:hover:hover { outline-color: transparent; }
#mobileLysel .ml-anl.blau:hover { background: var(--ml-blau); }
#mobileLysel .ml-anl.orange:hover { background: var(--sp-rot); }
#mobileLysel .ml-garantie.aktiv:hover { background: var(--sp-hell); }
#mobileLysel .ml-garantie-text:hover { color: var(--ml-grau); }