/* drx: Styles fuer den Artikel-Content (Drexel Herbarium CI). Gescopt unter .drx-content. */
.drx-content {
    --drx-gruen: rgb(64, 86, 29);
    --drx-hellgruen: rgb(213, 227, 191);
    --drx-hellgruen-soft: rgb(233, 241, 222);
    --drx-gelb: #f3c623;
    --drx-text: #2b2b2b;
    color: var(--drx-text);
}

.drx-titel {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .35rem;
    color: var(--drx-text);
}
.drx-subtitle {
    font-size: 1.15rem;
    color: #6b7257;
    margin: 0 0 1rem;
}

/* USP-Haekchen */
.drx-usps {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}
.drx-usps li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: .4rem;
    line-height: 1.4;
}
.drx-usps li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--drx-gruen);
    font-weight: 700;
}

/* Feature-Icons (unter Warenkorb): initial 3 sichtbar; bei >3 horizontaler Slider zum Durchklicken */
.drx-icons-wrap { display: flex; align-items: center; gap: .5rem; margin: 1.25rem 0; }
.drx-icons {
    display: flex;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}
.drx-icons-wrap--slider .drx-icons {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.drx-icons-wrap--slider .drx-icons::-webkit-scrollbar { display: none; }
.drx-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
    width: 7rem;
    scroll-snap-align: start;
}
.drx-icons-wrap--slider .drx-icon { flex: 0 0 calc(33.333% - .67rem); }
.drx-icon-img {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    margin-bottom: .5rem;
}
.drx-icon-label {
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--drx-gruen);
}
.drx-icons-nav {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid var(--drx-gruen);
    background: #fff;
    color: var(--drx-gruen);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.drx-icons-nav:hover { background: var(--drx-hellgruen-soft); }

/* Hauptbeschreibung */
.drx-beschreibung {
    line-height: 1.6;
    margin: 1.5rem 0;
}

/* Mengenzeile (Kachel/Detail): Menge/Einheit WaWi + Form/Reichweite Plugin */
.drx-mengeninfo { line-height: 1.4; }
.drx-mengeninfo--kachel { color: #6b7257; }

/* Beschreibung (links) + Tabs (rechts) */
.drx-desc-tabs { margin: 2.5rem 0; align-items: flex-start; }
.drx-desc-col h2, .drx-desc-col h3 { color: var(--drx-gruen); margin-top: 0; }

/* Content-Rows: Text-Box (gruen) + Bild als Paar; Anordnung wechselt je Paar (Zickzack).
   Text-Box und Bild sind in jeder Row GLEICH HOCH (ruhiges, gleichmaessiges Layout). */
.drx-content-rows { margin: 1rem 0 2.5rem; }
.drx-row-pair { align-items: stretch; margin-bottom: 1.5rem; }
.drx-row-pair--reverse { flex-direction: row-reverse; }
.drx-cell { display: flex; margin-bottom: 1rem; }
.drx-row-text {
    background: var(--drx-hellgruen-soft);
    border-radius: 18px;
    padding: 1.75rem 2rem;
    line-height: 1.6;
    width: 100%;
}
.drx-row-text h2, .drx-row-text h3 { color: var(--drx-gruen); margin-top: 0; }
.drx-row-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    display: block;
}
@media (max-width: 767.98px) {
    /* mobil gestapelt: Bild natuerliche Hoehe, Reverse-Paare normal stapeln */
    .drx-row-img { height: auto; }
    .drx-row-pair--reverse { flex-direction: column; }
}

/* Inhalts-Ueberschriften in allen Content-Bereichen lesbar halten —
   sonst erben h2/h3 das Theme (zu gross, teils weiss -> auf hellem Grund unlesbar). */
.drx-beschreibung h2, .drx-beschreibung h3, .drx-beschreibung h4,
.drx-row-text h2, .drx-row-text h3, .drx-row-text h4,
.drx-tab-body h2, .drx-tab-body h3, .drx-tab-body h4,
.drx-faq-a h2, .drx-faq-a h3, .drx-faq-a h4 {
    color: var(--drx-gruen);
    font-weight: 600;
    line-height: 1.25;
    margin: .2rem 0 .5rem;
    padding-left: 0;   /* drx: vom Theme geerbten Einzug entfernen -> Ueberschriften buendig zum Fliesstext */
}
.drx-beschreibung h2 { font-size: 1.45rem; }
.drx-beschreibung h3, .drx-beschreibung h4 { font-size: 1.15rem; }
.drx-tab-body h2, .drx-tab-body h3, .drx-tab-body h4,
.drx-faq-a h2, .drx-faq-a h3, .drx-faq-a h4 { font-size: 1.05rem; }

/* Tabs-Accordion: jede Zeile als hellgraue Box (Design-Slice) */
.drx-tabs { display: flex; flex-direction: column; gap: .75rem; }
.drx-tab {
    background: #f3f3f1;
    border-radius: 12px;
    overflow: hidden;
}
.drx-tab-head {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 1.1rem 1.35rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--drx-text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.drx-tab-head::after {
    content: "⌄";
    color: var(--drx-gruen);
    font-size: 1.3rem;
    line-height: 1;
    transition: transform .2s ease;
}
.drx-tab-head[aria-expanded="true"]::after { transform: rotate(180deg); }
.drx-tab-body { display: none; padding: 0 1.35rem 1.35rem; line-height: 1.6; }
.drx-tab-body.is-open { display: block; }
/* drx (Markus): Aufzaehlungen in den Tab-Inhalten (z.B. Naehrwerte/Inhaltsstoffe) hatten padding-left:0
   -> die Bullets klebten am linken Rand (gleiche Position wie der Fliesstext). Standard-Listeneinzug geben. */
.drx-tab-body ul,
.drx-tab-body ol {
    padding-left: 1.5rem;
    margin-left: 0;
}

/* FAQ: abgesetzte graue Sektion mit Trennlinien */
.drx-faq {
    background: #f5f5f3;
    border-radius: 18px;
    padding: 2rem 2.25rem;
    margin: 2.5rem 0;
}
.drx-faq-title { font-size: 1.6rem; color: var(--drx-text); margin: 0 0 .75rem; }
.drx-faq-item { border-bottom: 1px solid #e1e1db; }
.drx-faq-item:last-child { border-bottom: 0; }
.drx-faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 1.1rem .25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--drx-text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.drx-faq-q::after { content: "+"; color: var(--drx-gruen); font-size: 1.5rem; line-height: 1; }
.drx-faq-q[aria-expanded="true"]::after { content: "–"; }
.drx-faq-a { display: none; padding: 0 .25rem 1.25rem; line-height: 1.6; }
.drx-faq-a.is-open { display: block; }

/* ===== Backend-Pflegemaske: Icon-Galerie (DAU-Auswahl) ===== */
.drx-icon-gallery { display: flex; flex-wrap: wrap; gap: .5rem; }
.drx-icon-pick {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    width: 6rem; padding: .5rem; border: 1px solid #ddd; border-radius: 8px;
    background: #fff; cursor: pointer; text-align: center;
}
.drx-icon-pick:hover { border-color: rgb(64, 86, 29); background: rgb(233, 241, 222); }
.drx-icon-pick img { width: 3.4rem; height: 3.4rem; object-fit: contain; }
.drx-icon-pick span { font-size: .72rem; margin-top: .3rem; line-height: 1.1; color: rgb(64, 86, 29); }
.drx-icon-chosen { display: flex; flex-direction: column; gap: .4rem; }
.drx-icon-item { display: flex; align-items: center; gap: .5rem; }
.drx-icon-item img { width: 2.5rem; height: 2.5rem; object-fit: contain; flex: 0 0 auto; }

/* Backend: Vorschau-Modal als (nahezu) Fullscreen mit Detailseiten-iframe */
.drx-modal-fullscreen { max-width: 96vw; width: 96vw; height: 92vh; margin: 4vh auto; }
.drx-preview-frame { display: block; width: 100%; height: 100%; border: 0; }

/* ===== Backend-Pflegemaske: Layout, Light/Dark-sichere Hinweise, WaWi-Box ===== */
.drx-content-maske { width: 100%; }
/* Hinweise erben die Textfarbe (currentColor) + opacity -> in Light UND Dark lesbar */
.drx-hint { font-size: .82rem; opacity: .72; line-height: 1.35; }
.drx-hint.d-block, span.drx-hint.d-block { display: block; margin-top: .2rem; }
.drx-wawi-box {
    background: rgba(64, 86, 29, .07);
    border: 1px solid rgba(64, 86, 29, .25);
    border-radius: 10px;
    padding: .75rem 1rem;
}
.drx-wawi-box-title { font-weight: 600; margin-bottom: .4rem; }
.drx-wawi-table { background: transparent; }
.drx-wawi-table th { font-weight: 600; white-space: nowrap; width: 42%; border-top: 0; padding: .25rem .5rem; }
.drx-wawi-table td { text-align: right; border-top: 0; padding: .25rem .5rem; }
.drx-wawi-table tr + tr th, .drx-wawi-table tr + tr td { border-top: 1px solid rgba(128,128,128,.2); }
/* Speichern-Leiste unten angenehm abgesetzt */
.drx-save-bar { padding: 1.25rem 0 2.5rem; }
.drx-modal-fullscreen { max-width: 96vw; width: 96vw; height: 92vh; margin: 4vh auto; }
.drx-preview-frame { display: block; width: 100%; height: 100%; border: 0; }

/* drx: Pflegemaske die volle Breite nutzen lassen — JTL .backend-content hat 88px Seiten-Padding
   (viel ungenutzter Rand links/rechts). Diese content.css wird NUR auf der Maske-Seite per <link>
   in maske.tpl geladen -> Override betrifft keine anderen Backend-Seiten. */
.backend-content { padding-left: 28px !important; padding-right: 28px !important; }

/* drx: Die beiden Schalter "Im Shop anzeigen" und "Artikel geprüft" sind die wichtigsten
   Bedienelemente der Maske und gingen in Bootstraps Standardgroesse unter. Bahn und Knauf werden
   deshalb rund verdoppelt (Bahn 3.4rem x 1.7rem statt 1.75rem x 1rem) und eindeutig eingefaerbt:
   rot = aus, grün = an. Bewusst Signalfarben (#28a745 / #dc3545) statt CI-Oliv — das Oliv war als
   Statusfarbe zu matt, und es sind exakt die Farben der Status-Badges ueber dem Formular
   (badge-success / badge-danger). Die ganze Maske spricht damit eine Farbe: grün = erledigt,
   rot = offen. Alle Masse haengen an der Bahnhoehe — wer sie aendert, muss translateX
   (= Bahnbreite minus Bahnhoehe) und das padding-left mitziehen. */
.drx-switch.custom-switch { padding-left: 4.5rem; min-height: 2rem; }
.drx-switch .custom-control-label { line-height: 1.75rem; }

.drx-switch .custom-control-label::before {
    top: .05rem;
    left: -4.5rem;
    width: 3.4rem;
    height: 1.7rem;
    border-radius: .85rem;
    background-color: #dc3545 !important;   /* aus = rot */
    border-color: #dc3545 !important;
}
.drx-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745 !important;   /* an = grün */
    border-color: #28a745 !important;
}
.drx-switch .custom-control-label::after {
    top: calc(.05rem + 3px);
    left: calc(-4.5rem + 3px);
    width: calc(1.7rem - 6px);
    height: calc(1.7rem - 6px);
    border-radius: 50%;
    background-color: #fff !important;   /* Knauf immer weiss, gut sichtbar */
}
.drx-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(1.7rem) !important;   /* Bahnbreite 3.4rem minus Knaufbahn 1.7rem */
}