/* ==========================================================================
   INHALTSSEITEN mit Seitenleiste (Projekte, Blog, News, Termine)
   Übernimmt das Aussehen der bisherigen, nachgeladenen Seiten.
   Gehört zu tools/build.mjs und js/inhalt.js
   ========================================================================== */

/* Milchglas-Rahmen um Seitenleiste und Inhalt */
body.ct-page .themes-container {
    position: relative !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(15px) brightness(1.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    border-radius: 15px !important;
    z-index: 1 !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

body.ct-page .themes-sidebar {
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 12px !important;
}

body.ct-page .themes-content,
body.ct-page .sidebar-scroll-area,
body.ct-page #themes-content,
body.ct-page .sidebar-header {
    background: transparent !important;
}

/* Einträge der Seitenleiste sind echte Links */
#themes-list li a {
    display: block;
    color: inherit;
    text-decoration: none;
}

#themes-list li { cursor: pointer; }

/* Farben für die Brotkrumen außerhalb der Shop-Rahmen */
.ct-container .lx-crumbs {
    --sh-muted: #5d655f;
    --sh-green: #2d6a4f;
    margin: 0 0 6px;
}

.ct-container .lx-crumbs a { color: #2d6a4f; }

/* Projektübersicht */
.ct-group {
    margin: 28px 0 14px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
}

.ct-grid .lx-teaser { display: block; }
.ct-grid .sh-card-body { padding-bottom: 14px; }
.ct-grid .sh-facts { margin-top: 10px; }

/* ---------- Einzelseiten (Über uns, Kontakt, Impressum, ...) ---------- */
/* Brotkrumen stehen als erste Zeile im Textteil; das Zierband links schließt oben an die Kopfzeile an */
.ct-legacy .ct-legacy-crumbs {
    --sh-muted: #5d655f;
    --sh-green: #2d6a4f;
    margin: 0 0 6px;
    padding-top: 8px;
}

.ct-legacy .ct-legacy-crumbs a { color: #2d6a4f; }


/* ---------- Reiter-Navigation der Inhaltsseiten (statt Seitenleiste) ---------- */
.ct-tabs { margin: 8px 0 4px; }

.ct-tabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-tabs li { margin: 0; padding: 0; }

.ct-tabs a {
    display: block;
    padding: 7px 14px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.3;
    color: #1f2420;
    text-decoration: none;
    background: #fff;
    border: 1px solid #d9ddd6;
    border-radius: 999px;
}

.ct-tabs a:hover { border-color: #2d6a4f; color: #2d6a4f; }

.ct-tabs li.active a {
    color: #fff;
    background: #2d6a4f;
    border-color: #2d6a4f;
}

.ct-tab-date { margin-left: 4px; font-size: 0.8em; opacity: 0.75; }

.ct-tabs a:focus-visible { outline: 3px solid #1b6ef3; outline-offset: 2px; }

/* Ohne Seitenleiste nutzt der Text die ganze Breite */
body.ct-page .ct-container .themes-content { padding-right: 20px; }

/* Auf schmalen Bildschirmen bleibt auch der zweispaltige Text (News) einspaltig lesbar */
@media (max-width: 900px) {
    body.ct-page .themes-body.grid-layout { column-count: 1; }
}

/* Ohne Seitenleiste braucht der Text auf dem Handy keinen Abstand nach oben */
@media (max-width: 900px) {
    body.ct-page #themes-content { margin-top: 0 !important; }
}


/* Literaturverweise: kleiner gesetzt wie im Pflanzenlexikon.
   Im Text mit <p class="literatur"> auszeichnen. */
body.ct-page .themes-body p.literatur {
    margin-top: 1.2rem;
    padding-top: 0.6rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #5d655f;
    text-align: left;
    hyphens: manual;
    border-top: 1px solid #d9ddd6;
}

/* Links im Fließtext der Inhaltsseiten (Blog, Projekte, News): wie die Glossar-Links, gepunktet unterstrichen */
body.ct-page .themes-body a:not(.gl-link):not([class]) {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-color: #2d6a4f;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
body.ct-page .themes-body a:not(.gl-link):not([class]):hover,
body.ct-page .themes-body a:not(.gl-link):not([class]):focus-visible {
    color: #2d6a4f;
    text-decoration-style: solid;
}