/*
 * Handy-Menü Variante A „Ebenen mit Symbolen“ (component/ks-menue/handy.html.twig, Schalter handyMenueNeu, 06.11.2026).
 * Sitzt im Shopware-Offcanvas vor dessen Kategorienliste; die ist dann ausgeblendet. In tieferen Ebenen sind auch
 * Kontakt und Einstellungen darunter aus, auf der Startebene bleiben sie.
 * Farben über die Variablen der dunklen Darstellung mit hellem Rückfall (--kd-* gibt es nur unter html.ktp-dunkel),
 * damit ktp-dunkel.css dafür keine eigenen Regeln braucht.
 */
.ks-hm {
    --ks-hm-text: var(--kd-text, #1f2a33);
    --ks-hm-grau: var(--kd-text-3, #5a6672);
    --ks-hm-linie: var(--kd-border, #e6ecf1);
    --ks-hm-flaeche: var(--kd-surface, #ffffff);
    --ks-hm-hell: var(--kd-surface-2, #e3f5fd);
    --ks-hm-leise: var(--kd-surface-3, #f4f7f9);
    --ks-hm-blau: var(--kd-accent, #156f94);
    --ks-hm-auf-blau: var(--kd-on-accent, #ffffff);
    --ks-hm-cyan: #69c8f3;
    margin: calc(-1 * var(--bs-offcanvas-padding-y, 1rem)) calc(-1 * var(--bs-offcanvas-padding-x, 1rem)) 8px;
    color: var(--ks-hm-text);
    font-size: 16px;
    line-height: 1.35;
}

.ks-hm ~ .navigation-offcanvas-container {
    display: none !important;
}

.ks-hm.is-tief ~ .navigation-offcanvas-actions-container {
    display: none !important;
}

.ks-hm__ebene[hidden] {
    display: none !important;
}

.ks-hm__liste,
.ks-hm__links,
.ks-hm__kacheln {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Suche */
.ks-hm__suche {
    display: flex;
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ks-hm-linie);
}

.ks-hm__feld {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--kd-border-strong, #cfdbe4);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: var(--kd-input, #ffffff);
    color: var(--ks-hm-text);
    font: inherit;
    font-size: 15px;
}

.ks-hm__lupe {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 44px;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: var(--kd-accent, var(--ks-hm-cyan));
    color: var(--kd-on-accent, #0b1520);
}

/* Zeilen */
.ks-hm__zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 6px 16px;
    border: 0;
    border-bottom: 1px solid var(--ks-hm-linie);
    background: transparent;
    color: var(--ks-hm-text);
    font: inherit;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ks-hm__zeile:hover,
.ks-hm__zeile:focus-visible {
    background: var(--ks-hm-leise);
    color: var(--ks-hm-text);
}

.ks-hm__zeile--gross {
    min-height: 58px;
    font-weight: 500;
}

.ks-hm__zeile--aktion .ks-hm__name {
    color: var(--kd-accent, #b42318);
    font-weight: 600;
}

.ks-hm__name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Pfeil rechts (weiter, aufklappen) und links (zurück) aus Rahmenlinien statt 70 gleicher SVGs in der Vorlage */
.ks-hm__zeile--weiter::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin: 0 6px 0 auto;
    border-top: 2px solid var(--ks-hm-grau);
    border-right: 2px solid var(--ks-hm-grau);
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.ks-hm__auf[open] > .ks-hm__zeile--weiter::after {
    transform: rotate(135deg);
}

.ks-hm__zurueck::before {
    content: "";
    width: 9px;
    height: 9px;
    margin: 0 6px 0 8px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
}

.ks-hm__code {
    flex: none;
    font-size: 13px;
    color: var(--ks-hm-grau);
}

.ks-hm__neu {
    border-top: 6px solid var(--ks-hm-leise);
}

/* Symbole: 40 px Kästchen, die Kategorie-Symbole wie auf der Startseite (Linie dunkel, Fläche CI-Blau hell, Akzent Linkblau) */
.ks-hm__sym {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ks-hm-hell);
    color: var(--kd-text, #383838);
    overflow: hidden;
}

.ks-hm__sym .ks-ico {
    display: block;
    width: 30px;
    height: 30px;
}

.ks-hm__sym .ks-ico .f {
    fill: #69c8f3;
    fill-opacity: .32;
}

.ks-hm__sym .ks-ico .a {
    stroke: var(--kd-accent, #0e7daf);
}

.ks-hm__sym .ks-ico .p {
    fill: currentColor;
    stroke: none;
}

.ks-hm__sym--buchstabe,
.ks-hm__sym--bild {
    background: var(--ks-hm-leise);
    color: var(--ks-hm-grau);
    font-size: 16px;
    font-weight: 600;
}

.ks-hm__sym--aktion {
    background: var(--kd-surface-2, #fdecea);
    color: var(--kd-accent, #b42318);
    font-weight: 700;
}

.ks-hm__sym--klein .ks-mm__ico,
.ks-hm__sym--klein .ks-mm__ico-platz {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: scale-down;
}

.ks-hm__sym--klein .ks-mm__ico .ks-ico {
    width: 26px;
    height: 26px;
    stroke-width: 5;
}

.ks-hm__sym--bild img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
}

.ks-hm__sym--bild .ks-hm__ersatz {
    display: none;
}

.ks-hm__sym--bild.is-ohne-bild .ks-hm__ersatz {
    display: block;
}

/* Kopf einer Ebene: Zurück und Titel */
.ks-hm__kopf {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 8px 0;
}

.ks-hm__zurueck {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    padding: 0 8px 0 2px;
    border: 0;
    background: transparent;
    color: var(--ks-hm-blau);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
}

.ks-hm__titel {
    margin: 0;
    padding: 2px 8px 4px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ks-hm-text);
    outline: none;
}

.ks-hm__alle {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    color: var(--ks-hm-blau);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--ks-hm-linie);
}

.ks-hm__mehr {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    color: var(--ks-hm-blau);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--ks-hm-linie);
}

.ks-hm__grau {
    margin: 0;
    padding: 18px 16px 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ks-hm-grau);
}

/* Aufklappen (Marken, Unterpunkte) */
.ks-hm__auf > summary {
    list-style: none;
}

.ks-hm__auf > summary::-webkit-details-marker {
    display: none;
}

.ks-hm__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 16px 16px;
    border-bottom: 1px solid var(--ks-hm-linie);
    background: var(--ks-hm-leise);
}

.ks-hm__chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--kd-border-strong, #cfdbe4);
    border-radius: 20px;
    background: var(--ks-hm-flaeche);
    color: var(--ks-hm-text);
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
}

.ks-hm__chip:hover {
    border-color: var(--ks-hm-blau);
    color: var(--ks-hm-blau);
}

.ks-hm__chip--alle {
    border-color: var(--ks-hm-blau);
    color: var(--ks-hm-blau);
    font-weight: 500;
}

/* Knöpfe: Hilfe-Kasten, Werkzeuge, Marken · Für Firmenkunden · Anfrage */
.ks-hm__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 16px 0;
}

.ks-hm__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ks-hm__knoepfe--rand {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ks-hm-linie);
}

.ks-hm__knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--ks-hm-blau);
    border-radius: 8px;
    background: var(--ks-hm-flaeche);
    color: var(--ks-hm-blau);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.ks-hm__knopf:hover {
    color: var(--ks-hm-blau);
    background: var(--ks-hm-leise);
}

/* .ks-hm a …: stärker als „html.ktp-dunkel a“ (alle Links gelb), sonst stünde im Dunkeln Gelb auf Gelb */
.ks-hm a.ks-hm__knopf--voll,
.ks-hm a.ks-hm__knopf--voll:hover {
    background: var(--ks-hm-blau);
    color: var(--ks-hm-auf-blau);
}

.ks-hm a.ks-hm__zeile,
.ks-hm a.ks-hm__zeile:hover,
.ks-hm a.ks-hm__kachel,
.ks-hm a.ks-hm__kachel:hover {
    color: var(--ks-hm-text);
}

.ks-hm__hilfe {
    margin: 16px 16px 4px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--ks-hm-hell);
}

.ks-hm__hilfe-titel {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
}

/* Kacheln (Variante 2, ohne Unterpunkte): zwei Spalten, nur bei gerader Zahl */
.ks-hm__kacheln {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ks-hm-linie);
}

.ks-hm__kachel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: 100%;
    min-height: 96px;
    padding: 12px;
    border: 1px solid var(--ks-hm-linie);
    border-radius: 12px;
    background: var(--ks-hm-flaeche);
    color: var(--ks-hm-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    hyphens: auto;
    overflow-wrap: break-word;
}

.ks-hm__kachel:hover {
    border-color: var(--ks-hm-blau);
    color: var(--ks-hm-text);
}

.ks-hm__fuss {
    margin: 0;
    padding: 16px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ks-hm-grau);
}

.ks-hm__fuss strong {
    color: var(--ks-hm-text);
}

.ks-hm__fuss a {
    color: var(--ks-hm-blau);
}