/* Kopfzeile des Geschäftsbereichs (Händler/Partner).
 *
 * Ergänzt `navbar.css`, ersetzt es nicht: die Leiste benutzt dieselben Klassen
 * wie überall, damit `header-scroll.js` und das Grundlayout unverändert
 * greifen. Hier stehen nur die zwei Unterschiede:
 *   1. Der Platz der Suchleiste trägt Bereichsname und optionale Sprungmarken.
 *   2. Der kompakte Zustand darf nicht leer laufen.
 *
 * WICHTIG: Diese Datei muss NACH `navbar.css` geladen werden. `_navbar_partner.html`
 * bindet beide in der richtigen Reihenfolge ein.
 *
 * Farben bewusst als feste Werte und nicht über CSS-Variablen: die Leiste läuft
 * auf sieben Seiten, die eigene Variablensätze mitbringen oder eben nicht.
 * #007fa3 / #eaf7fb sind die Projekt-Töne aus `navbar.css` und `base.css`.
 */

.gw-partner-mitte {
    flex: 1 1 auto;
    align-items: center;
    gap: 1.5rem;
    margin: 0 2rem;
    min-width: 0;
}

.gw-partner-bereich {
    background: #eaf7fb;
    border: 1px solid #cceaf3;
    border-radius: 999px;
    color: #007fa3;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .28rem .8rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.gw-partner-link {
    color: #6b7785;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}

.gw-partner-link:hover,
.gw-partner-link:focus {
    color: #007fa3;
}

/* --- Eingeloggter Händlerbereich ---------------------------------------
 *
 * Dieselbe Leiste, nur trägt die Mitte hier die Bereiche des Kontos statt der
 * Sprungmarken einer Werbeseite. Fünf Punkte statt zwei, deshalb ein engerer
 * Abstand; sie dürfen auf keinem Bildschirm wegfallen, denn über sie läuft die
 * gesamte Navigation des Kontos.
 */

.gw-partner-mitte.gw-bereiche {
    gap: 1.15rem;
}

.gw-partner-link.aktiv {
    color: #007fa3;
    position: relative;
}

.gw-partner-link.aktiv::after {
    background: #00a8cc;
    border-radius: 2px;
    bottom: -7px;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
}

/* Der Kontostand entscheidet, ob die Produkte des Händlers überhaupt
 * ausgeliefert werden. Er steht deshalb in der Leiste und nicht erst hinter
 * einem Klick. Leer und knapp bekommen eigene Farben, weil beides eine
 * Handlung verlangt. */
.gw-guthaben {
    align-items: baseline;
    background: #eaf7fb;
    border: 1px solid #cceaf3;
    border-radius: 999px;
    color: #007fa3;
    display: inline-flex;
    gap: .4rem;
    font-size: .82rem;
    margin-right: .6rem;
    padding: .3rem .8rem;
    text-decoration: none;
    white-space: nowrap;
}

.gw-guthaben:hover,
.gw-guthaben:focus {
    background: #ddf1f8;
    border-color: #00a8cc;
    color: #007fa3;
}

.gw-guthaben b {
    font-size: 1rem;
    letter-spacing: -.01em;
}

.gw-guthaben.knapp {
    background: #fff6e5;
    border-color: #f0d49a;
    color: #8a5a00;
}

.gw-guthaben.leer {
    background: #fdecec;
    border-color: #f2b8b8;
    color: #b02a2a;
}

/* Der kompakte Zustand blendet auf dem Handy alles außer der Suchleiste aus
 * (navbar.css). Ohne Suchleiste bliebe hier eine leere Leiste stehen, deshalb
 * bleibt die obere Zeile mit Logo und Konto sichtbar.
 *
 * `nav.` steht davor, weil `navbar.css` dieselbe Regel mit `!important` führt.
 * Bei gleicher Spezifität entschiede sonst die Ladereihenfolge; das zusätzliche
 * Element macht die Regel unabhängig davon eindeutig. */
@media (max-width: 767.98px) {
    nav.navbar.navbar-compact #mobileTopBar {
        display: flex !important;
    }
}

/* Sprungziele dürfen nicht unter der festen Kopfzeile landen.
 *
 * Die Leiste ist je nach Breite 100px, 113px oder 151px hoch. Ohne diesen
 * Abstand landet ein Klick auf "Ablauf" so, dass die Überschrift genau hinter
 * der Kopfzeile verschwindet und man erst wieder hochscrollen muss.
 *
 * Die 170px im mittleren Bereich sind kein Tippfehler: dort ist die Leiste am
 * höchsten, weil die Bedienelemente umbrechen (gemessen 2026-08-20). */
section[id],
h2[id],
h3[id] {
    scroll-margin-top: 120px;
}

@media (min-width: 768px) and (max-width: 799.98px) {
    section[id],
    h2[id],
    h3[id] {
        scroll-margin-top: 170px;
    }
}

/* Dunkle Darstellung: dieselben Umschaltklassen wie im übrigen Projekt. */
.dark-mode .gw-partner-bereich {
    background: rgba(0, 168, 204, .12);
    border-color: rgba(0, 168, 204, .3);
    color: #4fc3dd;
}

.dark-mode .gw-partner-link {
    color: #a0aab5;
}

.dark-mode .gw-partner-link:hover,
.dark-mode .gw-partner-link:focus,
.dark-mode .gw-partner-link.aktiv {
    color: #4fc3dd;
}

.dark-mode .gw-guthaben {
    background: rgba(0, 168, 204, .12);
    border-color: rgba(0, 168, 204, .3);
    color: #4fc3dd;
}

.dark-mode .gw-guthaben.knapp {
    background: rgba(240, 212, 154, .12);
    border-color: rgba(240, 212, 154, .35);
    color: #e2b96b;
}

.dark-mode .gw-guthaben.leer {
    background: rgba(220, 90, 90, .14);
    border-color: rgba(220, 90, 90, .35);
    color: #ef8a8a;
}