/* ============================================================================
   aqua-profi: Unterkategorien ohne Bild als Listenansicht
   ----------------------------------------------------------------------------
   Greift nur, wenn AquaProfi/productlist/header.tpl der Row zusaetzlich die Klasse
   .content-cats-list gibt. Das passiert genau dann, wenn KEINE der
   Unterkategorien ein eigenes Kategoriebild hat (alle wuerden auf
   gfx/keinBild.gif bzw. das "Bild folgt"-Platzhalterbild zurueckfallen).
   Sobald mindestens eine Unterkategorie ein Bild bekommt, greift wieder
   die normale NOVA-Kacheldarstellung.
   ============================================================================ */

.content-cats-small.content-cats-list {
    margin-bottom: 2rem;
    border-top: 1px solid rgba(128, 128, 128, 0.28);
}

.content-cats-small.content-cats-list > div {
    margin-bottom: 0;
}

.content-cats-list .sub-categories-list {
    display: block;
    height: auto;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.28);
    transition: background-color 0.15s ease-in-out;
}

.content-cats-list .sub-categories-list:hover {
    background-color: rgba(128, 128, 128, 0.08);
}

/* Titelzeile linksbuendig statt zentriert wie in der Kachelansicht */
.content-cats-list .sub-categories-list .caption {
    margin-bottom: 0.15rem;
    text-align: left;
    font-weight: 600;
}

.content-cats-list .sub-categories-list .caption a {
    font-size: 1rem;
    text-decoration: none;
}

.content-cats-list .sub-categories-list .caption a:hover {
    text-decoration: underline;
}

/* Unterkategorien der 2. Ebene: schlanke, linksbuendige Liste */
.content-cats-list .subcategories-children-list {
    margin: 0.35rem 0 0;
    padding-left: 0.85rem;
    list-style: none;
}

.content-cats-list .subcategories-children-list li {
    margin: 0 0 0.15rem 0;
    line-height: 1.5;
}

.content-cats-list .subcategories-children-list li a {
    font-size: 0.875rem;
    text-decoration: none;
}

.content-cats-list .subcategories-children-list li a:hover {
    text-decoration: underline;
}

/* ============================================================================
   aqua-profi: Pfeil am Button "Mehr Informationen" (Kategorietext, Handy)
   ----------------------------------------------------------------------------
   Die Regeln fuer den Umschalter stehen im "Eigenen SCSS" der Template-
   Einstellungen; dort ist das Pfeilzeichen beim Einfuegen zu "..." geworden.
   Diese Datei wird nach dem Theme geladen und setzt den Pfeil samt Drehung neu.
   ============================================================================ */

.ap-desc-toggle::after {
    content: "\276F";          /* eingeklappt nach unten, aufgeklappt nach oben */
    display: inline-block;
    margin-left: .4em;
    transform: rotate(90deg);
    transition: transform .2s ease;
    font-size: 1.15em;
    line-height: 1;
}

.ap-desc-toggle[aria-expanded="true"]::after {
    transform: rotate(-90deg);
}