/* „Farben & Stil“: Designvorschläge, Werkzeugleiste, Großansicht mit Live-Vorschau */
.dsx-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.dsx-gruppe { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: #eef2ef; border: 1px solid #e1e7e4; }
#library .dsx-gruppe button { height: 32px; min-width: 34px; margin: 0; padding: 0 10px; border: 0 !important; border-radius: 9px; background: transparent !important; color: #34474e !important; font: 700 13px Manrope, "Segoe UI", system-ui, sans-serif; box-shadow: none !important; cursor: pointer; }
#library .dsx-gruppe button:hover { background: #fff !important; }
#library .dsx-gruppe button[aria-pressed="true"] { background: #fff !important; color: #14323a !important; box-shadow: 0 2px 8px #18302e1c !important; }
#library .dsx-gross-knopf { flex: 1 1 auto; height: 38px; margin: 0; padding: 0 14px; border: 0 !important; border-radius: 11px; background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; color: #fff !important; font: 800 13px Manrope, "Segoe UI", system-ui, sans-serif; box-shadow: 0 8px 18px -10px #1d6d5ecc !important; cursor: pointer; }
#library .dsx-gross-knopf:hover { background: linear-gradient(135deg, #1f7a68, #14323a) !important; }

/* Vorschläge */
.dsx-vorschlaege { display: grid; gap: 12px; margin: 14px 0 18px; font-family: Manrope, "Segoe UI", system-ui, sans-serif; color: #14323a; }
.dsx-v-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.dsx-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: #1d6d5e; }
#library .dsx-v-kopf h3 { margin: 2px 0 0; font-size: 16px; letter-spacing: -.01em; color: #14323a; }
#library .dsx-mischen { flex: none; height: 32px; margin: 0; padding: 0 12px; border-radius: 999px; border: 1px solid #b9d0c7 !important; background: #eef5f1 !important; color: #16564b !important; font: 800 12px Manrope, sans-serif; box-shadow: none !important; cursor: pointer; }
#library .dsx-mischen:hover { background: #1d6d5e !important; color: #fff !important; }
.dsx-filter { display: flex; flex-wrap: wrap; gap: 5px; }
#library .dsx-filter button { height: 30px; margin: 0; padding: 0 11px; border-radius: 999px; border: 1px solid #dde5e1 !important; background: #fff !important; color: #34474e !important; font: 700 12px Manrope, sans-serif; box-shadow: none !important; cursor: pointer; }
#library .dsx-filter button:hover { border-color: #1d6d5e !important; }
#library .dsx-filter button[aria-selected="true"] { background: linear-gradient(135deg, #2a9079, #1d6d5e) !important; border-color: transparent !important; color: #fff !important; }
.dsx-eigene { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#library .dsx-eigene > * { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 13px; border: 1px solid #fff !important; background: linear-gradient(140deg, #eaf5f1, #fbf3e6) !important; color: #14323a !important; text-align: left; cursor: pointer; box-shadow: 0 8px 20px -16px #14323a99 !important; font: inherit; transition: transform .15s; }
#library .dsx-eigene > *:hover, #library .dsx-bild.dsx-ueber, #library .dsx-bild:focus-visible { transform: translateY(-2px); outline: none; }
.dsx-eigene i { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #2a9079, #1d6d5e); color: #fff; font-style: normal; font-size: 15px; }
.dsx-eigene span { display: grid; min-width: 0; } .dsx-eigene b { font-size: 12.5px; } .dsx-eigene small { font-size: 11px; color: #45585e; font-weight: 500; }
.dsx-leer { margin: 0; padding: 12px; border-radius: 12px; background: #f3f7f5; color: #45585e; font-size: 12.5px; }
.dsx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#library .dsx-karte { position: relative; display: grid; gap: 0; margin: 0; padding: 0; border-radius: 15px; border: 1.5px solid #e1e7e4 !important; background: #fff !important; overflow: hidden; text-align: left; cursor: pointer; box-shadow: 0 10px 22px -18px #14323a80 !important;
  animation: dsx-rein .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 18ms); transition: transform .18s, box-shadow .18s, border-color .18s; font: inherit; color: #14323a !important; min-height: 0; }
@keyframes dsx-rein { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
#library .dsx-karte:hover, #library .dsx-karte:focus-visible { transform: translateY(-3px); border-color: #1d6d5e !important; box-shadow: 0 18px 34px -18px #14323aa6 !important; outline: none; }
#library .dsx-karte.dsx-aktiv { border-color: #1d6d5e !important; box-shadow: 0 0 0 3px #2a907933, 0 14px 30px -18px #1d6d5ecc !important; }
.dsx-muster { position: relative; display: grid; gap: 5px; align-content: start; padding: 10px 12px 12px; height: 118px; overflow: hidden; }
.dsx-m-nav { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; } .dsx-m-nav i { width: 14px; height: 14px; border-radius: 4px; margin-right: auto; } .dsx-m-nav em { width: 18px; height: 4px; border-radius: 2px; }
.dsx-m-titel { font-size: 17px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsx-m-zeile { height: 5px; width: 82%; border-radius: 3px; } .dsx-kurz { width: 56%; }
.dsx-m-knopf { justify-self: start; margin-top: 5px; padding: 5px 12px; font-size: 10.5px; font-weight: 800; font-family: Manrope, sans-serif; }
.dsx-m-punkte { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 3px; } .dsx-m-punkte i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #ffffffcc; box-shadow: 0 1px 3px #0003; }
.dsx-m-glanz { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #ffffff40 50%, transparent 65%); transform: translateX(-100%); animation: dsx-glanz 3s ease-in-out infinite; pointer-events: none; }
@keyframes dsx-glanz { 0%, 50% { transform: translateX(-100%); } 90%, 100% { transform: translateX(100%); } }
.dsx-info { display: grid; gap: 1px; padding: 8px 11px 10px; border-top: 1px solid #eef1ef; background: #fff; }
.dsx-info b { font-size: 12.5px; color: #14323a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dsx-info small { font-size: 11px; color: #45585e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsx-haken { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px; background: #1d6d5e; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; box-shadow: 0 4px 10px #0003; }
.dsx-tipp { margin: 0; font-size: 12px; color: #45585e; }

/* ---------- Großansicht ---------- */
@media (min-width: 900px) {
  html body.dsx-gross-an.dsx-gross-an #library.dsx.style-studio-panel { position: fixed !important; inset: 12px !important; z-index: 2147482000 !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important;
    display: grid !important; grid-template-columns: minmax(0, 1.6fr) minmax(380px, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 0 !important; overflow: hidden !important; transform: none !important; visibility: visible !important; opacity: 1 !important;
    border-radius: 26px; background: #eef3f0 !important; border: 1px solid #fff; box-shadow: 0 0 0 100vmax #0b18208c, 0 40px 100px #0b182066; animation: dsx-auf .35s cubic-bezier(.2, .8, .2, 1); isolation: isolate; }
  @keyframes dsx-auf { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
  html body.dsx-gross-an #library.dsx.style-studio-panel::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .75;
    background: radial-gradient(26% 30% at 14% 18%, #2f9a83aa, transparent 70%), radial-gradient(24% 30% at 62% 8%, #e7b878aa, transparent 70%), radial-gradient(30% 34% at 30% 92%, #6aa7c788, transparent 70%); }
  body.dsx-gross-an :is(#atKnopf, #atEinladung) { display: none !important; }
  #library.dsx > :not(.dsx-kopf):not(.dsx-links):not(.dsx-rechts) { display: none !important; }
  #library.dsx .dsx-kopf { grid-column: 1 / -1; padding: 16px 24px 14px; background: #ffffffa6; border-bottom: 1px solid #fff; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  #library.dsx .style-studio-heading { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; color: #14323a !important; }
  #library.dsx .style-studio-heading > * { grid-column: 1; margin: 0 !important; }
  #library.dsx .style-studio-heading span { color: #a27a4e !important; }
  #library.dsx .style-studio-heading h2 { color: #14323a !important; font-size: 24px !important; }
  #library.dsx .style-studio-heading p, #library.dsx .style-studio-heading small { color: #45585e !important; }
  #library.dsx .style-studio-heading #openStylePreview { grid-column: 2; grid-row: 1 / span 2; }
  #library.dsx .dsx-leiste { grid-column: 2; grid-row: 3 / span 2; margin: 0 !important; justify-content: flex-end; }
  #library.dsx .dsx-links { min-height: 0; padding: 16px 20px 20px 24px; display: grid; }
  #library.dsx .dsx-rechts { min-height: 0; overflow-y: auto; padding: 4px 22px 24px; background: #ffffffc7; border-left: 1px solid #fff; }
  #library.dsx .dsx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #library.dsx .dsx-muster { height: 104px; }
}
@media (max-width: 899px) { #library .dsx-gross-knopf { display: none; } }
@media (min-width: 900px) and (max-width: 1250px) { #library.dsx .dsx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dsx-buehne { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-height: 0; }
.dsx-b-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#library .dsx-seite { display: flex; align-items: center; gap: 6px; margin: 0; font: 700 12.5px Manrope, sans-serif; color: #34474e; }
#library .dsx-seite select { height: 34px; margin: 0; padding: 0 10px; border-radius: 10px; border: 1px solid #cfdcd6; background: #fff; color: #14323a; font: 600 13px Manrope, sans-serif; }
.dsx-status { margin-left: auto; padding: 5px 11px; border-radius: 999px; background: #ffffffb3; color: #16564b; font: 800 12px Manrope, sans-serif; transition: background .2s, color .2s; }
.dsx-status-vorschau { background: linear-gradient(135deg, #e2b878, #b07a3c); color: #fff; }
.dsx-rahmen { position: relative; min-height: 0; overflow: hidden; border-radius: 18px; background: #dfe7e3; box-shadow: inset 0 0 0 1px #14323a14, 0 24px 50px -36px #14323a99; padding: 12px; }
.dsx-frame { position: absolute; left: 12px; top: 12px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 14px 40px -18px #14323a80; transform-origin: 0 0; transition: width .25s, transform .25s; }
.dsx-geraet-klein .dsx-frame { left: 50%; translate: -50% 0; transform-origin: 50% 0; border-radius: 22px; box-shadow: 0 0 0 10px #14191f, 0 24px 50px -20px #14323acc; top: 22px; }
@media (prefers-reduced-motion: reduce) { #library .dsx-karte, .dsx-m-glanz, html body.dsx-gross-an.dsx-gross-an #library.dsx.style-studio-panel { animation: none; } }