/* =====================================================================
   2.10.1206 - Elegant 2 aus dem Testmodus entlassen
   Christian, gemessen auf seinem iPhone (2.10.1205):
     bodyCls    ... KEIN vlt-e2-test
     cockpitCls ... vlt-cockpit--desktop-klassik
   Auf dem Rechner steht dagegen der Cookie vlt_e2_test=1. Damit waren
   105 Regeln in dieser Datei nur in der Vorschau aktiv und auf keinem
   echten Handy - darunter die Regeln fuer .vlt-cockpit--mobile-klar,
   an denen zwei Tage gearbeitet wurde. Genau daher der letzte
   Unterschied: Monatskarte 309 in der Vorschau, 288 auf dem Geraet.
   Christian: "1 und 2" - freigeben UND die Vorschau soll die Wahrheit
   zeigen. Nach der Freigabe faellt beides zusammen.
   Umgesetzt als body:not(.vlt-e2-aus): dieselbe Spezifitaet wie
   body.vlt-e2-test (Element + Klasse), trifft aber immer. Die Reihen-
   folge im Stapel bleibt damit Zeile fuer Zeile unveraendert.
   Zuruecknehmen: body:not(.vlt-e2-aus) wieder zu body.vlt-e2-test.
   Nicht angefasst: die Regeln in vl-limburg-tool.php (Testbanner,
   #outer-wrap) - die gehoeren zum Testmodus und bleiben dort.
   ===================================================================== */
.vlt-cockpit,
.vlt-cockpit * {
    box-sizing: border-box;
}

/* Zusatznavigation des optionalen Designs "Klar". Im klassischen Design
   bleibt das neue Markup ausnahmslos unsichtbar. */
.vlt-cockpit-klar-nav,
.vlt-cockpit-klar-quick,
.vlt-cockpit-klar-shell {
    display: none;
}

.vlt-cockpit {
    width: 100%;
    padding: clamp(16px, 2vw, 24px);
    border: 1px solid rgba(0, 144, 57, .13);
    border-radius: 12px;
    background: linear-gradient(145deg, #ffffff 0%, #f5faf6 100%);
    box-shadow: 0 14px 38px rgba(22, 52, 32, .10);
    color: #183221;
    font-family: inherit;
}

.vlt-cockpit__brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -4px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 144, 57, .13);
}

/* V2.9.97: Tool-Logo links in der Markenzeile, neben dem Tool-Namen. */
.vlt-cockpit__brandbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.vlt-cockpit .vlt-cockpit__brandbar-logo,
.vlt-cockpit__brandbar-logo {
    height: calc(28px * var(--vlt-tool-logo-scale, 1)) !important;
    width: auto !important;
    max-width: calc(150px * var(--vlt-tool-logo-scale, 1)) !important;
    min-width: 0 !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    flex: 0 0 auto;
}

.vlt-cockpit__brandbar-name {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #009039;
}

.vlt-cockpit__brandbar-version {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #97a29b;
}

.vlt-cockpit__brandbar-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.vlt-cockpit__brandbar-link {
    display: inline-flex;
    padding: 5px 12px;
    border: 1px solid #d4e3d8;
    border-radius: 999px;
    background: #fff;
    color: #35543f;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.vlt-cockpit__brandbar-link:hover {
    border-color: #009039;
    background: #edf6ef;
    color: #009039;
}

.vlt-cockpit__brandbar-link--logout {
    border-color: #ecd6d6;
    color: #8a4a4a;
}

.vlt-cockpit__brandbar-link--logout:hover {
    border-color: #c97b7b;
    background: #fdf1f1;
    color: #9a3a3a;
}

@media (max-width: 480px) {
    .vlt-cockpit__brandbar-version {
        display: none;
    }
}

.vlt-cockpit__top,
.vlt-cockpit__calendar,
.vlt-cockpit__stats,
.vlt-cockpit__actions,
.vlt-cockpit__footer,
.vlt-cockpit__top-right {
    display: flex;
}

.vlt-cockpit__top {
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.vlt-cockpit__welcome {
    min-width: 0;
    padding-top: 0;
}

.vlt-cockpit__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 4px;
    color: #009039;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.vlt-cockpit__eyebrow small {
    padding-left: 9px;
    border-left: 1px solid #c9dccf;
    color: #718078;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

.vlt-cockpit h2 {
    margin: 0 0 4px;
    color: #15361f;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.08;
    letter-spacing: -.025em;
}

.vlt-cockpit__wave {
    display: inline-block;
    margin-right: 5px;
    font-size: .76em;
    vertical-align: .08em;
}

.vlt-cockpit__identity {
    margin: 0;
    color: #647269;
    font-size: 13px;
    line-height: 1.3;
}

.vlt-cockpit__identity strong {
    color: #284333;
    font-weight: 800;
}

.vlt-cockpit__top-right {
    align-items: stretch;
    gap: 10px;
    flex: 0 0 auto;
}

.vlt-cockpit__clock {
    min-width: 170px;
    padding: 8px 14px;
    border: 1px solid #dce8df;
    border-radius: 9px;
    background: rgba(255, 255, 255, .82);
    text-align: right;
}

.vlt-cockpit__reminders {
    position: relative;
    display: flex;
    align-self: center;
}

.vlt-cockpit__bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #dce8df;
    border-radius: 9px;
    background: rgba(255, 255, 255, .82);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.vlt-cockpit__bell:hover {
    border-color: #b9d2c1;
    background: #fff;
}

.vlt-cockpit__bell-icon {
    font-size: 19px;
    line-height: 1;
}

.vlt-cockpit__bell-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #97a29b;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.vlt-cockpit__bell-badge.is-red {
    background: #d64545;
}

.vlt-cockpit__bell-badge.is-yellow {
    background: #e0a419;
}

.vlt-cockpit__bell-badge.is-gray {
    background: #97a29b;
}

.vlt-cockpit__reminder-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: 320px;
    max-height: 360px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #dce8df;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(20, 50, 30, .16);
}

.vlt-cockpit__reminder-heading {
    padding: 6px 8px 8px;
    color: #52685a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.vlt-cockpit__reminder-empty {
    margin: 0;
    padding: 10px 8px 14px;
    color: #7a877f;
    font-size: 13px;
}

.vlt-cockpit__reminder-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 8px;
    border-left: 3px solid #c7d2cb;
    border-radius: 6px;
    background: #f7faf8;
    margin-bottom: 5px;
}

.vlt-cockpit__reminder-item:last-child {
    margin-bottom: 0;
}

.vlt-cockpit__reminder-item.is-red {
    border-left-color: #d64545;
    background: #fdf2f2;
}

.vlt-cockpit__reminder-item.is-yellow {
    border-left-color: #e0a419;
    background: #fef9ec;
}

.vlt-cockpit__reminder-icon {
    font-size: 17px;
    line-height: 1.3;
}

.vlt-cockpit__reminder-item strong {
    display: block;
    color: #23331f;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
}

.vlt-cockpit__reminder-item small {
    display: block;
    margin-top: 2px;
    color: #6b776f;
    font-size: 11.5px;
}

.vlt-cockpit__reminder-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
    margin-top: 4px;
}

.vlt-cockpit__reminder-contact span {
    color: #4a5750;
    font-size: 11px;
    font-weight: 600;
}

.vlt-cockpit__reminder-link {
    display: inline-block;
    margin-top: 6px;
    color: #009039;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
}

.vlt-cockpit__reminder-link:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .vlt-cockpit__reminder-panel {
        width: 82vw;
        left: auto;
        right: 0;
    }
}

.vlt-cockpit__clock-label,
.vlt-cockpit__clock strong,
.vlt-cockpit__clock small {
    display: block;
}

.vlt-cockpit__clock-label {
    margin-bottom: 3px;
    color: #718078;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.vlt-cockpit__clock strong {
    color: #284333;
    font-size: 13px;
    line-height: 1.35;
}

.vlt-cockpit__clock small {
    margin-top: 2px;
    color: #009039;
    font-size: 17px;
    font-weight: 800;
}

.vlt-cockpit__month-badge {
    min-width: 132px;
    padding: 13px 18px;
    border-radius: 9px;
    background: #009039;
    color: #fff;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 144, 57, .18);
}

.vlt-cockpit__month-badge span,
.vlt-cockpit__month-badge small {
    display: block;
    opacity: .86;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.vlt-cockpit__month-badge strong {
    display: block;
    margin: 3px 0;
    font-size: 34px;
    line-height: 1;
}

.vlt-cockpit__calendar {
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 9px;
    background: #edf6ef;
}

.vlt-cockpit__calendar-copy span,
.vlt-cockpit__calendar-copy strong,
.vlt-cockpit__calendar-copy small {
    display: block;
}

.vlt-cockpit__calendar-copy span {
    color: #55705e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.vlt-cockpit__calendar-copy strong {
    margin: 5px 0;
    color: #183a23;
    font-size: 21px;
}

.vlt-cockpit__calendar-copy small {
    color: #6d7b71;
}

.vlt-cockpit__weeks {
    display: flex;
    gap: 7px;
}

.vlt-cockpit__week {
    min-width: 40px;
    padding: 5px 6px;
    border: 1px solid #d4e3d8;
    border-radius: 7px;
    background: #fff;
    color: #718078;
    text-align: center;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.vlt-cockpit__week:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(23, 58, 35, .1);
}

.vlt-cockpit__week span,
.vlt-cockpit__week strong {
    display: block;
}

.vlt-cockpit__week span {
    font-size: 9px;
    font-weight: 700;
}

.vlt-cockpit__week strong {
    font-size: 16px;
}

.vlt-cockpit__week.is-done {
    border-color: #9cc9a8;
    background: #dff1e3;
    color: #25633a;
}

.vlt-cockpit__week.is-current {
    border-color: #009039;
    background: #009039;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 144, 57, .23);
}

.vlt-cockpit__week-slider {
    margin-top: 6px;
}

.vlt-cockpit__week-slider input[type="range"] {
    width: 100%;
    height: 22px;
    margin: 0;
    accent-color: #009039;
    cursor: pointer;
}

.vlt-cockpit__week-slider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

.vlt-cockpit__week-slider-row span {
    color: #52685a;
    font-size: 12.5px;
    font-weight: 800;
}

.vlt-cockpit__week-reset {
    padding: 6px 12px;
    border: 1px solid #d4e3d8;
    border-radius: 999px;
    background: #fff;
    color: #35543f;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.vlt-cockpit__week-reset:hover {
    border-color: #009039;
    background: #edf6ef;
}

.vlt-cockpit__week-error {
    display: none;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid #f1c9c9;
    border-radius: 8px;
    background: #fdf1f1;
    color: #9a3a3a;
    font-size: 12px;
    font-weight: 600;
}

.vlt-cockpit__stats {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.vlt-cockpit__stats-heading {
    display: block;
    margin: 12px 0 -2px;
    color: #68766d;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.vlt-cockpit__stats-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 -2px;
}

.vlt-cockpit__stats-heading-row .vlt-cockpit__stats-heading {
    margin: 0;
}

/* V2.9.72: Cockpit-Klapp-Banner. Jeder Bereich (Aktuelle Woche,
   Vertriebsmonat, Auswertung, Zielplanung, iPad-Challenge) wird per JS in
   einen grünen, einklappbaren Banner verwandelt - standardmäßig zu. */
.vlt-cockpit__foldall-row {
    display: flex;
    justify-content: flex-end;
    /* V2.9.74: etwas Luft zum Resttage-Bereich; Banner darunter mit
       einheitlichem Abstand. */
    margin: 16px 0 0;
}
.vlt-cockpit__foldall {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid #d4e3d8;
    border-radius: 999px;
    background: #fff;
    color: #35543f;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.vlt-cockpit__foldall:hover {
    border-color: #009039;
    background: #edf6ef;
    color: #009039;
}
.vlt-cockpit__foldall-icon {
    display: inline-flex;
    transition: transform .2s ease;
}
.vlt-cockpit__foldall-icon svg {
    width: 15px;
    height: 15px;
    display: block;
}
.vlt-cockpit__foldall.is-all-open .vlt-cockpit__foldall-icon {
    transform: rotate(180deg);
}
.vlt-cockpit__fold {
    margin: 10px 0 0;
    border: 1px solid #dfe9e2;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 14px rgba(25, 70, 40, .045);
}
/* V2.9.81: Banner im weichen Hellgrün-Ton (nicht mehr kräftig grün) - das
   starke Grün bleibt nur den Aktions-Buttons vorbehalten, damit das Cockpit
   ruhiger wirkt. Dunkelgrüne Schrift für gute Lesbarkeit. */
.vlt-cockpit__fold-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid #cfe1d5;
    background: #dcebe0;
    color: #173f27;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .01em;
    text-align: left;
    cursor: pointer;
}
.vlt-cockpit__fold-bar:hover {
    background: #d1e4d7;
}
.vlt-cockpit__fold-bar-title {
    flex: 1 1 auto;
    min-width: 0;
    text-transform: none;
    letter-spacing: .01em;
    color: #173f27;
    font-size: 13.5px;
    font-weight: 800;
}
.vlt-cockpit__fold-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    transition: transform .2s ease;
    /* V2.9.262: Chevron ganz rechts außen (nach den Werten) - genau wie bei der
       "Zielplanung"-Karte, damit alle drei Banner gleich aussehen. */
    order: 3;
    margin-left: 6px;
}
.vlt-cockpit__fold-chevron svg {
    width: 18px;
    height: 18px;
    display: block;
}
.vlt-cockpit__fold.is-open .vlt-cockpit__fold-chevron {
    transform: rotate(180deg);
}
.vlt-cockpit__fold-body {
    padding: 12px 14px 14px;
}
.vlt-cockpit__fold:not(.is-open) .vlt-cockpit__fold-body {
    display: none;
}
/* Innerhalb eines Banners brauchen die Bereichs-Überschriften keinen extra
   Rand mehr, da der Banner selbst die Überschrift trägt. */
.vlt-cockpit__fold-body > .vlt-cockpit__stats {
    margin-top: 0;
}
@media (max-width: 800px) {
    .vlt-cockpit__fold-bar {
        padding: 14px 15px;
        font-size: 15px;
    }
}
/* V2.9.73: Datenzeile im grünen Banner (wie bei der Ziel-Übersicht). */
.vlt-cockpit__fold-bar-title {
    flex: 0 0 auto;
}
.vlt-cockpit__fold-bar-figures {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    justify-content: flex-end;
    font-size: 12px;
    font-weight: 700;
    color: #356245;
    /* Werte sitzen zwischen Titel und Chevron (Chevron ganz rechts). */
    order: 2;
}
.vlt-cockpit__fold-bar-figures strong {
    font-weight: 800;
}
.vlt-cockpit__fold-bar-figures > span {
    white-space: nowrap;
}
@media (max-width: 800px) {
    /* V2.9.74: Am Handy sitzen die Werte einheitlich rechtsbündig
       untereinander - so wirkt kein Banner "durcheinander". */
    .vlt-cockpit__fold-bar-figures {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        order: 3;
        font-size: 12.5px;
    }
}
/* V2.9.259: "Meine Statistik" - Sammel-Button, der die drei Statistik-Karten
   (Zielplanung, Woche & Monat, Auswertung) zusammengeklappt bündelt. Optik +
   Höhe wie ein Banner-Button; Chevron dreht beim Öffnen. */
.vlt-cockpit__statgroup {
    margin: 0 0 12px;
}
/* V2.9.282/285: Desktop-Luft - Buttons mit Abstand unter dem Monitor.
   "Meine Statistik" hat exakt denselben Abstand zu den Buttons wie die
   Button-Reihen untereinander (10px). Nur Browser, Handy unveraendert. */
@media (min-width: 761px) {
    .vlt-cockpit__actions {
        margin-top: 24px;
    }
    .vlt-cockpit__statgroup {
        margin-top: 10px;
    }

    /* V2.9.287: Desktop-Kopf mit mehr Praesenz - Willkommensbereich hoeher
       und groesser, Name gross in HEIM&HAUS-Gruen; der neue Monitor bekommt
       mehr Hoehe/Innenraum. Handy bleibt unveraendert. */
    .vlt-cockpit__top {
        padding: 18px 0 26px;
    }
    .vlt-cockpit__welcome h2 {
        font-size: 32px;
    }
    .vlt-cockpit__identity {
        margin-top: 6px;
        font-size: 15.5px;
    }
    .vlt-cockpit__identity strong {
        color: #009039;
        font-size: 19px;
        /* V2.9.288: nicht fett - gleiche Schriftstaerke wie die Position. */
        font-weight: 400;
    }

    /* V2.9.288/290: Heute-Kachel und Vertriebsmonat-Kachel EXAKT gleich hoch.
       Beide 120px, Inhalt vertikal ausbalanciert: beim Vertriebsmonat sitzt
       die Ueberschrift oben (wie HEUTE) und "Juli 2026" mittig im Rest.
       Die Glocke zentriert sich auf gleicher Achse. */
    .vlt-cockpit__top-right {
        align-items: stretch;
    }
    .vlt-cockpit__top-right .vlt-cockpit__reminders {
        align-self: center;
    }
    .vlt-cockpit__clock,
    .vlt-cockpit__month-badge {
        box-sizing: border-box;
        height: 120px;
        display: flex;
        flex-direction: column;
    }
    .vlt-cockpit__clock {
        min-width: 210px;
        padding: 16px 20px;
        justify-content: center;
    }
    .vlt-cockpit__clock strong {
        font-size: 17px;
    }
    .vlt-cockpit__clock small {
        font-size: 19px;
    }
    .vlt-cockpit__month-badge {
        min-width: 170px;
        padding: 16px 24px;
    }
    .vlt-cockpit__month-badge > span:first-child {
        flex: 0 0 auto;
    }
    .vlt-cockpit__month-badge strong {
        margin-top: auto;
        font-size: 38px;
    }
    .vlt-cockpit__month-badge small {
        margin-bottom: auto;
    }
    .vlt-cockpit__calendar--overview {
        margin-top: 18px;
        /* V2.9.289/290: Monitor-Feld hoch genug, dass es proportional zu den
           Kopf-Kacheln (120px) deutlich als Hauptflaeche wirkt. */
        padding: 54px 30px;
    }
    .vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring {
        width: 108px;
        height: 108px;
    }
    .vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring::after {
        inset: 10px;
    }
    .vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring span {
        font-size: 31px;
    }
    .vlt-cockpit__ov-rows {
        max-width: 400px;
    }
    .vlt-cockpit__ov-row {
        padding: 11px 4px;
    }
    .vlt-cockpit__ov-row strong {
        font-size: 18px;
    }
}
.vlt-cockpit__statgroup-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #b9d3c2;
    border-radius: var(--vlt-radius-card, 12px);
    background: linear-gradient(160deg, #eef7f0, #e2f2e8);
    color: #173f27;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
    text-align: left;
    cursor: pointer;
}
.vlt-cockpit__statgroup-bar:hover {
    background: #e4f1e8;
}
.vlt-cockpit__statgroup-title {
    flex: 1 1 auto;
}
.vlt-cockpit__statgroup-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    transition: transform .2s ease;
}
.vlt-cockpit__statgroup-chevron svg {
    width: 18px;
    height: 18px;
    display: block;
}
.vlt-cockpit__statgroup.is-open .vlt-cockpit__statgroup-chevron {
    transform: rotate(180deg);
}
.vlt-cockpit__statgroup-body {
    padding-top: 12px;
}

/* KW-Stepper im "Woche & Monat"-Banner. */
.vlt-cockpit__period-kw {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 10px;
    padding: 4px;
    border: 1px solid #d4e3d8;
    border-radius: 999px;
    background: #f7faf8;
}
.vlt-cockpit__period-kw-btn {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #009039;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}
.vlt-cockpit__period-kw-btn:hover {
    background: #00742e;
}
.vlt-cockpit__period-kw-value {
    min-width: 62px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: #173f27;
    font-variant-numeric: tabular-nums;
}
/* V2.9.76: manuelles KW-Eingabefeld + Zurück-zur-aktuellen-Woche. */
.vlt-cockpit__period-kw-label {
    font-size: 12px;
    font-weight: 800;
    color: #68766d;
    letter-spacing: .04em;
}
.vlt-cockpit__period-kw-input {
    width: 54px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid #d4e3d8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    text-align: center;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #173f27 !important;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
    -moz-appearance: textfield;
}
.vlt-cockpit__period-kw-input:focus {
    outline: 0;
    border-color: #009039 !important;
    box-shadow: 0 0 0 2px rgba(0, 144, 57, .14) !important;
}
.vlt-cockpit__period-kw-input::-webkit-outer-spin-button,
.vlt-cockpit__period-kw-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.vlt-cockpit__period-kw-current {
    margin-left: 6px;
    padding: 7px 14px;
    min-width: 0;
    border: 1px solid #d4e3d8;
    border-radius: 999px;
    background: #fff;
    color: #35543f;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.vlt-cockpit__period-kw-current:hover {
    border-color: #009039;
    background: #edf6ef;
    color: #009039;
}
/* V2.9.77: Gruppierte Countdown-Übersicht - links Vertriebsmonat, rechts
   Vertriebsjahr, je Gruppe Resttage + Rest-KW, filigran getrennt. */
.vlt-cockpit__countdown--grouped {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    /* V2.9.80: inhaltsbreit; die Zentrierung im Feld übernimmt das
       3-Spalten-Grid (Texte links, Countdown mittig, Ring rechts). */
    margin: 0;
    justify-self: center;
    width: auto;
    max-width: 100%;
    padding: 14px 22px;
    border-radius: 14px;
    /* V2.9.284: ruhiger, moderner Look wie der Willkommenskasten am Handy -
       eine cleane weisse Karte, innen nur Zahlen und dezente Labels. */
    background: #ffffff;
    border: 1px solid #dce7df;
    box-shadow: 0 10px 24px rgba(23, 58, 35, .08);
}
.vlt-cockpit__cd-group {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
}
.vlt-cockpit__cd-group-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #173f27;
    text-align: center;
}
.vlt-cockpit__cd-group-title small {
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: #4f7d61;
}
.vlt-cockpit__cd-items {
    display: flex;
    gap: 18px;
}
.vlt-cockpit__countdown--grouped .vlt-cockpit__countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    min-width: 100px;
    padding: 6px 14px;
    /* V2.9.284: keine Einzelkaertchen mehr - nur Zahl + Label, ganz ruhig
       (wie die Werte im Willkommenskasten am Handy). */
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
}
.vlt-cockpit__countdown--grouped .vlt-cockpit__countdown-value {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 27px !important;
    font-weight: 700 !important;
    color: #009039 !important;
    text-shadow: none !important;
    line-height: 1;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}
.vlt-cockpit__countdown--grouped .vlt-cockpit__countdown-label {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6a7f73 !important;
    text-shadow: none !important;
}
.vlt-cockpit__cd-divider {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 4px 0;
    background: rgba(23, 63, 39, .14);
}
/* V2.9.80: 3-Spalten-Layout - Texte links (vertikal wie zuvor), Countdown
   exakt mittig, Monatsfortschritt-Ring rechts als Gegengewicht. */
.vlt-cockpit__calendar--overview {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
/* V2.9.286: Monitor als cleane weisse Karte OHNE Display-Kaesten - mittig der
   grosse Wochen-Ring, rechts gestapelte Zeilen wie am Handy (Label links,
   gruener Monospace-Wert rechtsbuendig, feine Trennlinien). */
.vlt-cockpit__calendar--overview {
    background: #ffffff;
    border: 1px solid #dce7df;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(23, 58, 35, .08);
    padding: 14px 22px;
}
.vlt-cockpit__calendar--overview .vlt-cockpit__cal-ring::after {
    background: #ffffff;
}
.vlt-cockpit__cal-progress--big {
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring {
    width: 96px;
    height: 96px;
}
.vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring::after {
    inset: 9px;
}
.vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring span {
    font-size: 28px;
}
.vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring span small {
    font-size: 15px;
}
.vlt-cockpit__cal-progress--big .vlt-cockpit__cal-progress-label {
    text-align: center;
}
.vlt-cockpit__ov-rows {
    justify-self: end;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    min-width: 280px;
}
.vlt-cockpit__ov-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px;
    border-top: 1px solid #e6ede8;
}
.vlt-cockpit__ov-row:first-child {
    border-top: 0;
}
.vlt-cockpit__ov-label {
    flex: 0 0 auto;
    color: #6a7f73;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.vlt-cockpit__ov-row strong {
    margin-left: auto;
    color: #009039;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    line-height: 1.2;
}
.vlt-cockpit__ov-row small {
    color: #6a7f73;
    font-size: 11.5px;
    font-weight: 700;
}
.vlt-cockpit__cal-progress {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vlt-cockpit__cal-ring {
    position: relative;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: conic-gradient(#009039 calc(var(--vlt-ring, 0) * 1%), #d7e5da 0);
}
.vlt-cockpit__cal-ring::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #eef4f0;
}
.vlt-cockpit__cal-ring span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    color: #173f27;
    z-index: 1;
}
.vlt-cockpit__cal-ring span small {
    font-size: 11px;
    color: #8ba192;
    font-weight: 700;
}
.vlt-cockpit__cal-progress-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #68766d;
    line-height: 1.3;
}
@media (max-width: 780px) {
    .vlt-cockpit__calendar--overview {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .vlt-cockpit__cal-progress {
        justify-self: center;
    }
}
@media (max-width: 600px) {
    .vlt-cockpit__countdown--grouped .vlt-cockpit__countdown-value {
        font-size: 24px;
    }
    /* V2.9.176: Handy-Displays deutlich breiter (nur Smartphone-Ansicht,
       Desktop bleibt unberührt). Zwei Kästen pro Reihe - passen mit Rand
       weiterhin ins Feld. */
    .vlt-cockpit__countdown--grouped .vlt-cockpit__countdown-item {
        min-width: 128px;
        padding: 8px 18px;
    }
    .vlt-cockpit__cd-items {
        gap: 10px;
    }
    .vlt-cockpit__cd-group {
        padding: 0 4px;
    }
    .vlt-cockpit__period-kw {
        flex-wrap: wrap;
    }
    .vlt-cockpit__period-kw-current {
        margin-left: 0;
        margin-top: 6px;
        width: 100%;
    }
}
/* Kompakte Zielplanungs-Balken (Top Club + Karrierechecks). */
.vlt-cockpit__goalmini {
    flex: 1 1 260px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #e4ece6;
    border-radius: 12px;
    background: linear-gradient(160deg, #fff 0%, #fbfefc 100%);
}
.vlt-cockpit__goalmini-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.vlt-cockpit__goalmini-head span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #68766d;
}
.vlt-cockpit__goalmini-head strong {
    font-size: 14px;
    font-weight: 800;
    color: #009039;
    font-variant-numeric: tabular-nums;
}
.vlt-cockpit__goalmini-bar {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: #e8f0ea;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(23, 58, 35, .08);
}
.vlt-cockpit__goalmini-bar span {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #66c088, #009039);
    min-width: 6px;
    box-shadow: 0 0 8px rgba(0, 144, 57, .35);
}
.vlt-cockpit__goalmini-sub {
    margin-top: 6px;
    font-size: 11px;
    color: #849087;
}
.vlt-cockpit__goalmini-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.vlt-cockpit__goalmini-chip {
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef4f0;
    color: #5a675e;
    font-size: 11.5px;
    font-weight: 800;
}
.vlt-cockpit__goalmini-chip.is-done {
    background: #e2f4e8;
    color: #1d7b3e;
}
.vlt-cockpit__goalmini-chip.is-open {
    background: #fbeee6;
    color: #b3541e;
}

.vlt-cockpit__groups-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #d4e3d8;
    border-radius: 999px;
    background: #fff;
    color: #35543f;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.vlt-cockpit__groups-toggle:hover {
    border-color: #009039;
    background: #edf6ef;
}

.vlt-cockpit__groups-toggle-icon {
    display: inline-block;
    transition: transform .18s ease;
    font-size: 10px;
}

.vlt-cockpit__groups-toggle[aria-expanded="true"] .vlt-cockpit__groups-toggle-icon {
    transform: rotate(180deg);
}

.vlt-cockpit__stat {
    flex: 1 1 170px;
    min-width: 0;
    padding: 11px 14px 10px;
    border: 1px solid #e4ece6;
    border-radius: 10px;
    background: linear-gradient(160deg, #ffffff 0%, #fbfefc 100%);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.vlt-cockpit__stat:hover {
    transform: translateY(-2px);
    border-color: #d3e3d8;
    box-shadow: 0 10px 22px rgba(23, 58, 35, .09);
}

.vlt-cockpit__stat span,
.vlt-cockpit__stat strong,
.vlt-cockpit__stat small {
    display: block;
}

.vlt-cockpit__stat span {
    color: #68766d;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vlt-cockpit__stat strong {
    margin: 4px 0 2px;
    overflow: hidden;
    color: #183a23;
    font-size: clamp(15px, 1.4vw, 20px);
    line-height: 1.1;
    letter-spacing: -.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.vlt-cockpit__stat small {
    color: #849087;
    font-size: 10.5px;
    line-height: 1.25;
}

.vlt-cockpit__stat--value strong {
    color: #009039;
}

.vlt-cockpit__stat--split {
    background: #edf6ef;
    border-color: #dcecdf;
    box-shadow: none;
}

.vlt-cockpit__stat--split span {
    color: #55705e;
}

.vlt-cockpit__stat--split strong,
.vlt-cockpit__stat--split .vlt-cockpit__stat-secondary {
    color: #009039;
}

.vlt-cockpit__stat--split small {
    color: #6d7b71;
}

.vlt-cockpit__stat--split:hover {
    border-color: #c3ddc9;
    box-shadow: 0 10px 22px rgba(23, 58, 35, .08);
}

.vlt-cockpit__stat-secondary {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vlt-cockpit__stat--split .vlt-cockpit__stat-secondary {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #d3e5d7;
    font-size: clamp(13px, 1.1vw, 16px);
}

/* Dritte Reihe ("Auswertung"): standardmäßig eingeklappt, damit das
   Dashboard nicht unnötig lang wird - nur die Ergebnis-Kachel bleibt
   sichtbar, in derselben Spaltenbreite wie Reihe 1/2 (kein eigenes
   Breitenverhältnis mehr), damit alle drei Reihen bündig untereinander
   stehen. Über den Button [data-vlt-groups-toggle] werden die drei
   Produktgruppen-Kacheln (und die zwei zusätzlichen Ergebnis-Blöcke
   Woche/Monat) eingeblendet. Die Listen brechen ab einer gewissen Breite
   automatisch in mehrere Spalten um (CSS-Grid), damit sie auf dem
   schmaleren Desktop-Kachelraster genauso wenig gequetscht wirken wie auf
   dem (dafür volle Breite bietenden) Smartphone. */
.vlt-cockpit__stat--groups {
    display: none;
    flex-direction: column;
}

.vlt-cockpit__stats--groups.is-expanded .vlt-cockpit__stat--groups {
    display: flex;
}

.vlt-cockpit__stat-groups-list {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}

.vlt-cockpit__stat-groups-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 1px 0;
}

.vlt-cockpit__stat-groups-row span {
    display: block;
    min-width: 0;
    overflow-wrap: break-word;
    color: #5a675e;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
}

.vlt-cockpit__stat-groups-row strong {
    flex: 0 0 auto;
    margin: 0;
    color: #009039;
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.vlt-cockpit__stat-groups-empty {
    margin: 8px 0 0;
    color: #849087;
    font-size: 11px;
}

.vlt-cockpit__stat--result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.vlt-cockpit__result-block--sub {
    display: none;
    padding-top: 8px;
    border-top: 1px solid #d3e5d7;
}

.vlt-cockpit__stats--groups.is-expanded .vlt-cockpit__result-block--sub {
    display: block;
}

.vlt-cockpit__footer {
    align-items: flex-end;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 6px;
}

.vlt-cockpit__actions {
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0;
    min-width: 0;
}

.vlt-cockpit__action {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    /* Maximal 5 Buttons pro Reihe - weitere brechen in eine zweite Reihe
       um, damit die Beschriftungen lesbar bleiben (Größe/Schrift bleiben
       unverändert). */
    flex: 1 1 calc(20% - 8px);
    max-width: calc(20% - 8px);
    gap: 10px;
    min-width: 0;
    min-height: 46px;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #009039;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(23, 58, 35, .16);
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.vlt-cockpit__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 29px;
    height: 29px;
    min-width: 29px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.vlt-cockpit__action-icon svg {
    width: 15px;
    height: 15px;
}

.vlt-cockpit__action-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
}

.vlt-cockpit__action:hover {
    background: #00742e;
    box-shadow: 0 10px 24px rgba(23, 58, 35, .24);
    transform: translateY(-2px);
}

.vlt-cockpit__action.is-disabled {
    background: #cbd4ce;
    box-shadow: none;
    pointer-events: none;
}

.vlt-cockpit__action.is-disabled .vlt-cockpit__action-label {
    color: #6d766f !important;
}

.vlt-cockpit__action.is-disabled .vlt-cockpit__action-icon {
    background: rgba(255, 255, 255, .3);
    color: #6d766f;
}

.vlt-cockpit__version {
    flex: 0 0 auto;
    padding-bottom: 2px;
    color: #89948d;
    text-align: right;
}

.vlt-cockpit__version span,
.vlt-cockpit__version strong {
    display: block;
}

.vlt-cockpit__version span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.vlt-cockpit__version strong {
    margin-top: 1px;
    color: #627068;
    font-size: 11px;
}

/* Schlanke Ansicht für Position "Duisburg" (nur große Klick-Kacheln statt
   der FB-umsatzbasierten Kennzahlen). */
.vlt-cockpit__duisburg-welcome {
    margin: 4px 0 18px;
}

.vlt-cockpit__duisburg-welcome h2 {
    margin: 0;
    color: #15361f;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.15;
}

.vlt-cockpit__duisburg-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* V2.9.43: derselbe Look wie die grünen Cockpit-Aktions-Buttons - Icon in
   hellerem, abgerundetem Quadrat links, Beschriftung rechts daneben. */
.vlt-cockpit__duisburg-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex: 1 1 220px;
    min-width: 200px;
    min-height: 96px; /* V2.9.44: höher - es gibt nur drei Kacheln */
    padding: 20px 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #009039;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(23, 58, 35, .18);
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.vlt-cockpit__duisburg-tile:hover {
    background: #00742e;
    box-shadow: 0 12px 28px rgba(23, 58, 35, .26);
    transform: translateY(-2px);
}

.vlt-cockpit__duisburg-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.vlt-cockpit__duisburg-tile-icon svg {
    width: 24px;
    height: 24px;
}

.vlt-cockpit__duisburg-tile-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vlt-cockpit__duisburg-tile-label {
    font-size: 17.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vlt-cockpit__duisburg-tile-hint {
    font-size: 12.5px;
    font-weight: 600;
    opacity: .82;
}

.vlt-cockpit__duisburg-empty {
    margin: 0;
    padding: 16px 18px;
    border: 1px solid #e4ece6;
    border-radius: 10px;
    background: #f7faf8;
    color: #52685a;
}

.vlt-cockpit-login {
    padding: 25px;
    border-radius: 8px;
    background: #f4f7f5;
    text-align: center;
}

@media (max-width: 920px) {
    .vlt-cockpit__top {
        flex-direction: column;
        align-items: stretch;
    }

    .vlt-cockpit__top-right {
        width: 100%;
    }

    .vlt-cockpit__clock,
    .vlt-cockpit__month-badge {
        flex: 1 1 0;
    }

    .vlt-cockpit__clock {
        text-align: left;
    }
}

@media (max-width: 760px) {
    .vlt-cockpit {
        padding: 20px;
    }

    .vlt-cockpit__calendar,
    .vlt-cockpit__stats,
    .vlt-cockpit__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .vlt-cockpit__top-right {
        flex-direction: column;
    }

    .vlt-cockpit__month-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 0;
        text-align: left;
    }

    .vlt-cockpit__month-badge span,
    .vlt-cockpit__month-badge small,
    .vlt-cockpit__month-badge strong {
        display: inline;
        margin: 0;
    }

    .vlt-cockpit__weeks {
        overflow-x: auto;
        padding-bottom: 4px;
        /* V2.9.224: weiches Momentum-Scrollen + kein Scroll-Ketten-Ruckeln. */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .vlt-cockpit__stat {
        width: 100%;
    }

    /* V2.9.270: App-Homescreen-Raster am Handy. Die grünen Buttons stehen als
       Kacheln in 2 Spalten (Icon oben, Name darunter) - so passen ALLE auf
       einen Bildschirm, ganz ohne Scrollen, Magnet oder Schwebe-Knopf. */
    .vlt-cockpit__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .vlt-cockpit__actions .vlt-cockpit__action {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 4px;
        min-width: 0;
        max-width: none;
        /* V2.9.273: flachere Kacheln, damit alle 8 samt Willkommenskasten
           auf einen Bildschirm passen. */
        min-height: 56px;
        padding: 7px 8px;
    }

    .vlt-cockpit__actions .vlt-cockpit__action-icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
    }

    .vlt-cockpit__actions .vlt-cockpit__action-icon svg {
        width: 17px;
        height: 17px;
    }

    .vlt-cockpit__actions .vlt-cockpit__action-label {
        font-size: 12px;
        line-height: 1.15;
        white-space: normal;
    }

    .vlt-cockpit__version {
        text-align: left;
    }
}

/* Sprint 1.2: eigenständige Tagesübersicht */
.vlt-cockpit__day {
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin-top: 16px;
    padding: 20px;
    border: 1px solid #e1ebe4;
    border-radius: 9px;
    background: rgba(255, 255, 255, .88);
}

.vlt-cockpit__day-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 0 0 190px;
    padding: 3px 20px 3px 0;
    border-right: 1px solid #e5ece7;
}

.vlt-cockpit__day-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #edf6ef;
    font-size: 14px;
}

.vlt-cockpit__day-heading span:not(.vlt-cockpit__day-icon) {
    display: block;
    color: #718078;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vlt-cockpit__day-heading h3 {
    margin: 2px 0 0;
    color: #183a23;
    font-size: 16px;
    line-height: 1.1;
}

.vlt-cockpit__day-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.vlt-cockpit__day-item {
    position: relative;
    min-width: 0;
    padding: 13px 13px 36px 42px;
    border: 1px solid #e8eee9;
    border-radius: 8px;
    background: #fbfdfb;
}

.vlt-cockpit__day-symbol {
    position: absolute;
    top: 13px;
    left: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    color: #009039;
    font-size: 15px;
    font-weight: 900;
}

.vlt-cockpit__day-item strong,
.vlt-cockpit__day-item small {
    display: block;
}

.vlt-cockpit__day-item strong {
    color: #284333;
    font-size: 12px;
    line-height: 1.3;
}

.vlt-cockpit__day-item small {
    margin-top: 4px;
    color: #7a877f;
    font-size: 11px;
    line-height: 1.45;
}

.vlt-cockpit__day-status {
    position: absolute;
    right: 12px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #eef2ef;
    color: #6b776f;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.vlt-cockpit__day-status--positive {
    background: #e2f2e6;
    color: #23663a;
}

@media (max-width: 920px) {
    .vlt-cockpit__day {
        flex-direction: column;
        gap: 15px;
    }

    .vlt-cockpit__day-heading {
        flex-basis: auto;
        padding: 0 0 14px;
        border-right: 0;
        border-bottom: 1px solid #e5ece7;
    }
}

@media (max-width: 760px) {
    .vlt-cockpit__day {
        padding: 16px;
    }

    .vlt-cockpit__day-items {
        grid-template-columns: 1fr;
    }
}

/* V2.7.0: kompakter Bereich „Mein Tag“ */
.vlt-cockpit__day{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:18px;padding:16px 18px!important}
.vlt-cockpit__day-items{display:grid!important;grid-template-columns:repeat(3,1fr);gap:0!important}
.vlt-cockpit__day-item{min-height:auto!important;padding:5px 16px!important;border:0!important;border-left:1px solid #e4ece6!important;border-radius:0!important;background:transparent!important}
.vlt-cockpit__day-item:first-child{border-left:0!important}.vlt-cockpit__day-status{display:none!important}
.vlt-cockpit__day-item small{line-height:1.35!important}.vlt-cockpit__day-heading{padding-right:8px;border-right:1px solid #e4ece6}
@media(max-width:760px){.vlt-cockpit__day{grid-template-columns:1fr}.vlt-cockpit__day-heading{border-right:0;border-bottom:1px solid #e4ece6;padding-bottom:10px}.vlt-cockpit__day-items{grid-template-columns:1fr}.vlt-cockpit__day-item,.vlt-cockpit__day-item:first-child{border-left:0!important;border-top:1px solid #e4ece6!important;padding:10px 0!important}.vlt-cockpit__day-item:first-child{border-top:0!important}}
/* V2.8.0: sauberer Abstand der Mein-Tag-Symbole und informativer Monatsblock */
.vlt-cockpit__day-item{grid-template-columns:34px minmax(0,1fr) auto!important;column-gap:13px!important}
.vlt-cockpit__day-symbol{display:flex!important;align-items:center!important;justify-content:center!important;width:30px!important;height:30px!important;min-width:30px!important;margin:0!important;font-size:17px!important;line-height:1!important}
.vlt-cockpit__day-item>div{min-width:0;padding-left:0!important}
.vlt-cockpit__month-badge strong{font-size:18px!important;line-height:1.15!important;white-space:nowrap}
.vlt-cockpit__month-badge em{display:block;margin-top:5px;font-size:10px;font-style:normal;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.8}

/* V2.8.1: feste Icon-Spalte, Vertriebskalender und Resttage */
.vlt-cockpit__day-item { display:grid !important; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; column-gap:14px; }
.vlt-cockpit__day-symbol { display:flex !important; width:42px; height:42px; min-width:42px; align-items:center; justify-content:center; margin:0 !important; font-size:21px; line-height:1; }
.vlt-cockpit__day-item > div { min-width:0; padding-left:0 !important; }
.vlt-cockpit__month-badge { min-width:190px; }
.vlt-cockpit__month-badge strong { font-size:22px; line-height:1.15; }
.vlt-cockpit__month-badge em { display:block; margin-top:5px; font-size:11px; font-style:normal; opacity:.9; white-space:nowrap; }
.vlt-cockpit__remaining { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:9px; }
.vlt-cockpit__remaining span { color:#52685a; font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; }
.vlt-cockpit__remaining strong { display:inline; margin:0 3px 0 0; font-size:16px; color:#009039; }
@media (max-width:700px){.vlt-cockpit__day-item{grid-template-columns:40px minmax(0,1fr)}.vlt-cockpit__day-status{grid-column:2}.vlt-cockpit__month-badge{min-width:160px}}

/* V2.8.2 – ruhiger Monatsblock, klare Kalenderhierarchie und stabile Tagesübersicht */
.vlt-cockpit__month-badge {
    min-width: 160px;
    padding: 10px 16px 11px;
}
.vlt-cockpit__month-badge span,
.vlt-cockpit__month-badge strong,
.vlt-cockpit__month-badge small {
    display: block;
}
.vlt-cockpit__month-badge span {
    margin-bottom: 4px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.vlt-cockpit__month-badge strong {
    margin: 0;
    font-size: 22px !important;
    line-height: 1.02 !important;
    letter-spacing: -.025em;
    white-space: normal;
}
.vlt-cockpit__month-badge small {
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .04em;
    opacity: .7;
    text-transform: none;
}
.vlt-cockpit__calendar-copy {
    min-width: 0;
}
.vlt-cockpit__calendar-current {
    margin-top: 3px;
    font-size: 12px !important;
    font-weight: 700;
    color: #52685a !important;
}
.vlt-cockpit__calendar-range {
    margin: 6px 0 5px !important;
    font-size: 17px !important;
    line-height: 1.15;
}
.vlt-cockpit__calendar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    color: #52685a;
    font-size: 12px;
    font-weight: 650;
}
.vlt-cockpit__calendar-meta-week {
    display: inline-flex;
    color: #52685a;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

/* Resttage-Zähler im "Digital Display"-Look: schlicht, dunkel, ruhiges Grün */
.vlt-cockpit__countdown {
    display: flex;
    gap: 8px;
}
.vlt-cockpit__countdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 6px;
    background: linear-gradient(160deg, #1b2a20 0%, #0f1a14 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.vlt-cockpit__countdown-value {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    line-height: 1 !important;
    margin: 0 !important;
    color: #39ff8a !important;
    text-shadow: 0 0 6px rgba(57, 255, 138, .85), 0 0 16px rgba(57, 255, 138, .5);
}
.vlt-cockpit__countdown-label {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1.25;
    letter-spacing: .03em;
    text-transform: uppercase !important;
    color: #f4f8f5 !important;
    text-shadow: 0 0 3px rgba(255, 255, 255, .3);
    white-space: normal;
}
.vlt-cockpit__remaining { display:none !important; }

.vlt-cockpit__day {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px !important;
}
.vlt-cockpit__day-heading {
    display: flex !important;
    align-items: center !important;
    min-width: 0;
    padding: 0 12px 0 0 !important;
}
.vlt-cockpit__day-items {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-width: 0;
}
.vlt-cockpit__day-item,
.vlt-cockpit__day-item:first-child {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 9px !important;
    min-width: 0 !important;
    padding: 9px 10px !important;
    border: 1px solid #e5ece7 !important;
    border-radius: 8px !important;
    background: #fbfdfb !important;
}
.vlt-cockpit__day-symbol {
    position: static !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 15px !important;
}
.vlt-cockpit__day-item > div {
    min-width: 0 !important;
}
.vlt-cockpit__day-item strong {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: 12px;
}
.vlt-cockpit__day-item small {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: 11px;
}
@media (max-width: 980px) {
    .vlt-cockpit__day { grid-template-columns: 1fr !important; }
    .vlt-cockpit__day-heading { border-right: 0 !important; border-bottom: 1px solid #e5ece7 !important; padding: 0 0 13px !important; }
}
@media (max-width: 760px) {
    .vlt-cockpit__month-badge { min-width: 0; text-align: center; }
    .vlt-cockpit__month-badge span,
    .vlt-cockpit__month-badge strong,
    .vlt-cockpit__month-badge small { display:block; }
    .vlt-cockpit__day-items { grid-template-columns: 1fr !important; }
    .vlt-cockpit__calendar-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
    .vlt-cockpit__countdown { flex-direction: column; gap: 6px; width: 100%; }
    .vlt-cockpit__countdown-item { width: 100%; }
}

/* V2.8.5: kompakter Mobil-Kasten oben (Willkommen+Glocke / Heute /
   Vertriebsmonat) + Dashboard-Klapp-Button, der den Rest (Kalenderwochen,
   Kennzahlen, Mein Tag) erst bei Bedarf aufklappt. Gilt ausschließlich für
   Smartphone-Breiten - der Desktop-Kopfbereich (.vlt-cockpit__top) bleibt
   komplett unverändert, diese Regeln greifen nur innerhalb dieser Media
   Query. Die Buttons/Glocke-Reihenfolge wird über flex "order" gesteuert,
   ohne die Reihenfolge im HTML (und damit den Desktop-Aufbau) anzufassen. */
.vlt-cockpit__mobile-top,
.vlt-cockpit__mobile-expand {
    display: none;
}

@media (max-width: 760px) {
    .vlt-cockpit {
        display: flex;
        flex-direction: column;
        /* V2.9.39: volle Bildschirmbreite am Handy - bricht aus allen
           Theme-/Elementor-Containern (mit deren Seitenabständen) aus und
           lässt nur einen schmalen eigenen Innenabstand übrig. */
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        padding: 14px 10px 18px;
    }

    body {
        overflow-x: hidden;
    }

    .vlt-cockpit__top {
        display: none;
    }

    /* Ein durchgehender "Digital Display"-Banner (dunkler Verlauf, neongrüne
       Werte) statt dreier optisch getrennter Kästchen - Willkommen+Glocke,
       Heute und Vertriebsmonat wirken dadurch wie eine zusammengehörige
       Anzeige. */
    .vlt-cockpit__mobile-top {
        display: flex;
        flex-direction: column;
        gap: 2px;
        /* V2.9.108: Der dunkle "Willkommen zurueck"-Digital-Banner sitzt am
           Smartphone jetzt ganz oben, direkt unter der Buttonleiste (per
           Flex-order, NICHT fixiert - er scrollt normal mit). */
        order: -1;
        /* V2.9.272: kompakter, damit die Button-Kacheln darunter komplett auf
           den Bildschirm passen. */
        padding: 10px 12px 8px;
        border-radius: 14px;
        /* V2.9.109: Heller, weisser Kasten statt des dunklen Displays -
           dezent, mit hellgruenem Rahmen; Werte in Markengruen. */
        background: #ffffff;
        border: 1px solid #dce7df;
        box-shadow: 0 10px 24px rgba(23, 58, 35, .08);
    }

    .vlt-cockpit__mobile-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 6px 4px;
        border-top: 1px solid #e6ede8;
    }

    .vlt-cockpit__mobile-welcome {
        padding-top: 2px;
        padding-bottom: 7px;
        border-top: 0;
    }

    .vlt-cockpit__mobile-welcome-copy {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .vlt-cockpit__mobile-welcome-text {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #173f27;
        font-size: 15px;
        font-weight: 800;
    }

    .vlt-cockpit__mobile-identity {
        overflow: hidden;
        color: #6a7f73;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .vlt-cockpit__mobile-clock .vlt-cockpit__date,
    .vlt-cockpit__mobile-clock .vlt-cockpit__time,
    .vlt-cockpit__mobile-month strong,
    .vlt-cockpit__mobile-month small {
        color: #009039;
    }

    .vlt-cockpit__mobile-row-label {
        flex: 0 0 auto;
        color: #6a7f73;
        opacity: 1;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .vlt-cockpit__mobile-clock {
        flex-wrap: wrap;
    }

    .vlt-cockpit__mobile-clock .vlt-cockpit__date {
        flex: 1 1 auto;
        margin: 0 10px;
        color: #35543f !important;
        font-size: 11.5px;
        font-weight: 700;
        text-align: right;
    }

    .vlt-cockpit__mobile-clock .vlt-cockpit__time,
    .vlt-cockpit__mobile-month strong {
        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        font-size: 19px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        letter-spacing: .02em;
    }

    .vlt-cockpit__mobile-month strong {
        margin: 0 10px 0 auto;
    }

    /* V2.9.304: Handy wie die Desktop-Ansicht - Labels links, Werte
       rechts aussen an der Kante. Die Ziffernspalten (.vlt-ov-num) halten
       "Tage"/"KW" in den Rest-Zeilen weiterhin exakt uebereinander. */
    .vlt-cockpit__mobile-month,
    .vlt-cockpit__mobile-rest,
    .vlt-cockpit__mobile-cal {
        justify-content: space-between;
    }
    .vlt-cockpit__mobile-month .vlt-cockpit__mobile-row-label,
    .vlt-cockpit__mobile-rest .vlt-cockpit__mobile-row-label,
    .vlt-cockpit__mobile-cal .vlt-cockpit__mobile-row-label {
        flex: 0 0 auto;
    }
    /* V2.9.302: Kalender-Zeilen (Zeitraum + Woche) im selben Schema. */
    .vlt-cockpit__mobile-cal strong {
        margin: 0;
        color: #009039;
        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        font-size: 14px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        letter-spacing: .02em;
    }
    .vlt-cockpit__mobile-cal small {
        color: #6a7f73;
        font-size: 11px;
        font-weight: 700;
    }
    /* Wochen-Fortschrittsbalken (Mini-Version des Desktop-Rings). */
    .vlt-cockpit__mobile-weekbar {
        height: 6px;
        margin: 8px 4px 2px;
        border-radius: 4px;
        background: #e6ede8;
        overflow: hidden;
    }
    .vlt-cockpit__mobile-weekbar i {
        display: block;
        height: 100%;
        border-radius: 4px;
        background: #009039;
    }
    .vlt-cockpit__mobile-calfoot {
        padding: 4px 4px 2px;
        color: #6a7f73;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        text-align: center;
    }
    .vlt-cockpit__mobile-val {
        display: flex;
        align-items: baseline;
        gap: 7px;
        /* V2.9.304: Werte-Box rechts aussen verankert - "Juli 2026" endet
           an derselben rechten Kante wie die Rest-Werte darunter. */
        margin-left: auto;
        text-align: left;
    }
    .vlt-cockpit__mobile-month strong {
        margin: 0;
    }
    /* "2026" gleichwertig gross neben "Juli" (nicht mehr winzig). */
    .vlt-cockpit__mobile-month small {
        font-size: 15px !important;
        font-weight: 700;
    }
    /* V2.9.310: Heute-Zeile als 3-Spalten-Raster - links der Statistik-
       Umschalter, Ring EXAKT mittig, rechts HEUTE/Uhrzeit/Datum. */
    .vlt-cockpit__mobile-clock {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 6px;
    }
    .vlt-cockpit__mobile-clock .vlt-cockpit__mobile-row-label {
        flex: none;
    }
    .vlt-cockpit__mobile-statbtn {
        justify-self: start;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 8px 10px;
        border: 1px solid rgba(23, 63, 39, .16);
        border-radius: 10px;
        background: #dcebe0;
        color: #173f27;
        font-size: 8.5px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        line-height: 1.2;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(23, 58, 35, .08);
    }
    .vlt-cockpit__mobile-statbtn i {
        font-style: normal;
        font-size: 15px;
        line-height: 1;
    }
    .vlt-cockpit__cal-progress--mob {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        margin: 2px 0;
        justify-self: center;
    }
    .vlt-cockpit__cal-progress--mob .vlt-cockpit__cal-ring {
        width: 58px;
        height: 58px;
    }
    .vlt-cockpit__cal-progress--mob .vlt-cockpit__cal-ring::after {
        inset: 5px;
        background: #ffffff;
    }
    .vlt-cockpit__cal-progress--mob .vlt-cockpit__cal-ring span {
        font-size: 16px;
    }
    .vlt-cockpit__cal-progress--mob .vlt-cockpit__cal-ring span small {
        font-size: 9px;
    }
    .vlt-cockpit__cal-progress--mob .vlt-cockpit__cal-progress-label {
        font-size: 7px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #6a7f73;
    }
    .vlt-cockpit__mobile-clockstack {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        justify-self: end;
    }
    .vlt-cockpit__mobile-clock .vlt-cockpit__time {
        font-size: 16px;
        white-space: nowrap;
    }
    .vlt-cockpit__mobile-clock .vlt-cockpit__date {
        flex: none;
        margin: 0;
        text-align: right !important;
        font-size: 9.5px;
        white-space: nowrap;
    }
    /* V2.9.310: Statistik-Vollansicht - der alte Statistik-Balken unter
       den Buttons ist am Handy versteckt; der neue Umschalter blendet
       stattdessen ALLES unterhalb der Karte aus und zeigt nur die
       Statistik. Zuruecktippen stellt das Cockpit wieder her. */
    .vlt-cockpit__statgroup {
        display: none !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup {
        display: block !important;
        order: 2;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__calendar--overview,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__actions,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__mobile-expand,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__calendar,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__stats,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__stats-heading,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__stats-heading-row,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__day,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__footer {
        display: none !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__mobile-statbtn {
        background: #009039;
        color: #ffffff;
        border-color: #009039;
    }
    /* V2.9.311: In der Statistik-Vollansicht gibt es KEINE Aufklapp-
       Buttons mehr - alles ist direkt offen. Die Rubriken bekommen einen
       duennen BLAUEN Rahmen mit der Ueberschrift im Kasten (wie auf der
       Dokumente-Seite), damit klar ist, was wozu gehoert. */
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup-bar,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__foldall-row {
        display: none !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup-body[hidden] {
        display: block !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup {
        border: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }
    /* Alle Rubriken zwangsweise offen. */
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold:not(.is-open) .vlt-cockpit__fold-body,
    .vlt-cockpit.vlt-is-statsview .vlt-goalstrip:not(.is-open) .vlt-goalstrip__body {
        display: block !important;
    }
    /* Blauer Rubrik-Rahmen, Ueberschrift oben im Kasten. */
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold,
    .vlt-cockpit.vlt-is-statsview .vlt-goalstrip {
        margin: 10px 0;
        border: 1px solid rgba(47, 111, 237, .45) !important;
        border-radius: 10px;
        background: #ffffff;
        box-shadow: none !important;
        overflow: hidden;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-bar,
    .vlt-cockpit.vlt-is-statsview .vlt-goalstrip__bar {
        pointer-events: none;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(47, 111, 237, .25) !important;
        padding: 8px 12px !important;
        box-shadow: none !important;
        color: #173f27 !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-chevron,
    .vlt-cockpit.vlt-is-statsview .vlt-goalstrip__bar-chevron,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-bar-figures,
    .vlt-cockpit.vlt-is-statsview .vlt-goalstrip__bar-figures {
        display: none !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body {
        padding: 8px 10px !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-goalstrip__body {
        padding: 4px 6px !important;
    }

    .vlt-cockpit__mobile-month small {
        color: #6a7f73 !important;
        font-size: 11.5px;
        font-weight: 700;
    }

    /* V2.9.272: Resttage/Rest-KW im Willkommenskasten (Spiegel des
       Dashboard-Countdowns). */
    .vlt-cockpit__mobile-rest strong {
        margin: 0;
        color: #009039;
        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        font-size: 14px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        letter-spacing: .02em;
    }

    .vlt-cockpit__actions {
        order: 2;
    }

    .vlt-cockpit__mobile-expand {
        display: inline-flex;
        flex: 0 0 auto;
        order: 3;
        width: 100%;
        margin-top: 10px;
        background: #00742e;
    }

    /* V2.9.271: "Meine Statistik" kommt am Handy NACH den Buttons - die
       Buttons stehen damit ganz vorne im Cockpit. */
    .vlt-cockpit__statgroup {
        order: 4;
    }

    .vlt-cockpit__calendar {
        order: 5;
        display: none !important;
    }

    .vlt-cockpit__stats {
        order: 5;
        display: none !important;
    }

    .vlt-cockpit__stats-heading,
    .vlt-cockpit__stats-heading-row {
        display: none !important;
    }

    .vlt-cockpit__day {
        order: 6;
        display: none !important;
    }

    .vlt-cockpit__footer {
        order: 7;
    }

    .vlt-cockpit.is-mobile-expanded .vlt-cockpit__calendar {
        display: flex !important;
    }

    .vlt-cockpit.is-mobile-expanded .vlt-cockpit__stats {
        display: flex !important;
    }

    .vlt-cockpit.is-mobile-expanded .vlt-cockpit__stats-heading {
        display: block !important;
    }

    .vlt-cockpit.is-mobile-expanded .vlt-cockpit__stats-heading-row {
        display: flex !important;
    }

    .vlt-cockpit.is-mobile-expanded .vlt-cockpit__day {
        display: grid !important;
    }
}

/* =========================================================================
   V2.9.291: FINALER Desktop-Kopfzeilen-Block - MUSS am DATEIENDE stehen!
   Grund: Alt-Regeln aus V2.8.x (Zeilen ~1963-2010, teils mit !important)
   stehen spaeter in der Datei als der Desktop-Block bei ~765 und haben
   dessen Aenderungen (V2.9.290) komplett ueberstimmt - deshalb war auf der
   Seite "nichts zu sehen". Dieser Block steht bewusst NACH allen Alt-Regeln
   und nutzt !important, wo die Alt-Regeln selbst !important verwenden.
   Nur Desktop (min-width:761px) - Smartphone-Ansicht bleibt unberuehrt.
   ========================================================================= */
@media (min-width: 761px) {
    .vlt-cockpit__top-right {
        align-items: stretch;
    }
    .vlt-cockpit__top-right .vlt-cockpit__reminders {
        align-self: center;
    }
    /* Heute-Kachel und Vertriebsmonat-Kachel EXAKT gleich hoch.
       V2.9.294: Kopfabschnitt kompakter - Kacheln 132px -> 112px. */
    .vlt-cockpit__clock,
    .vlt-cockpit__month-badge {
        box-sizing: border-box;
        height: 112px !important;
        display: flex !important;
        flex-direction: column;
    }
    .vlt-cockpit__top {
        padding-top: 12px !important;
    }
    /* V2.9.296/300: "Willkommen zurueck" am Desktop kleiner (nur die
       Ueberschrift - Name/Position bleiben unveraendert). */
    .vlt-cockpit__welcome h2 {
        font-size: 22px !important;
    }
    /* V2.9.292: Heute-Kachel spiegelbildlich zum Vertriebsmonat aufgebaut -
       Ueberschrift "HEUTE" oben auf EXAKT gleicher Hoehe wie "VERTRIEBSMONAT"
       (gleiches padding-top, oben angepinnt), Datum + Uhrzeit mittig
       zentriert im verbleibenden Raum (wie "Juli 2026" nebenan). */
    .vlt-cockpit__clock {
        min-width: 220px;
        padding: 13px 22px 15px !important;
        justify-content: flex-start;
    }
    .vlt-cockpit__clock .vlt-cockpit__clock-label {
        flex: 0 0 auto;
        margin-bottom: 0 !important;
    }
    /* Beide Ueberschriften exakt gleiche Schriftgroesse/Zeilenhoehe, damit
       "HEUTE" und "VERTRIEBSMONAT" pixelgenau auf einer Linie sitzen. */
    .vlt-cockpit__clock .vlt-cockpit__clock-label,
    .vlt-cockpit__month-badge > span:first-child {
        font-size: 10.5px !important;
        line-height: 1.3 !important;
    }
    .vlt-cockpit__clock strong {
        margin: auto 0 0 !important;
        font-size: 17px !important;
    }
    .vlt-cockpit__clock small {
        margin: 3px 0 auto !important;
        font-size: 20px !important;
    }
    /* Vertriebsmonat: Ueberschrift oben wie HEUTE, "Juli 2026" mittig
       zentriert im verbleibenden Raum darunter. */
    .vlt-cockpit__month-badge {
        min-width: 190px;
        padding: 13px 24px 15px !important;
    }
    .vlt-cockpit__month-badge > span:first-child {
        flex: 0 0 auto;
        margin-bottom: 0 !important;
    }
    .vlt-cockpit__month-badge strong {
        margin: auto 0 0 !important;
        font-size: 30px !important;
        line-height: 1.05 !important;
    }
    .vlt-cockpit__month-badge small {
        margin: 3px 0 auto !important;
        font-size: 14px !important;
    }
    /* Monitor "Vertriebsjahr 2026" deutlich hoeher (wurde vorher von der
       V2.9.286-Basisregel padding:14px 22px ueberstimmt).
       V2.9.293: Karte rueckt naeher an den Kopfbereich - Abstand nach oben
       EXAKT gleich dem Abstand nach unten zur "Mein Tag"-Reihe (16px).
       Vorher: 26px Kopf-Padding + 18px margin = 44px Luecke. */
    .vlt-cockpit__top {
        padding-bottom: 16px !important;
    }
    .vlt-cockpit__calendar--overview {
        margin-top: 0;
        padding: 54px 30px !important;
    }
    .vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring {
        width: 108px;
        height: 108px;
    }
    .vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring::after {
        inset: 10px;
    }
    .vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring span {
        font-size: 31px;
    }
    /* V2.9.306: Werte-Block haengt am RECHTEN Rand der Karte - Breite
       schrumpft auf den Inhalt, Labels wandern mit nach rechts. */
    .vlt-cockpit__ov-rows {
        max-width: none;
        width: fit-content;
        min-width: 0;
    }
    /* V2.9.301: Desktop-Monitor im SELBEN Schema wie der Handy-Kasten -
       der Block sitzt rechts in der Karte, innen aber: Labels links in
       fester Spalte, alle Werte linksbuendig auf derselben Linie.
       Ziffernspalten (.vlt-ov-num) halten "Tage"/"KW" uebereinander. */
    .vlt-cockpit__ov-row {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center;
        gap: 6px;
        padding: 11px 4px;
    }
    .vlt-cockpit__ov-row .vlt-cockpit__ov-label {
        flex: 0 0 165px;
        /* V2.9.307: Labels LINKSBUENDIG untereinander (gleiche
           Anfangskante) - der ganze Block haengt trotzdem rechts. */
        text-align: left;
    }
    .vlt-cockpit__ov-row strong {
        margin-left: 0 !important;
        text-align: left;
        font-size: 18px;
        white-space: nowrap;
    }
    /* "2026" gleichwertig neben "Juli" statt winzig. */
    .vlt-cockpit__ov-row > small {
        font-size: 14px;
        font-weight: 700;
    }
    /* V2.9.304: "Juli 2026" ganz nach rechts an die Kante (nur die
       Vertriebsmonat-Zeile) - Rest-Zeilen bleiben wie sie sind. */
    .vlt-cockpit__ov-row:first-child strong {
        margin-left: auto !important;
    }
}

/* V2.9.298: Ziffern-Spalte in den Rest-Zeilen (Desktop-Monitor UND
   Willkommenskasten am Handy): Zahlen rechtsbuendig in fester Breite,
   damit "Tage" und "KW" in beiden Zeilen exakt uebereinander sitzen.
   Monospace-Schrift ist vererbt, 3ch = drei Ziffernbreiten. */
.vlt-ov-num {
    display: inline-block;
    min-width: 3ch;
    text-align: right;
}
.vlt-ov-num--kw {
    min-width: 2ch;
}

/* =========================================================================
   V2.9.305: Desktop-Monitor auch am HANDY sichtbar - GLEICHE Aufteilung
   wie am Desktop: links die Vertriebsjahr-Texte, mittig der grosse
   Wochen-Ring, rechts die Werte-Zeilen. Kompakt skaliert, sitzt direkt
   unter dem Willkommenskasten. MUSS am Dateiende stehen (Kaskade).
   ========================================================================= */
@media (max-width: 800px) {
    /* V2.9.308: Willkommens-Karte und Monitor verschmelzen am Handy zu
       EINER Karte - oben Willkommen+Heute, unten der Monitor, getrennt
       nur durch eine feine Linie. */
    .vlt-cockpit__mobile-top {
        margin-bottom: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }
    /* V2.9.309: Ring sitzt jetzt oben in der Heute-Zeile - der Monitor
       hat nur noch ZWEI Spalten wie am Desktop: Texte links, Werte rechts. */
    .vlt-cockpit__calendar--overview {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        align-items: center;
        gap: 10px;
        order: 1;
        margin: 0 !important;
        border-top: 1px solid #e6ede8;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding: 10px 12px 12px !important;
        justify-items: stretch;
        text-align: left;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__cal-progress--big {
        display: none !important;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__calendar-copy {
        min-width: 0;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__calendar-copy > span {
        font-size: 9px;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__calendar-current {
        font-size: 9.5px !important;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__calendar-range {
        margin: 3px 0 2px !important;
        font-size: 12.5px !important;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__calendar-meta-week {
        font-size: 9.5px;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__cal-progress--big {
        justify-self: center;
        gap: 4px;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring {
        width: 62px;
        height: 62px;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring::after {
        inset: 6px;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring span {
        font-size: 18px;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring span small {
        font-size: 10px;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__cal-progress-label {
        font-size: 7.5px;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__ov-rows {
        max-width: none;
        min-width: 0;
        width: 100%;
    }
    /* V2.9.308: Zeilen wie am Desktop - Label links, Wert rechts,
       EINE Zeile pro Wert. */
    .vlt-cockpit__calendar--overview .vlt-cockpit__ov-row {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 5px 0;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__ov-label {
        font-size: 8.5px;
        letter-spacing: .05em;
        text-align: left;
        white-space: nowrap;
    }
    /* "bis 30.11." am Handy ausblenden (Platz). */
    .vlt-cockpit__calendar--overview .vlt-cockpit__ov-label small {
        display: none;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__ov-row strong {
        margin-left: auto !important;
        font-size: 12.5px;
        white-space: nowrap;
    }
    .vlt-cockpit__calendar--overview .vlt-cockpit__ov-row small {
        font-size: 10.5px;
    }
}

/* =========================================================================
   V2.9.312: "Meine Ziele" auch am DESKTOP - Button oberhalb der
   Vertriebsjahr-Karte schaltet auf die komplett aufgeklappte Statistik um
   (alle Aufklapp-Leisten weg, Rubriken im blauen Rahmen mit Ueberschrift).
   ========================================================================= */
.vlt-cockpit__deskstat-row {
    display: none;
}
@media (min-width: 761px) {
    /* V2.9.313: Button sitzt IN der weissen Kachel als eigene erste
       Rasterzeile - linksbuendig ueber "Vertriebsjahr 2026". */
    .vlt-cockpit__deskstat-row {
        display: flex;
        grid-column: 1 / -1;
        justify-content: flex-start;
        margin: 0 0 10px;
    }
    /* V2.9.314: Kachelhoehe bleibt EXAKT wie vorher - der Platz fuer den
       Button wird oben/unten aus dem Innenabstand geholt (vorher 54/54,
       jetzt 14 + Button(~40) + 10 + ... + 44 = gleiche Gesamthoehe). */
    .vlt-cockpit__calendar--overview {
        padding: 14px 30px 44px !important;
    }
    .vlt-cockpit__deskstat {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border: 1px solid rgba(23, 63, 39, .16);
        border-radius: 10px;
        background: #dcebe0;
        color: #173f27;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .03em;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(23, 58, 35, .08);
    }
    .vlt-cockpit__deskstat:hover {
        box-shadow: 0 2px 6px rgba(23, 58, 35, .12);
    }
    .vlt-cockpit__deskstat i {
        font-style: normal;
        font-size: 16px;
        line-height: 1;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__deskstat {
        background: #009039;
        border-color: #009039;
        color: #ffffff;
    }
    /* Statistik-Vollansicht am Desktop: die weisse Kachel bleibt (sie
       traegt den Zurueck-Button), ihr Inhalt wird ausgeblendet. */
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__calendar--overview {
        display: block !important;
        padding: 14px 22px !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__calendar--overview .vlt-cockpit__calendar-copy,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__calendar--overview .vlt-cockpit__cal-progress,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__calendar--overview .vlt-cockpit__ov-rows {
        display: none !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__deskstat-row {
        margin: 0;
    }
    /* WICHTIG: Die Uebersichts-Kachel traegt beide Klassen (__calendar und
       __calendar--overview) - sie darf NICHT mit ausgeblendet werden, weil
       sie den Zurueck-Button enthaelt. */
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__actions,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__calendar:not(.vlt-cockpit__calendar--overview),
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__stats,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__stats-heading,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__stats-heading-row,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__day,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__footer {
        display: none !important;
    }
    /* Aufklapp-Leisten raus, Inhalte dauerhaft offen. */
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup-bar,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__foldall-row {
        display: none !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup-body[hidden] {
        display: block !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup {
        margin-top: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold:not(.is-open) .vlt-cockpit__fold-body,
    .vlt-cockpit.vlt-is-statsview .vlt-goalstrip:not(.is-open) .vlt-goalstrip__body {
        display: block !important;
    }
    /* Blauer Rubrik-Rahmen mit Ueberschrift im Kasten. */
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold,
    .vlt-cockpit.vlt-is-statsview .vlt-goalstrip {
        margin: 14px 0;
        border: 1px solid rgba(47, 111, 237, .45) !important;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: none !important;
        overflow: hidden;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-bar,
    .vlt-cockpit.vlt-is-statsview .vlt-goalstrip__bar {
        pointer-events: none;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(47, 111, 237, .25) !important;
        color: #173f27 !important;
        box-shadow: none !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-chevron,
    .vlt-cockpit.vlt-is-statsview .vlt-goalstrip__bar-chevron {
        display: none !important;
    }
}

/* =========================================================================
   V2.9.317: FIX - in der Ziel-Ansicht wurden die Statistik-Elemente auch
   INNERHALB der Rubriken ausgeblendet (gleiche Klassennamen), dadurch
   blieben "Woche & Monat" & Co. leer. Innerhalb der Rubriken werden sie
   jetzt gezielt wieder eingeblendet - Handy UND Desktop.
   ========================================================================= */
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup .vlt-cockpit__stats,
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body .vlt-cockpit__stats,
.vlt-cockpit.vlt-is-statsview .vlt-goalstrip__body .vlt-cockpit__stats {
    display: flex !important;
}
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup .vlt-cockpit__stats-heading,
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body .vlt-cockpit__stats-heading,
.vlt-cockpit.vlt-is-statsview .vlt-goalstrip__body .vlt-cockpit__stats-heading {
    display: block !important;
}
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup .vlt-cockpit__stats-heading-row,
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body .vlt-cockpit__stats-heading-row {
    display: flex !important;
}
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup .vlt-cockpit__calendar,
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body .vlt-cockpit__calendar {
    display: flex !important;
}
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup .vlt-cockpit__day,
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body .vlt-cockpit__day {
    display: grid !important;
}
/* Der leere Platzhalter-Kopf der Statistik-Gruppe darf keinen Rahmen ziehen. */
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body > .vlt-cockpit__stats {
    margin-top: 8px;
}

/* =========================================================================
   V2.9.318: Dasselbe nochmal EXPLIZIT fuer die Smartphone-Ansicht und ganz
   am Dateiende - der Mobil-Block weiter oben blendet .vlt-cockpit__stats &
   Co. grundsaetzlich aus (nur "Dashboard aufgeklappt" zeigt sie). In der
   Ziel-Ansicht muessen sie INNERHALB der Rubriken sichtbar sein.
   ========================================================================= */
@media (max-width: 800px) {
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup .vlt-cockpit__stats,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body .vlt-cockpit__stats,
    .vlt-cockpit.vlt-is-statsview .vlt-goalstrip__body .vlt-cockpit__stats {
        display: flex !important;
        order: 0;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup .vlt-cockpit__stats-heading,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body .vlt-cockpit__stats-heading,
    .vlt-cockpit.vlt-is-statsview .vlt-goalstrip__body .vlt-cockpit__stats-heading {
        display: block !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup .vlt-cockpit__stats-heading-row,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body .vlt-cockpit__stats-heading-row {
        display: flex !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup .vlt-cockpit__calendar,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body .vlt-cockpit__calendar {
        display: flex !important;
        order: 0;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup .vlt-cockpit__day,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body .vlt-cockpit__day {
        display: grid !important;
        order: 0;
    }
    /* Kennzahlen-Kacheln am Handy untereinander (lesbar statt gequetscht). */
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body .vlt-cockpit__stats {
        flex-direction: column;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__fold-body .vlt-cockpit__stat {
        width: 100%;
        flex: 1 1 auto;
    }
}

/* =========================================================================
   V2.9.320: "Meine Ziele" im Stil der oberen Navigations-Pillen -
   flach, weiss, dezenter Rahmen, KEIN gruener Hintergrund. Ausserdem
   entfaellt der untere "Meine Statistik"-Balken komplett (der Button
   ersetzt ihn). MUSS am Dateiende stehen (Kaskade).
   ========================================================================= */
.vlt-cockpit__deskstat,
.vlt-cockpit__mobile-statbtn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
    padding: 7px 14px !important;
    border: 1px solid #d4e3d8 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #35543f !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.vlt-cockpit__deskstat:hover,
.vlt-cockpit__mobile-statbtn:hover {
    border-color: #009039 !important;
    color: #173f27 !important;
}
.vlt-cockpit__deskstat i,
.vlt-cockpit__mobile-statbtn i {
    display: inline-flex;
    font-style: normal;
}
.vlt-cockpit__deskstat i svg,
.vlt-cockpit__mobile-statbtn i svg {
    width: 15px;
    height: 15px;
    display: block;
}
/* Aktiver Zustand (Ziel-Ansicht offen): gefuellte Pille wie der aktive
   Eintrag in der Navigationsleiste. */
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__deskstat,
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__mobile-statbtn {
    border-color: #009039 !important;
    background: #009039 !important;
    color: #fff !important;
}
/* Der untere Balken "Meine Statistik" entfaellt - die Gruppe erscheint nur
   noch ueber den Button "Meine Ziele". */
.vlt-cockpit__statgroup {
    display: none !important;
}
.vlt-cockpit.vlt-is-statsview .vlt-cockpit__statgroup {
    display: block !important;
}
.vlt-cockpit__statgroup-bar {
    display: none !important;
}
@media (max-width: 800px) {
    .vlt-cockpit__mobile-statbtn {
        padding: 6px 10px !important;
        font-size: 10.5px !important;
    }
    .vlt-cockpit__mobile-statbtn i svg {
        width: 13px;
        height: 13px;
    }
}

/* =========================================================================
   V2.9.321: "Meine Ziele" sitzt jetzt UNTER den Vertriebsjahr-Texten in
   der linken Spalte der weissen Kachel. Damit die Kachel dabei NICHT
   hoeher wird, wird der Innenabstand entsprechend zurueckgenommen.
   ========================================================================= */
@media (min-width: 761px) {
    .vlt-cockpit__calendar--overview .vlt-cockpit__deskstat-row {
        display: flex;
        justify-content: flex-start;
        margin: 12px 0 0;
    }
    .vlt-cockpit__calendar--overview {
        padding: 26px 30px !important;
    }
    /* In der Ziel-Ansicht bleibt nur der Zurueck-Button in der Leiste. */
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__calendar--overview {
        padding: 14px 22px !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__calendar--overview .vlt-cockpit__calendar-copy {
        display: block !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__calendar--overview .vlt-cockpit__calendar-copy > span,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__calendar--overview .vlt-cockpit__calendar-copy > small,
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__calendar--overview .vlt-cockpit__calendar-copy > strong {
        display: none !important;
    }
    .vlt-cockpit.vlt-is-statsview .vlt-cockpit__calendar--overview .vlt-cockpit__deskstat-row {
        margin: 0;
    }
}

/* =========================================================================
   V2.9.324: Am Handy ordnet das Cockpit seine Bloecke per Flex-"order" neu.
   Ohne eigenen Wert landete die Kontaktkarte weit oben - sie gehoert aber
   ganz nach unten, unter die Buttons.
   ========================================================================= */
@media (max-width: 800px) {
    .vlt-cockpit .vlt-contact {
        order: 20;
        width: 100%;
    }
}

/* VLT-DESKTOP-BUEHNE-RAHMEN-3
 * 17.08. - Christians Aufbau: Kopfleiste und Willkommensleiste ueber die volle
 * Breite, darunter zwei Karten nebeneinander (Vertriebsmonat | Vertriebskalender),
 * darunter die Aktions-Kacheln ueber beide Spalten verteilt.
 * Kopfleiste und Willkommenskarte kommen aus der Handy-Ansicht; die gruene
 * Klassik-Kopfleiste und die alte Klassik-Willkommensleiste bleiben aus.
 */
@media (min-width: 761px) {
  .vlt-ed-seite {
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    background: transparent !important;
    padding: 0 0 40px !important;
  }
  .vlt-ed-seite > * { display: none !important; }
  /* Ohne diese zweite Zeile steht die Klassik-Maske sichtbar auf dem Schirm, bis das
     Skript die Buehne gebaut hat - es sieht aus, als schoebe sich Elegant darueber.
     Deshalb bleibt die Flaeche in Elegant von der ersten Sekunde an leer. */
  .vlt-cockpit--desktop-elegant > * { display: none !important; }

  .vlt-ed-seite > .vlt-ed-kopf {
    display: block !important;
    width: 100%;
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  .vlt-ed-seite > .vlt-ed-will,
  .vlt-ed-seite > .vlt-ed-zwei,
  .vlt-ed-seite > .vlt-cockpit__actions {
    width: 100%;
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  .vlt-ed-seite > .vlt-ed-will {
    display: block !important;
    margin-top: 18px;
  }

  .vlt-ed-seite > .vlt-ed-zwei {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 20px;
  }
  .vlt-ed-links, .vlt-ed-rechts { min-width: 0; }
  .vlt-ed-buehne { overflow: hidden; background: transparent; }
  .vlt-ed-buehne iframe { display: block; border: 0; background: transparent; }

  .vlt-ed-seite > .vlt-cockpit__actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-top: 24px;
    background: none;
    border: 0;
    position: static;
  }
  /* Aktionsknoepfe genau wie in der Handy-Ansicht: Symbol oben, Beschriftung
     darunter, gruener Rahmen, kein Schatten. */
  .vlt-cockpit.vlt-ed-seite .vlt-cockpit__actions .vlt-cockpit__action {
    max-width: none !important;
    min-width: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 76px;
    padding: 13px 10px;
    border-radius: 14px;
    border: 1px solid #167835 !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 400;
    color: #173f27 !important;
    text-align: center;
  }
  .vlt-cockpit.vlt-ed-seite .vlt-cockpit__actions .vlt-cockpit__action-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(23, 63, 39, .1) !important;
  }
  .vlt-cockpit.vlt-ed-seite .vlt-cockpit__actions .vlt-cockpit__action-icon svg { width: 17px; height: 17px; }
  .vlt-cockpit.vlt-ed-seite .vlt-cockpit__actions .vlt-cockpit__action-label { display: block !important; font-size: 13px; font-weight: 800; color: #173f27; line-height: 1.25; }
}
/* VLT-DESKTOP-BUEHNE-RAHMEN-3-ENDE */

/* VLT-TESTANSICHT-BAND
 * 18.08. - Damit Christian die Testseite auf einen Blick erkennt. Das Band haengt
 * ausschliesslich an .vlt-cockpit--desktop-elegant2 und taucht in keiner der drei
 * bestehenden Masken auf. */
/* 18.08. - Das Band haengt jetzt am Seitenrahmen statt am Cockpit, damit es auf
   JEDER Seite der Testumgebung steht - also auch auf der Auftragserfassung. Das
   alte Band am Cockpit ist abgeschaltet, sonst stuenden dort zwei. */
.vlt-cockpit--desktop-elegant2::before { content: none !important; }

/* Das Band kommt jetzt aus dem Seitengeruest (vlt_e2_band in vl-limburg-tool.php)
   und steht damit auf JEDER Seite. Die Regel hier wuerde ein zweites Band auf der
   Cockpit-Seite zeichnen - deshalb raus. */

@media (min-width: 761px) {
  .vlt-cockpit--desktop-elegant2:not(.vlt-cockpit) {
    content: 'aus';
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    background: #b45309;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    text-align: center;
    border-radius: 0 0 12px 12px;
  }
}
/* VLT-TESTANSICHT-BAND-ENDE */

/* VLT-ELEGANT2-KARTE-MONAT
 * 18.08. - Erste Karte des Elegant-Umbaus: "Aktueller Vertriebsmonat".
 * Alles haengt an .vlt-cockpit--desktop-elegant2 und beruehrt keine der drei
 * bestehenden Masken. Grundlage sind die Gestaltungswerte des Tools:
 * --vlt-brand #009039, --vlt-shadow-card. */
@media (min-width: 761px) {
  .vlt-cockpit--desktop-elegant2 .vlt-cockpit__calendar {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 144, 57, .14);
    border-radius: 18px;
    box-shadow: 0 14px 38px rgba(22, 52, 32, .10);
    /* Die Klassik-Regeln fuer diese Karte tragen !important - deshalb hier auch. */
    padding: 48px 30px 26px !important;
    overflow: hidden;
  }
  /* Die gruene Klammer am linken Rand - das Erkennungszeichen der Elegant-Karten. */
  .vlt-cockpit--desktop-elegant2 .vlt-cockpit__calendar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 5px;
    background: #009039;
    border-radius: 0 5px 5px 0;
  }
  /* Ueberschrift mittig, klein und gesperrt - wie in der Handy-Ansicht. */
  .vlt-cockpit--desktop-elegant2 .vlt-cockpit__calendar::after {
    content: 'AKTUELLER VERTRIEBSMONAT';
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    color: #6b7f70;
  }
}
/* VLT-ELEGANT2-KARTE-MONAT-ENDE */

/* VLT-ELEGANT2-SPIEGEL */
/* 18.08. - Die Handy-Regeln der Elegant-Karten, gespiegelt auf .vlt-cockpit--desktop-elegant2.
   Aufgenommen wird jede Regel, die im Dokument auch wirklich etwas trifft - so fehlt nichts
   (die erste Fassung hatte nach Wortliste gefiltert, dabei fehlten die Symbole der
   Kalenderknoepfe). Beruehrt keine der drei bestehenden Masken. */
@media (min-width: 761px){
.vlt-cockpit--desktop-elegant2 .vlt-klar-schedule-list{min-height: 0px; flex: 1 1 auto; overflow: auto; padding: 12px 14px 22px; background: linear-gradient(rgb(247, 251, 248) 0px, rgb(255, 255, 255) 130px); overscroll-behavior: contain;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-schedule-list__intro{margin: 0px 0px 11px; color: rgb(105, 119, 110); font-size: 10px; line-height: 1.45;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-schedule-list__rows{display: grid; gap: 7px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-schedule-list__empty{margin: 22px 0px; padding: 18px 12px; border: 1px dashed rgb(205, 219, 208); border-radius: 14px; color: rgb(102, 115, 106); font-size: 11px; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell{background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(246, 249, 247, 0.96)) !important; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(192, 205, 196, 0.32) 0px -1px 0px inset !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-head{background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 60%, rgb(246, 249, 247) 100%) !important; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(185, 199, 189, 0.4) 0px -1px 0px inset, rgba(204, 213, 206, 0.96) 0px 4px 0px, rgba(20, 45, 29, 0.18) 0px 8px 9px, rgba(20, 43, 29, 0.16) 11px 16px 25px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-klar-welcome, .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview, .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview__utility{border-top-color: rgb(255, 255, 255) !important; border-right-color: rgba(200, 211, 202, 0.98) !important; border-bottom-color: rgba(190, 202, 193, 0.98) !important; background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 55%, rgb(248, 251, 249) 100%) !important; box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(180, 194, 184, 0.35) 0px -2px 0px inset, rgba(201, 210, 203, 0.98) 0px 4px 0px, rgba(18, 47, 29, 0.19) 0px 8px 10px, rgba(20, 45, 29, 0.19) 14px 22px 34px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-sun, .vlt-cockpit--desktop-elegant2 .vlt-cockpit__bell, .vlt-cockpit--desktop-elegant2 .vlt-klar-account{background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgb(245, 248, 246) 66%, rgb(234, 241, 236) 100%) !important; box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(172, 191, 178, 0.3) 0px -2px 0px inset, rgba(197, 207, 200, 0.96) 0px 4px 0px, rgba(18, 55, 31, 0.2) 0px 8px 10px, rgba(20, 47, 30, 0.15) 8px 13px 18px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page{background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 58%, rgb(244, 247, 245) 100%) !important; box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(166, 183, 171, 0.44) 0px -2px 0px inset, rgba(191, 202, 194, 0.98) 0px 5px 0px, rgba(20, 49, 31, 0.22) 0px 10px 12px, rgba(21, 43, 29, 0.19) 12px 19px 27px, rgba(22, 129, 58, 0.18) 0px 0px 0px 1px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month{text-shadow: rgba(110, 22, 20, 0.3) 0px 1px 0px; background: linear-gradient(145deg, rgb(244, 91, 83) 0%, rgb(223, 65, 60) 48%, rgb(201, 47, 44) 100%) !important; box-shadow: rgba(255, 255, 255, 0.42) 0px 2px 0px inset, rgba(119, 20, 18, 0.23) 0px -2px 0px inset, rgba(166, 42, 37, 0.38) 0px 4px 0px, rgba(126, 34, 30, 0.21) 0px 8px 10px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring{box-shadow: rgba(255, 255, 255, 0.84) 0px 2px 0px inset, rgba(194, 204, 197, 0.98) 0px 5px 0px, rgba(15, 60, 32, 0.25) 0px 10px 12px, rgba(20, 45, 29, 0.19) 10px 17px 24px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring::after{background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgb(247, 250, 248) 68%, rgb(237, 242, 238) 100%) !important; box-shadow: rgba(17, 54, 29, 0.08) 0px 3px 5px inset, rgb(255, 255, 255) 0px -2px 0px inset !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow{border-color: rgba(193, 206, 196, 0.98) !important; background: linear-gradient(145deg, rgb(255, 255, 255), rgb(237, 243, 239)) !important; box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(172, 190, 177, 0.4) 0px -1px 0px inset, rgba(195, 205, 198, 0.98) 0px 4px 0px, rgba(17, 53, 30, 0.2) 0px 9px 11px, rgba(20, 44, 29, 0.18) 10px 16px 24px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button{background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgba(247, 250, 248, 0.96) 58%, rgba(232, 241, 235, 0.91) 100%) !important; box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(174, 193, 179, 0.25) 0px -2px 0px inset, rgba(199, 210, 202, 0.96) 0px 4px 0px, rgba(18, 58, 32, 0.18) 0px 8px 10px, rgba(20, 48, 30, 0.13) 7px 12px 18px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__menu-glass{background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgba(232, 245, 236, 0.96) 62%, rgba(199, 226, 206, 0.9) 100%) !important; box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(22, 129, 58, 0.14) 0px -2px 0px inset, rgba(179, 205, 186, 0.94) 0px 5px 0px, rgba(15, 71, 34, 0.25) 0px 10px 13px, rgba(20, 48, 30, 0.16) 9px 16px 23px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-calendar{filter: drop-shadow(rgba(81, 89, 83, 0.3) 0px 4px 1px) drop-shadow(rgba(20, 45, 29, 0.18) 6px 9px 8px) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-nav-glass{background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgba(225, 242, 230, 0.96) 64%, rgba(193, 224, 201, 0.9) 100%) !important; box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(22, 129, 58, 0.15) 0px -2px 0px inset, rgba(177, 201, 184, 0.94) 0px 5px 0px, rgba(15, 69, 33, 0.26) 0px 10px 13px, rgba(20, 46, 29, 0.17) 8px 15px 22px !important;}
.vlt-cockpit--desktop-elegant2{color: rgb(20, 41, 27); padding: 18px 16px 104px !important; border: 0px !important; border-radius: 0px !important; background: rgb(255, 255, 255) !important; box-shadow: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__brandbar{margin: 0px 0px 18px !important; padding: 0px 0px 14px !important; border-bottom-color: rgb(228, 233, 229) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__brandbar-logo{height: calc(38px * var(--vlt-tool-logo-scale, 1)) !important; max-width: calc(180px * var(--vlt-tool-logo-scale, 1)) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__brandbar-name{font-size: 12px; letter-spacing: 0.13em;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__brandbar-right{gap: 5px;}
.vlt-cockpit--desktop-elegant2 .vlt-mini-nav, .vlt-cockpit--desktop-elegant2 > .vlt-cockpit__top{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__mobile-top{flex-direction: column; gap: 14px; border: 1px solid rgb(223, 231, 225); border-radius: 16px; background: rgb(255, 255, 255); box-shadow: rgba(23, 58, 35, 0.07) 0px 5px 18px; display: flex !important; margin: 0px 0px 16px !important; padding: 16px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__mobile-row{padding: 0px !important; border: 0px !important; background: transparent !important; box-shadow: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__mobile-welcome-text{font-size: 22px !important; font-weight: 800 !important; color: rgb(20, 41, 27) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__mobile-identity{margin-top: 5px; line-height: 1.45; font-size: 12px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__mobile-clock{grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; display: grid !important; padding-top: 13px !important; border-top: 1px solid rgb(237, 240, 237) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__calendar--overview{display: grid !important; grid-template-columns: 1fr auto !important; gap: 14px !important; margin: 0px 0px 16px !important; padding: 18px !important; border: 1px solid rgb(223, 231, 225) !important; border-radius: 16px !important; background: rgb(255, 255, 255) !important; box-shadow: rgba(23, 58, 35, 0.07) 0px 5px 18px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__calendar-copy{min-width: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__calendar-copy > span:first-child{font-size: 12px; letter-spacing: 0.1em;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__calendar-range{font-size: 19px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__cal-progress--big{display: flex !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring{width: 82px; height: 82px;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__ov-rows{grid-column: 1 / -1; max-width: none; min-width: 0px; border-top: 1px solid rgb(231, 236, 232);}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__ov-row{padding: 10px 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__day{margin: 0px 0px 16px !important; padding: 16px !important; border: 1px solid rgb(223, 231, 225) !important; border-radius: 16px !important; background: rgb(255, 255, 255) !important; box-shadow: rgba(23, 58, 35, 0.06) 0px 5px 18px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__day-heading{margin-bottom: 8px;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__day-item{min-height: 72px; padding: 12px 0px !important; border-width: 1px 0px 0px !important; border-style: solid none none !important; border-color: rgb(237, 240, 237) currentcolor currentcolor !important; border-image: none !important; border-radius: 0px !important; background: transparent !important; box-shadow: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__day-item:first-child{border-top: 0px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__actions{display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 10px !important; margin: 0px 0px 18px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__action{min-height: 92px !important; padding: 13px 10px !important; border: 1px solid rgb(22, 120, 53) !important; border-radius: 14px !important; background: rgb(255, 255, 255) !important; color: rgb(23, 63, 39) !important; box-shadow: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__action--scan{display: flex !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__action-label{font-size: 13px !important; line-height: 1.25 !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__mobile-expand{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__footer, .vlt-cockpit--desktop-elegant2 .vlt-contact{margin-bottom: 18px;}
.vlt-cockpit--desktop-elegant2, .vlt-cockpit--desktop-elegant2 button, .vlt-cockpit--desktop-elegant2 input, .vlt-cockpit--desktop-elegant2 select, .vlt-cockpit--desktop-elegant2 textarea{text-size-adjust: 100%;}
.vlt-cockpit--desktop-elegant2 > .vlt-cockpit-klar-shell{display: block !important;}
.vlt-cockpit--desktop-elegant2{position: relative !important; left: calc(50% - 50vw) !important; width: 100vw !important; max-width: 100vw !important; min-width: 0px !important; margin-right: 0px !important; margin-left: 0px !important; padding: 16px 12px 104px !important; overflow-x: hidden !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-head{padding-bottom: 14px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-brand img{height: calc(34px * var(--vlt-tool-logo-scale, 1)) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-brand strong{font-size: 13px; letter-spacing: 0.1em;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-account{width: 42px; height: 42px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-view{padding-top: 20px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-welcome{align-items: flex-start; padding: 16px; border: 1px solid rgb(223, 231, 225); border-radius: 16px; box-shadow: rgba(23, 58, 35, 0.06) 0px 5px 18px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-sun{width: 48px; height: 48px; border-radius: 14px; font-size: 27px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-welcome h2{font-size: 22px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-welcome p{font-size: 12px; line-height: 1.45;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-ring{width: 88px; height: 88px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-ring > span{font-size: 24px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-peek{grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid rgb(228, 233, 229);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-actions{display: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-actions > div{grid-template-columns: 1fr 1fr; gap: 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-actions a{min-height: 100px; align-items: flex-start; flex-direction: column; padding: 14px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-actions a b{display: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-actions a.is-primary, .vlt-cockpit--desktop-elegant2 .vlt-klar-actions a.is-scan{display: flex;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goals-title h2{font-size: 30px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-hero, .vlt-cockpit--desktop-elegant2 .vlt-klar-goal-month, .vlt-cockpit--desktop-elegant2 .vlt-klar-weeks{padding: 17px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-hero__body{gap: 18px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-ring{width: 104px; height: 104px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-hero dl > div{gap: 16px; font-size: 13px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-month__values{grid-template-columns: 1fr;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-month__values > div{display: flex; justify-content: space-between; padding: 11px 0px; border-top: 1px solid rgb(229, 234, 230); border-left: 0px; text-align: left;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-month__values strong{margin: 0px; font-size: 15px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-overview{position: absolute; z-index: 8; display: flex; inset: 0px; box-sizing: border-box; flex-direction: column; overflow: auto; padding: 18px max(14px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)); background: rgba(243, 247, 244, 0.94); backdrop-filter: blur(14px);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-overview > header, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-overview > p, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-list{width: min(100%, 560px); box-sizing: border-box; margin-right: auto; margin-left: auto; background: rgb(255, 255, 255);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-overview > header{display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 10px; border-width: 1px 1px 0px 3px; border-style: solid solid none; border-color: rgb(207, 224, 211) rgb(207, 224, 211) currentcolor rgb(22, 129, 58); border-image: none; border-radius: 18px 18px 0px 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-overview header div{display: flex; flex-direction: column;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-overview header small{color: rgb(22, 129, 58); font-size: 9px; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-overview header h3{margin: 2px 0px 0px; font-size: 18px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-overview header button{display: grid; width: 36px; height: 36px; place-items: center; border: 0px; border-radius: 50%; background: rgb(237, 245, 239); color: rgb(23, 63, 39); font-size: 22px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-overview > p{margin: 0px; padding: 0px 18px 13px; border-right: 1px solid rgb(207, 224, 211); border-left: 3px solid rgb(22, 129, 58); color: rgb(104, 117, 109); font-size: 10px; line-height: 1.45;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-list{padding: 0px 18px 18px; border-width: 0px 1px 1px 3px; border-style: none solid solid; border-color: currentcolor rgb(207, 224, 211) rgb(207, 224, 211) rgb(22, 129, 58); border-image: none; border-radius: 0px 0px 18px 18px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-list h4{margin: 14px 0px 2px; padding: 0px 0px 7px; border-bottom: 1px solid rgb(220, 231, 223); color: rgb(22, 129, 58); font-size: 10px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-list article{display: grid; grid-template-columns: 105px minmax(0px, 1fr); gap: 12px; padding: 12px 0px; border-top: 1px solid rgb(226, 233, 228);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-list time, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-list span{display: flex; min-width: 0px; flex-direction: column;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-list strong, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-list b{color: rgb(23, 63, 39); font-size: 11px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__team-list small{margin-top: 3px; color: rgb(104, 117, 109); font-size: 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__shared-current{display: grid; gap: 7px; padding: 10px; border: 1px solid rgb(220, 231, 223); border-radius: 12px; background: rgb(248, 251, 249);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__shared-current article small, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__shared-current > small, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__shared-current p{margin: 0px; color: rgb(104, 117, 109); font-size: 9px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__followup{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; border: 1px solid rgb(229, 213, 156); border-radius: 11px; background: rgb(255, 249, 232);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__menu{grid-template-columns: repeat(2, minmax(0px, 1fr)); min-height: 128px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__menu > button{min-height: 56px;}
.vlt-cockpit--desktop-elegant2{position: fixed !important; z-index: 99900 !important; inset: 0px 0px auto !important; height: 100dvh !important; padding: calc(10px + env(safe-area-inset-top)) 12px calc(76px + env(safe-area-inset-bottom)) !important; overflow: hidden !important;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell{height: 100%; flex-direction: column; overflow: hidden; display: flex !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-head{flex: 0 0 auto; padding-bottom: 8px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-brand img{height: calc(28px * var(--vlt-tool-logo-scale, 1)) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-brand strong{font-size: 11px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-brand small{font-size: 9px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-account{width: 34px; height: 34px; font-size: 19px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-view{min-height: 0px; flex: 1 1 auto; padding-top: 6px; overflow: hidden;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main{display: grid; grid-template-rows: auto auto minmax(0px, 1fr) auto; gap: 5px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-welcome, .vlt-cockpit--desktop-elegant2 .vlt-klar-analysis-head, .vlt-cockpit--desktop-elegant2 .vlt-klar-value-performance, .vlt-cockpit--desktop-elegant2 .vlt-klar-product-performance{border-bottom: 1px solid rgb(22, 129, 58);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-welcome{padding: 10px 12px; border-left: 3px solid rgb(22, 129, 58); border-radius: 13px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-welcome > div{gap: 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-sun{width: 38px; height: 38px; border-radius: 11px; font-size: 21px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-welcome h2{margin-bottom: 2px !important; font-size: 18px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-welcome p{font-size: 12px; line-height: 1.25; white-space: normal;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-welcome p strong{font-size: 13px;}
.vlt-cockpit--desktop-elegant2 .vlt-cockpit__bell{transform: scale(0.82); transform-origin: right center;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-actions{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-goal-metrics span{color: rgb(102, 115, 106); font-size: 8.5px; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-goal-metrics strong{display: block; margin: 5px 0px 2px; overflow: hidden; color: rgb(23, 63, 39); font-size: 13px; text-overflow: ellipsis; white-space: nowrap;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-goal-metrics small{color: rgb(22, 129, 58); font-size: 9px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-edit-goals, .vlt-cockpit--desktop-elegant2 .vlt-klar-goal-buttons > button{min-height: 40px; margin: 0px; border: 1px solid rgb(22, 129, 58); border-radius: 12px; background: rgb(255, 255, 255); color: rgb(23, 63, 39); font-size: 12px; font-weight: 850;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-buttons{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 9px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-buttons .vlt-klar-goal-action{position: relative; display: flex; min-width: 0px; min-height: 52px; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; margin: 0px; padding: 8px 9px; overflow: hidden; border: 1px solid rgba(22, 129, 58, 0.34); border-radius: 16px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(222, 239, 226, 0.58)); color: rgb(23, 63, 39); box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(23, 80, 39, 0.1) 0px 6px 16px; font-size: 11px; font-weight: 850; line-height: 1.1; text-align: center; text-decoration: none; backdrop-filter: blur(15px) saturate(140%);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-buttons .vlt-klar-goal-action::after{content: ""; position: absolute; inset: -35% auto -35% -48%; width: 42%; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.74), transparent); transform: skewX(-16deg); animation: 5.8s ease-in-out 0s infinite normal none running vlt-elegant-glass-sheen;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-buttons .vlt-klar-goal-action svg{position: relative; z-index: 1; width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: rgb(22, 129, 58); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-buttons .vlt-klar-goal-action span, .vlt-cockpit--desktop-elegant2 .vlt-klar-goal-buttons .vlt-klar-goal-action small{position: relative; z-index: 1; margin: 0px; color: rgb(23, 63, 39); font: inherit; white-space: nowrap;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-peek, .vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-remaining{display: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-peek{grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid rgb(228, 233, 229);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-peek > strong{display: inline; margin: 0px 0px 0px 8px; font-size: 15px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-peek > div{height: 5px; margin-top: 5px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-peek small{margin-top: 4px; font-size: 9px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-section-gap{position: relative; z-index: 4; display: block; grid-column: 1 / -1; height: 7px; margin: 0px -14px; background: rgb(237, 241, 238);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-section-gap::before{display: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-performance{display: block; grid-column: 1 / -1; padding-top: 7px; border-top: 1px solid rgb(228, 233, 229);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main .vlt-klar-mobile-performance{position: relative; display: flex; width: calc(100% + 28px); height: 100%; min-height: 0px; margin-top: 0px; margin-left: -14px; padding: 0px 0px 0px 11px; overflow: hidden; border-bottom: 1px solid rgb(22, 129, 58); border-left: 3px solid rgb(22, 129, 58); border-radius: 12px 0px 0px 12px; background: rgb(255, 255, 255); flex-direction: column; overscroll-behavior: contain;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-value-performance{position: relative; z-index: 1; padding-left: 0px; border: 0px; border-radius: 0px; background: transparent;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-value-performance > div{grid-template-columns: 104px repeat(3, minmax(0px, 1fr)); min-height: 26px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-table-gap{position: relative; z-index: 0; display: block; width: 100%; height: 1px; margin: 0px; border-top: 1px solid rgb(174, 190, 179); background: transparent;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-value-performance > div{display: grid; grid-template-columns: 104px repeat(3, minmax(0px, 1fr)); align-items: center; min-height: 26px; border-top: 1px solid rgb(237, 240, 237);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-value-performance > div:first-child{border-top: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-performance span{color: rgb(82, 96, 88); font-size: 9.5px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-performance strong{overflow: hidden; color: rgb(23, 63, 39); font-size: 9.5px; text-align: center; text-overflow: ellipsis; white-space: nowrap;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-performance__head, .vlt-cockpit--desktop-elegant2 .vlt-klar-product-performance__head{position: relative;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-performance__head strong{color: rgb(102, 115, 106); font-size: 9px; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-analysis-head{position: relative; z-index: 3; display: flex; height: 32px; align-items: center; margin: 0px; padding: 0px 38px 0px 0px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(227, 234, 229); border-image: none; border-radius: 0px; background: transparent; transition: height 0.18s;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-analysis-toggle{display: flex; min-width: 0px; align-items: center; gap: 6px; margin: 0px; padding: 0px; border: 0px; background: transparent; color: rgb(23, 63, 39); font-size: 11px; font-weight: 850;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-analysis-toggle i{color: rgb(22, 129, 58); font-size: 14px; font-style: normal; transition: transform 0.18s;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-analysis-preview{display: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-analysis-preview > span{display: flex; min-width: 0px; align-items: center; flex-direction: column; border-left: 1px solid rgb(227, 234, 229);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-analysis-preview > span:first-child{border-left: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-analysis-preview small{color: rgb(104, 117, 109); font-size: 7.5px; font-weight: 800; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-analysis-preview strong{max-width: 100%; overflow: hidden; color: rgb(22, 129, 58); font-size: 11px; text-overflow: ellipsis; white-space: nowrap;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-subtable-title{font-weight: 850; white-space: nowrap; color: rgb(23, 63, 39) !important; font-size: 9.5px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-week-switch{display: flex; min-width: 0px; align-items: center; justify-content: center; gap: 2px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-week-switch button{display: grid; width: 19px; height: 22px; flex: 0 0 19px; place-items: center; margin: 0px; padding: 0px; border: 0px; border-radius: 7px; background: rgb(237, 245, 239); color: rgb(22, 129, 58); font-size: 14px; line-height: 1;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-week-switch span{min-width: 34px; color: rgb(102, 115, 106); font-size: 8px; font-weight: 850; letter-spacing: 0px; text-align: center; white-space: nowrap;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-table-focus{position: absolute; z-index: 3; top: 50%; right: 3px; display: grid; width: 24px; height: 24px; place-items: center; margin: 0px; padding: 0px; border: 1px solid rgb(22, 129, 58); border-radius: 8px; background: transparent; color: rgb(17, 17, 17); box-shadow: none; font-size: 15px; line-height: 1; transform: translateY(-50%);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-page-title h2{font-weight: 700; margin: 0px !important; color: rgb(20, 41, 27) !important; font-size: 21px !important; line-height: 1.15 !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-page-title p{margin: 2px 0px 0px; color: rgb(95, 108, 99); font-size: 10px; line-height: 1.2;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-back{position: absolute; top: 7px; right: 48px; min-height: 32px; margin: 0px; padding: 5px 10px; font-size: 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goals-title{margin: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goals-title h2{margin: 0px !important; font-size: 21px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goals-title p{font-size: 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-hero{margin: 0px; padding: 11px 13px; border-radius: 14px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-hero h3{margin-bottom: 7px; font-size: 13px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-hero__body{grid-template-columns: auto 1fr; gap: 14px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-ring{width: 70px; height: 70px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-ring::after{inset: 7px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-ring > strong{font-size: 19px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-hero dl > div{gap: 10px; padding: 4px 0px; font-size: 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-hero > p{display: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-hero{padding: 8px 12px; border-left: 2px solid rgb(22, 129, 58); border-bottom: 1px solid rgba(22, 129, 58, 0.72);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-hero h3{margin-bottom: 4px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-ring{width: 62px; height: 62px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-hero dl > div{padding: 3px 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-milestone{height: 80px; min-height: 80px; box-sizing: border-box; gap: 9px; padding: 6px 11px; border-left: 2px solid rgb(22, 129, 58); border-bottom: 1px solid rgba(22, 129, 58, 0.72); border-radius: 13px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-milestone__icon{width: 38px; height: 52px; flex-basis: 38px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-milestone--topclub .vlt-klar-milestone__icon span{width: 36px; height: 36px; font-size: 19px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-milestone__copy > strong{font-size: 12px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-milestone__copy > small{font-size: 8.5px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-current-goal{display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 2px 11px; height: auto; min-height: 80px; box-sizing: border-box; padding: 5px 13px; border-width: 1px 1px 1px 2px; border-style: solid; border-color: rgb(223, 231, 225) rgb(223, 231, 225) rgba(22, 129, 58, 0.72) rgb(22, 129, 58); border-image: none; border-radius: 14px; background: rgb(255, 255, 255); box-shadow: rgba(23, 58, 35, 0.04) 0px 3px 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-current-goal > div:first-child{display: flex; min-width: 0px; grid-column: 1 / -1; align-items: baseline; justify-content: space-between; flex-direction: row;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-current-goal > div:first-child span{color: rgb(102, 115, 106); font-size: 8px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-current-goal > div:first-child strong{margin-top: 0px; color: rgb(23, 63, 39); font-size: 12px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-current-goal__ring{position: relative; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: conic-gradient(#16813a calc(var(--vlt-klar-progress,0) * 1%),#e1e8e2 0);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-current-goal__ring::after{content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgb(255, 255, 255);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-current-goal__ring strong{position: relative; z-index: 1; color: rgb(23, 63, 39); font-size: 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-current-goal dl{margin: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-current-goal dl > div{display: flex; justify-content: space-between; gap: 6px; padding: 2px 0px; border-top: 1px solid rgb(237, 240, 237); font-size: 8.5px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-current-goal dl > div:first-child{border-top: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-current-goal dt{color: rgb(104, 117, 109);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-current-goal dd{margin: 0px; color: rgb(23, 63, 39); font-weight: 850;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-month, .vlt-cockpit--desktop-elegant2 .vlt-klar-weeks{display: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-goal-metrics{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); min-height: 0px; padding: 10px 8px; border: 1px solid rgb(223, 231, 225); border-radius: 14px; background: rgb(255, 255, 255);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-goal-metrics{display: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-performance{position: relative; z-index: 1; min-height: 0px; flex: 1 1 auto; grid-auto-rows: minmax(0px, 1fr); margin-top: 0px; padding-top: 1px; padding-left: 0px; overflow: hidden; border-top: 0px; border-bottom: 0px; border-left: 0px; border-radius: 0px; background: transparent; display: grid !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-performance__head, .vlt-cockpit--desktop-elegant2 .vlt-klar-product-performance__row{display: grid; grid-template-columns: 104px repeat(3, minmax(0px, 1fr)); align-items: center; min-height: 0px; border-top: 1px solid rgb(223, 231, 225);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-performance__head{border-top: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-performance__head span{color: rgb(23, 63, 39); font-size: 9.5px; font-weight: 850;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-performance__head strong{color: rgb(102, 115, 106); font-size: 9px; text-align: center; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-performance__row span{overflow: hidden; padding: 2px 8px 2px 0px; color: rgb(82, 96, 88); font-size: 9.5px; font-weight: 400; line-height: 1; text-overflow: ellipsis; white-space: nowrap;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-performance__row strong{align-self: stretch; display: grid; place-items: center; color: rgb(22, 129, 58); font-size: 9.5px; font-weight: 400; line-height: 1; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main .vlt-klar-welcome, .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main .vlt-klar-mobile-performance{border-left-width: 2px; border-bottom-color: rgba(22, 129, 58, 0.72);}
.vlt-cockpit--desktop-elegant2 [data-vlt-klar-magnify]{}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-footer{display: flex; min-height: 0px; justify-content: flex-end; flex-direction: column; gap: 6px; padding-bottom: calc(88px + env(safe-area-inset-bottom)); box-sizing: border-box;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-goal-metrics > div{display: flex; min-width: 0px; justify-content: center; flex-direction: column; padding: 0px 8px; border-left: 1px solid rgb(227, 233, 228);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-goal-metrics > div:first-child{border-left: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-appointments{min-height: 0px; flex: 1 1 auto; overflow: auto; padding: 12px 14px 20px; background: linear-gradient(rgb(251, 253, 251) 0px, rgb(255, 255, 255) 120px); overscroll-behavior: contain;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-appointments__scope{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 5px; padding: 4px; border: 1px solid rgb(223, 232, 225); border-radius: 14px; background: rgba(238, 244, 239, 0.86);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-appointments__scope button{min-width: 0px; min-height: 36px; padding: 5px 3px; border: 0px; border-radius: 10px; background: transparent; color: rgb(89, 102, 94); font-size: 9px; font-weight: 850; white-space: nowrap;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-appointments__scope button.is-active{background: rgb(255, 255, 255); color: rgb(18, 109, 49); box-shadow: rgba(20, 55, 31, 0.09) 0px 3px 9px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-appointments__categories[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-appointments__categories{display: flex; gap: 6px; margin: 8px 0px 0px; padding: 1px 0px 4px; overflow: auto; scrollbar-width: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-appointments__categories button{min-height: 30px; flex: 0 0 auto; padding: 5px 10px; border: 1px solid rgb(216, 229, 218); border-radius: 999px; background: rgb(255, 255, 255); color: rgb(94, 107, 99); font-size: 9px; font-weight: 800;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-appointments__categories button.is-active{border-color: rgb(22, 129, 58); background: rgb(237, 246, 239); color: rgb(18, 109, 49);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-appointments__list{display: grid; gap: 14px; margin-top: 14px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-appointments__list > section{display: grid; gap: 7px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-appointments__list > section[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-appointments__list h3{margin: 0px; color: rgb(102, 115, 106); font-size: 9px; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-appointments__empty{margin: 36px 0px; color: rgb(106, 118, 110); font-size: 11px; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar{position: relative; min-height: 0px; flex: 1 1 auto; overflow: auto; padding: 12px 14px 18px; overscroll-behavior: contain;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__head{position: relative; z-index: 10; display: grid; min-height: 52px; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 8px; flex: 0 0 auto; padding-top: 10px; padding-bottom: 9px; background: rgb(255, 255, 255);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__head > div:first-child{display: flex; min-width: 0px; justify-content: center; flex-direction: column; align-self: stretch;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__head > div:first-child small{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__header-actions > button{position: static; transform: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__toolgroup button{display: grid; width: clamp(42px, 10.4vw, 45px); height: 44px; flex: 0 0 clamp(42px, 10.4vw, 45px); place-items: center; border-width: 0px 0px 0px 1px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgb(226, 234, 228); border-image: none; background: transparent; color: rgb(22, 129, 58); line-height: 1; touch-action: manipulation;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__toolgroup button:first-child{border-left: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__toolgroup svg{width: 20px; height: 20px; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__toolgroup .vlt-klar-calendar__add{font-size: 29px; font-weight: 400;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__search[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__search{position: relative; z-index: 9; display: flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 7px 14px 8px; border-bottom: 1px solid rgb(237, 241, 238); background: rgb(255, 255, 255);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__search label{display: flex; min-width: 0px; flex: 1 1 0%; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgb(220, 231, 223); border-radius: 999px; background: rgb(245, 248, 245);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__search svg{width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: rgb(22, 129, 58); stroke-width: 1.8; stroke-linecap: round;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__search input{width: 100%; min-width: 0px; border: 0px; outline: 0px; background: transparent; color: rgb(20, 41, 27); font-size: 12px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__search > button{display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 0px; border-radius: 50%; background: rgb(237, 245, 239); color: rgb(23, 63, 39); font-size: 18px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar h3{margin: 0px 0px 9px; color: rgb(24, 63, 39); font-size: 13px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__viewbar{position: relative; display: grid; grid-template-columns: minmax(0px, 1fr) 118px; align-items: center; gap: 8px; padding-top: 0px; margin-bottom: 14px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__views{display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0px; padding: 4px; border-radius: 12px; background: rgb(238, 243, 239);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__views button{min-height: 36px; border: 0px; border-radius: 9px; background: transparent; color: rgb(93, 105, 98); font-size: 11px; font-weight: 850;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__views button.is-active{background: rgb(22, 129, 58); color: rgb(255, 255, 255); box-shadow: rgba(16, 75, 37, 0.14) 0px 2px 7px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__category-filter{position: relative; display: block; min-width: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__category-filter::after{content: "⌄"; position: absolute; top: 50%; right: 10px; pointer-events: none; color: rgb(22, 129, 58); font-size: 13px; font-weight: 900; transform: translateY(-55%);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__category-filter select{width: 100%; min-height: 44px; box-sizing: border-box; padding: 0px 25px 0px 11px; border: 1px solid rgba(22, 129, 58, 0.34); border-radius: 999px; outline: 0px; appearance: none; background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(222, 240, 227, 0.78)); color: rgb(23, 69, 40); font: 800 9px/1 var(--vlt-font-family, -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif); box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(23, 80, 39, 0.11) 0px 4px 12px; text-overflow: ellipsis;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__category-filter select:focus{border-color: rgb(22, 129, 58); box-shadow: rgba(22, 129, 58, 0.12) 0px 0px 0px 3px, rgb(255, 255, 255) 0px 1px 0px inset;}
.vlt-cockpit--desktop-elegant2 [data-vlt-calendar-panel][hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__events{display: grid; gap: 7px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__events > p{margin: 0px 0px 8px; color: rgb(104, 117, 109); font-size: 11px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month-head{display: grid; grid-template-columns: 36px minmax(0px, 1fr) auto 36px; align-items: center; gap: 6px; margin-bottom: 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month-head strong{text-align: center; color: rgb(20, 41, 27); font-size: 15px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month-head button{width: 34px; height: 34px; border: 1px solid rgb(219, 230, 221); border-radius: 50%; background: rgb(255, 255, 255); color: rgb(22, 129, 58); font-size: 22px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month-head .vlt-klar-calendar__today{width: auto; min-width: 56px; padding: 0px 11px; border-radius: 999px; font-size: 10px; font-weight: 850;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month-grid{display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month-grid > span, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month-grid > button{display: grid; aspect-ratio: 1 / 1; min-width: 0px; place-items: center; border: 0px; border-radius: 9px; background: rgb(248, 250, 248); color: rgb(49, 68, 58); font-size: 11px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month-grid > .is-weekday{aspect-ratio: auto; padding: 4px 0px; background: transparent; color: rgb(117, 128, 120); font-size: 9px; font-weight: 850;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month-grid > .is-empty{background: transparent;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month-grid > .has-events{position: relative; background: rgb(237, 246, 239); color: rgb(15, 111, 48); font-weight: 900;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__event-dots{position: absolute; right: 3px; bottom: 4px; left: 3px; display: flex; justify-content: center; gap: 2px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__event-dots i{width: 5px; height: 5px; border-radius: 50%; background: var(--vlt-badge-calendar,#cf2e2e);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__event-dots i.is-customer{background: var(--vlt-badge-calendar,#cf2e2e);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month-grid > .is-today{background: rgb(22, 129, 58); color: rgb(255, 255, 255); font-weight: 900;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month > p{display: flex; align-items: center; gap: 6px; margin: 10px 0px 0px; color: rgb(107, 119, 111); font-size: 9px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month > p i{width: 7px; height: 7px; border-radius: 50%; background: rgb(22, 129, 58);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month{width: 100%; min-width: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month-details[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__month-details{position: absolute; z-index: 8; display: grid; inset: 10px; width: auto; min-width: 0px; align-content: start; gap: 7px; overflow: auto; margin: 0px; padding: 18px 14px 16px; border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgb(207, 224, 211) rgb(207, 224, 211) rgb(207, 224, 211) rgb(22, 129, 58); border-image: none; border-radius: 18px; background: rgba(255, 255, 255, 0.98); box-shadow: rgba(20, 55, 31, 0.18) 0px 18px 48px; box-sizing: border-box; backdrop-filter: blur(14px);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card{position: absolute; z-index: 9; display: flex; inset: 0px; box-sizing: border-box; align-items: flex-start; justify-content: center; overflow: auto; padding: 10px max(10px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)); background: rgba(243, 247, 244, 0.9); backdrop-filter: blur(14px);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card > article{display: grid; width: min(100%, 440px); gap: 13px; margin: auto; padding: 15px; border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgb(207, 224, 211) rgb(207, 224, 211) rgb(207, 224, 211) rgb(22, 129, 58); border-image: none; border-radius: 18px; background: rgb(255, 255, 255); box-shadow: rgba(20, 55, 31, 0.18) 0px 18px 48px; box-sizing: border-box;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card header{display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card header div{display: flex; min-width: 0px; flex-direction: column;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card header small{color: rgb(22, 129, 58); font-size: 9px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card header h3{overflow: hidden; margin: 2px 0px 0px; color: rgb(23, 63, 39); font-size: 20px; text-overflow: ellipsis; white-space: nowrap;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card header button{display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 0px; border-radius: 50%; background: rgb(237, 245, 239); color: rgb(23, 63, 39); font-size: 24px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-body{display: grid; gap: 8px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-body > strong{padding: 10px 12px; border-radius: 11px; background: rgb(237, 246, 239); color: rgb(23, 69, 40); font-size: 12px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-body > a{display: grid; min-width: 0px; grid-template-columns: 72px minmax(0px, 1fr); align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid rgb(219, 231, 221); border-radius: 11px; background: rgb(255, 255, 255); color: rgb(23, 63, 39); text-decoration: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-body > a[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-body > a span{color: rgb(106, 119, 110); font-size: 9px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-body > a b{min-width: 0px; overflow-wrap: anywhere; color: rgb(23, 63, 39); font-size: 13px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card footer{display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card footer > *{display: flex; min-height: 44px; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgb(22, 129, 58); border-radius: 11px; background: rgb(255, 255, 255); color: rgb(18, 109, 49); font-size: 11px; font-weight: 850; text-align: center; text-decoration: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card footer > a[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card footer > button{background: rgb(22, 129, 58); color: rgb(255, 255, 255);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__composer[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__composer{position: absolute; z-index: 7; display: flex; inset: 0px; box-sizing: border-box; align-items: flex-start; justify-content: center; overflow: auto; padding: 10px max(10px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)); background: rgba(243, 247, 244, 0.88); backdrop-filter: blur(14px);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form{display: grid; width: min(100%, 440px); gap: 6px; margin: auto; padding: 10px 14px 12px; border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgb(207, 224, 211) rgb(207, 224, 211) rgb(207, 224, 211) rgb(22, 129, 58); border-image: none; border-radius: 18px; background: rgb(255, 255, 255); box-shadow: rgba(20, 55, 31, 0.18) 0px 18px 48px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form > header{display: flex; min-height: 28px; align-items: center; justify-content: space-between; padding: 0px; border: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form > header h3{margin: 0px; font-size: 18px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form > header button{display: grid; width: 36px; height: 36px; place-items: center; border: 0px; border-radius: 50%; background: rgb(237, 245, 239); color: rgb(23, 63, 39); font-size: 22px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form label{display: grid; min-width: 0px; gap: 2px; color: rgb(51, 78, 61); font-size: 11px; font-weight: 850;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form > div{display: grid; min-width: 0px; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form input, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form textarea, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form select{box-sizing: border-box; width: 100%; min-width: 0px; max-width: 100%; min-height: 40px; margin: 0px; padding: 6px 10px; border: 1.5px solid rgb(155, 199, 167); border-radius: 11px; outline: none; background: rgb(248, 251, 248); color: rgb(20, 41, 27); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 14px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__datetime > label{min-width: 0px; overflow: hidden;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form > .vlt-klar-calendar__address-line{grid-template-columns: minmax(0px, 2.35fr) minmax(88px, 0.85fr);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__datetime input[type="date"], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__datetime input[type="time"]{display: block; inline-size: 100%; min-inline-size: 0px; max-inline-size: 100%; appearance: none; text-align: left;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__quarter-time{display: grid; grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr); align-items: center; gap: 7px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__quarter-time select{width: 100%; min-width: 0px; text-align: center; text-align-last: center;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__quarter-time b{color: rgb(23, 63, 39); font-size: 18px; line-height: 1;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__street, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__city, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__email{position: relative;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__city-list, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__street-list, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__email-suggestions{position: absolute; z-index: 12; top: 100%; right: 0px; left: 0px; display: grid; max-height: 220px; overflow: auto; margin-top: 5px; padding: 5px; border: 1px solid rgb(207, 224, 211); border-radius: 11px; background: rgb(255, 255, 255); box-shadow: rgba(20, 55, 31, 0.18) 0px 12px 30px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__city-list[hidden], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__street-list[hidden], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__email-suggestions[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form textarea{min-height: 64px; resize: vertical;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form input:focus, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form textarea:focus, .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form select:focus{border-color: rgb(22, 129, 58); box-shadow: rgba(22, 129, 58, 0.1) 0px 0px 0px 3px; background: rgb(255, 255, 255);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__products{display: grid; grid-template-columns: 1fr 1fr; gap: 7px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__products label{position: relative; display: block; min-width: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__products input{position: absolute; width: 1px; height: 1px; min-height: 0px; opacity: 0;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__products label > span{display: flex; min-height: 54px; box-sizing: border-box; justify-content: center; flex-direction: column; gap: 2px; padding: 8px 9px; border: 1px solid rgb(215, 229, 218); border-radius: 10px; background: rgb(255, 255, 255); color: rgb(93, 105, 98); font-size: 9px; font-weight: 650; line-height: 1.15;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__products label > span b{color: rgb(23, 63, 39); font-size: 13px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__products label > span small{color: rgb(100, 113, 104); font-size: 11px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__products input:checked + span{border-color: rgb(22, 129, 58); background: rgb(237, 247, 239); color: rgb(23, 63, 39); box-shadow: rgba(22, 129, 58, 0.18) 0px 0px 0px 1px inset;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__reminders{display: grid; gap: 8px; margin: 0px; padding: 11px; border: 1px solid rgb(215, 229, 218); border-radius: 12px; background: rgb(251, 253, 251);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__reminders legend{padding: 0px 5px; color: rgb(51, 78, 61); font-size: 11px; font-weight: 850;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__reminders > div{display: grid; gap: 7px;}
.vlt-cockpit--desktop-elegant2 [data-vlt-calendar-reminder-add]{min-height: 38px; border: 1px dashed rgb(22, 129, 58); border-radius: 10px; background: rgb(255, 255, 255); color: rgb(22, 129, 58); font-size: 11px; font-weight: 850;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions{grid-template-columns: 1fr 1fr !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--versand{margin-top: 9px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--abbruch{display: grid; gap: 9px; margin-top: 9px; grid-template-columns: 1fr 1fr !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--gutschein{display: grid; gap: 9px; margin-top: 12px; grid-template-columns: 1fr 1fr !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--gutschein [data-vlt-voucher-save]{grid-column: 1;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--gutschein [data-vlt-voucher-delete]{grid-column: 2;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-whatsapp-business], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-sms], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-apple]{grid-column: 1;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-whatsapp], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-email], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-google]{grid-column: 2;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-share]{grid-column: 1 / -1;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions [data-vlt-voucher-whatsapp-business], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions [data-vlt-blatt-whatsapp-business]{font-size: 11px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-email], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-share]{border-color: rgb(22, 129, 58) !important; background: rgb(255, 255, 255) !important; color: rgb(18, 109, 49) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--gutschein .vlt-klar-calendar__export-trigger{min-height: 46px !important; font-size: 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions .vlt-klar-calendar__breit{grid-column: 1 / -1;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--versand [data-vlt-voucher-whatsapp-business], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--versand [data-vlt-voucher-sms], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--versand [data-vlt-calendar-export-open]{grid-column: 1;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--versand [data-vlt-voucher-whatsapp], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--versand [data-vlt-voucher-email], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--versand [data-vlt-calendar-google-open]{grid-column: 2;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--versand [data-vlt-voucher-share]{grid-column: 1 / -1;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--versand .vlt-klar-calendar__export-trigger{min-height: 46px !important; font-size: 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--versand [data-vlt-voucher-email], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions--versand [data-vlt-voucher-share]{border-color: rgb(22, 129, 58); background: rgb(255, 255, 255); color: rgb(18, 109, 49);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions > button[type="submit"]{grid-column: 1 / -1;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions:has(.vlt-klar-calendar__delete-trigger:not([hidden])) > button[type="submit"]{grid-column: auto;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions button{min-height: 46px; border: 1px solid rgb(22, 129, 58); border-radius: 11px; background: rgb(22, 129, 58); color: rgb(255, 255, 255); font-size: 12px; font-weight: 850;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions .vlt-klar-calendar__delete-trigger{border-color: rgb(185, 52, 45); background: rgb(255, 255, 255); color: rgb(165, 42, 36);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions .vlt-klar-calendar__voucher-trigger{border-color: rgb(22, 129, 58); background: rgb(255, 255, 255); color: rgb(18, 109, 49);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions .vlt-klar-calendar__export-trigger{display: flex; min-height: 42px; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgb(22, 129, 58); border-radius: 10px; background: rgb(255, 255, 255); color: rgb(18, 109, 49); font-size: 10px; font-weight: 850; text-align: center; text-decoration: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions .vlt-klar-calendar__export-trigger[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions [data-vlt-calendar-reset], .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__actions [data-vlt-voucher-cancel]{grid-column: 1 / -1; min-height: 34px; font-weight: 800; border-color: rgb(215, 227, 217) !important; background: rgb(255, 255, 255) !important; color: rgb(104, 117, 109) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__delete{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__voucher[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__voucher{position: absolute; z-index: 11; display: flex; inset: 0px; box-sizing: border-box; width: 100%; height: 100%; min-height: 100%; flex-direction: column; gap: 13px; overflow: auto; padding: 18px max(14px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)); background: rgb(247, 250, 247);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__voucher > header{display: flex; align-items: center; justify-content: space-between;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__voucher > header > div{display: flex; flex-direction: column;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__voucher > header small{color: rgb(22, 129, 58); font-size: 9px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__voucher > header h3{margin: 2px 0px 0px; color: rgb(20, 41, 27); font-size: 20px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__voucher > header button{display: grid; width: 38px; height: 38px; place-items: center; border: 0px; border-radius: 50%; background: rgb(233, 242, 235); color: rgb(23, 63, 39); font-size: 23px;}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher{min-height: 440px; flex: 0 0 auto; overflow: hidden; border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgb(189, 213, 195) rgb(189, 213, 195) rgb(189, 213, 195) rgb(18, 109, 49); border-image: none; border-radius: 18px; background: rgb(255, 255, 255); box-shadow: rgba(20, 55, 31, 0.1) 0px 12px 30px;}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher > header{display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid rgb(220, 231, 223); background: linear-gradient(135deg, rgb(255, 255, 255), rgb(244, 249, 245));}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher > header img{width: auto; max-width: 48%; height: 42px; object-fit: contain; object-position: left center;}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher > header div{display: flex; align-items: flex-end; flex-direction: column; text-align: right;}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher > header strong{color: rgb(14, 90, 40); font-size: 17px; letter-spacing: 0.03em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher > header small{color: rgb(103, 116, 108); font-size: 9px;}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher > header small b{color: rgb(20, 41, 27); letter-spacing: 0.08em;}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher__body{display: grid; min-height: 350px; grid-template-columns: minmax(0px, 1.15fr) minmax(0px, 1fr);}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher__body > section{padding: 14px;}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher__body > section + section{border-left: 1px solid rgb(220, 231, 223);}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher dl{display: grid; gap: 9px; margin: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher dl > div{display: grid; gap: 2px; padding-bottom: 7px; border-bottom: 1px solid rgb(228, 235, 230);}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher dt, .vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher h4{margin: 0px; color: rgb(103, 116, 108); font-size: 8px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher dd{margin: 0px; color: rgb(20, 41, 27); font-size: 10px; line-height: 1.3;}
.vlt-cockpit--desktop-elegant2 .vlt-calendar-voucher ul{display: grid; gap: 7px; margin: 10px 0px 0px; padding: 0px; list-style: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__voucher-note{margin: 0px; color: rgb(101, 115, 106); font-size: 9px; line-height: 1.4;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing{position: absolute; z-index: 8; display: flex; inset: 0px; box-sizing: border-box; align-items: flex-start; justify-content: center; overflow: hidden; padding: 12px max(14px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)); background: rgba(243, 247, 244, 0.9); backdrop-filter: blur(14px);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing > form{display: grid; width: min(100%, 500px); height: min(calc(100% - 24px),var(--vlt-calendar-sharing-visible-height,calc(100% - 24px))); max-height: none; min-height: 0px; grid-template-rows: auto auto minmax(150px, 1fr) auto auto auto auto; gap: 10px; margin: 0px auto; padding: 14px; overflow: hidden; border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgb(207, 224, 211) rgb(207, 224, 211) rgb(207, 224, 211) rgb(22, 129, 58); border-image: none; border-radius: 18px; background: rgb(255, 255, 255); box-shadow: rgba(20, 55, 31, 0.18) 0px 18px 48px; box-sizing: border-box;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing header{display: flex; align-items: center; justify-content: space-between;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing header div{display: flex; flex-direction: column;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing header small{color: rgb(22, 129, 58); font-size: 9px; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing header h3{margin: 2px 0px 0px; font-size: 18px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing header button{display: grid; width: 36px; height: 36px; place-items: center; border: 0px; border-radius: 50%; background: rgb(237, 245, 239); color: rgb(23, 63, 39); font-size: 22px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing > form > p{margin: 0px; color: rgb(104, 117, 109); font-size: 10px; line-height: 1.45;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__share-search{position: sticky; z-index: 3; top: 0px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1.5px solid rgb(155, 199, 167); border-radius: 11px; background: rgb(248, 251, 248); box-shadow: rgba(20, 55, 31, 0.08) 0px 5px 14px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__share-search input{width: 100%; min-width: 0px; border: 0px; outline: 0px; background: transparent; font-size: 13px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing > form > button[type="submit"]{min-height: 46px; border: 1px solid rgb(22, 129, 58); border-radius: 11px; background: rgb(22, 129, 58); color: rgb(255, 255, 255); font-size: 12px; font-weight: 850;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-tabs{display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 11px 14px 7px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-tabs button{min-height: 34px; border: 0px; border-radius: 9px; background: rgb(238, 243, 239); color: rgb(89, 102, 94); font-size: 11px; font-weight: 850;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-tabs button.is-active{background: rgb(22, 129, 58); color: rgb(255, 255, 255);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-list{max-height: 45dvh; overflow: auto; padding: 4px 14px 15px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-list[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-list > div{display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 3px; border-bottom: 1px solid rgb(230, 236, 231); color: rgb(89, 102, 94); font-size: 11px; line-height: 1.3;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-product-list strong{flex: 0 0 auto; color: rgb(0, 144, 57); font-size: 12px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top{height: var(--vlt-calendar-top-height,187px); min-height: var(--vlt-calendar-top-height,187px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf{position: absolute; z-index: 3; top: var(--vlt-calendar-group-top,32px); right: auto; left: 75%; display: block; width: 152px; height: var(--vlt-calendar-group-height,146px); margin: 0px; transform: translateX(-50%) scale(var(--vlt-calendar-scale,1)); transform-origin: center center; pointer-events: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page{position: relative; display: grid; width: 152px; height: auto; min-height: var(--vlt-calendar-group-height,146px); overflow: visible; grid-template-rows: var(--vlt-calendar-month-height,27px) var(--vlt-calendar-day-height,49px) var(--vlt-calendar-weekday-height,13px) var(--vlt-calendar-clock-height,32px) var(--vlt-calendar-period-height,17px); row-gap: 2px; border: 0px; border-radius: 0px; background: transparent; box-shadow: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__clock, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period{position: relative; inset: auto; width: 100%; height: auto; min-height: 0px; margin: 0px; transform: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period{display: grid; place-items: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day{overflow: visible;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day::after{content: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__clock{display: grid; place-items: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-page{display: grid; width: 100%; height: 100%; min-height: 0px; place-items: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time{gap: 1px; transform: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > b, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock.is-digital .vlt-elegant-overview__clock-time > b, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock.is-glass .vlt-elegant-overview__clock-time > b{width: auto; min-width: 0.62em; height: auto; overflow: visible; border: 0px; border-radius: 0px; background: transparent; box-shadow: none; color: var(--vlt-clock-color,#16813a); font-size: var(--vlt-clock-size,27px); font-weight: 300;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > b::before, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > b::after{content: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > i{color: var(--vlt-clock-color,#16813a); font-size: calc(var(--vlt-clock-size,27px) * .63); font-weight: 500;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring{top: var(--vlt-calendar-cockpit-axis-top,106px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__details > .vlt-elegant-overview__info--sales::after{top: calc(var(--vlt-calendar-cockpit-axis-top,106px) - 31px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div{display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; row-gap: 4px; padding: 4px 10px; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > span{position: static; width: auto; line-height: 1.2; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > strong{margin: 0px; line-height: 1.2;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top{height: var(--vlt-calendar-top-height,187px); min-height: var(--vlt-calendar-top-height,187px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf{position: absolute; z-index: 3; top: var(--vlt-calendar-group-top,32px); right: auto; left: 75%; display: block; width: 152px; height: var(--vlt-calendar-group-height,146px); margin: 0px; transform: translateX(-50%) scale(var(--vlt-calendar-scale,1)); transform-origin: center center; pointer-events: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page{position: relative; display: grid; width: 152px; height: auto; min-height: var(--vlt-calendar-group-height,146px); overflow: visible; grid-template-rows: var(--vlt-calendar-month-height,27px) var(--vlt-calendar-day-height,49px) var(--vlt-calendar-weekday-height,13px) var(--vlt-calendar-clock-height,32px) var(--vlt-calendar-period-height,17px); row-gap: 2px; border: 0px; border-radius: 0px; background: transparent; box-shadow: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__clock, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period{position: relative; inset: auto; width: 100%; height: auto; min-height: 0px; margin: 0px; transform: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period{display: grid; place-items: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day{overflow: visible;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day::after{content: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__clock{display: grid; place-items: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-page{display: grid; width: 100%; height: 100%; min-height: 0px; place-items: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time{gap: 1px; transform: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > b, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock.is-digital .vlt-elegant-overview__clock-time > b, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock.is-glass .vlt-elegant-overview__clock-time > b{width: auto; min-width: 0.62em; height: auto; overflow: visible; border: 0px; border-radius: 0px; background: transparent; box-shadow: none; color: var(--vlt-clock-color,#16813a); font-size: var(--vlt-clock-size,27px); font-weight: 300;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > b::before, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > b::after{content: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > i{color: var(--vlt-clock-color,#16813a); font-size: calc(var(--vlt-clock-size,27px) * .63); font-weight: 500;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring{top: var(--vlt-calendar-cockpit-axis-top,106px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__details > .vlt-elegant-overview__info--sales::after{top: calc(var(--vlt-calendar-cockpit-axis-top,106px) - 31px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div{display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; row-gap: 4px; padding: 4px 10px; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > span{position: static; top: auto; right: auto; left: auto; width: auto; line-height: 1.2; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > strong{margin: 0px; line-height: 1.2;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing .vlt-klar-calendar__share-search{min-height: 34px; padding: 5px 8px; border-width: 1px; border-radius: 9px; box-shadow: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing .vlt-klar-calendar__share-search input{min-height: 28px; padding: 2px 4px; font-size: 11px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing .vlt-klar-calendar__share-add{grid-template-columns: minmax(0px, 1.35fr) minmax(132px, 0.8fr); gap: 8px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing .vlt-klar-calendar__share-add select{min-height: 52px; padding: 8px 10px; font-size: 12px; font-weight: 750;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__sharing .vlt-klar-calendar__share-add button{min-height: 46px; font-size: 12px;}
.vlt-cockpit--desktop-elegant2{--vlt-elegant-green: #16813a; --vlt-elegant-ink: #173f27; --vlt-elegant-muted: #66736a; --vlt-elegant-line: #dfe7e1; background: rgb(255, 255, 255) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-head{min-height: 52px; align-items: center; padding: 7px 5px 11px; border-bottom: 1px solid rgb(228, 233, 229); display: flex !important; visibility: visible !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-account-menu{transform: translateX(-9px);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main{padding-top: 11px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main{grid-template-columns: repeat(2, minmax(0px, 1fr)); grid-template-rows: auto auto auto minmax(0px, 1fr); column-gap: 8px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-klar-welcome, .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview{grid-column: 1 / -1;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-klar-welcome, .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview, .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview__utility{box-sizing: border-box; border-top: 1px solid rgb(230, 235, 231) !important; border-bottom: 2px solid rgb(230, 235, 231) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview__utility{position: relative; display: grid; width: 100%; height: 238px; grid-template-columns: repeat(2, minmax(0px, 1fr)); grid-template-rows: 36px 24px 176px; grid-area: 3 / 1 / auto / -1; margin-top: 10px; overflow: hidden; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 2px solid var(--vlt-elegant-green); border-bottom: 1px solid rgba(22, 129, 58, 0.65); border-radius: 18px; background: rgb(255, 255, 255); box-shadow: rgba(23, 58, 35, 0.055) 0px 7px 22px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-head{position: relative; z-index: 2; display: flex; min-width: 0px; grid-area: 1 / 1 / auto / -1; align-items: center; justify-content: center; padding: 1px 12px 0px; border-bottom: 0px; background: rgb(255, 255, 255); color: var(--vlt-elegant-muted);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-head strong{font-size: 9px; font-weight: 850; letter-spacing: 0.11em; line-height: 1.2; text-transform: uppercase; transform: translateY(-3px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-appointments-head{position: relative; z-index: 2; display: flex; min-width: 0px; grid-area: 2 / 1; align-items: center; justify-content: flex-start; padding: 0px 12px; border-right: 0px; border-bottom: 1px solid rgba(22, 129, 58, 0.14); background: rgb(255, 255, 255); color: var(--vlt-elegant-muted);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-appointments-head strong{color: var(--vlt-elegant-muted); font-size: 9px; font-weight: 850; letter-spacing: 0.11em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; transform: translateY(-12px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-open{position: relative; z-index: 2; display: flex; height: 42px; min-width: 0px; grid-area: 2 / 2; align-self: end; align-items: center; justify-content: center; gap: 0px; padding: 0px 12px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(22, 129, 58, 0.14); border-image: none; background: rgb(255, 255, 255); color: var(--vlt-elegant-green);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-open > span{position: absolute; right: 0px; bottom: 18px; left: 0px; color: var(--vlt-elegant-muted); font-size: 9px; font-weight: 850; letter-spacing: 0.11em; line-height: 1.2; text-transform: uppercase; white-space: nowrap;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-calendar{position: absolute; top: -1px; right: 7px; display: grid; width: 42px; height: 36px; flex: 0 0 42px; place-items: center; border: 0px; border-radius: 0px; background: transparent; color: rgb(210, 59, 55); box-shadow: none; font-style: normal; transform: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-calendar-glyph{display: block; width: 40px; height: 36px; overflow: visible;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-calendar-glyph .is-shadow{fill: rgb(63, 73, 76); opacity: 0.9;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-calendar-glyph .is-sheet{fill: rgb(255, 255, 255); stroke: rgb(230, 233, 232); stroke-width: 1.2;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-calendar-glyph .is-head{fill: rgb(239, 61, 56);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-calendar-glyph .is-rings rect{fill: rgb(89, 100, 104); stroke: rgb(245, 247, 246); stroke-width: 1.8;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-calendar-glyph .is-grid{fill: rgb(191, 195, 196);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-calendar-glyph .is-grid .is-accent{fill: rgb(239, 154, 130);}
.vlt-cockpit--desktop-elegant2{padding-top: calc(16px + var(--vlt-klar-page-top-offset,0px)) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-intro{padding: 9px 14px 2px; text-align: left;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-intro small{display: block; margin-bottom: 3px; color: rgb(22, 129, 58); font-size: 8px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-intro h3{margin: 0px; color: rgb(23, 63, 39); font-size: 17px; line-height: 1.2;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-intro p{margin: 4px 0px 0px; color: rgb(98, 112, 104); font-size: 10px; line-height: 1.4;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-browser{display: grid; min-height: 0px; grid-template-columns: 40px minmax(0px, 1fr); gap: 6px; overflow: hidden; padding: 0px 10px 108px 8px; flex: 1 1 0px; box-sizing: border-box;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-jump{position: relative; z-index: 2; display: grid; min-height: 0px; width: 40px; grid-template-rows: repeat(26, minmax(14px, 1fr)); align-content: stretch; padding: 2px 0px 5px; overflow: visible; touch-action: none; user-select: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-jump button{position: relative; z-index: 1; display: grid; width: 32px; height: 100%; min-height: 0px; padding: 0px; place-items: center; border: 0px; border-radius: 999px; background: transparent; color: rgb(22, 129, 58); font-size: 9.5px; font-weight: 900; line-height: 1; transform-origin: left center; transition: transform 0.12s, background-color 0.12s, color 0.12s;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-jump button.is-unavailable{color: rgb(196, 206, 199);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-jump button:not(.is-unavailable):active, .vlt-cockpit--desktop-elegant2 .vlt-klar-contact-jump button:not(.is-unavailable):focus-visible{outline: 0px; background: rgb(231, 243, 234);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-avatar img{display: block; width: 100%; height: 100%; object-fit: cover;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-identity strong, .vlt-cockpit--desktop-elegant2 .vlt-klar-contact-identity small{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-action-slot{display: block; width: 32px; height: 32px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-action-slot svg{width: 17px; height: 17px; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-card{position: absolute; z-index: 18; top: 72px; right: 12px; left: 12px; display: flex; max-height: calc(100% - 88px); overflow: auto; flex-direction: column; align-items: center; padding: 22px 18px 20px; border-width: 3px 1px 1px; border-style: solid; border-color: rgb(22, 129, 58) rgb(215, 229, 218) rgb(215, 229, 218); border-image: none; border-radius: 18px; background: rgb(255, 255, 255); box-shadow: rgba(18, 55, 31, 0.2) 0px 16px 38px; box-sizing: border-box;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-card[hidden]{display: none !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-card__close{position: absolute; top: 12px; right: 12px; display: grid; width: 38px; height: 38px; padding: 0px; place-items: center; border: 0px; border-radius: 50%; background: rgb(237, 245, 239); color: rgb(23, 63, 39); font-size: 25px; line-height: 1; cursor: pointer;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-card__avatar{display: grid; width: 112px; height: 112px; margin-top: 4px; place-items: center;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-card h3{margin: 12px 44px 2px; color: rgb(23, 63, 39); font-size: 21px; line-height: 1.2; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-card > p{margin: 0px; color: rgb(106, 119, 111); font-size: 12px; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-card dl{display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; margin: 18px 0px 16px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-card dl > div{min-width: 0px; padding: 9px 10px; border-radius: 10px; background: rgb(245, 248, 246); text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-card dt{color: rgb(122, 135, 127); font-size: 8px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-card dd{margin: 3px 0px 0px; overflow-wrap: anywhere; color: rgb(23, 63, 39); font-size: 12px; font-weight: 750;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-contact-card__actions{width: 100%;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-card{overflow: hidden; border-right: 1px solid rgb(220, 230, 222); border-bottom: 1px solid rgb(220, 230, 222); border-left: 1px solid rgb(220, 230, 222); border-image: none; border-top: 3px solid var(--vlt-support-color,#009039); border-radius: 16px; background: rgb(255, 255, 255); box-shadow: rgba(23, 58, 35, 0.07) 0px 8px 24px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-card > header{display: block; padding: 16px 16px 10px; border: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-card > header small{color: var(--vlt-support-color,#009039); font-size: 8px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-card > header h3{margin: 4px 0px 3px; color: rgb(23, 63, 39); font-size: 18px; line-height: 1.2;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-card > header p{margin: 0px; color: rgb(98, 112, 104); font-size: 10.5px; line-height: 1.45;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-person{display: flex; align-items: center; gap: 14px; padding: 4px 16px 16px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-avatar{display: grid; width: 76px; height: 76px; overflow: hidden; flex: 0 0 76px; place-items: center; border-radius: 50%; background: var(--vlt-support-accent,#dcebe0); color: var(--vlt-support-color,#009039);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-avatar img{display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-avatar.is-square{border-radius: 14px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-person > span:last-child{display: flex; min-width: 0px; flex-direction: column;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-person strong{color: rgb(23, 63, 39); font-size: 18px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-ways{display: grid; grid-template-columns: 1fr; border-top: 1px solid rgb(232, 238, 233);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-ways > a{display: grid; min-height: 58px; grid-template-columns: 42px minmax(0px, 1fr); align-items: center; justify-content: stretch; gap: 10px; padding: 7px 16px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(232, 238, 233); border-image: none; border-radius: 0px; color: rgb(23, 63, 39); font-size: 13px; text-decoration: none; box-sizing: border-box;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-way-icon{display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(22, 129, 58, 0.28); border-radius: 50%; background: rgb(244, 249, 245); color: var(--vlt-support-color,#009039);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-way-icon.is-whatsapp{background: var(--vlt-support-color,#009039); color: rgb(255, 255, 255);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-way-icon svg{width: 21px; height: 21px; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-ways > a > span{display: flex; min-width: 0px; flex-direction: column; gap: 2px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-ways b{color: rgb(123, 138, 128); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-ways em{min-width: 0px; overflow-wrap: anywhere; color: rgb(23, 63, 39); font-size: 15px; font-style: normal; font-weight: 700;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-imprint{background: rgb(248, 250, 248);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-imprint summary{position: relative; padding: 14px 42px 14px 16px; color: rgb(23, 63, 39); font-size: 11px; font-weight: 850; list-style: none; cursor: pointer;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-imprint summary::after{content: "+"; position: absolute; top: 50%; right: 16px; color: var(--vlt-support-color,#009039); font-size: 20px; transform: translateY(-50%);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-imprint > div{position: relative; padding: 0px 16px 16px; border-top: 1px solid rgb(225, 232, 227);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-imprint h4{margin: 0px; color: rgb(23, 63, 39); font-size: 13px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-imprint-head{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0px 8px; border-bottom: 1px solid rgb(225, 232, 227);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-imprint-brand{display: flex; min-width: 0px; flex: 1 1 auto; align-items: center; justify-content: flex-start; gap: 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-imprint-logo{position: absolute; z-index: 2; top: 58px; right: 16px; display: grid; width: 76px; height: 76px; overflow: hidden; flex: 0 0 76px; place-items: center; border: 1px solid rgba(22, 129, 58, 0.18); border-radius: 14px; background: rgb(255, 255, 255); box-shadow: rgba(20, 55, 31, 0.1) 0px 8px 20px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-imprint-logo img{display: block; width: 100%; height: 100%; object-fit: cover;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-imprint p{margin: 7px 0px; color: rgb(89, 103, 94); font-size: 10px; line-height: 1.45;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-imprint > .has-imprint-logo > p{max-width: calc(100% - 92px);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-support-imprint a{display: inline; min-height: 0px; padding: 0px; border: 0px; border-radius: 0px; background: transparent; color: rgb(18, 109, 49); font: inherit; text-align: left; text-decoration: none; box-shadow: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top{height: 180px; min-height: 180px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview{position: relative;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf{position: absolute; z-index: 3; top: 80px; right: 13px; width: 112px; margin: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-page{width: 112px; height: 47px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time{transform: none; pointer-events: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring{top: 79px; bottom: auto;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__details > .vlt-elegant-overview__info--sales{position: absolute; z-index: 1; top: 31px; bottom: 0px; left: 0px; width: 50%; height: auto; min-height: 0px; padding: 0px 46px 10px 12px; border-right: 1px solid rgb(230, 235, 231);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info--sales > .vlt-elegant-overview__info-messages{right: 46px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info--sales > .vlt-elegant-overview__info-dots{right: 46px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__details > .vlt-elegant-overview__rest{grid-column: 2;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month{background: var(--vlt-calendar-banner,#d94a43); color: var(--vlt-calendar-month-color,#fff);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day{color: var(--vlt-calendar-day-color,#173f27); font-size: var(--vlt-calendar-day-size,34px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday{color: var(--vlt-calendar-weekday-color,#68756d); font-size: var(--vlt-calendar-weekday-size,7px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period{color: var(--vlt-calendar-period-color,#173f27); font-size: var(--vlt-calendar-period-size,10px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > b{color: var(--vlt-clock-color,#16813a); font-size: var(--vlt-clock-size,27px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > i{color: var(--vlt-clock-color,#16813a); font-size: calc(var(--vlt-clock-size,27px) * .63);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock.is-digital .vlt-elegant-overview__clock-time > b{width: auto; min-width: 15px; border: 0px; border-radius: 0px; background: transparent;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock.is-digital .vlt-elegant-overview__clock-time > b::after, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock.is-digital .vlt-elegant-overview__clock-time > b::before, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock.is-glass .vlt-elegant-overview__clock-time > b::after, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock.is-glass .vlt-elegant-overview__clock-time > b::before{content: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__analog > i{position: absolute; left: 50%; bottom: 50%; display: block; border-radius: 999px; background: var(--vlt-clock-color,#16813a); transform-origin: 50% 100%;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__analog > .is-hour{width: 3px; height: 18px; margin-left: -1.5px; transform: rotate(var(--vlt-clock-hour-angle,0deg));}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__analog > .is-minute{width: 2px; height: 24px; margin-left: -1px; transform: rotate(var(--vlt-clock-minute-angle,0deg));}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__analog > .is-center{bottom: calc(50% - 3px); width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-profile-settings__gesture-area{width: min(100%, 260px); height: 178px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-profile-settings__preview{position: relative; display: grid; width: 108px; height: 108px; overflow: hidden; place-items: center; border: 1px solid rgb(216, 226, 218); border-radius: 28px; background: rgb(241, 247, 242); color: rgb(22, 129, 58); font-size: 48px; touch-action: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-profile-settings h3{margin: 20px 0px 4px; color: rgb(23, 63, 39); font-size: 20px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-profile-settings p{max-width: 310px; margin: 0px 0px 18px; color: rgb(104, 117, 109); font-size: 13px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-profile-settings > div:nth-of-type(2){display: flex; gap: 9px; flex-wrap: wrap; justify-content: center;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-profile-settings button{min-height: 44px; padding: 0px 15px; border: 1px solid rgb(22, 129, 58); border-radius: 13px; background: rgb(22, 129, 58); color: rgb(255, 255, 255); font-weight: 750;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-profile-settings button.is-secondary{background: rgb(255, 255, 255); color: rgb(23, 63, 39);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-profile-settings > small{min-height: 20px; margin-top: 13px; color: rgb(22, 129, 58); font-size: 12px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf{top: 37px; right: 9px; width: 152px; height: 140px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page{position: relative; display: block; width: 152px; height: 140px; overflow: visible; border: 0px; border-radius: 0px; background: transparent; box-shadow: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page::before, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page::after{z-index: 4; top: -4px; width: 4px; height: 12px; background: rgb(40, 67, 50); box-shadow: rgba(20, 41, 27, 0.2) 0px 1px 1px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page::before{left: 24px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page::after{right: 24px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month{position: absolute; top: 0px; right: 0px; left: 0px; display: grid; height: 27px; place-items: center; border: 0px; border-radius: 15px 15px 3px 3px; background: var(--vlt-calendar-banner,#d94a43); box-shadow: rgba(80, 30, 28, 0.12) 0px 3px 8px; color: rgb(255, 255, 255); font-size: 11px; font-weight: 850; letter-spacing: 0.08em;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day{position: absolute; top: 31px; right: 0px; left: 0px; height: 49px; color: var(--vlt-calendar-day-color,#173f27); font-size: clamp(34px,calc(var(--vlt-calendar-day-size,34px) * 1.28),56px); font-weight: 300;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day::after{border-top-color: rgb(237, 240, 238); box-shadow: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday{position: absolute; top: 81px; right: 0px; left: 0px; display: grid; height: 13px; place-items: center; color: var(--vlt-calendar-weekday-color,#68756d); font-size: clamp(8px,calc(var(--vlt-calendar-weekday-size,7px) * 1.12),11px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period{position: absolute; top: 122px; right: 0px; left: 0px; display: grid; height: 17px; padding: 0px; place-items: center; border: 0px; background: transparent; color: var(--vlt-calendar-period-color,#173f27); font-size: var(--vlt-calendar-period-size,10px); font-weight: 650;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-page{width: 152px; height: 29px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time{gap: 1px; transform: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top > .vlt-elegant-overview__clock{right: auto; left: 75%; transform: translateX(-50%);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring{top: 99px; width: var(--vlt-calendar-ring-size,80px); height: var(--vlt-calendar-ring-size,80px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring::after{inset: var(--vlt-calendar-ring-thickness,6px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring > span{font-size: var(--vlt-calendar-ring-text-size,23px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring > span small{font-size: var(--vlt-calendar-ring-small-size,13px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div{align-items: center; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > span{right: 0px; left: 0px; width: 100%; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > strong{display: grid; grid-template-columns: 3ch auto 0.7ch 2ch auto; align-items: baseline; justify-content: center; column-gap: 0.45em; font-variant-numeric: tabular-nums;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > strong > b{min-width: 0px; text-align: right;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > strong > i{text-align: left;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > strong > em{color: var(--vlt-elegant-ink); font-style: normal; font-weight: 400; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__details > .vlt-elegant-overview__info--sales::after{content: ""; position: absolute; z-index: 0; top: calc(var(--vlt-calendar-cockpit-axis-top,106px) - 31px); right: 0px; left: 0px; border-top: 1px solid rgb(230, 235, 231); pointer-events: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info--sales > header{position: absolute; z-index: 2; top: -1px; right: 46px; left: 12px; justify-content: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info--sales > header small{margin-left: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info--sales > .vlt-elegant-overview__info-messages{z-index: 2; top: var(--vlt-calendar-info-message-top,38px); transform: translateY(-50%);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info--sales > .vlt-elegant-overview__info-dots{z-index: 2; top: var(--vlt-calendar-info-dots-top,67px); bottom: auto;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow{position: absolute; z-index: 0; top: var(--vlt-calendar-slideshow-top,85px); right: 10px; bottom: 10px; left: 10px; overflow: hidden; border-radius: 12px; background: rgb(245, 248, 246);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow img{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: var(--vlt-slide-x,50%) var(--vlt-slide-y,50%); opacity: 0; transform: scale(var(--vlt-slide-zoom,1)); transform-origin: var(--vlt-slide-x,50%) var(--vlt-slide-y,50%); transition: opacity 0.9s;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow img.is-active{opacity: 1;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow img{transition: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-appointments-head{justify-content: center; padding-right: 0px; padding-left: 0px; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-open > span{text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-calendar{top: -3px; right: 12px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__details{min-height: var(--vlt-calendar-details-height,90px); height: var(--vlt-calendar-details-height,90px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top{height: var(--vlt-calendar-top-height,180px); min-height: var(--vlt-calendar-top-height,180px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf{top: var(--vlt-calendar-leaf-top,50px); transform: translateX(-50%) scale(var(--vlt-calendar-scale,1)); transform-origin: center top;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring{top: var(--vlt-calendar-cockpit-axis-top,106px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div{padding: 17px 14px 3px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > span{top: 4px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__composer{z-index: 10;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form label:has(> [data-vlt-calendar-postcode]), .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form label:has(> [data-vlt-calendar-city]), .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form label:has(> [data-vlt-calendar-street]), .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form label:has(> [data-vlt-calendar-house-number]), .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form label:has(> [data-vlt-calendar-customer-phone]), .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form label:has(> [data-vlt-calendar-customer-email]){scroll-margin-top: 12px; scroll-margin-bottom: calc(210px + env(safe-area-inset-bottom));}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top{height: var(--vlt-calendar-top-height,187px); min-height: var(--vlt-calendar-top-height,187px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf{position: absolute; z-index: 3; top: var(--vlt-calendar-group-top,32px); right: auto; left: 75%; display: block; width: 152px; height: var(--vlt-calendar-group-height,146px); margin: 0px; transform: translateX(-50%) scale(var(--vlt-calendar-scale,1)); transform-origin: center center; pointer-events: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page{position: relative; display: grid; width: 152px; height: auto; min-height: var(--vlt-calendar-group-height,146px); overflow: visible; grid-template-rows: var(--vlt-calendar-month-height,27px) var(--vlt-calendar-day-height,49px) var(--vlt-calendar-weekday-height,13px) var(--vlt-calendar-clock-height,32px) var(--vlt-calendar-period-height,17px); row-gap: 2px; border: 0px; border-radius: 0px; background: transparent; box-shadow: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__clock, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period{position: relative; inset: auto; width: 100%; height: auto; min-height: 0px; margin: 0px; transform: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period{display: grid; place-items: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day{overflow: visible;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day::after{content: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__clock{display: grid; place-items: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-page{display: grid; width: 100%; height: 100%; min-height: 0px; place-items: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time{gap: 1px; transform: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > b, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock.is-digital .vlt-elegant-overview__clock-time > b, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock.is-glass .vlt-elegant-overview__clock-time > b{width: auto; min-width: 0.62em; height: auto; overflow: visible; border: 0px; border-radius: 0px; background: transparent; box-shadow: none; color: var(--vlt-clock-color,#16813a); font-size: var(--vlt-clock-size,27px); font-weight: 300;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > b::before, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > b::after{content: none;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock-time > i{color: var(--vlt-clock-color,#16813a); font-size: calc(var(--vlt-clock-size,27px) * .63); font-weight: 500;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring{top: var(--vlt-calendar-cockpit-axis-top,106px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__details > .vlt-elegant-overview__info--sales::after{top: calc(var(--vlt-calendar-cockpit-axis-top,106px) - 31px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div{display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; row-gap: 4px; padding: 4px 10px; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > span{position: static; top: auto; right: auto; left: auto; width: auto; line-height: 1.2; text-align: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > strong{margin: 0px; line-height: 1.2;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf{top: 50%; transform: translate(-50%,-50%) scale(var(--vlt-calendar-scale,1));}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info--sales > header{right: 12px; left: 12px; align-items: baseline; justify-content: center; gap: 8px; line-height: 1;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info--sales > header small{margin: 0px; line-height: 1;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div{place-content: center; place-items: center;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > strong{width: max-content; max-width: 100%; grid-template-columns: 3ch max-content 0.7ch 2ch max-content; justify-self: center; justify-content: start;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf{top: calc(50% + 10px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info--sales > header{align-items: baseline;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info--sales > header small{transform: none;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card footer > [data-vlt-calendar-detail-show-date]{background: rgb(255, 255, 255); color: rgb(18, 109, 49);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card footer > [data-vlt-calendar-detail-edit]{background: rgb(22, 129, 58); color: rgb(255, 255, 255);}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__detail-card footer > [data-vlt-calendar-detail-close]{grid-column: 1 / -1; background: rgb(22, 129, 58); color: rgb(255, 255, 255);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page{overflow: visible; border-radius: 10px; background: rgba(255, 255, 255, 0.72); box-shadow: rgba(24, 62, 37, 0.1) 0px 5px 13px, rgba(22, 129, 58, 0.2) 0px 0px 0px 1px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month{border-radius: 10px 10px 4px 4px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period{border-radius: 0px 0px 10px 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form label:has(> [data-vlt-calendar-postcode]), .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form label:has(> [data-vlt-calendar-city]), .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form label:has(> [data-vlt-calendar-street]), .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form label:has(> [data-vlt-calendar-house-number]), .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form label:has(> [data-vlt-calendar-customer-phone]), .vlt-cockpit--desktop-elegant2 .vlt-klar-calendar__form label:has(> [data-vlt-calendar-customer-email]){scroll-margin-top: 25vh; scroll-margin-bottom: 45vh;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-klar-welcome, .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview, .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview__utility{background: linear-gradient(145deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 57%, rgb(251, 253, 251) 100%); box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(198, 211, 201, 0.42) 0px -1px 0px inset, rgba(218, 225, 220, 0.94) 0px 3px 0px, rgba(21, 55, 32, 0.11) 0px 7px 11px, rgba(27, 54, 37, 0.12) 12px 20px 30px; border-top-color: rgba(255, 255, 255, 0.98) !important; border-right-color: rgba(214, 225, 217, 0.94) !important; border-bottom-color: rgba(205, 217, 208, 0.96) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-sun, .vlt-cockpit--desktop-elegant2 .vlt-cockpit__bell, .vlt-cockpit--desktop-elegant2 .vlt-klar-account{background: linear-gradient(145deg, rgb(255, 255, 255), rgb(242, 247, 243)); box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(22, 129, 58, 0.08) 0px -1px 0px inset, rgba(211, 221, 213, 0.88) 0px 2px 0px, rgba(22, 62, 35, 0.14) 0px 7px 14px, rgba(24, 55, 36, 0.08) 7px 11px 18px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page{border-color: rgba(203, 215, 206, 0.98); background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 249, 0.96)); box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(179, 194, 183, 0.5) 0px -1px 0px inset, rgba(205, 214, 207, 0.92) 0px 3px 0px, rgba(28, 57, 39, 0.14) 0px 8px 12px, rgba(29, 53, 38, 0.12) 10px 17px 23px, rgba(22, 129, 58, 0.18) 0px 0px 0px 1px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month{background: linear-gradient(145deg, rgb(239, 87, 79) 0%, rgb(217, 63, 57) 48%, rgb(199, 51, 48) 100%); box-shadow: rgba(255, 255, 255, 0.38) 0px 1px 0px inset, rgba(129, 25, 23, 0.16) 0px -2px 0px inset, rgba(151, 42, 36, 0.18) 0px 3px 7px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring{box-shadow: rgba(255, 255, 255, 0.78) 0px 1px 0px inset, rgba(205, 214, 207, 0.92) 0px 3px 0px, rgba(17, 69, 35, 0.2) 0px 8px 13px, rgba(27, 53, 37, 0.12) 10px 15px 23px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring::after{background: linear-gradient(145deg, rgb(255, 255, 255), rgb(248, 250, 248)); box-shadow: rgba(18, 58, 31, 0.07) 0px 2px 4px inset, rgb(255, 255, 255) 0px -1px 0px inset;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow{border-color: rgba(207, 219, 210, 0.94); background: linear-gradient(145deg, rgb(248, 250, 248), rgb(238, 244, 240)); box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(207, 216, 209, 0.9) 0px 2px 0px, rgba(19, 56, 31, 0.14) 0px 7px 12px, rgba(25, 50, 34, 0.11) 9px 14px 21px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button{background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(243, 248, 244, 0.72)); box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(22, 129, 58, 0.07) 0px -1px 0px inset, rgba(218, 226, 220, 0.76) 0px 2px 0px, rgba(21, 65, 35, 0.09) 0px 6px 10px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__menu-glass{background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(205, 234, 213, 0.82)); box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(22, 129, 58, 0.12) 0px -1px 0px inset, rgba(190, 215, 197, 0.78) 0px 3px 0px, rgba(20, 78, 37, 0.2) 0px 8px 15px, rgba(24, 56, 35, 0.1) 8px 13px 20px;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-calendar{filter: drop-shadow(rgba(52, 65, 56, 0.22) 0px 3px 2px) drop-shadow(rgba(29, 51, 37, 0.12) 5px 7px 7px);}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-nav-glass{background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(198, 231, 207, 0.86)); box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(22, 129, 58, 0.12) 0px -1px 0px inset, rgba(185, 211, 192, 0.75) 0px 3px 0px, rgba(23, 80, 39, 0.2) 0px 8px 15px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-head{box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(174, 188, 178, 0.3) -1px -1px 0px inset, rgb(238, 242, 239) 2px 2px 0px, rgb(211, 218, 212) 4px 4px 0px, rgba(25, 48, 33, 0.16) 7px 8px 11px, rgba(22, 43, 30, 0.13) 12px 16px 25px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-klar-welcome, .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview, .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview__utility{box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(171, 187, 175, 0.3) -1px -2px 0px inset, rgb(240, 243, 241) 2px 2px 0px, rgb(212, 219, 213) 4px 4px 0px, rgba(24, 49, 32, 0.17) 7px 8px 11px, rgba(21, 43, 29, 0.14) 12px 18px 28px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-sun, .vlt-cockpit--desktop-elegant2 .vlt-cockpit__bell, .vlt-cockpit--desktop-elegant2 .vlt-klar-account{box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(166, 184, 171, 0.27) -1px -2px 0px inset, rgb(237, 241, 238) 2px 2px 0px, rgb(207, 214, 208) 4px 4px 0px, rgba(21, 52, 32, 0.17) 7px 8px 10px, rgba(22, 45, 30, 0.11) 10px 13px 19px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page{box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(158, 178, 163, 0.34) -1px -2px 0px inset, rgb(237, 241, 238) 2px 2px 0px, rgb(199, 206, 200) 5px 5px 0px, rgba(20, 47, 31, 0.19) 8px 9px 12px, rgba(20, 42, 28, 0.15) 12px 17px 24px, rgba(22, 129, 58, 0.18) 0px 0px 0px 1px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month{box-shadow: rgba(255, 255, 255, 0.43) 0px 2px 0px inset, rgba(114, 20, 18, 0.22) -1px -2px 0px inset, rgb(209, 58, 54) 2px 2px 0px, rgb(169, 43, 40) 4px 4px 0px, rgba(113, 30, 27, 0.22) 7px 8px 11px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring{box-shadow: rgba(255, 255, 255, 0.88) 0px 2px 0px inset, rgb(237, 241, 238) 2px 2px 0px, rgb(203, 210, 204) 4px 4px 0px, rgba(15, 57, 31, 0.2) 7px 8px 11px, rgba(21, 44, 29, 0.14) 10px 14px 21px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow{box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(164, 182, 168, 0.32) -1px -1px 0px inset, rgb(237, 241, 238) 2px 2px 0px, rgb(203, 211, 205) 4px 4px 0px, rgba(19, 50, 31, 0.17) 7px 8px 11px, rgba(20, 43, 29, 0.13) 11px 15px 22px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button{box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(169, 189, 174, 0.24) -1px -2px 0px inset, rgb(238, 242, 239) 2px 2px 0px, rgb(207, 214, 208) 4px 4px 0px, rgba(20, 54, 32, 0.16) 7px 8px 10px, rgba(21, 46, 30, 0.11) 9px 12px 17px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__menu-glass{box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(22, 129, 58, 0.12) -1px -2px 0px inset, rgb(232, 239, 233) 2px 2px 0px, rgb(185, 200, 188) 5px 5px 0px, rgba(14, 68, 33, 0.21) 8px 9px 12px, rgba(20, 45, 29, 0.13) 11px 15px 21px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-nav-glass{box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(22, 129, 58, 0.14) -1px -2px 0px inset, rgb(232, 239, 233) 2px 2px 0px, rgb(185, 200, 188) 4px 4px 0px, rgba(14, 67, 32, 0.21) 7px 8px 11px, rgba(19, 44, 28, 0.13) 10px 14px 20px !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button.is-vlt-menu-glass-active, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button[aria-pressed="true"]{background: linear-gradient(145deg, rgba(250, 255, 251, 0.98), rgba(209, 237, 216, 0.94)) !important; box-shadow: rgb(255, 255, 255) 0px 2px 0px inset, rgba(22, 129, 58, 0.5) 0px 0px 0px 1px inset, rgba(22, 129, 58, 0.16) 0px -2px 0px inset, rgb(229, 236, 231) 2px 2px 0px, rgb(184, 201, 188) 4px 4px 0px, rgba(14, 68, 33, 0.2) 7px 9px 13px, rgba(20, 45, 29, 0.12) 10px 14px 20px !important; color: rgb(7, 95, 41) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button.is-vlt-menu-glass-active::before, .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button[aria-pressed="true"]::before{background: rgba(237, 248, 240, 0.98) !important; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(22, 129, 58, 0.12) 0px 0px 0px 2px !important;}
.vlt-cockpit--desktop-elegant2{padding-top: calc(4px + var(--vlt-klar-page-top-offset,0px)) !important;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-head{padding-left: 0px;}
.vlt-cockpit--desktop-elegant2 .vlt-klar-goal-footer{padding-bottom: calc(105px + env(safe-area-inset-bottom));}
}
/* VLT-ELEGANT2-SPIEGEL-ENDE */

/* VLT-ELEGANT2-AUFBAU */
/* 18.08. - Anordnung der Elegant-Maske am Rechner: Kopfleiste, Willkommenskarte,
   darunter Vertriebsmonat und Vertriebskalender nebeneinander, darunter die Kacheln. */
@media (min-width: 761px) {
  .vlt-cockpit--desktop-elegant2 > .vlt-mini-nav-wrap,
  .vlt-cockpit--desktop-elegant2 > .vlt-cockpit__top,
  .vlt-cockpit--desktop-elegant2 > .vlt-cockpit__calendar,
  .vlt-cockpit--desktop-elegant2 > .vlt-cockpit__day,
  .vlt-cockpit--desktop-elegant2 > .vlt-cockpit__footer,
  .vlt-cockpit--desktop-elegant2 > .vlt-contact,
  .vlt-cockpit--desktop-elegant2 > .vlt-cockpit__brandbar { display: none !important; }

  /* Die gespiegelte Handy-Regel setzt das Cockpit auf position: fixed mit inset: 0 -
     die Telefon-App fuellt ja den ganzen Schirm. Am Rechner nimmt es dadurch keinen
     Platz im Fluss ein und der schwarze Fussbereich schob sich darunter. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 {
    position: static !important;
    inset: auto !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .vlt-cockpit--desktop-elegant2 {
    display: flex !important;
    flex-direction: column;
    background: transparent !important;
    max-width: none !important;
    padding: 0 0 40px !important;
  }
  .vlt-cockpit--desktop-elegant2 > .vlt-cockpit-klar-shell { order: 1; }
  .vlt-cockpit--desktop-elegant2 > .vlt-cockpit__actions { order: 2; }

  .vlt-cockpit--desktop-elegant2 > .vlt-cockpit-klar-shell {
    display: block !important;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-klar-desktop-nav,
  .vlt-cockpit--desktop-elegant2 .vlt-klar-view--overview,
  .vlt-cockpit--desktop-elegant2 .vlt-klar-view--goals,
  .vlt-cockpit--desktop-elegant2 .vlt-klar-mobile-switches,
  .vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-nav,
  .vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-quick { display: none !important; }

  .vlt-cockpit--desktop-elegant2 .vlt-klar-head {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  /* Zwischen HEIM & HAUS Kopfleiste und Willkommenskarte lag kein Abstand.
     Drei Klassen, weil die gespiegelte Handy-Regel ein Element im Selektor hat. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main {
    margin-top: 18px !important;
  }

  .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > * { display: none !important; }
  .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-klar-welcome {
    display: flex !important;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview {
    display: grid !important;
    grid-column: 1;
    grid-row: 2;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview__utility {
    display: grid !important;
    grid-column: 2;
    grid-row: 2;
  }

  .vlt-cockpit--desktop-elegant2 > .vlt-cockpit__actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 1420px;
    margin: 24px auto 0;
    padding: 0 24px;
    box-sizing: border-box;
    background: none;
    border: 0;
    position: static;
  }
  /* Kacheln wie in der Handy-Ansicht: Symbol oben, Beschriftung darunter. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit__actions .vlt-cockpit__action {
    max-width: none !important;
    min-width: 0;
    width: auto;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 76px;
    padding: 13px 10px;
    border-radius: 14px;
    border: 1px solid #167835 !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 400;
    color: #173f27 !important;
    text-align: center;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit__actions .vlt-cockpit__action-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(23, 63, 39, .1) !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit__actions .vlt-cockpit__action-icon svg { width: 17px; height: 17px; }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit__actions .vlt-cockpit__action-label { display: block !important; font-size: 13px; font-weight: 800; color: #173f27; line-height: 1.25; }
}
/* VLT-ELEGANT2-AUFBAU-ENDE */

/* VLT-ELEGANT2-MONATSKARTE */
/* 18.08. - Das Innenleben der Karte "Aktueller Vertriebsmonat" neu vermessen.
   Am Telefon sitzen Kalenderblatt, Ring und die Rest-Kacheln auf festen Positionen,
   die auf 390px eingemessen sind. Hier stattdessen ein Raster, das jede Breite vertraegt. */
@media (min-width: 761px) {
  /* Drei Klassen, weil die gespiegelte Handy-Regel ein Element im Selektor hat
     (section.vlt-elegant-overview) und damit sonst gewinnt. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview {
    position: relative;
    display: grid !important;
    /* Live gemessen: die Karte hat zwei gleich breite Spalten (je 49,7 %). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    /* Die Karte hat ein festes Hoehenverhaeltnis. Ohne diese beiden Zeilen dehnen
       sich die Rasterzeilen und schieben die Schilder vom Kalenderblatt weg. */
    /* Live gemessen: Luecke Kalenderblatt -> erstes Schild 3,0 % der Kartenbreite.
       Blatt sichtbar 160px hoch, Zeilenabstand 16px -> erste Zeile 163px. */
    grid-template-rows: 214px min-content minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 16px 22px !important;
    align-items: start !important;
    padding: 46px 24px 24px !important;
    height: auto !important;
    min-height: 0 !important;
    /* 18.08. - festes Hoehenverhaeltnis wieder raus: das Foto soll im Hochformat
       vollstaendig zu sehen sein, dafuer muss die Karte in der Hoehe mitwachsen. */
  }
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top,
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__details { display: contents !important; }

  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top > h3 {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 18px !important;
    width: auto !important;
    margin: 0 !important;
    text-align: center;
  }

  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    grid-column: 1 !important;
    /* Seit die Knoepfe unter dem Kalenderblatt sitzen, hat die Karte drei
       Zeilen - die Bildspalte laeuft ueber alle. */
    grid-row: 1 / -1 !important;
  }

  /* Das Kalenderblatt ist auf Telefonmass gezeichnet (112x153). Am Rechner wird es
     als Ganzes vergroessert - so bleiben alle Verhaeltnisse genau wie am Telefon.
     Die Vergroesserung belegt keinen Platz, deshalb wird er unten dazugegeben. */
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-leaf {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    /* Gemessen: Blatt natuerlich 100px hoch, vergroessert 160px - es fehlen also 60px. */
    /* Live-Ansicht: Luecke Blatt -> erstes Schild 3,0 % der Kartenbreite = 19px.
       Gemessen waren 41px, also 22px zu viel. */
    /* 18.08. - Christian: das Blatt soll etwas kleiner sein und tiefer sitzen,
       mehr in der Mitte seiner Spalte. Oben 46px dazu, unten 30 statt 40. */
    /* Nachgemessen: oben blieben 47px Luft, unten 66. Mit 55 statt 46 stehen
       oben 56 und unten 57 - die Gruppe sitzt damit genau mittig. */
    margin: 55px auto 30px !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    /* Live gemessen: das Blatt ist 31,8 % der Kartenbreite. 112px * 1.83 = 205px. */
    /* Gemessen: die Schilder sind seit dem Kuerzen 175 breit, das Blatt war 159.
       112px Grundbreite * 1.5625 = 175 - damit stehen Blatt und Schilder gleich breit. */
    /* 18.08. - Christian: die Gruppe aus Blatt und Schildern wirkte gequetscht,
       gemessen standen zwischen den beiden Schildern nur 3px. In der Spalte waren
       nur 3px Luft uebrig. Er hat sich entschieden, den Platz beim Kalenderblatt
       zu holen: 1.20 statt 1.455 macht aus 163x146 ein Blatt von 134x120 und gibt
       26px frei. Das Blatt ist damit nicht mehr genau so breit wie die Schilder -
       das ist so gewollt. */
    transform: scale(1.20) !important;
    transform-origin: top center !important;
    height: auto !important;
  }
  /* Das Kalenderblatt hat feste Zeilenhoehen aus der Telefonfassung. Die Uhr steckt
     in einer 19px hohen Zeile, ihr Inhalt ist aber 92px hoch - deshalb war sie unsichtbar.
     Zeilen und Uhr duerfen hier mitwachsen; die analoge Uhr bleibt aus. */
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page {
    grid-template-rows: auto auto auto auto auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock,
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__clock > div {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__analog { display: none !important; }
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-open-area {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    z-index: 4;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    margin-left: -46px !important;
    z-index: 5;
  }

  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  /* Die beiden Rest-Kacheln: am Telefon sitzt die Beschriftung als absolut
     gesetzter Kasten ueber dem Wert. Hier normal untereinander. */
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    /* Live-Ansicht ausgemessen (Karte 430 breit): Luecke zwischen den Schildern 4px
       = 0,8 % der Kartenbreite. Bei 644 breiter Karte sind das 5px. */
    gap: 7px !important;
    align-content: start;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 14px !important;
    justify-items: center;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > span {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    transform: none !important;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > strong {
    justify-self: center;
    font-size: 17px !important;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div > span {
    font-size: 11px !important;
    letter-spacing: .12em;
  }

  /* Die Hinweis-Karte war am Telefon auf feste Hoehe gesetzt und das Bild darin
     absolut positioniert - deshalb blieb nur ein schmaler Streifen sichtbar. */
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info {
    display: flex !important;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    /* Live gemessen: Bild 230x197, also Seitenverhaeltnis 7:6. */
    aspect-ratio: 7 / 6;
    margin-top: 12px !important;
    border-radius: 12px;
    overflow: hidden;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow img {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  /* Beide Karten gleich tief; die Kalenderkarte fuellt ihre Spalte aus. */
  .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview__utility {
    height: 100% !important;
    align-self: stretch !important;
  }
  /* Ueberschrift, Hinweistext und Punkte sind in der Telefonfassung absolut gesetzt.
     Dadurch lagen sie auf dem Bild. Hier stehen sie normal untereinander. */
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info > header,
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info-messages,
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info-dots {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* Gemessen: die Ueberschrift endet bei 295, die Meldung begann bei 294 - sie
     stiessen aneinander. Abstand darunter und mittig ausgerichtet. */
  /* Feste Hoehe fuer den Meldungsbereich: die Meldungen wechseln und sind mal ein-,
     mal dreizeilig. Ohne feste Hoehe wandert das Bild darunter mit. */
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info-messages {
    position: relative !important;
    margin-top: 16px !important;
    height: 56px !important;
    min-height: 56px !important;
    text-align: center !important;
  }
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info-messages > p {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info-dots {
    display: flex !important;
    gap: 5px;
    justify-content: center;
    margin: 8px 0 0 !important;
  }

  /* Das Vorschaubild soll am Rechner die volle Spaltenbreite bekommen. */
  .vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info {
    padding-left: 1.5% !important;
    padding-right: 1.5% !important;
  }
}
/* VLT-ELEGANT2-MONATSKARTE-ENDE */

/* VLT-ELEGANT2-AUSBLENDEN */
/* 18.08. - Steht bewusst als LETZTER Block der Datei. Der Spiegel schaltet auch
   Bausteine ein, die nur das Telefon braucht (z. B. .vlt-cockpit__mobile-top).
   Hier werden sie wieder ausgeschaltet, mit mehr Klassen als der Spiegel. */
@media (min-width: 761px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 > .vlt-cockpit__mobile-top,
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 > .vlt-cockpit__statgroup,
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 > .vlt-cockpit__mobile-expand,
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit__mobile-expand,
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 > .vlt-cockpit__brandbar,
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 > .vlt-mini-nav-wrap,
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 > .vlt-cockpit__top,
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 > .vlt-cockpit__calendar,
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 > .vlt-cockpit__day,
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 > .vlt-cockpit__footer,
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 > .vlt-contact { display: none !important; }

  .vlt-cockpit.vlt-cockpit--desktop-elegant2 > .vlt-cockpit__actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 1420px !important;
    margin: 24px auto 0 !important;
    padding: 0 24px !important;
    box-sizing: border-box;
    background: none !important;
    border: 0 !important;
    position: static !important;
    height: auto !important;
  }
}
/* VLT-ELEGANT2-AUSBLENDEN-ENDE */

/* VLT-ELEGANT2-MAST: 18.08. zurueckgenommen. Der Umbau von Mast und Schildern
   hat es schlechter gemacht, nicht besser. Die Schilder stehen wieder so, wie die
   Handy-Fassung sie zeichnet. */

/* VLT-ELEGANT2-RAHMENSEITE */
/* 18.08. - Drei Wuensche von Christian:
   1. Die Aktionskacheln waren 92px hoch und wirkten zu gross.
   2. Der schwarze Balken unten (Theme-Fussbereich #footer) lief ueber die volle
      Fensterbreite statt auf Cockpit-Breite (gemessen 184-1544 = 1360px).
   3. Dasselbe fuer die weisse Flaeche oben (#main) neben dem HEIM & HAUS Banner. */
@media (min-width: 761px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit__actions .vlt-cockpit__action {
    min-height: 62px !important;
    padding: 9px 10px !important;
    gap: 3px !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit__actions .vlt-cockpit__action-icon {
    width: 22px !important;
    height: 22px !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit__actions .vlt-cockpit__action-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Seite und Fussbereich auf Cockpit-Breite bringen. Ueber :has am body,
     weil die Kennung am Cockpit haengt und diese Teile darueber liegen. */
  /* Gemessen: das Cockpit ist 1140px breit - so weit laesst Elementor den
     Inhalt zu (.elementor-container max-width 1140px). Genau diese Breite
     bekommen jetzt der weisse Bereich und der schwarze Fussbereich. */
  body.vlt-tool-fullwidth:has(.vlt-cockpit--desktop-elegant2) #main {
    background: transparent !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding-bottom: 16px !important;
  }
  /* 18.08. - Die Fussleiste traegt jetzt die Kartenfarbe statt Schwarz.
     Gemessen aus dem Kartenschatten: die gestufte Doppelung besteht aus
     rgb(240,243,241) bei 2px und rgb(212,219,213) bei 4px. Die tiefere
     Stufe ist die Farbe, die Christian meint. Kein overflow: hidden mehr,
     sonst wuerden die aeusseren Schattenstufen abgeschnitten. */
  body:has(.vlt-cockpit--desktop-elegant2) #footer {
    width: 100% !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 22px !important;
    border-radius: 14px !important;
    overflow: visible !important;
    background: #d4dbd5 !important;
    color: #16241c !important;
    box-shadow:
      inset 0 2px 0 0 rgba(255, 255, 255, .75),
      inset -1px -2px 0 0 rgba(171, 187, 175, .3),
      2px 2px 0 0 #f0f3f1,
      4px 4px 0 0 #d4dbd5,
      7px 8px 11px rgba(24, 49, 32, .17),
      12px 18px 28px rgba(21, 43, 29, .14) !important;
  }
  body:has(.vlt-cockpit--desktop-elegant2) #footer-inner,
  body:has(.vlt-cockpit--desktop-elegant2) #footer-bottom,
  body:has(.vlt-cockpit--desktop-elegant2) #footer-bottom-inner {
    background: transparent !important;
    border-radius: 14px !important;
  }
  body:has(.vlt-cockpit--desktop-elegant2) #footer-bottom #copyright,
  body:has(.vlt-cockpit--desktop-elegant2) #footer-bottom {
    color: #16241c !important;
  }

  /* 18.08. - Der HEIM & HAUS Banner lief ueber die volle Cockpitbreite (gemessen
     294-1434), die Karten darunter stehen aber 24px eingerueckt (318-1410).
     Jetzt stehen Banner und Karten auf einer Kante. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-head {
    margin-left: 24px !important;
    margin-right: 24px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Der schwarze Fussbereich soll nur noch ein schmaler Streifen ganz unten sein -
     gerade genug fuer einen Impressum-Link. Der obere Teil (#footer-widgets) ist
     leer und kostete allein 60px. */
  body:has(.vlt-cockpit--desktop-elegant2) #footer-widgets {
    display: none !important;
  }
  body:has(.vlt-cockpit--desktop-elegant2) #footer-bottom {
    padding: 7px 0 !important;
    border-top: 0 !important;
  }
  body:has(.vlt-cockpit--desktop-elegant2) #footer-bottom #copyright {
    font-size: 12px !important;
    line-height: 18px !important;
  }
  body:has(.vlt-cockpit--desktop-elegant2) #footer a {
    color: #16241c !important;
    text-decoration: underline !important;
  }
}
/* VLT-ELEGANT2-RAHMENSEITE-ENDE */

/* VLT-ELEGANT2-KALENDERSPALTEN */
/* 18.08. - Christians neue Anordnung: links die grosse Karte Aktueller
   Vertriebsmonat, rechts zwei Karten uebereinander. Oben der Vertriebskalender
   mit den vier Knoepfen wieder als 2x2-Block wie vorher, darunter eine neue
   Karte mit Meine Ziele, Kontakte und Unterstuetzung.
   Das Umhaengen der drei Knoepfe macht VLT-ELEGANT2-UMBAU in cockpit.js. */
@media (min-width: 761px) {
  /* Die rechte Spalte wird geteilt: Zeile 2 und 3 gleich hoch, die linke Karte
     laeuft ueber beide und gibt mit dem Hochformat-Foto die Gesamthoehe vor. */
  /* 18.08. - Der Vertriebskalender hatte unter den vier Knoepfen noch Luft:
     gemessen Karte 262 hoch, Inhalt endet bei 236 - und die Knopfzeile stand in
     einer 176er Zeile, obwohl zwei Knopfreihen nur 164 brauchen (2x80 + 4).
     Die Karte darf jetzt auf ihren Inhalt schrumpfen, die gewonnene Hoehe geht
     an die Karte Aktionsbuttons darunter. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main {
    grid-template-rows: auto min-content minmax(0, 1fr) !important;
  }
  /* Aus der Handy-Fassung bringt jede Karte 10px Aussenabstand oben mit. Am
     Rechner sorgt schon der Rasterabstand von 24px fuer Luft, und die 10px
     haben die Rasterrechnung verschoben (die untere Karte endete 10px zu
     frueh). Bei allen drei Karten raus, dann bleibt alles buendig. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview,
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview__utility {
    margin-top: 0 !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview__utility:not(.vlt-e2-karte) {
    /* min-content statt fester 164: der Knopfblock hat 5px Innenpolster,
       braucht also 174. Bei 164 rutschte die untere Knopfreihe 5px ueber den
       Kartenrand hinaus. */
    grid-template-rows: 36px 24px min-content !important;
    height: auto !important;
    align-self: start !important;
  }
  /* Knopfblock und Terminliste trugen aus der Handy-Fassung eine feste Hoehe
     von 176px - damit ragte der Block ueber den unteren Kartenrand hinaus,
     sobald die Karte auf 164 geschrumpft war. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility:not(.vlt-e2-karte) > .vlt-elegant-overview__menu--dashboard,
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility:not(.vlt-e2-karte) > .vlt-elegant-overview__appointments--utility {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: visible !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-elegant-overview__utility:not(.vlt-e2-karte) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  /* Die Karte "Aktionsbuttons": Ueberschrift, vier kleine Knoepfe, Trennlinie,
     darunter alle Aktions-Kacheln. Gemessen: Karte 534x256. Innen bleiben nach
     Polster 498x226. Aufteilung 26 + 6 + 54 + 6 + 1 + 6 = 99, Rest 127 fuer die
     Kacheln - drei Zeilen zu 39px bei 5px Abstand. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main > .vlt-e2-karte {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 24px minmax(0, 1fr) !important;

    row-gap: 6px !important;
    column-gap: 0 !important;
    padding: 14px 18px 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-karte > .vlt-elegant-overview__utility-head {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-karte > .vlt-e2-menu {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-karte > .vlt-e2-linie {
    grid-column: 1 !important;
    grid-row: 3 !important;
    height: 1px !important;
    background: rgba(20, 63, 40, .16) !important;
    align-self: center !important;
  }

  /* Vier Knoepfe nebeneinander, der vierte Platz bleibt vorerst frei. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-karte > .vlt-e2-menu {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 5px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: visible !important;
  }
  /* Die vier Knoepfe oben werden wie die Aktions-Kacheln gezeichnet, damit die
     Karte aus einem Guss wirkt. Die Klassen des Kalendermenues traegt die
     Spalte bewusst nicht mehr - von dort kam ein Hintergrund-Kissen, das ueber
     der Beschriftung lag. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-menu > button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(20, 63, 40, .28) !important;
    background: #ffffff !important;
    color: #14532d !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(20, 63, 40, .08) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    grid-column: auto !important;
    grid-row: auto !important;
    transform: none !important;
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 4px !important;
    gap: 2px !important;
  }
  /* Die Zeichen der drei Knoepfe sind Umrisse ohne eigene Angaben im Quelltext -
     Fuellung und Strich kamen aus der Fussleisten-Vorlage. Ohne die wurden sie
     schwarz ausgefuellt. Hier wieder als Umriss gesetzt, wie bei den Kacheln. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-menu > button > svg {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-menu > button > small {
    font: inherit !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-platzhalter {
    display: block !important;
    border: 1px dashed rgba(20, 63, 40, .18) !important;
    border-radius: 12px !important;
  }

  /* Alle Aktions-Kacheln in die Karte: vier Spalten, drei Zeilen, 11 Kacheln,
     der zwoelfte Platz bleibt frei. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-karte > .vlt-cockpit__actions {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    gap: 5px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    position: static !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-karte .vlt-cockpit__action {
    min-height: 0 !important;
    height: auto !important;
    padding: 3px 5px !important;
    gap: 2px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }
  /* Die Beschriftung sitzt in einer eigenen Huelle - die muss mit verkleinert
     werden, sonst laufen lange Namen wie Auftragsverwaltung ueber den Rand. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-karte .vlt-cockpit__action-label {
    font-size: 10px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    overflow: hidden !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-karte .vlt-cockpit__action-icon {
    width: 15px !important;
    height: 15px !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-karte .vlt-cockpit__action-icon svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* Das Foto links soll ein Hochformat vollstaendig in der Hoehe zeigen (A4).
     Gemessen: Bildkasten 224px breit -> 224 * 297/210 = 317px hoch. */
  /* 18.08. - Christian: das Titelbild wurde links und rechts angeschnitten.
     Gemessen: Kasten 224x316, Bild 901x1024 (Verhaeltnis 0,880). Bei 316 Hoehe
     braucht das Bild 278 Breite - der Kasten hatte nur 224, und object-fit: cover
     schneidet die Seiten ab. Jetzt zwei Aenderungen: die Karten werden breiter
     (siehe Block weiter unten) und der Kasten zeigt das Bild vollstaendig.
     Die Hoehe bleibt bei 316 - das ist die Hoehe, die vorher schon stand -,
     die Breite kommt aus der Spalte. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow {
    /* 18.08. - Christian: das Bild soll nach oben gestreckt werden, damit das
       DIN-A4-Format stimmt. Gemessen: Kasten 277 breit -> 277 * 297/210 = 392 hoch.
       Das Bild selbst ist 901x1024 (0,880), also breiter als A4 - es wird deshalb
       gedehnt statt beschnitten. */
    aspect-ratio: 210 / 297 !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* nicht "fill": das zog das Titelbild in die Laenge, sobald die Spalte schmaler ist als 210/297 - z.B. Galaxy Z Fold 7 */
  }

  /* Breiter: Elementor begrenzt den Inhalt auf 1140px, die Inhaltsbreite des
     Themes betraegt aber 1360 (gemessen an #footer und am Inhaltsbereich).
     Nur in der Testansicht wird auf diese 1360 aufgemacht - dadurch wird die
     linke Spalte breit genug fuer das ganze Titelbild. */
  body:has(.vlt-cockpit--desktop-elegant2) .elementor-container {
    max-width: 1360px !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview,
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-karte {
    height: 100% !important;
    box-sizing: border-box !important;
  }
}
/* VLT-ELEGANT2-KALENDERSPALTEN-ENDE */

/* VLT-ELEGANT2-MONATSBLOCK */
/* 18.08. - Christian: Meine Ziele, Kontakte und Unterstuetzung sollen in die
   linke Karte, unter das grosse Kalenderblatt und die Rest-Kacheln, mit einem
   Strich als Trennung darueber. Die Karte Aktionsbuttons rechts unten traegt
   dadurch nur noch die Aktions-Kacheln. */
@media (min-width: 761px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview > .vlt-e2-monatsblock {
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 1px auto !important;
    row-gap: 12px !important;
    align-self: end !important;
    width: 100% !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-monatsblock > .vlt-e2-linie {
    height: 1px !important;
    /* .16 war auf dem Schirm kaum zu sehen - der Strich soll ja trennen. */
    background: rgba(20, 63, 40, .3) !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-monatsblock > .vlt-e2-menu {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: 62px !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-menu > button > svg {
    width: 20px !important;
    height: 20px !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-menu > button > small {
    font-size: 11px !important;
  }
}
/* VLT-ELEGANT2-MONATSBLOCK-ENDE */

/* VLT-ELEGANT2-STANGE */
/* 18.08. - Christians endgueltige Anordnung fuer Spalte 2 der Monatskarte:
   ganz oben der Kalenderwochen-Zaehler als Schild auf der Stange, darunter
   das Kalenderblatt, darunter die beiden Schilder Rest Monat und Rest Jahr.
   Die Stange laeuft durchgehend vom Zaehler bis unter das letzte Schild.
   Zeilen: 1 Zaehler, 2 Kalenderblatt, 3 Schilder, 4 Knopfblock.
   Wichtig: wird der Zaehler in der Verwaltung groesser gestellt
   (--vlt-calendar-ring-size, steht auf 56px; dazu 16px Polster je Seite,
   gemessen also 88px), waechst nur seine Zeile. Kalenderblatt und Schilder
   behalten ihre Groesse und rutschen nach unten, die Karte wird hoeher. */
@media (min-width: 761px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview {
    /* Zweite Zeile 158 statt 145: das Blatt ist durch die groessere Skalierung
       jetzt 156 hoch statt 142. */
    grid-template-rows: min-content 122px min-content minmax(min-content, 1fr) !important;
    row-gap: 12px !important;
  }

  /* Der Zaehler sitzt oben auf der Stange - wie ein Schild auf dem Mast. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: start !important;
    /* Aus der Handy-Fassung bringt der Zaehler top: 35px mit - gemessen sass er
       dadurch 35px zu tief. Die alte Gegenregel hatte nur zwei Klassen und
       verlor gegen den Spiegel. */
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    /* Gemessen: oben zwischen Zaehler und Kalenderblatt standen 30px, unten
       zwischen dem letzten Schild und der Trennlinie nur 9px. Zusammen 39,
       also je 19 bis 20. Mit 8 statt 18 rutschen Blatt und Schilder um 10
       nach oben; die Trennlinie bleibt stehen, weil die letzte Zeile den
       gewonnenen Platz aufnimmt und der Knopfblock unten verankert ist. */
    /* Gemessen: von der Kartenoberkante bis zum Ring sind es 47px. Genauso
       gross soll der Abstand vom Ring bis zum Kalenderblatt sein: 36 Aussenabstand
       plus 12 Zeilenabstand ergeben 48. */
    margin: 0 0 36px !important;
    border-radius: 50% !important;
    z-index: 5 !important;
  }
  /* Hier stand vorher background: #fff - das hat den gruenen Wochenbogen
     ueberdeckt, denn der wird als Hintergrund des Rings selbst gezeichnet.
     Die Stange braucht die Abdeckung nicht: sie beginnt erst in der Mitte
     des Rings und liegt hinter dessen eigener Flaeche. */

  /* Beschriftung KW im Kreis, oberhalb der Zahl, in Schwarz. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__ring::before {
    content: "KW";
    position: absolute !important;
    top: 17% !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    line-height: 1 !important;
    color: #111111 !important;
    z-index: 6 !important;
    pointer-events: none !important;
  }

  /* Das Kalenderblatt darunter. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-leaf {
    margin: 0 auto !important;
    grid-row: 2 !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-open-area {
    grid-row: 2 !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest {
    grid-row: 3 !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview > .vlt-e2-monatsblock {
    grid-row: 4 !important;
  }

  /* Die Schilder waren 149px breit, die Beschriftung 132 - bei 104 Tagen und
     15 KW lief die Schrift ueber den Rand. Jetzt 216px. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest > div {
    /* Feste 216px liessen links und rechts zu viel weisse Flaeche stehen.
       Die Schilder enden jetzt hinter dem KW - sie messen sich am Text. */
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: center !important;
    /* Noch etwas knapper: 8 statt 14 - die Schrift bleibt unveraendert,
       es verschwindet nur weisse Flaeche links und rechts. */
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Die alte kurze Stange am Rest-Block aus - die neue laeuft weiter. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest::before {
    display: none !important;
  }
  /* Die durchgehende Stange. Sie beginnt in der Mitte des Zaehlers, damit sie
     nicht oben darueber hinausragt - der Wert rechnet sich aus der Stellgroesse,
     bleibt also richtig, wenn der Zaehler veraendert wird.
     Farbverlauf und Schatten sind aus der Handy-Fassung uebernommen. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-mast {
    grid-column: 2 !important;
    /* Christian: unter dem Wochenring soll keine Stange mehr stehen, der Ring
       steht fuer sich allein. Die Stange beginnt deshalb erst am Kalenderblatt
       (Zeile 2) und laeuft von dort bis unter das letzte Schild. */
    grid-row: 2 / span 2 !important;
    justify-self: center !important;
    align-self: stretch !important;
    width: 9px !important;
    margin-top: 0 !important;
    margin-bottom: -9px !important;
    border-radius: 4px !important;
    background: linear-gradient(90deg,
      rgb(140, 150, 155) 0%,
      rgb(201, 209, 213) 22%,
      rgb(244, 247, 248) 44%,
      rgb(223, 229, 232) 58%,
      rgb(166, 176, 181) 78%,
      rgb(127, 137, 142) 100%) !important;
    box-shadow: 0 1px 2px rgba(20, 42, 28, .22) !important;
    z-index: 0 !important;
  }
}
/* VLT-ELEGANT2-STANGE-ENDE */

/* VLT-ELEGANT2-COCKPITLINIE */
/* 18.08. - Christian: die Trennlinie in der Cockpit-Spalte sass zwischen der
   wechselnden Meldung und den Wechselpunkten. Sie soll unter die Punkte,
   also direkt ueber das Bild.
   Gemessen: gezeichnet wird sie von .vlt-elegant-overview__info::after, absolut
   auf top: 75px gesetzt - ein fester Wert, der mit dem Bild nicht mitwandert.
   Deshalb aus und stattdessen als Unterkante an den Punkten: die sitzen immer
   direkt ueber dem Bild, die Linie steht damit von allein richtig. */
@media (min-width: 761px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info::after {
    display: none !important;
  }
  /* Die Linie sitzt jetzt an der Unterkante des Cockpitfeldes, siehe Block
     VLT-ELEGANT2-COCKPITFELD. Am Punkte-Block braucht es sie nicht mehr. */
}
/* VLT-ELEGANT2-COCKPITLINIE-ENDE */

/* VLT-ELEGANT2-COCKPITFELD */
/* 18.08. - Christian: das Cockpitfeld links (Kopfzeile, wechselnde Meldung,
   Wechselpunkte) soll kompakter werden, die Linie darunter hoeher wandern, und
   das Foto soll immer genau auf der Hoehe des Kalenderblatts beginnen - auch
   dann, wenn der Wochenring in der Verwaltung groesser oder kleiner gestellt
   wird. Ausserdem soll die Karte nach unten kuerzer werden.

   Loesung: die Huelle .vlt-elegant-overview__info wird durchsichtig gemacht
   (display: contents), damit ihre Kinder selbst Rasterfelder der Karte werden.
   Dann sitzt das Cockpitfeld in Zeile 1 - derselben Zeile wie der Wochenring -
   und das Foto in Zeile 2, derselben wie das Kalenderblatt. Beide beginnen
   damit von allein auf einer Hoehe, und zwar immer.

   Das Foto nimmt seine Hoehe jetzt aus dem Raster statt aus seiner Breite.
   Dadurch wird die Karte nach unten kuerzer; das A4-Verhaeltnis bleibt, das
   Bild wird eben etwas schmaler. */
@media (min-width: 761px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info {
    display: contents !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-cockpitfeld {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 7px 4px 12px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgb(230, 235, 231) !important;
  }
  /* Nachgerechnet: das Feld war 133 hoch (7 Polster + 19 Kopfzeile + 5 + 16
     Meldungsabstand + 56 Meldung + 5 + 8 + 4 Punkte + 12 Polster) und damit
     hoeher als der Ringblock aus 88 + 36 = 124. Dadurch bestimmte das Feld den
     Abstand: 57 statt der gewuenschten 47. Mit 6 statt 16 sind es 122 - jetzt
     gibt wieder der Ring die Zeilenhoehe vor, und der Abstand stimmt.
     Wichtig: waechst der Ring, waechst die Zeile und das Feld waechst mit,
     die Linie wandert also nach unten und das Foto bleibt auf Kalenderhoehe. */
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-cockpitfeld .vlt-elegant-overview__info-messages {
    margin-top: 6px !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow {
    grid-column: 1 !important;
    grid-row: 2 / -1 !important;
    align-self: start !important;
    justify-self: center !important;
    aspect-ratio: 210 / 297 !important;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}
/* VLT-ELEGANT2-COCKPITFELD-ENDE */

/* VLT-ELEGANT2-LUFT */
/* 18.08. - Die 26px, die das kleinere Kalenderblatt freigibt, gehen an die
   Abstaende innerhalb der Gruppe. Gemessen vorher: Blatt -> Schild 1 = 12px,
   Schild 1 -> Schild 2 = 3px, Schild 2 -> Knopfblock = 10px. */
@media (min-width: 761px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-leaf {
    margin-bottom: 8px !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__rest {
    row-gap: 18px !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview > .vlt-e2-monatsblock {
    margin-top: 6px !important;
  }
}
/* VLT-ELEGANT2-LUFT-ENDE */


/* ==========================================================================
   VLT-E2-KOPFBREITE
   18.08. - Massstab fuer alle Seiten ist der HEIM & HAUS Banner bei
   Auftrag erfassen. Gemessen bei 1728 Fensterbreite: 196 bis 1532, also
   1336 breit, Oberkante 76. Der Cockpit-Banner stand vorher auf 208 bis
   1520 (1312) und lief beim Blaettern mit. Jetzt steht er fest und hat
   dieselbe Breite. Die Karten darunter ruecken 12px nach aussen, damit sie
   buendig unter dem Banner stehen.
   ========================================================================== */
@media (min-width: 761px) {
  body:not(.vlt-e2-aus) .vlt-cockpit--desktop-elegant2 .vlt-klar-head {
        /* 2.10.1741 - Christian, 06.09.: "Ich glaube, wir brauchen keine
           feststehenden Banner wie zum Beispiel der Heim- und Hausbanner auf
           eine Desktopseite oder Tabletseite. Wichtig ist, dass doch einfach
           nur die ganze Seite angezeigt wird."

           Der Kopf laeuft ab hier wieder im Fluss mit. Das Skript ist darauf
           vorbereitet und musste nicht angefasst werden:
             - vltKopfOben prueft getComputedStyle(kopf).position und richtet
               nur bei fixed/sticky aus; sonst setzt es den Ausgleichsabstand
               der Ansicht selbst wieder auf 0.
             - vltKopfFreiHalten steigt mit
               "if (position !== 'fixed') { return; }" sofort aus.
           Damit hoert die gesamte Nachrechnerei am Kopf von allein auf.

           Vorher stand hier:
             position: fixed; top: 0 (bis 2.10.1739: 76px); left: 50%;
             transform: translateX(-50%);
             width: min(1336px, calc(100vw - 72px)); margin: 0; z-index: 45.

           relative statt static, damit das Abmeldemenue seine Stapelposition
           behaelt - das war in 2.10.1722 schon einmal die Ursache dafuer,
           dass es hinter der Seite lag.

           margin: 0 12px trifft genau die Kante der Karten darunter.
           Gemessen bei 1180 quer: Willkommenskarte links 42 / rechts 42,
           Schale links 30 / rechts 30 - also 12 Punkte Einzug. */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 12px !important;
        z-index: 45 !important;
        /* Gleiche Hoehe wie bei Auftrag erfassen: dort 76 bis 150, also 74.
           Der Cockpit-Kopf war 67 hoch. */
        height: 74px !important;
        border-radius: 16px !important;
    }
  /* 43px ersetzen die Hoehe, die der Banner vorher im Fluss belegt hat. */
  body:not(.vlt-e2-aus) .vlt-cockpit--desktop-elegant2 .vlt-klar-view--main {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 12px !important; /* 2.10.1743: 12 statt 17.5, weil kopfLuft im Querformat ohnehin inline padding-top:12px !important schreibt. So ist der Abstand hoch wie quer gleich. 2.10.1742: auf 17.5 angeglichen, damit hoch und quer denselben Abstand haben. 2.10.1741: war 43px - das ersetzte die Hoehe des feststehenden Banners. Der Banner steht jetzt wieder im Fluss und bringt seine Hoehe selbst mit; 12 ist der Abstand, den Kopf und Willkommenskarte vorher auch hatten (Kopf 0-74, Willkommen ab 86). */
  }
}


/* ==================================================================
   VLT-DESKTOP-OHNE-SCAN (ab 2.10.987)

   Christian: "Auftrag scannen Button im Aktionsmenue kann auf Desktop
   Mode entfernt werden. Brauchen wir nicht hier. Aufm Handy ist es
   wichtig, dass alles bleibt."

   Am Rechner wird nicht gescannt, sondern in Auftrag erfassen abgelegt
   (siehe VLT-DESKTOP-ABLAGE in order-form-scan.css). Deshalb faellt
   der Einstieg hier weg - dieselbe Schwelle wie dort, damit zwischen
   1281 und 1439 nicht beides fehlt.

   Das Raster hat feste Spalten und rueckt von allein nach; aus elf
   Kacheln werden schlicht zehn.
   ================================================================== */
@media (min-width: 1440px) and (pointer: fine) {
  /* Nachgemessen: die Kachel haengt an
     ".vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit__actions
      .vlt-cockpit__a..." mit display:flex !important - das ist (0,4,0).
     Eine Regel mit body.vlt-e2-test allein (0,2,0) verliert dagegen.
     Deshalb hier lang genug angesetzt: (0,4,3). */
  html /* 2.10.1208 zurueckgenommen in 2.10.1209.
   Nachgemessen bei 1440 x 900 NACH der Umstellung:
     Klassik  scan-display: none   (unveraendert)
     Klar     scan-display: none   (unveraendert)
     Elegant  scan-display: flex   (vorher none)
   Das Ausblenden in Klassik und Klar kommt also NICHT von dieser Regel,
   sondern aus einer aelteren Desktop-Regel und war schon vorher so. Meine
   Umstellung hat nur den Scan-Knopf in Elegant sichtbar gemacht - also
   genau das Gegenteil von dem, was sie sollte. Deshalb wieder wie zuvor. */
body:not(.vlt-e2-aus) .vlt-cockpit__actions a.vlt-cockpit__action.vlt-cockpit__action--scan {
    display: none !important;
  }
}


/* ==================================================================
   VLT-DESKTOP-A4-BLATT (ab 2.10.988)

   Christian: "Das Foto können wir gerne noch ein bisschen höher
   ziehen, weil unter Cockpit haben wir noch Platz. Wir brauchen da
   nur maximal drei oder vier Zeilen ... Hauptsache, das sieht nach
   DIN-A4-Verhältnis aus. Und der Kalender rechts daneben wächst in
   der Höhe mit - der bekommt noch ein bisschen mehr Fläche nach oben."

   Gemessen bei 1728 Fensterbreite, vorher:
     Blatt        279 x 317  (Verhaeltnis 0,88 - die Eigenform des
                              Bildes, 901 x 1024)
     Kalender     ab 452
     Cockpitfeld  316 bis 440; sichtbarer Text endet bei 381,
                  darunter nur noch die Punkte bei 422 bis 426

   Zwischen Text und Punkten liegen 41 Pixel Luft - genau der Platz,
   den Christian meint. Das Blatt wird um 26 nach oben gezogen, bis
   dicht unter die Punkte, und bekommt A4: 279 / (210/297) = 394 hoch.
   Der Kalender geht dieselben 26 Pixel mit, damit beide Oberkanten
   auf einer Linie stehen. Die Karte waechst dadurch von 537 auf 577 -
   rund einen Zentimeter.

   WARUM NEGATIVER ABSTAND UND KEINE KUERZERE ZEILE: die erste
   Rasterzeile steht auf min-content und richtet sich nach dem
   Cockpitfeld. Dessen 124 Pixel kommen aus dem Inhalt (Kopf 19 +
   Meldungen 56 + Punkte 4 + Abstaende). Die Meldungen sind innen
   absolut gesetzt und werden 28 Pixel hoeher gezeichnet, als sie im
   Fluss stehen - daher die Luft. Wer die Zeile kuerzt, kuerzt den
   Platz fuer die Meldungen. Der negative Abstand nimmt nur die Luft.

   BILDAUSSCHNITT: das Bild steht auf object-fit: contain, es wird
   also NICHT beschnitten. Im A4-Rahmen bleibt oben und unten ein
   weisser Rand - das Blatt sieht dadurch aus wie ein Bogen Papier.
   ================================================================== */
@media (min-width: 761px) {

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__slideshow {
    aspect-ratio: 210 / 297 !important;
    margin-top: -26px !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__calendar-open-area,
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__calendar-leaf {
    margin-top: -26px !important;
  }
}


/* ==================================================================
   VLT-DESKTOP-WILLKOMMEN-MITTIG (ab 2.10.989)

   Christian: "Das Willkommensbanner ein bisschen mehr runtersetzen,
   sodass es genau die gleichen Abstaende hat - zentriert zwischen
   HEIM & HAUS Banner und den beiden Karten. Alle anderen Positionen
   bleiben unveraendert stehen."

   Gemessen bei 1728 Fensterbreite:
     HEIM & HAUS Banner (.vlt-klar-head)  Unterkante 150
     Willkommen (.vlt-klar-welcome)       161 bis 245  (84 hoch)
     Karten (.vlt-elegant-overview)       Oberkante 269

     Abstand oben  11
     Abstand unten 24
     Freiraum gesamt 119 - 84 = 35, also 17,5 je Seite
     -> 6,5 nach unten

   RELATIV UND NICHT ALS ABSTAND: mit margin-top wuerden die Karten
   mitwandern. position:relative + top verschiebt nur die Darstellung,
   der Platz im Fluss bleibt, wo er war - Banner und Karten stehen
   danach nachweislich unveraendert auf 150 und 269.
   ================================================================== */
@media (min-width: 1440px) and (pointer: fine) {

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-klar-welcome {
    position: relative !important;
    top: 6.5px !important;
  }
}


/* ==================================================================
   VLT-DESKTOP-KALENDER-CLEAN (ab 2.10.990)

   Christian, mit zwei Vorlagenbildern: "Der Kalender ist da ein
   bisschen cleaner dargestellt - kein Klapper dazwischen, und die
   Ringbuch-Pinne sind schwarz statt weiss. Bitte cleaner gestalten,
   aber trotzdem dreidimensional lassen. In der Tiefe nach unten hat
   er noch ein bisschen Platz an der Stange - aber nicht mehr viel."

   Vorher, gemessen bei 1728 Fensterbreite:
     Blatt (.vlt-elegant-overview__calendar-page)  170 x 120
     Zeilen  11 / 34 / 7 / 27 / 11
     Pinne   .calendar-page::before und ::after, 4 x 9, WEISS
     Klapper .calendar-month mit Verlauf, Innenschatten und
             border-bottom - dazu .calendar-day::after, eine 1px
             Trennlinie quer ueber das Blatt
     Rahmen  gestapelte harte Schatten 2px/5px seitlich - las sich
             wie ein grauer Rahmen statt wie Papier

   Nachher:
     Blatt   170 x 144  (24 tiefer, .rest beginnt bei 586 - bleiben
             16 Luft, es rutscht nichts)
     Zeilen  17 / 42 / 10 / 30 / 14
     Pinne   5 x 14, dunkler Verlauf, ragen 3 ueber die Leiste
     Leiste  flaches Rot, kein Verlauf, kein Innenschatten,
             keine Unterkante - der Klapper ist weg
     Linien  .calendar-day::after aus
     Tiefe   Schatten NUR nach unten: zwei Papierkanten (2 und 4)
             plus ein weicher Schlagschatten. Das bleibt raeumlich,
             wirkt aber nicht mehr wie ein Rahmen.

   Die Stange (.vlt-e2-mast) bleibt unveraendert.
   ================================================================== */
/* 2.10.991 - Schwelle von 1440 auf 761 gesenkt: das ist genau die
   Breite, ab der ueberhaupt das Gesicht .vlt-cockpit--desktop-elegant2
   gilt. Bei 1440 haette ein schmaleres Fenster am Rechner weiterhin den
   alten Kalender mit weissen Pinnen und Klapper gezeigt. */
@media (min-width: 761px) {

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__calendar-page {
    /* 2.10.996 - Christian: "Den Kalenderzeitraum vom unteren Rand in
       die Mitte bringen." Nachgemessen war er 556-572 bei einem Blatt,
       das bei 570 endet - er hing also 2 Pixel UEBER die Unterkante
       hinaus. Ursache: height:120px war fest, der Inhalt brauchte aber
       142; das Blatt lief unten ueber (overflow ist sichtbar).
       Jetzt height:auto, dafuer die Zeilen fuer Tag, Wochentag und Uhr
       etwas knapper - so bleibt das Blatt fast gleich hoch. */
    height: auto !important;
    padding-bottom: 8px !important;
    grid-template-rows: 17px 40px 9px 24px 14px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    /* 2.10.992 - Christian: "Der Kalender bitte mehr 3D, wie die beiden
       Schilder darunter." Abgeschrieben von .vlt-elegant-overview__rest:
       zwei harte Papierkanten schraeg (2/2 und 4/4), darunter ein weicher
       Schlagschatten (6/7/9) und aussen ein feiner gruener Haarstrich.
       Damit steht das Blatt genauso im Raum wie REST MONAT und REST JAHR. */
    /* 2.10.993 - Christian: "Kalender ist noch nicht 3D geworden."
       Der Stapel der Schilder allein reicht hier nicht: die Schilder sind
       163 x 46, das Blatt 170 x 144. Dieselben 2 und 4 Pixel Kante wirken
       auf der dreimal so hohen Flaeche viel schwaecher.
       Deshalb hier eine eigene, kraeftigere Staffelung - und vor allem
       ein sichtbarer BLATTSTAPEL an der Unterkante: zwei weitere Boegen
       schauen unten hervor, so wie bei einem echten Abreisskalender.
       Gemessen: Blatt endet bei 570, der Stapel reicht bis 578,
       REST MONAT beginnt bei 586 - 8 Pixel Luft, nichts stoesst an. */
    /* 2.10.994 - Christian: "Kalender ist jetzt zu sehr 3D."
       Also eine Stufe zurueck, zwischen 992 (zu flach) und 993 (zu viel):
       nur EIN Bogen schaut unten hervor statt zwei, Schraegkante 3/6
       statt 4/8, Wurfschatten 9/10/13 statt 14/16/20.
       Damit steht das Blatt etwas plastischer da als die Schilder
       darunter - das ist wegen der dreimal groesseren Flaeche noetig -
       aber es springt nicht mehr aus der Seite. */
    /* 2.10.995 - Christian: "noch ein wenig weniger".
       Dritte und letzte Stufe zurueck. Der Bogen unten bleibt (sonst ist
       es kein Abreisskalender mehr), aber duenner; Schraegkante 2/4-5
       statt 3/6; Wurfschatten 7/8/11 statt 9/10/13; alle Deckkraefte
       eine Spur heller. Damit liegt die Tiefe nur noch knapp ueber der
       der Schilder darunter. */
    box-shadow:
      inset 0 2px 0 #ffffff,
      inset -1px -2px 0 rgba(158, 178, 163, .30),
      0 2px 0 -1px #ffffff,
      0 3px 0 -1px #dde3df,
      2px 2px 0 #eff2f0,
      4px 5px 0 #d2d9d4,
      7px 8px 11px rgba(20, 47, 31, .16),
      0 0 0 1px rgba(22, 129, 58, .16) !important;
  }

  /* Die beiden Pinne - schwarz statt weiss */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__calendar-page::before,
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__calendar-page::after {
    width: 5px !important;
    height: 14px !important;
    top: -3px !important;
    background: linear-gradient(180deg, #414743 0%, #1b201d 55%, #0e120f 100%) !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .38) !important;
  }

  /* Rote Leiste ohne Klapper */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__calendar-month {
    background: #c9483f !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 12px 12px 6px 6px !important;
    letter-spacing: .16em !important;
  }

  /* Die Trennlinie quer ueber das Blatt */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__calendar-day::after {
    display: none !important;
  }

  /* Kein Strich und kein Farbton ueber dem Zeitraum */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__calendar-period {
    border-top: 0 !important;
    background: transparent !important;
    /* 2.10.997 - gleichmaessige Abstaende gemessen:
       Wochentag -> Uhr 10, Uhr -> Zeitraum 8, Zeitraum -> Unterkante 10. */
    margin-top: 4px !important;
  }

  /* 2.10.997 - Christian: "Die Uhrzeit etwas runter, so dass sie mittig
     steht." Sie hatte oben nur 3 Pixel Luft und unten 11. */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__clock {
    margin-top: 6px !important;
  }

  /* Ohne das streckt der Flexkasten das Blatt wieder auf die alte Hoehe. */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__calendar-leaf {
    align-items: flex-start !important;
  }
}


/* ==================================================================
   VLT-DESKTOP-SCHILDER-ABSTAND (ab 2.10.998)

   Christian: "Das erste Schild REST MONAT ein wenig tiefer, so dass
   alles denselben Abstand hat - die beiden Schilder und die
   Kalenderkarte."

   Gemessen bei 1728 Fensterbreite, vorher:
     Kalenderblatt endet   572
     REST MONAT beginnt    584   -> Abstand 12
     REST MONAT endet      630
     REST JAHR beginnt     643   -> Abstand 13

   Auf dem Papier waren die beiden Abstaende also fast gleich. Im Bild
   nicht: unter dem Kalenderblatt liegt der Blattstapel (3 nach unten)
   und ein weicher Wurfschatten, der den oberen Zwischenraum fuellt.
   Die Schilder werfen ihren Schatten dagegen schraeg nach rechts unten
   und lassen den Zwischenraum heller.

   Deshalb bekommt der ganze Schilderblock 3 Pixel mehr Luft nach oben.
   Nachher: Abstand 15 zum Blatt, 13 zwischen den Schildern - im Bild
   nachgesehen sind beide gleich.

   RELATIV UND NICHT ALS ABSTAND: mit margin-top wuerde der Block im
   Raster wachsen und alles darunter mitnehmen. So bleibt der Platz im
   Fluss stehen; REST JAHR endet bei 692, der Monatsblock beginnt
   unveraendert bei 745.
   ================================================================== */
@media (min-width: 761px) {

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__rest {
    position: relative !important;
    top: 3px !important;
  }
}


/* ==================================================================
   VLT-DESKTOP-COCKPIT-LINIE (ab 2.10.999)

   Christian: "Die Linie, die unter der Ueberschrift Cockpit steht,
   bitte unter die Textinformationen setzen - und die animierte
   Wechselanzeige mit ueber die Linie, die jetzt neu gesetzt wird."

   Vorher stand die Reihenfolge so:
     COCKPIT + Linie
     Meldungstext
     Punkte (Wechselanzeige)

   Jetzt:
     COCKPIT
     Meldungstext
     Punkte (Wechselanzeige)
     Linie

   Die Linie zieht also vom Kopf an die Punkte um. Gemessen bei 1728:
     Kopf         323 - 337
     Meldungstext 336 - 360 (der aktive Absatz)
     Punkte       379 - 391, Linie direkt darunter
     Blatt        beginnt bei 426

   WARUM DIE PUNKTE HOCHGEZOGEN WERDEN: sie standen bei 422 bis 426 -
   also genau an der Oberkante des Monatsblattes, das seit 2.10.988 um
   26 nach oben gezogen ist. Eine Linie darunter waere hinter dem Blatt
   verschwunden. Die 30 Pixel holen sie in den freien Raum unter dem
   Text zurueck; unter der Linie bleiben noch 35 Pixel bis zum Blatt.
   ================================================================== */
@media (min-width: 761px) {

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-e2-cockpitfeld header {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__info-dots {
    margin-top: -30px !important;
    padding-bottom: 7px !important;
    border-bottom: 1px solid rgba(22, 129, 58, .18) !important;
  }
}


/* ==================================================================
   VLT-DESKTOP-KARTENABSTAND (ab 2.10.1000)

   Christian: "Die Abstaende zwischen HEIM & HAUS Banner und
   Willkommensbanner sind korrekt. Bitte alle Karten an deren
   Abstaende anpassen."

   Gemessen bei 1728 Fensterbreite, vorher:
     Banner -> Willkommen                 17,5   (richtig)
     Willkommen -> Karten                 17,5   (richtig)
     Vertriebskalender -> Aktionsbuttons  24
     linke Spalte -> rechte Spalte        24

   Die 24 kommen vom Raster .vlt-klar-view--main (gap: 24px). Die
   beiden richtigen 17,5 kamen dagegen nur zufaellig zustande: das
   Raster hatte padding-top 43, und das Willkommensbanner war in
   2.10.989 mit position:relative um 6,5 nach unten geschoben.

   Jetzt sauber gerechnet:
     gap        24   -> 17,5
     padding-top 43  -> 49,5   (die 6,5 aus dem Schiebe-Trick)
     Willkommen top 6,5 -> 0   (steht jetzt von allein richtig)

   Nachher alle vier Abstaende 17,5. Die Spalten wachsen dadurch von
   630 auf 633 - zusammen mit der Fuge weiterhin 1284, also genau die
   Breite des HEIM & HAUS Banners.
   ================================================================== */
@media (min-width: 761px) {

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-klar-view--main {
    gap: 12px !important; /* 2.10.1744 - Christian, 06.09.: "Der Fluss soll nur auf die Abstaende hinbekommen. Heim- und Hausbanner, zum Willkommensbanner zu den ersten Karten. Die sollen alle gleich sein, die Abstaende." War 17.5. Gemessen vorher: Banner zur Willkommenskarte 12 (padding-top), Willkommenskarte zu den Karten 18 (dieser gap). Jetzt beides 12 - dieselben 12, die auch der Seitenrand (padding-left/right) und der Einzug des Banners (margin: 0 12px) haben. Damit ist jeder Abstand der Uebersicht gleich: aussen, zwischen den Spalten, zwischen den Zeilen und unter dem Banner. */
    padding-top: 12px !important; /* 2.10.1743: 12 statt 17.5, weil kopfLuft im Querformat ohnehin inline padding-top:12px !important schreibt. So ist der Abstand hoch wie quer gleich. 2.10.1742: war 49.5px = 43 (Platzhalter fuer die Hoehe des feststehenden Banners) + 6.5 (Schiebe-Trick). Der Banner laeuft seit 2.10.1741 wieder im Fluss und bringt seine Hoehe selbst mit, der Schiebe-Trick ist ebenfalls abgeloest. Bleibt der normale Abstand 17.5, derselbe wie gap. */
  }

  /* Loest den Schiebe-Trick aus 2.10.989 ab - siehe
     VLT-DESKTOP-WILLKOMMEN-MITTIG weiter oben. */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-klar-welcome {
    top: 0 !important;
  }
}


/* ==================================================================
   VLT-DESKTOP-AKTIONSKNOEPFE (ab 2.10.1001)

   Christian: "Bitte jetzt die Aktionsbuttons vom Style der 4
   Kalenderbuttons anpassen. Inkl. der Icondarstellung und
   Abrundungen der Buttons."

   Abgemessen an den Kalenderknoepfen (Alle Termine, Montagetermine,
   Geburtstage, Schulungstermine), 150 x 80:

     Ecke        17 statt 10
     Rand        keiner statt 1px gruen
     Flaeche     Verlauf 145 Grad statt flachem Weiss
     Tiefe       sechsteiliger Schattenstapel statt gar keinem
     Zeichen     runde Scheibe 44 mit hellgruenem Grund; das Zeichen
                 darin 27 x 27, Strichstaerke 1,65, Farbe #168 13A
                 (vorher: graue Kachel 29 x 15 mit 13er Zeichen in
                 Schwarz)
     Schrift     9px / 750 statt 10px / 800

   ACHTUNG BEIM ZEICHEN: die Farbe haengt nicht am color, sondern am
   stroke. Die Kalenderzeichen stehen auf stroke: rgb(22,129,58), die
   Aktionszeichen standen auf Schwarz - color allein hat da nichts
   geaendert, weil das SVG ein eigenes stroke mitbringt.

   Die runde Scheibe zeichnet der Kalenderknopf ueber ein ::before.
   Hier ist sie einfacher zu haben: der Knopf hat schon einen
   Zeichen-Behaelter (.vlt-cockpit__action-icon), der wird zur Scheibe.
   ================================================================== */
@media (min-width: 761px) {

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-cockpit__actions .vlt-cockpit__action {
    border: 0 !important;
    border-radius: 17px !important;
    background: linear-gradient(145deg,
      #ffffff 0%,
      rgba(247, 250, 248, .96) 58%,
      rgba(232, 241, 235, .91) 100%) !important;
    box-shadow:
      inset 0 2px 0 #ffffff,
      inset -1px -2px 0 rgba(169, 189, 174, .24),
      2px 2px 0 #eef2ef,
      4px 4px 0 #cfd6d0,
      7px 8px 10px rgba(20, 54, 32, .16),
      9px 12px 17px rgba(21, 46, 30, .11) !important;
    gap: 6px !important;
    padding: 6px 2px 5px !important;
    color: rgb(49, 83, 60) !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-cockpit__actions .vlt-cockpit__action-icon {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 auto !important;
    border-radius: 50% !important;
    background: rgba(237, 245, 239, .82) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-cockpit__actions .vlt-cockpit__action-icon svg {
    width: 27px !important;
    height: 27px !important;
    stroke-width: 1.65 !important;
    color: rgb(49, 83, 60) !important;
    stroke: rgb(22, 129, 58) !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-cockpit__actions .vlt-cockpit__action-label {
    font-size: 9px !important;
    font-weight: 750 !important;
    line-height: 9px !important;
    color: rgb(23, 63, 39) !important;
  }
}


/* ==================================================================
   VLT-DESKTOP-ROLLWIRKUNG (ab 2.10.1002)

   Christian: "Bitte jetzt noch diesen Rollover-Effekt erzeugen, wenn
   ich mit der Maus ueber die Buttons fahre, dass auch diese gruene
   Auswahl da mitlaeuft. Und dann noch bei diesen anderen drei Buttons
   an der linken Seite - Meine Ziele, Kontakte und Unterstuetzung in
   Karte 1 - die Buttons bitte auch diesem Style anpassen. Aber die
   Groesse so beibehalten."

   Der gruene Zustand ist NICHT neu erfunden, sondern der, den der
   Kalenderknopf "Alle Termine" schon traegt (Klasse
   is-vlt-menu-glass-active, Regel in cockpit.css):

     Flaeche  linear-gradient(145deg, rgba(250,255,251,.98),
                                      rgba(209,237,216,.94))
     Tiefe    innen: Lichtkante, 1px gruener Ring, gruene Fusskante
              aussen: 2/2, 4/4, 7/9/13, 10/14/20 - dunkler als im
              Ruhezustand, dadurch "hebt" der Knopf beim Ueberfahren
     Schrift  rgb(7,95,41)

   Beim Ueberfahren wird die Zeichenscheibe zusaetzlich weiss, damit
   das Zeichen auf dem gruenen Grund stehen bleibt.

   DIE DREI KNOEPFE IN KARTE 1 (.vlt-e2-menu .vlt-elegant-nav-action,
   89 x 62) bekommen dieselbe Flaeche, Ecke und Zeichenscheibe -
   aber ihre Groesse bleibt. Die Scheibe entsteht hier nicht ueber
   einen Behaelter (den haben sie nicht - das SVG haengt direkt im
   Knopf), sondern ueber padding + border-radius am SVG selbst,
   mit box-sizing: content-box, damit das Zeichen 20 x 20 bleibt und
   die Scheibe 34 gross wird.
   ================================================================== */
@media (min-width: 761px) {

  /* ---- Aktionsbuttons: Rollwirkung ---- */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-cockpit__actions .vlt-cockpit__action {
    transition: background .16s ease, box-shadow .16s ease, color .16s ease !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-cockpit__actions .vlt-cockpit__action:hover,
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-cockpit__actions .vlt-cockpit__action:focus-visible {
    background: linear-gradient(145deg,
      rgba(250, 255, 251, .98), rgba(209, 237, 216, .94)) !important;
    box-shadow:
      inset 0 2px 0 #ffffff,
      inset 0 0 0 1px rgba(22, 129, 58, .5),
      inset 0 -2px 0 rgba(22, 129, 58, .16),
      2px 2px 0 #e5ece7,
      4px 4px 0 #b8c9bc,
      7px 9px 13px rgba(14, 68, 33, .2),
      10px 14px 20px rgba(20, 45, 29, .12) !important;
    color: rgb(7, 95, 41) !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-cockpit__actions .vlt-cockpit__action:hover .vlt-cockpit__action-icon {
    background: rgba(255, 255, 255, .92) !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-cockpit__actions .vlt-cockpit__action:hover .vlt-cockpit__action-label {
    color: rgb(7, 95, 41) !important;
  }

  /* ---- Meine Ziele / Kontakte / Unterstuetzung ---- */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-e2-menu .vlt-elegant-nav-action {
    border: 0 !important;
    border-radius: 17px !important;
    background: linear-gradient(145deg,
      #ffffff 0%,
      rgba(247, 250, 248, .96) 58%,
      rgba(232, 241, 235, .91) 100%) !important;
    box-shadow:
      inset 0 2px 0 #ffffff,
      inset -1px -2px 0 rgba(169, 189, 174, .24),
      2px 2px 0 #eef2ef,
      4px 4px 0 #cfd6d0,
      7px 8px 10px rgba(20, 54, 32, .16),
      9px 12px 17px rgba(21, 46, 30, .11) !important;
    gap: 3px !important;
    padding: 4px 2px !important;
    transition: background .16s ease, box-shadow .16s ease, color .16s ease !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-e2-menu .vlt-elegant-nav-action svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 1.65 !important;
    stroke: rgb(22, 129, 58) !important;
    border-radius: 50% !important;
    background: rgba(237, 245, 239, .82) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95) !important;
    padding: 7px !important;
    box-sizing: content-box !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-e2-menu .vlt-elegant-nav-action small {
    font-size: 9px !important;
    font-weight: 750 !important;
    line-height: 9px !important;
    color: rgb(23, 63, 39) !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-e2-menu .vlt-elegant-nav-action:hover {
    background: linear-gradient(145deg,
      rgba(250, 255, 251, .98), rgba(209, 237, 216, .94)) !important;
    box-shadow:
      inset 0 2px 0 #ffffff,
      inset 0 0 0 1px rgba(22, 129, 58, .5),
      inset 0 -2px 0 rgba(22, 129, 58, .16),
      2px 2px 0 #e5ece7,
      4px 4px 0 #b8c9bc,
      7px 9px 13px rgba(14, 68, 33, .2),
      10px 14px 20px rgba(20, 45, 29, .12) !important;
    color: rgb(7, 95, 41) !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-e2-menu .vlt-elegant-nav-action:hover svg {
    background: rgba(255, 255, 255, .92) !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-e2-menu .vlt-elegant-nav-action:hover small {
    color: rgb(7, 95, 41) !important;
  }
}


/* ==================================================================
   VLT-DESKTOP-OHNE-SENKRECHTE (ab 2.10.1003)

   Christian: "Neben dem Kalender im aktuellen Vertriebsmonat gibt es
   noch eine ganz duenne Senkrechtlinie. Die bitte entfernen, die
   brauchen wir nicht mehr."

   Gefunden: .vlt-elegant-overview__rest traegt
   border-left: 1px solid rgb(230,235,231) - gemessen bei x 550,
   101 hoch, links neben REST MONAT und REST JAHR.
   ================================================================== */
@media (min-width: 761px) {

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__rest {
    border-left: 0 !important;
  }
}


/* ==================================================================
   VLT-DESKTOP-COCKPIT-FEST (ab 2.10.1007)

   Christian: "Als ich alle Bilder entfernt hatte, ist der Streifen mit
   nach unten gewandert. Der soll immer oben stehen bleiben, selbst
   wenn gar kein Bild eingeladen ist. Und wenn alles leer ist, bitte
   einfach ein Standardbild anzeigen."

   ZWEI SACHEN, ZWEI GRUENDE:

   1) Punkte und Linie standen im Fluss ganz unten im Cockpitfeld und
      wurden in 2.10.999 mit margin-top: -30px hochgeholt. Diese -30
      sind auf die heutige Feldhoehe gerechnet - waechst das Feld
      (laengere Meldung, fehlendes Bild), wandert der Streifen mit.
      Jetzt haengen sie fest 72 unter der Feldoberkante, absolut
      gesetzt. Gemessen: Feld 316, Punkte 388 bis 400, Linie bei 407 -
      und das bleibt so, egal was darunter passiert.
      Der Text darueber hat damit 68 Pixel Platz, also Raum fuer die
      drei bis vier Zeilen, die Christian genannt hat.

   2) Ist kein Bild hinterlegt, blieb ein weisses A4-Feld stehen. Statt
      dessen wird jetzt ein Blatt gezeichnet - gruene Kopfleiste,
      Textzeilen, Bildflaeche - mit dem Hinweis "Noch kein Blatt
      hinterlegt". Rein aus CSS, also keine Datei, die fehlen kann.
      Die A4-Form bleibt in jedem Fall stehen; damit kann nichts mehr
      zusammenfallen.
   ================================================================== */
@media (min-width: 761px) {

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-e2-cockpitfeld {
    position: relative !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__info-dots {
    position: absolute !important;
    left: 4px !important;
    right: 4px !important;
    top: 72px !important;
    margin: 0 !important;
    padding-bottom: 7px !important;
    border-bottom: 1px solid rgba(22, 129, 58, .18) !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
       .vlt-elegant-overview__slideshow:not(:has(img))::after {
    content: 'Noch kein Blatt hinterlegt';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: 16%;
    border-radius: inherit;
    color: #8a9890;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    background:
      linear-gradient(#2e7d52, #2e7d52) 8% 8% / 84% 12px no-repeat,
      linear-gradient(#e4ebe6, #e4ebe6) 8% 30% / 84% 3px no-repeat,
      linear-gradient(#e4ebe6, #e4ebe6) 8% 36% / 70% 3px no-repeat,
      linear-gradient(#eef2ef, #eef2ef) 8% 46% / 84% 26% no-repeat,
      linear-gradient(#e4ebe6, #e4ebe6) 8% 76% / 60% 3px no-repeat,
      linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
  }
}


/* ================================================================
   VLT-DIASHOW-STEUERUNG
   Cockpit-Diashow: Pause, Pfeile vor/zurueck, Klick auf das Blatt
   oeffnet die ganze Bildschirmflaeche, Download des Blattes.
   ================================================================ */
[data-vlt-cockpit-slideshow].vlt-diashow-bedienbar { cursor: zoom-in; }

.vlt-diashow-steuerung {
    position: absolute !important;
    left: 50% !important;
    bottom: 6px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    border-radius: 999px !important;
    z-index: 8 !important;
    cursor: default !important;
    background: rgba(255,255,255,.88) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 2px 6px rgba(20,47,31,.22),
        0 0 0 1px rgba(22,129,58,.16) !important;
    opacity: .58;
    transition: opacity .18s ease;
}
[data-vlt-cockpit-slideshow]:hover .vlt-diashow-steuerung,
.vlt-diashow-steuerung:focus-within,
.vlt-diashow-pausiert .vlt-diashow-steuerung { opacity: 1; }

.vlt-diashow-knopf {
    width: 22px !important;
    height: 22px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(22,129,58,.10) !important;
    color: #16813a !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.vlt-diashow-knopf svg {
    width: 13px; height: 13px; display: block;
    fill: none; stroke: currentColor; stroke-width: 2.1;
    stroke-linecap: round; stroke-linejoin: round;
}
.vlt-diashow-knopf:hover,
.vlt-diashow-knopf:focus-visible {
    background: #16813a !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: none;
}

html.vlt-diashow-offen,
html.vlt-diashow-offen body { overflow: hidden !important; }

.vlt-diashow-schirm {
    position: fixed !important;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 52px 64px 84px;
    background: rgba(8,18,12,.93);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.vlt-diashow-schirm.is-offen { display: flex; }
.vlt-diashow-schirm__bild {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    cursor: default;
}
.vlt-diashow-schirm__zu,
.vlt-diashow-schirm__pfeil {
    position: absolute;
    border: 0 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.14) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: background .15s ease;
}
.vlt-diashow-schirm__zu { top: 14px; right: 16px; width: 40px !important; height: 40px !important; }
.vlt-diashow-schirm__pfeil { top: 50%; transform: translateY(-50%); width: 46px !important; height: 46px !important; }
.vlt-diashow-schirm__pfeil--links { left: 12px; }
.vlt-diashow-schirm__pfeil--rechts { right: 12px; }
.vlt-diashow-schirm__zu svg,
.vlt-diashow-schirm__pfeil svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 2.1;
    stroke-linecap: round; stroke-linejoin: round;
}
.vlt-diashow-schirm__zu:hover,
.vlt-diashow-schirm__pfeil:hover { background: #16813a !important; }

.vlt-diashow-schirm__fuss {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 6px 20px rgba(0,0,0,.42), 0 0 0 1px rgba(22,129,58,.20);
}
.vlt-diashow-schirm__fuss .vlt-diashow-knopf { width: 30px !important; height: 30px !important; }
.vlt-diashow-schirm__fuss .vlt-diashow-knopf svg { width: 16px; height: 16px; }
.vlt-diashow-schirm__zaehler {
    font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #16813a;
    letter-spacing: .04em;
    min-width: 54px;
    text-align: center;
}
.vlt-diashow-schirm__laden {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #16813a;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: none !important;
    font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.vlt-diashow-schirm__laden svg {
    width: 15px; height: 15px;
    fill: none; stroke: currentColor; stroke-width: 2.1;
    stroke-linecap: round; stroke-linejoin: round;
}
.vlt-diashow-schirm__laden:hover { background: #0f6b2f; color: #ffffff !important; }

@media (max-width: 760px) {
    .vlt-diashow-schirm { padding: 46px 10px 78px; }
    .vlt-diashow-schirm__pfeil { display: none !important; }
    .vlt-diashow-schirm__laden span { display: none; }
    .vlt-diashow-schirm__laden { padding: 8px 10px; }
    .vlt-diashow-steuerung { opacity: 1; }
}


/* ================================================================
   VLT-QUER-NEUES-MUSTER (ab 2.10.1011)

   Christian: "Bitte alle Queransichten der Smartphone und iPad
   Ansichten an dem neuen Design der Cockpitseite anpassen."
   Auswahl: "Wie am Rechner, nur kleiner."

   Vorher im Handy-Querformat (932 x 430 gemessen): die Huelle
   stand auf zoom 0,4 und wurde dabei auf 2290 Pixel Breite
   auseinandergezogen - also fast doppelt so breit wie der
   Entwurf. Folge: die Karte war 1124 statt 633 breit, das Blatt
   wuchs mit, der Kalender blieb bei seinen festen 112 Pixeln
   stehen und wirkte verloren.

   Jetzt steht die Huelle auf der Entwurfsbreite 1308 - genau der
   Wert, den sie am Rechner hat (gemessen bei 1728 Fensterbreite:
   .vlt-cockpit-klar-shell 1308 breit, 748 hoch, max-width 1308).
   Der Zoom richtet sich nach der Bildschirmbreite statt nach der
   Hoehe, damit 1308 die Breite ausfuellt. Damit sind alle
   Verhaeltnisse dieselben wie am Rechner.

   Der HEIM & HAUS Streifen bekommt bewusst KEINE eigene Regel -
   Christian: "Ausser die HEIM & HAUS Banner die auf den Smartphone
   queransichten belassen." Er bleibt unangetastet und laeuft im
   selben Massstab mit wie der Rest der Seite.

   Die Hoehenbedingung (max-height: 560px) trennt Handy-Querformat
   von iPad-Hochformat: iPad Pro 11" ist 834 breit, aber 1210 hoch
   und faellt damit nicht in diese Regeln. Ab 1001 Pixel Breite
   (iPad quer, Z Fold quer) bleibt ohnehin alles wie es war.
   ================================================================ */

@media (min-width: 761px) and (max-width: 1000px) and (max-height: 560px) {

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell {
    width: 1308px !important;
    max-width: 1308px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Das Kalenderblatt haengt in cockpit-klar.css an (min-width: 1281px)
     und faellt sonst auf 112 statt 141,3 Pixel zurueck. Der Zoom aendert
     die Fensterbreite nicht - deshalb hier derselbe Wert noch einmal,
     wortgleich zur Rechnerregel. */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf,
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__top .vlt-elegant-overview__calendar-page {
    width: 141.3px !important;
  }
}

/* 761px bis 825px -> 1308 x 0.60 = 785 Pixel breit */
@media (min-width: 761px) and (max-width: 825px) and (max-height: 560px) {
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell { zoom: 0.60 !important; }
}

/* 826px bis 860px -> 1308 x 0.63 = 824 Pixel breit */
@media (min-width: 826px) and (max-width: 860px) and (max-height: 560px) {
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell { zoom: 0.63 !important; }
}

/* 861px bis 885px -> 1308 x 0.65 = 850 Pixel breit */
@media (min-width: 861px) and (max-width: 885px) and (max-height: 560px) {
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell { zoom: 0.65 !important; }
}

/* 886px bis 910px -> 1308 x 0.67 = 876 Pixel breit */
@media (min-width: 886px) and (max-width: 910px) and (max-height: 560px) {
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell { zoom: 0.67 !important; }
}

/* 911px bis 940px -> 1308 x 0.69 = 903 Pixel breit */
@media (min-width: 911px) and (max-width: 940px) and (max-height: 560px) {
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell { zoom: 0.69 !important; }
}

/* 941px bis 1000px -> 1308 x 0.71 = 929 Pixel breit */
@media (min-width: 941px) and (max-width: 1000px) and (max-height: 560px) {
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell { zoom: 0.71 !important; }
}


/* ================================================================
   VLT-QUER-FUSSLEISTE (ab 2.10.1016)

   Christian: "Ausserdem steht jetzt die hellgruene Unterlinie fest.
   Verkaufsleitung Limburg soll aber nicht."

   footer.site-footer steht auf position: fixed. Am Rechner faellt
   das nicht auf, weil die Seite dort nicht scrollt. Im
   Handy-Querformat scrollt sie seit dem A4-Blatt - dort legte sich
   die Leiste ueber die Karten.

   Zwei Stolpersteine:
   1. In cockpit-klar.css steht fuer genau diesen Bereich
      "html body #footer { position: fixed !important }" - eine
      ID-Regel. Dagegen kommt nur eine Regel an, die die ID selbst
      mitnimmt.
   2. Die Leiste trug left: 50% mit transform: translateX(-50%).
      Das traegt nur eine feste Leiste. Im Fluss schob der Versatz
      sie um die halbe Breite nach links aus dem Bild (gemessen:
      left -466 bei 932 Breite). Deshalb wird beides zurueckgesetzt.

   Die Kopfleiste bekommt bewusst KEINE eigene Regel mehr.
   Christian: "Mach die Banner doch so wie du sie vorher gemacht
   hast, man kann ja scrollen." Sie laeuft also im selben Massstab
   mit wie der Rest der Seite - 1284 x 74 wie am Rechner.
   ================================================================ */

@media (min-width: 761px) and (max-width: 1000px) and (max-height: 560px) {

  html body:not(.vlt-e2-aus) #footer.site-footer,
  html body:not(.vlt-e2-aus) footer.site-footer {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
}


/* ================================================================
   VLT-QUER-WILLKOMMEN (ab 2.10.1017)

   Christian: "Der Willkommensbanner ist im Querformat zu weit weg
   von dem, was er im Desktopmode ist. Bitte halte dich an der
   Desktopansicht, so soll es auch in jeder Queransicht sein."

   Am Rechner gemessen (1728 x 942):
     HEIM & HAUS Streifen  76 bis 150   (position: fixed)
     Willkommensbanner    168 bis 252
     Abstand dazwischen    18

   Der Streifen steht am Rechner FEST - er nimmt im Fluss keinen
   Platz ein. Die 18 entstehen dort aus padding-top: 49,5 der
   Hauptansicht abzueglich der Hoehe, die der feste Streifen
   ueberdeckt.

   Im Handy-Querformat steht derselbe Streifen IM FLUSS. Dort kamen
   die 49,5 also oben drauf statt darunter - gemessen 49,5 Abstand
   statt 18. Deshalb dort schlicht padding-top: 18px.

   Im iPad-Querformat ist es umgekehrt: der Streifen steht fest, die
   Hauptansicht hat aber nur padding-top: 34 - gemessen 4,8 Abstand.
   Dort also 47, damit wieder 18 herauskommen.

   Nicht angefasst, weil dort schon richtig gemessen:
     Z Fold 7 quer  1092 x 984  -> 18,8
     iPad Pro 13 quer 1376 x 1032 -> 21,4
   ================================================================ */

/* Handy quer - der Streifen laeuft im Fluss mit */
@media (min-width: 761px) and (max-width: 1000px) and (max-height: 560px) {
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main {
    padding-top: 17.5px !important;
  }
}

/* iPad quer - der Streifen steht fest.
   Achtung: cockpit.php schreibt inline
   "html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit--desktop-elegant2
    .vlt-klar-view--main { padding-top: 34px !important; zoom: 0.88 }".
   Gleiche Spezifitaet wie meine Regel, aber weiter hinten - deshalb
   gewann sie. Hier steht dieselbe Kette plus .vlt-cockpit, damit sie
   sich durchsetzt.
   Rechnung: die Hauptansicht steht dort 25 Pixel ueber der Unterkante
   des Streifens und traegt zoom 0,88. Fuer 18 Pixel Abstand braucht sie
   (18 + 25) / 0,88 = 48,9 - also 49. */
@media (min-width: 1001px) and (max-width: 1280px) and (min-height: 700px) and (max-height: 900px) and (orientation: landscape) {
  /* Seit die Leiste flach ist (45,5 statt 74) endet sie bei 112,5
     statt 141. Neu gerechnet: (17,5 + 112,5 - 116) / 0,88 = 15,9. */
  html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main {
    padding-top: 16px !important;
  }

  /* Durch die 49 endet die Karte bei 743, die feste Fussleiste beginnt
     bei 732 - sie lag also 11 Pixel ueber der Karte. Deshalb laeuft sie
     hier genauso im Fluss mit wie im Handy-Querformat. */
  html body:not(.vlt-e2-aus) #footer.site-footer,
  html body:not(.vlt-e2-aus) footer.site-footer {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
}


/* ================================================================
   VLT-QUER-KOPF-KOMPAKT (ab 2.10.1020)

   Christian: "Lass uns den HEIM & HAUS Banner kompakter in allen
   Querformaten gestalten. Aber in der Breite unveraendert belassen.
   Bitte auf alle Queransichten aller Geraete anpassen. Auch fuer
   kuenftige neu erstellte Geraete beruecksichtigen. In der
   Desktopansicht bleibt der Banner in der Hoehe unveraendert."

   Die Bedingung ist bewusst nicht nach Geraeten aufgezaehlt,
   sondern nach Eigenschaften - damit sie auch fuer Geraete gilt,
   die es heute noch nicht gibt:

     Zweig 1  quer und hoechstens 1420 breit
              -> alle heutigen Handy- und Tabletquerformate
                 (das breiteste ist das iPad Pro 13" mit 1376).
                 Auch die Vorschau im Tool faellt hierunter, weil
                 sie nur das Fenster verkleinert.
     Zweig 2  quer und grober Zeiger (pointer: coarse)
              -> jedes echte Fingergeraet, egal wie breit es
                 kuenftig wird.

   Der Rechner faellt durch beide Raster: 1728 breit und Maus.
   Wer sein Rechnerfenster unter 1420 zieht, bekommt allerdings
   auch die flache Leiste - das ist der Preis dafuer, dass die
   Regel ohne Geraeteliste auskommt.

   min-width: 761px haelt das Handy-Hochformat heraus, das ein
   ganz anderes Cockpit zeichnet.

   Gemessen am Rechner: die Leiste ist 1284 x 74. Die Hoehe kommt
   nicht von der Marke (154 x 29), sondern vom runden Kontoknopf
   rechts mit 48 x 48. Deshalb wird der Knopf kleiner und das
   Polster knapper - die Breite 1284 bleibt unberuehrt.
   ================================================================ */

@media (min-width: 761px) and (max-width: 1000px) and (orientation: landscape),
       (min-width: 761px) and (max-width: 1000px) and (orientation: landscape) and (pointer: coarse) {

  /* Volle Breite bleibt - nur flacher. */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell > .vlt-klar-head {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 4px !important;
    padding-bottom: 5px !important;
    border-radius: 13px !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell > .vlt-klar-head .vlt-klar-account,
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell > .vlt-klar-head .vlt-klar-account-menu,
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell > .vlt-klar-head .vlt-klar-kopf-zurueck {
    width: 36px !important;
    height: 36px !important;
    min-height: 0 !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell > .vlt-klar-head .vlt-klar-account svg {
    width: 20px !important;
    height: 20px !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell > .vlt-klar-head .vlt-klar-brand img {
    height: 22px !important;
    width: auto !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell > .vlt-klar-head .vlt-klar-brand strong {
    font-size: 14px !important;
    line-height: 16px !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell > .vlt-klar-head .vlt-klar-brand small {
    font-size: 9px !important;
    line-height: 11px !important;
  }
}


/* ================================================================
   VLT-AKTIONEN-LINIE (ab 2.10.1021)

   Christian: "Bitte die Aktionsbuttons in eine Linie mit den
   Vertriebskalender-Buttons bringen. Dazu bitte die Karten
   vergleichen."

   Gemessen am Rechner (1728):
     Karte 2, Kalenderknoepfe   Spalte 1  1196 - 1346
                                Spalte 2  1351 - 1501
     Karte 3, Aktionsknoepfe    Spalte 3  1193 - 1338
                                Spalte 4  1343 - 1488
   Rechts standen also 13 Pixel Versatz.

   Ursache: beide Karten sind 633 breit, aber die Kalenderleiste
   sitzt in einem NAV mit nur 5 Pixel Polster, waehrend die
   Aktionskarte 18 Pixel Polster hat. Dazu kam ein anderer
   Spaltenabstand (5 statt 4).

   Rechnung, bewusst ohne feste Pixelbreiten, damit sie in jeder
   Kartenbreite stimmt:
     rechte Kante soll 5 statt 18 vom Kartenrand stehen -> -13
     Spaltenbreite muss Kartenbreite/4 - 7 sein, damit Spalte 3
     und 4 genau auf den beiden Kalenderspalten liegen. Daraus
     folgt Gesamtbreite = Inhaltsbreite + 20, also links -7.
   ================================================================ */

@media (min-width: 761px) {

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit__actions {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    margin-left: -7px !important;
    margin-right: -13px !important;
  }
}


/* ================================================================
   VLT-QUER-WILLKOMMEN-2 (ab 2.10.1022)
   Loest VLT-QUER-WILLKOMMEN von 2.10.1017 ab - die Werte dort
   stehen noch, werden von hier aber ueberschrieben.

   Christian: "Der Willkommensbanner muss an den HEIM & HAUS Banner
   rangeschoben werden. Bitte selbiger Abstand wie Willkommensbanner
   an Karten. Bitte auf alle Queransichten. Desktop davon ausgenommen."

   Warum die erste Fassung nicht reichte: sie rechnete den Abstand je
   Ansicht aus, weil der Streifen mal im Fluss steht (Handy quer) und
   mal fest (iPad quer). Sobald das iPad im Browser statt als Web-App
   laeuft, ist das Fenster 695 statt 796 hoch - meine Bedingung
   min-height: 700px griff nicht mehr. Gemessen: 45,5 Abstand oben
   gegen 17,5 unten. Genau das, was Christian gesehen hat.

   Jetzt ohne Rechnerei:
     - der Streifen laeuft in JEDER Queransicht im Fluss mit, so wie
       im Handy-Querformat ohnehin schon. Damit faellt seine feste
       Position als Stoerquelle weg.
     - die Hauptansicht traegt kein eigenes Aussenmass mehr.
     - der Abstand steht als Polster oben in der Hauptansicht, also
       im selben Massstab wie der Kartenabstand darunter. Wo
       cockpit.php der Hauptansicht zoom 0,88 mitgibt, schrumpfen
       beide Abstaende gleichermassen - sie bleiben gleich gross.

   Bedingung wie bei VLT-QUER-KOPF-KOMPAKT, siehe dort.
   ================================================================ */

@media (min-width: 761px) and (max-width: 1000px) and (orientation: landscape),
       (min-width: 761px) and (max-width: 1000px) and (orientation: landscape) and (pointer: coarse) {

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell > .vlt-klar-head {
    position: static !important;
    /* 2.10.1043 - Christian: "die iPad Querformate stimmen nicht".
       Gemessen am iPad Air quer (1180 x 796):
         .vlt-klar-head  position: static, left: 50%,
         transform: matrix(1, 0, 0, 1, -554, 0)
         Rechteck: left -524, Breite 1108 - die Huelle steht bei 30.
       Der Streifen stand also 554 Pixel zu weit links, halb aus dem
       Bild. Sichtbar blieb nur das Kontozeichen am rechten Ende, das
       Logo lag ausserhalb. Ursache: position: static macht zwar left
       wirkungslos, aber NICHT transform - die Verschiebung um die
       halbe Breite blieb stehen. Genau derselbe Fehler wie damals bei
       der Fussleiste (2.10.1015).
       Merksatz: wer eine Mittenausrichtung aufloest, muss immer
       BEIDE Teile zuruecknehmen - die Kante und die Verschiebung. */
    transform: none !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main,
  html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main {
    margin-top: 0 !important;
    padding-top: 17.5px !important;
  }
}


/* ================================================================
   VLT-QUER-FUSSLEISTE-2 (ab 2.10.1022)

   Die Fussleiste soll in jeder Queransicht mitlaufen statt zu
   kleben - sonst legt sie sich ueber die untere Kartenkante
   (gemessen im iPad-Querformat: Karte bis 745, feste Leiste ab 732).

   In der Web-App schreibt cockpit.php inline
   "html.vlt-display-tablet-app body:not(.vlt-e2-aus) #footer
    { position: fixed !important }" - gleiche Spezifitaet wie meine
   erste Fassung, aber weiter hinten. Deshalb steht die Kette hier
   noch einmal mit .site-footer am Ende, damit sie schwerer wiegt.
   ================================================================ */

@media (min-width: 761px) and (max-width: 1000px) and (orientation: landscape),
       (min-width: 761px) and (max-width: 1000px) and (orientation: landscape) and (pointer: coarse) {

  html body:not(.vlt-e2-aus) #footer.site-footer,
  html.vlt-display-tablet-app body:not(.vlt-e2-aus) #footer.site-footer,
  html.vlt-display-standalone body:not(.vlt-e2-aus) #footer.site-footer,
  html.vlt-display-browser body:not(.vlt-e2-aus) #footer.site-footer {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
}


/* ================================================================
   VLT-HOCH-KURZBERICHTER (ab 2.10.1024)

   Christian: "Bekommen wir es hin, dass im Hochformat der
   Smartphone-Geraete der Kurzberichter komplett angezeigt wird,
   ohne dass die untere Karte Vertriebskalender weiter nach unten
   rutscht? Gerne koennen wir stattdessen die Vertriebskalender-Karte
   erniedrigen, dann werden die Buttons in der Hoehe kompakter.
   Aber bitte nicht allzu viel."

   Gemessen vorher (iPhone 15 Pro Max hoch, 430 x 873):
     Blatt            181 x 152, object-fit: cover
                      -> nur ein waagerechter Streifen der Seite
     Karte 1          227 bis 508
     Karte 2          523 bis 761
     Kalenderknoepfe  zwei Reihen zu 80

   Drei Eingriffe, die sich gegenseitig ausgleichen:

   1. object-fit: contain statt cover. Damit ist die Seite
      vollstaendig zu sehen. Der Zuschnitt aus der Verwaltung
      (--vlt-slide-x/y) hat im Hochformat dadurch keine Wirkung
      mehr - er beschneidet ja gerade das, was hier ganz zu sehen
      sein soll. Im Querformat und am Rechner bleibt er.

   2. Die Kalenderknoepfe von 80 auf 70. Bei 66 stiessen die
      Beschriftungen an die Unterkante - nachgesehen und wieder
      verworfen. 70 laesst noch Luft.

   3. Die gewonnenen 2 x 10 = 20 Pixel gehen an Karte 1 (Polster
      unten 8 -> 28). Das Blatt haengt mit top: 85 / bottom: 10 an
      der Kartenhoehe und waechst damit von 152 auf 172.
      aspect-ratio muss dafuer auf auto - sonst gewinnt das
      Seitenverhaeltnis 1,1/1 gegen die beiden Anschlaege.

   Unterm Strich: Karte 2 endet weiterhin bei 761, die Seite bleibt
   911 hoch. Nur ihr oberer Rand rutscht um 20 nach unten, weil
   Karte 1 um denselben Betrag waechst.
   ================================================================ */

@media (max-width: 760px) and (orientation: portrait) {

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__utility {
    height: 218px !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__utility .vlt-elegant-overview__menu {
    grid-template-rows: 70px 70px !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__utility .vlt-elegant-overview__menu > * {
    min-height: 70px !important;
    height: 70px !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-klar-view--main > .vlt-elegant-overview {
    padding-bottom: 28px !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__slideshow {
    aspect-ratio: auto !important;
    height: auto !important;
    top: 85px !important;
    bottom: 10px !important;
  }

  /* Der Zuschnitt aus der Verwaltung steht auf object-position: 100% 62%
     - also rechtsbuendig. Mit contain heisst das: die Seite klebt am
     rechten Rand des Kastens und laesst links weiss stehen. Christian:
     "Bitte Kurzberichter mittig setzen." Deshalb hier mittig. */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__slideshow img {
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }
}


/* ================================================================
   VLT-COCKPITBLATT (ab 2.10.1027)

   Christian: "Jetzt brauchen wir noch eine Ansichtskarte wie beim
   Kurzberichter, wenn man drauf klickt, fuer Cockpit-Information.
   Klickt man drauf, werden alle Informationen auf einem Blatt
   angezeigt."

   Gleiche Handschrift wie das Vollbild der Diashow: dunkler Grund,
   weisses Blatt, gruene Kopfleiste, Schliessen oben rechts, Esc.
   Die Meldungen werden zur Laufzeit aus
   .vlt-elegant-overview__info-messages gelesen - es gibt also keine
   zweite Stelle, die gepflegt werden muesste.
   ================================================================ */

.vlt-cockpitblatt-bedienbar { cursor: zoom-in; }

html.vlt-cockpitblatt-offen,
html.vlt-cockpitblatt-offen body { overflow: hidden !important; }

.vlt-cockpitblatt {
    position: fixed !important;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 52px 18px;
    background: rgba(8,18,12,.93);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.vlt-cockpitblatt.is-offen { display: flex; }

.vlt-cockpitblatt__blatt {
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    overflow: auto;
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        inset 0 2px 0 #ffffff,
        0 20px 60px rgba(0,0,0,.55),
        0 0 0 1px rgba(22,129,58,.16);
    cursor: default;
}

.vlt-cockpitblatt__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px 12px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg, #2e7d52, #22643f);
    color: #ffffff;
}
.vlt-cockpitblatt__kopf strong {
    font: 800 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.vlt-cockpitblatt__zahl {
    font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: rgba(255,255,255,.82);
}

.vlt-cockpitblatt__liste {
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 18px 18px !important;
}
.vlt-cockpitblatt__zeile {
    display: block;
    margin: 0 !important;
    padding: 13px 0 12px 14px;
    border-bottom: 1px solid rgba(22,129,58,.14);
    border-left: 3px solid rgba(22,129,58,.18);
    list-style: none !important;
}
.vlt-cockpitblatt__zeile:last-child { border-bottom: 0; }
.vlt-cockpitblatt__zeile.is-aktuell { border-left-color: #16813a; }

.vlt-cockpitblatt__etikett {
    display: block;
    margin-bottom: 4px;
    font: 800 9px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #16813a;
}
.vlt-cockpitblatt__text {
    display: block;
    font: 500 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1d2b22;
}
.vlt-cockpitblatt__zeile--leer {
    border-left-color: rgba(22,129,58,.18);
    font: 500 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #5c6b62;
}

.vlt-cockpitblatt__zu {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.14) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: background .15s ease;
}
.vlt-cockpitblatt__zu svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 2.1;
    stroke-linecap: round; stroke-linejoin: round;
}
.vlt-cockpitblatt__zu:hover { background: #16813a !important; }


/* ================================================================
   VLT-HOCH-COCKPITTEXT (ab 2.10.1028)

   Christian: "Ich sehe jetzt 4 Zeilen in der Cockpitanzeige. Koennen
   wir nicht 3 draus machen? Dann gewinnt der Kurzberichter nach oben
   eine Zeile Platz. Wichtig waere, dass die Textumbrueche besser
   funktionieren ... Die Texte koennen auch ein klein wenig kleiner
   sein. Hauptsache, die Umbrueche funktionieren gut."

   Gemessen vorher (430 x 873, Spalte 143 breit, Schrift 10/12):
     "Denkt an die Wochenmeldung bis Samstag 18 Uhr."   3 Zeilen, 36
     "Noch 20 Karriere-Checks offen - heute einen
      Schritt weitergehen."                            4 Zeilen, 48
   Die Punkte sitzen bei 67, der Text endete im langen Fall bei 71 -
   er lief also in die Punkte hinein. Daher der schiefe Eindruck.

   Jetzt: Schrift 9/11, damit der laengste Text (305 statt 339 breit)
   in 143 Pixel sicher auf drei Zeilen geht - 305/143 = 2,1. Dazu
   Silbentrennung und der schoenere Umbruchalgorithmus, und eine
   harte Grenze bei drei Zeilen, damit die Hoehe nie wieder springt.
   Der Textblock beginnt bei 26 statt 38, das Blatt bei 74 statt 85 -
   also die gewuenschte Zeile mehr fuer den Kurzberichter.
   ================================================================ */

@media (max-width: 760px) and (orientation: portrait) {

  /* Christian: "Die Zeilen bitte mittig ins Feld. Die kratzen an der
     Cockpit-Ueberschrift." Deshalb bekommt der Textbereich eine feste
     Hoehe zwischen Ueberschrift (endet bei 269) und Punkten (321) und
     zentriert seinen Inhalt darin. So sitzt eine zweizeilige Meldung
     genauso mittig wie eine dreizeilige. */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__info-messages {
    top: 36px !important;
    height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__info-dots {
    top: 61px !important;
  }

  /* Christian: "Bitte die Linie, die das Cockpitfeld abgrenzt, nach oben
     ueber den Kurzberichter setzen - sie laeuft zurzeit in der oberen
     Haelfte drueber." Die Linie ist .vlt-elegant-overview__info::after und
     stand auf top: 75, also bei 334 - das Blatt beginnt bei 328. Jetzt bei
     66 (325), also zwischen den Punkten und dem Blatt. */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__info::after {
    top: 66px !important;
  }

  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__info-messages > * {
    font-size: 9px !important;
    line-height: 11px !important;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: pretty;
  }

  /* Die Dreizeilengrenze darf NUR auf der gerade sichtbaren Meldung
     stehen. Beim ersten Anlauf stand sie auf allen - display: -webkit-box
     hat dabei das display: none der ruhenden Meldungen ueberschrieben,
     und beide Texte lagen uebereinander. */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__info-messages > .is-active {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden !important;
    max-height: 36px !important;
  }

  /* Christian: "Den Kurzberichter nach oben an die Linie ausrichten und
     nach unten an die Unterkante der Vertriebskarte, und entsprechend die
     Breite ausrichten, so dass DIN A4 vollstaendig angezeigt wird."
     Der Kasten bekommt also selbst das A4-Verhaeltnis - dann fuellt die
     Seite ihn ganz aus, ohne weisse Streifen an den Seiten. */
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__slideshow {
    /* Das Blatt haengt an der UNTERKANTE der Karte und bekommt seine
       Breite als Anteil der Spalte; die Hoehe folgt aus dem
       A4-Verhaeltnis. Der umgekehrte Weg - Hoehe aus top/bottom, Breite
       aus dem Verhaeltnis - sah am iPhone 15 Pro Max richtig aus, kippte
       aber auf schmaleren Geraeten: dort wurde die Breite nach Inhalt
       geschaetzt, das Blatt zu hoch und rutschte ueber die Trennlinie.
       Gemessen am iPhone 11 Pro: Blatt bei 293, Linie bei 297. */
    top: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    /* Die HOEHE muss die feste Groesse sein, nicht die Breite.
       2.10.1039 hatte width: 66 Prozent - das ist ein Anteil der SPALTE, und
       die Spalte hat je nach Geraet ein anderes Verhaeltnis: auf dem iPhone
       200 x 267, auf dem iPad-Hochformat 286 x 288. Aus 66 Prozent wurden
       dort 188 x 266 - das Blatt war fast so hoch wie die ganze Spalte und
       lief oben in den Cockpit-Text hinein.
       Jetzt kommt die Hoehe aus dem Platz zwischen Trennlinie und
       Kartenunterkante (100 Prozent minus 67px; die Linie sitzt bei 66px),
       und die Breite folgt aus dem A4-Verhaeltnis. Damit sitzt das Blatt auf
       JEDEM Hochformat 1 Pixel unter der Linie und buendig auf der
       Unterkante der Karte.
       Referenz iPhone 15 Pro Max: 141 x 200. iPad-Hochformat: 156 x 221. */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(100% - 67px) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 210 / 297 !important;
  }
}


/* ============================================================
   VLT-HOCH-KARTE2-HOEHE (ab 2.10.1041)

   Christian: "Die Abstaende nach unten zum Pluszeichen haben beim
   iPhone 15 Pro Max ein bisschen mehr Platz als bei allen anderen.
   Bei der Vertriebskalenderkarte ist unten gar kein Abstand mehr da.
   Bitte eins zu eins wie beim 15 Pro Max."

   Gemessen, Luecke zwischen Unterkante Karte 2 und Oberkante der
   Navileiste mit dem Pluszeichen:
     iPhone 15 Pro Max  430 x 873  ...  28,0 px   Referenz
     iPhone 11 Pro      375 x 768  ...   8,4 px
     iPhone 14 Pro      393 x 793  ...   9,0 px
     iPhone 11 Pro Max  414 x 852  ...   9,6 px
     iPhone 12 Pro Max  428 x 879  ...   7,6 px
     iPhone 16 Pro Max  440 x 894  ...   8,0 px

   Ursache: es gibt noch alte, geraetegenaue Regeln aus der Zeit vor dem
   Umbau, die die Hoehe der zweiten Karte mit !important festsetzen -
   238px, 200px, je nach Fenstergroesse. Zum Beispiel

     @media (min-width: 409px) and (max-width: 420px)
        and (min-height: 820px) and (max-height: 885px)
     html:not(.vlt-display-tablet-app) body .vlt-cockpit
       .vlt-klar-view--main > .vlt-elegant-overview__utility {
         height: 238px !important; }

   Diese Regel hat genau dieselbe Spezifitaet wie meine Hochformat-Regel
   (0,4,2) und steht spaeter in der Reihenfolge - deshalb gewann sie.
   Das iPhone 15 Pro Max (430 x 873) faellt als einziges Geraet durch
   alle diese Fenster hindurch. Nur deshalb stimmte dort die Hoehe.
   Das war der Grund, warum es nur beim 15 Pro Max richtig aussah.

   Loesung: dieselbe Kette mit einer Klasse mehr (0,5,2). Damit schlaegt
   sie jede dieser alten Regeln, unabhaengig von der Reihenfolge - auch
   die, die fuer Geraete geschrieben wurden, die es noch nicht gibt.
   ============================================================ */
@media (max-width: 760px) and (orientation: portrait) {
  html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar
  .vlt-klar-view--main > .vlt-elegant-overview__utility {
    height: 218px !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}


/* ============================================================
   VLT-HOCH-KARTE2-ENGES-FENSTER (ab 2.10.1042)

   Nachtrag zum Block darueber. Nach der Korrektur stimmte die Luecke
   auf allen 14 iPhone-Hochformaten und allen drei iPad-Hochformaten.
   Ein Geraet blieb uebrig: der Galaxy Z Fold 7 im Hochformat.

   Gemessen dort: Fenster 760 x 825, Kopf 50, Navileiste 76 + 8 unten.
   Fuer den Inhalt bleiben 691 Pixel, der Entwurf braucht aber 722.
   Die Karte 2 endete deshalb 3 Pixel UNTER der Oberkante der
   Navileiste - also gar keine Luecke, sondern Ueberdeckung.

   Das Fenster ist schlicht 31 Pixel zu niedrig fuer den Entwurf. Die
   einzige Stelle, an der man das ohne Verlust holen kann, sind die
   vier Kalenderknoepfe: 70 -> 58 Pixel. Der Z Fold hat im Hochformat
   eine sehr breite Spalte (367 statt 200), die Knoepfe bleiben dadurch
   gut treffbar. Karte 2 wird damit 187 statt 218 hoch und die Luecke
   betraegt dieselben 28 Pixel wie beim iPhone 15 Pro Max.

   Abgegrenzt ueber html.vlt-display-tablet-app (haben nur Tablets und
   der Z Fold, die iPhones nicht) zusammen mit max-height 900px (haben
   die drei iPads nicht - die sind 995, 1071 und 1081 hoch).
   Spezifitaet 0,6,2 - eine Klasse mehr als der Block darueber.
   ============================================================ */
@media (max-width: 760px) and (orientation: portrait) and (max-height: 900px) {
  html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar
  .vlt-klar-view--main > .vlt-elegant-overview__utility {
    height: 180px !important;
  }
  html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar
  .vlt-klar-view--main > .vlt-elegant-overview__utility .vlt-elegant-overview__menu {
    grid-template-rows: 54px 54px !important;
  }
}


/* ============================================================
   VLT-QUER-TABLET-ZOOM (ab 2.10.1044)

   Christian: "iPad Pro 13 quer stimmt immer noch nicht. Schau mal
   bitte auf iPad 11 und iPad Air - da geht der Kurzberichter ja bis
   nach unten." Und davor: Galaxy Fold Querformat stimmt nicht.

   Gemessen, Abstand zwischen Unterkante Kurzberichter und Unterkante
   der Karte:
     iPad Air quer      1180 x 796   Karte 609 x 562   Blatt 268 x 379   27
     iPad Pro 11 quer   1210 x 810   Karte 626 x 574   Blatt 277 x 391   27
     iPhone 15 PM quer   932 x 430   Karte 633 x 579   Blatt 281 x 397   26
     iPad Pro 13 quer   1376 x 1008  Karte 523 x 536   Blatt 225 x 318   62
     Galaxy Fold quer   1092 x 960   Karte 423 x 562   Blatt 175 x 248  158

   Ursache: es gibt zwei Zoomstufen fuer die Web-App auf Tablets -
     (min-width: 901px) and (max-height: 900px)  -> zoom 0,88
     (min-width: 901px) and (min-height: 901px)  -> zoom 1,2
   dazu jeweils eine passende Entwurfsbreite
     width: calc(0.833333 * min(1336px, 100vw - 72px))   (= 1/1,2)

   Die zweite Stufe ist fuer Tablets im HOCHFORMAT gedacht - dort ist
   das Fenster hoch. Im Querformat sind aber auch das iPad Pro 13
   (1008 hoch) und der Galaxy Fold (960 hoch) hoeher als 900. Sie
   bekamen deshalb den Hochformat-Zoom 1,2 bzw. 1,15.

   Zoom 1,2 heisst: alles wird 1,2-fach vergroessert und die
   Entwurfsbreite entsprechend kleiner. Aus 1304 nutzbaren Pixeln
   werden 1087 Entwurfspixel - die Cockpitkarte schrumpft von 609 auf
   523, ihre linke Spalte von 268 auf 225. Die Hoehe der Karte haengt
   dagegen an der rechten Spalte (Kalenderblatt, Restwerte, Knoepfe)
   und bleibt fast gleich. Das A4-Blatt richtet sich nach der
   Spaltenbreite - also wurde es zu klein und endete weit ueber der
   Unterkante. Beim Galaxy Fold noch deutlicher: 158 Pixel Luft.

   Loesung: im QUERFORMAT gilt dieselbe Stufe wie beim iPad Air und
   iPad Pro 11 - zoom 0,88 mit der dazu passenden Entwurfsbreite
   (1/0,88 = 1,136364). Damit stimmen Karte, Spalten und Blatt eins zu
   eins mit der Referenz. Das Hochformat der Tablets bleibt unberuehrt.

   Nachgemessen: iPad Pro 13 quer Karte 720 x 640, Blatt 324 x 458,
   Rest unten 26. Galaxy Fold quer Karte 559 x 536, Blatt 243 x 344,
   Rest unten 36.

   Spezifitaet 0,6,2 - eine Klasse mehr als die staerkste der
   bestehenden Zoomregeln (die 1,15er hat 0,5,2 mit !important).
   ============================================================ */
@media (min-width: 901px) and (min-height: 901px) and (orientation: landscape) {
  html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
  .vlt-klar-view--main:not(.is-table-focused) {
    zoom: 0.88 !important;
    width: calc(1.136364 * min(1336px, 100vw - 72px)) !important;
  }
}


/* ============================================================
   VLT-QUER-KOPFBREITE (ab 2.10.1045)

   Christian: "In allen Querformaten ist der HEIM & HAUS Banner
   breiter als die Karten."

   Gemessen (Bildschirmpixel, linke und rechte Kante):
     iPad Air quer     Kopf  30,0 - 1138,0   Karten  46,6 - 1133,4
     iPad Pro 13 quer  Kopf  28,0 - 1332,0   Karten  46,6 - 1329,4
     iPhone 15 PM quer Kopf  14,7 -  917,3   Karten  23,0 -  909,0
     iPhone 11 Pro quer Kopf 13,6 -  798,4   Karten  20,8 -  791,2
   Der Kopfstreifen ist ueberall so breit wie die ganze Huelle, die
   Karten haben dagegen noch einen Innenabstand von 12 Punkten.

   Zwei Faelle, weil Kopf und Karten nicht im selben Massstab liegen:

   1) Handy-Querformat: Huelle, Kopf und Ansicht sind alle 1308 breit,
      die Karten 1284. Der Massstab (zoom) sitzt auf der Huelle und
      gilt fuer alles gleich. Also reicht: Breite minus 24, mittig.

   2) Tablet-Querformat: der Kopf liegt AUSSERHALB der Ansicht und
      damit ausserhalb deren Massstab (zoom 0,88). Die 12 Punkte der
      Karten erscheinen dort nur als 12 * 0,88 = 10,56 Bildschirm-
      punkte, dazu kommt der Abstand der Ansicht zur Huelle. Deshalb
      wird die Kopfbreite hier aus derselben Formel gerechnet, aus der
      auch die Ansichtsbreite kommt:
        min(1336px, 100vw - 72px)  minus  2 * 10,56
      und mit margin: auto mittig gesetzt.

   Nachgemessen, Kopf und Karten jetzt deckungsgleich:
     iPad Air quer      46,6 - 1133,4  (1086,9)
     iPad Pro 13 quer   46,6 - 1329,4  (1282,9)
     Galaxy Fold quer   46,6 - 1045,4  ( 998,9)
     iPhone 11 Pro quer 20,8 -  791,2  ( 770,4)
   ============================================================ */
@media (orientation: landscape) {
  html:not(.vlt-display-tablet-app) body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
  .vlt-cockpit-klar-shell > .vlt-klar-head {
    width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
  .vlt-cockpit-klar-shell > .vlt-klar-head {
    width: calc(min(1336px, 100vw - 72px) - 21.12px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ============================================================
   VLT-HOCH-TABLET-LUECKE (ab 2.10.1046)

   Christian: "iPad Pro 11 zeigt richtig an. iPad Pro 13 und iPad Air
   noch nicht - Abstand unterhalb der Karten zum Plus-Menue."

   Gemessen (Hochformat, Luecke Unterkante Karte 2 bis Navileiste):
     iPad Pro 11   760 x 1081  zoom 1,28  Karte2 unten 967,8  Nav 997,0  29,2  <- Referenz
     iPad Air      760 x 1071  zoom 1,28  Karte2 unten 967,8  Nav 987,5  19,7
     iPad Pro 13   760 x  995  zoom 1,16  Karte2 unten 887,9  Nav 911,5  23,6

   Ursache: der Entwurf hat eine feste Hoehe, der Massstab (zoom) ist
   eine Treppe mit festen Stufen. iPad Air und iPad Pro 11 stehen auf
   derselben Stufe (1,28) und haben deshalb GENAU dieselbe Inhaltshoehe
   - Karte 2 endet bei beiden bei 967,8. Die Navileiste haengt aber am
   unteren Fensterrand, und die Fenster sind 1071 bzw. 1081 hoch. Die
   10 Pixel Unterschied landen eins zu eins in der Luecke.

   Loesung: Karte 2 bekommt eine Hoehe, die an der Fensterhoehe haengt,
   statt an einer festen Zahl. Hergeleitet aus
     Karte2 unten = A + Karte2hoehe * zoom
     Luecke       = Fensterhoehe - 8 - Navihoehe(75,5) - Karte2 unten
   mit A = alles oberhalb von Karte 2 (auf einer Stufe konstant):
     Stufe zoom 1,28:  A = 688,76  ->  h = (100vh - 801,26) / 1,28
                                        = 0,78125 * 100vh - 626
     Stufe zoom 1,16:  A = 635,02  ->  h = (100vh - 747,52) / 1,16
                                        = 0,862069 * 100vh - 644,4

   Nachgemessen, alle drei genau 28,5:
     iPad Pro 11  Karte2 219   iPad Air  Karte2 211   iPad Pro 13  Karte2 214
   Der Inhalt von Karte 2 braucht 209 Punkte - passt in allen drei.

   Die Stufengrenzen sind dieselben wie bei den vorhandenen
   Zoomregeln (min-height 901/1031), damit beides zusammenpasst.
   Der Galaxy Fold im Hochformat (825 hoch) faellt unter 901 und
   bleibt bei seinem eigenen Block VLT-HOCH-KARTE2-ENGES-FENSTER.
   Die iPhones sind kein vlt-display-tablet-app und bleiben bei 218.
   ============================================================ */
@media (max-width: 760px) and (orientation: portrait) and (min-height: 1031px) {
  html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar
  .vlt-klar-view--main > .vlt-elegant-overview__utility {
    height: calc(0.78125 * 100vh - 626px) !important;
  }
}
@media (max-width: 760px) and (orientation: portrait) and (min-height: 901px) and (max-height: 1030px) {
  html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar
  .vlt-klar-view--main > .vlt-elegant-overview__utility {
    height: calc(0.862069 * 100vh - 644.4px) !important;
  }
}


/* ============================================================
   VLT-QUER-TABLET-UNTEN (ab 2.10.1047)

   Christian: "iPad 13 Querformat zeigt noch nicht bis unten an.
   Gruenen Banner wie bei den anderen Queransichten - iPad braucht
   nicht angezeigt werden." Nachgereicht: "also der gruene Banner
   Verkaufsleitung Limburg".

   Gemessen im Querformat:
     iPad Air quer     Fenster 796   Huelle endet 745   Fussleiste 792 (unter der Kante)
     iPad Pro 13 quer  Fenster 1008  Huelle endet 814   Fussleiste 861 (mitten im Bild)

   Zwei Dinge daran:
   1) Die gruene Fussleiste "Verkaufsleitung Limburg" liegt beim iPad
      Air unterhalb der Bildkante und faellt deshalb nicht auf. Beim
      iPad Pro 13 ist das Fenster hoeher, sie steht mitten im Bild.
      Christian will sie in den iPad-Queransichten gar nicht sehen.
   2) Die weisse Flaeche der App endete bei 814 von 1008 - darunter
      blieb ein grauer Streifen von fast 200 Pixeln. Das ist das
      "zeigt nicht bis unten an".

   Warum der Inhalt nicht weiter reicht: die Karten sind so hoch wie
   ihr Inhalt, und der braucht auf dem grossen Schirm nicht mehr Platz.
   Die Karten einfach mitwachsen zu lassen waere falsch - probiert und
   verworfen: dann steht der Kurzberichter mit 240 Pixeln Leerraum in
   seiner Karte, weil er an der SPALTENBREITE haengt, nicht an der
   Kartenhoehe. Richtig ist deshalb: die Karten behalten ihre Hoehe,
   nur die weisse Flaeche reicht bis zur Bildkante.

   Abgegrenzt auf min-height 901 im Querformat - das sind genau das
   iPad Pro 13 quer (1008) und der Galaxy Fold quer (960). iPad Air
   (796) und iPad Pro 11 (810) bleiben unberuehrt, die stimmen.

   Nachgemessen iPad Pro 13 quer: Huelle 100 bis 1000, Karte 720 x 640,
   Blatt 324 x 458, Rest unten 26 - das Blatt bleibt also unveraendert.
   ============================================================ */
@media (orientation: landscape) {
  html.vlt-display-tablet-app body:not(.vlt-e2-aus) #footer.site-footer {
    display: none !important;
  }
}
@media (min-width: 901px) and (min-height: 901px) and (orientation: landscape) {
  html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
  .vlt-cockpit-klar-shell {
    min-height: calc(100vh - 108px) !important;
  }
}


/* ============================================================
   VLT-HOCH-FOLD-BREITE (ab 2.10.1048)

   Christian: "Galaxy Fold zeigt immer noch nicht richtig im Hochformat
   an." (mit Bildschirmfoto)

   Zwei Befunde, beide gemessen:

   1) Die Kalenderknoepfe waren unten angeschnitten. Meine Regel von
      2.10.1042 hatte zwar die Zeilen auf 58 gesetzt
      (grid-template-rows: 58px 58px), die Knoepfe selbst behielten aber
      ihre eigene Hoehe von 70. Gemessen: zweite Knopfreihe top 67 plus
      70 hoch, Knopfblock beginnt bei 60 -> Inhalt endet bei 197, die
      Karte ist 187 hoch. Also 10 Pixel abgeschnitten.
      Merksatz: eine Rasterzeile kleiner zu machen verkleinert nicht
      das, was darin steht - die Hoehe des Knopfes muss mit.

   2) Der Kurzberichter war in seiner Spalte verloren. Gemessen:
        iPhone 15 Pro Max  Spalte 200  Blatt 141  = 70,5 %
        iPad Hochformat    Spalte 286  Blatt 156  = 54,5 %
        Galaxy Fold        Spalte 367  Blatt 134  = 36,5 %
      Ursache: der Fold hat im Hochformat 984 CSS-Pixel Breite, die App
      begrenzt auf 760 - und anders als bei den iPads liegt dort KEIN
      Massstab drueber (zoom 1 statt 1,28). Die Entwurfsbreite ist
      damit 760 statt 594, die Karte wird 736 statt 580 breit. Die
      HOEHE bleibt aber gleich, und das A4-Blatt haengt an der Hoehe.
      Also wird die Spalte breiter und breiter, das Blatt nicht.

   Loesung: der Fold bekommt im Hochformat dieselbe Entwurfsbreite wie
   die iPads im Hochformat - 594 Pixel, mittig. Damit sieht er aus wie
   ein iPad im Hochformat, und das hat Christian abgenommen.

   Nachgemessen: Karte 443 statt 736 breit, Spalte 220, Blatt 134
   = 60,9 % (zwischen iPhone und iPad), Knoepfe enden bei 185 von 187,
   Luecke zur Navileiste 21.

   Die Navileiste bleibt ueber die volle Breite - genauso wie im
   iPad-Hochformat. Mitschmaelern habe ich probiert: dann draengen sich
   die Zeichen und "Meine Ziele" laeuft in das Pluszeichen. Verworfen.

   Abgegrenzt auf max-height 900 im Hochformat mit tablet-app - das
   trifft nur den Fold (825). Die drei iPads (995 bis 1081) und die
   iPhones (kein tablet-app) bleiben unberuehrt.
   ============================================================ */
@media (max-width: 760px) and (orientation: portrait) and (max-height: 900px) {
  /* 2.10.1049 - die Breitenbegrenzung auf 594 war falsch, Christian:
     "das ist ja noch schlimmer geworden". Zurueckgenommen. Der Fold
     bleibt im Hochformat ueber die volle Breite wie vorher. Nur die
     Knopfhoehe unten bleibt - die war ein echter Anschnitt. */


  html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar
  .vlt-elegant-overview__utility .vlt-elegant-overview__menu > * {
    height: 54px !important;
    min-height: 0 !important;
  }
}


/* ============================================================
   VLT-QUER-VOLLBILD (ab 2.10.1050)

   Christian: "Was soll das unten mit dem Space? Genau wie bei iPad
   dreizehn Queransicht, voll der Space unten drunter. Warum wird nicht
   alles direkt im Vollbild angezeigt?"

   Gemessen iPad Pro 13 quer (1376 x 1008): der Inhalt endete bei 814,
   darunter fast 200 Pixel leer. Grund: die Karten sind so hoch wie ihr
   Inhalt, und der braucht auf dem grossen Schirm nicht mehr Platz.

   In 2.10.1047 hatte ich nur die weisse Flaeche bis zur Kante gezogen.
   Das war zu wenig - Christian will den Platz genutzt sehen.

   Beim ersten Versuch (nur Karten strecken) stand der Kurzberichter mit
   240 Pixeln Leerraum in seiner Karte, weil er an der SPALTENBREITE
   haengt. Deshalb jetzt beides zusammen:
     - die Ansicht bekommt die volle Hoehe, die Karten wachsen mit
     - die linke Spalte wird nach dem Blatt bemessen (auto), die rechte
       behaelt mindestens 215 Punkte fuer Kalenderblatt und Restwerte
     - das Blatt streckt sich auf die Zeilenhoehe, die Breite folgt
       aus dem A4-Verhaeltnis

   Nachgemessen iPad Pro 13 quer: Huelle bis 1002 von 1008, Karte
   720 x 854, Spalten 433 / 215, Blatt 475 x 671, Verhaeltnis 0,708,
   Rest unten 27.

   Gilt nur fuer min-height 901 im Querformat - iPad Pro 13 quer und
   Galaxy Fold quer. iPad Air und iPad Pro 11 quer haben nur 51 Pixel
   Luft und bleiben unberuehrt.
   ============================================================ */
/* 2.10.1051 - Christian: "nimm die Queransicht vom Fold wieder wie
   vorher, mein Fehler". Der Fold quer (1092 x 960) lief mit dem
   gestreckten Blatt ueber: Blatt 436 breit in einer Spalte von 272.
   Bedingung deshalb von min-height 901 auf 1001 gehoben - damit gilt
   der Block nur noch fuer das iPad Pro 13 quer (1008 hoch). */
@media (min-width: 901px) and (min-height: 1001px) and (orientation: landscape) {
  html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
  .vlt-klar-view--main:not(.is-table-focused) {
    height: calc((100vh - 152px) / 0.88) !important;
  }
  html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
  .vlt-elegant-overview {
    grid-template-columns: auto minmax(215px, 1fr) !important;
  }
  html.vlt-display-tablet-app body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--desktop-elegant2
  .vlt-elegant-overview .vlt-elegant-overview__slideshow {
    align-self: stretch !important;
    height: auto !important;
    width: auto !important;
    max-width: none !important;
    aspect-ratio: 210 / 297 !important;
  }
}


/* ============================================================
   VLT-HOCH-SAMSUNG-STUFEN (ab 2.10.1053)

   Zu den neuen Samsung-Ansichten. Die Massstabstreppe fuer Handys im
   Hochformat hat je Stufe eine Breiten- UND eine Hoehenspanne, und die
   sind auf die iPhones zugeschnitten. Die Samsungs fielen durch:

     Galaxy S24 / S25      360 x 756  Stufe 0,872  Luecke 13,8
     Galaxy S24+ / S25+    384 x 808  Stufe 0,908  Luecke 37,3
     Galaxy S24/25 Ultra   384 x 800  Stufe 0,908  Luecke 29,3
     Galaxy Z Flip 6 / 7   360 x 868  keine Stufe  Luecke  4,7
   Referenz iPhone 15 Pro Max: 28,0.

   Der Z Flip ist der auffaelligste Fall: 868 hoch, damit ausserhalb
   jeder Stufe (die hoechste geht bis 790 bei dieser Breite), also
   Massstab 1 auf einem nur 360 breiten Schirm - der Entwurf braucht
   aber 430. Der Inhalt lief 104 Punkte ueber.

   Empirisch gemessen: eine Aenderung des Massstabs um 0,001 verschiebt
   die Luecke um rund 0,87 Punkte. Daraus die vier Stufen:
     360 x 756  ->  0,856   (13,8 + 14,2)
     360 x 868  ->  0,973   ( 4,7 + 23,3)
     384 x 808  ->  0,919   (37,3 -  9,3)
     384 x 800  ->  0,910   (29,3 -  1,3)

   Spezifitaet 0,5,2 - eine Klasse mehr als die vorhandene Treppe.
   ============================================================ */
@media (max-width: 365px) and (orientation: portrait) and (min-height: 740px) and (max-height: 775px) {
  html:not(.vlt-display-tablet-app) body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar
  .vlt-cockpit-klar-shell { zoom: 0.856 !important; }
}
@media (max-width: 365px) and (orientation: portrait) and (min-height: 850px) and (max-height: 885px) {
  html:not(.vlt-display-tablet-app) body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar
  .vlt-cockpit-klar-shell { zoom: 0.984 !important; }
  /* Beim Z Flip laesst sich die 28 ueber den Massstab allein nicht
     treffen: zwischen 0,984 und 0,985 springt die Luecke von 42,1 auf
     19,0, weil dort eine Textzeile anders umbricht. Deshalb 0,984 und
     die restlichen 14 Punkte ueber die Hoehe von Karte 2 (232 statt
     218). Der Inhalt von Karte 2 endet bei 209, es wird nichts
     angeschnitten. Nachgemessen: Luecke 28,4. */
  html:not(.vlt-display-tablet-app) body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar
  .vlt-klar-view--main > .vlt-elegant-overview__utility { height: 232px !important; }
}
@media (min-width: 381px) and (max-width: 391px) and (orientation: portrait) and (min-height: 805px) and (max-height: 820px) {
  html:not(.vlt-display-tablet-app) body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar
  .vlt-cockpit-klar-shell { zoom: 0.919 !important; }
}
@media (min-width: 381px) and (max-width: 391px) and (orientation: portrait) and (min-height: 790px) and (max-height: 804px) {
  html:not(.vlt-display-tablet-app) body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-klar
  .vlt-cockpit-klar-shell { zoom: 0.910 !important; }
}


/* ============================================================
   VLT-ZIELBLATT (ab 2.10.1055)
   Das freischwebende Fenster fuer "Meine Ziele" auf dem Desktop.
   Gleiche Machart wie das Cockpitblatt: dunkler Grund, Blatt mittig,
   Esc oder Klick daneben schliesst.
   ============================================================ */
.vlt-zielblatt {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
.vlt-zielblatt.is-offen { display: flex; }
html.vlt-zielblatt-offen { overflow: hidden; }

.vlt-zielblatt__hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(18, 32, 24, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.vlt-zielblatt__blatt {
  position: relative;
  width: min(560px, 100%);
  max-height: min(860px, calc(100vh - 64px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(16, 40, 26, 0.28), 0 2px 8px rgba(16, 40, 26, 0.12);
  padding: 22px 22px 26px;
}

.vlt-zielblatt__zu {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 45, 30, 0.06);
  color: #2f5d40;
  cursor: pointer;
}
.vlt-zielblatt__zu:hover { background: rgba(20, 45, 30, 0.12); }
.vlt-zielblatt__zu svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Der Inhalt ist eine Kopie von .vlt-klar-view--goals. Der Block ist
   im Desktop auf display: none und traegt Masse aus der Handyansicht -
   hier wird beides zurueckgenommen. */
.vlt-zielblatt__inhalt {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  zoom: 1 !important;
  overflow: visible !important;
  background: transparent !important;
}
.vlt-zielblatt__inhalt > * { margin-left: 0 !important; margin-right: 0 !important; }

/* 2.10.1055, Nachtrag: welche Abschnitte im Blatt sichtbar sind.
   Gemessen in der Handy-Zielansicht, dort steht der Block auf
   display: grid mit diesen Kindern:
     Titel none · Jahresziel block · Monatsziel grid · Wochenziel grid
     Top-Club flex · Monatsblock none · Kennzahlen none · Wochen none
     Fussleiste flex
   Im Desktop sind Monats- und Wochenziel als Grundregel auf none -
   deshalb hier gezielt wieder an. Den Titel zeige ich im Blatt mit,
   er traegt die Ueberschrift "Meine Ziele". */
.vlt-zielblatt .vlt-zielblatt__inhalt {
  display: grid !important;
  gap: 12px;
}
.vlt-zielblatt .vlt-zielblatt__inhalt > .vlt-klar-goals-title { display: block !important; }
.vlt-zielblatt .vlt-zielblatt__inhalt > .vlt-klar-goal-hero { display: block !important; }
.vlt-zielblatt .vlt-zielblatt__inhalt > .vlt-klar-current-goal { display: grid !important; }
.vlt-zielblatt .vlt-zielblatt__inhalt > .vlt-klar-milestone { display: flex !important; }
.vlt-zielblatt .vlt-zielblatt__inhalt > .vlt-klar-goal-footer { display: flex !important; }
.vlt-zielblatt .vlt-zielblatt__inhalt > .vlt-klar-goal-month,
.vlt-zielblatt .vlt-zielblatt__inhalt > .vlt-klar-mobile-goal-metrics,
.vlt-zielblatt .vlt-zielblatt__inhalt > .vlt-klar-weeks { display: none !important; }

/* 2.10.1055, Nachtrag 2 - gemessen im Blatt:
     Titel   display none (die Handyansicht blendet ihn aus, dort steht
             die Ueberschrift schon in der Kopfleiste)
     Fuss    position absolute, top 304, bottom 0 - in der Handyansicht
             klebt die Knopfleiste am unteren Rand des Bildschirms. Im
             Blatt legte sie sich dadurch ueber das Wochenziel.
   Beides hier zurueckgenommen, Kette mit html body voran, damit sie
   die Regeln aus cockpit-klar.css schlaegt. */
html body .vlt-cockpit .vlt-zielblatt .vlt-zielblatt__inhalt > .vlt-klar-goals-title {
  display: block !important;
  margin-bottom: 2px !important;
}
html body .vlt-cockpit .vlt-zielblatt .vlt-zielblatt__inhalt > .vlt-klar-goal-footer {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2.10.1056 - Auswertung im selben Blatt, dazu der Zurueck-Knopf. */
.vlt-zielblatt__zurueck {
  position: absolute;
  top: 14px;
  left: 16px;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 5px 11px 5px 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 45, 30, 0.06);
  color: #2f5d40;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.vlt-zielblatt.is-auswertung .vlt-zielblatt__zurueck { display: inline-flex; }
.vlt-zielblatt__zurueck:hover { background: rgba(20, 45, 30, 0.12); }
.vlt-zielblatt__zurueck svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vlt-zielblatt.is-auswertung .vlt-zielblatt__blatt { padding-top: 52px; }

/* Die Kopfzeile der Auswertung bringt zwei Knoepfe mit, die zur
   Handy-Mechanik gehoeren und in der Kopie nichts tun: die Klappliste
   "Auswertung" und das Kreuz zum Verlassen. Beide hier aus, die
   Uebersichtsleiste mit Wochen-, Monats- und Jahresziel bleibt. */
html body .vlt-cockpit .vlt-zielblatt .vlt-zielblatt__inhalt .vlt-klar-analysis-toggle,
html body .vlt-cockpit .vlt-zielblatt .vlt-zielblatt__inhalt .vlt-klar-table-focus {
  display: none !important;
}
html body .vlt-cockpit .vlt-zielblatt .vlt-zielblatt__inhalt.vlt-klar-mobile-performance {
  display: block !important;
  width: auto !important;
  max-width: none !important;
}

/* 2.10.1056, Nachtrag - die Uebersichtsleiste der Auswertung.
   Gemessen im Blatt: .vlt-klar-analysis-preview stand als schmale
   Spalte da (62 x 133) und lief oben aus der 64 hohen Kopfzeile
   heraus, quer ueber den Zurueck-Knopf. In der Handyansicht sitzt sie
   in einer waagerechten Leiste. Hier als vier gleiche Spalten. */
html body .vlt-cockpit .vlt-zielblatt .vlt-zielblatt__inhalt .vlt-klar-analysis-head {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
html body .vlt-cockpit .vlt-zielblatt .vlt-zielblatt__inhalt .vlt-klar-analysis-preview {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  position: static !important;
  margin: 0 !important;
}
html body .vlt-cockpit .vlt-zielblatt .vlt-zielblatt__inhalt .vlt-klar-analysis-preview > span {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  align-items: flex-start !important;
  padding: 7px 9px !important;
  border: 1px solid #dfe7e1 !important;
  border-radius: 12px !important;
  background: #fff !important;
}


/* ============================================================
   VLT-DESKTOP-KONTAKTE (ab 2.10.1057)

   Christian: "Bitte noch mal nach den Kontakten gucken, die sind noch
   nicht richtig aufgebaut. In der Smartphone-Ansicht gibt es die ja
   schon, da sind sie richtig."

   Gemessen, dieselbe Kontaktzeile in beiden Ansichten:
     Handy    ARTICLE  display grid, Spalten 54px 186px 100px, 364 x 92
              Avatar flex 40 x 40 · Name flex 186 x 69 · Knoepfe grid 100 x 32
     Desktop  ARTICLE  display block, keine Spalten, 876 x 136
              Avatar inline-flex · Name inline-block 313 x 29
              Knoepfe block 876 x 96  -> standen untereinander

   Ursache: die gesamte Gestaltung der Kontaktliste steht in
   @media (max-width: 760px). Auf dem Desktop greift davon nichts,
   also faellt die Zeile auf Block zurueck: Name und Rolle laufen
   ineinander, die drei Knoepfe stapeln sich untereinander.

   Hier dieselbe Aufteilung fuer den Desktop, nur mit dehnbarer
   Namensspalte statt fester 186 Punkte.
   ============================================================ */
@media (min-width: 761px) {
  html body .vlt-cockpit .vlt-klar-sheet__contacts article {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px 12px !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid #e8ede9 !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet__contacts .vlt-klar-contact-avatar {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    background: #e8f4eb !important;
    color: #16813a !important;
    overflow: hidden !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet__contacts .vlt-klar-contact-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet__contacts .vlt-klar-contact-identity {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 4px 2px !important;
    background: transparent !important;
    border: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    cursor: pointer !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet__contacts .vlt-klar-contact-actions {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 32px !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: end !important;
    width: auto !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet__contacts .vlt-klar-contact-actions a,
  html body .vlt-cockpit .vlt-klar-sheet__contacts .vlt-klar-contact-actions button {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
  }
}

/* 2.10.1057, Nachtrag - Suchfeld, Filterknoepfe, Buchstabenleiste und
   die drei Kontaktknoepfe. Alles gemessen in der Handyansicht:
     .vlt-klar-namensfolge   flex, Abstand 8; Knoepfe rund (999),
                             Polster 7/11, weiss, der aktive gruen
     .vlt-klar-sheet__search LABEL flex, Abstand 8, Ecke 11,
                             Rahmen 1 #dfe7e1, Polster 5/40/5/12
     .vlt-klar-sheet__clear  30 x 30, rund, #e6eae8
     Kontaktknoepfe          1. weiss mit gruenem Rand, 2. gruen,
                             3. hellgruen - je 32 x 32 rund
     Buchstabenleiste        auf dem Handy ueber 550 Punkte gestreckt.
                             Im Desktop ist die Liste viel hoeher,
                             dadurch trieben die Buchstaben weit
                             auseinander - hier oben angeheftet. */
@media (min-width: 761px) {
  html body .vlt-cockpit .vlt-klar-sheet .vlt-klar-namensfolge {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 10px !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet .vlt-klar-namensfolge > button {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 32px !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    border: 1px solid #dfe7e1 !important;
    background: #ffffff !important;
    cursor: pointer !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet .vlt-klar-namensfolge > button.is-active,
  html body .vlt-cockpit .vlt-klar-sheet .vlt-klar-namensfolge > button.is-an {
    background: #16813a !important;
    border-color: #16813a !important;
    color: #ffffff !important;
  }

  html body .vlt-cockpit .vlt-klar-sheet .vlt-klar-sheet__search {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 12px !important;
    border: 1px solid #dfe7e1 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    margin-bottom: 12px !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet .vlt-klar-sheet__search input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    padding: 6px 2px !important;
    font-size: 15px !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet .vlt-klar-sheet__clear {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #e6eae8 !important;
    cursor: pointer !important;
  }

  html body .vlt-cockpit .vlt-klar-contact-browser > .vlt-klar-contact-jump {
    display: grid !important;
    align-content: start !important;
    align-self: start !important;
    gap: 3px !important;
    position: sticky !important;
    top: 6px !important;
    font-size: 11px !important;
    text-align: center !important;
  }

  /* 2.10.1057, Korrektur: die drei Felder heissen
     .vlt-klar-contact-action-slot mit is-email / is-whatsapp / is-phone.
     Fehlt ein Kontaktweg, ist das Feld LEER (0 Kinder) - faerbt man das
     Feld selbst, stehen dort leere Kacheln. Gemessen bei Althoff:
     nur E-Mail vorhanden, WhatsApp und Telefon leer. Also traegt der
     Link darin die Farbe, nicht das Feld.
     Und der aktive Filterknopf ist ueber aria-pressed markiert, nicht
     ueber eine Klasse - "Alle" stand vorher weiss auf weiss. */
  html body .vlt-cockpit .vlt-klar-sheet__contacts .vlt-klar-contact-action-slot {
    background: transparent !important;
    border: 0 !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet__contacts .vlt-klar-contact-action-slot > a,
  html body .vlt-cockpit .vlt-klar-sheet__contacts .vlt-klar-contact-action-slot > button {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet__contacts .vlt-klar-contact-action-slot.is-email > a {
    background: #ffffff !important;
    color: #16813a !important;
    border: 1px solid rgba(22, 129, 58, 0.34) !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet__contacts .vlt-klar-contact-action-slot.is-whatsapp > a {
    background: #16813a !important;
    color: #ffffff !important;
    border: 1px solid #16813a !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet__contacts .vlt-klar-contact-action-slot.is-phone > a {
    background: #edf6ef !important;
    color: #16813a !important;
    border: 1px solid rgba(22, 129, 58, 0.18) !important;
  }
  html body .vlt-cockpit .vlt-klar-sheet .vlt-klar-namensfolge > button[aria-pressed="true"] {
    background: #16813a !important;
    border-color: #16813a !important;
    color: #ffffff !important;
  }
}


/* ============================================================
   VLT-DESKTOP-KONTAKTE-SCROLLEN (ab 2.10.1058)

   Christian: "Die Kontakte sollen scrollen koennen - Mausrad oder
   zwei Finger auf dem Trackpad. Und die Buchstabenleiste soll man
   anklicken koennen, damit es dorthin springt."

   Gemessen: .vlt-klar-contact-browser ist 940 x 550 gross, sein Inhalt
   aber 2475 hoch (31 Kontakte) - und er steht auf
   overflow-y: hidden. Der Rest der Liste war schlicht abgeschnitten
   und mit keiner Geste erreichbar.

   Der aussenliegende Bogen (.vlt-klar-sheet) hat zwar overflow auto,
   ist aber genauso hoch wie sein Inhalt (782 von 782) - also scrollt
   auch dort nichts.

   Loesung: der Browser fuellt den Rest des Bogens und scrollt selbst.
   Der Bogen ist ein Flex-Element, deshalb flex: 1 1 auto zusammen mit
   min-height: 0 - ohne die 0 schrumpft ein Flex-Kind nicht unter seine
   Inhaltshoehe und scrollt nie.
   Die Buchstabenleiste bleibt beim Scrollen stehen (sticky, war schon
   in 2.10.1057 gesetzt).
   ============================================================ */
@media (min-width: 761px) {
  /* 2.10.1059, Korrektur: NICHT der Browser scrollt, sondern die
     Liste darin. Die vorhandene Buchstaben-Sprungfunktion in
     cockpit.js scrollt gezielt [data-vlt-klar-contact-list] - und das
     ist .vlt-klar-sheet__contacts. Scrollte stattdessen der Browser,
     lief der Sprung ins Leere (gemessen: Klick auf S liess scrollTop
     auf 0). Jetzt scrollt die Liste selbst, damit greifen Mausrad,
     Trackpad UND die Buchstabenleiste auf demselben Element.
     Die Leiste bleibt dabei von allein stehen, weil sie in der
     Nachbarspalte liegt und nicht mitscrollt. */
  html body .vlt-cockpit .vlt-klar-sheet .vlt-klar-contact-browser {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }
  html body .vlt-cockpit .vlt-klar-contact-browser > .vlt-klar-sheet__contacts {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    padding-right: 6px !important;
  }
  html body .vlt-cockpit .vlt-klar-contact-browser > .vlt-klar-sheet__contacts::-webkit-scrollbar {
    width: 10px;
  }
  html body .vlt-cockpit .vlt-klar-contact-browser > .vlt-klar-sheet__contacts::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(22, 129, 58, 0.32);
    background-clip: content-box;
  }
  html body .vlt-cockpit .vlt-klar-contact-browser > .vlt-klar-sheet__contacts::-webkit-scrollbar-thumb:hover {
    background: rgba(22, 129, 58, 0.55);
    background-clip: content-box;
  }
  html body .vlt-cockpit .vlt-klar-sheet .vlt-klar-contact-browser::-webkit-scrollbar {
    width: 10px;
  }
  html body .vlt-cockpit .vlt-klar-sheet .vlt-klar-contact-browser::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(22, 129, 58, 0.32);
    background-clip: content-box;
  }
  html body .vlt-cockpit .vlt-klar-sheet .vlt-klar-contact-browser::-webkit-scrollbar-thumb:hover {
    background: rgba(22, 129, 58, 0.55);
    background-clip: content-box;
  }
  html body .vlt-cockpit .vlt-klar-contact-browser > .vlt-klar-contact-jump > button {
    cursor: pointer !important;
    border: 0 !important;
    background: transparent !important;
    padding: 1px 0 !important;
    line-height: 1.1 !important;
  }
  html body .vlt-cockpit .vlt-klar-contact-browser > .vlt-klar-contact-jump > button:hover {
    color: #16813a !important;
    font-weight: 800 !important;
  }
}

/* VLT-HOCH-TERMINE-MITTE — die drei Termine mittig in der Vertriebskalenderkarte,
   nichts wird unten abgeschnitten (Handy-/Klar-Ansicht). */
html body .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__utility .vlt-elegant-overview__appointments--utility {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  justify-content: center !important;
  align-content: center !important;
}

/* VLT-DESKTOP-KONTAKTKARTE — Kontaktkarte und Buchstaben-Lupe auch am Rechner.
   Beides gab es nur in der Handy-Medienabfrage von cockpit-klar.css;
   hier 1:1 uebernommen und auf breite Fenster umgestellt. */
@media (min-width: 761px) {
html body .vlt-cockpit .vlt-klar-contact-card {
        position:absolute;
        z-index:18;
        top:72px;
        right:12px;
        left:12px;
        display:flex;
        max-height:calc(100% - 88px);
        overflow:auto;
        flex-direction:column;
        align-items:center;
        padding:22px 18px 20px;
        border:1px solid #d7e5da;
        border-top:3px solid #16813a;
        border-radius:18px;
        background:#fff;
        box-shadow:0 16px 38px rgba(18,55,31,.2);
        box-sizing:border-box;
        -webkit-overflow-scrolling:touch;
    }
    html body .vlt-cockpit .vlt-klar-contact-card[hidden] { display:none !important; }
    html body .vlt-cockpit .vlt-klar-contact-card__close {
        position:absolute;
        top:12px;
        right:12px;
        display:grid;
        width:38px;
        height:38px;
        padding:0;
        place-items:center;
        border:0;
        border-radius:50%;
        background:#edf5ef;
        color:#173f27;
        font-size:25px;
        line-height:1;
        cursor:pointer;
    }
    html body .vlt-cockpit .vlt-klar-contact-card__avatar {
        display:grid;
        width:112px;
        height:112px;
        margin-top:4px;
        place-items:center;
    }
    html body .vlt-cockpit .vlt-klar-contact-card__avatar .vlt-klar-contact-avatar {
        display:grid;
        width:112px;
        height:112px;
        overflow:hidden;
        place-items:center;
        border-radius:50%;
        background:#e8f4eb;
        color:#16813a;
        font-size:30px;
        font-weight:850;
    }
    html body .vlt-cockpit .vlt-klar-contact-card h3 {
        margin:12px 44px 2px;
        color:#173f27;
        font-size:21px;
        line-height:1.2;
        text-align:center;
    }
    html body .vlt-cockpit .vlt-klar-contact-card > p {
        margin:0;
        color:#6a776f;
        font-size:12px;
        text-align:center;
    }
    html body .vlt-cockpit .vlt-klar-contact-card dl {
        display:grid;
        width:100%;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        margin:18px 0 16px;
    }
    html body .vlt-cockpit .vlt-klar-contact-card dl > div {
        min-width:0;
        padding:9px 10px;
        border-radius:10px;
        background:#f5f8f6;
        text-align:center;
    }
    html body .vlt-cockpit .vlt-klar-contact-card dt {
        color:#7a877f;
        font-size:8px;
        font-weight:850;
        letter-spacing:.1em;
        text-transform:uppercase;
    }
    html body .vlt-cockpit .vlt-klar-contact-card dd {
        margin:3px 0 0;
        overflow-wrap:anywhere;
        color:#173f27;
        font-size:12px;
        font-weight:750;
    }
    html body .vlt-cockpit .vlt-klar-contact-card__actions {
        width:100%;
    }
    html body .vlt-cockpit .vlt-klar-contact-card__actions .vlt-klar-contact-actions {
        display:grid;
        width:100%;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:12px;
    }
    html body .vlt-cockpit .vlt-klar-contact-card__actions .vlt-klar-contact-action-slot {
        display:grid;
        width:auto;
        height:auto;
        justify-items:center;
        gap:5px;
        color:#516159;
        font-size:9px;
        font-weight:800;
    }
html body .vlt-cockpit .vlt-klar-contact-jump.is-indexing button.is-near-2 {
        z-index:2;
        transform:translateX(1px) scale(1.14);
    }
    html body .vlt-cockpit .vlt-klar-contact-jump.is-indexing button.is-near-1 {
        z-index:3;
        background:#edf6ef;
        transform:translateX(3px) scale(1.38);
    }
    html body .vlt-cockpit .vlt-klar-contact-jump.is-indexing button.is-active {
        z-index:4;
        background:#16813a;
        color:#fff;
        box-shadow:0 3px 10px rgba(22,129,58,.24);
        transform:translateX(6px) scale(1.72);
    }
    html body .vlt-cockpit .vlt-klar-contact-jump.is-indexing button.is-active::after {
        content:attr(data-vlt-contact-letter);
        position:absolute;
        top:50%;
        left:52px;
        display:grid;
        width:34px;
        height:34px;
        place-items:center;
        border:2px solid #fff;
        border-radius:50%;
        background:#16813a;
        color:#fff;
        box-shadow:0 5px 15px rgba(18,70,34,.25);
        font-size:14px;
        transform:translateY(-50%) scale(.58);
        transform-origin:left center;
    }
  /* Karte mittig ins Blatt statt ueber die volle Breite */
  html body .vlt-cockpit .vlt-klar-contact-card {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    width: min(460px, calc(100% - 64px)) !important;
    max-height: min(620px, calc(100% - 96px)) !important;
    transform: translate(-50%, -50%) !important;
    padding: 26px 24px 22px !important;
  }
  /* Gemessen: die Buchstabenleiste steht am Rechner LINKS neben der Liste,
     die Blase gehoert also nach rechts ueber die Liste - wie am Handy. */
  html body .vlt-cockpit .vlt-klar-contact-jump.is-indexing button.is-active::after {
    left: 46px !important;
    right: auto !important;
    transform-origin: left center !important;
  }
}

/* VLT-DESKTOP-KONTAKTKARTE-WEGE — die drei Kontaktwege in der Karte
   wie in der Liste: runde Knoepfe, WhatsApp gefuellt. */
@media (min-width: 761px) {
  html body .vlt-cockpit .vlt-klar-contact-card__actions .vlt-klar-contact-actions {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html body .vlt-cockpit .vlt-klar-contact-card__actions .vlt-klar-contact-action-slot {
    display: grid !important;
    width: auto !important;
    height: auto !important;
    justify-items: center !important;
    gap: 5px !important;
    color: #516159 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
  }
  html body .vlt-cockpit .vlt-klar-contact-card__actions .vlt-klar-contact-action-slot > a {
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center !important;
    border: 1px solid rgba(22, 129, 58, 0.34) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #16813a !important;
    box-sizing: border-box !important;
  }
  html body .vlt-cockpit .vlt-klar-contact-card__actions .vlt-klar-contact-action-slot.is-whatsapp > a {
    background: #16813a !important;
    color: #fff !important;
  }
}

/* VLT-HOCH-TERMINE-SCHRUMPF (2.10.1064) — Christian: "Das Galaxy Fold zeigt
   im Vertriebskalender nur 2,15 Eintraege an und der erste Termin wandert
   oben raus." Gemessen: Kasten 140 hoch, drei Zeilen zu je 58 macht 174.
   Auf kurzen Karten duerfen die Zeilen daher schrumpfen; auf hohen Karten
   bleiben sie bei 58, weil max-height sie deckelt.
   Fold nachgemessen: 3 x 47 = 141 in 140, alles sichtbar. */
html body .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__appointments--utility > button {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 58px !important;
  height: auto !important;
}

/* VLT-HOCH-TERMINE-KASTEN (2.10.1065) — Christian: "Bei Galaxy Fold ist der
   untere Termin abgeschnitten."
   Gemessen: die Karte ist ein Raster mit den Zeilen 36px 24px 140px, also
   200 Punkte Inhalt in einer 180 Punkte hohen Karte mit overflow: hidden.
   Der Terminkasten endete 21 Punkte UNTER der Kartenkante. Genauso auf dem
   iPhone: 36 + 24 + 176 = 236 in einer 218er Karte.
   Jetzt nimmt der Kasten genau den Rest der Karte (minmax(0,1fr)) und die
   Zeilen schrumpfen mit - dadurch endet er immer bündig innen. */
html body .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__utility {
  grid-template-rows: 36px 24px minmax(0, 1fr) !important;
}
html body .vlt-cockpit.vlt-cockpit--mobile-klar .vlt-elegant-overview__utility .vlt-elegant-overview__appointments--utility {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
}


/* 2.10.1150 - Der Kurzberichter stand auf Christians iPhone querformatig und
   wurde dadurch beschnitten. Das feste DIN-A4-Verhaeltnis gab es zwar schon,
   es hing aber an der Variante .vlt-cockpit--desktop-elegant2. Fehlt die,
   fuellt der Rahmen einfach seine Zelle - flach und breit. Diese Regel gilt
   fuer jede Variante und steht bewusst am Dateiende. */
/* 2.10.1154 - Nachbesserung zu 1150. Auf Christians iPhone hing der
   Rahmen 87 Punkte UNTER der Kartenkante - gemessen auf dem Geraet
   selbst: Fenster 441 x 895, Web-App, abInfo 87. In Chrome bei genau
   demselben Fenster: minus 2. Der Grund: der Rahmen war vierfach
   bestimmt - top, bottom, left, right UND aspect-ratio. Chrome nimmt
   die Hoehe aus top/bottom und rechnet die Breite aus dem Verhaeltnis;
   Safari nimmt die Breite und rechnet die Hoehe - dann ist er zu hoch.
   1150 hatte ausserdem den richtigen Deckel der Handy-Regel
   (max-height: calc(100% - top - 10px)) durch ein blosses 100% ersetzt.
   Jetzt steht bottom auf auto, damit ist die Doppelbestimmung weg, und
   der Deckel ist wieder der echte. */
html body .vlt-cockpit.vlt-cockpit .vlt-elegant-overview__slideshow{
    aspect-ratio: 210 / 297 !important;
    bottom: auto !important;
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    justify-self: center !important;
    align-self: start !important;
}
/* Nur am Handy ist der Rahmen absolut gesetzt und braucht den echten
   Deckel. Am Rechner wuerde er den Bericht auf 280 x 275 quetschen -
   gemessen; dort bleibt es bei 280 x 370. */
@media (max-width: 900px){
    /* 2.10.1156 - Auf dem Geraet gemessen: der Rahmen war jetzt zwar
       drin (minus 12), lag aber quer - 186 x 156. Grund: die Handy-Regel
       setzt left:10px UND right:10px mit !important. Safari nimmt daraus
       die Breite (207 minus 20 gleich 187) und quetscht die Hoehe unter
       den Deckel. Chrome nimmt stattdessen das Seitenverhaeltnis - daher
       war es in der Vorschau hochkant und auf dem iPhone quer.
       Jetzt steht right auf auto und die Hoehe fest: damit ist nur noch
       EINE Groesse frei, die Breite, und sie kommt aus dem Verhaeltnis.
       Beide Browser koennen es nur noch gleich ausrechnen. */
    html body .vlt-cockpit.vlt-cockpit .vlt-elegant-overview__slideshow{
        right: auto !important;
        bottom: auto !important;
        height: calc(100% - var(--vlt-calendar-slideshow-top, 85px) - 10px) !important;
        width: auto !important;
        max-height: calc(100% - var(--vlt-calendar-slideshow-top, 85px) - 10px) !important;
    }
}

/* 2.10.1163 - Christian: "Die Info Texte sollen geschickter umgebrochen
   werden. So wie in unseren Vorschauen. Somit kann sich der Kurzberichter
   nach oben ausdehnen." Deutsche Silbentrennung statt harter Umbrueche:
   der Text kommt mit weniger Zeilen aus, und was er nicht braucht, holt
   sich der Bildrahmen darunter. */
@media (max-width: 900px){
    html body .vlt-cockpit.vlt-cockpit .vlt-elegant-overview__info-messages,
    html body .vlt-cockpit.vlt-cockpit .vlt-elegant-overview__info-messages *{
        -webkit-hyphens: auto !important;
        hyphens: auto !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        text-wrap: pretty;
    }
}

/* 2.10.1176 - Christian: "Ich bin jetzt schon langsam dafuer, die
   Cockpitmeldung gar nicht mehr anzuzeigen ... so koennen wir den ganzen
   Kurzbericht da auf der linken Seite abbilden."
   Der eigentliche Grund, warum die Meldungen so viel Aerger gemacht haben:
   sie hatten in der Spalte nur 147 Punkte Breite. Derselbe Satz ueber die
   ganze Kartenbreite braucht keine Silbentrennung und keine Verkleinerung.
   Ueberschrift, Meldung und Laufpunkte sind hier nur AUSGEBLENDET, nicht
   entfernt - wo sie kuenftig stehen, ist noch offen. */
@media (max-width: 900px){
    /* Gewicht: gegen diese Regel steht
       html body:not(.vlt-e2-aus) .vlt-cockpit.vlt-cockpit--mobile-elegant ...
       mit display:flex !important - vier Klassen. Deshalb hier Klassen
       doppelt genannt, sonst gewinnt die andere. Gemessen: vorher blieb
       der Meldungskasten auf flex stehen und lag ueber dem Bildrahmen. */
    html body .vlt-cockpit.vlt-cockpit.vlt-cockpit .vlt-elegant-overview__info > header,
    html body .vlt-cockpit.vlt-cockpit.vlt-cockpit .vlt-elegant-overview__info-messages.vlt-elegant-overview__info-messages,
    html body .vlt-cockpit.vlt-cockpit.vlt-cockpit .vlt-elegant-overview__info-dots.vlt-elegant-overview__info-dots{
        display: none !important;
    }
    /* 2.10.1178 - Christian: "Da gibt's noch eine waagerechte Linie drin.
       Das war die Trennlinie fuer die Cockpitanzeige." Es ist die Haarlinie
       .vlt-elegant-overview__info::after - 0,97 Punkte hoch ueber die volle
       Spaltenbreite. Sie hat den Meldungsbereich vom Bildrahmen getrennt;
       ohne Meldungen trennt sie nichts mehr. */
    html body .vlt-cockpit.vlt-cockpit.vlt-cockpit .vlt-elegant-overview__info::after,
    html body .vlt-cockpit.vlt-cockpit.vlt-cockpit .vlt-elegant-overview__info::before{
        content: none !important;
        display: none !important;
        border: 0 !important;
    }
}

/* 2.10.1179 - Christian: "Die vier Buttons unterhalb am Kurzberichter
   gerne groesser, breiter, damit man sie mit dem Finger auf dem Smartphone
   gut erreichen kann." Gemessen waren sie 23 x 23 Punkte in einer 113
   Punkte breiten Leiste - Apple empfiehlt 44. Jetzt spannt die Leiste ueber
   die ganze Breite des Bildrahmens und die vier teilen sie sich zu gleichen
   Teilen; auf Christians Geraet sind das rund 42 x 40 Punkte pro Knopf. */
@media (max-width: 900px){
    html body .vlt-cockpit.vlt-cockpit.vlt-cockpit .vlt-elegant-overview__slideshow .vlt-diashow-steuerung{
        left: 6px !important;
        right: 6px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        margin: 0 !important;
        display: flex !important;
        gap: 6px !important;
        padding: 5px 6px !important;
        border-radius: 15px !important;
    }
    html body .vlt-cockpit.vlt-cockpit.vlt-cockpit .vlt-elegant-overview__slideshow .vlt-diashow-steuerung .vlt-diashow-knopf{
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        font-size: 17px !important;
        border-radius: 11px !important;
    }
    html body .vlt-cockpit.vlt-cockpit.vlt-cockpit .vlt-elegant-overview__slideshow .vlt-diashow-steuerung .vlt-diashow-knopf svg{
        width: 19px !important;
        height: 19px !important;
    }
}

/* 2.10.1182 - Christian: "Bitte die Buttons auch vergroessern, wenn
   Vollbildschirmmodus Kurzberichter." Der Vollbildschirm hat eigene
   Knoepfe, die von der Leiste am Bildrahmen nichts wissen. Gemessen im
   Stylesheet: Schliessen 40 x 40, Pfeile 46 x 46, Fussleiste 30 x 30,
   Symbole 16 bis 22. Am Handy jetzt durchgehend auf Fingermass. */
@media (max-width: 900px){
    html body .vlt-diashow-schirm.vlt-diashow-schirm .vlt-diashow-schirm__zu{
        width: 48px !important;
        height: 48px !important;
        top: 12px !important;
        right: 12px !important;
    }
    html body .vlt-diashow-schirm.vlt-diashow-schirm .vlt-diashow-schirm__pfeil{
        width: 54px !important;
        height: 54px !important;
    }
    html body .vlt-diashow-schirm.vlt-diashow-schirm .vlt-diashow-schirm__pfeil--links{ left: 8px !important; }
    html body .vlt-diashow-schirm.vlt-diashow-schirm .vlt-diashow-schirm__pfeil--rechts{ right: 8px !important; }
    html body .vlt-diashow-schirm.vlt-diashow-schirm .vlt-diashow-schirm__zu svg,
    html body .vlt-diashow-schirm.vlt-diashow-schirm .vlt-diashow-schirm__pfeil svg{
        width: 25px !important;
        height: 25px !important;
    }
    html body .vlt-diashow-schirm.vlt-diashow-schirm .vlt-diashow-schirm__fuss{
        gap: 12px !important;
        padding: 9px 13px !important;
        bottom: 22px !important;
    }
    html body .vlt-diashow-schirm.vlt-diashow-schirm .vlt-diashow-schirm__fuss .vlt-diashow-knopf{
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        flex: 0 0 auto !important;
    }
    html body .vlt-diashow-schirm.vlt-diashow-schirm .vlt-diashow-schirm__fuss .vlt-diashow-knopf svg{
        width: 22px !important;
        height: 22px !important;
    }
    html body .vlt-diashow-schirm.vlt-diashow-schirm .vlt-diashow-schirm__zaehler{
        font-size: 14px !important;
        min-width: 60px !important;
    }
    html body .vlt-diashow-schirm.vlt-diashow-schirm .vlt-diashow-schirm__laden{
        padding: 11px 18px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
}

/* 2.10.1183 - Christian: "Hinter dem Kurzberichter liegt noch eine andere
   Karte, bitte im Hintergrund entfernen, aber dennoch versuchen, dass die
   3D-Optik/Tiefe besteht." Gemessen: .vlt-elegant-overview__info ist 207 x
   274 weiss, der Bildrahmen 182 x 251 - die Karte schaut also links, rechts
   und unten hervor. Sie verliert ihre Flaeche; die Tiefe bekommt jetzt das
   Blatt selbst: heller Grat oben, weicher Schlagschatten nach unten. Die
   senkrechte Trennlinie zur rechten Spalte bleibt. */
@media (max-width: 900px){
    html body .vlt-cockpit.vlt-cockpit.vlt-cockpit .vlt-elegant-overview__info{
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    /* 2.10.1185 - Nachbesserung zu 1183. Christian sah weiter "eine Karte
       dahinter". Nachgemessen: an allen drei Punkten um das Blatt ist jedes
       Element durchsichtig, das Weiss kommt vom App-Hintergrund. Es war mein
       eigener Schatten - weisse Flaeche, 10 Punkte Ecken und ein gestaffelter
       Schlagschatten lesen sich wie ein zweites Blatt darunter. Jetzt keine
       eigene Flaeche mehr, kleinere Ecken, ein einziger weicher Schatten
       ohne harte Kante: Tiefe bleibt, die zweite Karte verschwindet. */
    html body .vlt-cockpit.vlt-cockpit.vlt-cockpit .vlt-elegant-overview__slideshow{
        background: transparent !important;
        border-radius: 7px !important;
        box-shadow:
            0 2px 6px rgba(24,49,32,.13),
            0 10px 22px rgba(24,49,32,.10) !important;
    }
}


/* =====================================================================
   VLT-DESKTOP-MELDUNGEN-AUS
   2.10.1210 - Christian: "Wir muessen die Desktop-Ansicht Cockpit noch
   anpassen an die neue Handy-Sicht, was den Kurzberichter angeht bzw.
   die ausgeblendeten Cockpitmeldungen."
   Am Handy sind Kopfzeile, Meldungen und Laufpunkte seit 2.10.1176 aus,
   der Kurzberichter bekommt die ganze Spalte. Am Rechner standen sie
   noch: gemessen bei 1440 x 900 Meldungen 272 x 56 @282, Laufpunkte
   272 x 12 @350. Dieselbe Ausblendung also auch dort.
   Gebunden an .vlt-cockpit--desktop-elegant2 und an min-width 901px:
   Klassik und Klar bleiben unberuehrt, die Handy-Regel ebenfalls. */
@media (min-width: 901px){
    html body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info > header,
    html body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info-messages,
    html body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__info-dots{
        display: none !important;
    }
}

/* ---------------------------------------------------------------------
   VLT-DESKTOP-BERICHT-A4
   2.10.1211 - Gemessen bei 1440 x 900 und 1920 x 1080: der Kurzberichter
   stand auf 280.13 x 370.17, also Verhaeltnis 0.757 statt 0.707. Der
   Kasten traegt aspect-ratio 210/297, aber zugleich max-height: 100%.
   Die Zelle ist 370 hoch, der Deckel gewinnt, und das Verhaeltnis kippt -
   dasselbe Muster wie am Handy. Ohne den Deckel bestimmt das Verhaeltnis
   die Hoehe: 280 x 396. Der Platz dafuer ist seit dem Ausblenden der
   Meldungen da (157 Punkte oben frei geworden).
   Die Breite bleibt der Begrenzer - mehr Hoehe ginge nur mit einer
   breiteren Spalte, das waere eine eigene Entscheidung. */
@media (min-width: 901px){
    html body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow{
        max-height: none !important;
        height: auto !important;
        aspect-ratio: 210 / 297 !important;
    }
}

/* ---------------------------------------------------------------------
   VLT-DESKTOP-COCKPITFELD-AUS
   2.10.1212 - Die Ausblendung in 2.10.1210 hat nur die Innenteile
   getroffen. Nachgemessen bei 1440 x 900 stand der Kasten drumherum noch:
   .vlt-e2-cockpitfeld 280 x 124, oben 278, unten 402, mit dem Text
   "Cockpit 1/2 Denkt an die Woc...". Am Handy sind die Meldungen seit
   2.10.1176 ganz weg - am Rechner jetzt ebenso. */
@media (min-width: 901px){
    html body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-e2-cockpitfeld{
        display: none !important;
    }
}

/* ---------------------------------------------------------------------
   VLT-KALENDERKARTE-MITWACHSEN
   2.10.1220 - Christian: "Im Cockpit rutscht der dritte Kalendereintrag
   unten aus der Karte raus. In der Vorschau nicht."
   Nachgemessen bei 1728 x 943 mit drei echten Terminen:
     .vlt-elegant-overview__utility  633 x 237, overflow: hidden
     tiefster Eintrag endet 2 Punkte ueber der Unterkante
   Es passt also gerade eben - zwei Punkte Luft. Die Karte kann nicht
   mitwachsen, weil die Zeilenhoehe im Raster der .vlt-klar-view fest auf
   84px 237px 282.688px steht und die Karte selbst overflow: hidden hat.
   Bei anderer Fenstergroesse oder einer Zeile mehr wird abgeschnitten.
   Deshalb stehen die Zeilen jetzt auf auto: gemessen aendert das hier
   nichts (237 wird zu 237.8), laesst die Karte aber mitwachsen statt den
   dritten Eintrag zu kappen.
   Zuruecknehmen: diesen Block loeschen. */
/* 2.10.1222: Die Regel stand in @media (min-width: 901px) und war an die
   Rechner-Fassung gebunden - am Handy hat sie also nie gegriffen. Christian:
   "Der dritte Termin wandert nach unten raus, zum fuenften Mal." Deshalb
   gilt sie jetzt fuer jede Breite und jede Fassung. Das Raster bekommt
   auto-Zeilen, die Karte darf mitwachsen, und der Inhalt wird nicht mehr
   am Kartenrand abgeschnitten. */
/* 2.10.1224 - Kalenderkarte: die drei Termine haengen unten heraus.
   Auf Christians iPhone gemessen (Fuehler 2.10.1224):
     kalender: 417 x 224 @556  braucht: 236  ueberstand: 19
   In der Vorschau bei 441 x 895 exakt dieselben Zahlen - der Fehler war
   also die ganze Zeit reproduzierbar, ich hatte nur nie am Handy in diese
   Karte gesehen.
   Keine einzige Regel setzt die Hoehe (alle 79 Stilvorlagen durchsucht),
   sie ergibt sich aus dem Raster. Deshalb wird das Raster NICHT angefasst -
   das war der Fehlversuch 2.10.1222, der die Handy-Ansicht verschoben hat.
   Stattdessen nur eine Untergrenze am Kasten selbst.
   Gemessen mit min-height: max-content:
     Kalenderkarte  224 -> 245, Ueberstand 19 -> 0
     Monatskarte 417x309@232, Kurzberichter 175x247@264, Schale 417x769@50,
     Seitenhoehe 933 - alle unveraendert.
   Zuruecknehmen: diesen Block loeschen. */
html body .vlt-cockpit .vlt-elegant-overview__utility{
    min-height: max-content !important;
}

/* ---------------------------------------------------------------------
   VLT-ZIELPLANUNG-KARTENABSTAND
   2.10.1230 - Christian: "Die drei Karten haben zu wenig Abstand. Ich
   moechte, dass sie genau den gleichen Abstand haben wie im Cockpit."
   Gemessen bei 441 x 895:
     Cockpit      Monatskarte endet 540, Kalenderkarte beginnt 556  -> 16
     Zielplanung  Leiste endet 319, Karte beginnt 328               ->  9
                  Karte endet 637, naechste beginnt 646             ->  9
   Der Abstand kommt aus margin-bottom: 9px an .vltz-karte; der Behaelter
   .vlt-goals ist ein normaler Block ohne gap.
   Mit margin-top: 16px gemessen: 319 -> 335 und 644 -> 660, also beide
   Abstaende genau 16 wie im Cockpit. Die 9 unten bleiben stehen und fallen
   mit den 16 zusammen, deshalb reicht der obere Wert.
   Zuruecknehmen: diesen Block loeschen. */
html body .vlt-goals .vltz-karte{
    margin-top: 16px !important;
}

/* ============================================================
   2.10.1483 - Christian: "Bei Nachfasser ist die Queransicht nicht
   in Ordnung. Ich kann nicht hochscrollen, wo diese eins und zwei
   Umschaltknoepfe sind, da komm ich nicht mehr dran. Und der Heim-
   und Hausbanner, der ist da schwebend irgendwie."
   ------------------------------------------------------------
   Auf seinem Geraet gemessen (Melder QUER):
      151ms  441 x 895   Blatthoehe 895   Kopf 46..119
     1870ms  835 x 441   Blatthoehe 381   Kopf 32..99   (gedreht)
     1970ms  835 x 441   Blatthoehe 441   Kopf 0..0
     2945ms  835 x 441   Blatthoehe 441   Blaetterstand -9
   Ueber 36 Sekunden blieb die Blatthoehe gleich der Fensterhoehe
   und der Blaetterstand immer negativ - das Gummiband von iOS.
   Die Seite hatte also gar nichts zu blaettern.

   Grund: quer ist das Handy 835 Punkte breit und faellt damit ueber
   die Grenze von 760, ab der das Desktop-Layout gilt. Zwei Folgen:

   1) 'html:has(.vlt-cockpit){overflow-x:clip}' bleibt stehen,
      waehrend die Handy-Regel 'html,body{overflow-x:hidden}' nur bis
      760 gilt. Und clip schneidet nicht nur ab, es nimmt dem Blatt
      auch die Hoehe: eine Probe von 1500 Punkten liess die
      Blatthoehe unveraendert bei 441. Mit hidden statt clip wuchs
      sie auf 1974, und ein Blaettern auf 600 kam auch dort an.

   2) Eine Regel ab 761 Punkten Breite blendet Handy-Bauteile aus -
      darunter die Nachfasser-Kopfleiste. Daher Hoehe 0.

   Beides wird hier nur fuer die Nachfasser-Seite und nur bei
   flachem Querformat zurechtgerueckt. Die Kennungen stehen doppelt,
   weil die bestehenden Regeln sonst genauer sind.

   MERKSATZ: Ein quer gehaltenes Handy ist breiter als mancher
   Desktop-Umbruchpunkt. Wer die Grenze allein an der Breite
   festmacht, macht aus dem Handy einen Schreibtisch.
   ============================================================ */
@media (orientation: landscape) and (max-height: 560px) {
    html:has(.vlt-nf-kopf):has(.vlt-nf-kopf),
    body:has(.vlt-nf-kopf):has(.vlt-nf-kopf) {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    /* 2.10.1485 - Christian: "Schau dir das Querformat vom Cockpit an,
       so wie der Heim-und-Haus-Banner da oben ist. Natuerlich nicht mit
       VL Limburg als Schrift, sondern als Nachfasser. Eins zu eins den
       Banner, der auch im Cockpit ist, nur mit dem x-Zeichen zum
       Verlassen."

       Vorlage, im Querformat 835 x 441 am Cockpit gemessen:
         Kopfleiste  Hoehe 29, links 16, Polster 4px oben / 5px unten
         Logo        links 32, Hoehe 14
         rechter Knopf Hoehe 23

       Der Nachfasser-Kopf brachte dagegen: Hoehe 67, Logo links 11 und
       27 hoch, dazu eine zweite Textzeile ("Strassen, Hausnummern und
       Ergebnisse") und einen Schliessknopf von 48 Punkten. Genau das
       war Christians "viel zu hoch" und "Logo zu weit links".
       Hier wird er auf die Cockpit-Masse gebracht. */
    html body .vlt-nf-kopf.vlt-nf-kopf.vlt-nf-kopf,
    html body .vlt-nf-kopf-platz.vlt-nf-kopf-platz.vlt-nf-kopf-platz {
        display: block !important;
    }
    html body .vlt-nf-kopf .vlt-klar-head {
        padding: 4px 9px 5px !important;
        width: calc(100% - 24px) !important;
        margin: 0 auto !important;
    }
    html body .vlt-nf-kopf .vlt-klar-brand {
        gap: 8px !important;
        padding-left: 0 !important;
    }
    html body .vlt-nf-kopf .vlt-klar-brand img {
        height: 14px !important;
        width: auto !important;
    }
    html body .vlt-nf-kopf .vlt-klar-brand strong {
        font-size: 13px !important;
        line-height: 17px !important;
    }
    /* Die zweite Zeile hat den Kopf doppelt so hoch gemacht - im
       Cockpit steht sie im Querformat ebenfalls nicht. */
    html body .vlt-nf-kopf .vlt-klar-brand small {
        display: none !important;
    }
    /* Im Cockpit ist im Querformat nur ein Heim-und-Haus-Logo zu sehen.
       Auf der Nachfasser-Seite kam das Logo aus dem Testband dazu -
       das waren Christians zwei Banner. Im Querformat bleibt hier
       eines. */
    body:has(.vlt-nf-kopf) .vlt-e2-banner-logo,
    body:has(.vlt-nf-kopf) .vlt-e2-banner-logo img {
        display: none !important;
    }
    /* Der Schliessknopf bleibt, nur so gross wie der Knopf im Cockpit. */
    html body .vlt-nf-kopf .vlt-klar-kopf-zurueck {
        width: 20px !important;
        height: 20px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }
}

/* ============================================================
   2.10.1487 - Christian, mit Foto aus der Frontend-Vorschau:
   "Schau mal ganz unten an der Footerleiste, da ist ein weisser
   Hintergrund. Bitte diesen weissen Hintergrund unterhalb hinter
   der Footerleiste wegnehmen."
   ------------------------------------------------------------
   Gemessen im Rahmen 441 x 895:
     .vlt-cockpit-klar-shell   50..819   Verlauf bis rgb(246,249,247)
     .vlt-cockpit-klar-nav    811..887   (die Fussleiste)
     .vlt-cockpit               0..895   Hintergrund rein weiss
   Unterhalb von 819 endet also der getoente Verlauf der Schale und
   das reine Weiss der Flaeche darunter kommt durch - genau der
   Streifen hinter der Fussleiste.

   Die Hoehe der Schale wird im Buehnen-Block fein austariert
   (769 / 702 / 84 Punkte, "exakt bei LUFT 12") - daran wird nichts
   veraendert. Stattdessen bekommt die Flaeche darunter den Endton
   des Verlaufs, dann faellt die Kante nicht mehr auf.
   ============================================================ */
@media (max-width: 760px) {
    html body .vlt-cockpit.vlt-cockpit.vlt-cockpit {
        background-color: rgb(246, 249, 247) !important;
    }
}

/* ============================================================
   2.10.1488 - Nachtrag zu 1487. Christians eigenes Foto (iPhone,
   1125 x 2436, also 375 x 812 Punkte) pixelweise ausgewertet:

     CSS-Zeile 703   (248,250,249)   Grund oberhalb
     CSS-Zeile 707   (231,236,232)   eine dunkle Linie, 1 Punkt hoch
     CSS-Zeile 708   (246,248,246)   Grund unterhalb

   Die Linie ist der untere Teil des Innenschattens der Schale:
     box-shadow: ... rgba(192,205,196,.32) 0 -1px 0 0 inset
   Sie zieht quer ueber die ganze Breite einen sichtbaren Abschluss,
   und weil der Grund darunter eine Spur anders faellt, wirkt der
   Bereich mit der Fussleiste wie ein eigener heller Streifen.

   Auf dem Handy bleibt nur die obere weisse Innenlinie stehen.

   MERKSATZ: Wenn eine Kante im Bild zu sehen ist, aber keine
   Flaeche sie erklaert, ist es ein Schatten. Ein Foto des Nutzers
   laesst sich pixelweise auswerten - das ist genauer als jedes
   Hinsehen.
   ============================================================ */
@media (max-width: 760px) {
    /* Dreifache Kennung - die bestehende Schattenregel ist genauer
       (Messfalle 78). */
    html body .vlt-cockpit-klar-shell.vlt-cockpit-klar-shell.vlt-cockpit-klar-shell {
        box-shadow: rgb(255, 255, 255) 0 1px 0 0 inset !important;
    }
}


/* 2.10.1666 Tablet quer: Fussleiste weg */
@media (min-width: 1001px) and (orientation: landscape) and (pointer: coarse) {
  html body #footer.site-footer { display: none !important; }
  html body #main.site-main, html body #content-wrap { padding-bottom: 0 !important; margin-bottom: 0 !important; }
}

/* 2.10.1700 Profilfoto: Bild muss seinen Rahmen wirklich ausfuellen.
   Ohne diese Zeilen behaelt das Bild sein eigenes Seitenverhaeltnis
   (gemessen: 54x36 in einem 54x54 Rahmen). Dann gibt es fuer "cover"
   nichts zu beschneiden, die gewaehlte Position wirkt kaum, und der
   Zoom schiebt das Foto oben aus dem Rahmen. */
.vlt-klar-welcome-photo-frame img,
.vlt-klar-profile-settings__preview img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
}


/* ==================================================================
   2.10.1740 - Ueberlagerungen in der iPad-Ansicht
   Christian, 06.09.: "Es soll alles so bleiben nur nicht ueberlagern
   wie es jetzt ist. Die Anordnungen sollen so bleiben."

   Gemessen im Messrahmen 820x1012 (iPad hoch) und 1180x652 (quer),
   beides die echten Safari-Innenmasse des iPad Air 11:

   a) ZUM KALENDER
      Das Kalendersymbol .vlt-elegant-overview__utility-calendar liegt
      absolut auf right:12px und ist 42 breit. Der Text darunter ist im
      Feld zentriert. Im Hochformat ist das Feld nur 179 breit, der Text
      reicht bis 733 und das Symbol beginnt bei 724 - 9 Punkte
      Ueberlappung. Am Rechner ist das Feld 412 breit, dort passt es.
      Deshalb: nur bis 1100 Punkte Fensterbreite Platz freihalten.

   b) SEPTEMBER
      Die beiden Kalenderklammern sind ::before/::after der
      Kalenderseite, je 5x14, eingerueckt auf left/right:18px.
      Band 134 breit, das Wort 94 breit: Klammern bei 255-260 und
      349-354, Wort bei 259-353. Das S und das R lagen darunter,
      lesbar blieb "EPTEMBE". Gilt im Hoch- UND im Querformat.
      Deshalb: bis 1400 Punkte Fensterbreite die Klammern 12 Punkte
      weiter nach aussen, das Wort bleibt in voller Groesse.

   Nichts wird verschoben, nichts wird kleiner - es wird nur der Platz
   freigeraeumt, den die beiden Verzierungen belegt haben.
   ================================================================== */

@media (min-width: 761px) and (max-width: 1100px) {
    html body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__utility-open > span {
        padding-right: 54px !important;
    }
}

@media (min-width: 761px) and (max-width: 1400px) {
    html body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page::before {
        left: 6px !important;
    }
    html body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__calendar-page::after {
        right: 6px !important;
    }
}