/*
 * Navigation „Mein Bereich“ (Templates/Navigation/CustomerSub.html, Holgers Wahl Variante A): ruhige Liste mit Symbolen
 * in einer hellblauen Box (Farbe des Badges „Für Kollegen freigegeben“, customer-feusers.css), Schrift dunkelblau,
 * aktive Seite weiß mit blauem Strich links, „Abmelden“ abgesetzt in Rot. Farben und Symbole wie im Benutzermenü
 * (user-menu.css). Links mit doppelter Klasse gegen die allgemeine Linkfarbe; Rahmen ohne Kurzschreibweise.
 */
/* Die Shops legen um die Unternavigation einen Strich links (content-2cols.html: p-l-m bo-l-tiny bo-l-brand1) - hier ohne */
.bo-l-tiny:has(> .customerSubNav) {
    border-left-width: 0;
    padding-left: 0;
}
/* Rahmen und Rundung wie der Kopf der Detailansichten (customer-order-detail.css, .orderDetail__head) - Holger, 17.10.2026 */
.customerSubNav {
    background: var(--ndvAccentSoft, #eef3f8);
    border-style: solid;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--ndvAccent, #1f3b57) 12%, var(--ndvAccentSoft, #eef3f8));
    border-radius: 5px;
    padding: 14px 10px 10px;
}
.customerSubNav__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: color-mix(in srgb, var(--ndvAccent, #1f3b57) 72%, #fff);
    margin: 0 0 8px 14px;
}
.customerSubNav__item.customerSubNav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--ndvAccent, #1f3b57);
    text-decoration: none;
    border-radius: 6px;
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: transparent;
}
.customerSubNav__item i {
    width: 18px;
    text-align: center;
    color: var(--ndvAccent, #1f3b57);
    opacity: .75;
}
.customerSubNav__item.customerSubNav__item:hover,
.customerSubNav__item.customerSubNav__item:focus {
    background: color-mix(in srgb, var(--ndvAccent, #1f3b57) 5%, var(--ndvAccentSoft, #eef3f8));
    color: var(--ndvAccent, #1f3b57);
}
.customerSubNav__item.customerSubNav__item--active,
.customerSubNav__item.customerSubNav__item--active:hover {
    background: #fff;
    border-left-color: var(--ndvAccent, #1f3b57);
    font-weight: 700;
    color: var(--ndvAccent, #1f3b57);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--ndvAccent, #1f3b57) 12%, transparent);
}
.customerSubNav__item--active i {
    opacity: 1;
}
/* Unterseiten der aktiven Seite in der Unternavigation der Content-Seiten (Templates/Navigation/ContentSub.html) */
.customerSubNav__sub {
    margin: 2px 0 4px 17px;
}
.customerSubNav__item.customerSubNav__item--sub {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 14px;
}
.customerSubNav__item.customerSubNav__item--subActive {
    font-weight: 700;
    border-left-color: var(--ndvAccent, #1f3b57);
}
.customerSubNav__logout {
    margin-top: 10px;
    padding-top: 10px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: color-mix(in srgb, var(--ndvAccent, #1f3b57) 12%, var(--ndvAccentSoft, #eef3f8));
}
.customerSubNav__item.customerSubNav__item--logout,
.customerSubNav__item.customerSubNav__item--logout:hover {
    color: #b3261e;
}
.customerSubNav__item--logout i {
    color: #b3261e;
}

/*
 * Firmenadresse neben den Extra-Seiten (Record/ExtraPage/Show.html, addressSection, Holger 29.10.2026): Fläche,
 * Rahmen und Rundung wie die Navigation, nach der Navigation mit Abstand wie die Box „Ihr Ansprechpartner“.
 */
.companyAddressBox {
    background: var(--ndvAccentSoft, #eef3f8);
    border-style: solid;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--ndvAccent, #1f3b57) 12%, var(--ndvAccentSoft, #eef3f8));
    border-radius: 5px;
    padding: 16px 24px;
    color: var(--ndvAccent, #1f3b57);
}
.companyAddressBox--afterNav {
    margin-top: 16px;
}

/*
 * Box „Ihr Ansprechpartner“ unter der Navigation (Templates/Navigation/CustomerContactPerson.html, plusion-ops#38, K35).
 * Entwurf A „Aufgeräumt“ (Holger 23.10.2026): Fläche, Rahmen und Rundung wie die Navigation; Portrait links, rechts
 * daneben Abteilung als Überzeile in der Markenfarbe (txt-brand1), Name, Funktion und die Kontaktwege als Icon-Zeile
 * (bg-brand1, WhatsApp in dessen Grün); freier Link als weißer Knopf mit Pfeil über die ganze Breite.
 */
.customerContactBox {
    margin-top: 16px;
    background: var(--ndvAccentSoft, #eef3f8);
    border: 1px solid color-mix(in srgb, var(--ndvAccent, #1f3b57) 12%, var(--ndvAccentSoft, #eef3f8));
    border-radius: 6px;
    padding: 16px;
    color: var(--ndvAccent, #1f3b57);
}
.customerContactBox__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: color-mix(in srgb, var(--ndvAccent, #1f3b57) 72%, #fff);
    margin: 0 0 12px;
}
.customerContactBox__person {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.customerContactBox__portrait {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}
.customerContactBox__portrait--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ndvAccent, #1f3b57) 18%, #fff);
    font-weight: 700;
    font-size: 20px;
}
.customerContactBox__info {
    min-width: 0;
}
.customerContactBox__department {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
}
.customerContactBox__name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}
.customerContactBox__function {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.35;
    color: color-mix(in srgb, var(--ndvAccent, #1f3b57) 72%, #fff);
}
/* Kontaktwege nur als Icons, rechts vom Portrait unter Name/Funktion (Holger 23.10.2026), Text im Tooltip */
.customerContactBox__ways {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.customerContactBox__way.customerContactBox__way {
    display: block;
    text-decoration: none;
    border-radius: 50%;
    transition: opacity .2s, transform .2s;
}
.customerContactBox__way.customerContactBox__way:hover,
.customerContactBox__way.customerContactBox__way:focus {
    opacity: .85;
    transform: translateY(-1px);
}
.customerContactBox__way.customerContactBox__way:focus-visible,
.customerContactBox__link.customerContactBox__link:focus-visible {
    outline: 2px solid var(--ndvAccent, #1f3b57);
    outline-offset: 2px;
}
.customerContactBox__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
}
.customerContactBox__icon--whatsapp {
    background: #25a35a;
    font-size: 15px;
}
.customerContactBox__link.customerContactBox__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--ndvAccent, #1f3b57) 14%, #fff);
    border-radius: 5px;
    color: var(--ndvAccent, #1f3b57);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color .2s, color .2s;
}
.customerContactBox__link.customerContactBox__link:hover,
.customerContactBox__link.customerContactBox__link:focus {
    border-color: currentColor;
}