.mppl-color-page{--mppl-orange:#fd5b04;color:inherit}.mppl-color-hero,.mppl-color-section-title{max-width:980px;margin:0 auto 28px;text-align:center}.mppl-color-hero{padding:44px 18px 24px}.mppl-color-hero h1,.mppl-color-section-title h2{margin:0 0 12px;line-height:1.08}.mppl-color-hero p{max-width:780px;margin-left:auto;margin-right:auto}.mppl-eyebrow{margin:0 0 10px!important;color:var(--mppl-orange);font-weight:900;letter-spacing:.09em;text-transform:uppercase;font-size:12px}.mppl-color-note{margin-top:14px!important;padding:12px 14px;border-radius:16px;background:rgba(253,91,4,.09);border:1px solid rgba(253,91,4,.24);font-size:14px}.mppl-color-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 auto 34px}.mppl-color-tab{border:1px solid rgba(253,91,4,.28);background:rgba(253,91,4,.08);color:inherit;border-radius:999px;padding:10px 16px;font-weight:900;cursor:pointer}.mppl-color-tab.active{background:var(--mppl-orange);color:#111;box-shadow:0 10px 30px rgba(253,91,4,.22)}.mppl-color-panel{display:none;padding:0 18px 54px}.mppl-color-panel.active{display:block}.mppl-color-carousel{position:relative;max-width:1300px;margin:0 auto;padding:12px 70px 58px}.mppl-color-track{position:relative;height:510px}.mppl-color-card,.mppl-color-card *{color:#111}.mppl-color-card{position:absolute;top:0;left:50%;width:min(430px,82vw);min-height:460px;padding:18px;border-radius:28px;background:#fff;border:1px solid rgba(0,0,0,.10);box-shadow:0 22px 70px rgba(0,0,0,.18);opacity:0;pointer-events:none;transform:translateX(-50%) scale(.72);transition:transform .45s ease,opacity .45s ease}.mppl-color-card.is-active{opacity:1;pointer-events:auto;z-index:5;transform:translateX(-50%) scale(1)}.mppl-color-card.is-prev{opacity:.78;z-index:4;transform:translateX(calc(-50% - 285px)) scale(.84)}.mppl-color-card.is-next{opacity:.78;z-index:4;transform:translateX(calc(-50% + 285px)) scale(.84)}.mppl-color-card.is-prev2{opacity:.36;z-index:3;transform:translateX(calc(-50% - 500px)) scale(.68)}.mppl-color-card.is-next2{opacity:.36;z-index:3;transform:translateX(calc(-50% + 500px)) scale(.68)}.mppl-color-card.is-hidden{opacity:0}.mppl-swatch-image{aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:#f3f3f4;border:1px solid rgba(0,0,0,.08);margin-bottom:16px}.mppl-swatch-image img{display:block;width:100%;height:100%;object-fit:cover}.mppl-swatch-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(253,91,4,.10),rgba(0,0,0,.04))}.mppl-swatch-placeholder span{font-size:24px;font-weight:900}.mppl-material-pill{display:inline-flex;border-radius:999px;padding:5px 10px;margin:0 0 8px;background:rgba(253,91,4,.11);color:var(--mppl-orange)!important;font-size:12px;font-weight:900}.mppl-color-meta h3{margin:0 0 8px;font-size:28px}.mppl-color-meta p{margin:5px 0;line-height:1.4}.mppl-hex span{display:inline-flex;border-radius:8px;padding:2px 7px;background:#f0f0f0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.mppl-hex small{display:block;margin-top:2px;color:#666}.mppl-color-arrow{position:absolute;top:47%;width:50px;height:50px;border:0;border-radius:999px;background:#111;color:#fff;font-size:34px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transform:translateY(-50%);z-index:10;box-shadow:0 10px 30px rgba(0,0,0,.22)}.mppl-color-arrow:hover{background:var(--mppl-orange);color:#111}.mppl-color-arrow.prev{left:8px}.mppl-color-arrow.next{right:8px}.mppl-color-dots{display:flex;justify-content:center;gap:9px;margin-top:14px;flex-wrap:wrap}.mppl-color-dot{width:12px;height:12px;border:0;border-radius:999px;background:rgba(255,255,255,.28);cursor:pointer}.mppl-color-dot.active{background:var(--mppl-orange);transform:scale(1.15)}.mppl-color-empty{max-width:760px;margin:0 auto;padding:28px;border-radius:22px;background:rgba(255,255,255,.08);border:1px dashed rgba(253,91,4,.35);text-align:center}.mppl-color-label-with-hint{display:flex!important;align-items:baseline;gap:10px;flex-wrap:wrap}.mppl-color-hint-inline{display:inline-flex;align-items:baseline;gap:4px;margin-left:8px;font-size:13px;font-weight:500}.mppl-color-hint-inline span{opacity:.78}.mppl-color-hint-inline a{color:var(--mppl-orange)!important;font-weight:900;text-decoration:none}.mppl-color-hint-inline a:hover{text-decoration:underline}.mppl-color-picker-ui{display:grid;gap:10px}.mppl-color-row-ui{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.mppl-color-select,.mppl-color-custom-input{width:100%;min-height:46px;border-radius:14px;padding:0 14px;font:inherit}.mppl-remove-color-row{min-height:38px;border-radius:999px;border:1px solid rgba(253,91,4,.35);background:transparent;color:var(--mppl-orange);font-weight:900;cursor:pointer;padding:0 12px}.mppl-add-color-row{justify-self:start;border:0;border-radius:999px;padding:10px 14px;background:rgba(253,91,4,.12);color:var(--mppl-orange);font-weight:900;cursor:pointer}.mppl-color-form-hint{margin:0;font-size:13px;opacity:.82}.mppl-color-form-hint.warning{color:var(--mppl-orange);opacity:1;font-weight:800}.mppl-color-select option{color:#111;background:#fff}@media(max-width:980px){.mppl-color-carousel{padding:10px 54px 52px}.mppl-color-track{height:500px}.mppl-color-card.is-prev,.mppl-color-card.is-next,.mppl-color-card.is-prev2,.mppl-color-card.is-next2{opacity:0;pointer-events:none}}@media(max-width:620px){.mppl-color-track{height:470px}.mppl-color-card{width:min(360px,88vw);min-height:430px}.mppl-color-arrow{width:42px;height:42px;font-size:28px}.mppl-color-label-with-hint{display:block!important}.mppl-color-hint-inline{display:block;margin-left:0;margin-top:4px;font-size:12px}.mppl-color-row-ui{grid-template-columns:1fr}}

/* v1.1 – kleinere Stabilisierung der automatisch ergänzten Navigation */
header a[href*="farben-filamentkarten"],
nav a[href*="farben-filamentkarten"] {
  white-space: nowrap;
}


/* v1.2 – leere Platzhalterzeilen vermeiden */
.mppl-color-row-ui select:disabled {
  opacity: .7;
}

.mppl-color-form-hint:empty {
  display: none;
}


/* v1.3 – eigenes Farbdropdown mit Farbpunkten */
.mppl-color-row-ui {
  position: relative;
  grid-template-columns: minmax(0,1fr) auto;
}

.mppl-color-combo {
  position: relative;
  min-width: 0;
}

.mppl-color-combo-button {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  padding: 0 42px 0 14px;
  font: inherit;
  font-weight: 800;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  color: inherit;
  cursor: pointer;
  position: relative;
}

.mppl-color-combo-button:after {
  content: "⌄";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .75;
}

.mppl-color-combo-button:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.mppl-color-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  max-height: 280px;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: #111111;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: 6px;
}

.mppl-color-combo.open .mppl-color-menu {
  display: grid;
  gap: 4px;
}

.mppl-color-menu-item {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #ffffff;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.mppl-color-menu-item:hover {
  background: rgba(253,91,4,.22);
}

.mppl-color-menu-item small {
  opacity: .7;
  font-size: 11px;
  white-space: nowrap;
}

.mppl-color-dot-preview {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 16px;
  background: linear-gradient(135deg,#ffffff,#888888);
  border: 1px solid rgba(255,255,255,.80);
  box-shadow: 0 0 0 1px rgba(0,0,0,.22);
}

.mppl-color-menu-item.custom .mppl-color-dot-preview,
.mppl-color-combo-button .mppl-color-dot-preview:not([style]) {
  background: linear-gradient(135deg,#ffffff,#888888);
}

.mppl-color-custom-input {
  grid-column: 1 / -1;
  margin-top: 8px;
}

body:not(.dark-mode) .mppl-color-combo-button {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.18);
  color: #111111;
}

body:not(.dark-mode) .mppl-color-menu {
  background: #ffffff;
  border-color: rgba(0,0,0,.12);
}

body:not(.dark-mode) .mppl-color-menu-item {
  color: #111111;
}

body:not(.dark-mode) .mppl-color-menu-item:hover {
  background: rgba(253,91,4,.12);
}


/* v1.4 – zurück zur nativen Select-Optik mit kleinem farbigem Kreis */
.mppl-color-row-ui {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.mppl-color-select-wrap {
  position: relative;
  min-width: 0;
}

.mppl-color-select-wrap .mppl-color-indicator {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  color: rgba(255,255,255,.65);
  text-shadow: 0 0 2px rgba(0,0,0,.35);
}

.mppl-color-select {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  padding-left: 42px !important;
  font: inherit;
  appearance: auto;
}

.mppl-color-select option {
  color: #111111;
  background: #ffffff;
}

.mppl-color-custom-input {
  grid-column: 1 / -1;
  margin-top: 8px;
}

body:not(.dark-mode) .mppl-color-select-wrap .mppl-color-indicator {
  color: rgba(0,0,0,.50);
}

@media (max-width: 620px) {
  .mppl-color-row-ui {
    grid-template-columns: 1fr;
  }
}


/* v1.5, Zusatz-Farbreihen bleiben sichtbar */
.mppl-color-row-ui {
  margin-bottom: 8px;
}


/* v1.6 – erste Farbauswahl nach Materialwahl sofort nutzbar */
.mppl-color-form-hint:empty {
  display: none;
}


/* v1.7 – Reparatur: Farbkarten bleiben sichtbar, auch wenn JS verzögert lädt */
.mppl-color-card.is-active {
  opacity: 1 !important;
  pointer-events: auto;
  z-index: 5;
}

.mppl-color-form-hint:empty {
  display: none;
}

.mppl-color-row-ui {
  margin-bottom: 8px;
}


/* v1.8 – Ausrichtung, Linkfarbe und stabilere Materialwechsel */
.mppl-color-field-container {
  min-width: 0;
}

.mppl-color-field-container .mppl-color-picker-ui {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  gap: 10px;
  clear: both;
  flex-basis: 100%;
  grid-column: 1 / -1;
  margin-top: 8px;
}

.mppl-color-field-container .mppl-color-row-ui,
.mppl-color-field-container .mppl-color-select-wrap,
.mppl-color-field-container .mppl-color-select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.mppl-color-label-with-hint {
  margin-bottom: 8px !important;
}

.mppl-color-hint-inline a,
.mppl-color-label-with-hint a {
  color: #fd5b04 !important;
  font-weight: 900 !important;
}

.mppl-color-hint-inline a:hover,
.mppl-color-label-with-hint a:hover {
  text-decoration: underline;
}

/* Falls das Theme Label und Feld in einer Flex-Zeile hält, Feld in die nächste Zeile drücken */
.mppl-color-field-container > .mppl-color-picker-ui {
  display: grid !important;
}

/* Auf größeren Screens die Farbauswahl etwas breiter wie das Materialfeld wirken lassen */
@media (min-width: 900px) {
  .mppl-color-field-container .mppl-color-picker-ui {
    min-width: 360px;
  }
}


/* v1.9 – erstes Farb-Dropdown exakt oben halten, Zusatzfarben nur nach unten */
.mppl-color-align-container,
.mppl-color-field-container {
  align-self: start !important;
  vertical-align: top !important;
  min-width: 0;
}

/* Die Farbauswahl soll sich wie ein normales Feld direkt unter dem Label verhalten */
.mppl-color-align-container .mppl-color-picker-ui,
.mppl-color-field-container .mppl-color-picker-ui {
  margin-top: 0 !important;
  padding-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start !important;
  justify-items: stretch !important;
}

/* Erste Farbe bleibt oben. Zusätzliche Farben erweitern nur nach unten. */
.mppl-color-align-container [data-color-rows],
.mppl-color-field-container [data-color-rows] {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start !important;
}

.mppl-color-align-container .mppl-color-row-ui,
.mppl-color-field-container .mppl-color-row-ui {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.mppl-color-align-container .mppl-color-select-wrap,
.mppl-color-field-container .mppl-color-select-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.mppl-color-align-container .mppl-color-select,
.mppl-color-field-container .mppl-color-select {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 46px !important;
  box-sizing: border-box !important;
}

/* Button und Hinweis bleiben unter den Farbreihen, nicht neben oder über der ersten Auswahl */
.mppl-color-align-container .mppl-add-color-row,
.mppl-color-field-container .mppl-add-color-row,
.mppl-color-align-container .mppl-color-form-hint,
.mppl-color-field-container .mppl-color-form-hint,
.mppl-color-align-container .mppl-color-hint-inline,
.mppl-color-field-container .mppl-color-hint-inline {
  grid-column: 1 / -1;
}

/* Link optisch wie Materialübersicht */
.mppl-color-hint-inline a,
.mppl-color-label-with-hint a,
.mppl-color-field-container a[href*="farben"],
.mppl-color-align-container a[href*="farben"] {
  color: #fd5b04 !important;
  font-weight: 900 !important;
}

/* Falls das Theme Label und Inhalt in einer Flex-Struktur ausrichtet */
.mppl-color-label-with-hint {
  align-items: baseline !important;
}

/* Mobile: Entfernen-Button unter das jeweilige Dropdown setzen */
@media (max-width: 620px) {
  .mppl-color-align-container .mppl-color-row-ui,
  .mppl-color-field-container .mppl-color-row-ui {
    grid-template-columns: 1fr !important;
  }
}


/* v2.0 – Fix: Die erste Farbkarte darf nicht dauerhaft festkleben */
.mppl-color-card:first-child.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 5;
  transform: translateX(-50%) scale(1) !important;
}

.mppl-color-card:first-child.is-prev {
  opacity: .78 !important;
  pointer-events: none !important;
  z-index: 4;
  transform: translateX(calc(-50% - 285px)) scale(.84) !important;
}

.mppl-color-card:first-child.is-next {
  opacity: .78 !important;
  pointer-events: none !important;
  z-index: 4;
  transform: translateX(calc(-50% + 285px)) scale(.84) !important;
}

.mppl-color-card:first-child.is-prev2 {
  opacity: .36 !important;
  pointer-events: none !important;
  z-index: 3;
  transform: translateX(calc(-50% - 500px)) scale(.68) !important;
}

.mppl-color-card:first-child.is-next2 {
  opacity: .36 !important;
  pointer-events: none !important;
  z-index: 3;
  transform: translateX(calc(-50% + 500px)) scale(.68) !important;
}

.mppl-color-card:first-child.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}