/* =========================================================
   Businesskunden – eigene Styles für den Seiteninhalt.
   Basis-Layout/Fonts kommen aus dem übernommenen Original-CSS.

   >>> AKZENTFARBE ZENTRAL TAUSCHEN: --bk-accent /
   >>> --bk-accent-dark (+ --bk-accent-rgb als R,G,B-Tripel
   >>> derselben Farbe für rgba()-Transparenzen) ändern – Menü,
   >>> Buttons, Formulare, Scroll-Seiten und Original-Widgets
   >>> ziehen alle mit.
   ========================================================= */

:root {
    --bk-accent:      #4A6E96;
    --bk-accent-dark: #3C5A7C;
    --bk-accent-rgb:  74, 110, 150;
    --bk-muted:  #54595F;
    --bk-light:  #FAFAFA;
}

/* Original-Layout (Elementor-Kit) auf die zentrale Akzentfarbe mappen.
   Dazu die übrigen Kit-Globalfarben von mainzl.group (post-5.css wird
   nicht mitgeladen) – ohne sie bleibt u. a. das Burger-Dropdown
   (Tablet/Mobile) transparent und die gepunkteten Trennlinien fehlen.
   Originalwerte: 3849019=#FAFAFA, primary/secondary/text=#54595F. */
.elementor-kit-5 {
    --e-global-color-accent:  var(--bk-accent);
    --e-global-color-ac5da78: var(--bk-accent);
    --e-global-color-3849019: var(--bk-light);
    --e-global-color-primary: var(--bk-muted);
    --e-global-color-secondary: var(--bk-muted);
    --e-global-color-text: var(--bk-muted);
}

/* Schloss-Symbol im Menü */
.bk-lock {
    font-size: .78em;
    opacity: .85;
    margin-right: 2px;
}

/* Burger-Dropdown (Tablet/Mobile): Das rechte CTA-Menü (Termin buchen ·
   Login/Abmelden) ist ein eigenes Nav-Widget und wäre im Burger sonst
   unsichtbar – header.php rendert es dort mit ins Dropdown, getrennt
   durch diese Linie; die CTA-Einträge danach sind hervorgehoben. */
.bk-menu-cta-sep {
    height: 8px;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, .06);
    border: none !important;   /* keine dotted-Trennlinie aus dem Original-CSS */
}
/* Im Burger sind alle Punkte der obersten Ebene Abschnittsüberschriften –
   unabhängig davon, ob Seitenmenü oder Portale/Konto zuerst stehen
   (Elementor-Element-CSS setzt 400 mit höherer Spezifität) */
nav.elementor-nav-menu--dropdown > ul > li > a.elementor-item {
    font-weight: 700 !important;
}

/* =========================================================
   Burger-Menü: ein durchgehendes Menü statt Klappebenen
   -----------------------------------------------------
   Im aufgeklappten Burger (Mobil, und falls sichtbar Tablet) stehen
   Seitenmenü, Portale und Konto zusammen in EINER Liste: die
   Untermenüs sind dauerhaft offen, die Elternpunkte werden zu
   Abschnittsüberschriften. Sonst müsste man sich auf dem Handy durch
   bis zu drei Ebenen tippen.

   Wichtig: nur `nav.elementor-nav-menu--dropdown` ansprechen – dieselbe
   Klasse tragen im Original-Markup auch die Desktop-Untermenüs (<ul>),
   die weiterhin beim Überfahren aufklappen sollen.
   ========================================================= */
nav.elementor-nav-menu--dropdown .sub-menu {
    display: block !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    box-shadow: none !important;
    padding: 0 0 6px !important;
    background: transparent !important;
}

/* Der Klapp-Pfeil entfällt – es gibt nichts mehr aufzuklappen */
nav.elementor-nav-menu--dropdown .menu-item-has-children > a .sub-arrow { display: none !important; }

/* Unterpunkte eingerückt und etwas leiser als die Überschriften */
nav.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
    padding-left: 34px !important;
    font-size: 15px !important;
    opacity: .78;
}
nav.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item:hover,
nav.elementor-nav-menu--dropdown .sub-menu a.elementor-item-active { opacity: 1; }

/* Konto-Abschnitt: Profilzeichen und Name in einer Zeile */
nav.elementor-nav-menu--dropdown a.elementor-item { display: flex; align-items: center; }

/* Mobile: Markenlogo-Leiste (VW/Audi/Škoda/Seat/Cupra/VW-Nfz) im
   Mobile-Header (Container 8b7ab0b in header.php) ausblenden – sie
   macht den Header unnötig hoch und kommt dem Burger-Menü in die
   Quere. Desktop- und Tablet-Header behalten ihre Logoleisten. */
@media (max-width: 767px) {
    .elementor-element-8b7ab0b { display: none !important; }
}

/* Tablet-Header (768–1024px): horizontale Menüzeile wie auf dem
   Desktop statt Burger (Markup: bk-tablet-menubar in header.php).
   Das Burger-Widget des Tablet-Headers entfällt dafür – es existiert
   nur dort, die Regel braucht deshalb keine Media Query. */
.elementor-element-4bef223 { display: none !important; }   /* Elementor-Widget-CSS setzt display:flex mit höherer Spezifität */

.bk-tablet-menubar {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 2px 12px 12px;
}

.bk-tablet-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 20px;
    margin: 0;
    padding: 0;
}

.bk-tablet-menu li { position: relative; margin: 0; padding: 0; }

.bk-tablet-menu a {
    display: inline-block;
    padding: 6px 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    white-space: nowrap;
}

.bk-tablet-menu a:hover,
.bk-tablet-menu a.elementor-item-active { color: var(--bk-accent, #4A6E96); }

.bk-tablet-menu .sub-arrow svg {
    width: 9px;
    height: 9px;
    margin-left: 5px;
    fill: currentColor;
    vertical-align: baseline;
}

/* Untermenüs als CSS-Hover-Dropdown; die Elementor-Klasse
   elementor-nav-menu--dropdown am selben UL wird übersteuert */
.bk-tablet-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 950;
    min-width: 230px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

.bk-tablet-menu li:hover > .sub-menu,
.bk-tablet-menu li:focus-within > .sub-menu { display: block; }

.bk-tablet-menu .sub-menu li { white-space: nowrap; }

.bk-tablet-menu .sub-menu a {
    display: block;
    padding: 8px 16px;
}

/* Anker unter der Sticky-Navigation freihalten
   (--bk-header-offset wird von onepager.js live gemessen) */
section[id], div[id^="bk-"] {
    scroll-margin-top: calc(var(--bk-header-offset, 64px) + 20px);
}

.bk-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.bk-section { padding: 70px 0; }
.bk-section--light { background: var(--bk-light); }

.bk-section__intro { max-width: 760px; margin-bottom: 40px; }
.bk-section__intro h2 { margin-bottom: 14px; }
.bk-section__intro p { color: var(--bk-muted); }

/* =========================================================
   Hero
   ========================================================= */
.bk-hero {
    background: #000;
    color: #fff;
    padding: 90px 0;
}

.bk-hero--page { padding: 64px 0; }

.bk-hero h1 { color: #fff; max-width: 820px; margin-bottom: 18px; }
.bk-hero h1 span { color: var(--bk-accent); }

.bk-hero p {
    max-width: 680px;
    font-size: 19px;
    color: #d8d8d8;
    margin-bottom: 0;
}

.bk-hero p + .bk-hero__actions { margin-top: 32px; }
.bk-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Startseite: Teamfoto (assets/img/team-treppe-breit.jpg – erweiterte
   Fassung mit freier Wandfläche links) füllt die rechte Hälfte der
   schwarzen Herofläche. Kein Rahmen, keine Bildunterschrift –
   zwei schwarze Verläufe über dem Foto (.bk-hero__photo::after) blenden es
   nach links (hinter Text und Buttons) sowie nach oben und unten ins
   Schwarz der Fläche aus. Bis 1024 px liegt das Foto in voller Breite
   unter den Buttons. */
.bk-hero--home {
    position: relative;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 70vh, 760px);
}

.bk-hero__inner {
    position: relative;
    z-index: 1;          /* Text liegt über dem Foto */
    width: 100%;
    padding-top: 80px;
    padding-bottom: 80px;
}

.bk-hero--home .bk-hero__text { max-width: 560px; }

.bk-hero__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;   /* linkes Bilddrittel ist leere Wand – dort blendet es aus */
    z-index: 0;
    pointer-events: none;
}

.bk-hero__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

/* Übergang ins Schwarze: links hinter den Text, oben und unten zu den
   Kanten. Deckendes Schwarz, weil die Herofläche selbst #000 ist. */
.bk-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, #000 0%, rgba(0, 0, 0, .88) 16%, rgba(0, 0, 0, .35) 32%, rgba(0, 0, 0, 0) 52%),
        linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 78%, #000 100%);
}

/* =========================================================
   Buttons
   ========================================================= */
.bk-btn {
    display: inline-block;
    padding: 14px 30px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
}

.bk-btn--accent { background: var(--bk-accent); color: #fff; }
.bk-btn--accent:hover { background: var(--bk-accent-dark); color: #fff; transform: translateY(-2px); }

.bk-btn--outline { border: 2px solid #fff; color: #fff; background: transparent; }
.bk-btn--outline:hover { background: #fff; color: #000; }

.bk-btn--dark { background: #000; color: #fff; }
.bk-btn--dark:hover { background: #222; color: #fff; }

/* =========================================================
   Karten
   ========================================================= */
.bk-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.bk-card {
    background: #fff;
    border: 1px solid #ececec;
    padding: 34px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow .2s, transform .2s;
}

.bk-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .09);
    transform: translateY(-4px);
}

.bk-card h3 { color: #000; font-size: 21px; }
.bk-card p { font-size: 15px; color: var(--bk-muted); flex: 1; margin: 0; }

.bk-card__link {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bk-accent);
    text-decoration: none;
}

.bk-card__link::after { content: " →"; }

/* =========================================================
   Text-Bild-Sektion: Einleitung neben einem Foto
   (Fotos aus dem Shooting, assets/img/*.jpg)
   ========================================================= */
.bk-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    margin-bottom: 40px;
}

.bk-split .bk-section__intro { margin-bottom: 0; }

.bk-split__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
}

/* Bild links statt rechts (Abwechslung bei mehreren Sektionen) */
.bk-split--media-first .bk-split__media { order: -1; }

@media (max-width: 900px) {
    .bk-split { grid-template-columns: 1fr; gap: 28px; }
    .bk-split--media-first .bk-split__media { order: 0; }
}

/* =========================================================
   Adminportal: Team & Ansprechpartner
   ========================================================= */
.bk-teamadmin__kopf {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.bk-teamadmin__kopf h3 { margin: 0; flex: 1; }

.bk-teamadmin__foto {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

.bk-teamadmin__foto--leer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ececec;
    color: var(--bk-muted);
    font-size: 24px;
    font-weight: 700;
}

.bk-teamadmin__werkzeuge { display: flex; gap: 8px; }
.bk-teamadmin__werkzeuge form { display: flex; gap: 8px; }

.bk-teamadmin--aus { opacity: .6; }

.bk-teamadmin__aktiv {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-weight: 400;
}

/* =========================================================
   Formulare (Demo, noch ohne Versand)
   ========================================================= */
.bk-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 22px;
    max-width: 760px;
}

.bk-form--narrow { max-width: 560px; grid-template-columns: 1fr; }

.bk-field { display: flex; flex-direction: column; gap: 6px; }
.bk-field--full { grid-column: 1 / -1; }

.bk-field label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bk-muted);
}

.bk-field input,
.bk-field select,
.bk-field textarea {
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.4;          /* zusammen mit dem Padding die gemeinsame Höhe */
    font-family: inherit;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #fff;
    color: #000;
    transition: border-color .15s, box-shadow .15s;
}

/* Auswahlfelder: die native Darstellung ignoriert Padding und Zeilenhöhe –
   die Felder wirken dadurch flacher als die Textfelder daneben. Mit
   appearance:none greift dieselbe Geometrie wie oben; der Pfeil kommt als
   eingebettetes SVG (kein externes Bild – dieselbe Linie wie bei Fonts
   und Vendor-CSS). */
.bk-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666666' d='M1.41 0 6 4.58 10.59 0 12 1.42l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px 7px;
}

/* Datumsfeld: WebKit gibt dem inneren Editor eigenes Padding und macht das
   Feld dadurch ein paar Pixel höher als die Nachbarfelder. */
.bk-field input[type="date"]::-webkit-datetime-edit { padding: 0; line-height: 1.4; }
.bk-field input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }

/* Terminwahl: Das Datum ist der Einstieg in die Buchung – es steuert die
   Liste der freien Uhrzeiten darunter. Deshalb bewusst größer als die
   übrigen Felder und mit gut treffbarer Kalender-Schaltfläche. */
.bk-field--datum { grid-column: 1 / -1; }
.bk-field--datum input[type="date"] {
    max-width: 320px;
    height: 58px;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 16px;
    cursor: pointer;
}
.bk-field--datum input[type="date"]::-webkit-calendar-picker-indicator {
    width: 24px;
    height: 24px;
    padding: 4px;
    margin-left: 8px;
    opacity: .55;
    cursor: pointer;
    transition: opacity .15s;
}
.bk-field--datum input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

@media (max-width: 767px) {
    .bk-field--datum input[type="date"] { max-width: none; }
}

.bk-field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }

.bk-field input:focus,
.bk-field select:focus,
.bk-field textarea:focus {
    outline: none;
    border-color: var(--bk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-accent) 25%, transparent);
}

.bk-form .bk-btn { grid-column: 1 / -1; justify-self: start; }

.bk-form__note {
    grid-column: 1 / -1;
    font-size: 13px;
    color: #999;
}

/* Formular-Sektion auf dunklem Grund */
.bk-formsection--dark .bk-field label { color: #b5b5b5; }
.bk-formsection--dark .bk-field input,
.bk-formsection--dark .bk-field select,
.bk-formsection--dark .bk-field textarea {
    background: #161616;
    border-color: #333;
    color: #fff;
}
.bk-formsection--dark .bk-field select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23b5b5b5' d='M1.41 0 6 4.58 10.59 0 12 1.42l-6 6-6-6z'/%3E%3C/svg%3E");
}
.bk-formsection--dark .bk-form__note { color: #777; }

/* =========================================================
   Ansprechpartner-Karten
   ========================================================= */
.bk-persons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.bk-person {
    display: flex;
    gap: 20px;
    align-items: center;
    background: #fff;
    border: 1px solid #ececec;
    padding: 22px;
}

.bk-person img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

.bk-person h3 { font-size: 19px; color: #000; margin-bottom: 2px; }
.bk-person__role { font-size: 13px; color: var(--bk-muted); margin-bottom: 8px; }
.bk-person a { display: block; font-size: 14px; color: #000; text-decoration: none; }
.bk-person a:hover { color: var(--bk-accent); }

/* =========================================================
   Geschützter Bereich / Zugangsseite
   ========================================================= */
.bk-access {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ececec;
    padding: 42px 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .06);
}

.bk-access__icon { font-size: 40px; margin-bottom: 12px; }
.bk-access h1 { font-size: 30px; margin-bottom: 10px; }
.bk-access p { color: var(--bk-muted); margin-bottom: 8px; }

.bk-access__error {
    background: #fdecec;
    border: 1px solid #f5b5b5;
    color: #b02a2a;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin: 14px 0;
}

.bk-access form { margin-top: 22px; }

.bk-access__hint {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #eee;
    font-size: 14px;
    color: var(--bk-muted);
}

/* Hinweisleiste in freigeschalteten Bereichen */
.bk-unlocked {
    background: #f4f9e4;
    border-bottom: 1px solid #dfeab8;
    font-size: 13px;
    color: #5c6f14;
}

.bk-unlocked .bk-container {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.bk-unlocked a { color: inherit; text-decoration: underline; }

/* =========================================================
   Newsletter-Streifen (vor dem Footer)
   ========================================================= */
.bk-newsletter {
    background: #1C1C1C;
    color: #fff;
    padding: 46px 0;
}

.bk-newsletter__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.bk-newsletter h2 { color: #fff; font-size: 24px; margin-bottom: 6px; }
.bk-newsletter p { color: #b5b5b5; font-size: 15px; margin: 0; }

.bk-newsletter__form { display: flex; gap: 10px; flex-wrap: wrap; }

.bk-newsletter__form input {
    padding: 12px 16px;
    font-size: 15px;
    font-family: inherit;
    border: 1px solid #3a3a3a;
    border-radius: 999px;
    background: #111;
    color: #fff;
    min-width: 210px;
}

.bk-newsletter__form input:focus { outline: none; border-color: var(--bk-accent); }

/* =========================================================
   Platzhalter-/404-Seite
   ========================================================= */
.bk-placeholder { padding: 90px 0; text-align: center; }
.bk-placeholder h1 { margin-bottom: 16px; }
.bk-placeholder p { color: var(--bk-muted); max-width: 620px; margin: 0 auto 12px; }
.bk-placeholder code {
    background: var(--bk-light);
    border: 1px solid #e5e5e5;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 15px;
}
.bk-placeholder .bk-btn { margin-top: 24px; }

/* Hinweis-Badge für geplante Inhalte (z. B. AHD-Einbindung) */
.bk-planned {
    display: inline-block;
    background: var(--bk-light);
    border: 1px dashed #c9c9c9;
    color: var(--bk-muted);
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 8px;
    margin-top: 10px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
    .bk-cards { grid-template-columns: 1fr 1fr; }
    .bk-persons { grid-template-columns: 1fr; }

    /* Hero gestapelt: Foto in voller Breite unter den Buttons, oben und unten
       ins Schwarz auslaufend – nebeneinander bliebe zu wenig Platz für
       Text und Gruppenbild. */
    .bk-hero--home { display: block; min-height: 0; padding: 0 0 34px; }
    .bk-hero__inner { padding-top: 60px; padding-bottom: 34px; }
    .bk-hero--home .bk-hero__text { max-width: 680px; }
    .bk-hero__photo { position: static; width: auto; aspect-ratio: 5 / 4; }
    .bk-hero__photo img { object-position: 92% 35%; }
    .bk-hero__photo::after {
        background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 74%, #000 100%);
    }
}

@media (max-width: 640px) {
    .bk-hero { padding: 60px 0; }
    .bk-hero--home { padding: 0 0 26px; }
    .bk-hero__inner { padding-top: 50px; padding-bottom: 28px; }
    .bk-hero__photo { aspect-ratio: 1 / 1; }
    .bk-hero__photo img { object-position: 100% 40%; }
    .bk-cards { grid-template-columns: 1fr; }
    .bk-form { grid-template-columns: 1fr; }
    .bk-wizard__inhalt { grid-template-columns: 1fr; }
    .bk-newsletter__inner { flex-direction: column; align-items: flex-start; }
    .bk-access { padding: 30px 22px; }
}

/* Logo „BusinesskundenCenter #Part of the MainzlGroup“: fest im PNG
   eingebacken – Header nutzt die Variante mit schwarzem Hintergrund
   (assets/img/logo-businesskundencenter-schwarz.png); für dunkle Flächen
   ohne Box liegt die transparente weiße Variante daneben
   (logo-businesskundencenter-weiss.png). Kein CSS-Overlay mehr nötig. */

/* =========================================================
   Kundenportal: Kunden-Tabs, Fahrzeugtabelle, Status
   ========================================================= */
.bk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}

.bk-tab {
    padding: 10px 22px;
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bk-muted);
    text-decoration: none;
    transition: all .15s;
}

.bk-tab:hover { border-color: var(--bk-accent); color: #000; }

.bk-tab.is-active {
    background: #000;
    border-color: #000;
    color: #fff;
}

.bk-tablehead { margin: 34px 0 14px; color: #000; }

.bk-tablewrap {
    overflow-x: auto;
    border: 1px solid #ececec;
    background: #fff;
}

.bk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 760px;
}

.bk-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--bk-muted);
    background: var(--bk-light);
    padding: 12px 16px;
    border-bottom: 1px solid #e5e5e5;
}

.bk-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #f1f1f1;
    vertical-align: middle;
}

.bk-table tbody tr:hover { background: #fafcf2; }
.bk-table tr.is-selected { background: #f4f9e4; }
.bk-table tr:last-child td { border-bottom: none; }

.bk-btn--small { padding: 9px 18px; font-size: 12px; }

.bk-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.bk-status--ok   { background: #eaf4d0; color: #5c7212; }
.bk-status--open { background: #f2f2f2; color: #666; }

/* Schadenmeldungen: Status-Workflow (s. damage_status_labels) */
.bk-status--schaden-gemeldet    { background: #fdeeda; color: #96610f; }
.bk-status--schaden-kva         { background: #fdf6d4; color: #8a6a12; }
.bk-status--schaden-beauftragt  { background: #ddebf7; color: #1f5e8f; }
.bk-status--schaden-erledigt    { background: #eaf4d0; color: #5c7212; }
.bk-status--schaden-geschlossen { background: #f2f2f2; color: #666; }

/* Protokoll des DMS-Abgleichs: Stufe je Eintrag */
.bk-status--import-fehler  { background: #fbe3e0; color: #a3271a; }
.bk-status--import-warnung { background: #fdf6d4; color: #8a6a12; }
.bk-status--import-info    { background: #f2f2f2; color: #666; }

/* Fahrzeug-Verträge: Laufzeit-Badge (bk_contract_badge) */
.bk-status--vertrag-aktiv      { background: #eaf4d0; color: #5c7212; }
.bk-status--vertrag-endet      { background: #fdf6d4; color: #8a6a12; }
.bk-status--vertrag-abgelaufen { background: #fbe3e0; color: #a3271a; }

/* Mehr-/Minderkilometer-Prognose (bk_delta_badge) */
.bk-delta {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.bk-delta--over  { background: #fbe3e0; color: #a3271a; }
.bk-delta--under { background: #eaf4d0; color: #5c7212; }
.bk-delta--ok    { background: #f2f2f2; color: #666; }

.bk-success {
    background: #eaf4d0;
    border: 1px solid #cfe392;
    color: #4c600e;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 24px;
}

.bk-termincard {
    margin-top: 30px;
    border: 1px solid #e0e0e0;
    border-left: 4px solid var(--bk-accent);
    background: #fff;
    padding: 28px 30px;
    box-shadow: 0 14px 36px rgba(0,0,0,.06);
}

.bk-termincard h3 { margin-bottom: 18px; color: #000; }

/* =========================================================
   Admin & Dokumente: Historie, Datei-Chips, Inline-Uploads
   ========================================================= */
.bk-actions { display: flex; gap: 8px; align-items: center; }
.bk-actions form { margin: 0; }

.bk-btn--danger { background: #f3dede; color: #a33; }
.bk-btn--danger:hover { background: #e5b9b9; color: #802020; }

.bk-history {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

.bk-history li {
    border: 1px solid #ececec;
    border-left: 3px solid var(--bk-accent);
    background: #fff;
    padding: 16px 18px;
    margin-bottom: 12px;
}

.bk-history__head {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.bk-history__head form { margin-left: auto; }
.bk-history__meta { font-size: 12px; color: #999; }
.bk-history li > p { font-size: 14px; color: var(--bk-muted); margin: 6px 0 0; }

.bk-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.bk-doc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bk-light);
    border: 1px solid #e2e2e2;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
}

.bk-doc a { color: #000; text-decoration: none; }
.bk-doc a:hover { color: var(--bk-accent); }
.bk-doc form { margin: 0; display: inline; }
.bk-doc button {
    border: none;
    background: none;
    color: #a33;
    font-size: 15px;
    cursor: pointer;
    padding: 0 2px;
}

.bk-inlineupload {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 13px;
}

.bk-inlineupload input[type="file"] { font-size: 13px; }

/* =========================================================
   Rechteverwaltung & Zuordnungen (Einstellungen/Portal)
   ========================================================= */
.bk-permform {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.bk-permform label {
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
}

.bk-permform input[type="password"] {
    padding: 7px 10px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    font-size: 13px;
}

.bk-assign {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    margin-bottom: 4px;
}

.bk-assign form { margin: 0; display: inline; }
.bk-assign button {
    border: none; background: none; color: #a33;
    font-size: 15px; cursor: pointer; padding: 0 2px;
}

.bk-assignform {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}

.bk-assignform select {
    padding: 6px 8px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    font-size: 13px;
    max-width: 170px;
}

.bk-assignform button {
    border: 1px solid var(--bk-accent);
    background: #fff;
    color: var(--bk-accent-dark);
    border-radius: 6px;
    padding: 5px 9px;
    cursor: pointer;
}

.bk-assignform button:hover { background: var(--bk-accent); color: #fff; }

/* Mail-Ausgang (Demo) */
.bk-mailbody {
    white-space: pre-wrap;
    font-size: 12px;
    background: var(--bk-light);
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 10px 12px;
    max-width: 560px;
    overflow-x: auto;
}

/* Kundenliste & Auswertung */
.bk-listhead {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.bk-search {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.bk-search input[type="search"] {
    padding: 11px 16px;
    font-size: 15px;
    font-family: inherit;
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    min-width: 320px;
}

.bk-search input[type="search"]:focus { outline: none; border-color: var(--bk-accent); }

.bk-table__totals td { background: var(--bk-light); border-top: 2px solid #ddd; }

/* =========================================================
   Cookie-Consent-Banner (assets/js/consent.js)
   ========================================================= */
.bk-consent {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 99999;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.bk-consent[hidden] { display: none; }

.bk-consent__box {
    pointer-events: auto;
    max-width: 720px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 20px 24px;
}

.bk-consent__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.bk-consent__text {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bk-muted);
}

.bk-consent__text a { color: var(--bk-accent-dark); }

.bk-consent__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* =========================================================
   Terminbuchung: Slot-Auswahl (Microsoft Bookings)
   assets/js/booking-slots.js + bk_slot_field() in bookings.php
   ========================================================= */

.bk-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 46px;
    align-items: flex-start;
}

.bk-slot {
    padding: 10px 16px;
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #fff;
    color: #000;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.bk-slot:hover {
    border-color: var(--bk-accent);
    color: var(--bk-accent-dark);
}

.bk-slot.is-active {
    background: var(--bk-accent);
    border-color: var(--bk-accent);
    color: #fff;
}

.bk-slots__msg {
    font-size: 14px;
    color: #999;
    margin: 10px 0;
}

.bk-slots__msg--error { color: #c0392b; }

/* Honeypot-Feld (bk_honeypot_field): für Menschen unsichtbar */
/* Spamschutz (Rechennachweis): der Container nimmt keinen Platz ein –
   sichtbar wird nur die Statuszeile, falls beim Absenden noch gerechnet
   wird. Markup in includes/antispam.php, Logik in assets/js/antispam.js. */
.bk-pow { display: contents; }
.bk-pow__status,
.bk-pow noscript { grid-column: 1 / -1; margin: 0; }

.bk-trap {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =========================================================
   Fahrzeugplaner (Belegungsplan je Fahrzeug, includes/planer.php)
   14-Tage-Raster: Zeilen = Fahrzeuge, Spalten = Tage; Einträge als
   durchlaufende farbige Segmente, BKC-Termine automatisch in Blau.
   ========================================================= */
.bk-planer-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.bk-planer-nav strong { font-size: 15px; margin-left: 6px; }

.bk-planer-wrap {
    overflow-x: auto;
    border: 1px solid #ececec;
    background: #fff;
}

.bk-planer {
    border-collapse: collapse;
    width: 100%;
    min-width: 860px;        /* 14 Tage bleiben nutzbar, Rest scrollt */
    table-layout: fixed;     /* gleich breite Tagesspalten (Labels kürzen per ellipsis) */
    font-size: 12px;
}

.bk-planer th {
    background: var(--bk-light);
    color: var(--bk-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-align: center;
    padding: 6px 2px;
    min-width: 46px;
    border-bottom: 1px solid #e5e5e5;
    border-left: 1px solid #f0f0f0;
}

.bk-planer td {
    position: relative;
    vertical-align: top;
    min-width: 46px;
    height: 44px;
    padding: 2px 1px 15px;
    border-bottom: 1px solid #f1f1f1;
    border-left: 1px solid #f7f7f7;
}

/* Fahrzeugspalte klebt beim horizontalen Scrollen links fest */
.bk-planer th.bk-planer__vehicle,
.bk-planer td.bk-planer__vehicle {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    width: 160px;
    padding: 8px 12px;
    background: #fff;
    border-right: 1px solid #e5e5e5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bk-planer th.bk-planer__vehicle { background: var(--bk-light); }
.bk-planer td.bk-planer__vehicle small { color: var(--bk-muted); }

.bk-planer th.is-weekend, .bk-planer td.is-weekend { background: #fafafa; }
.bk-planer th.is-today, .bk-planer td.is-today { background: #f4f9e4; }

.bk-planer-seg {
    display: block;
    height: 18px;
    line-height: 18px;
    margin: 1px 0;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.bk-planer-seg.is-start {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    margin-left: 3px;
}

.bk-planer-seg.is-end {
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    margin-right: 3px;
}

.bk-planer-seg--einsatz,   .bk-planer-dot--einsatz   { background: var(--bk-accent); }
.bk-planer-seg--werkstatt, .bk-planer-dot--werkstatt { background: #e39b2d; }
.bk-planer-seg--gesperrt,  .bk-planer-dot--gesperrt  { background: #8a8a8a; }
.bk-planer-seg--auto,      .bk-planer-dot--auto      { background: #1f5e8f; }

a.bk-planer-seg { text-decoration: none; }   /* Elementor-Basis-CSS unterstreicht Links */
a.bk-planer-seg:hover { filter: brightness(.9); color: #fff; }

/* "+"-Link zum Anlegen: erscheint beim Überfahren der Tageszelle */
.bk-planer-add {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 0;
    text-align: center;
    font-size: 13px;
    line-height: 14px;
    color: #c4c4c4;
    text-decoration: none;
    opacity: 0;
}

.bk-planer td:hover .bk-planer-add { opacity: 1; }
.bk-planer-add:hover { color: var(--bk-accent-dark); }

/* Marker: Leasingende / Service fällig */
.bk-planer-marker {
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 10px;
    cursor: help;
}

.bk-planer-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 12px;
    color: var(--bk-muted);
}

.bk-planer-legend > span { display: inline-flex; align-items: center; gap: 6px; }

.bk-planer-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Listenansicht der geplanten Einträge */
.bk-planer-list { list-style: none; margin: 0; padding: 0; }

.bk-planer-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid #f1f1f1;
    font-size: 14px;
}

.bk-planer-list li:last-child { border-bottom: none; }
.bk-planer-list li small { color: #999; }

.bk-planer-list__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.bk-planer-list__actions form { margin: 0; }

/* =========================================================
   Kundenportal V2 (pages/portal.php + includes/fahrzeugakte.php):
   kompakter Kopf mit Kennzahlen, „Jetzt wichtig", Sticky-
   Sektionsnavigation, Fahrzeugakte, Fahrer-Karten, Aufklapper
   ========================================================= */

/* Kompakter Portal-Hero */
.bk-hero--slim { padding: 34px 0; }
.bk-hero--slim h1 { font-size: 32px; margin-bottom: 6px; }
.bk-hero--slim p { font-size: 15px; }

/* Anker unter Sticky-Header + Portal-Navigation freihalten
   (--bk-header-offset misst onepager.js live) */
.bk-jump, #planer { scroll-margin-top: calc(var(--bk-header-offset, 64px) + 68px); }

/* Kundenkopf mit Kennzahlen */
.bk-portalhead {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px 32px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.bk-portalhead h2 { margin-bottom: 8px; }
.bk-portalhead p { color: var(--bk-muted); margin: 0; }

.bk-kpis { display: flex; gap: 12px; flex-wrap: wrap; }

.bk-kpi {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 10px 18px;
    text-align: center;
    min-width: 92px;
}

.bk-kpi strong { display: block; font-size: 20px; color: #000; line-height: 1.2; }
.bk-kpi span { font-size: 12px; color: var(--bk-muted); }

/* „Jetzt wichtig": Handlungsbedarf gebündelt */
.bk-now {
    border: 1px solid #e0e0e0;
    border-left: 4px solid var(--bk-accent);
    background: #fff;
    padding: 22px 26px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .06);
    margin-bottom: 26px;
}

.bk-now h3 { margin-bottom: 12px; color: #000; }
.bk-now__list { list-style: none; margin: 0; padding: 0; }

.bk-now__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f1f1f1;
    font-size: 15px;
    flex-wrap: wrap;
}

.bk-now__item:last-child { border-bottom: none; }

.bk-now__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
}

.bk-now__item--rot  .bk-now__dot { background: #c0392b; }
.bk-now__item--gelb .bk-now__dot { background: #e3b52d; }
.bk-now__item--info .bk-now__dot { background: #1f5e8f; }

.bk-now__text { flex: 1; min-width: 220px; }

.bk-now__action {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bk-accent-dark);
    text-decoration: none;
    white-space: nowrap;
}

.bk-now__action:hover { color: var(--bk-accent); }
.bk-now__empty { margin: 0; color: #5c7212; font-size: 15px; }

/* Sticky-Sektionsnavigation */
.bk-portalnav {
    position: sticky;
    top: var(--bk-header-offset, 0px);
    z-index: 90;
    display: flex;
    gap: 8px 22px;
    /* Umbrechen statt horizontal scrollen: sonst rutscht die Kundenauswahl
       am rechten Ende aus dem Blick, ohne dass man es merkt. */
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 22px;
    padding: 10px 22px;
    margin-bottom: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
}

.bk-portalnav a {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bk-muted);
    text-decoration: none;
    white-space: nowrap;
    padding: 2px 0;
}

.bk-portalnav a:hover { color: var(--bk-accent-dark); }
.bk-portalnav a.is-active { color: #000; border-bottom: 2px solid var(--bk-accent); }
.bk-portalnav__spacer { flex: 1 1 auto; }

/* Kundenauswahl in der Portal-Leiste: erscheint nur, wenn ein Konto
   mehrere Kunden betreut (Fuhrparkmanager einer Firmengruppe). */
.bk-portalnav__kunde { display: flex; align-items: center; gap: 8px; margin: -4px 0; }
.bk-portalnav__kunde label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--bk-muted); white-space: nowrap;
}
.bk-portalnav__kunde select {
    font-size: 13px; font-family: inherit; line-height: 1.3;
    padding: 6px 30px 6px 10px; border: 1px solid #d6d6d6; border-radius: 8px;
    background-color: #fff; color: #000; max-width: 220px;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666666' d='M1.41 0 6 4.58 10.59 0 12 1.42l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px;
}
.bk-portalnav__kunde select:focus { outline: none; border-color: var(--bk-accent); }

@media (max-width: 767px) {
    .bk-portalnav__spacer { display: none; }
    .bk-portalnav__kunde { width: 100%; }
    .bk-portalnav__kunde select { max-width: none; flex: 1 1 auto; }
}

/* Hinweis auf noch vorläufige Funktionen (z. B. Serviceterminbuchung) */
.bk-platzhalter {
    background: #fff8e6;
    border-left: 4px solid #d99100;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
}

/* Zeitleiste der Fahrzeuge (Kundenportal, nur Ansicht).
   Position der Balken und Marker kommt als Prozentwert aus PHP – kein
   Skript nötig. Markup: includes/zeitleiste.php */
.bk-zl { margin-top: 6px; }
.bk-zl__legende { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 14px; }
.bk-zl__legendeitem {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--bk-muted);
}
.bk-zl__legendeitem .bk-zl-marker,
.bk-zl__legendeitem .bk-zl-heute { position: static; left: auto; margin: 0; flex: none; }
.bk-zl__legendeitem .bk-zl-marker { width: 10px; height: 10px; }
.bk-zl__legendeitem .bk-zl-heute  { width: 2px;  height: 13px; }

.bk-zl__skala {
    position: relative; height: 20px; margin-left: 190px;
    border-bottom: 1px solid #e6e6e6;
}
.bk-zl__jahr {
    position: absolute; top: 0; left: var(--bk-zl-links, 0%); transform: translateX(-50%);
    font-size: 11px; font-weight: 700; color: var(--bk-muted);
}

.bk-zl__zeile { display: flex; align-items: center; gap: 0; padding: 7px 0; }
.bk-zl__label {
    width: 190px; flex: 0 0 190px; padding-right: 14px;
    font-size: 13px; line-height: 1.3;
}
.bk-zl__label a { color: #000; text-decoration: none; }
.bk-zl__label a:hover strong { color: var(--bk-accent-dark); text-decoration: underline; }
.bk-zl__label span { display: block; color: var(--bk-muted); font-size: 12px; }

.bk-zl__spur {
    position: relative; flex: 1 1 auto; height: 26px;
    background: repeating-linear-gradient(90deg, #f4f4f4 0 1px, transparent 1px 100%);
    border-radius: 6px;
}
.bk-zl__balken {
    position: absolute; top: 7px; height: 12px; border-radius: 6px;
    left: var(--bk-zl-links, 0%); width: var(--bk-zl-breite, 0%);
    background: color-mix(in srgb, var(--bk-accent) 35%, #fff);
    border: 1px solid var(--bk-accent);
}
.bk-zl__balken--offen {
    background: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--bk-accent) 22%, #fff) 0 6px, #fff 6px 12px);
}

.bk-zl-marker {
    position: absolute; top: 3px; left: var(--bk-zl-links, 0%); width: 10px; height: 10px;
    margin-left: -5px; border-radius: 50%; border: 2px solid #fff;
}
.bk-zl-marker--termin  { background: var(--bk-accent-dark); }
.bk-zl-marker--service { background: #d99100; }
.bk-zl-marker--leasing { background: #c0392b; }
.bk-zl-heute {
    position: absolute; top: 0; bottom: 0; left: var(--bk-zl-links, 0%); width: 2px; margin-left: -1px;
    background: #111;
}

@media (max-width: 767px) {
    .bk-zl__skala { margin-left: 0; }
    .bk-zl__zeile { flex-direction: column; align-items: stretch; gap: 4px; }
    .bk-zl__label { width: auto; flex: none; padding: 0; }
}

/* Verwaltungs-Navigation (/admin, /admin/kunden …). Der Verwaltungsbereich
   nutzt weiterhin das normale Website-Layout – diese Leiste macht ihn
   sichtbar zu einem eigenen Bereich und hält seine Seiten zusammen. */
.bk-adminnav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 20px;
    background: #fff;
    border: 1px solid #ececec;
    border-left: 4px solid var(--bk-accent);
    border-radius: 10px;
    padding: 12px 20px;
    margin-bottom: 26px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
}
.bk-adminnav__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bk-accent-dark);
    padding-right: 14px;
    border-right: 1px solid #e6e6e6;
}
.bk-adminnav a {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bk-muted);
    text-decoration: none;
    white-space: nowrap;
    padding: 2px 0;
    border-bottom: 2px solid transparent;
}
.bk-adminnav a:hover { color: var(--bk-accent-dark); }
.bk-adminnav a.is-active { color: #000; border-bottom-color: var(--bk-accent); }
.bk-adminnav__spacer { flex: 1 1 auto; }

@media (max-width: 767px) {
    .bk-adminnav { gap: 10px 16px; padding: 12px 16px; }
    .bk-adminnav__label { border-right: 0; padding-right: 0; width: 100%; }
    .bk-adminnav__spacer { display: none; }
}

/* Fahrzeugtabelle: gestapelte Aktionen + Kennzeichen-Link zur Akte */
.bk-actions--stack { flex-direction: column; align-items: stretch; gap: 6px; }
.bk-actions--stack .bk-btn { text-align: center; white-space: nowrap; }

.bk-platelink { color: #000; text-decoration: none; }
.bk-platelink:hover strong { color: var(--bk-accent-dark); text-decoration: underline; }

.bk-btn--ghost { background: #fff; color: var(--bk-muted); border: 1px solid #d6d6d6; }
.bk-btn--ghost:hover { border-color: var(--bk-accent); color: var(--bk-accent-dark); }

/* Aufklappbare Abschnitte (Termin-/Schadenformular, 2FA) */
.bk-fold {
    margin-top: 22px;
    border: 1px solid #e0e0e0;
    border-left: 4px solid var(--bk-accent);
    background: #fff;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .06);
}

/* Nur das eigene summary (>) – im Fold stecken weitere <details>
   (Info-Zeichen der Leistungen), die sonst Polster und das +/–-Zeichen
   erben würden */
.bk-fold > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 26px;
    font-size: 18px;
    font-weight: 700;
    color: #000;
    cursor: pointer;
    list-style: none;
}

.bk-fold > summary::-webkit-details-marker { display: none; }

.bk-fold > summary::after {
    content: "+";
    margin-left: auto;
    font-size: 22px;
    font-weight: 400;
    color: var(--bk-muted);
}

.bk-fold[open] > summary::after { content: "–"; }
.bk-fold__body { padding: 0 26px 26px; }

/* Fahrzeugakte */
.bk-backlink { margin-bottom: 18px; }

.bk-backlink a {
    color: var(--bk-muted);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 13px;
}

.bk-backlink a:hover { color: var(--bk-accent-dark); }

.bk-aktehead {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px 28px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.bk-aktehead h2 { margin-bottom: 4px; }
.bk-aktehead p { color: var(--bk-muted); margin: 0; }
.bk-aktehead__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.bk-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 6px;
}

.bk-fact {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bk-fact__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bk-muted);
}

.bk-fact__value { font-size: 17px; font-weight: 700; color: #000; }
.bk-fact__value--small { font-size: 13px; word-break: break-all; }
.bk-fact small { color: #999; font-size: 12px; }
.bk-fact .bk-assignform { margin-top: 6px; }

/* Zwischenüberschrift im Vorgänge-Bereich */
.bk-subhead { margin: 24px 0 12px; font-size: 17px; color: #000; }

/* Fahrer-Sicht: Fahrzeuge als Karten */
.bk-vcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.bk-vcard {
    background: #fff;
    border: 1px solid #ececec;
    border-left: 4px solid var(--bk-accent);
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .05);
}

.bk-vcard h3 { font-size: 24px; color: #000; margin: 0; }
.bk-vcard__model { color: var(--bk-muted); margin: 0; font-size: 15px; }
.bk-vcard__km { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bk-vcard__km strong { font-size: 20px; color: #000; }
.bk-vcard__km small { color: #999; }
.bk-vcard__facts { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--bk-muted); }
.bk-vcard__facts li { padding: 3px 0; }
.bk-vcard__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* =========================================================
   Werkstatttermin buchen (Termin-API / CROSS)
   assets/js/termin-api.js + bk_werkstatttermin_form() in termin_api.php
   ========================================================= */

.bk-tapi-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.bk-tapi-gruppe {
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    padding: 12px 16px 14px;
    margin: 0;
    background: #fff;
}

.bk-tapi-gruppe legend {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bk-accent-dark);
    padding: 0 6px;
}

.bk-tapi-service {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 7px 0;
    font-size: 15px;
    cursor: pointer;
}

/* Terminbuchung in drei Schritten: Leistungen -> Betrieb & frühester
   Termin -> Termin wählen. Ohne JavaScript stehen alle Schritte offen –
   erst das Skript setzt .bk-wizard--js und klappt zu. */

/* Das Formular ist beim Wizard KEIN Raster – sonst lägen die Schritte
   nebeneinander in den zwei Formularspalten. Das zweispaltige
   Feld-Raster übernimmt stattdessen der Inhalt jedes Schritts. */
.bk-form.bk-wizard { display: block; }

.bk-wizard__schritt {
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    margin-bottom: 12px;
    background: #fff;
}

.bk-wizard__kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 18px;
    font-size: 16px;
    color: #000;
}

.bk-wizard--js .bk-wizard__kopf { cursor: pointer; }

.bk-wizard__nr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eee;
    color: var(--bk-muted);
    font-size: 13px;
    font-weight: 700;
    flex: none;
}

.bk-wizard__schritt.is-offen .bk-wizard__nr { background: var(--bk-accent); color: #fff; }
.bk-wizard__titel { font-weight: 700; }

.bk-wizard__wahl {
    margin-left: auto;
    color: var(--bk-muted);
    font-size: 14px;
    text-align: right;
}

.bk-wizard__inhalt {
    padding: 0 18px 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 22px;
}

/* Terminliste und Abholprognose über die volle Breite */
.bk-wizard__inhalt > .bk-tapi-termine,
.bk-wizard__inhalt > .bk-tapi-abholung { grid-column: 1 / -1; }

.bk-wizard--js .bk-wizard__schritt:not(.is-offen) .bk-wizard__inhalt { display: none; }

/* Berater, der zu den gefundenen Zeiten nicht mehr frei ist */
.bk-tapi-beraterwahl.is-entfallen {
    border-color: #c0392b;
    color: #c0392b;
    text-decoration: line-through;
    cursor: not-allowed;
    opacity: .75;
}

/* Zeile einer Leistung: Auswahl links, Info-Zeichen rechts daneben.
   position: relative verankert das Hinweis-Popup an der Zeile. */
.bk-tapi-servicezeile {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
}

/* Basis 0 statt auto: das Label schrumpft, damit das Info-Zeichen auch
   auf schmalen Bildschirmen rechts neben dem Namen bleibt und nicht in
   die nächste Zeile rutscht */
.bk-tapi-servicezeile .bk-tapi-service { flex: 1 1 0; min-width: 0; }

/* Info-Zeichen mit dem Kundenhinweis der Werkstatt (aufklappbar, ohne
   JavaScript – <details> liegt neben dem <label>, damit ein Klick nicht
   die Leistung an- oder abwählt): grauer runder Knopf mit schwarzem i */
.bk-tapi-info { margin-top: 7px; flex: none; }

.bk-tapi-info summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: #e4e4e4;
    border: 0;
    border-radius: 50%;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.bk-tapi-info summary::-webkit-details-marker { display: none; }
.bk-tapi-info summary::after { content: none; }
.bk-tapi-info summary:hover { background: #d6d6d6; }
.bk-tapi-info[open] summary { background: #c9c9c9; }

/* Aufgeklappt liegt der Hinweis als kleines Popup unter der Zeile –
   geschlossen wird er per erneutem Klick, Klick außerhalb oder Escape
   (assets/js/termin-api.js) */
.bk-tapi-info p {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    margin: 6px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
    color: var(--bk-muted);
    font-size: 13px;
    line-height: 1.45;
}

.bk-tapi-service input { margin-top: 4px; flex: none; }
.bk-tapi-service span { display: block; line-height: 1.35; }
.bk-tapi-service small { display: block; color: #999; font-size: 13px; }
.bk-tapi-service:hover span { color: var(--bk-accent-dark); }

/* Annahmezeiten und Kundenhinweis je Leistung (Zeitfilter aus CROSS) */
.bk-tapi-zeitfenster {
    display: block;
    color: var(--bk-accent-dark);
    font-size: 13px;
    font-weight: 600;
    margin-top: 3px;
}

.bk-tapi-hinweis {
    display: block;
    color: var(--bk-muted);
    font-size: 13px;
    line-height: 1.4;
    margin-top: 3px;
}

/* Hinweis über der Terminliste (etwas kräftiger als in der Leistungsliste) */
.bk-tapi-hinweis--slot {
    margin: 8px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--bk-accent);
    background: rgba(var(--bk-accent-rgb), .06);
    color: #000;
    font-size: 14px;
}

/* Abholprognose zum gewählten Termin */
.bk-tapi-abholung {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(var(--bk-accent-rgb), .10);
    color: #000;
    font-size: 15px;
    font-weight: 600;
}

.bk-tapi-termine { margin-top: 12px; }

.bk-tapi-tag {
    margin: 14px 0 6px;
    font-weight: 700;
    color: #000;
    font-size: 15px;
}

.bk-tapi-mehr { margin-top: 16px; }

/* Auswahl des Serviceberaters über der Terminliste (nur wenn im
   Adminportal freigeschaltet und mehr als einer zur Wahl steht) */
.bk-tapi-berater {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
}

.bk-tapi-berater__label { font-size: 14px; color: var(--bk-muted); }

.bk-tapi-beraterwahl {
    padding: 7px 14px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    background: #fff;
    color: #000;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.bk-tapi-beraterwahl:hover { border-color: var(--bk-accent); color: var(--bk-accent-dark); }
.bk-tapi-beraterwahl.is-active {
    background: var(--bk-accent);
    border-color: var(--bk-accent);
    color: #fff;
}

/* Fahrzeug-Einstieg auf der Servicetermin-Seite */
.bk-tapi-fzliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}

.bk-tapi-fz {
    display: block;
    padding: 16px 18px;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}

.bk-tapi-fz:hover { border-color: var(--bk-accent); transform: translateY(-2px); }
.bk-tapi-fz strong { display: block; font-size: 19px; color: #000; }
.bk-tapi-fz span { display: block; font-size: 14px; color: var(--bk-muted); }
.bk-tapi-fz small { display: block; font-size: 13px; color: #999; margin-top: 4px; }

/* Profilzeichen im Kopfmenü (Initialen des angemeldeten Kontos).
   Sitzt im Elementor-Nav-Markup, deshalb bewusst schlank gehalten. */
.bk-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--bk-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    vertical-align: middle;
    flex: none;
}

/* Im aufgeklappten Burger-Menü steht der Punkt in einer eigenen Zeile */
.elementor-nav-menu--dropdown .bk-avatar { width: 26px; height: 26px; font-size: 11px; }

/* Abstands-Skala (statt style="margin:…" im PHP) */
.bk-mt-s { margin-top: 14px; }
.bk-mt-l { margin-top: 42px; }
.bk-mb-s { margin-bottom: 14px; }

/* Feststehende Angabe im Formular (z. B. die Marke, die das Fahrzeug
   vorgibt) – sieht aus wie ein Feld, ist aber keins */
.bk-feldlabel {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin-bottom: 6px;
}

.bk-feldwert {
    margin: 0;
    padding: 12px 0;
    font-size: 16px;
    color: #000;
    border-bottom: 1px solid #e4e4e4;
}

/* Hinweis unter einem Eingabefeld (Marke aus dem Fahrzeug, Vorlaufzeit) */
.bk-hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #999;
}

@media (max-width: 1024px) {
    .bk-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .bk-facts { grid-template-columns: 1fr; }
    .bk-tapi-services { grid-template-columns: 1fr; }
    .bk-vcards { grid-template-columns: 1fr; }
    .bk-portalhead { flex-direction: column; align-items: flex-start; }
    .bk-portalnav { border-radius: 14px; }
    .bk-aktehead { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Gestaltung, die früher als style="…" im PHP-Code stand.
   Beim Trennen von Ansicht und Logik hierher gezogen, damit
   die Vorlagen unter views/ nur noch Struktur enthalten.
   ========================================================= */

/* Abstände einzelner Bausteine */
.bk-form__note--abstand   { margin-bottom: 16px; }
.bk-liste--eingerueckt    { margin: 8px 0 0 18px; }

/* Beschriftung ohne Versalien – z. B. vor Auswahlkästchen */
.bk-label--normal { text-transform: none; font-weight: 400; }

/* Zwei Eingabefelder nebeneinander (von/bis) */
.bk-feldpaar { display: flex; gap: 8px; }

/* Schmales Zahlenfeld für die km-Meldung */
.bk-input--km          { width: 140px; }
.bk-input--km-kompakt  { width: 130px; }

/* Einzelne Abstände (Wert im Namen, damit nichts verrutscht) */
.bk-abstand-oben-8  { margin-top:  8px; }
.bk-abstand-oben-26 { margin-top: 26px; }
.bk-abstand-oben-40    { margin-top: 40px; }
.bk-ohne-abstand-oben  { margin: 0 0 10px; }
.bk-liste--knapp       { margin: 0 0 10px 18px; padding: 0; }
.bk-abstand-oben-14      { margin-top: 14px; }
.bk-ohne-abstand-unten   { margin-bottom: 0; }
.bk-abstand-oben-18 { margin-top: 18px; }

/* Link auf dunklem Seitenkopf */
.bk-link--invers { color: #fff; text-decoration: underline; }
.bk-abstand-oben-12  { margin-top: 12px; }
.bk-abstand-unten-10 { margin-bottom: 10px; }
.bk-ohne-abstand     { margin: 0; }

/* Formular, das in einer Textzeile mitläuft (z. B. eine Schaltfläche) */
.bk-form--inline { display: inline; }

/* Absatz mit einer Schaltfläche als Seitenabschluss */
.bk-cta-absatz { margin-top: 32px; }

/* Weitere Einzelabstände */
.bk-abstand-oben-4    { margin-top:  4px; }
.bk-abstand-oben-6    { margin-top:  6px; }
.bk-abstand-oben-10   { margin-top: 10px; }
.bk-abstand-oben-16   { margin-top: 16px; }
.bk-abstand-oben-22   { margin-top: 22px; }
.bk-abstand-unten-6   { margin-bottom:  6px; }
.bk-abstand-unten-14  { margin-bottom: 14px; }
.bk-kpis--abstand     { margin: 18px 0 30px; }

/* Formular, das als Zeile mitläuft (Auswahl + Schaltfläche) */
.bk-inlineform    { display: inline-flex; gap: 8px; align-items: center; }
.bk-select--schmal { max-width: 220px; }

/* Bild, das sich der Spaltenbreite anpasst */
.bk-bild--fluid { max-width: 100%; height: auto; }

/* Gestaffeltes Einblenden (data-reveal): Verzögerung je Element.
   Die Zahl im Namen ist die Verzögerung in Hundertstelsekunden. */
.bk-reveal-d0  { --d: 0s;   }
.bk-reveal-d10 { --d: .10s; }
.bk-reveal-d12 { --d: .12s; }
.bk-reveal-d15 { --d: .15s; }
.bk-reveal-d20 { --d: .20s; }
.bk-reveal-d24 { --d: .24s; }
.bk-reveal-d25 { --d: .25s; }
.bk-reveal-d30 { --d: .30s; }
.bk-reveal-d32 { --d: .32s; }
.bk-reveal-d39 { --d: .39s; }
.bk-reveal-d46 { --d: .46s; }
.bk-reveal-d53 { --d: .53s; }
.bk-reveal-d60 { --d: .60s; }