/* Händler-Stylesheet: Gallhoff – erzeugt am 19.10.2026 */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

/* Händlerspezifische Werte */
:root {
    --kundenfarbe: rgb(0, 81, 146);
    --kundenfarbe-hell: rgb(230, 238, 244); /* 10 % Kundenfarbe, 90 % Weiß */
    --kontrast: rgb(255, 255, 255); /* Schrift und Icons auf der Kundenfarbe */
    --kontrast-modal: rgb(255, 255, 255); /* Schrift in Modal und Preisliste */
    --schriftart: "Source Sans 3", sans-serif;
    --logo: url("../../resources/logos/Gallhoff.png");
    --logo-breite-header: 346px;
    --logo-breite-druck: 247px;
}

/* Obere Navigationsleiste */
.top-row {
    height: 90px !important;
}

.top-row a {
    color: var(--mcol01);
}

.top-row .nav-link {
    color: var(--mcol01);
}

.top-row .nav-icon {
    background-color: var(--mcol01);
}

.top-row .nav-link:hover {
    color: var(--bcol03);
}

.top-row .nav-link:hover * {
    color: var(--bcol03);
}

.top-row .nav-link:hover .nav-icon {
    background-color: var(--bcol03);
}

.top-row-bg {
    background-color: #ffffff;
}

/* Logo im Header und in der Druckoption */
.logo {
    background-image: var(--logo);
    max-height: 70px;
    margin-left: 20px;
    margin-top: 5px;
    width: var(--logo-breite-header);
}

.pr-logo {
    margin: auto;
    max-height: 50px;
    width: var(--logo-breite-druck);
    content: var(--logo);
    filter: invert(0) sepia(0%) brightness(100%);
}

/* Kundenname */
.kname {
    color: var(--kundenfarbe);
    text-align: left;
    font-family: var(--schriftart);
    font-weight: 600;
    font-style: normal;
    font-size: 18pt;
}

.acol01 {
    color: var(--kundenfarbe);
}

/* Navigation links */
.sidebar {
    height: 100vh;
    background-color: #ffffff;
}

.sidebar .nav-item {
    font-size: 12pt;
    text-align: left;
    font-family: var(--schriftart);
    font-weight: 400;
    font-style: normal;
}

.sidebar .nav-link {
    color: var(--mcol01);
}

.sidebar .nav-icon {
    background-color: var(--mcol01);
}

.sidebar .nav-line {
    background-color: var(--kundenfarbe);
}

.sidebar .nav-link:hover {
    background-color: var(--kundenfarbe);
    color: var(--kontrast);
}

.sidebar .nav-link:hover * {
    color: var(--kontrast);
}

.sidebar .nav-link:hover .nav-icon {
    background-color: var(--kontrast);
}

.stxt {
    color: #000000;
    background-color: #e9ecef;
    border: 0px;
    border-radius: 4px;
    cursor: pointer;
    width: 320px;
    height: 25px;
    margin-left: 5px;
    margin-bottom: 15px;
}

.perleft {
    background-color: #fbfcfa;
}

/* Buttons */
.btn-primary {
    color: var(--kontrast);
    background-color: var(--kundenfarbe);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--mcol03);
}

/* Aktionsleiste rechts */
.action-icon {
    background-color: var(--mcol01);
}

.action-link {
    color: var(--mcol01);
}

.action-link * {
    color: var(--mcol01);
}

.action-link:hover {
    background-color: var(--kundenfarbe);
    color: var(--kontrast);
}

.action-link:hover * {
    color: var(--kontrast);
}

.action-link:hover .action-label {
    color: var(--kontrast);
}

.action-link:hover .action-icon {
    background-color: var(--kontrast);
}

.special-link:hover {
    background-color: var(--kundenfarbe);
}

/* Anfrage-Kachel */
.bgacol01 {
    background-color: var(--kundenfarbe);
    color: var(--kontrast);
}

.bgacol01 * {
    color: var(--kontrast);
}

.bgacol01 .action-icon {
    background-color: var(--kontrast);
}

.bgacol01:hover {
    background-color: var(--mcol03);
    color: var(--bcol03);
}

.bgacol01:hover * {
    color: var(--bcol03);
}

.bgacol01:hover .action-label {
    color: var(--bcol03);
}

.bgacol01:hover .action-icon {
    background-color: var(--bcol03);
}

/* Modal */
.modh {
    background-color: var(--kundenfarbe);
    color: var(--kontrast-modal);
}

.modh * {
    color: var(--kontrast-modal);
}

.modb {
    background-color: #ffffff;
}

.modx {
    color: var(--kontrast-modal);
}

.modx:hover {
    color: var(--kontrast-modal);
}

/* Preisliste */
.ptop {
    background-color: var(--kundenfarbe);
    color: var(--kontrast-modal);
}

.pbase {
    background-color: var(--kundenfarbe-hell);
}