/* ========================================================================== */
/* #region ⬜️ GRUNDSTRUKTUR / TYPO / BASIS                                     */
/* ========================================================================== */

h3 {
    margin-bottom: 0;
}

/* #endregion */
/* ========================================================================== */



/* ========================================================================== */
/* #region 🟩 KRÄUTER-EINTRAG - Haupteintrag - (Grid, Bilder, Trenner)        */
/* ========================================================================== */

/* Haupt-Container eines Kräuter-Eintrags */
.kraeuter-eintrag {
    display: grid;
    grid-template-columns: 100px 1px 1fr; /* Thumb | Linie | Text */
    gap: 20px;                             /* Abstand Bild ↔ Text */
    margin-bottom: 2rem;                   /* Abstand zwischen Einträgen */
    align-items: start;
    position: relative;

    padding: 16px 20px;                    /* Innenabstand */
    border-radius: 8px;                    /* weiche Kanten */
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);

    /* Hintergrundfarbe (Kräuter-Variante) */
    background: rgba(120,150,100,0.08);
}

/* Vertikale Linie zwischen Bild und Text */
.kraeuter-eintrag .trenner {
    background: rgba(0,0,0,0.10);
    width: 1px;
    height: 100%;
}

/* Bildspalte (mehrere Reihen möglich) */
.kraeuter-bilder {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Eine Bildreihe (1–3 Bilder nebeneinander) */
.bild-row {
    display: flex;
    gap: 12px;
}

/* Bildbox (Quadrat + Zoom-Container) */
.kraeuter-imgbox {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: visible;
}

/* Thumbnail */
.kraeuter-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.25);
}


.kraeuter-text p {
margin-bottom: 0.3rem;      /* kleinerer Abstand */
}

.kraeuter-text .ergaenzung {
    font-size: 0.85rem;
    line-height: 1rem;
    color: #787;

    padding-left: 0.5rem;
    border-left: 2px solid #787;
    border-radius: 6px;
}




/* #endregion */
/* ========================================================================== */



/* ========================================================================== */
/* #region 🟩 KRÄUTER-SAISON (Monatsleiste + Balken - Tooltip)                           */
/* ========================================================================== */



/* 🚩 bestimmte Balken ausblenden möglich mit Klasse "saison-none" 
                                >> wenn noch keine Daten vorliegen 🚩 */
.kraeuter-saison.saison-none .balken,
.kraeuter-saison.saison-none::before,
.kraeuter-saison.saison-none::after,
.kraeuter-saison.saison-none .monate span {
    display: none !important;
}




.kraeuter-saison {
        --fade:60px;  /* 👈 Fadebreite der Saison-Balken definieren 
                          60px sind ca 1 Monat Breite  */
}


.kraeuter-saison {
    --start: 0;   /* wird über Klassen gesetzt */
    --end: 0;     /* wird über Klassen gesetzt */
    position: relative;
    margin-top: 0.6rem;           /* 👈 Abstand nach oben */
    font-size: 0.8rem;           /* 👈 Schriftgröße der Monatsbuchstaben */
    letter-spacing: 0.18rem;     /* 👈 optischer Abstand der Buchstaben */
    font-family: monospace;

   /*  padding-top: 5px; */
   /*  border-top: 1px solid #2f3b2c55; */
   /*  box-sizing: border-box; */
}

.kraeuter-saison .monate {
    opacity: 0.55;               /* 👈 Helligkeit/Dezenz der Monatszeile */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
    letter-spacing: 0;           /* wichtig: kein Versatz im Grid */
}

/* FELDER mit Monatsbuchstaben */
.kraeuter-saison .monate span {
    display: flex;
    justify-content: center;    /* 👈 zentriert horizontal */
    align-items: center;        /* 👈 zentriert vertikal */
    border-right: 1px solid #2f3b2c55; /* 👈 hauchdünne Linien mit Transparenz*/
    
    padding: 2px 0;                         /* etwas Luft */
    background:  rgba(120,150,100,0.25);       /* 👈 Dezenter Hintergrund */
    border-radius: 6px;                     /* 👈 Rundung Hintergrund */
}

.kraeuter-saison .monate span:last-child {
    border-right: none;         /* Dez rechts hat keine Linie */
}

/* Zebra-Streifen /
.kraeuter-saison .monate span:nth-child(odd) {
    background: rgba(0,100,0,0.08); 
} */


/* ========================================================================== */
/* 🟩🟩🟩 BALKEN (Standardfall: Start früher im Jahr als Ende)                 */
/* ========================================================================== */

.kraeuter-saison .balken {
    position: absolute;
    left: 0;
    top: 1.4rem;            /* 👈 y-Pos BALKEN >> ACHTUNG auch für JAHRESWECHSEL Fall einstellen*/
    height: 6px;            /* 👈 Dicke BALKEN */
    border-radius: 4px;

    background:
        /* Fade-In links */
        linear-gradient(to right,
            rgba(120,150,100,0.0),
            rgba(120,150,100,0.45)
        ) left / var(--fade) 100% no-repeat,

        /* Mittelteil */
        linear-gradient(to right,
            rgba(120,150,100,0.45),
            rgba(120,150,100,0.45)
        ) center / calc(100% - (var(--fade) * 2)) 100% no-repeat,

        /* Fade-Out rechts */
        linear-gradient(to right,
            rgba(120,150,100,0.45),
            rgba(120,150,100,0.0)
        ) right / var(--fade) 100% no-repeat;

    width: calc((var(--end) - var(--start) + 1) * (100% / 12));
    margin-left: calc(var(--start) * (100% / 12));
}

/* Start-Monate */
.kraeuter-saison.saison-jan-beg { --start: 0; }
.kraeuter-saison.saison-feb-beg { --start: 1; }
.kraeuter-saison.saison-mrz-beg { --start: 2; }
.kraeuter-saison.saison-apr-beg { --start: 3; }
.kraeuter-saison.saison-mai-beg { --start: 4; }
.kraeuter-saison.saison-jun-beg { --start: 5; }
.kraeuter-saison.saison-jul-beg { --start: 6; }
.kraeuter-saison.saison-aug-beg { --start: 7; }
.kraeuter-saison.saison-sep-beg { --start: 8; }
.kraeuter-saison.saison-okt-beg { --start: 9; }
.kraeuter-saison.saison-nov-beg { --start: 10; }
.kraeuter-saison.saison-dez-beg { --start: 11; }

/* End-Monate */
.kraeuter-saison.saison-jan-end { --end: 0; }
.kraeuter-saison.saison-feb-end { --end: 1; }
.kraeuter-saison.saison-mrz-end { --end: 2; }
.kraeuter-saison.saison-apr-end { --end: 3; }
.kraeuter-saison.saison-mai-end { --end: 4; }
.kraeuter-saison.saison-jun-end { --end: 5; }
.kraeuter-saison.saison-jul-end { --end: 6; }
.kraeuter-saison.saison-aug-end { --end: 7; }
.kraeuter-saison.saison-sep-end { --end: 8; }
.kraeuter-saison.saison-okt-end { --end: 9; }
.kraeuter-saison.saison-nov-end { --end: 10; }
.kraeuter-saison.saison-dez-end { --end: 11; }


/* ========================================================================== */
/* 🟩🟩🟩 BALKEN Jahreswechsel: Start später im Jahr als Ende >> 2 Balken     */
/* ========================================================================== */

.kraeuter-saison.jahreswechsel .balken {
    display: none; /* Standard-Balken ausblenden */
}

/* -------------------------------------------------------------------------- */
/* LINKES Segment: Jan → Saison-Ende                                         */
/* -------------------------------------------------------------------------- */
/* LINKS = HARTE KANTE (Jan) 👈                                               */
/* RECHTS = Fade-Out 👈                                                */
/* -------------------------------------------------------------------------- */
.kraeuter-saison.jahreswechsel::before {
    content: "";
    position: absolute;
    top: 1.4rem;                 /* 👈 y-Pos BALKEN >> gleiche Höhe wie Standard-Balken */
    left: 0;
    height: 6px;                 /* 👈 Dicke NALKEN */
    border-radius: 4px;
    width: calc((var(--end) + 1) * (100% / 12)); /* Jan bis Endmonat 👈 */
    
    background:
        /* Mittelteil + HARTE KANTE LINKS 👈 */
        linear-gradient(
            to right,
            rgba(120,150,100,0.45),   /* hart */
            rgba(120,150,100,0.45)    /* hart */
        ) left / calc(100% - var(--fade)) 100% no-repeat, /* Mittelteil-Breite 👈 */

        /* Fade-Out rechts 👈 */
        linear-gradient(
            to right,
            rgba(120,150,100,0.45),   /* voll */
            rgba(120,150,100,0.0)     /* ausblenden */
        ) right / var(--fade) 100% no-repeat; /* Fade-Out-Breite 👈 */
}

/* -------------------------------------------------------------------------- */
/* RECHTES Segment: Saison-Start → Dez                                       */
/* -------------------------------------------------------------------------- */
/* LINKS = Fade-In 👈                                                  */
/* RECHTS = HARTE KANTE (Dez) 👈                                              */
/* -------------------------------------------------------------------------- */
.kraeuter-saison.jahreswechsel::after {
    content: "";
    position: absolute;
    top: 1.4rem;                 /* gleiche Höhe */
    right: 0;
    height: 6px;                 /* Dicke 👈 */
    border-radius: 4px;
    width: calc((12 - var(--start)) * (100% / 12)); /* Startmonat bis Dez 👈 */

    background:
        /* Fade-In links 👈 */
        linear-gradient(
            to right,
            rgba(120,150,100,0.0),    /* einblenden */
            rgba(120,150,100,0.45)    /* voll */
        ) left / var(--fade) 100% no-repeat, /* Fade-In-Breite 👈 */

        /* Mittelteil + HARTE KANTE RECHTS 👈 */
        linear-gradient(
            to right,
            rgba(120,150,100,0.45),   /* hart */
            rgba(120,150,100,0.45)    /* hart */
        ) right / calc(100% - var(--fade)) 100% no-repeat; /* Mittelteil-Breite 👈 */
}




/* ========================================================================== */
/* 🟧 Saison-Pause (z. B. Schädlingspause Jul–Aug)                            */
/* ========================================================================== */

.kraeuter-saison.saison-pause-jul-aug::after {
    content:"";
    position:absolute;
    top:1.4rem;                     /* 👉 gleiche Y-Position wie Balken */
    left: calc(6 * (100% / 12));    /* 👉 Start bei Juli (Monat 6) */
    width: calc(2 * (100% / 12));   /* 👉 2 Monate breit (Jul + Aug) */
    height:6px;                     /* 👉 gleiche Höhe wie Balken */
    border-radius:4px;

    /* 👉 Schraffur / Muster */
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(120,150,100,0.0) 0px,
            rgba(120,150,100,0.0) 4px,
            rgba(120,150,100,0.55) 4px,
            rgba(120,150,100,0.55) 8px
        );

    opacity:0.99;                    /* 👉 Stärke der Schraffur */
    pointer-events:none;            /* 👉 nicht anklickbar */
}







/* ========================================================================== */
/*  ❓ TOOLTIP - Info zu den Saisonangaben, Monate, Saison-Balken            */
/* ========================================================================== */
/* Fragezeichen absolut positioniert → beeinflusst NICHT die Monate */
/* Saisonblock wird Positionierungs-Container */

/* Info-Icon als kleiner Kreis */
.saison-info {
    position:absolute;
    z-index:100;

    right:-25px;            /* 👉 Abstand rechts vom Balken */
    top:45%;
    transform:translateY(-50%); /* vertikal mittig */

    width:20px;             /* 👉 Kreisgröße */
    height:20px;            /* 👉 Kreisgröße */
    border-radius:50%;      /* >> KREIS formen */

    background:#ffffff;     /* 👉 Hintergrundfarbe */
    color:#2f3b2c;          /* 👉 Textfarbe */
    border:1px solid #2f3b2c88; /* Rand, mit Transparenz Härte steuern */

    font-family: Arial, Helvetica, sans-serif;
    font-size:16px;         /* 👉 Größe des Fragezeichens */
    font-weight: bold;      /* Fragezeichen FETT */
    line-height:20px;       /* vertikal perfekt zentriert */
    text-align:center;


    padding-left:2px;       /* 👉 optische X-Korrektur für das ? */

    cursor:help;
    opacity:0.8;

    /* 👉 weiches Einblenden */
    transition:
        opacity .25s ease,
        background .25s ease,
        color .25s ease;
}

/* Hover-Effekt */
.saison-info:hover {
    opacity:1;
    background:#465846;     /* 👉 Hover-Hintergrund */
    color:#e9ffe3;          /* 👉 Hover-Schriftfarbe */
}

/* Tooltip */
.saison-info:hover::after {

    /* bei pauschalem Tooltipp für alle 
    content:"Saisonzeiten sind Tendenzen. Je nach Jahr, Wetter, Sorte und Freiland/Folie können sie abweichen.";
    */

    /* bei individuellem Tipp >> ins HTML div tag dann einfach dazu:  data-tip="Dill pflanzen wir Folie und Freiland an ... bla bla..." */
    content: attr(data-tip); /* 👉 Holt individuellen Text aus HTML */
    
    white-space: pre-line;   /* 👉 Umbrüche im HTML werden im TOOLTIP angezeigt */

    position:absolute;

    top:165%;                 /* 👉 Y-Pos */
    right: 0;                 /* 👉 rechter Rand fix */
    transform: translateX(0); /* 👉 keine Verschiebung */

    background:#465846;     /* 👉 Tooltip-Hintergrund */
    color:#fff;
    padding:6px 10px;       /* 👉 Tooltip-Polsterung */
    border-radius:4px;      /* 👉 Tooltip-Ecken */

    font-size:0.7em;        /* 👉 Tooltip-Schriftgröße */
    font-weight: normal;    /* Text wieder UN-FETT machen */

    /* width:120px;    */      /* 👉 Tooltip-BREITE */
    max-width:230px;     /* 👉 maximale Breite */
    width:max-content;   /* 👉 passt sich dem Text an */

    z-index:50;
    line-height:1.3;
    text-align:left;
    letter-spacing: 0.1rem; /* 👈 Text spreizung ?? */


    opacity:1;              /* 👉 sichtbar */
}

/* Tooltip – Startzustand (unsichtbar + leicht verschoben) */
.saison-info::after {
    content:"";
    opacity:0;              /* 👉 Start: unsichtbar */
    transform:translateX(-10%) translateY(-5px); /* 👉 Start: leicht höher */
    transition:
        opacity .25s ease,
        transform .25s ease; /* 👉 weiches Einblenden + Gleiten */
}



/* #endregion */
/* ========================================================================== */


 




/* 🚩🚩🚩 noch ungenutzt 🚩🚩🚩 */
/* ========================================================================== */
/* #region 🟩 KRÄUTER-FACTS (Mini-Liste unter dem Eintrag)                     */
/* ========================================================================== */

.kraeuter-facts {
    margin-top: 0.8rem;
    padding-left: 1.4rem; /* leichter Einzug */
    list-style: none;
    font-size: 0.92rem;
    line-height: 1.35;
    color: #3a4a32;
}

.kraeuter-facts li {
    position: relative;
    margin-bottom: 0.35rem;
}

/* kleines Blatt-Icon als Bullet */
.kraeuter-facts li::before {
    content: "🍃";
    position: absolute;
    left: -1.4rem;
    top: 0.05rem;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* #endregion */
/* ========================================================================== */



/* ========================================================================== */
/* #region 🟪 ZOOM-SYSTEM (Desktop + NoZoom)                                   */
/* ========================================================================== */

/* Zoom-Container (Startzustand) */
.zoom-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 350px;                                /* 👉 Zoom-Bildgröße */
    transform: translate(-50%, -50%) scale(0.2); /* Start-Zoom */
    opacity: 0;
    transition: opacity 0.25s ease,
                transform 0.25s ease;
    pointer-events: none;
    z-index: 99;
}

/* Großes Zoom-Bild */
.zoom-full {
    width: 100%;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 15px 20px white;
    border-radius: 10px;
}

/* Desktop-Hover-Zoom */
@media (hover:hover) {

    /* Standard */
    .kraeuter-imgbox:hover .zoom-wrap {
        opacity: 1;
        transform: translate(-37%, -50%) scale(0.75);
    }

    /* Querformat */
    .kraeuter-imgbox.quer:hover .zoom-wrap {
        transform: translate(-33%, -50%) scale(0.9);
    }

    /* Hochformat */
    .kraeuter-imgbox.hoch:hover .zoom-wrap {
        transform: translate(-37%, -50%) scale(0.6);
    }
}

/* NoZoom – Platzhalterbilder */
.kraeuter-imgbox.nozoom {
    cursor: default;
}

.kraeuter-imgbox.nozoom .zoom-wrap,
.kraeuter-imgbox.nozoom:hover .zoom-wrap {
    display: none !important;
    opacity: 0 !important;
    transform: none !important;
}

/* #endregion */
/* ========================================================================== */



/* ========================================================================== */
/* #region 🟧🟧🟧  BUTTONS + FILTER + INFO-BOXEN                                    */
/* ========================================================================== */


/* -------------------------------------------------------------------------- */
/* 🟧 ZENTRALE FARBVARIABLEN (Buttons + Info-Boxen)                            */
/* -------------------------------------------------------------------------- */

:root {
    /* Hauptfarben pro Kategorie */
    --col-alle:      #8fae82;
    --col-kraeuter:  #6f9b6a;
    --col-mixe:      #d6a84a;
    --col-drink:     #4aa8a0;
    --col-suess:     #c48ac8;
    --col-herzhaft:  #a07a4a;
    --col-tee:       #8bbf6a;
    --col-duft:      #9a7ac8;

    /* Pastell-Hintergründe für Info-Boxen */
    --bg-alle:      #e7ece4;
    --bg-kraeuter:  rgba(120,160,110,0.15);
    --bg-mixe:      rgba(220,180,90,0.15);
    --bg-drink:     rgba(80,180,170,0.15);
    --bg-suess:     rgba(200,150,210,0.15);
    --bg-herzhaft:  rgba(160,120,70,0.15);
    --bg-tee:       rgba(150,200,120,0.15);
    --bg-duft:      rgba(150,120,200,0.15);
}



/* -------------------------------------------------------------------------- */
/* 🟧 FILTER-BUTTONS – Container                                              */
/* -------------------------------------------------------------------------- */

.kraeuter-filter {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 12px;
    margin-top: 5px;
    padding: 0;
}



/* -------------------------------------------------------------------------- */
/* 🟧 FILTER-BUTTONS – Grundstil                                              */
/* -------------------------------------------------------------------------- */

.kraeuter-filter label {
    flex: 1 1 auto;
    min-width: fit-content;
    white-space: nowrap;
    text-align: center;

    padding: 6px 9px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s ease;

    /* Form + leichte Tiefe */
    box-shadow:
        inset 0 0 0 2px rgba(0,0,0,0.05),
        0 1px 3px rgba(0,0,0,0.08);
}



/* -------------------------------------------------------------------------- */
/* 🟧 FILTER-BUTTONS – Farbzuweisung pro Kategorie                             */
/* -------------------------------------------------------------------------- */

.btn-alle     { --btn-color: var(--col-alle); }
.btn-kraeuter { --btn-color: var(--col-kraeuter); }
.btn-mixe     { --btn-color: var(--col-mixe); margin-left: 18px; }
.btn-drink    { --btn-color: var(--col-drink); }
.btn-suess    { --btn-color: var(--col-suess); }
.btn-herzhaft { --btn-color: var(--col-herzhaft); }
.btn-tee      { --btn-color: var(--col-tee); }
.btn-duft     { --btn-color: var(--col-duft); }



/* -------------------------------------------------------------------------- */
/* 🟧 FILTER-BUTTONS – Subtile Hintergrundtönung                              */
/* -------------------------------------------------------------------------- */

:root { --btn-tint: 15%; } /* 👉 HINTERGRUND-Tönung aller Buttons */

.btn-alle     { background: color-mix(in srgb, var(--col-alle) var(--btn-tint), white); }
.btn-kraeuter { background: color-mix(in srgb, var(--col-kraeuter) var(--btn-tint), white); }
.btn-mixe     { background: color-mix(in srgb, var(--col-mixe) var(--btn-tint), white); }
.btn-drink    { background: color-mix(in srgb, var(--col-drink) var(--btn-tint), white); }
.btn-suess    { background: color-mix(in srgb, var(--col-suess) var(--btn-tint), white); }
.btn-herzhaft { background: color-mix(in srgb, var(--col-herzhaft) var(--btn-tint), white); }
.btn-tee      { background: color-mix(in srgb, var(--col-tee) var(--btn-tint), white); }
.btn-duft     { background: color-mix(in srgb, var(--col-duft) var(--btn-tint), white); }



/* -------------------------------------------------------------------------- */
/* 🟧 FILTER-BUTTONS – Subtile Texttönung                                     */
/* -------------------------------------------------------------------------- */

:root { --btn-text-tint: 18%; } /* 👉 TEXT-Tönung */

.btn-alle     { color: color-mix(in srgb, var(--col-alle) var(--btn-text-tint), #333); }
.btn-kraeuter { color: color-mix(in srgb, var(--col-kraeuter) var(--btn-text-tint), #333); }
.btn-mixe     { color: color-mix(in srgb, var(--col-mixe) var(--btn-text-tint), #333); }
.btn-drink    { color: color-mix(in srgb, var(--col-drink) var(--btn-text-tint), #333); }
.btn-suess    { color: color-mix(in srgb, var(--col-suess) var(--btn-text-tint), #333); }
.btn-herzhaft { color: color-mix(in srgb, var(--col-herzhaft) var(--btn-text-tint), #333); }
.btn-tee      { color: color-mix(in srgb, var(--col-tee) var(--btn-text-tint), #333); }
.btn-duft     { color: color-mix(in srgb, var(--col-duft) var(--btn-text-tint), #333); }



/* -------------------------------------------------------------------------- */
/* 🟧 FILTER-BUTTONS – Trenner für „Mixe“                                     */
/* -------------------------------------------------------------------------- */

.btn-mixe {
    position: relative;
    margin-left: 16px;
}

.btn-mixe::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 120%;
    background: rgba(80,110,70,0.28);
    border-radius: 1px;
}



/* -------------------------------------------------------------------------- */
/* 🟧 FILTER-BUTTONS – Hover                                                   */
/* -------------------------------------------------------------------------- */

.kraeuter-filter label:hover {
    background: var(--btn-color, #9bbd8a);
    color: white;
    text-shadow: 0 0 12px rgba(0,0,0,0.6);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}



/* -------------------------------------------------------------------------- */
/* 🟧 FILTER-BUTTONS – Active (ausgewählt)                                     */
/* -------------------------------------------------------------------------- */

#filter-alle:checked     ~ .kraeuter-filter label[for="filter-alle"],
#filter-kraeuter:checked ~ .kraeuter-filter label[for="filter-kraeuter"],
#filter-mixe:checked     ~ .kraeuter-filter label[for="filter-mixe"],
#filter-drink:checked    ~ .kraeuter-filter label[for="filter-drink"],
#filter-suess:checked    ~ .kraeuter-filter label[for="filter-suess"],
#filter-herzhaft:checked ~ .kraeuter-filter label[for="filter-herzhaft"],
#filter-tee:checked      ~ .kraeuter-filter label[for="filter-tee"],
#filter-duft:checked     ~ .kraeuter-filter label[for="filter-duft"] {

    background: var(--btn-color);
    color: white;
    text-shadow: 0 0 12px rgba(0,0,0,0.6);

    border-color: color-mix(in srgb, var(--btn-color) 80%, black);
    transform: translateY(-1px);

    box-shadow:
        inset 0 0 0 2px rgba(0,0,0,0.3),
        0 2px 6px rgba(0,0,0,0.6);
}



/* -------------------------------------------------------------------------- */
/* 🟧 RADIO-INPUTS VERSTECKEN                                                 */
/* -------------------------------------------------------------------------- */

input[type="radio"] {
    display: none;
}



/* -------------------------------------------------------------------------- */
/* 🟧 FILTER-LOGIK (zeigt nur passende Einträge)                               */
/* -------------------------------------------------------------------------- */

#filter-kraeuter:checked ~ .kraeuter-eintrag:not(.kraut),
#filter-mixe:checked     ~ .kraeuter-eintrag:not(.mix),
#filter-drink:checked    ~ .kraeuter-eintrag:not(.drink),
#filter-suess:checked    ~ .kraeuter-eintrag:not(.suess),
#filter-herzhaft:checked ~ .kraeuter-eintrag:not(.herzhaft),
#filter-tee:checked      ~ .kraeuter-eintrag:not(.tee),
#filter-duft:checked     ~ .kraeuter-eintrag:not(.duft) {
    display: none;
}



/* -------------------------------------------------------------------------- */
/* 🟧 INFO-BOXEN (0–5)                                                         */
/* -------------------------------------------------------------------------- */

/* Grundstil */
.filter-info > div {
    display: none;
    margin-top: 10px;
    margin-bottom: 40px;
    padding: 10px 14px;
    background: #f4f4f4;
    border-left: 4px solid #ccc;
    border-radius: 4px;
    font-size: 0.95rem;                 /* 👈 Schriftgröße */
    line-height: 1.2;                  /* 👈 Zeilenhöhe */
    color: var(--txt, #444);
}

/* 👉 Stellschraube: Farbintensität des Zusatztexts */
:root { --relativ-tint: 45%; }

/* Textfarben pro Kategorie */
.info-alle     { --txt: color-mix(in srgb, var(--col-alle) 20%, #333);     --accent: var(--col-alle); }
.info-mixe     { --txt: color-mix(in srgb, var(--col-mixe) 25%, #333);     --accent: var(--col-mixe); }
.info-drink    { --txt: color-mix(in srgb, var(--col-drink) 25%, #333);    --accent: var(--col-drink); }
.info-suess    { --txt: color-mix(in srgb, var(--col-suess) 25%, #333);    --accent: var(--col-suess); }
.info-herzhaft { --txt: color-mix(in srgb, var(--col-herzhaft) 25%, #333); --accent: var(--col-herzhaft); }
.info-tee      { --txt: color-mix(in srgb, var(--col-tee) 25%, #333);      --accent: var(--col-tee); }
.info-duft     { --txt: color-mix(in srgb, var(--col-duft) 25%, #333);     --accent: var(--col-duft); }

/* Zusatztext */
.filter-info .relativieren {
    display: block;
    font-size: 0.9em;
    line-height: 1.1;
    margin-top: 0.25em;

    color: color-mix(
        in srgb,
        var(--txt) calc(100% - var(--relativ-tint)),
        var(--accent) var(--relativ-tint)
    );

    opacity: 0.85;
}

/* Sichtbarkeit */
#filter-alle:checked     ~ .filter-info .info-alle     { display: block; }
#filter-mixe:checked     ~ .filter-info .info-mixe     { display: block; }
#filter-drink:checked    ~ .filter-info .info-drink    { display: block; }
#filter-suess:checked    ~ .filter-info .info-suess    { display: block; }
#filter-herzhaft:checked ~ .filter-info .info-herzhaft { display: block; }
#filter-tee:checked      ~ .filter-info .info-tee      { display: block; }
#filter-duft:checked     ~ .filter-info .info-duft     { display: block; }

/* Farbige Boxen */
#filter-alle:checked     ~ .filter-info .info-alle     { border-left-color: var(--col-alle);     background: var(--bg-alle); }
#filter-mixe:checked     ~ .filter-info .info-mixe     { border-left-color: var(--col-mixe);     background: var(--bg-mixe); }
#filter-drink:checked    ~ .filter-info .info-drink    { border-left-color: var(--col-drink);    background: var(--bg-drink); }
#filter-suess:checked    ~ .filter-info .info-suess    { border-left-color: var(--col-suess);    background: var(--bg-suess); }
#filter-herzhaft:checked ~ .filter-info .info-herzhaft { border-left-color: var(--col-herzhaft); background: var(--bg-herzhaft); }
#filter-tee:checked      ~ .filter-info .info-tee      { border-left-color: var(--col-tee);      background: var(--bg-tee); }
#filter-duft:checked     ~ .filter-info .info-duft     { border-left-color: var(--col-duft);     background: var(--bg-duft); }

/* #endregion */
/* ========================================================================== */



/* ========================================================================== */
/* #region 🟥 DIVIDER (Beitrag – horizontale Linie + Icon)                     */
/* ========================================================================== */

/* Haupt-Container für Trenner */
.kraeuter-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem 0;
    opacity: 0.6;
}

/* Linien links + rechts */
.kraeuter-divider::before,
.kraeuter-divider::after {
    content: "";
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, transparent, #ccc);
    border-radius: 5px;
}

.kraeuter-divider::after {
    background: linear-gradient(to left, transparent, #ccc);
}

/* Icon in der Mitte */
.kraeuter-divider span {
    margin: 0 1rem;
    font-size: 1.5rem;
    filter: grayscale(70%);
    opacity: 0.3;
}

/* Größere Variante (z. B. oberster Trenner) */
.kraeuter-divider.top span {
    margin: 0 1rem;
    font-size: 2.5rem;
    line-height: 1px;
    filter: grayscale(70%);
    opacity: 0.25;
}

/* #endregion */
/* ========================================================================== */




/* ========================================================================== */
/* #region 🟦 MOBILE (max-width: 1000px)                                      */
/* ========================================================================== */

@media (max-width: 1000px) {

    /* ---------------------------------------------------------------------- */
    /* 🟦 KRÄUTER-EINTRÄGE – Mobile Layout                                    */
    /* ---------------------------------------------------------------------- */

    .kraeuter-eintrag {
        grid-template-columns: 145px 1px 1fr; /* 👉 Thumb-Größe */
        gap: 12px;
        align-items: stretch;
        margin-bottom: 4rem;

        box-shadow: 2px 2px 20px rgba(0,0,0,0.15);
    }

    .kraeuter-bilder {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-self: stretch;
    }

    .kraeuter-thumb {
        border-radius: 10px;
        box-shadow: none;
    }

    .thumb-extend {
        width: 100%;
        flex-grow: 1;
        border-radius: 8px;
        background: rgba(120,150,100,0.12);
    }

    /* Linie ausblenden (nur Desktop) */
    .kraeuter-eintrag .trenner {
        visibility: hidden;
    }

    


    /* Konkret der Textbereich eines Eintrags */
    .kraeuter-text p {
    margin-bottom: 1rem;      /* kleinerer Abstand */
    }

    .kraeuter-text .ergaenzung {
        font-size: 2.0rem;
        line-height: 2.2rem;
        color: #787;

        padding-left: 1.5rem;
        border-left: 4px solid #787;
        border-radius: 12px;
    }






    /* ---------------------------------------------------------------------- */
    /* 🟦 MOBILE-ZOOM                                                         */
    /* ---------------------------------------------------------------------- */

    /* Standard */
    .kraeuter-imgbox:hover .zoom-wrap {
        opacity: 1;
        transform: translate(-15%, -50%) scale(1.3);
    }

    /* Querformat */
    .kraeuter-imgbox.quer:hover .zoom-wrap {
        transform: translate(0%, -50%) scale(1.6);
    }

    /* Hochformat */
    .kraeuter-imgbox.hoch:hover .zoom-wrap {
        transform: translate(-15%, -50%) scale(1.1);
    }



    /* ---------------------------------------------------------------------- */
    /* 🟦 BUTTONS + FILTER – Mobile                                           */
    /* ---------------------------------------------------------------------- */

    /* 👉 Stellschrauben für Mobile-Tönungen */
    :root { --btn-tint: 15%; }
    :root { --btn-text-tint: 28%; }

    /* Buttons größer, tappbar */
    .kraeuter-filter {
        gap: 24px;
        margin-top: 54px;
    }

    .kraeuter-filter label {
        padding: 40px 28px;
        font-size: 2.5rem;
        border-radius: 16px;

        box-shadow:
            inset 0 0 0 3px rgba(0,0,0,0.2),
            0 3px 8px rgba(0,0,0,0.3);
    }

    /* Trenner bei „Mixe“ entfernen */
    .btn-mixe::before {
        content: none;
        display: none;
    }

    /* Sonderbutton „Mixe“ */
    .btn-mixe {
        border-radius: 999px !important;
        padding-left: 22px !important;
        padding-right: 22px !important;

        position: relative;

        box-shadow:
            inset 0 0 0 3px rgba(0,0,0,0.2),
            0 3px 8px rgba(0,0,0,0.3) !important;
    }



    /* ---------------------------------------------------------------------- */
    /* 🟦 INFO-BOXEN – Mobile                                                 */
    /* ---------------------------------------------------------------------- */

    .filter-info > div {
        font-size: 2.0rem;
        line-height: 1.3;              /* 👈 Zeilenhöhe */
        padding: 1rem 1.5rem;
        margin-bottom: 8rem;
        margin-top: 2rem;
        border-radius: 10px;
    }

    .filter-info strong {
        white-space: nowrap;
    }



    /* ---------------------------------------------------------------------- */
    /* 🟦 ACTIVE-STATE – Mobile                                               */
    /* ---------------------------------------------------------------------- */

    #filter-alle:checked     ~ .kraeuter-filter label[for="filter-alle"],
    #filter-kraeuter:checked ~ .kraeuter-filter label[for="filter-kraeuter"],
    #filter-mixe:checked     ~ .kraeuter-filter label[for="filter-mixe"],
    #filter-drink:checked    ~ .kraeuter-filter label[for="filter-drink"],
    #filter-suess:checked    ~ .kraeuter-filter label[for="filter-suess"],
    #filter-herzhaft:checked ~ .kraeuter-filter label[for="filter-herzhaft"],
    #filter-tee:checked      ~ .kraeuter-filter label[for="filter-tee"],
    #filter-duft:checked     ~ .kraeuter-filter label[for="filter-duft"] {

        background: var(--btn-color);
        color: white;
        text-shadow: 0 0 12px rgba(0,0,0,0.6);

        border-color: color-mix(in srgb, var(--btn-color) 80%, black);
        transform: translateY(-5px);

        box-shadow:
            inset 0 0 0 5px rgba(0,0,0,0.4),
            0 4px 12px rgba(0,0,0,0.6);
    }



    /* ---------------------------------------------------------------------- */
    /* 🟦 DIVIDER – Mobile                                                    */
    /* ---------------------------------------------------------------------- */

    .kraeuter-divider {
        margin: 3rem 0;
        opacity: 0.5;
    }

    .kraeuter-divider::before,
    .kraeuter-divider::after {
        height: 2px;
        border-radius: 3px;
    }

    .kraeuter-divider span {
        margin: 0 3rem;
        font-size: 3.3rem;
        opacity: 0.3;
        filter: grayscale(80%);
    }

    .kraeuter-divider.top span {
        margin: 0 3rem;
        font-size: 5.5rem;
        line-height: 3rem;
    }






/*  🟩 KRÄUTER-SAISON (Monatsleiste + Balken) – MOBILE  */

.kraeuter-saison {
    margin-top: 1.2rem;      /* 👈 Abstand nach oben */
    margin-bottom: 1.5rem;   /* 👈 Abstand nach unten */

    font-size: 2rem;         /* 👈 Größe der Monatsbuchstaben */
    letter-spacing: 0.18rem; /* 👈 Abstand zwischen Monatsbuchstaben */
}


/* FELDER mit Monatsbuchstaben */
.kraeuter-saison .monate span {
    border-right: 1px solid #2f3b2c55; /* 👈 hauchdünne Linien mit Transparenz*/
    
    padding: 2px 0;                     /* etwas Luft */
    background:  rgba(120,150,100,0.25);    /* 👈 Dezenter Hintergrund */
    border-radius: 10px;                      /* 👈 Rundung Hintergrund */
}



/* 🟩🟩🟩 BALKEN (Standardfall: Start früher im Jahr als Ende)  */
.kraeuter-saison .balken {
    top: 2.9rem;             /* 👈 vertikale Position des Balkens */
    height: 16px;            /* 👈 Balkenhöhe (dicker für mobile) */
    border-radius: 4px;      /* 👈 Rundung */
}


/* 🟩🟩🟩 BALKEN Jahreswechsel: Start später im Jahr als Ende >> 2 Balken  */
.kraeuter-saison.jahreswechsel::before,
.kraeuter-saison.jahreswechsel::after {
    top: 2.9rem;             /* 👈 identisch zum Standard-Balken */
    height: 16px;            /* 👈 identisch zum Standard-Balken */
    border-radius: 4px;
}



/* ========================================================================== */
/* 🟧 Saison-Pause (z. B. Schädlingspause Jul–Aug)                            */
/* ========================================================================== */

.kraeuter-saison.saison-pause-jul-aug::after {
    top: 2.9rem;                     /* 👉 gleiche Y-Position wie Balken */
    left: calc(6 * (100% / 12));    /* 👉 Start bei Juli (Monat 6) */
    width: calc(2 * (100% / 12));   /* 👉 2 Monate breit (Jul + Aug) */
    height:16px;                     /* 👉 gleiche Höhe wie Balken */
    border-radius:4px;

        /* 👉 Schraffur / Muster */
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(120,150,100,0.0) 0px,
            rgba(120,150,100,0.0) 8px,
            rgba(120,150,100,0.55) 8px,
            rgba(120,150,100,0.55) 16px
        );


}






/*  ❓ TOOLTIP - Info zu den Saisonangaben, Monate, Saison-Balken  >> MOBILE   */
  .saison-info {
      right:-68px;        /* 👉 Icon näher ran (X-Position) */
      top:45%;            /* 👉 vertikale Position feinjustieren */
      transform:translateY(-50%);

      width:60px;         /* 👉 größerer Kreis */
      height:60px;        /* 👉 größerer Kreis */
      line-height:56px;   /* 👉 vertikal zentriert */
      border:2px solid #2f3b2c88;


      font-size:46px;     /* 👉 größeres Fragezeichen */
      padding-left:2px;   /* 👉 X-Korrektur (evtl. anpassen) */
  }

  .saison-info:hover::after {
    font-size:0.6em;    /* 👉 Tooltip-Schrift */

     top:130%;          /* 👉 Y-Pos */

     /*  width:240px;  */  /* 👉 BREITE - Tooltip */
      max-width:440px;     /* 👉 maximale Breite */
      width:max-content;   /* 👉 passt sich dem Text an */

      padding:8px 22px;   /* 👉 mehr Polsterung */
      letter-spacing:0; /* 👉 hier keine Spreizung, da sonst Silbentrennung greift */

      word-break: keep-all;   /* 👉 keine Silbentrennung */
      overflow-wrap: normal;  /* 👉 kein erzwungener Zeilenbruch */

  }

  .saison-info::after {
      transform:translateX(-10%) translateY(-20px); /* 👉 Start höher */
  }





}

/* #endregion */
/* ========================================================================== */