/* =============================================================
   GardenPortal Schnittbibliothek v0.7 – Konfiguration und Layout
   Alle Selektoren auf #gp-schnittbibliothek begrenzt.
   ============================================================= */
#gp-schnittbibliothek {
    --sb-primary: #4E8F3B;
    --sb-dark: #315C3C;
    --sb-background: linear-gradient(rgba(218,165,32,0.20),rgba(218,165,32,0.20)), url('../../images/metallische_Oberflaeche hellgrau.webp');
    --sb-card: #FFFFFF;
    --sb-text: #444444;
    --sb-border: #DEE2E6;
    --sb-radius: 15px;
    --sb-gap: 18px;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--sb-text);
    background: var(--sb-background);
	border:5px solid #DEE2E6;
	box-shadow: 14px 14px 8px rgba(0, 0, 0, .25);
	border-radius:12px;
    padding: 20px;
    box-sizing: border-box;
}
#gp-schnittbibliothek * { box-sizing: border-box; }

#gp-schnittbibliothek .sb-toolbar {
	display: flex; 
	gap: 12px; 
	flex-wrap: wrap;
	margin: 20px 0;
	}
	
#gp-schnittbibliothek input,
#gp-schnittbibliothek select { padding: 10px; border: 1px solid var(--sb-border); border-radius: 8px; font: inherit; }
#gp-schnittbibliothek .sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--sb-gap); }
#gp-schnittbibliothek .sb-card { background: var(--sb-card); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); padding: 18px; text-align: left; cursor: pointer; color: inherit; font: inherit; }
#gp-schnittbibliothek .sb-card:hover { border-color: var(--sb-primary); }
#gp-schnittbibliothek .sb-card h3 { color: var(--sb-dark); margin: 0 0 8px; }
#gp-schnittbibliothek .sb-muted { color: #000000; font-size: 15px; font-weight: 600; }
#gp-schnittbibliothek .sb-dialog { border: 1px solid var(--sb-border); border-radius: var(--sb-radius); max-width: min(850px, 94vw); max-height: 90vh; width: 100%; padding: 24px; }
#gp-schnittbibliothek .sb-dialog::backdrop { background: rgba(0,0,0,.65); }
#gp-schnittbibliothek .sb-close { float: right; cursor: pointer; padding: 7px 12px; }
#gp-schnittbibliothek .sb-image { display: block; max-width: 100%; height: auto; margin: 14px auto; }
#gp-schnittbibliothek figure { margin: 15px 0; }
#gp-schnittbibliothek figcaption { font-size: .9em; color: #666; }
@media (max-width: 600px) {
    #gp-schnittbibliothek { padding: 12px; }
    #gp-schnittbibliothek .sb-dialog { padding: 12px; }
}

/* Pflanzen-Vorschaubild – Größe und Zuschnitt zentral anpassbar. */
.sb-cover {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 12px;
}

/* =============================================================
   v0.4: Bildbreite, Ausrichtung und optionaler Textumlauf
   Der Umbruch erfolgt nur bei ausreichend breiten Viewports.
   ============================================================= */
#gp-schnittbibliothek .sb-detail-content {
    display: flow-root;
}
#gp-schnittbibliothek .sb-detail-content .sb-figure {
    width: min(100%, var(--sb-image-width, 100%));
    max-width: 100%;
    margin: 16px auto;
}
#gp-schnittbibliothek .sb-detail-content .sb-figure.sb-align-links {
    margin-left: 0;
    margin-right: auto;
}
#gp-schnittbibliothek .sb-detail-content .sb-figure.sb-align-rechts {
    margin-left: auto;
    margin-right: 0;
}
#gp-schnittbibliothek .sb-detail-content .sb-figure.sb-wrap.sb-align-links {
    float: left;
    margin: 5px 20px 12px 0;
}
#gp-schnittbibliothek .sb-detail-content .sb-figure.sb-wrap.sb-align-rechts {
    float: right;
    margin: 5px 0 12px 20px;
}
#gp-schnittbibliothek .sb-detail-content .sb-image {
    width: 100%;
    height: auto;
    margin: 0;
}
#gp-schnittbibliothek .sb-detail-content .sb-paragraph {
    white-space: pre-line;
    line-height: 1.55;
	font-size: 14px;
	font-weight: 600;
}
#gp-schnittbibliothek .sb-detail-content .sb-clear {
    clear: both;
}
@media (max-width: 600px) {
    #gp-schnittbibliothek .sb-detail-content .sb-figure,
    #gp-schnittbibliothek .sb-detail-content .sb-figure.sb-wrap {
        float: none;
        width: 100%;
        margin: 14px 0;
    }
}

/* =============================================================
   v0.7: Bildgestaltung zentral über CSS-Variablen.
   Individueller Stil wird als Klasse am figure-Element gesetzt.
   ============================================================= */
#gp-schnittbibliothek {
    --sb-image-border: 1px solid #DEE2E6;
    --sb-image-radius: 12px;
    --sb-image-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    --sb-image-strong-shadow: 0 8px 24px rgba(0, 0, 0, .27);
}
#gp-schnittbibliothek .sb-detail-content .sb-image {
    border: var(--sb-image-border);
    border-radius: var(--sb-image-radius);
    box-shadow: var(--sb-image-shadow);
}
#gp-schnittbibliothek .sb-detail-content .sb-style-ohne-rahmen .sb-image {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
#gp-schnittbibliothek .sb-detail-content .sb-style-starker-schatten .sb-image {
    box-shadow: var(--sb-image-strong-shadow);
}
#gp-schnittbibliothek .sb-detail-content figcaption {
    margin-top: 8px;
    text-align: center;
}
@media print {
    #gp-schnittbibliothek .sb-detail-content .sb-image {
        box-shadow: none !important;
    }
}

/* v0.9 – nummerierte Arbeitsschritte, Warnungen und Grundlagen */
#gp-schnittbibliothek .sb-step {
    clear: both;
    margin: 16px 0;
    padding: 12px 16px;
    border: 3px solid #FFFFFF;	
    border-left: 4px solid #4E8F3B;
    background: linear-gradient(rgba(181,237,133,0.20),rgba(181,237,133,0.20)), url('../../images/metallische_Oberflaeche hellgrau.webp');
    border-radius: 8px;
}
#gp-schnittbibliothek .sb-step h3 { margin: 0 0 6px; color: #315C3C; }
#gp-schnittbibliothek .sb-notice {
    clear: both;
    margin: 16px 0;
    padding: 12px 16px;
    border: 3px solid #FFFFFF;	
    border-left: 6px solid #b87922;
    background: linear-gradient(rgba(218,165,32,0.20),rgba(218,165,32,0.20)), url('../../images/metallische_Oberflaeche hellgrau.webp');
    border-radius: 8px;
}
#gp-schnittbibliothek .sb-foundation-link {
    display: block;
    clear: both;
    margin: 12px 0;
    padding: 9px 14px;
    color: #315C3C;
    background: #F7F8F3;
    border: 1px solid #4E8F3B;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}
#gp-schnittbibliothek .sb-foundation-detail {
    margin: 10px 0 18px;
    padding: 14px;
    background: #F7F8F3;
    border: 1px solid #DEE2E6;
    border-radius: 10px;
}

/* v1.0 – optionale zeitverzögerte Kurzvorschau, ohne eigene Grundlagen-Cards */
.sb-hover-preview {
    position: fixed;
    z-index: 2147483000;
    width: min(340px, calc(100vw - 16px));
    max-height: min(420px, calc(100vh - 16px));
    overflow: auto;
    padding: 16px;
    border: 5px solid #868A83;

    border-radius: 12px;
    background: linear-gradient(rgba(255,255,255,0.20),rgba(255,255,255,0.20)), url('../../images/metallische_Oberflaeche hellgrau.webp');
    color: #000000;
    font: 14px/1.5 Arial, Helvetica, sans-serif;
    box-shadow: 18 18px 10px rgba(0, 0, 0, .3);
    pointer-events: none;
}
.sb-hover-preview h4 { margin: 0 0 10px; color: #315C3C; font-size: 16px; }
.sb-hover-preview p { margin: 6px 0; white-space: pre-line; }
.sb-hover-preview .sb-hover-note { color: #845510; }
@media (hover: none), (pointer: coarse) { .sb-hover-preview { display: none; } }

/* =============================================================
   v1.1 – Pflanzen-Cards im Stil der GardenPortal-Insektenbibliothek
   ============================================================= */
#gp-schnittbibliothek {
    --sb-card-metal: linear-gradient(rgba(255,255,255,0.20),rgba(255,255,255,0.20)), url('../../images/metallische_Oberflaeche hellgrau.webp');
    --sb-card-outline: #8b898d;
}
#gp-schnittbibliothek .sb-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 22px;
    align-items: stretch;
}
#gp-schnittbibliothek .sb-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 4px solid var(--sb-card-outline);
    border-radius: 17px;
    background: #f4f4f4;
    box-shadow: 12px 12px 10px rgba(0,0,0,.3);
    cursor: default;
    min-width: 0;
}
#gp-schnittbibliothek .sb-card:hover,
#gp-schnittbibliothek .sb-card:focus-within {
    border-color: var(--sb-primary);
}
#gp-schnittbibliothek .sb-card-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e6ebdf;
    display: grid;
    place-items: center;
}
#gp-schnittbibliothek .sb-card .sb-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
}
#gp-schnittbibliothek .sb-no-photo { color: #526552; font-style: italic; }
#gp-schnittbibliothek .sb-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 17px 18px 15px;
    background: var(--sb-card-metal);
}
#gp-schnittbibliothek .sb-card h3 {
    color: var(--sb-dark);
    font-size: 1.15em;
    margin: 0;
}
#gp-schnittbibliothek .sb-botanical { font-style: italic; color: #666; margin: 0; }
#gp-schnittbibliothek .sb-card-summary { font-weight: 600; line-height: 1.4; margin: 6px 0; }
#gp-schnittbibliothek .sb-card-hints {
    border-top: 2px solid #c8c9c9;
    padding-top: 10px;
    margin-top: auto;
}
#gp-schnittbibliothek .sb-card-hints summary {
    cursor: pointer;
    color: var(--sb-dark);
    font-weight: 700;
}
#gp-schnittbibliothek .sb-card-hints p { margin: 9px 0 0; line-height: 1.45; }
#gp-schnittbibliothek .sb-more-button {
    align-self: flex-start;
    margin-top: 6px;
    padding: 9px 18px;
    border: 2px solid #161b16;
    border-radius: 14px;
    background: linear-gradient(to bottom, #fff 0%, #dcebd8 35%, #4E8F3B 100%);
    color: #111;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
#gp-schnittbibliothek .sb-more-button:hover { filter: brightness(.95); }
#gp-schnittbibliothek .sb-external-links { margin: 18px 0; }
#gp-schnittbibliothek .sb-external-link {
    display: block;
    margin: 8px 0;
    color: var(--sb-dark);
    text-decoration: underline;
}
@media (max-width: 600px) {
    #gp-schnittbibliothek .sb-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   v1.2 – Feste Kopfzeile, scrollbarer Inhalt, Accordion, Inline-Links
   ============================================================= */
#gp-schnittbibliothek {
    --sb-detail-header-bg: linear-gradient(rgba(255,255,255,0.20),rgba(255,255,255,0.20)), url('../../images/Jahresbalken_gold_gelb_glossy.webp');
    --sb-detail-header-color: #000000;
    --sb-detail-close-bg: #4E8F3B;
    --sb-detail-close-color: #FFFFFF;
    --sb-detail-close-hover-bg: #B43C3C;
}
#gp-schnittbibliothek .sb-dialog {
    padding: 0;
    overflow: hidden;
    height: min(90vh, 900px);
    max-height: 90dvh;
    display: none;
	border: 5px solid #797D7B;
	background: linear-gradient(rgba(255,255,255,0.20),rgba(255,255,255,0.20)), url('../../images/metallische_Oberflaeche hellgrau.webp');
    flex-direction: column;
}
#gp-schnittbibliothek .sb-dialog[open] { display: flex; }
#gp-schnittbibliothek .sb-dialog-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: var(--sb-detail-header-bg);
    color: var(--sb-detail-header-color);
}
#gp-schnittbibliothek .sb-dialog-header h2 {
    margin: 0;
    color: inherit;
    font-size: clamp(1.1rem, 2vw, 1.55rem);
}
#gp-schnittbibliothek .sb-close {
    float: none;
    flex: 0 0 auto;
    background: var(--sb-detail-close-bg);
    color: var(--sb-detail-close-color);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    padding: 9px 14px;
}
#gp-schnittbibliothek .sb-close:hover,
#gp-schnittbibliothek .sb-close:focus-visible {
    background: var(--sb-detail-close-hover-bg);
}
#gp-schnittbibliothek .sb-dialog-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 24px 26px;
}
#gp-schnittbibliothek .sb-foundations { clear: both; margin-top: 28px; }
#gp-schnittbibliothek .sb-foundation-accordion {
    margin: 9px 0;
    border: 3px solid #4A801B;
    border-radius: 9px;
    background: linear-gradient(rgba(181,237,133,0.20),rgba(181,237,133,0.20)), url('../../images/metallische_Oberflaeche hellgrau.webp');
    overflow: hidden;
}
#gp-schnittbibliothek .sb-foundation-accordion summary {
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 700;
    color: var(--sb-dark);
}
#gp-schnittbibliothek .sb-foundation-accordion[open] summary {
    border-bottom: 1px solid var(--sb-border);
}
#gp-schnittbibliothek .sb-foundation-accordion p { margin: 0; padding: 14px 16px; }
#gp-schnittbibliothek .sb-inline-link { color: #2469A1; text-decoration: underline; }
#gp-schnittbibliothek .sb-inline-link:hover { color: #B43C3C; }
@media (max-width: 600px) {
    #gp-schnittbibliothek .sb-dialog-header { padding: 12px; }
    #gp-schnittbibliothek .sb-dialog-scroll { padding: 14px; }
}

/* v1.3: Illustrationen in aufklappbaren Schnittgrundlagen */
#gp-schnittbibliothek .sb-foundation-figure { margin: 12px 16px 18px; text-align: center; }
#gp-schnittbibliothek .sb-foundation-image { display: block; max-width: 100%; max-height: 520px; width: auto; height: auto; margin: 0 auto; border: 1px solid #DEE2E6; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.14); }
#gp-schnittbibliothek .sb-foundation-figure figcaption { padding-top: 7px; color: #666666; font-size: .9em; }

/* v1.4 – Zoom für Pflanzen- und Grundlagenbilder */
#gp-schnittbibliothek .sb-zoomable { cursor: zoom-in; }
#gp-schnittbibliothek .sb-zoomable:focus-visible { outline: 3px solid #4E8F3B; outline-offset: 3px; }
.sb-image-zoom { box-sizing: border-box; border: 0; border-radius: 14px; padding: 0 0 14px; width: min(96vw, 1450px); max-width: 96vw; max-height: 96vh; overflow: auto; background: #F7F8F3; color: #444; box-shadow: 0 12px 55px rgba(0,0,0,.4); }
.sb-image-zoom::backdrop { background: rgba(0,0,0,.82); }
.sb-image-zoom-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; background: #315C3C; padding: 9px 12px; }
.sb-image-zoom-close { cursor: pointer; border: 1px solid #fff8; border-radius: 8px; padding: 8px 15px; color: #fff; background: #4E8F3B; font: inherit; }
.sb-image-zoom-close:hover { background: #B43C3C; }
.sb-image-zoom-picture { display: block; margin: 12px auto 0; max-width: calc(100% - 24px); max-height: calc(96vh - 135px); width: auto; height: auto; object-fit: contain; }
.sb-image-zoom-caption { text-align: center; padding: 0 18px; margin: 9px 0 0; }

/* ==========================================
   SUCHFELD UND KATEGORIEAUSWAHL
   ========================================== */

#gp-schnittbibliothek .sb-toolbar select {
    background:
        linear-gradient(
            rgba(255,255,255,0.40),
            rgba(255,255,255,0.40)
        ),
        url('../../images/metallische_Oberflaeche hellgrau.webp');

    color: #315C3C;
    border: 2px solid #BDB5B5;
    border-radius: 12px;
    padding: 12px 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

#gp-schnittbibliothek .sb-toolbar input {
    background:
        linear-gradient(
            rgba(255,255,255,0.50),
            rgba(255,255,255,0.50)
        ),
        url('../../images/metallische_Oberflaeche hellgrau.webp');

    color: #315C3C;
    border: 2px solid #BDB5B5;
    border-radius: 12px;
    padding: 12px 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

/* Platzhalter im Suchfeld */
#gp-schnittbibliothek .sb-toolbar input::placeholder {
    color: #555555;
    opacity: 1;
}

/* Fokus beim Anklicken */
#gp-schnittbibliothek .sb-toolbar input:focus,
#gp-schnittbibliothek .sb-toolbar select:focus {
    border-color: #315C3C;
    outline: 3px solid rgba(78,143,59,0.25);
    outline-offset: 1px;
}