/* ==========================================================
   DRK Rottenburg Wiki
   Globale BookStack-Entity-Karten
   Shelves, Books, Chapters, Pages, Seitenleisten
   Datei: /var/www/bookstack/public/custom/drk-entities.css
   Bereinigte Version
   ========================================================== */


/* ==========================================================
   0. Farbvariablen
   ========================================================== */

:root {
    --drk-red-main: #b00020;
    --drk-red-mid: #cf0026;
    --drk-red-dark: #7d0018;

    --drk-blue-main: #006aa6;
    --drk-blue-mid: #0b8fd3;
    --drk-blue-dark: #004d78;

    --drk-green-main: #007a4d;
    --drk-green-mid: #00a86b;
    --drk-green-dark: #005437;

    --drk-orange-main: #a95300;
    --drk-orange-mid: #e87900;
    --drk-orange-dark: #783b00;

    --drk-purple-main: #5727a3;
    --drk-purple-mid: #7c3aed;
    --drk-purple-dark: #38146f;

    --drk-neutral-main: #4b5563;
    --drk-neutral-mid: #6b7280;
    --drk-neutral-dark: #374151;

    --drk-card-radius: 20px;
    --drk-card-shadow: 0 14px 30px rgba(0,0,0,0.18);
    --drk-card-shadow-hover: 0 20px 38px rgba(0,0,0,0.26);
}


/* Standard-Farbwerte für Entity-Karten */
.drk-entity-themed,
.drk-entity-card {
    --drk-entity-main: var(--drk-red-main);
    --drk-entity-mid: var(--drk-red-mid);
    --drk-entity-dark: var(--drk-red-dark);
    --drk-entity-soft: rgba(176,0,32,0.12);
    --drk-entity-border: rgba(230,70,58,0.42);
}

.drk-entity-red {
    --drk-entity-main: var(--drk-red-main);
    --drk-entity-mid: var(--drk-red-mid);
    --drk-entity-dark: var(--drk-red-dark);
    --drk-entity-soft: rgba(176,0,32,0.12);
    --drk-entity-border: rgba(230,70,58,0.42);
}

.drk-entity-blue {
    --drk-entity-main: var(--drk-blue-main);
    --drk-entity-mid: var(--drk-blue-mid);
    --drk-entity-dark: var(--drk-blue-dark);
    --drk-entity-soft: rgba(11,143,211,0.14);
    --drk-entity-border: rgba(11,143,211,0.45);
}

.drk-entity-green {
    --drk-entity-main: var(--drk-green-main);
    --drk-entity-mid: var(--drk-green-mid);
    --drk-entity-dark: var(--drk-green-dark);
    --drk-entity-soft: rgba(0,168,107,0.14);
    --drk-entity-border: rgba(0,168,107,0.45);
}

.drk-entity-orange {
    --drk-entity-main: var(--drk-orange-main);
    --drk-entity-mid: var(--drk-orange-mid);
    --drk-entity-dark: var(--drk-orange-dark);
    --drk-entity-soft: rgba(232,121,0,0.14);
    --drk-entity-border: rgba(232,121,0,0.45);
}

.drk-entity-purple {
    --drk-entity-main: var(--drk-purple-main);
    --drk-entity-mid: var(--drk-purple-mid);
    --drk-entity-dark: var(--drk-purple-dark);
    --drk-entity-soft: rgba(124,58,237,0.14);
    --drk-entity-border: rgba(124,58,237,0.45);
}

.drk-entity-gray,
.drk-entity-neutral {
    --drk-entity-main: var(--drk-neutral-main);
    --drk-entity-mid: var(--drk-neutral-mid);
    --drk-entity-dark: var(--drk-neutral-dark);
    --drk-entity-soft: rgba(107,114,128,0.14);
    --drk-entity-border: rgba(107,114,128,0.42);
}


/* ==========================================================
   1. Große Entity-Karten: Shelves / Books / Grid Cards
   ========================================================== */

.grid-card.drk-entity-themed,
.grid-card.drk-entity-card,
.card.entity-card.drk-entity-themed,
.card.entity-card.drk-entity-card,
.shelf-grid .grid-card.drk-entity-themed,
.shelf-grid .grid-card.drk-entity-card,
.book-grid .grid-card.drk-entity-themed,
.book-grid .grid-card.drk-entity-card,
.chapter-grid .grid-card.drk-entity-themed,
.chapter-grid .grid-card.drk-entity-card,
.page-grid .grid-card.drk-entity-themed,
.page-grid .grid-card.drk-entity-card {
    position: relative !important;
    overflow: hidden !important;

    border-radius: var(--drk-card-radius) !important;
    border: 1px solid var(--drk-entity-border) !important;

    background: rgba(128,128,128,0.08) !important;
    box-shadow: var(--drk-card-shadow) !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease !important;
}

.grid-card.drk-entity-themed:hover,
.grid-card.drk-entity-card:hover,
.card.entity-card.drk-entity-themed:hover,
.card.entity-card.drk-entity-card:hover,
.shelf-grid .grid-card.drk-entity-themed:hover,
.shelf-grid .grid-card.drk-entity-card:hover,
.book-grid .grid-card.drk-entity-themed:hover,
.book-grid .grid-card.drk-entity-card:hover,
.chapter-grid .grid-card.drk-entity-themed:hover,
.chapter-grid .grid-card.drk-entity-card:hover,
.page-grid .grid-card.drk-entity-themed:hover,
.page-grid .grid-card.drk-entity-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--drk-card-shadow-hover) !important;
    border-color: var(--drk-entity-mid) !important;
    background: var(--drk-entity-soft) !important;
}


/* ==========================================================
   2. Coverbereiche großer Karten
   ========================================================== */

.drk-entity-themed .entity-card-image,
.drk-entity-themed .card-cover,
.drk-entity-themed .image,
.drk-entity-card .entity-card-image,
.drk-entity-card .card-cover,
.drk-entity-card .image {
    position: relative !important;
    overflow: hidden !important;

    min-height: 140px !important;

    border-radius: 20px 20px 0 0 !important;

    background:
        linear-gradient(
            135deg,
            var(--drk-entity-main) 0%,
            var(--drk-entity-mid) 58%,
            var(--drk-entity-dark) 100%
        ) !important;
}

.entity-card-image,
.card-cover {
    background-color: var(--drk-entity-mid, #cf0026) !important;
}


/* Eigene Coverbilder sauber anzeigen */
.drk-entity-has-custom-cover .entity-card-image,
.drk-entity-has-custom-cover .card-cover,
.drk-entity-has-custom-cover .image {
    background: transparent !important;
}

.drk-entity-has-custom-cover .entity-card-image img,
.drk-entity-has-custom-cover .card-cover img,
.drk-entity-has-custom-cover .image img,
.entity-card-image img,
.card-cover img,
.grid-card img,
.card.entity-card img {
    position: relative !important;
    z-index: 2 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
}


/* ==========================================================
   3. Automatische Cover-Icons bei Karten ohne eigenes Cover
   ========================================================== */

.drk-entity-no-custom-cover .entity-card-image,
.drk-entity-no-custom-cover .card-cover,
.drk-entity-no-custom-cover .image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 145px !important;
}

.drk-entity-no-custom-cover .entity-card-image::before,
.drk-entity-no-custom-cover .card-cover::before,
.drk-entity-no-custom-cover .image::before {
    content: attr(data-drk-icon) !important;

    position: relative !important;
    z-index: 4 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 78px !important;
    height: 78px !important;

    border-radius: 21px !important;

    background: rgba(255,255,255,0.16) !important;
    border: 1px solid rgba(255,255,255,0.30) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.20) !important;

    color: #ffffff !important;
    font-size: 40px !important;
    line-height: 1 !important;
}

.drk-entity-no-custom-cover .entity-card-image::after,
.drk-entity-no-custom-cover .card-cover::after,
.drk-entity-no-custom-cover .image::after {
    content: "" !important;

    position: absolute !important;
    top: -44px !important;
    right: -38px !important;

    width: 135px !important;
    height: 135px !important;

    border-radius: 50% !important;
    background: rgba(255,255,255,0.10) !important;

    pointer-events: none !important;
    z-index: 1 !important;
}

/* BookStack-Standard-SVG im Fallback-Cover ausblenden */
.drk-entity-no-custom-cover .entity-card-image > svg,
.drk-entity-no-custom-cover .card-cover > svg,
.drk-entity-no-custom-cover .image > svg {
    display: none !important;
}

/* Keine Pseudo-Icons bei eigenen Coverbildern */
.drk-entity-has-custom-cover .entity-card-image::before,
.drk-entity-has-custom-cover .card-cover::before,
.drk-entity-has-custom-cover .image::before,
.drk-entity-has-custom-cover .entity-card-image::after,
.drk-entity-has-custom-cover .card-cover::after,
.drk-entity-has-custom-cover .image::after {
    display: none !important;
}


/* ==========================================================
   4. Dekoformen auf großen Karten
   ========================================================== */

.grid-card.drk-entity-themed::before,
.grid-card.drk-entity-card::before,
.card.entity-card.drk-entity-themed::before,
.card.entity-card.drk-entity-card::before {
    content: "" !important;

    position: absolute !important;
    top: -38px !important;
    right: -30px !important;

    width: 125px !important;
    height: 125px !important;

    border-radius: 50% !important;
    background: rgba(255,255,255,0.10) !important;

    pointer-events: none !important;
    z-index: 1 !important;
}

.grid-card.drk-entity-themed::after,
.grid-card.drk-entity-card::after,
.card.entity-card.drk-entity-themed::after,
.card.entity-card.drk-entity-card::after {
    content: "" !important;

    position: absolute !important;
    left: -28px !important;
    top: 96px !important;

    width: 135px !important;
    height: 50px !important;

    border-radius: 40px !important;
    background: rgba(255,255,255,0.08) !important;
    transform: rotate(-8deg) !important;

    pointer-events: none !important;
    z-index: 1 !important;
}

.grid-card.drk-entity-themed > *,
.grid-card.drk-entity-card > *,
.card.entity-card.drk-entity-themed > *,
.card.entity-card.drk-entity-card > * {
    position: relative !important;
    z-index: 2 !important;
}


/* ==========================================================
   5. Texte in großen Karten
   ========================================================== */

.drk-entity-themed h1,
.drk-entity-themed h2,
.drk-entity-themed h3,
.drk-entity-themed h4,
.drk-entity-card h1,
.drk-entity-card h2,
.drk-entity-card h3,
.drk-entity-card h4,
.entity-card-title,
.grid-card-title {
    color: inherit !important;
    font-weight: 650 !important;
    line-height: 1.22 !important;
}

.drk-entity-themed p,
.drk-entity-card p,
.entity-card-description {
    line-height: 1.45 !important;
}

.drk-entity-themed a,
.drk-entity-card a,
.drk-entity-themed a:hover,
.drk-entity-card a:hover {
    text-decoration: none !important;
}

.drk-entity-themed .text-muted,
.drk-entity-themed .small,
.drk-entity-themed small,
.drk-entity-card .text-muted,
.drk-entity-card .small,
.drk-entity-card small {
    opacity: 0.82 !important;
}


/* ==========================================================
   6. Shelf-/Book-Hero
   ========================================================== */

.drk-entity-page-hero {
    position: relative !important;
    overflow: hidden !important;

    margin: 0 0 34px 0 !important;
    padding: 34px 36px !important;

    border-radius: 24px 24px 60px 24px !important;

    background:
        linear-gradient(
            135deg,
            var(--drk-entity-main, #b00020) 0%,
            var(--drk-entity-mid, #cf0026) 58%,
            var(--drk-entity-dark, #7d0018) 100%
        ) !important;

    color: #ffffff !important;

    box-shadow: 0 18px 36px rgba(0,0,0,0.22) !important;
    border: 1px solid rgba(255,120,130,0.24) !important;
}

.drk-entity-page-hero::before {
    content: "" !important;

    position: absolute !important;
    top: -58px !important;
    right: -36px !important;

    width: 230px !important;
    height: 230px !important;

    border-radius: 50% !important;
    background: rgba(255,255,255,0.10) !important;

    pointer-events: none !important;
    z-index: 1 !important;
}

.drk-entity-page-hero::after {
    content: "" !important;

    position: absolute !important;
    left: -38px !important;
    bottom: -40px !important;

    width: 250px !important;
    height: 95px !important;

    border-radius: 70px !important;
    background: rgba(255,255,255,0.08) !important;
    transform: rotate(-7deg) !important;

    pointer-events: none !important;
    z-index: 1 !important;
}

.drk-entity-page-hero-content {
    position: relative !important;
    z-index: 2 !important;

    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
}

.drk-entity-page-hero-badge {
    flex: 0 0 auto !important;

    width: 76px !important;
    height: 76px !important;
    line-height: 76px !important;

    text-align: center !important;
    border-radius: 21px !important;

    font-size: 40px !important;

    background: rgba(255,255,255,0.16) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;
}

.drk-entity-page-hero-text {
    min-width: 0 !important;
}

.drk-entity-page-hero-label {
    display: inline-block !important;

    margin: 0 0 10px 0 !important;
    padding: 5px 10px !important;

    border-radius: 999px !important;
    background: rgba(255,255,255,0.14) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;

    color: rgba(255,255,255,0.94) !important;

    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}

.drk-entity-page-hero h1 {
    margin: 0 0 10px 0 !important;

    color: #ffffff !important;
    font-size: 2.35rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

.drk-entity-page-hero p {
    margin: 0 0 7px 0 !important;

    color: rgba(255,255,255,0.96) !important;
    font-size: 1.03rem !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
}

.drk-entity-page-hero p:last-child {
    margin-bottom: 0 !important;
}

.drk-entity-page-hero-shelf {
    background: linear-gradient(135deg, #9f001d 0%, #cf0026 58%, #6f0015 100%) !important;
}

.drk-entity-page-hero-book {
    background: linear-gradient(135deg, #b00020 0%, #cf0026 58%, #7d0018 100%) !important;
}

.drk-entity-page-hero-blue {
    background: linear-gradient(135deg, #006aa6 0%, #0b8fd3 58%, #004d78 100%) !important;
}

.drk-entity-original-hidden {
    display: none !important;
}


/* ==========================================================
   7. Navigation-/Listen-Karten
   Books, Chapters, Pages, Sidebar
   ========================================================== */

.drk-entity-nav-card {
    position: relative !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    gap: 0 !important;

    min-height: 42px !important;

    margin: 6px 0 !important;
    padding: 9px 12px 9px 16px !important;

    border-radius: 12px !important;
    border: 1px solid rgba(128,128,128,0.20) !important;

    background: rgba(128,128,128,0.045) !important;
    box-shadow: none !important;

    color: inherit !important;
    text-decoration: none !important;

    font-weight: 500 !important;
    line-height: 1.25 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;

    transform: none !important;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease !important;
}

.drk-entity-nav-card::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    width: 4px !important;
    height: 100% !important;

    border-radius: 12px 0 0 12px !important;
    background: #cf0026 !important;

    opacity: 0.95 !important;
}

.drk-entity-nav-card:hover {
    transform: translateX(2px) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.drk-entity-nav-card,
.drk-entity-nav-card * {
    text-decoration: none !important;
}

.drk-entity-nav-card > * {
    position: relative !important;
    z-index: 2 !important;
}

.drk-entity-nav-card h2,
.drk-entity-nav-card h3,
.drk-entity-nav-card h4 {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    line-height: 1.25 !important;
}

.drk-entity-nav-card p,
.drk-entity-nav-card .text-muted,
.drk-entity-nav-card .entity-list-item-description {
    margin-bottom: 0 !important;
    opacity: 0.82 !important;
    line-height: 1.4 !important;
    max-height: 2.9em !important;
    overflow: hidden !important;
}


/* ==========================================================
   8. BookStack-Icons in Listen
   Keine künstlichen Emoji-Icons
   ========================================================== */

.drk-entity-nav-page::after,
.drk-entity-nav-chapter::after,
.drk-entity-nav-book::after,
.drk-entity-nav-shelf::after {
    content: none !important;
    display: none !important;
}

.drk-entity-nav-card .icon,
.drk-entity-nav-card .icon-list-item,
.drk-entity-nav-card .entity-list-item-icon,
.drk-entity-nav-card span[class*="icon"],
.drk-entity-nav-card div[class*="icon"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    padding: 0 !important;
    margin: 0 9px 0 0 !important;

    border-radius: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
}

.drk-entity-nav-card svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;

    margin: 0 !important;

    opacity: 0.95 !important;
    fill: currentColor !important;
    color: currentColor !important;

    display: inline-block !important;
    vertical-align: middle !important;
}


/* ==========================================================
   9. Typfarben in Listen
   Shelf = Rot, Book = Grün, Kapitel = Orange, Seite = Blau
   ========================================================== */

/* Shelfs */
.drk-entity-nav-shelf {
    border-color: rgba(230,70,58,0.32) !important;
    background: rgba(176,0,32,0.075) !important;
    font-weight: 700 !important;
}

.drk-entity-nav-shelf::before {
    background: #cf0026 !important;
}

.drk-entity-nav-shelf svg {
    color: #cf0026 !important;
}

/* Books */
.drk-entity-nav-book {
    border-color: rgba(0,168,107,0.34) !important;
    background: rgba(0,168,107,0.075) !important;
    font-weight: 700 !important;
}

.drk-entity-nav-book::before {
    background: #00a86b !important;
}

.drk-entity-nav-book svg {
    color: #00a86b !important;
}

/* Kapitel */
.drk-entity-nav-chapter {
    border-color: rgba(232,121,0,0.35) !important;
    background: rgba(232,121,0,0.075) !important;
    font-weight: 650 !important;
}

.drk-entity-nav-chapter::before {
    background: #e87900 !important;
}

.drk-entity-nav-chapter svg {
    color: #e87900 !important;
}

/* Seiten */
.drk-entity-nav-page {
    border-color: rgba(43,111,232,0.35) !important;
    background: rgba(43,111,232,0.065) !important;
    font-weight: 500 !important;
}

.drk-entity-nav-page::before {
    background: #0b8fd3 !important;
}

.drk-entity-nav-page svg {
    color: #0b8fd3 !important;
}


/* Hover-Farben */
.drk-entity-nav-shelf:hover {
    background: rgba(176,0,32,0.12) !important;
    border-color: rgba(230,70,58,0.46) !important;
}

.drk-entity-nav-book:hover {
    background: rgba(0,168,107,0.12) !important;
    border-color: rgba(0,168,107,0.46) !important;
}

.drk-entity-nav-chapter:hover {
    background: rgba(232,121,0,0.12) !important;
    border-color: rgba(232,121,0,0.46) !important;
}

.drk-entity-nav-page:hover {
    background: rgba(43,111,232,0.12) !important;
    border-color: rgba(43,111,232,0.46) !important;
}


/* Aktive/ausgewählte Einträge */
.drk-entity-nav-card.active,
.drk-entity-nav-card.selected,
.tri-layout-left .active.drk-entity-nav-card,
.tri-layout-left-contents .active.drk-entity-nav-card,
.sidebar-page-nav .active.drk-entity-nav-card,
.sidebar-page-list .active.drk-entity-nav-card,
.book-tree .active.drk-entity-nav-card {
    background: rgba(176,0,32,0.13) !important;
    border-color: rgba(230,70,58,0.48) !important;
}


/* ==========================================================
   10. Sidebar kompakt
   ========================================================== */

.tri-layout-left .drk-entity-nav-card,
.tri-layout-left-contents .drk-entity-nav-card,
.sidebar-page-nav .drk-entity-nav-card,
.sidebar-page-list .drk-entity-nav-card,
.book-tree .drk-entity-nav-card,
.book-content .drk-entity-nav-card,
.page-nav-list .drk-entity-nav-card {
    min-height: 34px !important;

    margin: 3px 0 !important;
    padding: 6px 9px 6px 13px !important;

    border-radius: 9px !important;
    border: 1px solid rgba(128,128,128,0.14) !important;

    background: rgba(128,128,128,0.035) !important;
    box-shadow: none !important;

    font-size: 0.86rem !important;
    line-height: 1.18 !important;

    transform: none !important;
}

.tri-layout-left .drk-entity-nav-card::before,
.tri-layout-left-contents .drk-entity-nav-card::before,
.sidebar-page-nav .drk-entity-nav-card::before,
.sidebar-page-list .drk-entity-nav-card::before,
.book-tree .drk-entity-nav-card::before,
.book-content .drk-entity-nav-card::before,
.page-nav-list .drk-entity-nav-card::before {
    width: 3px !important;
    border-radius: 9px 0 0 9px !important;
}

.tri-layout-left .drk-entity-nav-card svg,
.tri-layout-left-contents .drk-entity-nav-card svg,
.sidebar-page-nav .drk-entity-nav-card svg,
.sidebar-page-list .drk-entity-nav-card svg,
.book-tree .drk-entity-nav-card svg,
.book-content .drk-entity-nav-card svg,
.page-nav-list .drk-entity-nav-card svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
}

.tri-layout-left .drk-entity-nav-card p,
.tri-layout-left-contents .drk-entity-nav-card p,
.sidebar-page-nav .drk-entity-nav-card p,
.sidebar-page-list .drk-entity-nav-card p,
.book-tree .drk-entity-nav-card p,
.book-content .drk-entity-nav-card p,
.page-nav-list .drk-entity-nav-card p,
.tri-layout-left .drk-entity-nav-card .text-muted,
.tri-layout-left-contents .drk-entity-nav-card .text-muted,
.sidebar-page-nav .drk-entity-nav-card .text-muted,
.sidebar-page-list .drk-entity-nav-card .text-muted,
.book-tree .drk-entity-nav-card .text-muted,
.book-content .drk-entity-nav-card .text-muted,
.page-nav-list .drk-entity-nav-card .text-muted,
.tri-layout-left .drk-entity-nav-card .entity-list-item-description,
.tri-layout-left-contents .drk-entity-nav-card .entity-list-item-description,
.sidebar-page-nav .drk-entity-nav-card .entity-list-item-description,
.sidebar-page-list .drk-entity-nav-card .entity-list-item-description,
.book-tree .drk-entity-nav-card .entity-list-item-description,
.book-content .drk-entity-nav-card .entity-list-item-description,
.page-nav-list .drk-entity-nav-card .entity-list-item-description {
    display: none !important;
}

.tri-layout-left .drk-entity-nav-card:hover,
.tri-layout-left-contents .drk-entity-nav-card:hover,
.sidebar-page-nav .drk-entity-nav-card:hover,
.sidebar-page-list .drk-entity-nav-card:hover,
.book-tree .drk-entity-nav-card:hover,
.book-content .drk-entity-nav-card:hover,
.page-nav-list .drk-entity-nav-card:hover {
    transform: none !important;
    background: rgba(176,0,32,0.10) !important;
    border-color: rgba(230,70,58,0.30) !important;
}


/* ==========================================================
   11. Alte BookStack-Listenklassen weiterhin unterstützen
   ========================================================== */

.page-list-item.drk-entity-themed,
.entity-list-item.drk-entity-themed,
.entity-list > a.drk-entity-themed,
.entity-list > div.drk-entity-themed {
    position: relative !important;
    overflow: hidden !important;

    border-radius: 14px !important;
    border: 1px solid rgba(128,128,128,0.22) !important;
    border-left: 5px solid var(--drk-entity-mid) !important;

    background:
        linear-gradient(
            90deg,
            var(--drk-entity-soft) 0%,
            rgba(128,128,128,0.065) 42%,
            rgba(128,128,128,0.045) 100%
        ) !important;

    box-shadow: none !important;

    padding: 13px 17px !important;
    margin: 0 0 10px 0 !important;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease !important;
}

.page-list-item.drk-entity-themed:hover,
.entity-list-item.drk-entity-themed:hover,
.entity-list > a.drk-entity-themed:hover,
.entity-list > div.drk-entity-themed:hover {
    transform: translateX(3px) !important;
    background: var(--drk-entity-soft) !important;
    border-color: var(--drk-entity-border) !important;
}

.page-list-item.drk-entity-themed::before,
.page-list-item.drk-entity-themed::after,
.entity-list-item.drk-entity-themed::before,
.entity-list-item.drk-entity-themed::after,
.entity-list > a.drk-entity-themed::before,
.entity-list > a.drk-entity-themed::after,
.entity-list > div.drk-entity-themed::before,
.entity-list > div.drk-entity-themed::after {
    display: none !important;
}


/* ==========================================================
   12. Dark Mode
   ========================================================== */

html.dark-mode .grid-card.drk-entity-themed,
html.dark-mode .grid-card.drk-entity-card,
html.dark-mode .card.entity-card.drk-entity-themed,
html.dark-mode .card.entity-card.drk-entity-card,
body.dark-mode .grid-card.drk-entity-themed,
body.dark-mode .grid-card.drk-entity-card,
body.dark-mode .card.entity-card.drk-entity-themed,
body.dark-mode .card.entity-card.drk-entity-card {
    background: rgba(255,255,255,0.045) !important;
    border-color: rgba(255,255,255,0.14) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.28) !important;
}

html.dark-mode .grid-card.drk-entity-themed:hover,
html.dark-mode .grid-card.drk-entity-card:hover,
html.dark-mode .card.entity-card.drk-entity-themed:hover,
html.dark-mode .card.entity-card.drk-entity-card:hover,
body.dark-mode .grid-card.drk-entity-themed:hover,
body.dark-mode .grid-card.drk-entity-card:hover,
body.dark-mode .card.entity-card.drk-entity-themed:hover,
body.dark-mode .card.entity-card.drk-entity-card:hover {
    background: var(--drk-entity-soft) !important;
    border-color: var(--drk-entity-border) !important;
}

html.dark-mode .drk-entity-nav-card,
body.dark-mode .drk-entity-nav-card {
    background: rgba(255,255,255,0.045) !important;
    border-color: rgba(255,255,255,0.14) !important;
}

html.dark-mode .drk-entity-nav-card:hover,
body.dark-mode .drk-entity-nav-card:hover {
    background: rgba(176,0,32,0.14) !important;
}

html.dark-mode .page-list-item.drk-entity-themed,
html.dark-mode .entity-list-item.drk-entity-themed,
html.dark-mode .entity-list > a.drk-entity-themed,
html.dark-mode .entity-list > div.drk-entity-themed,
body.dark-mode .page-list-item.drk-entity-themed,
body.dark-mode .entity-list-item.drk-entity-themed,
body.dark-mode .entity-list > a.drk-entity-themed,
body.dark-mode .entity-list > div.drk-entity-themed {
    background:
        linear-gradient(
            90deg,
            var(--drk-entity-soft) 0%,
            rgba(255,255,255,0.035) 44%,
            rgba(255,255,255,0.025) 100%
        ) !important;

    border-color: rgba(255,255,255,0.12) !important;
    border-left-color: var(--drk-entity-mid) !important;
}


/* ==========================================================
   13. Mobile Ansicht
   ========================================================== */

@media screen and (max-width: 900px) {
    .grid-card.drk-entity-themed,
    .grid-card.drk-entity-card,
    .card.entity-card.drk-entity-themed,
    .card.entity-card.drk-entity-card {
        border-radius: 16px !important;
        margin-bottom: 18px !important;
    }

    .drk-entity-themed .entity-card-image,
    .drk-entity-themed .card-cover,
    .drk-entity-themed .image,
    .drk-entity-card .entity-card-image,
    .drk-entity-card .card-cover,
    .drk-entity-card .image {
        min-height: 120px !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .grid-card.drk-entity-themed::before,
    .grid-card.drk-entity-card::before,
    .card.entity-card.drk-entity-themed::before,
    .card.entity-card.drk-entity-card::before {
        width: 95px !important;
        height: 95px !important;
        top: -30px !important;
        right: -24px !important;
    }

    .grid-card.drk-entity-themed::after,
    .grid-card.drk-entity-card::after,
    .card.entity-card.drk-entity-themed::after,
    .card.entity-card.drk-entity-card::after {
        width: 110px !important;
        height: 42px !important;
        top: 78px !important;
        left: -30px !important;
    }

    .drk-entity-no-custom-cover .entity-card-image::before,
    .drk-entity-no-custom-cover .card-cover::before,
    .drk-entity-no-custom-cover .image::before {
        width: 64px !important;
        height: 64px !important;
        font-size: 32px !important;
        border-radius: 17px !important;
    }

    .grid-card.drk-entity-themed h1,
    .grid-card.drk-entity-themed h2,
    .grid-card.drk-entity-themed h3,
    .grid-card.drk-entity-themed h4,
    .grid-card.drk-entity-card h1,
    .grid-card.drk-entity-card h2,
    .grid-card.drk-entity-card h3,
    .grid-card.drk-entity-card h4,
    .card.entity-card.drk-entity-themed h1,
    .card.entity-card.drk-entity-themed h2,
    .card.entity-card.drk-entity-themed h3,
    .card.entity-card.drk-entity-themed h4,
    .card.entity-card.drk-entity-card h1,
    .card.entity-card.drk-entity-card h2,
    .card.entity-card.drk-entity-card h3,
    .card.entity-card.drk-entity-card h4 {
        font-size: 1.22rem !important;
        line-height: 1.25 !important;
    }

    .drk-entity-page-hero {
        margin: 0 0 28px 0 !important;
        padding: 26px 18px !important;
        border-radius: 18px !important;
    }

    .drk-entity-page-hero-content {
        display: block !important;
        text-align: center !important;
    }

    .drk-entity-page-hero-badge {
        width: 64px !important;
        height: 64px !important;
        line-height: 64px !important;

        margin: 0 auto 16px auto !important;

        font-size: 32px !important;
        border-radius: 17px !important;
    }

    .drk-entity-page-hero-label {
        margin-bottom: 9px !important;
        font-size: 0.72rem !important;
    }

    .drk-entity-page-hero h1 {
        font-size: 1.55rem !important;
        line-height: 1.18 !important;
        margin-bottom: 10px !important;
    }

    .drk-entity-page-hero p {
        font-size: 0.96rem !important;
        line-height: 1.42 !important;
    }

    .drk-entity-page-hero::before {
        width: 150px !important;
        height: 150px !important;
        top: -48px !important;
        right: -48px !important;
    }

    .drk-entity-page-hero::after {
        width: 170px !important;
        height: 70px !important;
        left: -44px !important;
        bottom: -36px !important;
    }

    .drk-entity-nav-card {
        min-height: 38px !important;
        padding: 8px 10px 8px 13px !important;
        border-radius: 10px !important;
        font-size: 0.9rem !important;
        margin: 5px 0 !important;
    }

    .drk-entity-nav-card svg {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
    }

    .tri-layout-left .drk-entity-nav-card,
    .tri-layout-left-contents .drk-entity-nav-card,
    .sidebar-page-nav .drk-entity-nav-card,
    .sidebar-page-list .drk-entity-nav-card,
    .book-tree .drk-entity-nav-card,
    .book-content .drk-entity-nav-card,
    .page-nav-list .drk-entity-nav-card {
        font-size: 0.78rem !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .page-list-item.drk-entity-themed,
    .entity-list-item.drk-entity-themed,
    .entity-list > a.drk-entity-themed,
    .entity-list > div.drk-entity-themed {
        border-radius: 14px !important;
        padding: 13px 15px 13px 17px !important;
        margin-bottom: 10px !important;
    }

    .page-list-item.drk-entity-themed:hover,
    .entity-list-item.drk-entity-themed:hover,
    .entity-list > a.drk-entity-themed:hover,
    .entity-list > div.drk-entity-themed:hover {
        transform: none !important;
    }
}
/* ==========================================================
   DRK Entity Fix v16
   Sidebar filigraner, Kapitel einklappbar lassen,
   farbige Quadrate entfernen, Hover-Farbverlauf
   ========================================================== */


/* ==========================================================
   1. Farbige Icon-Quadrate in Listen entfernen
   ========================================================== */

.drk-entity-nav-card .icon,
.drk-entity-nav-card .icon-list-item,
.drk-entity-nav-card .entity-list-item-icon,
.drk-entity-nav-card span[class*="icon"],
.drk-entity-nav-card div[class*="icon"],
.tri-layout-left .icon,
.tri-layout-left-contents .icon,
.sidebar-page-nav .icon,
.sidebar-page-list .icon,
.book-tree .icon,
.book-content .icon,
.page-nav-list .icon {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Leere/kaputte Icon-Kästen ohne Text nicht als Kachel anzeigen */
.drk-entity-nav-card:empty {
    display: none !important;
}


/* ==========================================================
   2. Linke Seitenleiste wieder filigraner machen
   ========================================================== */

.tri-layout-left .drk-entity-nav-card,
.tri-layout-left-contents .drk-entity-nav-card,
.sidebar-page-nav .drk-entity-nav-card,
.sidebar-page-list .drk-entity-nav-card,
.book-tree .drk-entity-nav-card {
    display: block !important;

    min-height: unset !important;

    margin: 1px 0 !important;
    padding: 4px 6px 4px 12px !important;

    border-radius: 6px !important;
    border: none !important;
    border-left: 2px solid rgba(128,128,128,0.28) !important;

    background: transparent !important;
    box-shadow: none !important;

    font-size: 0.86rem !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;

    transform: none !important;
}

/* Keine dicken Kartenbalken in der Seitenleiste */
.tri-layout-left .drk-entity-nav-card::before,
.tri-layout-left-contents .drk-entity-nav-card::before,
.sidebar-page-nav .drk-entity-nav-card::before,
.sidebar-page-list .drk-entity-nav-card::before,
.book-tree .drk-entity-nav-card::before {
    width: 2px !important;
    border-radius: 0 !important;
    opacity: 0.75 !important;
}

/* Sidebar-Hover nur dezent */
.tri-layout-left .drk-entity-nav-card:hover,
.tri-layout-left-contents .drk-entity-nav-card:hover,
.sidebar-page-nav .drk-entity-nav-card:hover,
.sidebar-page-list .drk-entity-nav-card:hover,
.book-tree .drk-entity-nav-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: rgba(230,70,58,0.45) !important;
    background: linear-gradient(
        90deg,
        rgba(176,0,32,0.10) 0%,
        rgba(176,0,32,0.035) 55%,
        transparent 100%
    ) !important;
}


/* ==========================================================
   3. Kapitel-Ausklappen in BookStack nicht blockieren
   ========================================================== */

/* BookStack-Toggle/Expand-Elemente sichtbar lassen */
.tri-layout-left button,
.tri-layout-left summary,
.tri-layout-left details,
.tri-layout-left .toggle,
.tri-layout-left .collapse-toggle,
.tri-layout-left .entity-list-item-toggle,
.tri-layout-left .sidebar-page-nav-toggle,
.book-tree button,
.book-tree summary,
.book-tree details,
.book-tree .toggle,
.book-tree .collapse-toggle,
.book-tree .entity-list-item-toggle,
.book-tree .sidebar-page-nav-toggle {
    display: initial !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Falls BookStack Pfeile/SVGs für Einklappen nutzt */
.tri-layout-left button svg,
.tri-layout-left summary svg,
.tri-layout-left .toggle svg,
.tri-layout-left .collapse-toggle svg,
.book-tree button svg,
.book-tree summary svg,
.book-tree .toggle svg,
.book-tree .collapse-toggle svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 0.85 !important;
}

/* Sidebar-Items nicht so umbauen, dass Tree-Struktur verloren geht */
.tri-layout-left .drk-entity-nav-card,
.tri-layout-left-contents .drk-entity-nav-card,
.book-tree .drk-entity-nav-card {
    overflow: visible !important;
}


/* ==========================================================
   4. Typfarben in Sidebar nur als feine Linie/Iconfarbe
   ========================================================== */

.tri-layout-left .drk-entity-nav-shelf,
.tri-layout-left-contents .drk-entity-nav-shelf,
.book-tree .drk-entity-nav-shelf {
    border-left-color: #cf0026 !important;
}

.tri-layout-left .drk-entity-nav-book,
.tri-layout-left-contents .drk-entity-nav-book,
.book-tree .drk-entity-nav-book {
    border-left-color: #00a86b !important;
}

.tri-layout-left .drk-entity-nav-chapter,
.tri-layout-left-contents .drk-entity-nav-chapter,
.book-tree .drk-entity-nav-chapter {
    border-left-color: #e87900 !important;
    font-weight: 500 !important;
}

.tri-layout-left .drk-entity-nav-page,
.tri-layout-left-contents .drk-entity-nav-page,
.book-tree .drk-entity-nav-page {
    border-left-color: #0b8fd3 !important;
    font-weight: 400 !important;
}


/* ==========================================================
   5. Große Listen-Kacheln: Hover mit passendem Farbverlauf
   ========================================================== */

.drk-entity-nav-card.drk-entity-nav-shelf:hover {
    background: linear-gradient(
        90deg,
        rgba(176,0,32,0.16) 0%,
        rgba(176,0,32,0.075) 48%,
        rgba(176,0,32,0.025) 100%
    ) !important;
    border-color: rgba(230,70,58,0.46) !important;
}

.drk-entity-nav-card.drk-entity-nav-book:hover {
    background: linear-gradient(
        90deg,
        rgba(0,168,107,0.16) 0%,
        rgba(0,168,107,0.075) 48%,
        rgba(0,168,107,0.025) 100%
    ) !important;
    border-color: rgba(0,168,107,0.46) !important;
}

.drk-entity-nav-card.drk-entity-nav-chapter:hover {
    background: linear-gradient(
        90deg,
        rgba(232,121,0,0.16) 0%,
        rgba(232,121,0,0.075) 48%,
        rgba(232,121,0,0.025) 100%
    ) !important;
    border-color: rgba(232,121,0,0.46) !important;
}

.drk-entity-nav-card.drk-entity-nav-page:hover {
    background: linear-gradient(
        90deg,
        rgba(11,143,211,0.16) 0%,
        rgba(11,143,211,0.075) 48%,
        rgba(11,143,211,0.025) 100%
    ) !important;
    border-color: rgba(11,143,211,0.46) !important;
}


/* ==========================================================
   6. Große Grid-Karten: Hover mit eigener Kartenfarbe
   ========================================================== */

.grid-card.drk-entity-card:hover,
.card.entity-card.drk-entity-card:hover,
.grid-card.drk-entity-themed:hover,
.card.entity-card.drk-entity-themed:hover {
    background: linear-gradient(
        135deg,
        var(--drk-entity-soft) 0%,
        rgba(128,128,128,0.075) 48%,
        rgba(128,128,128,0.045) 100%
    ) !important;

    border-color: var(--drk-entity-mid) !important;
}


/* ==========================================================
   7. Dark Mode Sidebar etwas ruhiger
   ========================================================== */

html.dark-mode .tri-layout-left .drk-entity-nav-card,
html.dark-mode .tri-layout-left-contents .drk-entity-nav-card,
html.dark-mode .sidebar-page-nav .drk-entity-nav-card,
html.dark-mode .sidebar-page-list .drk-entity-nav-card,
html.dark-mode .book-tree .drk-entity-nav-card,
body.dark-mode .tri-layout-left .drk-entity-nav-card,
body.dark-mode .tri-layout-left-contents .drk-entity-nav-card,
body.dark-mode .sidebar-page-nav .drk-entity-nav-card,
body.dark-mode .sidebar-page-list .drk-entity-nav-card,
body.dark-mode .book-tree .drk-entity-nav-card {
    background: transparent !important;
    border-color: rgba(255,255,255,0.16) !important;
}

html.dark-mode .tri-layout-left .drk-entity-nav-card:hover,
html.dark-mode .tri-layout-left-contents .drk-entity-nav-card:hover,
html.dark-mode .sidebar-page-nav .drk-entity-nav-card:hover,
html.dark-mode .sidebar-page-list .drk-entity-nav-card:hover,
html.dark-mode .book-tree .drk-entity-nav-card:hover,
body.dark-mode .tri-layout-left .drk-entity-nav-card:hover,
body.dark-mode .tri-layout-left-contents .drk-entity-nav-card:hover,
body.dark-mode .sidebar-page-nav .drk-entity-nav-card:hover,
body.dark-mode .sidebar-page-list .drk-entity-nav-card:hover,
body.dark-mode .book-tree .drk-entity-nav-card:hover {
    background: linear-gradient(
        90deg,
        rgba(176,0,32,0.14) 0%,
        rgba(176,0,32,0.055) 58%,
        transparent 100%
    ) !important;
}
/* ==========================================================
   DRK Entity Fix v18
   Filigrane BookStack-Seitenleiste ohne JS-Umbau
   Kapitel bleiben ausklappbar
   ========================================================== */


/* Linke Seitenleiste grundsätzlich schlanker */
.tri-layout-left a,
.tri-layout-left-contents a,
.sidebar-page-nav a,
.sidebar-page-list a,
.book-tree a {
    border-radius: 7px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;

    transition:
        background 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease !important;
}

/* Dezent farbiger Hover, ohne Kachel-Look */
.tri-layout-left a:hover,
.tri-layout-left-contents a:hover,
.sidebar-page-nav a:hover,
.sidebar-page-list a:hover,
.book-tree a:hover {
    background: linear-gradient(
        90deg,
        rgba(176,0,32,0.13) 0%,
        rgba(176,0,32,0.055) 55%,
        transparent 100%
    ) !important;

    text-decoration: none !important;
}

/* Aktiver Eintrag etwas klarer */
.tri-layout-left a.active,
.tri-layout-left-contents a.active,
.sidebar-page-nav a.active,
.sidebar-page-list a.active,
.book-tree a.active,
.tri-layout-left .active > a,
.tri-layout-left-contents .active > a,
.sidebar-page-nav .active > a,
.sidebar-page-list .active > a,
.book-tree .active > a {
    background: rgba(176,0,32,0.16) !important;
    color: #cf0026 !important;
    font-weight: 650 !important;
}

/* Icons in der Sidebar etwas sichtbarer, aber nicht klobig */
.tri-layout-left svg,
.tri-layout-left-contents svg,
.sidebar-page-nav svg,
.sidebar-page-list svg,
.book-tree svg {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    opacity: 0.82 !important;
}

/* Ausklapp-Pfeile / Buttons ausdrücklich nicht verstecken */
.tri-layout-left button,
.tri-layout-left-contents button,
.sidebar-page-nav button,
.sidebar-page-list button,
.book-tree button,
.tri-layout-left summary,
.tri-layout-left-contents summary,
.sidebar-page-nav summary,
.sidebar-page-list summary,
.book-tree summary {
    display: initial !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Keine Kartenoptik in der Sidebar erzwingen */
.tri-layout-left .drk-entity-nav-card,
.tri-layout-left-contents .drk-entity-nav-card,
.sidebar-page-nav .drk-entity-nav-card,
.sidebar-page-list .drk-entity-nav-card,
.book-tree .drk-entity-nav-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: initial !important;
    margin: initial !important;
    min-height: initial !important;
    border-radius: initial !important;
}

/* Falls durch alte JS-Läufe noch leere Elemente übrig sind */
.drk-entity-nav-card:empty,
.drk-entity-nav-card[title=""],
.drk-entity-nav-card:not(:has(*)):not(:has(textarea)) {
    display: none !important;
}





/* ==========================================================
   DRK Entity Fix v19
   BookStack Chapter-Expansion nicht als Kachel darstellen
   ========================================================== */

.chapter-expansion.drk-entity-nav-card,
.chapter-expansion.drk-entity-list-card,
.chapter-expansion.drk-entity-nav-page,
.chapter-expansion.drk-entity-nav-chapter {
    display: block !important;

    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    transform: none !important;
}

/* Das kleine falsche Icon im leeren Ausklappbereich verstecken */
.chapter-expansion > .icon,
.chapter-expansion > span.icon,
.chapter-expansion > span[class*="icon"] {
    display: none !important;
}

/* Inhalt des ausgeklappten Kapitels normal lassen */
.chapter-expansion .content,
.chapter-expansion [component="chapter-contents"] {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/* ==========================================================
   DRK Entity Fix v20
   Kapitel-Kachel mit eingebetteter ausgeklappter Seitenliste
   ========================================================== */


/* ==========================================================
   1. Kapitel-Kacheln schöner und ohne farbigen Icon-Kasten
   ========================================================== */

a.chapter.drk-entity-nav-card,
a.chapter.entity-list-item.drk-entity-nav-card,
.entity-list a.chapter.drk-entity-nav-card {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    margin: 14px 0 0 0 !important;
    padding: 14px 18px 14px 18px !important;

    border-radius: 14px !important;
    border: 1px solid rgba(232,121,0,0.36) !important;
    border-left: 5px solid #e87900 !important;

    background: rgba(232,121,0,0.075) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.10) !important;

    color: inherit !important;
    text-decoration: none !important;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease !important;
}

/* Hover mit orangem Verlauf */
a.chapter.drk-entity-nav-card:hover,
a.chapter.entity-list-item.drk-entity-nav-card:hover,
.entity-list a.chapter.drk-entity-nav-card:hover {
    background: linear-gradient(
        90deg,
        rgba(232,121,0,0.18) 0%,
        rgba(232,121,0,0.095) 48%,
        rgba(232,121,0,0.035) 100%
    ) !important;

    border-color: rgba(232,121,0,0.55) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.16) !important;
    transform: translateY(-1px) !important;
}

/* BookStack-Icon im Kapitel: kein farbiger Kasten */
a.chapter.drk-entity-nav-card .icon,
a.chapter.drk-entity-nav-card .icon.text-chapter,
a.chapter.drk-entity-nav-card span.icon,
a.chapter.drk-entity-nav-card span[class*="icon"],
a.chapter.entity-list-item.drk-entity-nav-card .icon,
a.chapter.entity-list-item.drk-entity-nav-card span.icon {
    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    padding: 0 !important;
    margin: 0 12px 0 0 !important;

    color: #e87900 !important;
}

/* Pseudo-Hintergrund des BookStack-Icons entfernen */
a.chapter.drk-entity-nav-card .icon::before,
a.chapter.drk-entity-nav-card .icon::after,
a.chapter.drk-entity-nav-card .icon.text-chapter::before,
a.chapter.drk-entity-nav-card .icon.text-chapter::after,
a.chapter.drk-entity-nav-card span[class*="icon"]::before,
a.chapter.drk-entity-nav-card span[class*="icon"]::after {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* SVG selbst bleibt sichtbar */
a.chapter.drk-entity-nav-card svg {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;

    color: #e87900 !important;
    fill: currentColor !important;
    opacity: 0.95 !important;
}

/* Kapitel-Text */
a.chapter.drk-entity-nav-card .content,
a.chapter.drk-entity-nav-card .entity-list-item-name,
a.chapter.drk-entity-nav-card h4 {
    min-width: 0 !important;
}

a.chapter.drk-entity-nav-card h4,
a.chapter.drk-entity-nav-card .entity-list-item-name {
    margin: 0 !important;

    color: inherit !important;
    font-size: 1.22rem !important;
    line-height: 1.25 !important;
    font-weight: 650 !important;
}


/* ==========================================================
   2. Ausgeklappter Bereich direkt an Kapitel-Kachel andocken
   ========================================================== */

/*
   BookStack-Struktur:
   a.chapter.has-children
   + div.chapter-expansion
*/

a.chapter.has-children + .chapter-expansion,
a.chapter.drk-entity-nav-chapter + .chapter-expansion,
a.chapter.entity-list-item + .chapter-expansion {
    margin: -1px 0 16px 0 !important;
    padding: 14px 18px 16px 42px !important;

    border: 1px solid rgba(232,121,0,0.28) !important;
    border-top: none !important;
    border-left: 5px solid rgba(232,121,0,0.70) !important;

    border-radius: 0 0 14px 14px !important;

    background: linear-gradient(
        180deg,
        rgba(232,121,0,0.065) 0%,
        rgba(128,128,128,0.035) 100%
    ) !important;

    box-shadow: 0 10px 20px rgba(0,0,0,0.10) !important;

    overflow: hidden !important;
}

/* Wenn BookStack den Bereich geschlossen hat, nicht erzwingen */
a.chapter.has-children + .chapter-expansion[hidden],
a.chapter.has-children + .chapter-expansion.hidden,
a.chapter.has-children + .chapter-expansion[style*="display: none"] {
    display: none !important;
}

/* Icon/Leerbereich im Expansion-Container entfernen */
.chapter-expansion > .icon,
.chapter-expansion > span.icon,
.chapter-expansion > span[class*="icon"],
.chapter-expansion > .svg-icon,
.chapter-expansion > svg {
    display: none !important;
}

/* Inhalt des ausgeklappten Kapitels */
.chapter-expansion .content,
.chapter-expansion [component="chapter-contents"] {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   3. Seiten innerhalb eines ausgeklappten Kapitels als kleine Kacheln
   ========================================================== */

.chapter-expansion a,
.chapter-expansion .entity-list-item,
.chapter-expansion .page,
.chapter-expansion [data-entity-type="page"] {
    position: relative !important;

    display: block !important;

    margin: 8px 0 !important;
    padding: 11px 14px 11px 18px !important;

    border-radius: 11px !important;
    border: 1px solid rgba(11,143,211,0.28) !important;
    border-left: 4px solid #0b8fd3 !important;

    background: rgba(11,143,211,0.055) !important;
    box-shadow: none !important;

    color: inherit !important;
    text-decoration: none !important;

    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease !important;
}

/* Hover für Seiten im ausgeklappten Kapitel */
.chapter-expansion a:hover,
.chapter-expansion .entity-list-item:hover,
.chapter-expansion .page:hover,
.chapter-expansion [data-entity-type="page"]:hover {
    background: linear-gradient(
        90deg,
        rgba(11,143,211,0.16) 0%,
        rgba(11,143,211,0.08) 50%,
        rgba(11,143,211,0.025) 100%
    ) !important;

    border-color: rgba(11,143,211,0.48) !important;
    transform: translateX(2px) !important;
    text-decoration: none !important;
}

/* Seiten-Icon in Expansion: klein und ohne Kasten */
.chapter-expansion a .icon,
.chapter-expansion a span.icon,
.chapter-expansion a span[class*="icon"],
.chapter-expansion .entity-list-item .icon,
.chapter-expansion .entity-list-item span.icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 0 9px 0 0 !important;

    color: #0b8fd3 !important;
}

.chapter-expansion a .icon::before,
.chapter-expansion a .icon::after,
.chapter-expansion a span[class*="icon"]::before,
.chapter-expansion a span[class*="icon"]::after {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Seiten-Icon SVG */
.chapter-expansion a svg,
.chapter-expansion .entity-list-item svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;

    color: #0b8fd3 !important;
    fill: currentColor !important;
    opacity: 0.9 !important;
}

/* Seitentitel in Expansion */
.chapter-expansion h4,
.chapter-expansion .entity-list-item-name,
.chapter-expansion .break-text {
    margin: 0 0 4px 0 !important;

    color: inherit !important;
    font-size: 0.98rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

/* Beschreibung in Expansion etwas dezenter */
.chapter-expansion .entity-list-item-snippet,
.chapter-expansion .entity-list-item-description,
.chapter-expansion .text-muted,
.chapter-expansion p {
    margin: 0 !important;

    font-size: 0.86rem !important;
    line-height: 1.35 !important;
    opacity: 0.75 !important;

    max-height: 2.8em !important;
    overflow: hidden !important;
}


/* ==========================================================
   4. Dark Mode
   ========================================================== */

html.dark-mode a.chapter.drk-entity-nav-card,
body.dark-mode a.chapter.drk-entity-nav-card {
    background: rgba(232,121,0,0.09) !important;
    border-color: rgba(232,121,0,0.36) !important;
}

html.dark-mode a.chapter.has-children + .chapter-expansion,
body.dark-mode a.chapter.has-children + .chapter-expansion {
    background: linear-gradient(
        180deg,
        rgba(232,121,0,0.08) 0%,
        rgba(255,255,255,0.025) 100%
    ) !important;

    border-color: rgba(232,121,0,0.28) !important;
}

html.dark-mode .chapter-expansion a,
html.dark-mode .chapter-expansion .entity-list-item,
body.dark-mode .chapter-expansion a,
body.dark-mode .chapter-expansion .entity-list-item {
    background: rgba(11,143,211,0.075) !important;
    border-color: rgba(11,143,211,0.32) !important;
}


/* ==========================================================
   5. Mobile
   ========================================================== */

@media screen and (max-width: 900px) {
    a.chapter.drk-entity-nav-card,
    a.chapter.entity-list-item.drk-entity-nav-card {
        padding: 12px 14px !important;
        border-radius: 12px !important;
    }

    a.chapter.drk-entity-nav-card h4,
    a.chapter.drk-entity-nav-card .entity-list-item-name {
        font-size: 1.08rem !important;
    }

    a.chapter.has-children + .chapter-expansion,
    a.chapter.drk-entity-nav-chapter + .chapter-expansion,
    a.chapter.entity-list-item + .chapter-expansion {
        padding: 12px 12px 14px 24px !important;
        border-radius: 0 0 12px 12px !important;
    }

    .chapter-expansion a,
    .chapter-expansion .entity-list-item {
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }
}

/* ==========================================================
   DRK Entity Fix v21
   Farbige Icon-Hintergründe global entfernen
   Nur das Icon selbst bleibt farbig
   ========================================================== */

/* Alle Icon-Wrapper in Entity-Karten und Listen neutralisieren */
.drk-entity-card .icon,
.drk-entity-card .icon-list-item,
.drk-entity-card .entity-list-item-icon,
.drk-entity-card span[class*="icon"],
.drk-entity-card div[class*="icon"],

.drk-entity-nav-card .icon,
.drk-entity-nav-card .icon-list-item,
.drk-entity-nav-card .entity-list-item-icon,
.drk-entity-nav-card span[class*="icon"],
.drk-entity-nav-card div[class*="icon"],

.drk-entity-list-card .icon,
.drk-entity-list-card .icon-list-item,
.drk-entity-list-card .entity-list-item-icon,
.drk-entity-list-card span[class*="icon"],
.drk-entity-list-card div[class*="icon"],

.entity-list-item .icon,
.entity-list-item .icon-list-item,
.entity-list-item .entity-list-item-icon,
.entity-list-item span[class*="icon"],
.entity-list-item div[class*="icon"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: none !important;
    box-shadow: none !important;
    outline: none !important;

    border-radius: 0 !important;

    padding: 0 !important;
}

/* Pseudo-Hintergründe an Icons entfernen */
.drk-entity-card .icon::before,
.drk-entity-card .icon::after,
.drk-entity-card span[class*="icon"]::before,
.drk-entity-card span[class*="icon"]::after,

.drk-entity-nav-card .icon::before,
.drk-entity-nav-card .icon::after,
.drk-entity-nav-card span[class*="icon"]::before,
.drk-entity-nav-card span[class*="icon"]::after,

.drk-entity-list-card .icon::before,
.drk-entity-list-card .icon::after,
.drk-entity-list-card span[class*="icon"]::before,
.drk-entity-list-card span[class*="icon"]::after,

.entity-list-item .icon::before,
.entity-list-item .icon::after,
.entity-list-item span[class*="icon"]::before,
.entity-list-item span[class*="icon"]::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* SVG selbst sichtbar und farbig lassen */
.drk-entity-card svg,
.drk-entity-nav-card svg,
.drk-entity-list-card svg,
.entity-list-item svg {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    fill: currentColor !important;
}

/* Optional: BookStack-Iconfarbe nach Typ beibehalten */
.drk-entity-nav-page svg,
.drk-entity-list-page svg {
    color: #0b8fd3 !important;
}

.drk-entity-nav-chapter svg,
.drk-entity-list-chapter svg {
    color: #e87900 !important;
}

.drk-entity-nav-book svg,
.drk-entity-list-book svg {
    color: #00a86b !important;
}

.drk-entity-nav-shelf svg,
.drk-entity-list-shelf svg {
    color: #cf0026 !important;
}






/* ==========================================================
   DRK Color Picker in BookStack Edit-Seiten
   ========================================================== */
/* ==========================================================
   DRK Entity Custom Colors aus Tag "anzeigefarbe"
   ========================================================== */

.drk-entity-custom-color .entity-card-image,
.drk-entity-custom-color .card-cover,
.drk-entity-custom-color .image {
    background: linear-gradient(
        135deg,
        var(--drk-entity-main) 0%,
        var(--drk-entity-mid) 58%,
        var(--drk-entity-dark) 100%
    ) !important;
}

.drk-entity-custom-color:hover {
    background: linear-gradient(
        135deg,
        var(--drk-entity-soft) 0%,
        rgba(128,128,128,0.075) 48%,
        rgba(128,128,128,0.045) 100%
    ) !important;

    border-color: var(--drk-entity-mid) !important;
}

.drk-entity-page-hero.drk-entity-custom-color {
    background: linear-gradient(
        135deg,
        var(--drk-entity-main) 0%,
        var(--drk-entity-mid) 58%,
        var(--drk-entity-dark) 100%
    ) !important;
}


/* ==========================================================
   DRK Entity Fix v25
   Anzeigefarbe für Kapitel endgültig erzwingen
   ========================================================== */

/* Kapitel-Kachel mit eigener Anzeigefarbe */
.entity-list a.chapter.drk-entity-custom-color,
.entity-list a.chapter.entity-list-item.drk-entity-custom-color,
.entity-list a.chapter.drk-entity-nav-card.drk-entity-custom-color,
.content-wrap a.chapter.drk-entity-custom-color,
.entity-content a.chapter.drk-entity-custom-color {
    border-color: var(--drk-entity-border) !important;
    border-left-color: var(--drk-entity-mid) !important;

    background: var(--drk-entity-soft) !important;

    box-shadow: 0 8px 18px rgba(0,0,0,0.10) !important;
}

/* Kapitel-Hover mit eigener Farbe */
.entity-list a.chapter.drk-entity-custom-color:hover,
.entity-list a.chapter.entity-list-item.drk-entity-custom-color:hover,
.entity-list a.chapter.drk-entity-nav-card.drk-entity-custom-color:hover,
.content-wrap a.chapter.drk-entity-custom-color:hover,
.entity-content a.chapter.drk-entity-custom-color:hover {
    background: linear-gradient(
        90deg,
        var(--drk-entity-soft) 0%,
        rgba(128,128,128,0.075) 50%,
        rgba(128,128,128,0.025) 100%
    ) !important;

    border-color: var(--drk-entity-border) !important;
    border-left-color: var(--drk-entity-mid) !important;
}

/* Kapitel-Icon mit eigener Farbe */
.entity-list a.chapter.drk-entity-custom-color svg,
.entity-list a.chapter.drk-entity-custom-color .icon,
.entity-list a.chapter.drk-entity-custom-color span.icon,
.entity-list a.chapter.drk-entity-custom-color span[class*="icon"],
.content-wrap a.chapter.drk-entity-custom-color svg,
.content-wrap a.chapter.drk-entity-custom-color .icon,
.content-wrap a.chapter.drk-entity-custom-color span.icon,
.content-wrap a.chapter.drk-entity-custom-color span[class*="icon"] {
    color: var(--drk-entity-mid) !important;
    fill: currentColor !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: none !important;
    box-shadow: none !important;
}

/* Ausgeklappter Bereich nach farbigem Kapitel */
.entity-list a.chapter.drk-entity-custom-color + .chapter-expansion,
.content-wrap a.chapter.drk-entity-custom-color + .chapter-expansion,
.entity-content a.chapter.drk-entity-custom-color + .chapter-expansion {
    border-color: var(--drk-entity-border) !important;
    border-left-color: var(--drk-entity-mid) !important;

    background: linear-gradient(
        180deg,
        var(--drk-entity-soft) 0%,
        rgba(128,128,128,0.035) 100%
    ) !important;
}


/* ==========================================================
   DRK Entity Fix v26
   Custom-Anzeigefarbe für ausgeklappte Kapitelbereiche
   ========================================================== */

.chapter-expansion.drk-entity-custom-color {
    border-color: var(--drk-entity-border) !important;
    border-left-color: var(--drk-entity-mid) !important;

    background: linear-gradient(
        180deg,
        var(--drk-entity-soft) 0%,
        rgba(128,128,128,0.035) 100%
    ) !important;
}

/* Seiten innerhalb eines farbigen Kapitels leicht an Kapitel-Farbe anlehnen */
.chapter-expansion.drk-entity-custom-color a,
.chapter-expansion.drk-entity-custom-color .entity-list-item,
.chapter-expansion.drk-entity-custom-color .page,
.chapter-expansion.drk-entity-custom-color [data-entity-type="page"] {
    border-color: var(--drk-entity-border) !important;
    border-left-color: var(--drk-entity-mid) !important;

    background: rgba(128,128,128,0.035) !important;
}

/* Hover der Seiten im ausgeklappten Bereich */
.chapter-expansion.drk-entity-custom-color a:hover,
.chapter-expansion.drk-entity-custom-color .entity-list-item:hover,
.chapter-expansion.drk-entity-custom-color .page:hover,
.chapter-expansion.drk-entity-custom-color [data-entity-type="page"]:hover {
    background: linear-gradient(
        90deg,
        var(--drk-entity-soft) 0%,
        rgba(128,128,128,0.075) 50%,
        rgba(128,128,128,0.025) 100%
    ) !important;

    border-color: var(--drk-entity-border) !important;
    border-left-color: var(--drk-entity-mid) !important;
}

/* Icons innerhalb des farbigen Ausklappbereichs */
.chapter-expansion.drk-entity-custom-color svg,
.chapter-expansion.drk-entity-custom-color .icon,
.chapter-expansion.drk-entity-custom-color span.icon,
.chapter-expansion.drk-entity-custom-color span[class*="icon"] {
    color: var(--drk-entity-mid) !important;
    fill: currentColor !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   DRK Entity Fix v27
   Ausgeklappte Kapitelbereiche endgültig mit Anzeigefarbe
   ========================================================== */

.chapter-expansion.drk-chapter-expansion-custom-color,
.chapter-expansion.drk-entity-custom-color.drk-chapter-expansion-custom-color {
    border-color: var(--drk-entity-border) !important;
    border-left-color: var(--drk-entity-mid) !important;

    background: linear-gradient(
        180deg,
        var(--drk-entity-soft) 0%,
        rgba(128,128,128,0.035) 100%
    ) !important;

    box-shadow: 0 10px 20px rgba(0,0,0,0.10) !important;
}

/* Alle alten orangen Regeln im Expansion-Bereich überschreiben */
.chapter-expansion.drk-chapter-expansion-custom-color::before,
.chapter-expansion.drk-chapter-expansion-custom-color::after {
    background: transparent !important;
    border-color: var(--drk-entity-mid) !important;
}

/* Seiten innerhalb des farbigen Ausklappbereichs */
.chapter-expansion.drk-chapter-expansion-custom-color a,
.chapter-expansion.drk-chapter-expansion-custom-color .entity-list-item,
.chapter-expansion.drk-chapter-expansion-custom-color .page,
.chapter-expansion.drk-chapter-expansion-custom-color [data-entity-type="page"] {
    border-color: var(--drk-entity-border) !important;
    border-left-color: var(--drk-entity-mid) !important;

    background: rgba(128,128,128,0.035) !important;
}

/* Hover der Seiten */
.chapter-expansion.drk-chapter-expansion-custom-color a:hover,
.chapter-expansion.drk-chapter-expansion-custom-color .entity-list-item:hover,
.chapter-expansion.drk-chapter-expansion-custom-color .page:hover,
.chapter-expansion.drk-chapter-expansion-custom-color [data-entity-type="page"]:hover {
    background: linear-gradient(
        90deg,
        var(--drk-entity-soft) 0%,
        rgba(128,128,128,0.075) 52%,
        rgba(128,128,128,0.025) 100%
    ) !important;

    border-color: var(--drk-entity-border) !important;
    border-left-color: var(--drk-entity-mid) !important;
}

/* Icons im ausgeklappten Bereich */
.chapter-expansion.drk-chapter-expansion-custom-color svg,
.chapter-expansion.drk-chapter-expansion-custom-color .icon,
.chapter-expansion.drk-chapter-expansion-custom-color span.icon,
.chapter-expansion.drk-chapter-expansion-custom-color span[class*="icon"] {
    color: var(--drk-entity-mid) !important;
    fill: currentColor !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/* ==========================================================
   DRK Entity Fix
   Anzeigefarbe für Seiten und Titel-Hero
   ========================================================== */

/* Hero-/Titelbereiche auf Seiten mit Anzeigefarbe */
.drk-page-has-custom-color .drk-start-hero,
.drk-page-has-custom-color .drk-forms-hero,
.drk-page-has-custom-color .drk-page-hero,
.drk-page-has-custom-color #bkmrk-template-hero .drk-start-hero,
.drk-page-has-custom-color table#bkmrk-template-hero td,
.drk-page-has-custom-color [class*="drk"][class*="hero"] {
    background: linear-gradient(
        135deg,
        var(--drk-entity-main) 0%,
        var(--drk-entity-mid) 58%,
        var(--drk-entity-dark) 100%
    ) !important;

    border-color: var(--drk-entity-border) !important;
}

/* Seiten-Kacheln in Kapitel-Ausklappungen mit eigener Anzeigefarbe */
.chapter-expansion a.drk-entity-custom-color,
.chapter-expansion .entity-list-item.drk-entity-custom-color,
.chapter-expansion .page.drk-entity-custom-color,
.chapter-expansion [data-entity-type="page"].drk-entity-custom-color {
    border-color: var(--drk-entity-border) !important;
    border-left-color: var(--drk-entity-mid) !important;

    background: var(--drk-entity-soft) !important;
}

.chapter-expansion a.drk-entity-custom-color:hover,
.chapter-expansion .entity-list-item.drk-entity-custom-color:hover,
.chapter-expansion .page.drk-entity-custom-color:hover,
.chapter-expansion [data-entity-type="page"].drk-entity-custom-color:hover {
    background: linear-gradient(
        90deg,
        var(--drk-entity-soft) 0%,
        rgba(128,128,128,0.075) 55%,
        rgba(128,128,128,0.025) 100%
    ) !important;

    border-color: var(--drk-entity-border) !important;
    border-left-color: var(--drk-entity-mid) !important;
}

/* Icons in Seiten-Kacheln mit eigener Farbe */
.chapter-expansion a.drk-entity-custom-color svg,
.chapter-expansion .entity-list-item.drk-entity-custom-color svg,
.chapter-expansion a.drk-entity-custom-color .icon,
.chapter-expansion .entity-list-item.drk-entity-custom-color .icon {
    color: var(--drk-entity-mid) !important;
    fill: currentColor !important;
}



/* ==========================================================
   DRK Entity Fix
   Verhindert globale Seiten-Gradienten durch Custom-Farben
   ========================================================== */

html.drk-entity-custom-color,
body.drk-entity-custom-color,
main.drk-entity-custom-color,
.content-wrap.drk-entity-custom-color,
.page-content.drk-entity-custom-color {
    background: inherit !important;
    border-color: inherit !important;
    box-shadow: none !important;
}

html.drk-entity-custom-color:hover,
body.drk-entity-custom-color:hover,
main.drk-entity-custom-color:hover,
.content-wrap.drk-entity-custom-color:hover,
.page-content.drk-entity-custom-color:hover {
    background: inherit !important;
    border-color: inherit !important;
    box-shadow: none !important;
    transform: none !important;
}



/* ==========================================================
   DRK Shelf-/Book-Hero kompakter und volle Breite
   ========================================================== */

/* Hero immer über die gesamte verfügbare Inhaltsbreite ziehen */
.drk-entity-page-hero {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 28px !important;

    padding: 28px 32px !important;

    border-radius: 22px 22px 46px 22px !important;
}

/* Inhalt im Hero nicht künstlich begrenzen */
.drk-entity-page-hero-content {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Überschrift kleiner und einheitlicher */
.drk-entity-page-hero h1 {
    font-size: 1.85rem !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
}

/* Beschreibung etwas dezenter */
.drk-entity-page-hero p {
    font-size: 0.96rem !important;
    line-height: 1.38 !important;
}

/* Badge/Icon etwas kleiner */
.drk-entity-page-hero-badge {
    width: 66px !important;
    height: 66px !important;
    line-height: 66px !important;

    font-size: 34px !important;
    border-radius: 18px !important;
}

/* Label kleiner */
.drk-entity-page-hero-label {
    font-size: 0.72rem !important;
    padding: 4px 9px !important;
    margin-bottom: 8px !important;
}

/* Falls BookStack auf Shelf-Seiten eine andere Inhaltsbreite setzt */
.content-wrap .drk-entity-page-hero,
.page-content .drk-entity-page-hero,
.entity-content .drk-entity-page-hero,
main .drk-entity-page-hero {
    width: 100% !important;
    max-width: 100% !important;
}

/* Mobile weiterhin sauber */
@media screen and (max-width: 900px) {
    .drk-entity-page-hero {
        padding: 22px 18px !important;
        margin-bottom: 24px !important;
        border-radius: 18px !important;
    }

    .drk-entity-page-hero h1 {
        font-size: 1.42rem !important;
        line-height: 1.16 !important;
    }

    .drk-entity-page-hero p {
        font-size: 0.9rem !important;
    }

    .drk-entity-page-hero-badge {
        width: 56px !important;
        height: 56px !important;
        line-height: 56px !important;
        font-size: 28px !important;
        border-radius: 15px !important;
    }
}


/* ==========================================================
   DRK Shelves Übersicht: Abschnitte
   Organisation / Material / Checklisten / Weitere
   ========================================================== */

.drk-original-shelf-grid-hidden {
    display: none !important;
}

.drk-shelf-sections-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

.drk-shelf-section {
    margin: 0 0 38px 0 !important;
}

.drk-shelf-section-heading {
    margin: 0 0 16px 0 !important;
    padding: 0 0 10px 0 !important;

    border-bottom: 1px solid rgba(176, 0, 32, 0.30) !important;
}

.drk-shelf-section-heading h2 {
    margin: 0 !important;

    color: inherit !important;
    font-size: 1.28rem !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
}

.drk-shelf-section-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
}

/* Karten in Abschnitts-Grids sauber halten */
.drk-shelf-section-grid .grid-card,
.drk-shelf-section-grid .card.entity-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Optional: erste Gruppe etwas prominenter */
.drk-shelf-section:first-child .drk-shelf-section-heading h2::before {
    content: "📌 ";
}

/* Mobile */
@media screen and (max-width: 900px) {
    .drk-shelf-section {
        margin-bottom: 30px !important;
    }

    .drk-shelf-section-heading h2 {
        font-size: 1.14rem !important;
    }

    .drk-shelf-section-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}