/*
Theme Name: VHS-GB
Version: 1.0
Description: A child theme of Enfold
Template: enfold
Author: Administrator
*/
@import url("../enfold/style.css");
/* Your awesome customization starts here */
/* HUSKY (WOOF) Kategorie-Filter – individuelle Farben pro Kategorie */
/* Einfügen unter: Enfold -> Allgemeiner Stil -> Quick CSS */
/* Struktur laut Inspector: li.woof_term_ID > span.woof_label_term */

/* Mehr Innenabstand (Padding) für alle Kategorie-Labels */
.woof_list_label li.woof_term_15 span.woof_label_term,
.woof_list_label li.woof_term_38 span.woof_label_term,
.woof_list_label li.woof_term_37 span.woof_label_term,
.woof_list_label li.woof_term_33 span.woof_label_term,
.woof_list_label li.woof_term_40 span.woof_label_term,
.woof_list_label li.woof_term_34 span.woof_label_term,
.woof_list_label li.woof_term_39 span.woof_label_term {
  padding: 10px 22px !important;
}

/* Sprachen und Verständigung (ID 15) – Lila */
.woof_list_label li.woof_term_15 span.woof_label_term {
  background-color: #c9a0dc !important;
  border-color: #9c6bb5 !important;
  color: #3d1f4d !important;
}

/* Digitales und Alltag (ID 38) – Blau */
.woof_list_label li.woof_term_38 span.woof_label_term {
  background-color: #4fc3f7 !important;
  border-color: #1e9fd6 !important;
  color: #0b3d54 !important;
}

/* Gesellschaft und Zukunft (ID 37) – Hellblau/Türkis */
.woof_list_label li.woof_term_37 span.woof_label_term {
  background-color: #a8e6f0 !important;
  border-color: #6fc9db !important;
  color: #144552 !important;
}

/* Gesundheit und Bewegung (ID 33) – Oliv/Grün */
.woof_list_label li.woof_term_33 span.woof_label_term {
  background-color: #bdb455 !important;
  border-color: #948c3a !important;
  color: #2f2c0f !important;
}

/* Kochen, Genuss und Begegnung (ID 40) – Rot/Koralle */
.woof_list_label li.woof_term_40 span.woof_label_term {
  background-color: #e88a8a !important;
  border-color: #d15c5c !important;
  color: #4d1414 !important;
}

/* Kreativität, Kultur und Musik (ID 34) – Rosa */
.woof_list_label li.woof_term_34 span.woof_label_term {
  background-color: #f4a9b8 !important;
  border-color: #e07890 !important;
  color: #4d1524 !important;
}

/* Natur, Umwelt und Mobilität (ID 39) – Grün */
.woof_list_label li.woof_term_39 span.woof_label_term {
  background-color: #90ee90 !important;
  border-color: #5fc95f !important;
  color: #1a3d1a !important;
}

/* Optional: sanfter Hover-Effekt für alle Labels */
.woof_list_label li.woof_term_15 span.woof_label_term:hover,
.woof_list_label li.woof_term_38 span.woof_label_term:hover,
.woof_list_label li.woof_term_37 span.woof_label_term:hover,
.woof_list_label li.woof_term_33 span.woof_label_term:hover,
.woof_list_label li.woof_term_40 span.woof_label_term:hover,
.woof_list_label li.woof_term_34 span.woof_label_term:hover,
.woof_list_label li.woof_term_39 span.woof_label_term:hover {
  filter: brightness(0.95);
  cursor: pointer;
}

.single-product .woocommerce-Tabs-panel--description > h2 {
    display: none!important;
}

.vhs-kursbeginn-uebersicht {
    margin: 6px 0 4px;
    color: #555;
    font-size: 0.95em;
    line-height: 1.4;
}

.vhs-kursbeginn-label {
    font-weight: 700;
}

/* =========================================================
   VHS Glücksburg – HUSKY-Kategorien als Icon-Kreise
   Diesen Block GANZ UNTEN in Enfold > Quick CSS einfügen.
   ========================================================= */

/* 1. Alle Kategorie-Buttons als mittiges, flexibles Raster */
.woof_list_label {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 28px 22px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Einzelne Kategorie */
.woof_list_label li {
    width: 170px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: center !important;
}

/* 3. Echter HUSKY-Button:
      Text wird visuell versteckt, das Bild übernimmt die Darstellung. */
.woof_list_label li span.woof_label_term {
    display: block !important;
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
}

/* Leichter Hover – die Filterfunktion bleibt unangetastet */
.woof_list_label li span.woof_label_term:hover,
.woof_list_label li span.woof_label_term:focus {
    transform: translateY(-4px);
    filter: brightness(0.96);
}

/* Aktive Kategorie sichtbar markieren */
.woof_list_label li span.woof_label_term.checked {
    outline: 4px solid #1f456d !important;
    outline-offset: 4px !important;
}

/* Digitales und Alltag – Produktkategorie ID 38 */
.woof_list_label li.woof_term_38 span.woof_label_term {
    background-image: url("https://www.vhs-gluecksburg.de/wp-content/uploads/2026/09/digitales-und-alltag-vhs-gluecksburg.png") !important;
}

/* Gesellschaft und Zukunft – Produktkategorie ID 37 */
.woof_list_label li.woof_term_37 span.woof_label_term {
    background-image: url("https://www.vhs-gluecksburg.de/wp-content/uploads/2026/09/geseelschaft-und-zukunft-vhs-gluecksburg.png") !important;
}

/* Gesundheit und Bewegung – Produktkategorie ID 33 */
.woof_list_label li.woof_term_33 span.woof_label_term {
    background-image: url("https://www.vhs-gluecksburg.de/wp-content/uploads/2026/09/gesundheit-und-bewegung.png") !important;
}

/* Kochen, Genuss und Begegnung – Produktkategorie ID 40 */
.woof_list_label li.woof_term_40 span.woof_label_term {
    background-image: url("https://www.vhs-gluecksburg.de/wp-content/uploads/2026/09/kochen-genuss-und-begegnung.png") !important;
}

/* Kreativität, Kultur und Musik – Produktkategorie ID 34 */
.woof_list_label li.woof_term_34 span.woof_label_term {
    background-image: url("https://www.vhs-gluecksburg.de/wp-content/uploads/2026/09/kreativitaet-kunst-musik-literatur-vhs-gluecksburg.png") !important;
}

/* Natur, Umwelt und Mobilität – Produktkategorie ID 39 */
.woof_list_label li.woof_term_39 span.woof_label_term {
    background-image: url("https://www.vhs-gluecksburg.de/wp-content/uploads/2026/09/natur-umwelt-und-mobilitaet-vhs-gluecksburg.png") !important;
}

/* Sprachen und Verständigung – Produktkategorie ID 15 */
.woof_list_label li.woof_term_15 span.woof_label_term {
    background-image: url("https://www.vhs-gluecksburg.de/wp-content/uploads/2026/09/sprachen-und-verstaendigung-vhs-gluecksburg.png") !important;
}

/* Tablet: etwas kompakter, drei bzw. vier Kreise je Reihe */
@media only screen and (max-width: 989px) {
    .woof_list_label {
        gap: 22px 16px !important;
    }

    .woof_list_label li {
        width: 145px !important;
    }

    .woof_list_label li span.woof_label_term {
        width: 130px !important;
        height: 130px !important;
    }
}

/* Smartphone: zwei Kreise nebeneinander */
@media only screen and (max-width: 767px) {
    .woof_list_label {
        gap: 20px 10px !important;
    }

    .woof_list_label li {
        width: calc(50% - 5px) !important;
    }

    .woof_list_label li span.woof_label_term {
        width: 120px !important;
        height: 120px !important;
    }
}

/* =========================================================
   VHS Glücksburg – Titel unter den HUSKY-Icon-Kreisen
   Desktop-Aufteilung: 4 Icons in Reihe 1, 3 Icons in Reihe 2
   ========================================================= */

/* Namen der Kursbereiche unter den jeweiligen Kreisen */
.woof_list_label li.woof_term_38::after {
    content: "Digitales und Alltag";
}

.woof_list_label li.woof_term_37::after {
    content: "Gesellschaft und Zukunft";
}

.woof_list_label li.woof_term_33::after {
    content: "Gesundheit und Bewegung";
}

.woof_list_label li.woof_term_40::after {
    content: "Kochen, Genuss und Begegnung";
}

.woof_list_label li.woof_term_34::after {
    content: "Kreativität, Kultur und Musik";
}

.woof_list_label li.woof_term_39::after {
    content: "Natur, Umwelt und Mobilität";
}

.woof_list_label li.woof_term_15::after {
    content: "Sprachen und Verständigung";
}

/* Einheitliche Textgestaltung */
.woof_list_label li::after {
    display: block;
    margin: 12px auto 0 !important;
    max-width: 165px;
    color: #1f456d;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.22;
    text-align: center;
}

/* =========================================================
   Desktop: exakt 4 + 3, mittig ausgerichtet
   ========================================================= */
@media only screen and (min-width: 990px) {

    .woof_list_label {
        display: grid !important;
        grid-template-columns: repeat(8, 1fr) !important;
        column-gap: 18px !important;
        row-gap: 34px !important;
        align-items: start !important;
    }

    .woof_list_label li {
        width: auto !important;
    }

    /* Erste Reihe: vier Elemente, gleichmäßig über acht Rasterspalten */
    .woof_list_label li:nth-child(1) {
        grid-column: 1 / span 2;
    }

    .woof_list_label li:nth-child(2) {
        grid-column: 3 / span 2;
    }

    .woof_list_label li:nth-child(3) {
        grid-column: 5 / span 2;
    }

    .woof_list_label li:nth-child(4) {
        grid-column: 7 / span 2;
    }

    /* Zweite Reihe: drei Elemente mittig */
    .woof_list_label li:nth-child(5) {
        grid-column: 2 / span 2;
    }

    .woof_list_label li:nth-child(6) {
        grid-column: 4 / span 2;
    }

    .woof_list_label li:nth-child(7) {
        grid-column: 6 / span 2;
    }
}

/* Tablet und Mobil: zurück zum flexiblen, automatischen Umbruch */
@media only screen and (max-width: 989px) {
    .woof_list_label {
        display: flex !important;
    }
}

/* Smartphone: Text etwas kompakter */
@media only screen and (max-width: 767px) {
    .woof_list_label li::after {
        max-width: 135px;
        margin-top: 9px !important;
        font-size: 14px;
        line-height: 1.2;
    }
}