/*
 * Cockpit-Design "Klar" (V2.9.831)
 * Ausschliesslich aktiv, wenn es unter VL-Einstellungen -> Design fuer die
 * jeweilige Bildschirmklasse gewaehlt wurde. "Klassik" bleibt unangetastet.
 */
.vlt-cockpit-klar-nav,
.vlt-cockpit-klar-quick {
    display: none;
}

/* V2.10.160: Eigene, chronologische Zukunftsliste fuer den zweiten Klick auf
 * einen Vertriebskalender-Filter. Nur Innenlayout des neuen Overlays; die
 * gesperrte Cockpit-/Footer-Geometrie bleibt unberuehrt. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--schedule-list:not([hidden]) { display:flex; min-height:0; flex-direction:column; overflow:hidden; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--schedule-list > header { flex:0 0 auto; }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list { min-height:0; flex:1 1 auto; overflow:auto; padding:12px 14px 22px; background:linear-gradient(180deg,#f7fbf8 0,#fff 130px); overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__intro { margin:0 0 11px; color:#69776e; font-size:10px; line-height:1.45; }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows { display:grid; gap:7px; }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows > button { display:grid; grid-template-columns:62px 8px minmax(0,1fr) 18px; min-height:62px; align-items:center; gap:9px; padding:9px 10px; border:1px solid #dce7de; border-radius:14px; background:#fff; color:#173f27; text-align:left; box-shadow:0 5px 13px rgba(20,55,31,.06); }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows > button[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows time { display:flex; min-width:0; flex-direction:column; font-style:normal; }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows time b { font-size:12px; line-height:1.15; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows time small { margin-top:3px; color:#53675a; font-size:9px; font-weight:750; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows > button > i { width:8px; height:8px; border-radius:50%; background:#cf2e2e; box-shadow:0 0 0 3px rgba(207,46,46,.08); }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows > button.is-installation > i { background:#e5a400; box-shadow:0 0 0 3px rgba(229,164,0,.1); }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows > button.is-birthday > i { background:#287fc3; box-shadow:0 0 0 3px rgba(40,127,195,.1); }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows > button.is-training > i { background:#7950ad; box-shadow:0 0 0 3px rgba(121,80,173,.1); }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows > button > span { display:flex; min-width:0; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows > button > span strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows > button > span small { overflow:hidden; margin-top:3px; color:#6a766e; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__rows > button > em { color:#16813a; font-size:22px; font-style:normal; text-align:right; }
    .vlt-cockpit--mobile-klar .vlt-klar-schedule-list__empty { margin:22px 0; padding:18px 12px; border:1px dashed #cddbd0; border-radius:14px; color:#66736a; font-size:11px; text-align:center; }
}

.vlt-klar-calendar__product-summary { display:grid; gap:7px; padding:11px 12px; border:1px solid #d7e5da; border-radius:12px; background:#fbfdfb; }
.vlt-klar-calendar__product-summary > div { display:flex !important; grid-template-columns:none !important; align-items:center; justify-content:space-between; gap:12px; }
.vlt-klar-calendar__product-summary span { color:#334e3d; font-size:11px; font-weight:850; }
.vlt-klar-calendar__product-summary button { min-height:38px; padding:8px 14px; border:1px solid #16813a; border-radius:999px; background:#16813a; color:#fff; font-size:11px; font-weight:850; cursor:pointer; }
.vlt-klar-calendar__product-summary button:disabled { border-color:#ccd8cf; background:#edf2ee; color:#7a867e; cursor:default; }
.vlt-klar-calendar__product-summary p { margin:0; color:#647269; font-size:10px; line-height:1.35; }
.vlt-klar-calendar__quarter-time { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:7px; }
.vlt-klar-calendar__quarter-time select { width:100%; min-width:0; text-align:center; text-align-last:center; }
.vlt-klar-calendar__quarter-time b { color:#173f27; font-size:18px; line-height:1; }
.vlt-klar-calendar__product-picker[hidden] { display:none !important; }
.vlt-klar-calendar__product-picker { position:absolute; z-index:12; display:flex; inset:0; box-sizing:border-box; align-items:center; justify-content:center; overflow:auto; padding:18px; background:rgba(243,247,244,.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.vlt-klar-calendar__product-picker-card { display:grid; width:min(100%,560px); max-height:100%; gap:14px; margin:auto; padding:18px; box-sizing:border-box; overflow:auto; border:1px solid #cfe0d3; border-left:3px solid #16813a; border-radius:18px; background:#fff; box-shadow:0 18px 48px rgba(20,55,31,.18); }
.vlt-klar-calendar__product-picker-card > header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.vlt-klar-calendar__product-picker-card > header div { display:grid; gap:2px; }
.vlt-klar-calendar__product-picker-card > header small { color:#16813a; font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.vlt-klar-calendar__product-picker-card > header h4 { margin:0; color:#14291b; font-size:20px; }
.vlt-klar-calendar__product-picker-card > header button { display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:50%; background:#e9f2eb; color:#173f27; font-size:23px; cursor:pointer; }
.vlt-klar-calendar__product-picker-card > p { margin:0; color:#647269; font-size:10px; }
.vlt-klar-calendar__product-picker-card > p b { color:#173f27; }
.vlt-klar-calendar__product-picker-card > footer { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.vlt-klar-calendar__product-picker-card > footer button { min-height:44px; border:1px solid #16813a; border-radius:11px; background:#fff; color:#126d31; font-weight:850; cursor:pointer; }
.vlt-klar-calendar__product-picker-card > footer button:last-child { background:#16813a; color:#fff; }

@media (min-width:761px) {
    .vlt-klar-calendar__products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .vlt-klar-calendar__products label { position:relative; display:block; min-width:0; }
    .vlt-klar-calendar__products input { position:absolute; width:1px; height:1px; opacity:0; }
    .vlt-klar-calendar__products label span { display:flex; min-height:56px; box-sizing:border-box; justify-content:center; flex-direction:column; gap:3px; padding:9px 11px; border:1px solid #dce7df; border-radius:11px; background:#fff; color:#42564a; font-size:11px; cursor:pointer; }
    .vlt-klar-calendar__products label b { color:#153d25; font-size:15px; line-height:1.1; } /* 16.08.: Kuerzel groesser, Zelle bleibt */
    .vlt-klar-calendar__products label small { color:#607067; font-size:12px; line-height:1.12; display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } /* 16.08.: Unterschrift groesser; laeuft sie ueber, wird sie mit ... gekappt statt die Zelle zu heben */
    .vlt-klar-calendar__products input:checked + span { border-color:#16813a; background:#edf7ef; box-shadow:0 0 0 1px rgba(22,129,58,.18) inset; }
    .vlt-klar-calendar__products input:focus-visible + span { outline:2px solid #16813a; outline-offset:2px; }
    .vlt-klar-calendar__voucher[hidden] { display:none !important; }
    .vlt-klar-calendar__voucher { position:absolute; z-index:20; inset:0; overflow:auto; padding:26px; background:#f7faf7; }
    .vlt-klar-calendar__voucher > header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
    .vlt-klar-calendar__voucher > header h3 { margin:3px 0 0; }
    .vlt-klar-calendar__voucher > header button { width:42px; height:42px; border:0; border-radius:50%; background:#e9f2eb; color:#173f27; font-size:24px; }
    .vlt-calendar-voucher { overflow:hidden; border:1px solid #bdd5c3; border-left:3px solid #126d31; border-radius:18px; background:#fff; }
    .vlt-calendar-voucher > header { display:flex; min-height:86px; align-items:center; justify-content:space-between; gap:20px; padding:18px 22px; border-bottom:1px solid #dce7df; }
    .vlt-calendar-voucher > header img { width:auto; max-width:46%; height:52px; object-fit:contain; }
    .vlt-calendar-voucher > header div { display:flex; align-items:flex-end; flex-direction:column; }
    .vlt-calendar-voucher__body { display:grid; grid-template-columns:1.7fr 1fr; }
    .vlt-calendar-voucher__body > section { padding:20px; }
    .vlt-calendar-voucher__body > section + section { border-left:1px solid #dce7df; }
    .vlt-calendar-voucher dl { display:grid; gap:10px; margin:0; }
    .vlt-calendar-voucher dl > div { padding-bottom:8px; border-bottom:1px solid #e4ebe6; }
    .vlt-calendar-voucher dt,.vlt-calendar-voucher h4 { color:#67746c; font-size:11px; font-weight:850; text-transform:uppercase; }
    .vlt-calendar-voucher dd { margin:3px 0 0; color:#14291b; }
    .vlt-calendar-voucher ul { display:grid; gap:8px; margin:12px 0 0; padding:0; list-style:none; }
    .vlt-klar-calendar__voucher-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:14px; }
    .vlt-klar-calendar__voucher-actions button,.vlt-klar-calendar__voucher-actions a,.vlt-klar-calendar__export-trigger { display:flex; min-height:44px; align-items:center; justify-content:center; box-sizing:border-box; border:1px solid #16813a; border-radius:11px; background:#fff; color:#126d31; font-weight:800; text-align:center; text-decoration:none; }
    .vlt-klar-calendar__voucher-actions [hidden],.vlt-klar-calendar__export-trigger[hidden] { display:none !important; }
}

/* Lesbare, nicht bearbeitbare Heim-&-Haus-KW-Jahresübersicht. */
.vlt-klar-sheet--sales-calendar { background:#fff; }
.vlt-sales-calendar-overview { width:min(900px,100%); margin:0 auto; padding:0 20px 24px; overflow:auto; }
.vlt-sales-calendar-overview__years { display:grid; grid-template-columns:48px 1fr 48px; align-items:center; gap:12px; margin:4px 0 14px; padding:8px; border:1px solid #dbe7de; border-radius:24px; background:#f8fbf9; }
.vlt-sales-calendar-overview__years button { width:42px; height:42px; border:1px solid #b9d7c1; border-radius:50%; background:#fff; color:#078531; font-size:29px; line-height:1; cursor:pointer; }
.vlt-sales-calendar-overview__years button:disabled { opacity:.28; cursor:default; }
.vlt-sales-calendar-overview__years span { display:flex; align-items:center; justify-content:center; gap:8px; color:#5f6c64; }
.vlt-sales-calendar-overview__years small { font-size:12px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.vlt-sales-calendar-overview__years strong { color:#123d24; font-size:24px; }
.vlt-sales-calendar-overview__year > header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; color:#66736b; font-size:12px; }
.vlt-sales-calendar-overview__year > header strong { color:#0b8133; }
.vlt-sales-calendar-overview__months { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden; border:1px solid #dbe7de; border-left:3px solid #078531; border-radius:24px; background:#fff; box-shadow:0 12px 28px rgba(18,61,36,.06); }
.vlt-sales-calendar-overview__months article { display:grid; grid-template-columns:1.15fr .9fr 1fr auto; align-items:center; gap:9px; min-height:53px; padding:8px 12px; border-bottom:1px solid #e3ebe5; color:#5f6c64; }
.vlt-sales-calendar-overview__months article:nth-child(odd) { border-right:1px solid #e3ebe5; }
.vlt-sales-calendar-overview__months article:nth-last-child(-n+2) { border-bottom:0; }
.vlt-sales-calendar-overview__months article.is-current { background:#eff8f1; box-shadow:inset 3px 0 #078531; }
.vlt-sales-calendar-overview__months article > strong { color:#173d27; font-size:14px; }
.vlt-sales-calendar-overview__months article > span,.vlt-sales-calendar-overview__months article > small { font-size:12px; white-space:nowrap; }
.vlt-sales-calendar-overview__months article > b { min-width:66px; padding:5px 8px; border-radius:999px; background:#edf3ee; color:#536159; font-size:11px; text-align:center; white-space:nowrap; }
.vlt-sales-calendar-overview__months article > b.is-5-weeks { background:#078531; color:#fff; }
.vlt-sales-calendar-overview__year > p { margin:10px 2px 0; color:#738078; font-size:11px; }

@media (max-width:760px) {
    .vlt-sales-calendar-overview { padding:0 12px 18px; }
    .vlt-sales-calendar-overview__months { grid-template-columns:1fr; border-radius:20px; }
    .vlt-sales-calendar-overview__months article:nth-child(odd) { border-right:0; }
    .vlt-sales-calendar-overview__months article:nth-last-child(2) { border-bottom:1px solid #e3ebe5; }
    .vlt-sales-calendar-overview__months article { grid-template-columns:1fr .8fr 1fr auto; min-height:45px; padding:6px 10px; }
    .vlt-sales-calendar-overview__years { margin-top:0; }
}

/* V2.10.156: Durchgaengige, deutlichere Tiefenstaffelung nach der von
 * Christian freigegebenen Cockpit-Referenz. Die Regeln bleiben reine
 * Oberflaeche: keine Masse, Positionen, Abstaende, Ueberlagerungsebenen oder
 * Footer-/Safe-Area-Werte werden veraendert. */
@media (max-width:760px) {
    body.vlt-tool-fullwidth #wpadminbar,
    body.vlt-tool-fullwidth .vlt-fe-platformbar__status {
        background:linear-gradient(145deg,#20282c 0%,#171e22 62%,#11181b 100%) !important;
        box-shadow:inset 0 -1px 0 rgba(255,255,255,.07),0 4px 0 rgba(8,14,12,.58),0 10px 20px rgba(8,20,13,.24) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-shell {
        background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(246,249,247,.96)) !important;
        box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(192,205,196,.32) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-head {
        background:linear-gradient(145deg,#fff 0%,#fff 60%,#f6f9f7 100%) !important;
        box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(185,199,189,.4),0 4px 0 rgba(204,213,206,.96),0 8px 9px rgba(20,45,29,.18),11px 16px 25px rgba(20,43,29,.16) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-klar-welcome,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-elegant-overview,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-elegant-overview__utility {
        border-top-color:#fff !important;
        border-right-color:rgba(200,211,202,.98) !important;
        border-bottom-color:rgba(190,202,193,.98) !important;
        background:linear-gradient(145deg,#fff 0%,#fff 55%,#f8fbf9 100%) !important;
        box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 rgba(180,194,184,.35),0 4px 0 rgba(201,210,203,.98),0 8px 10px rgba(18,47,29,.19),14px 22px 34px rgba(20,45,29,.19) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-sun,
    .vlt-cockpit--mobile-elegant .vlt-cockpit__bell,
    .vlt-cockpit--mobile-elegant .vlt-klar-account {
        background:linear-gradient(145deg,#fff 0%,#f5f8f6 66%,#eaf1ec 100%) !important;
        box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 rgba(172,191,178,.3),0 4px 0 rgba(197,207,200,.96),0 8px 10px rgba(18,55,31,.2),8px 13px 18px rgba(20,47,30,.15) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page {
        background:linear-gradient(145deg,#fff 0%,#fff 58%,#f4f7f5 100%) !important;
        box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 rgba(166,183,171,.44),0 5px 0 rgba(191,202,194,.98),0 10px 12px rgba(20,49,31,.22),12px 19px 27px rgba(21,43,29,.19),0 0 0 1px rgba(22,129,58,.18) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month {
        background:linear-gradient(145deg,#f45b53 0%,#df413c 48%,#c92f2c 100%) !important;
        box-shadow:inset 0 2px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(119,20,18,.23),0 4px 0 rgba(166,42,37,.38),0 8px 10px rgba(126,34,30,.21) !important;
        text-shadow:0 1px 0 rgba(110,22,20,.3);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring {
        box-shadow:inset 0 2px 0 rgba(255,255,255,.84),0 5px 0 rgba(194,204,197,.98),0 10px 12px rgba(15,60,32,.25),10px 17px 24px rgba(20,45,29,.19) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring::after {
        background:linear-gradient(145deg,#fff 0%,#f7faf8 68%,#edf2ee 100%) !important;
        box-shadow:inset 0 3px 5px rgba(17,54,29,.08),inset 0 -2px 0 #fff !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__slideshow {
        border-color:rgba(193,206,196,.98) !important;
        background:linear-gradient(145deg,#fff,#edf3ef) !important;
        box-shadow:inset 0 2px 0 #fff,inset 0 -1px 0 rgba(172,190,177,.4),0 4px 0 rgba(195,205,198,.98),0 9px 11px rgba(17,53,30,.2),10px 16px 24px rgba(20,44,29,.18) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button {
        background:linear-gradient(145deg,#fff 0%,rgba(247,250,248,.96) 58%,rgba(232,241,235,.91) 100%) !important;
        box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 rgba(174,193,179,.25),0 4px 0 rgba(199,210,202,.96),0 8px 10px rgba(18,58,32,.18),7px 12px 18px rgba(20,48,30,.13) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu-glass {
        background:linear-gradient(145deg,#fff 0%,rgba(232,245,236,.96) 62%,rgba(199,226,206,.9) 100%) !important;
        box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 rgba(22,129,58,.14),0 5px 0 rgba(179,205,186,.94),0 10px 13px rgba(15,71,34,.25),9px 16px 23px rgba(20,48,30,.16) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-calendar {
        filter:drop-shadow(0 4px 1px rgba(81,89,83,.3)) drop-shadow(6px 9px 8px rgba(20,45,29,.18)) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav {
        border-color:rgba(255,255,255,.98) !important;
        background:linear-gradient(145deg,rgba(255,255,255,.97) 0%,rgba(241,248,243,.92) 62%,rgba(219,235,224,.86) 100%) !important;
        box-shadow:inset 0 3px 0 #fff,inset 0 -2px 0 rgba(22,129,58,.13),0 5px 0 rgba(191,204,195,.92),0 13px 17px rgba(15,54,29,.23),14px 24px 35px rgba(20,43,28,.2) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-nav-glass {
        background:linear-gradient(145deg,#fff 0%,rgba(225,242,230,.96) 64%,rgba(193,224,201,.9) 100%) !important;
        box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 rgba(22,129,58,.15),0 5px 0 rgba(177,201,184,.94),0 10px 13px rgba(15,69,33,.26),8px 15px 22px rgba(20,46,29,.17) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav__plus {
        background:linear-gradient(145deg,#20994a 0%,#147837 58%,#0d612c 100%) !important;
        box-shadow:inset 0 3px 0 rgba(255,255,255,.38),inset 0 -3px 0 rgba(4,53,21,.29),0 5px 0 rgba(187,203,192,.98),0 12px 16px rgba(10,69,30,.34),11px 19px 27px rgba(20,43,28,.2) !important;
    }
}


@media print {
    body.vlt-calendar-voucher-printing * { visibility:hidden !important; }
    body.vlt-calendar-voucher-printing .vlt-calendar-voucher,
    body.vlt-calendar-voucher-printing .vlt-calendar-voucher * { visibility:visible !important; }
    body.vlt-calendar-voucher-printing .vlt-calendar-voucher { position:fixed !important; top:12mm !important; right:12mm !important; bottom:auto !important; left:12mm !important; width:auto !important; max-width:none !important; border:1px solid #126d31 !important; border-left-width:3px !important; box-shadow:none !important; }
    body.vlt-calendar-voucher-printing .vlt-calendar-voucher__body { display:grid !important; grid-template-columns:2fr 1fr !important; }
}

/* Filterzustände dürfen nicht von den sichtbaren Grid-/Flex-Regeln
   überstimmt werden. Das gilt sowohl im Kalender als auch im Cockpit. */
[data-vlt-calendar-event][hidden],
[data-vlt-dashboard-calendar-item][hidden],
[data-vlt-dashboard-calendar-empty][hidden],
[data-vlt-calendar-filter-empty][hidden] { display:none !important; }

@media (max-width: 760px) {
    .vlt-cockpit--mobile-klar {
        padding: 18px 16px 104px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #14291b;
    }

    .vlt-cockpit--mobile-klar .vlt-cockpit__brandbar {
        margin: 0 0 18px !important;
        padding: 0 0 14px !important;
        border-bottom-color: #e4e9e5 !important;
    }
    .vlt-cockpit--mobile-klar .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--mobile-klar .vlt-cockpit__brandbar-name {
        font-size: 12px;
        letter-spacing: .13em;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__brandbar-right {
        gap: 5px;
    }
    .vlt-cockpit--mobile-klar .vlt-mini-nav,
    .vlt-cockpit--mobile-klar > .vlt-cockpit__top {
        display: none !important;
    }

    .vlt-cockpit--mobile-klar .vlt-cockpit__mobile-top {
        display: flex !important;
        flex-direction: column;
        gap: 14px;
        margin: 0 0 16px !important;
        padding: 16px !important;
        border: 1px solid #dfe7e1;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 5px 18px rgba(23, 58, 35, .07);
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__mobile-row {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__mobile-welcome-text {
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #14291b !important;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__mobile-identity {
        margin-top: 5px;
        font-size: 12px !important;
        line-height: 1.45;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__mobile-clock {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 10px;
        padding-top: 13px !important;
        border-top: 1px solid #edf0ed !important;
    }

    .vlt-cockpit--mobile-klar .vlt-cockpit__calendar--overview {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 14px !important;
        margin: 0 0 16px !important;
        padding: 18px !important;
        border: 1px solid #dfe7e1 !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: 0 5px 18px rgba(23, 58, 35, .07) !important;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__calendar-copy {
        min-width: 0;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__calendar-copy > span:first-child {
        font-size: 12px;
        letter-spacing: .1em;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__calendar-range {
        font-size: 19px !important;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__cal-progress--big {
        display: flex !important;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__cal-progress--big .vlt-cockpit__cal-ring {
        width: 82px;
        height: 82px;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__ov-rows {
        grid-column: 1 / -1;
        max-width: none;
        min-width: 0;
        border-top: 1px solid #e7ece8;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__ov-row {
        padding: 10px 0;
    }

    .vlt-cockpit--mobile-klar .vlt-cockpit__day {
        margin: 0 0 16px !important;
        padding: 16px !important;
        border: 1px solid #dfe7e1 !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: 0 5px 18px rgba(23, 58, 35, .06) !important;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__day-heading {
        margin-bottom: 8px;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__day-item {
        min-height: 72px;
        padding: 12px 0 !important;
        border: 0 !important;
        border-top: 1px solid #edf0ed !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__day-item:first-child {
        border-top: 0 !important;
    }

    .vlt-cockpit--mobile-klar .vlt-cockpit__actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 0 18px !important;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__action {
        min-height: 92px !important;
        padding: 13px 10px !important;
        border: 1px solid #167835 !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: #173f27 !important;
        box-shadow: none !important;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__action--scan {
        display: flex !important;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__action-label {
        font-size: 13px !important;
        line-height: 1.25 !important;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit__mobile-expand {
        display: none !important;
    }

    .vlt-cockpit--mobile-klar .vlt-cockpit__footer,
    .vlt-cockpit--mobile-klar .vlt-contact {
        margin-bottom: 18px;
    }

    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav {
        position: fixed;
        z-index: 9998;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: end;
        min-height: 76px;
        padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
        border-top: 1px solid #dfe5e0;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -8px 24px rgba(23, 58, 35, .10);
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav > a,
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav > button:not(.vlt-cockpit-klar-nav__plus) {
        display: flex;
        min-width: 0;
        min-height: 54px;
        padding: 4px 2px;
        border: 0;
        background: transparent;
        color: #5c6860;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        text-decoration: none;
        font: inherit;
        cursor: pointer;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav > .is-active {
        color: #167835;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav span {
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav svg { width:24px; height:24px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav small {
        font-size: 10.5px;
        font-weight: 700;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav > :nth-child(1) { transform:translateX(-25%); }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav > :nth-child(2) { transform:translateX(25%); }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav > :nth-child(4) { transform:translateX(-25%); }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav > :nth-child(5) { transform:translateX(25%); }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav__plus {
        position: relative;
        display: grid;
        align-self: start;
        justify-self: center;
        place-items: center;
        width: 64px;
        height: 64px;
        margin-top: -23px;
        padding: 0;
        border: 5px solid #fff;
        border-radius: 50%;
        background: #167835;
        color: #fff;
        box-shadow: 0 6px 18px rgba(17, 91, 42, .28);
        overflow: hidden;
        font-size: 0;
        font-weight: 300;
        line-height: 1;
        text-align: center;
        cursor: pointer;
        appearance: none;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav__plus::before,
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav__plus::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 3px;
        border-radius: 999px;
        background: currentColor;
        transform: translate(-50%, -50%);
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav__plus::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick {
        position: fixed;
        z-index: 9997;
        top: max(8px, env(safe-area-inset-top));
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        left: 8px;
        display: block;
        max-height: none;
        overflow-y: auto;
        padding: 16px;
        border: 1px solid #dce5de;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 14px 34px rgba(23, 58, 35, .18);
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick[hidden] {
        display: none !important;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick header {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        margin-bottom:12px;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick header strong {
        color: #173f27;
        font-size: 17px;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick header button {
        display:grid;
        width:48px;
        height:48px;
        flex:0 0 48px;
        place-items:center;
        border:0;
        border-radius:50%;
        background:#edf5ee;
        color:#173f27;
        font-size:32px;
        line-height:1;
        cursor:pointer;
        touch-action:manipulation;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > a,
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > span {
        display: flex;
        min-width:0;
        height: 56px;
        min-height: 56px;
        align-items: center;
        justify-content: center;
        flex-direction:column;
        gap:4px;
        padding: 5px 6px;
        border: 1px solid #dce5de;
        border-radius: 12px;
        color: #173f27;
        text-align: center;
        text-decoration: none;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid i { display:grid; width:25px; height:25px; place-items:center; border-radius:8px; background:#edf5ee; color:#16813a; font-style:normal; }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid svg { width:17px; height:17px; }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid small { display:block; max-width:100%; overflow:hidden; font-size:10.5px; font-weight:800; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid .is-disabled { opacity:.5; }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid .is-bearbeitung { position:relative; padding-bottom:18px; opacity:.72; }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid .is-bearbeitung em { position:absolute; right:5px; bottom:4px; left:5px; overflow:hidden; border-radius:999px; background:#dba617; color:#fff; font-size:7.5px; font-style:normal; font-weight:850; line-height:13px; text-overflow:ellipsis; white-space:nowrap; }

    .vlt-cockpit--mobile-klar.vlt-is-statsview::before {
        content: "Meine Ziele\A Dein persönlicher Zielstand";
        display: block;
        margin: 4px 0 18px;
        color: #14291b;
        white-space: pre;
        font-size: 28px;
        font-weight: 800;
        line-height: 1.45;
    }
    .vlt-cockpit--mobile-klar.vlt-is-statsview .vlt-cockpit__statgroup {
        padding: 0 !important;
    }
    .vlt-cockpit--mobile-klar.vlt-is-statsview .vlt-cockpit__fold,
    .vlt-cockpit--mobile-klar.vlt-is-statsview .vlt-goalstrip {
        border-color: #dfe7e1 !important;
        border-radius: 16px !important;
        box-shadow: 0 5px 18px rgba(23, 58, 35, .06) !important;
    }
}

@media (min-width: 761px) {
    .vlt-cockpit--desktop-klar {
        padding: 24px 28px 30px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }
    .vlt-cockpit--desktop-klar .vlt-cockpit__brandbar {
        margin: 0 0 16px !important;
        padding-bottom: 14px !important;
    }
    .vlt-cockpit--desktop-klar .vlt-mini-nav {
        margin-bottom: 22px !important;
    }
    .vlt-cockpit--desktop-klar .vlt-cockpit__top {
        align-items: center;
        margin-bottom: 22px;
    }
    .vlt-cockpit--desktop-klar .vlt-cockpit__calendar--overview,
    .vlt-cockpit--desktop-klar .vlt-cockpit__day {
        border-color: #dfe7e1 !important;
        border-radius: 16px !important;
        box-shadow: 0 5px 18px rgba(23, 58, 35, .06) !important;
    }
    .vlt-cockpit--desktop-klar .vlt-cockpit__day {
        margin-top: 22px;
        padding: 18px 20px;
    }
    .vlt-cockpit--desktop-klar .vlt-cockpit__day-items {
        gap: 14px;
    }
    .vlt-cockpit--desktop-klar .vlt-cockpit__day-item {
        border-color: #e2e9e4;
        border-radius: 13px;
        background: #fff;
        box-shadow: none;
    }
    .vlt-cockpit--desktop-klar .vlt-cockpit__actions {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        margin-top: 22px;
    }
    .vlt-cockpit--desktop-klar .vlt-cockpit__action {
        width: 100% !important;
        max-width: none !important;
        min-height: 74px;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 14px 18px !important;
        border-radius: 13px !important;
        background: #fff !important;
    }
    .vlt-cockpit--desktop-klar .vlt-cockpit__action-label {
        display: block !important;
        font-size: 13px !important;
        text-align: left !important;
    }
    .vlt-cockpit--desktop-klar .vlt-cockpit__action--scan {
        display: none !important;
    }
    .vlt-cockpit--desktop-klar.vlt-is-statsview::before {
        content: "Meine Ziele · Dein persönlicher Zielstand";
        display: block;
        margin: 4px 0 18px;
        color: #14291b;
        font-size: 26px;
        font-weight: 800;
    }
    .vlt-cockpit--desktop-klar.vlt-is-statsview .vlt-cockpit__fold,
    .vlt-cockpit--desktop-klar.vlt-is-statsview .vlt-goalstrip {
        border-color: #dfe7e1 !important;
        border-radius: 16px !important;
    }
}

/* ==========================================================================
   V2.9.832: Eigenstaendiges Klar-Markup. Ab hier wird nicht mehr die
   klassische Struktur uebermalt; beide Ansichten bleiben strikt getrennt.
   ========================================================================== */
.vlt-cockpit-klar-shell,
.vlt-cockpit-klar-shell * {
    box-sizing: border-box;
}
.vlt-cockpit-klar-shell a {
    text-decoration: none;
}
.vlt-klar-view[hidden],
.vlt-cockpit-klar-quick[hidden] {
    display: none !important;
}
.vlt-klar-head {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e1e7e2;
}
.vlt-klar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #15361f;
}
.vlt-klar-brand img {
    width: auto !important;
    height: calc(42px * var(--vlt-tool-logo-scale, 1)) !important;
    max-width: calc(76px * var(--vlt-tool-logo-scale, 1)) !important;
    object-fit: contain;
    object-position: center;
}
.vlt-klar-brand span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.vlt-klar-brand strong {
    font-size: 16px;
    font-weight: 850;
    letter-spacing: .12em;
    white-space: nowrap;
}
.vlt-klar-brand small {
    color: #8a978e;
    font-size: 11px;
}
.vlt-klar-account-menu {
    position: relative;
    flex: 0 0 auto;
}
.vlt-klar-account {
    position: relative;
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(22,129,58,.36);
    border-radius: 50%;
    background: #fff;
    color: #0b6e2b;
    font-family: inherit;
    box-shadow: 0 7px 18px rgba(23,80,39,.12);
    -webkit-backdrop-filter: blur(15px) saturate(145%);
    backdrop-filter: blur(15px) saturate(145%);
    cursor: pointer;
}
.vlt-klar-account::after {
    content: "";
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: -70%;
    width: 46%;
    pointer-events: none;
    border-radius: 50%;
    background: linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.86) 48%,rgba(255,255,255,.1));
    filter: blur(.35px);
    transform: skewX(-17deg);
    animation: vlt-klar-account-glass-sheen 5.8s ease-in-out infinite;
}
.vlt-klar-account svg {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: block;
    width: 24px;
    height: 24px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform:translate(-50%,-50%);
}
.vlt-klar-account[aria-expanded="true"] {
    border-color: #16813a;
    background:#fff;
    box-shadow:0 0 0 3px rgba(22,129,58,.1),0 8px 20px rgba(23,80,39,.15);
}
@keyframes vlt-klar-account-glass-sheen {
    0%,24% { left:-70%; opacity:0; }
    34% { opacity:.2; }
    50% { opacity:.88; }
    66% { opacity:.2; }
    76%,100% { left:126%; opacity:0; }
}
@media (prefers-reduced-motion:reduce) {
    .vlt-klar-account::after { left:18%; opacity:.28; animation:none; }
}
.vlt-klar-account-panel[hidden] {
    display: none !important;
}
.vlt-klar-account-panel {
    position: absolute;
    z-index: 250;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: 210px;
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid #dce7df;
    border-radius: 14px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 14px 34px rgba(23,58,35,.18);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.vlt-klar-account-panel a {
    display: flex;
    min-height: 43px;
    box-sizing: border-box;
    align-items: center;
    padding: 9px 12px;
    border-radius: 9px;
    color: #24452f;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}
.vlt-klar-account-panel a:hover,
.vlt-klar-account-panel a:focus-visible {
    outline: 0;
    background: #edf6ef;
    color: #087a30;
}
.vlt-klar-account-panel a.is-logout {
    margin-top: 4px;
    border-top: 1px solid #eadede;
    color: #914c4c;
}
.vlt-klar-desktop-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0 28px;
}
.vlt-klar-desktop-nav a {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid #b8d1bf;
    border-radius: 12px;
    color: #173f27;
    font-size: 14px;
    font-weight: 800;
}
.vlt-klar-desktop-nav a.is-active {
    border-color: #16813a;
    background: #16813a;
    color: #fff;
}
.vlt-klar-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.vlt-klar-welcome > div {
    display: flex;
    align-items: center;
    gap: 16px;
}
.vlt-klar-sun {
    display: grid;
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 16px;
    background: #edf5ee;
    color: #16813a;
    font-size: 34px;
}
.vlt-klar-welcome h2,
.vlt-klar-goals-title h2,
.vlt-klar-page-title h2 {
    margin: 0 0 5px !important;
    color: #14291b !important;
    font-size: 30px !important;
    line-height: 1.1 !important;
}
.vlt-klar-welcome p,
.vlt-klar-goals-title p,
.vlt-klar-page-title p {
    margin: 0;
    color: #5f6c63;
    font-size: 15px;
}
.vlt-klar-welcome p strong {
    color: #16813a;
}
.vlt-klar-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 22px 0;
}
.vlt-klar-summary article {
    display: flex;
    min-height: 106px;
    justify-content: center;
    flex-direction: column;
    padding: 18px 22px;
    border: 1px solid #dfe7e1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(23,58,35,.06);
}
.vlt-klar-summary span,
.vlt-klar-year__copy > span,
.vlt-klar-year__rest span,
.vlt-klar-goal-peek > span {
    color: #66736a;
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.vlt-klar-summary strong {
    margin-top: 5px;
    color: #173f27;
    font-size: 20px;
}
.vlt-klar-summary small {
    margin-top: 4px;
    color: #16813a;
    font-size: 16px;
    font-weight: 800;
}
.vlt-klar-summary article.is-green {
    border-color: #16813a;
    background: #16813a;
}
.vlt-klar-summary article.is-green span,
.vlt-klar-summary article.is-green strong,
.vlt-klar-summary article.is-green small {
    color: #fff;
}
.vlt-klar-year {
    display: grid;
    grid-template-columns: 1.2fr .75fr 1.1fr 1fr;
    align-items: center;
    gap: 24px;
    padding: 24px 26px;
    border: 1px solid #dfe7e1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(23,58,35,.06);
}
.vlt-klar-year__overview { display: contents; }
.vlt-klar-year__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.vlt-klar-year__copy small {
    margin: 8px 0 4px;
    color: #5f6c63;
    font-size: 12px;
}
.vlt-klar-year__copy > strong {
    color: #16813a;
    font-size: 21px;
}
.vlt-klar-year__copy button,
.vlt-klar-back {
    min-height: 42px;
    margin-top: 15px;
    padding: 8px 16px;
    border: 1px solid #16813a;
    border-radius: 999px;
    background: #fff;
    color: #173f27;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.vlt-klar-ring,
.vlt-klar-goal-ring {
    position: relative;
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#16813a calc(var(--vlt-klar-progress,0) * 1%), #e1e8e2 0);
}
.vlt-klar-ring::after,
.vlt-klar-goal-ring::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: #fff;
}
.vlt-klar-ring > span,
.vlt-klar-goal-ring > strong {
    position: relative;
    z-index: 1;
    color: #173f27;
    font-size: 29px;
    font-weight: 850;
}
.vlt-klar-ring > span small,
.vlt-klar-goal-ring > strong small {
    font-size: 14px;
}
.vlt-klar-ring em {
    position: absolute;
    top: calc(100% + 8px);
    width: 140px;
    color: #68756d;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .09em;
    text-align: center;
    text-transform: uppercase;
}
.vlt-klar-year__rest {
    border-right: 1px solid #e4e9e5;
    border-left: 1px solid #e4e9e5;
    padding: 0 22px;
}
.vlt-klar-year__rest > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 0;
    border-top: 1px solid #e7ece8;
}
.vlt-klar-year__rest > div:first-child { border-top: 0; }
.vlt-klar-year__rest strong { color: #16813a; font-size: 17px; }
.vlt-klar-countdown.is-urgent { color:#c62828; }
.vlt-klar-year__rest strong .vlt-klar-countdown { font-size:inherit; font-weight:inherit; line-height:inherit; letter-spacing:normal; }
.vlt-klar-goal-peek { min-width: 0; }
.vlt-klar-goal-peek > strong { display: block; margin: 8px 0; color:#16813a; font-size:28px; }
.vlt-klar-goal-peek > div { height:8px; overflow:hidden; border-radius:999px; background:#e1e8e2; }
.vlt-klar-goal-peek > div i { display:block; height:100%; border-radius:inherit; background:#16813a; }
.vlt-klar-goal-peek small { display:block; margin-top:8px; color:#68756d; }
.vlt-klar-day { margin-top:24px; }
.vlt-klar-day__toggle { display:none; }
.vlt-klar-day h3,
.vlt-klar-actions h3,
.vlt-klar-goal-hero h3,
.vlt-klar-goal-month h3,
.vlt-klar-weeks h3 { margin:0 0 14px; color:#14291b; font-size:21px; }
.vlt-klar-day__items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.vlt-klar-day__items article,
.vlt-klar-actions a,
.vlt-klar-weeks > div {
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
    padding:17px;
    border:1px solid #dfe7e1;
    border-radius:15px;
    background:#fff;
    color:#173f27;
    box-shadow:0 4px 14px rgba(23,58,35,.05);
}
.vlt-klar-day__items i,
.vlt-klar-actions i { display:grid; width:44px; height:44px; flex:0 0 auto; place-items:center; border-radius:12px; background:#edf5ee; color:#16813a; font-size:22px; font-style:normal; }
.vlt-klar-day__items div,
.vlt-klar-actions span { display:flex; min-width:0; flex:1; flex-direction:column; }
.vlt-klar-day__items strong,
.vlt-klar-actions strong { color:#14291b; font-size:14px; }
.vlt-klar-day__items small,
.vlt-klar-actions small { margin-top:3px; overflow:hidden; color:#66736a; font-size:11.5px; line-height:1.35; }
.vlt-klar-day__items article > span,
.vlt-klar-actions b { color:#68756d; font-size:25px; }
.vlt-klar-actions { margin-top:24px; }
.vlt-klar-actions > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.vlt-klar-actions a.is-primary { border-color:#16813a; background:#16813a; }
.vlt-klar-actions a.is-primary i { background:rgba(255,255,255,.17); color:#fff; }
.vlt-klar-actions a.is-primary strong,
.vlt-klar-actions a.is-primary small,
.vlt-klar-actions a.is-primary b { color:#fff; }
.vlt-klar-actions a.is-scan { display:none; }

.vlt-klar-back { margin: 2px 0 18px; }
.vlt-klar-goals-title { margin-bottom:22px; }
.vlt-klar-goal-hero,
.vlt-klar-goal-month,
.vlt-klar-weeks {
    margin-bottom:18px;
    padding:22px;
    border:1px solid #dfe7e1;
    border-radius:18px;
    background:#fff;
    box-shadow:0 5px 18px rgba(23,58,35,.06);
}
.vlt-klar-goal-hero__body { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:28px; }
.vlt-klar-goal-hero dl { margin:0; }
.vlt-klar-goal-hero dl > div { display:flex; justify-content:space-between; gap:30px; padding:11px 0; border-top:1px solid #e5eae6; }
.vlt-klar-milestone { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid #dfe7e1; border-radius:16px; background:#fff; box-shadow:0 4px 14px rgba(23,58,35,.05); }
.vlt-klar-milestone__icon { display:grid; width:48px; height:58px; flex:0 0 48px; place-items:center; }
.vlt-klar-milestone__icon svg { width:34px; height:50px; }
.vlt-klar-milestone--topclub .vlt-klar-milestone__icon span { display:grid; width:42px; height:42px; place-items:center; border-radius:50%; background:#edf5ee; color:#16813a; font-size:23px; }
.vlt-klar-milestone__copy { min-width:0; flex:1; }
.vlt-klar-milestone__copy > span { display:block; color:#66736a; font-size:9px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.vlt-klar-milestone__copy > strong { display:block; margin-top:2px; color:#173f27; font-size:14px; }
.vlt-klar-milestone__copy > div { height:6px; margin:5px 0 3px; overflow:hidden; border-radius:999px; background:#e2eae4; }
.vlt-klar-milestone__copy > div i { display:block; height:100%; border-radius:inherit; background:#16813a; }
.vlt-klar-milestone__copy > small { display:block; overflow:hidden; color:#68756d; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.vlt-klar-goal-hero dl > div:first-child { border-top:0; }
.vlt-klar-goal-hero dt { color:#536158; }
.vlt-klar-goal-hero dd { margin:0; color:#14291b; font-weight:850; }
.vlt-klar-goal-hero > p { margin:18px 0 0; color:#16813a; font-weight:750; }
.vlt-klar-goal-month { display:grid; grid-template-columns:1fr auto; align-items:start; gap:15px; }
.vlt-klar-goal-month > div:first-child strong { color:#16813a; font-size:20px; }
.vlt-klar-goal-month > span { padding:8px 12px; border-radius:999px; background:#edf5ee; color:#35543f; font-size:12px; font-weight:750; }
.vlt-klar-goal-month__values { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #e5eae6; }
.vlt-klar-goal-month__values > div { padding:14px; text-align:center; border-left:1px solid #e5eae6; }
.vlt-klar-goal-month__values > div:first-child { border-left:0; }
.vlt-klar-goal-month__values small { display:block; color:#66736a; }
.vlt-klar-goal-month__values strong { display:block; margin-top:5px; color:#16813a; font-size:18px; }
.vlt-klar-weeks > div { justify-content:space-between; margin-top:8px; padding:12px 14px; box-shadow:none; }
.vlt-klar-weeks > div.is-current { border-color:#16813a; }
.vlt-klar-weeks > div.is-done strong { color:#16813a; }
.vlt-klar-edit-goals { display:flex; min-height:50px; align-items:center; justify-content:center; border:1px solid #16813a; border-radius:13px; color:#173f27; font-weight:850; }
.vlt-klar-goal-buttons > button { display:none; }
.vlt-klar-goal-footer { display:contents; }
.vlt-klar-current-goal { display:none; }

@media (max-width:760px) {
    /* Mobile Safari darf die Cockpit-Typografie nicht eigenständig aufblasen.
       Sonst weicht das echte iPhone trotz identischer Breite von der lokalen
       Vorschau ab und Text läuft aus den kompakten Zielkarten heraus. */
    .vlt-cockpit--mobile-klar,
    .vlt-cockpit--mobile-klar button,
    .vlt-cockpit--mobile-klar input,
    .vlt-cockpit--mobile-klar select,
    .vlt-cockpit--mobile-klar textarea {
        -webkit-text-size-adjust:100%;
        text-size-adjust:100%;
    }
    /* Vollansichten aus der unteren Navigation enden dynamisch exakt oberhalb
       der sichtbaren Werkzeugleiste. visualViewport berücksichtigt dabei auch
       ein- und ausblendende iPhone-Browserleisten. */
    .vlt-cockpit--mobile-klar.vlt-klar-nav-overlay-open .vlt-klar-view--main.is-table-focused,
    .vlt-cockpit--mobile-klar.vlt-klar-goals-open .vlt-klar-view--goals {
        position:fixed !important;
        z-index:9996;
        top:var(--vlt-klar-overlay-top,0px);
        right:0;
        bottom:auto;
        left:0;
        box-sizing:border-box;
        width:100%;
        height:var(--vlt-klar-overlay-nav-height,calc(100dvh - 76px));
        max-height:var(--vlt-klar-overlay-nav-height,calc(100dvh - 76px));
        margin:0;
        padding:10px 12px 8px !important;
        overflow:auto;
        background:#fff;
    }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick {
        z-index:100002;
        top:var(--vlt-klar-overlay-top,0px);
        right:0;
        bottom:auto;
        left:0;
        box-sizing:border-box;
        width:100%;
        height:var(--vlt-klar-overlay-full-height,100dvh);
        max-height:var(--vlt-klar-overlay-full-height,100dvh);
        padding:calc(12px + env(safe-area-inset-top)) 14px calc(100px + env(safe-area-inset-bottom));
        border:0;
        border-radius:0;
        box-shadow:none;
    }
    /* Das Aktionsfenster reicht weiss bis zum sichtbaren unteren Rand. Die
       Glasnavigation bleibt darueber und damit jederzeit bedienbar. */
    .vlt-cockpit--mobile-klar.vlt-klar-quick-open .vlt-cockpit-klar-nav {
        z-index:100003;
    }
    .vlt-cockpit--mobile-klar.vlt-klar-quick-open .vlt-elegant-nav-glass {
        opacity:0 !important;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet {
        top:var(--vlt-klar-overlay-top,0px);
        right:0;
        bottom:auto;
        left:0;
        box-sizing:border-box;
        width:100%;
        height:var(--vlt-klar-overlay-nav-height,calc(100dvh - 76px));
        max-height:var(--vlt-klar-overlay-nav-height,calc(100dvh - 76px));
        border-radius:0;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-cover-sheet,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar.is-vlt-cover-sheet {
        top:var(--vlt-klar-overlay-top,0px);
        right:0;
        bottom:auto;
        left:0;
        box-sizing:border-box;
        width:100%;
        height:var(--vlt-klar-overlay-full-height,100dvh);
        max-height:var(--vlt-klar-overlay-full-height,100dvh);
        padding-bottom:max(12px,env(safe-area-inset-bottom));
        border-radius:0;
    }
    .vlt-cockpit--mobile-klar.vlt-klar-cover-overlay-open .vlt-cockpit-klar-nav {
        visibility:hidden;
        pointer-events:none;
    }
    .vlt-cockpit--mobile-klar.vlt-klar-cover-overlay-open .vlt-klar-sheet-backdrop {
        inset:var(--vlt-klar-overlay-top,0px) 0 auto;
        height:var(--vlt-klar-overlay-full-height,100dvh);
    }

    .vlt-cockpit--mobile-klar > :not(.vlt-cockpit-klar-shell) { display:none !important; }
    .vlt-cockpit--mobile-klar > .vlt-cockpit-klar-shell { display:block !important; }
    .vlt-cockpit--mobile-klar {
        position:relative !important;
        left:calc((100% - 100vw) / 2) !important;
        width:100vw !important;
        max-width:100vw !important;
        min-width:0 !important;
        margin-right:0 !important;
        margin-left:0 !important;
        padding:16px 12px 104px !important;
        overflow-x:hidden !important;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-desktop-nav { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-head { padding-bottom:14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-brand img { height:calc(34px * var(--vlt-tool-logo-scale, 1)) !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-brand strong { font-size:13px; letter-spacing:.1em; }
    .vlt-cockpit--mobile-klar .vlt-klar-account { width:42px; height:42px; }
    .vlt-cockpit--mobile-klar .vlt-klar-view { padding-top:20px; }
    .vlt-cockpit--mobile-klar .vlt-klar-welcome { align-items:flex-start; padding:16px; border:1px solid #dfe7e1; border-radius:16px; box-shadow:0 5px 18px rgba(23,58,35,.06); }
    .vlt-cockpit--mobile-klar .vlt-klar-sun { width:48px; height:48px; border-radius:14px; font-size:27px; }
    .vlt-cockpit--mobile-klar .vlt-klar-welcome h2 { font-size:22px !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-welcome p { font-size:12px; line-height:1.45; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary { grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary article { min-height:112px; padding:14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary strong { font-size:15px; line-height:1.35; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary small { font-size:14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-year { grid-template-columns:1fr auto; gap:18px 12px; padding:17px; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__copy > strong { font-size:18px; }
    .vlt-cockpit--mobile-klar .vlt-klar-ring { width:88px; height:88px; }
    .vlt-cockpit--mobile-klar .vlt-klar-ring > span { font-size:24px; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__rest { grid-column:1/-1; padding:0; border-right:0; border-left:0; border-top:1px solid #e4e9e5; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-peek { grid-column:1/-1; padding-top:12px; border-top:1px solid #e4e9e5; }
    .vlt-cockpit--mobile-klar .vlt-klar-day { margin-top:16px; }
    .vlt-cockpit--mobile-klar .vlt-klar-day > h3 { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-day__toggle { display:flex; width:100%; min-height:68px; align-items:center; justify-content:space-between; border:1px solid #dfe7e1; border-radius:16px; background:#fff; padding:13px 16px; color:#173f27; text-align:left; box-shadow:0 5px 18px rgba(23,58,35,.06); }
    .vlt-cockpit--mobile-klar .vlt-klar-day__toggle span { display:flex; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-day__toggle strong { font-size:17px; }
    .vlt-cockpit--mobile-klar .vlt-klar-day__toggle small { margin-top:3px; color:#66736a; font-size:11.5px; }
    .vlt-cockpit--mobile-klar .vlt-klar-day__toggle b { font-size:24px; transition:transform .2s ease; }
    .vlt-cockpit--mobile-klar .vlt-klar-day.is-open .vlt-klar-day__toggle b { transform:rotate(180deg); }
    .vlt-cockpit--mobile-klar .vlt-klar-day__items { display:none; grid-template-columns:1fr; gap:9px; margin-top:9px; }
    .vlt-cockpit--mobile-klar .vlt-klar-day.is-open .vlt-klar-day__items { display:grid; }
    .vlt-cockpit--mobile-klar .vlt-klar-day__items article { min-height:76px; }
    .vlt-cockpit--mobile-klar .vlt-klar-actions { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-actions > div { grid-template-columns:1fr 1fr; gap:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-actions a { min-height:100px; align-items:flex-start; flex-direction:column; padding:14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-actions a b { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-actions a.is-primary,
    .vlt-cockpit--mobile-klar .vlt-klar-actions a.is-scan { display:flex; }
    .vlt-cockpit--mobile-klar .vlt-klar-goals-title h2 { font-size:30px !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-hero,
    .vlt-cockpit--mobile-klar .vlt-klar-goal-month,
    .vlt-cockpit--mobile-klar .vlt-klar-weeks { padding:17px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-hero__body { gap:18px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-ring { width:104px; height:104px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-hero dl > div { gap:16px; font-size:13px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-month__values { grid-template-columns:1fr; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-month__values > div { display:flex; justify-content:space-between; padding:11px 0; border-top:1px solid #e5eae6; border-left:0; text-align:left; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-month__values strong { margin:0; font-size:15px; }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav { display:grid !important; }
}

/* Kalenderausbau 2.10.009: Freigaben, Mannschaftsansicht und Rückkopplung. */
.vlt-klar-calendar__team-overview[hidden],
.vlt-klar-calendar__followup[hidden] { display:none !important; }

@media (max-width:760px) {
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-overview {
        position:absolute;
        z-index:8;
        display:flex;
        inset:0;
        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,.94);
        -webkit-backdrop-filter:blur(14px);
        backdrop-filter:blur(14px);
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-overview > header,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-overview > p,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-list {
        width:min(100%,560px);
        box-sizing:border-box;
        margin-right:auto;
        margin-left:auto;
        background:#fff;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-overview > header {
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:18px 18px 10px;
        border:1px solid #cfe0d3;
        border-bottom:0;
        border-left:3px solid #16813a;
        border-radius:18px 18px 0 0;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-overview header div { display:flex; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-overview header small { color:#16813a; font-size:9px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-overview header h3 { margin:2px 0 0; font-size:18px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-overview header button { display:grid; width:36px; height:36px; place-items:center; border:0; border-radius:50%; background:#edf5ef; color:#173f27; font-size:22px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-overview > p { margin:0; padding:0 18px 13px; border-right:1px solid #cfe0d3; border-left:3px solid #16813a; color:#68756d; font-size:10px; line-height:1.45; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-list { padding:0 18px 18px; border:1px solid #cfe0d3; border-top:0; border-left:3px solid #16813a; border-radius:0 0 18px 18px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-list h4 { margin:14px 0 2px; padding:0 0 7px; border-bottom:1px solid #dce7df; color:#16813a; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-list article { display:grid; grid-template-columns:105px minmax(0,1fr); gap:12px; padding:12px 0; border-top:1px solid #e2e9e4; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-list time,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-list span { display:flex; min-width:0; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-list strong,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-list b { color:#173f27; font-size:11px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__team-list small { margin-top:3px; color:#68756d; font-size:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current { display:grid; gap:7px; padding:10px; border:1px solid #dce7df; border-radius:12px; background:#f8fbf9; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current h4 { margin:0; color:#173f27; font-size:11px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current > div { display:grid; gap:6px; max-height:130px; overflow:auto; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid #e2e9e4; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article span { display:flex; min-width:0; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article strong { font-size:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article small,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current > small,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current p { margin:0; color:#68756d; font-size:9px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article button { padding:6px 8px; border:1px solid #b42318; border-radius:8px; background:#fff; color:#b42318; font-size:9px; font-weight:800; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__followup { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px; border:1px solid #e5d59c; border-radius:11px; background:#fff9e8; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments article mark { display:inline-flex; width:max-content; margin-top:5px; padding:3px 7px; border-radius:999px; background:#edf5ef; color:#31533c; font-size:8px; font-weight:800; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments article mark.is-sold { background:#dff3e5; color:#087c2f; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments article mark.is-considering,
    .vlt-cockpit--mobile-klar .vlt-klar-appointments article mark.is-follow_up { background:#fff1c7; color:#765700; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments article mark.is-not_met,
    .vlt-cockpit--mobile-klar .vlt-klar-appointments article mark.is-unsuccessful { background:#fde5e2; color:#a4261d; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__place,
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__followup { color:#4f6657 !important; font-weight:700 !important; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu { grid-template-columns:repeat(2,minmax(0,1fr)); min-height:128px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu > button { min-height:56px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu .is-training b { background:var(--vlt-badge-training,#7655b5); }
}

/* V2.9.835: Christians freigegebenes, kompaktes Smartphone-Cockpit. */
.vlt-klar-mobile-monitor,
.vlt-klar-mobile-switches,
.vlt-klar-mobile-performance,
.vlt-klar-section-gap,
.vlt-klar-mobile-remaining,
.vlt-klar-mobile-goal-week,
.vlt-klar-mobile-goal-metrics,
.vlt-klar-sheet,
.vlt-klar-sheet-backdrop { display:none; }

@media (max-width:760px) {
    html.vlt-klar-mobile-fixed,
    html.vlt-klar-mobile-fixed body { overflow:hidden !important; }
    html.vlt-klar-mobile-fixed body > header,
    html.vlt-klar-mobile-fixed #header,
    html.vlt-klar-mobile-fixed .site-header,
    html.vlt-klar-mobile-fixed #site-header,
    html.vlt-klar-mobile-fixed .main-header,
    html.vlt-klar-mobile-fixed #masthead,
    html.vlt-klar-mobile-fixed .top-bar,
    html.vlt-klar-mobile-fixed #top-bar { display:none !important; }
    .vlt-cockpit--mobile-klar {
        position:fixed !important;
        z-index:99900 !important;
        top:0 !important;
        right:0 !important;
        bottom:auto !important;
        left:0 !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--mobile-klar .vlt-cockpit-klar-shell { display:flex !important; height:100%; flex-direction:column; overflow:hidden; }
    .vlt-cockpit--mobile-klar .vlt-klar-head { flex:0 0 auto; padding-bottom:8px; }
    .vlt-cockpit--mobile-klar .vlt-klar-brand img { height:calc(28px * var(--vlt-tool-logo-scale, 1)) !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-brand strong { font-size:11px; }
    .vlt-cockpit--mobile-klar .vlt-klar-brand small { font-size:9px; }
    .vlt-cockpit--mobile-klar .vlt-klar-account { width:34px; height:34px; font-size:19px; }
    .vlt-cockpit--mobile-klar .vlt-klar-view { min-height:0; flex:1 1 auto; padding-top:6px; overflow:hidden; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:5px; }
    .vlt-cockpit--mobile-klar .vlt-klar-welcome,
    .vlt-cockpit--mobile-klar .vlt-klar-summary article,
    .vlt-cockpit--mobile-klar .vlt-klar-year__overview,
    .vlt-cockpit--mobile-klar .vlt-klar-analysis-head,
    .vlt-cockpit--mobile-klar .vlt-klar-value-performance,
    .vlt-cockpit--mobile-klar .vlt-klar-product-performance { border-bottom:1px solid #16813a; }
    .vlt-cockpit--mobile-klar .vlt-klar-welcome { padding:10px 12px; border-left:3px solid #16813a; border-radius:13px; }
    .vlt-cockpit--mobile-klar .vlt-klar-welcome > div { gap:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sun { width:38px; height:38px; border-radius:11px; font-size:21px; }
    .vlt-cockpit--mobile-klar .vlt-klar-welcome h2 { margin-bottom:2px !important; font-size:18px !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-welcome p { font-size:12px; line-height:1.25; white-space:normal; }
    .vlt-cockpit--mobile-klar .vlt-klar-welcome p strong { font-size:13px; }
    .vlt-cockpit--mobile-klar .vlt-cockpit__bell { transform:scale(.82); transform-origin:right center; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary { gap:8px; margin:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary article { min-height:70px; padding:9px 12px; border-radius:13px; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary article:first-child { align-items:flex-start; border-left:3px solid #16813a; text-align:left; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary article.is-green { align-items:flex-end; text-align:right; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary article.is-green { border-color:#dfe7e1; border-left:3px solid #16813a; background:#fff; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary article.is-green { border-bottom:1px solid #16813a; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary article.is-green span { color:#66736a; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary article:first-child small { order:2; margin-top:2px; color:#16813a; font-size:14px; font-weight:800; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary article:first-child strong { order:3; margin-top:1px; color:#173f27; font-size:12px; font-weight:400; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary article.is-green strong { order:2; color:#16813a; font-weight:800; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary article.is-green small { order:3; color:#173f27; font-weight:400; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary strong { margin-top:2px; font-size:14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-summary small { margin-top:1px; font-size:12px; }
    .vlt-cockpit--mobile-klar .vlt-klar-day,
    .vlt-cockpit--mobile-klar .vlt-klar-actions { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-monitor { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-monitor > div { display:flex; min-width:0; justify-content:center; flex-direction:column; padding:0 8px; border-left:1px solid #e3e9e4; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-monitor > div:first-child { border-left:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-monitor span,
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-goal-metrics span { color:#66736a; font-size:8.5px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-monitor strong,
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-goal-metrics strong { display:block; margin:5px 0 2px; overflow:hidden; color:#173f27; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-monitor small,
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-goal-metrics small { color:#16813a; font-size:9px; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-switches { position:fixed; z-index:10000; right:0; bottom:calc(21px + env(safe-area-inset-bottom)); left:0; display:block; height:52px; margin:0; pointer-events:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-switches > button { position:absolute; bottom:0; pointer-events:auto; transform:translateX(-50%); }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-switches > button:first-child { left:20%; margin:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-switches > button:last-child { left:80%; margin:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main > .vlt-klar-year { grid-row:3; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main > .vlt-klar-mobile-switches { grid-row:auto; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-switches button,
    .vlt-cockpit--mobile-klar .vlt-klar-edit-goals,
    .vlt-cockpit--mobile-klar .vlt-klar-goal-buttons > button { min-height:40px; margin:0; border:1px solid #16813a; border-radius:12px; background:#fff; color:#173f27; font-size:12px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-switches button { display:flex; width:58px; min-height:0; align-items:center; flex-direction:column; gap:2px; padding:0; border:0; background:transparent; box-shadow:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-switches button > span { display:grid; width:42px; height:42px; place-items:center; border:4px solid #fff; border-radius:50%; background:#16813a; color:#fff; box-shadow:0 5px 15px rgba(17,91,42,.22); font-size:20px; font-weight:700; line-height:1; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-switches button.is-day > span { background:#e7a51b; box-shadow:0 5px 15px rgba(176,116,4,.22); }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-switches button > small { color:#526058; font-size:8.5px; font-weight:850; line-height:1; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-switches button > small { order:-1; margin-bottom:2px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-buttons .vlt-klar-goal-action {
        position:relative;
        display:flex;
        min-width:0;
        min-height:52px;
        align-items:center;
        justify-content:center;
        gap:7px;
        box-sizing:border-box;
        margin:0;
        padding:8px 9px;
        overflow:hidden;
        border:1px solid rgba(22,129,58,.34);
        border-radius:16px;
        background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(222,239,226,.58));
        color:#173f27;
        box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 6px 16px rgba(23,80,39,.1);
        font-size:11px;
        font-weight:850;
        line-height:1.1;
        text-align:center;
        text-decoration:none;
        backdrop-filter:blur(15px) saturate(140%);
        -webkit-backdrop-filter:blur(15px) saturate(140%);
    }
    .vlt-cockpit--mobile-klar .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,.74),transparent);
        transform:skewX(-16deg);
        animation:vlt-elegant-glass-sheen 5.8s ease-in-out infinite;
    }
    .vlt-cockpit--mobile-klar .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:#16813a; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-buttons .vlt-klar-goal-action span,
    .vlt-cockpit--mobile-klar .vlt-klar-goal-buttons .vlt-klar-goal-action small { position:relative; z-index:1; margin:0; color:#173f27; font:inherit; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-year { display:grid !important; height:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); align-self:stretch; align-content:stretch; align-items:center; gap:0 12px; min-height:0; padding:8px 14px 0; border-radius:14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__overview { position:relative; z-index:1; display:grid; grid-column:1/-1; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:6px 12px; margin:-8px 0 0 -14px; padding:8px 0 0 11px; border-left:3px solid #16813a; border-radius:14px 0 0 14px; background:#fff; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__overview::after { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__copy small { margin:3px 0 1px; font-size:9px; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__copy > strong { font-size:14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__copy > button { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__overview > .vlt-klar-ring { width:62px; height:62px; justify-self:center; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__overview > .vlt-klar-ring::after { inset:7px; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__overview > .vlt-klar-ring > span { font-size:18px; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__overview > .vlt-klar-ring em { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-peek,
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-remaining { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__rest { display:grid; min-height:54px; grid-column:1/-1; grid-template-columns:1fr 1fr; gap:0; padding:0; border:0; border-top:1px solid #e4e9e5; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__rest > div { justify-content:center; gap:1px; padding:3px 8px; border-top:0; border-left:1px solid #e7ece8; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__rest > div:first-child { align-items:flex-start; padding-left:0; border-left:0; text-align:left; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__rest > div:last-child { align-items:flex-end; padding-right:0; text-align:right; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__rest strong { font-size:13px; line-height:1.2; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__rest > div:first-child strong { font-weight:800; }
    .vlt-cockpit--mobile-klar .vlt-klar-year__rest > div:last-child strong { font-weight:800; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-peek { grid-column:1/-1; padding-top:6px; border-top:1px solid #e4e9e5; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-peek > strong { display:inline; margin:0 0 0 8px; font-size:15px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-peek > div { height:5px; margin-top:5px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-peek small { margin-top:4px; font-size:9px; }
    .vlt-cockpit--mobile-klar .vlt-klar-section-gap { position:relative; z-index:4; display:block; grid-column:1/-1; height:7px; margin:0 -14px; background:#edf1ee; }
    .vlt-cockpit--mobile-klar .vlt-klar-section-gap::before { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-performance { display:block; grid-column:1/-1; padding-top:7px; border-top:1px solid #e4e9e5; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main .vlt-klar-mobile-performance { position:relative; display:flex; width:calc(100% + 28px); height:100%; min-height:0; margin-top:0; margin-left:-14px; padding:0 0 0 11px; overflow:hidden; border-bottom:1px solid #16813a; border-left:3px solid #16813a; border-radius:12px 0 0 12px; background:#fff; flex-direction:column; overscroll-behavior:contain; }
    .vlt-cockpit--mobile-klar .vlt-klar-value-performance { position:relative; z-index:1; padding-left:0; border:0; border-radius:0; background:transparent; }
    .vlt-cockpit--mobile-klar .vlt-klar-value-performance > div { grid-template-columns:104px repeat(3,minmax(0,1fr)); min-height:26px; }
    .vlt-cockpit--mobile-klar .vlt-klar-table-gap { position:relative; z-index:0; display:block; width:100%; height:1px; margin:0; border-top:1px solid #aebeb3; background:transparent; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-remaining { display:grid; grid-column:1/-1; grid-template-columns:repeat(3,1fr); border-top:1px solid #e4e9e5; border-bottom:1px solid #e4e9e5; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-remaining > div { padding:6px 4px; border-left:1px solid #e7ece8; text-align:center; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-remaining > div:first-child { border-left:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-remaining span { display:block; color:#66736a; font-size:7px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-remaining strong { display:block; margin-top:2px; color:#16813a; font-size:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-value-performance > div { display:grid; grid-template-columns:104px repeat(3,minmax(0,1fr)); align-items:center; min-height:26px; border-top:1px solid #edf0ed; }
    .vlt-cockpit--mobile-klar .vlt-klar-value-performance > div:first-child { border-top:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-performance span { color:#526058; font-size:9.5px; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-performance strong { overflow:hidden; color:#173f27; font-size:9.5px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-performance__head,
    .vlt-cockpit--mobile-klar .vlt-klar-product-performance__head { position:relative; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-performance__head strong { color:#66736a; font-size:9px; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-analysis-head { position:relative; z-index:3; display:flex; height:32px; align-items:center; margin:0; padding:0 38px 0 0; border:0; border-bottom:1px solid #e3eae5; border-radius:0; background:transparent; transition:height .18s ease; }
    .vlt-cockpit--mobile-klar .vlt-klar-analysis-toggle { display:flex; min-width:0; align-items:center; gap:6px; margin:0; padding:0; border:0; background:transparent; color:#173f27; font-size:11px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-analysis-toggle i { color:#16813a; font-size:14px; font-style:normal; transition:transform .18s ease; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-performance.is-analysis-collapsed .vlt-klar-analysis-toggle i { transform:rotate(-90deg); }
    .vlt-cockpit--mobile-klar .vlt-klar-analysis-preview { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-performance.is-analysis-collapsed .vlt-klar-analysis-head { height:70px; align-items:flex-start; padding-top:8px; border-bottom:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main:not(.is-table-focused) .vlt-klar-year:has(.vlt-klar-mobile-performance.is-analysis-collapsed) { height:auto; align-self:start; grid-template-rows:auto auto auto; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main:not(.is-table-focused) .vlt-klar-mobile-performance.is-analysis-collapsed { height:70px; min-height:70px; flex:0 0 70px; overflow:hidden; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-performance.is-analysis-collapsed .vlt-klar-table-focus { top:16px; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-performance.is-analysis-collapsed .vlt-klar-analysis-preview { position:absolute; right:8px; bottom:7px; left:8px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding-top:6px; border-top:1px solid #edf0ed; }
    .vlt-cockpit--mobile-klar .vlt-klar-analysis-preview > span { display:flex; min-width:0; align-items:center; flex-direction:column; border-left:1px solid #e3eae5; }
    .vlt-cockpit--mobile-klar .vlt-klar-analysis-preview > span:first-child { border-left:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-analysis-preview small { color:#68756d; font-size:7.5px; font-weight:800; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-analysis-preview strong { max-width:100%; overflow:hidden; color:#16813a; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-subtable-title { color:#173f27 !important; font-size:9.5px !important; font-weight:850; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-performance > [hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-table-toggle { display:flex; min-width:0; height:100%; align-items:center; justify-content:flex-start; gap:4px; margin:0; padding:0; border:0; background:transparent; color:#173f27; font:inherit; font-size:9.5px; font-weight:850; text-align:left; }
    .vlt-cockpit--mobile-klar .vlt-klar-table-toggle span { overflow:hidden; color:inherit; font:inherit; letter-spacing:0; text-overflow:ellipsis; text-transform:none; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-table-toggle i { color:#16813a; font-size:12px; font-style:normal; transition:transform .18s ease; }
    .vlt-cockpit--mobile-klar [data-vlt-klar-table].is-collapsed .vlt-klar-table-toggle i { transform:rotate(-90deg); }
    .vlt-cockpit--mobile-klar [data-vlt-klar-table-body][hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-week-switch { display:flex; min-width:0; align-items:center; justify-content:center; gap:2px; }
    .vlt-cockpit--mobile-klar .vlt-klar-week-switch button { display:grid; width:19px; height:22px; flex:0 0 19px; place-items:center; margin:0; padding:0; border:0; border-radius:7px; background:#edf5ef; color:#16813a; font-size:14px; line-height:1; }
    .vlt-cockpit--mobile-klar .vlt-klar-week-switch span { min-width:34px; color:#66736a; font-size:8px; font-weight:850; letter-spacing:0; text-align:center; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-table-focus { position:absolute; z-index:3; top:50%; right:3px; display:grid; width:24px; height:24px; place-items:center; margin:0; padding:0; border:1px solid #16813a; border-radius:8px; background:transparent; color:#111; box-shadow:none; font-size:15px; line-height:1; transform:translateY(-50%); }
    .vlt-cockpit--mobile-klar .vlt-klar-table-focus.is-active { background:#fff; color:#111; font-size:15px; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-performance [data-vlt-klar-table].is-focus-hidden,
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-performance[data-vlt-klar-focused-table]:not([data-vlt-klar-focused-table=""]) .vlt-klar-table-gap { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused { grid-template-rows:auto minmax(0,1fr); }
    .vlt-cockpit--mobile-klar .vlt-klar-focus-title { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused > :not(.vlt-klar-focus-title):not(.vlt-klar-year) { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused > .vlt-klar-focus-title { display:block; margin:0; padding:0 0 6px; }
    .vlt-cockpit--mobile-klar .vlt-klar-page-title h2 { margin:0 !important; color:#14291b !important; font-size:21px !important; font-weight:700; line-height:1.15 !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-page-title p { margin:2px 0 0; color:#5f6c63; font-size:10px; line-height:1.2; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused > .vlt-klar-year { display:block; grid-row:auto; min-height:0; padding:0; overflow:visible; border:0; background:transparent; box-shadow:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused > .vlt-klar-year > :not(.vlt-klar-mobile-performance) { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused .vlt-klar-mobile-performance { width:100%; margin:0; padding-left:13px; overflow:visible; border-right:0; border-bottom:0; border-left:0; border-radius:0; background:transparent; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused [data-vlt-klar-table] { position:relative; left:-13px; width:calc(100% + 13px); min-height:calc(100svh - 220px); padding:12px 10px 14px 13px; border:1px solid #dce6de; border-left:2px solid #16813a; border-radius:16px; box-shadow:0 8px 24px rgba(23,58,35,.08); }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused [data-vlt-klar-table] > div { min-height:38px; font-size:13px; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused [data-vlt-klar-table] span,
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused [data-vlt-klar-table] strong { font-size:13px; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused .vlt-klar-table-toggle { font-size:14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused .vlt-klar-table-focus { right:3px; width:24px; height:24px; border-radius:8px; }
    /* Die gemeinsame Auswertung unter "Meine Ziele" soll nur so hoch sein,
       wie ihre Zeilen es wirklich benoetigen. Die fruehere 1fr-Zeile zog
       insbesondere die Produktliste bis hinter den Footer und liess die
       Karte auf dem Smartphone unnötig lang wirken. */
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused[data-vlt-klar-focused-table="all"] .vlt-klar-mobile-performance { display:grid; height:auto; min-height:0; align-self:start; flex:none; grid-template-rows:32px auto 1px auto; gap:0; padding:0 11px; overflow:hidden; border:1px solid #dce6de; border-left:2px solid #16813a; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(23,58,35,.08); }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused[data-vlt-klar-focused-table="all"] .vlt-klar-analysis-head { padding-right:36px; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused[data-vlt-klar-focused-table="all"] [data-vlt-klar-table] { left:0; width:100%; min-height:0; padding:7px 0 8px; border:0; border-radius:0; box-shadow:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused[data-vlt-klar-focused-table="all"] .vlt-klar-table-gap { display:block !important; width:100%; height:1px; margin:0; border:0; border-top:1px solid #aebeb3; background:transparent; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused[data-vlt-klar-focused-table="all"] .vlt-klar-product-performance { height:auto; grid-auto-rows:minmax(31px,auto); }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused[data-vlt-klar-focused-table="all"] [data-vlt-klar-table] > div { min-height:29px; font-size:11px; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused[data-vlt-klar-focused-table="all"] [data-vlt-klar-table] span,
    .vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused[data-vlt-klar-focused-table="all"] [data-vlt-klar-table] strong { font-size:11px; }

    .vlt-cockpit--mobile-klar .vlt-klar-view--goals { display:grid; grid-template-rows:auto auto auto auto auto minmax(0,1fr); gap:6px; }
    .vlt-cockpit--mobile-klar .vlt-klar-back { position:absolute; top:7px; right:48px; min-height:32px; margin:0; padding:5px 10px; font-size:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goals-title { margin:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-goals-title h2 { margin:0 !important; font-size:21px !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-goals-title p { font-size:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-hero { margin:0; padding:11px 13px; border-radius:14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-hero h3 { margin-bottom:7px; font-size:13px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-hero__body { grid-template-columns:auto 1fr; gap:14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-ring { width:70px; height:70px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-ring::after { inset:7px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-ring > strong { font-size:19px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-hero dl > div { gap:10px; padding:4px 0; font-size:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-hero > p { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-hero { padding:8px 12px; border-left:2px solid #16813a; border-bottom:1px solid rgba(22,129,58,.72); }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-hero h3 { margin-bottom:4px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-ring { width:62px; height:62px; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-hero dl > div { padding:3px 0; }
    .vlt-cockpit--mobile-klar .vlt-klar-milestone { height:80px; min-height:80px; box-sizing:border-box; gap:9px; padding:6px 11px; border-left:2px solid #16813a; border-bottom:1px solid rgba(22,129,58,.72); border-radius:13px; }
    .vlt-cockpit--mobile-klar .vlt-klar-milestone__icon { width:38px; height:52px; flex-basis:38px; }
    .vlt-cockpit--mobile-klar .vlt-klar-milestone__icon svg { width:30px; height:45px; }
    .vlt-cockpit--mobile-klar .vlt-klar-milestone--topclub .vlt-klar-milestone__icon span { width:36px; height:36px; font-size:19px; }
    .vlt-cockpit--mobile-klar .vlt-klar-milestone__copy > strong { font-size:12px; }
    .vlt-cockpit--mobile-klar .vlt-klar-milestone__copy > small { font-size:8.5px; }
    .vlt-cockpit--mobile-klar .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:1px solid #dfe7e1; border-left:2px solid #16813a; border-bottom:1px solid rgba(22,129,58,.72); border-radius:14px; background:#fff; box-shadow:0 3px 10px rgba(23,58,35,.04); }
    .vlt-cockpit--mobile-klar .vlt-klar-current-goal > div:first-child { display:flex; min-width:0; grid-column:1/-1; align-items:baseline; justify-content:space-between; flex-direction:row; }
    .vlt-cockpit--mobile-klar .vlt-klar-current-goal > div:first-child span { color:#66736a; font-size:8px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-current-goal > div:first-child strong { margin-top:0; color:#173f27; font-size:12px; }
    .vlt-cockpit--mobile-klar .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--mobile-klar .vlt-klar-current-goal__ring::after { content:""; position:absolute; inset:5px; border-radius:50%; background:#fff; }
    .vlt-cockpit--mobile-klar .vlt-klar-current-goal__ring strong { position:relative; z-index:1; color:#173f27; font-size:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-current-goal dl { margin:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-current-goal dl > div { display:flex; justify-content:space-between; gap:6px; padding:2px 0; border-top:1px solid #edf0ed; font-size:8.5px; }
    .vlt-cockpit--mobile-klar .vlt-klar-current-goal dl > div:first-child { border-top:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-current-goal dt { color:#68756d; }
    .vlt-cockpit--mobile-klar .vlt-klar-current-goal dd { margin:0; color:#173f27; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-goal-month,
    .vlt-cockpit--mobile-klar .vlt-klar-weeks { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-goal-week { display:grid; grid-template-columns:1fr; align-items:center; gap:6px; padding:7px 10px 8px; border:1px solid #dfe7e1; border-left:2px solid #16813a; border-radius:12px; background:#fff; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-goal-week > div:first-child { display:flex; align-items:baseline; justify-content:space-between; flex-direction:row; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-goal-week > div:first-child span { color:#66736a; font-size:9px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-goal-week > div:first-child strong { margin-top:0; color:#173f27; font-size:13px; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-kws { display:grid; grid-column:1/-1; grid-template-columns:repeat(var(--vlt-klar-weeks,5),minmax(0,1fr)); gap:5px; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-kws button { display:grid; min-width:0; height:27px; place-items:center; padding:0 4px; border:1px solid #b9d4c0; border-radius:999px; background:#fff; color:#5f6c63; font-size:8.5px; font-weight:800; text-align:center; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-kws button.is-current { border-color:#16813a; background:#16813a; color:#fff; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-goal-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); min-height:0; padding:10px 8px; border:1px solid #dfe7e1; border-radius:14px; background:#fff; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-goal-metrics { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-performance { position:relative; z-index:1; display:grid !important; min-height:0; flex:1 1 auto; grid-auto-rows:minmax(0,1fr); margin-top:0; padding-top:1px; padding-left:0; overflow:hidden; border-top:0; border-bottom:0; border-left:0; border-radius:0; background:transparent; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-performance__head,
    .vlt-cockpit--mobile-klar .vlt-klar-product-performance__row { display:grid; grid-template-columns:104px repeat(3,minmax(0,1fr)); align-items:center; min-height:0; border-top:1px solid #dfe7e1; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-performance__head { border-top:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-performance__head span { color:#173f27; font-size:9.5px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-performance__head strong { color:#66736a; font-size:9px; text-align:center; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-performance__row span { overflow:hidden; padding:2px 8px 2px 0; color:#526058; font-size:9.5px; font-weight:400; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-performance__row strong { align-self:stretch; display:grid; place-items:center; color:#16813a; font-size:9.5px; font-weight:400; line-height:1; text-align:center; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-performance > p { margin:7px 0 2px; color:#68756d; font-size:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--main .vlt-klar-welcome,
    .vlt-cockpit--mobile-klar .vlt-klar-view--main .vlt-klar-summary article:first-child,
    .vlt-cockpit--mobile-klar .vlt-klar-view--main .vlt-klar-summary article.is-green,
    .vlt-cockpit--mobile-klar .vlt-klar-view--main .vlt-klar-year__overview,
    .vlt-cockpit--mobile-klar .vlt-klar-view--main .vlt-klar-mobile-performance { border-left-width:2px; border-bottom-color:rgba(22,129,58,.72); }
    .vlt-cockpit--mobile-klar [data-vlt-klar-magnify] { -webkit-touch-callout:none; }
    .vlt-klar-table-magnifier { position:fixed; z-index:1000000; width:164px; height:104px; overflow:hidden; pointer-events:none; border:2px solid #16813a; border-radius:18px; background:#fff; box-shadow:0 12px 30px rgba(20,52,31,.24); opacity:0; transform:translateY(5px) scale(.96); transition:opacity .12s ease,transform .12s ease; }
    .vlt-klar-table-magnifier.is-visible { opacity:1; transform:translateY(0) scale(1); }
    .vlt-klar-table-magnifier__content { position:absolute; top:0; left:0; margin:0 !important; transform-origin:0 0; background:#fff; }
    @media (prefers-reduced-motion:reduce) { .vlt-klar-table-magnifier,.vlt-cockpit--mobile-klar .vlt-klar-table-toggle i { transition:none; } }
    .vlt-cockpit--mobile-klar .vlt-klar-products-trigger { display:none !important; }
    /* Wochenwahl und beide Zielaktionen enden vollständig oberhalb der
       schwebenden Footer-Navigation. So bleiben „Auswertung“ und
       „Ziele bearbeiten“ auch auf dem echten iPhone sichtbar und klickbar. */
    .vlt-cockpit--mobile-klar .vlt-klar-goal-footer {
        display:flex;
        min-height:0;
        justify-content:flex-end;
        flex-direction:column;
        gap:6px;
        padding-bottom:calc(88px + env(safe-area-inset-bottom));
        box-sizing:border-box;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-goal-metrics > div { display:flex; min-width:0; justify-content:center; flex-direction:column; padding:0 8px; border-left:1px solid #e3e9e4; }
    .vlt-cockpit--mobile-klar .vlt-klar-mobile-goal-metrics > div:first-child { border-left:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--overview { display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:9px; }
    .vlt-cockpit--mobile-klar .vlt-klar-view--overview .vlt-klar-mobile-monitor { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); min-height:0; padding:12px 8px; border:1px solid #dfe7e1; border-radius:14px; background:#fff; }

    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav { height:68px; padding:7px 9px max(5px,env(safe-area-inset-bottom)); }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav button:not(.vlt-cockpit-klar-nav__plus) { border:0; background:transparent; color:#59665e; }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav > a > span,
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav > button:not(.vlt-cockpit-klar-nav__plus) > span,
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav > a > svg,
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav > button:not(.vlt-cockpit-klar-nav__plus) > svg { display:grid; width:22px; height:22px; place-items:center; flex:0 0 22px; font-size:21px; line-height:1; }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav small { font-size:9px; }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-nav__plus { width:56px; height:56px; margin-top:-35px; }

    .vlt-cockpit--mobile-klar .vlt-klar-sheet-backdrop { position:fixed; z-index:100000; inset:0; display:block; background:rgba(9,24,14,.34); }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet { position:fixed; z-index:100001; top:max(8px,env(safe-area-inset-top)); right:8px; bottom:max(8px,env(safe-area-inset-bottom)); left:8px; display:block; max-height:none; overflow:auto; border:1px solid #dbe5dd; border-radius:20px; background:#fff; box-shadow:0 -12px 40px rgba(13,43,23,.2); }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet[hidden],
    .vlt-cockpit--mobile-klar .vlt-klar-sheet-backdrop[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > header { display:flex; align-items:center; justify-content:space-between; padding:15px 17px 12px; border-bottom:1px solid #e5ebe6; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > header.vlt-klar-page-title { padding:10px 12px 8px; border-bottom:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > header.vlt-klar-page-title > div { gap:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > header div { display:flex; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > header small { color:#16813a; font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > header strong { color:#14291b; font-size:20px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > header button { width:34px; height:34px; border:0; border-radius:50%; background:#edf4ee; color:#173f27; font-size:22px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__search { display:flex; gap:8px; margin:12px 14px 8px; padding:9px 12px; border:1px solid #dfe7e1; border-radius:11px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__search input { width:100%; border:0; outline:0; background:transparent; font-size:13px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts { max-height:42dvh; overflow:auto; padding:3px 14px 14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #e8ede9; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article > span,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__avatar { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border-radius:50%; background:#e8f4eb; color:#16813a; font-size:12px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article > div { display:flex; min-width:0; flex:1; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article strong { color:#14291b; font-size:13px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article small { color:#68756d; font-size:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article a { display:grid; width:36px; height:36px; place-items:center; border-radius:50%; background:#16813a; color:#fff; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__support { padding:16px; text-align:center; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__support img { width:72px; height:72px; border-radius:50%; object-fit:cover; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__support .vlt-klar-sheet__avatar { margin:0 auto; width:72px; height:72px; font-size:28px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__support h3 { margin:9px 0 2px; color:#14291b; font-size:18px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__support p { margin:0 0 12px; color:#68756d; font-size:11px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__support > div { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__support a { display:flex; min-height:40px; align-items:center; justify-content:center; border:1px solid #16813a; border-radius:10px; color:#173f27; font-size:10px; font-weight:800; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__day { display:grid; gap:8px; padding:12px 14px 16px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__day article { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #e2e9e4; border-radius:11px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__day i { display:grid; width:36px; height:36px; place-items:center; border-radius:10px; background:#edf5ee; font-style:normal; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__day span { display:flex; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__day strong { color:#14291b; font-size:12px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__day small { color:#68756d; font-size:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--appointments:not([hidden]) { display:flex; min-height:0; flex-direction:column; overflow:hidden; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--appointments > header { flex:0 0 auto; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments { min-height:0; flex:1 1 auto; overflow:auto; padding:12px 14px 20px; background:linear-gradient(180deg,#fbfdfb 0,#fff 120px); overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__scope { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:4px; border:1px solid #dfe8e1; border-radius:14px; background:rgba(238,244,239,.86); }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__scope button { min-width:0; min-height:36px; padding:5px 3px; border:0; border-radius:10px; background:transparent; color:#59665e; font-size:9px; font-weight:850; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__scope button.is-active { background:#fff; color:#126d31; box-shadow:0 3px 9px rgba(20,55,31,.09); }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__categories[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__categories { display:flex; gap:6px; margin:8px 0 0; padding:1px 0 4px; overflow:auto; scrollbar-width:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__categories::-webkit-scrollbar { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__categories button { min-height:30px; flex:0 0 auto; padding:5px 10px; border:1px solid #d8e5da; border-radius:999px; background:#fff; color:#5e6b63; font-size:9px; font-weight:800; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__categories button.is-active { border-color:#16813a; background:#edf6ef; color:#126d31; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list { display:grid; gap:14px; margin-top:14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list > section { display:grid; gap:7px; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list > section[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list h3 { margin:0; color:#66736a; font-size:9px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list article { display:grid; grid-template-columns:43px minmax(0,1fr) 30px; align-items:center; gap:10px; padding:10px; border:1px solid #dfe8e1; border-left:2px solid #16813a; border-radius:14px; background:#fff; box-shadow:0 6px 16px rgba(20,55,31,.055); }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list article[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list article > time { display:grid; width:43px; height:48px; place-content:center; border-radius:11px; background:#edf5ef; color:#153f25; text-align:center; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list article > time b { font-size:17px; line-height:1; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list article > time small { margin-top:3px; color:#16813a; font-size:8px; font-weight:850; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list article > div { display:flex; min-width:0; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list article > div strong { overflow:hidden; color:#14291b; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list article > div span { margin-top:2px; color:#31483a; font-size:10px; font-weight:750; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list article > div small { overflow:hidden; margin-top:2px; color:#748077; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list article > div em { display:flex; align-items:center; gap:4px; margin-top:5px; color:#6a766e; font-size:8px; font-style:normal; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list article > div em i { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:#16813a; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__list article > button { display:grid; width:30px; height:30px; place-items:center; border:1px solid #d9e5dc; border-radius:50%; background:#fff; color:#16813a; font-size:20px; line-height:1; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__empty { margin:36px 0; color:#6a766e; font-size:11px; text-align:center; }
    .vlt-cockpit--mobile-klar .vlt-klar-appointments__empty[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar { inset:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); max-height:none; overflow:hidden; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar:not([hidden]) { display:flex; min-height:0; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar { position:relative; min-height:0; flex:1 1 auto; overflow:auto; padding:12px 14px 18px; overscroll-behavior:contain; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__head { position:relative; z-index:10; display:grid; min-height:52px; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; flex:0 0 auto; padding-top:10px; padding-bottom:9px; background:#fff; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__head > div:first-child { display:flex; min-width:0; justify-content:center; flex-direction:column; align-self:stretch; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__head > div:first-child small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > .vlt-klar-calendar__head > .vlt-klar-calendar__header-actions { display:flex; min-width:0; align-items:center; justify-content:flex-end; flex-direction:row; gap:7px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__header-actions > button { position:static; transform:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > .vlt-klar-calendar__head .vlt-klar-calendar__toolclusters { display:flex; min-width:0; flex:0 0 auto; align-items:center; justify-content:flex-end; flex-direction:row; gap:6px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > .vlt-klar-calendar__head .vlt-klar-calendar__toolgroup { display:flex; align-items:center; flex-direction:row; overflow:hidden; padding:2px 4px; border:1px solid rgba(22,129,58,.2); border-radius:999px; background:rgba(255,255,255,.82); box-shadow:0 5px 16px rgba(20,55,31,.08); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
    .vlt-cockpit--mobile-klar .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:0; border-left:1px solid #e2eae4; background:transparent; color:#16813a; line-height:1; touch-action:manipulation; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__toolgroup button:first-child { border-left:0; }
    .vlt-cockpit--mobile-klar .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--mobile-klar .vlt-klar-calendar__toolgroup .vlt-klar-calendar__add { font-size:29px; font-weight:400; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > .vlt-klar-calendar__head .vlt-klar-calendar__close { display:grid; width:44px; height:44px; flex:0 0 44px; place-items:center; border:0; border-radius:50%; background:#edf5ef; color:#173f27; font-size:23px; touch-action:manipulation; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__search[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .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 #edf1ee; background:#fff; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__search label { display:flex; min-width:0; flex:1; align-items:center; gap:8px; padding:8px 11px; border:1px solid #dce7df; border-radius:999px; background:#f5f8f5; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__search svg { width:17px; height:17px; flex:0 0 auto; fill:none; stroke:#16813a; stroke-width:1.8; stroke-linecap:round; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#14291b; font-size:12px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__search > button { display:grid; width:32px; height:32px; flex:0 0 auto; place-items:center; border:0; border-radius:50%; background:#edf5ef; color:#173f27; font-size:18px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar h3 { margin:0 0 9px; color:#183f27; font-size:13px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__viewbar { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 118px; align-items:center; gap:8px; padding-top:0; margin-bottom:14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__views { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:0; padding:4px; border-radius:12px; background:#eef3ef; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__views button { min-height:36px; border:0; border-radius:9px; background:transparent; color:#5d6962; font-size:11px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__views button.is-active { background:#16813a; color:#fff; box-shadow:0 2px 7px rgba(16,75,37,.14); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__category-filter { position:relative; display:block; min-width:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__category-filter::after { content:"⌄"; position:absolute; top:50%; right:10px; pointer-events:none; color:#16813a; font-size:13px; font-weight:900; transform:translateY(-55%); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__category-filter select { width:100%; min-height:44px; box-sizing:border-box; padding:0 25px 0 11px; border:1px solid rgba(22,129,58,.34); border-radius:999px; outline:0; -webkit-appearance:none; appearance:none; background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(222,240,227,.78)); color:#174528; font:800 9px/1 var(--vlt-font-family, -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif); box-shadow:inset 0 1px 0 #fff,0 4px 12px rgba(23,80,39,.11); text-overflow:ellipsis; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__category-filter select:focus { border-color:#16813a; box-shadow:0 0 0 3px rgba(22,129,58,.12),inset 0 1px 0 #fff; }
    .vlt-cockpit--mobile-klar [data-vlt-calendar-panel][hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__events { display:grid; gap:7px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__events > p { margin:0 0 8px; color:#68756d; font-size:11px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__events article { display:grid; grid-template-columns:66px minmax(0,1fr) auto; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid #e4ebe6; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__events time { color:#16813a; font-size:11px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__events article div { display:flex; min-width:0; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__events article .vlt-klar-calendar__event-open { cursor:pointer; border-radius:7px; outline:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__events article .vlt-klar-calendar__event-open:focus-visible { box-shadow:0 0 0 3px rgba(22,129,58,.15); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__events article strong { overflow:hidden; color:#14291b; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__events article small { color:#68756d; font-size:9px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__event-actions { display:flex; align-items:center; gap:5px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__events article button {
        min-width:62px;
        min-height:38px;
        padding:8px 11px;
        border:1px solid #bdd8c4;
        border-radius:999px;
        background:#f2f8f3;
        color:#126d31;
        font-size:11px;
        font-weight:850;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-head { display:grid; grid-template-columns:36px minmax(0,1fr) auto 36px; align-items:center; gap:6px; margin-bottom:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-head strong { text-align:center; color:#14291b; font-size:15px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-head button { width:34px; height:34px; border:1px solid #dbe6dd; border-radius:50%; background:#fff; color:#16813a; font-size:22px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-head .vlt-klar-calendar__today { width:auto; min-width:56px; padding:0 11px; border-radius:999px; font-size:10px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-grid > span,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-grid > button { display:grid; aspect-ratio:1; min-width:0; place-items:center; border:0; border-radius:9px; background:#f8faf8; color:#31443a; font-size:11px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-grid > .is-weekday { aspect-ratio:auto; padding:4px 0; background:transparent; color:#758078; font-size:9px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-grid > .is-empty { background:transparent; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-grid > .has-events { position:relative; background:#edf6ef; color:#0f6f30; font-weight:900; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__event-dots { position:absolute; right:3px; bottom:4px; left:3px; display:flex; justify-content:center; gap:2px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__event-dots i { width:5px; height:5px; border-radius:50%; background:var(--vlt-badge-calendar,#cf2e2e); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__event-dots i.is-customer { background:var(--vlt-badge-calendar,#cf2e2e); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__event-dots i.is-installation { background:var(--vlt-badge-install,#e7a600); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__event-dots i.is-birthday { background:var(--vlt-badge-birthday,#287fbe); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__event-dots i.is-training { background:var(--vlt-badge-training,#7952b3); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-grid > .is-selected { outline:2px solid #16813a; outline-offset:-2px; background:#fff; color:#123f24; font-weight:900; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-grid > .is-today { background:#16813a; color:#fff; font-weight:900; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-grid > .is-today.is-selected { outline-color:#0f5f2b; box-shadow:0 0 0 2px #fff inset; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-grid > .is-today .vlt-klar-calendar__event-dots i { box-shadow:0 0 0 1px rgba(255,255,255,.8); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month > p { display:flex; align-items:center; gap:6px; margin:10px 0 0; color:#6b776f; font-size:9px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month > p i { width:7px; height:7px; border-radius:50%; background:#16813a; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month { width:100%; min-width:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details { position:absolute; z-index:8; display:grid; inset:10px; width:auto; min-width:0; align-content:start; gap:7px; overflow:auto; margin:0; padding:18px 14px 16px; border:1px solid #cfe0d3; border-left:3px solid #16813a; border-radius:18px; background:rgba(255,255,255,.98); box-shadow:0 18px 48px rgba(20,55,31,.18); box-sizing:border-box; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details h4 { margin:3px 48px 8px 0; color:#173f27; font-size:16px; font-weight:850; text-transform:capitalize; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__day-close { position:absolute; top:10px; right:10px; display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:50%; background:#edf5ef; color:#173f27; font-size:23px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details > p { margin:0; padding:10px 0; color:#6b776f; font-size:10px; line-height:1.4; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details article { display:grid; width:100%; min-width:0; grid-template-columns:10px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:3px 8px; padding:8px 10px; border:1px solid #dfe8e1; border-radius:12px; background:#fff; box-sizing:border-box; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details article > i { width:9px; height:9px; grid-row:2; align-self:center; flex:0 0 auto; border-radius:50%; background:var(--vlt-badge-calendar,#cf2e2e); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details article.is-installation > i { background:var(--vlt-badge-install,#e7a600); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details article.is-birthday > i { background:var(--vlt-badge-birthday,#287fbe); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details article.is-training > i { background:var(--vlt-badge-training,#7952b3); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details article > div { display:grid; min-width:0; grid-row:1/-1; grid-column:2; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; gap:3px 10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details strong { min-width:0; overflow:hidden; grid-row:1; grid-column:1; color:#14291b; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details .vlt-klar-calendar__month-event-title { cursor:pointer; border-radius:5px; outline:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details .vlt-klar-calendar__month-event-title:focus-visible { box-shadow:0 0 0 3px rgba(22,129,58,.15); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-details article > div > small { overflow:hidden; grid-row:2; grid-column:1; color:#52645a; font-size:10px; font-weight:650; line-height:1.25; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-card-button { min-height:36px; grid-row:1/-1; grid-column:2; padding:7px 13px; border:1.5px solid #8cbea0; border-radius:999px; background:#eaf5ed; color:#126d31; font-size:11px; font-weight:900; white-space:nowrap; box-shadow:0 3px 8px rgba(20,55,31,.08); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-contact { display:flex; min-width:0; grid-column:1/-1; align-items:center; gap:5px 12px; flex-wrap:wrap; margin-top:2px; padding-top:4px; border-top:1px solid #edf2ee; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-contact small { min-width:0; overflow:hidden; color:#68756d; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card { position:absolute; z-index:9; display:flex; inset:0; 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,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card > article { display:grid; width:min(100%,440px); gap:13px; margin:auto; padding:15px; border:1px solid #cfe0d3; border-left:3px solid #16813a; border-radius:18px; background:#fff; box-shadow:0 18px 48px rgba(20,55,31,.18); box-sizing:border-box; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card header div { display:flex; min-width:0; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card header small { color:#16813a; font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card header h3 { overflow:hidden; margin:2px 0 0; color:#173f27; font-size:20px; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card header button { display:grid; width:40px; height:40px; flex:0 0 40px; place-items:center; border:0; border-radius:50%; background:#edf5ef; color:#173f27; font-size:24px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-body { display:grid; gap:8px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-body > strong { padding:10px 12px; border-radius:11px; background:#edf6ef; color:#174528; font-size:12px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-body > a { display:grid; min-width:0; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:9px; padding:11px 12px; border:1px solid #dbe7dd; border-radius:11px; background:#fff; color:#173f27; text-decoration:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-body > a[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-body > a span { color:#6a776e; font-size:9px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-body > a b { min-width:0; overflow-wrap:anywhere; color:#173f27; font-size:13px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card footer { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card footer > * { display:flex; min-height:44px; align-items:center; justify-content:center; box-sizing:border-box; border:1px solid #16813a; border-radius:11px; background:#fff; color:#126d31; font-size:11px; font-weight:850; text-align:center; text-decoration:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card footer > a[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card footer > button { background:#16813a; color:#fff; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card footer > button:only-child { grid-column:1/-1; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__composer[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__composer { position:absolute; z-index:7; display:flex; inset:0; 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,.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form { display:grid; width:min(100%,440px); gap:6px; margin:auto; padding:10px 14px 12px; border:1px solid #cfe0d3; border-left:3px solid #16813a; border-radius:18px; background:#fff; box-shadow:0 18px 48px rgba(20,55,31,.18); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form > header { display:flex; min-height:28px; align-items:center; justify-content:space-between; padding:0; border:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form > header h3 { margin:0; font-size:18px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form > header button { display:grid; width:36px; height:36px; place-items:center; border:0; border-radius:50%; background:#edf5ef; color:#173f27; font-size:22px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form label { display:grid; min-width:0; gap:2px; color:#334e3d; font-size:11px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form > div { display:grid; min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form input,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form textarea,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form select { box-sizing:border-box; width:100%; min-width:0; max-width:100%; min-height:40px; margin:0; padding:6px 10px; border:1.5px solid #9bc7a7; border-radius:11px; outline:none; background:#f8fbf8; color:#14291b; font:inherit; font-size:14px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__datetime > label { min-width:0; overflow:hidden; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form > .vlt-klar-calendar__address-line { grid-template-columns:minmax(0,2.35fr) minmax(88px,.85fr); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__datetime input[type="date"],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__datetime input[type="time"] { display:block; inline-size:100%; min-inline-size:0; max-inline-size:100%; -webkit-appearance:none; appearance:none; text-align:left; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__datetime input[type="date"]::-webkit-date-and-time-value,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__datetime input[type="time"]::-webkit-date-and-time-value { min-width:0; margin:0; text-align:left; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__quarter-time { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:7px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__quarter-time select { width:100%; min-width:0; text-align:center; text-align-last:center; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__quarter-time b { color:#173f27; font-size:18px; line-height:1; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__street,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__city,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__email { position:relative; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__city-list,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__street-list,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__email-suggestions { position:absolute; z-index:12; top:100%; right:0; left:0; display:grid; max-height:220px; overflow:auto; margin-top:5px; padding:5px; border:1px solid #cfe0d3; border-radius:11px; background:#fff; box-shadow:0 12px 30px rgba(20,55,31,.18); -webkit-overflow-scrolling:touch; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__city-list[hidden],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__street-list[hidden],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__email-suggestions[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__city-list button,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__street-list button,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__email-suggestions button { min-height:44px; padding:10px; border:0; border-bottom:1px solid #e6ebe7; background:#fff; color:#173f27; font:inherit; font-size:15px; font-weight:700; text-align:left; } /* 16.08.: Strasse etwas kleiner, gleich gross wie E-Mail (Christians Wunsch) */ /* 16.08. - Christian: Strassennamen und E-Mail-Endungen groesser (12px war Augenpulver) */
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__city-list button:last-child,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__street-list button:last-child,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__email-suggestions button:last-child { border-bottom:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form textarea { min-height:64px; resize:vertical; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form input:focus,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form textarea:focus,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form select:focus { border-color:#16813a; box-shadow:0 0 0 3px rgba(22,129,58,.1); background:#fff; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__products { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__products label { position:relative; display:block; min-width:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__products input { position:absolute; width:1px; height:1px; min-height:0; opacity:0; }
    .vlt-cockpit--mobile-klar .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 #d7e5da; border-radius:10px; background:#fff; color:#5d6962; font-size:9px; font-weight:650; line-height:1.15; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__products label > span b { color:#173f27; font-size:13px; } /* 16.08.: Kuerzel groesser (Christian) */
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__products label > span small { color:#647168; font-size:11px; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } /* 16.08.: Unterschrift groesser; Ueberlauf wird gekappt statt die Zelle zu heben */
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__products input:checked + span { border-color:#16813a; background:#edf7ef; color:#173f27; box-shadow:0 0 0 1px rgba(22,129,58,.18) inset; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__products input:focus-visible + span { outline:2px solid #16813a; outline-offset:2px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__reminders { display:grid; gap:8px; margin:0; padding:11px; border:1px solid #d7e5da; border-radius:12px; background:#fbfdfb; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__reminders legend { padding:0 5px; color:#334e3d; font-size:11px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__reminders > div { display:grid; gap:7px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__reminder { display:grid; grid-template-columns:minmax(0,1fr) 88px 34px; gap:6px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__reminder input[hidden] { display:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__reminder > button { border:1px solid #d8e3da; border-radius:9px; background:#fff; color:#9a2e28; font-size:20px; }
    .vlt-cockpit--mobile-klar [data-vlt-calendar-reminder-add] { min-height:38px; border:1px dashed #16813a; border-radius:10px; background:#fff; color:#16813a; font-size:11px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions { grid-template-columns:1fr 1fr !important; }
    /* 11.08. - Christian: zweite Knopfleiste unter Speichern/Loeschen. Der breite
       Gutschein-Knopf ueber beide Spalten, darunter je zwei Knoepfe nebeneinander. */
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--versand { margin-top:9px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--abbruch { display:grid; grid-template-columns:1fr 1fr !important; gap:9px; margin-top:9px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--abbruch:not(:has(> :not([hidden]))) { display:none !important; margin-top:0 !important; }
    /* 11.08. - Christian: Speichern und Loeschen auch unter dem angesehenen Gutschein. */
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--gutschein { display:grid; grid-template-columns:1fr 1fr !important; gap:9px; margin-top:12px; }
    /* Feste Spalten, damit die Paare auch im Gutschein-Blatt stehen bleiben. */
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--gutschein [data-vlt-voucher-save] { grid-column:1; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--gutschein [data-vlt-voucher-delete] { grid-column:2; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-whatsapp-business],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-sms],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-apple] { grid-column:1; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-whatsapp],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-email],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-google] { grid-column:2; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-share] { grid-column:1 / -1; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions [data-vlt-voucher-whatsapp-business],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions [data-vlt-blatt-whatsapp-business] { font-size:11px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-email],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--gutschein [data-vlt-blatt-share] { border-color:#16813a !important; background:#fff !important; color:#126d31 !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--gutschein .vlt-klar-calendar__export-trigger { min-height:46px !important; font-size:10px; }
    /* Ausgegraut statt weg: der Knopf bleibt stehen, ist aber sichtbar stumm. */
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions button.is-grau,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions button[disabled] { border-color:#d4dcd7 !important; background:#eef1ef !important; color:#9aa5a0 !important; cursor:not-allowed; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--versand:not(:has(> :not([hidden]))) { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions .vlt-klar-calendar__breit { grid-column:1 / -1; }
    /* Feste Spalten, damit die Paare stehen bleiben, wenn ein Knopf fehlt. */
    /* 11.08.: Business links, normales WhatsApp rechts; darunter SMS und E-Mail; Teilen breit. */
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--versand [data-vlt-voucher-whatsapp-business],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--versand [data-vlt-voucher-sms],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--versand [data-vlt-calendar-export-open] { grid-column:1; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--versand [data-vlt-voucher-whatsapp],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--versand [data-vlt-voucher-email],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--versand [data-vlt-calendar-google-open] { grid-column:2; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--versand [data-vlt-voucher-share] { grid-column:1 / -1; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--versand .vlt-klar-calendar__export-trigger { min-height:46px !important; font-size:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--versand [data-vlt-voucher-email],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions--versand [data-vlt-voucher-share] { border-color:#16813a; background:#fff; color:#126d31; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions > button[type="submit"] { grid-column:1 / -1; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions:has(.vlt-klar-calendar__delete-trigger:not([hidden])) > button[type="submit"] { grid-column:auto; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions button { min-height:46px; border:1px solid #16813a; border-radius:11px; background:#16813a; color:#fff; font-size:12px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions .vlt-klar-calendar__delete-trigger { border-color:#b9342d; background:#fff; color:#a52a24; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions .vlt-klar-calendar__voucher-trigger { border-color:#16813a; background:#fff; color:#126d31; }
    .vlt-cockpit--mobile-klar .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 #16813a; border-radius:10px; background:#fff; color:#126d31; font-size:10px; font-weight:850; text-align:center; text-decoration:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions .vlt-klar-calendar__export-trigger[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions [data-vlt-calendar-reset],
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__actions [data-vlt-voucher-cancel] { grid-column:1/-1; min-height:34px; border-color:#d7e3d9 !important; background:#fff !important; color:#68756d !important; font-weight:800; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__delete { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher { position:absolute; z-index:11; /* 10.08.: lag mit 9 unter dem Termin-Formular (Composer, wirksam 10) - der Gutschein ging auf, war aber verdeckt. */ display:flex; inset:0; 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:#f7faf7; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher > header { display:flex; align-items:center; justify-content:space-between; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher > header > div { display:flex; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher > header small { color:#16813a; font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher > header h3 { margin:2px 0 0; color:#14291b; font-size:20px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher > header button { display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:50%; background:#e9f2eb; color:#173f27; font-size:23px; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher { min-height:440px; flex:0 0 auto; overflow:hidden; border:1px solid #bdd5c3; border-left:3px solid #126d31; border-radius:18px; background:#fff; box-shadow:0 12px 30px rgba(20,55,31,.1); }
    .vlt-cockpit--mobile-klar .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 #dce7df; background:linear-gradient(135deg,#fff,#f4f9f5); }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher > header img { width:auto; max-width:48%; height:42px; object-fit:contain; object-position:left center; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher > header div { display:flex; align-items:flex-end; flex-direction:column; text-align:right; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher > header strong { color:#0e5a28; font-size:17px; letter-spacing:.03em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher > header small { color:#67746c; font-size:9px; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher > header small b { color:#14291b; letter-spacing:.08em; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher__body { display:grid; min-height:350px; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher__body > section { padding:14px; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher__body > section + section { border-left:1px solid #dce7df; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher dl { display:grid; gap:9px; margin:0; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher dl > div { display:grid; gap:2px; padding-bottom:7px; border-bottom:1px solid #e4ebe6; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher dt,.vlt-cockpit--mobile-klar .vlt-calendar-voucher h4 { margin:0; color:#67746c; font-size:8px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher dd { margin:0; color:#14291b; font-size:10px; line-height:1.3; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher ul { display:grid; gap:7px; margin:10px 0 0; padding:0; list-style:none; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher li { display:flex; min-width:0; align-items:flex-start; gap:6px; color:#173f27; font-size:8.5px; line-height:1.25; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher li i { display:grid; width:15px; height:15px; flex:0 0 auto; place-items:center; border:1px solid #16813a; color:#16813a; font-size:9px; font-style:normal; }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher li span { min-width:0; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher-actions button:disabled {
        border-color:#d8dfda;
        background:#edf0ee;
        color:#8d9690;
        box-shadow:none;
        opacity:.72;
        cursor:not-allowed;
    }
    .vlt-cockpit--mobile-klar .vlt-calendar-voucher li.is-empty { color:#7a857e; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher-note { margin:0; color:#65736a; font-size:9px; line-height:1.4; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher-actions button,.vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher-actions a { display:flex; min-height:44px; align-items:center; justify-content:center; box-sizing:border-box; border:1px solid #16813a; border-radius:11px; background:#fff; color:#126d31; font-size:10px; font-weight:850; text-align:center; text-decoration:none; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher-actions a[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher-actions button:first-child { background:#16813a; color:#fff; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__voucher-actions button:last-child { grid-column:1/-1; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing { position:absolute; z-index:8; display:flex; inset:0; 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,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
    .vlt-cockpit--mobile-klar .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:0; grid-template-rows:auto auto minmax(150px,1fr) auto auto auto auto; gap:10px; margin:0 auto; padding:14px; overflow:hidden; border:1px solid #cfe0d3; border-left:3px solid #16813a; border-radius:18px; background:#fff; box-shadow:0 18px 48px rgba(20,55,31,.18); box-sizing:border-box; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing header { display:flex; align-items:center; justify-content:space-between; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing header div { display:flex; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing header small { color:#16813a; font-size:9px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing header h3 { margin:2px 0 0; font-size:18px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing header button { display:grid; width:36px; height:36px; place-items:center; border:0; border-radius:50%; background:#edf5ef; color:#173f27; font-size:22px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing > form > p { margin:0; color:#68756d; font-size:10px; line-height:1.45; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing > form > .vlt-klar-calendar__sharing-preview { padding:8px 10px; border-radius:9px; background:#fff5d9; color:#67510e; font-weight:750; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__share-search { position:sticky; z-index:3; top:0; display:flex; align-items:center; gap:8px; padding:9px 11px; border:1.5px solid #9bc7a7; border-radius:11px; background:#f8fbf8; box-shadow:0 5px 14px rgba(20,55,31,.08); }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__share-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; font-size:13px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__share-list { display:grid; min-height:150px; gap:2px; overflow:auto; overscroll-behavior:contain; border:1px solid #e4ebe6; border-radius:11px; padding:0 8px; background:#fff; -webkit-overflow-scrolling:touch; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__share-list > label { display:grid; grid-template-columns:minmax(0,1fr) minmax(132px,42%); align-items:center; gap:8px; padding:9px 2px; border-bottom:1px solid #edf1ee; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__share-list > label > span { display:flex; min-width:0; flex-direction:column; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__share-list strong { overflow:hidden; color:#173f27; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__share-list small { color:#718078; font-size:8.5px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__share-list select { width:100%; min-height:38px; border:1px solid #cfe0d3; border-radius:9px; background:#fff; color:#284332; font-size:10px; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing > form > button[type="submit"] { min-height:46px; border:1px solid #16813a; border-radius:11px; background:#16813a; color:#fff; font-size:12px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:11px 14px 7px; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-tabs button { min-height:34px; border:0; border-radius:9px; background:#eef3ef; color:#59665e; font-size:11px; font-weight:850; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-tabs button.is-active { background:#16813a; color:#fff; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-list { max-height:45dvh; overflow:auto; padding:4px 14px 15px; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-list[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-list > div { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:8px 3px; border-bottom:1px solid #e6ece7; color:#59665e; font-size:11px; line-height:1.3; }
    .vlt-cockpit--mobile-klar .vlt-klar-product-list strong { flex:0 0 auto; color:#009039; font-size:12px; }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid button { position:relative; display:flex; width:100%; height:56px; min-width:0; align-items:center; justify-content:center; flex-direction:column; gap:4px; overflow:hidden; border:1px solid #dfe7e1; border-radius:13px; background:#fff; color:#173f27; }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid button i { font-size:19px; font-style:normal; }
    .vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid button small { font-size:10.5px; font-weight:800; }
}

@media (max-width:390px) {
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__head { grid-template-columns:1fr; grid-template-rows:auto auto; }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__head > div:first-child { align-items:center; padding-right:44px; text-align:center; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > .vlt-klar-calendar__head > .vlt-klar-calendar__header-actions { grid-row:2; justify-content:center; padding-right:0; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > .vlt-klar-calendar__head .vlt-klar-calendar__toolclusters { justify-content:center; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet > .vlt-klar-calendar__head .vlt-klar-calendar__close { position:absolute; top:10px; right:0; }
}

/* V2.10.136: Ruhiger Kalenderblock ohne Klappkante. Kalender und Uhr bilden
 * rechts eine eigenstaendige, dynamisch hohe Einheit. Die linke Cockpit-Linie
 * und die Ringoberkante teilen weiterhin eine feste, davon unabhaengige Achse. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top {
        height:var(--vlt-calendar-top-height,187px);
        min-height:var(--vlt-calendar-top-height,187px);
    }
    .vlt-cockpit--mobile-elegant .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:0;
        transform:translateX(-50%) scale(var(--vlt-calendar-scale,1));
        transform-origin:center center;
        pointer-events:none;
    }
    .vlt-cockpit--mobile-elegant .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:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__clock,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period {
        position:relative;
        top:auto;
        right:auto;
        bottom:auto;
        left:auto;
        width:100%;
        height:auto;
        min-height:0;
        margin:0;
        transform:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period {
        display:grid;
        place-items:center;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day {
        overflow:visible;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day::after {
        content:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__clock {
        display:grid;
        align-items:center;
        justify-items:center;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-page {
        display:grid;
        width:100%;
        height:100%;
        min-height:0;
        place-items:center;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time {
        gap:1px;
        transform:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > b,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-digital .vlt-elegant-overview__clock-time > b,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-glass .vlt-elegant-overview__clock-time > b {
        width:auto;
        min-width:.62em;
        height:auto;
        overflow:visible;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        color:var(--vlt-clock-color,#16813a);
        font-size:var(--vlt-clock-size,27px);
        font-weight:300;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > b::before,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > b::after {
        content:none;
    }
    .vlt-cockpit--mobile-elegant .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--mobile-elegant .vlt-elegant-overview__clock.is-analog .vlt-elegant-overview__analog {
        width:min(42px,calc(var(--vlt-calendar-clock-height,44px) - 2px));
        height:min(42px,calc(var(--vlt-calendar-clock-height,44px) - 2px));
        transform:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring {
        top:var(--vlt-calendar-cockpit-axis-top,106px);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__details > .vlt-elegant-overview__info--sales::after {
        top:calc(var(--vlt-calendar-cockpit-axis-top,106px) - 31px);
    }
    .vlt-cockpit--mobile-elegant .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--mobile-elegant .vlt-elegant-overview__rest > div > span {
        position:static;
        width:auto;
        line-height:1.2;
        text-align:center;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div > strong {
        margin:0;
        line-height:1.2;
    }
}

/* V2.10.136 Abschlussregel: bewusst am Dateiende, damit kein historischer
 * Kalenderstil die neue, linienfreie Anordnung erneut ueberschreibt. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top {
        height:var(--vlt-calendar-top-height,187px);
        min-height:var(--vlt-calendar-top-height,187px);
    }
    .vlt-cockpit--mobile-elegant .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:0;
        transform:translateX(-50%) scale(var(--vlt-calendar-scale,1));
        transform-origin:center center;
        pointer-events:none;
    }
    .vlt-cockpit--mobile-elegant .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:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__clock,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period {
        position:relative;
        top:auto;
        right:auto;
        bottom:auto;
        left:auto;
        width:100%;
        height:auto;
        min-height:0;
        margin:0;
        transform:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period {
        display:grid;
        place-items:center;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day { overflow:visible; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day::after { content:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__clock {
        display:grid;
        align-items:center;
        justify-items:center;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-page {
        display:grid;
        width:100%;
        height:100%;
        min-height:0;
        place-items:center;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time { gap:1px; transform:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > b,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-digital .vlt-elegant-overview__clock-time > b,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-glass .vlt-elegant-overview__clock-time > b {
        width:auto;
        min-width:.62em;
        height:auto;
        overflow:visible;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        color:var(--vlt-clock-color,#16813a);
        font-size:var(--vlt-clock-size,27px);
        font-weight:300;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > b::before,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > b::after { content:none; }
    .vlt-cockpit--mobile-elegant .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--mobile-elegant .vlt-elegant-overview__clock.is-analog .vlt-elegant-overview__analog {
        width:min(42px,calc(var(--vlt-calendar-clock-height,44px) - 2px));
        height:min(42px,calc(var(--vlt-calendar-clock-height,44px) - 2px));
        transform:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring { top:var(--vlt-calendar-cockpit-axis-top,106px); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__details > .vlt-elegant-overview__info--sales::after {
        top:calc(var(--vlt-calendar-cockpit-axis-top,106px) - 31px);
    }
    .vlt-cockpit--mobile-elegant .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--mobile-elegant .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--mobile-elegant .vlt-elegant-overview__rest > div > strong {
        margin:0;
        line-height:1.2;
    }
}

.vlt-cockpit--mobile-klar .vlt-klar-calendar__month-actions {
    display:flex;
    min-width:0;
    grid-row:1/-1;
    grid-column:2;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__month-actions .vlt-klar-calendar__month-card-button,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__month-edit-button {
    min-width:82px;
    min-height:38px;
    padding:7px 11px;
    border:1.5px solid #8cbea0;
    border-radius:999px;
    background:#eaf5ed;
    color:#126d31;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
    box-shadow:0 3px 8px rgba(20,55,31,.08);
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__month-edit-button {
    background:#16813a;
    color:#fff;
}

@media (max-width:390px) {
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-actions {
        gap:4px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-actions .vlt-klar-calendar__month-card-button,
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__month-edit-button {
        min-width:72px;
        padding-right:8px;
        padding-left:8px;
        font-size:10px;
    }
}

/* V2.10.135: In der Kalenderfreigabe ist die Suche bewusst kompakt; die
 * eigentliche Auswahl samt Berechtigung ist die grosse, fingerfreundliche
 * Arbeitsflaeche. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-klar .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--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-search input {
        min-height:28px;
        padding:2px 4px;
        font-size:11px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-add {
        grid-template-columns:minmax(0,1.35fr) minmax(132px,.8fr);
        gap:8px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-add select {
        min-height:52px;
        padding:8px 10px;
        font-size:12px;
        font-weight:750;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-add button {
        min-height:46px;
        font-size:12px;
    }
}

@media (min-width:761px) {
    .vlt-cockpit--desktop-klar > :not(.vlt-cockpit-klar-shell) { display:none !important; }
    .vlt-cockpit--desktop-klar > .vlt-cockpit-klar-shell { display:block !important; }
    .vlt-cockpit--desktop-klar { padding:26px 32px 34px !important; }
    .vlt-cockpit--desktop-klar .vlt-klar-summary { width:46%; margin-left:auto; margin-top:-82px; }
    .vlt-cockpit--desktop-klar .vlt-klar-summary article { min-height:88px; }
    .vlt-cockpit--desktop-klar .vlt-klar-year { margin-top:28px; }
    .vlt-cockpit--desktop-klar .vlt-cockpit-klar-nav,
    .vlt-cockpit--desktop-klar .vlt-cockpit-klar-quick { display:none !important; }
}

/* Smartphone-Vorlage "Elegant". Ausschließlich zusätzlich zur bestehenden
 * Klar-Vorlage; Klassik, Klar und sämtliche Desktop-Regeln bleiben unberührt. */
.vlt-elegant-overview,
.vlt-elegant-actions,
.vlt-elegant-overview__menu,
.vlt-elegant-overview__utility,
.vlt-elegant-overview__info,
.vlt-elegant-nav-action { display:none; }

@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant {
        --vlt-elegant-green:#16813a;
        --vlt-elegant-ink:#173f27;
        --vlt-elegant-muted:#66736a;
        --vlt-elegant-line:#dfe7e1;
        background:#fff !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-head {
        display:flex !important;
        visibility:visible !important;
        min-height:52px;
        align-items:center;
        padding:7px 5px 11px;
        border-bottom:1px solid #e4e9e5;
    }
    /* Kontoknopf exakt auf der sichtbaren Mittelachse der skalierten
       Erinnerungs-Glocke ausrichten; seine bisherige rechte Kopfposition
       bleibt dabei erhalten. */
    .vlt-cockpit--mobile-elegant .vlt-klar-account-menu {
        transform:translateX(-9px);
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main { padding-top:11px; }
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto auto minmax(0,1fr); column-gap:8px; }
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-klar-welcome,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-elegant-overview { grid-column:1 / -1; }
    /* V2.10.054: Die drei eigentlichen Dashboard-Kacheln verwenden fuer
       ihre waagerechten Abschluesse nun exakt den Grauton der inneren
       Kreuzlinien. Die linke Markenklammer bleibt unveraendert gruen. Die
       Vorrangregeln stellen sicher, dass auch der Vertriebskalender nicht
       von seiner spaeteren Karten-Grundregel wieder ueberschrieben wird. */
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-klar-welcome,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-elegant-overview,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-elegant-overview__utility {
        box-sizing:border-box;
        border-top:1px solid #e6ebe7 !important;
        border-bottom:2px solid #e6ebe7 !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-elegant-overview__utility {
        position:relative;
        display:grid;
        width:100%;
        height:238px;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:36px 24px 176px;
        grid-column:1 / -1;
        grid-row:3;
        margin-top:10px;
        overflow:hidden;
        border:1px solid var(--vlt-elegant-line);
        border-left:2px solid var(--vlt-elegant-green);
        border-bottom:1px solid rgba(22,129,58,.65);
        border-radius:18px;
        background:#fff;
        box-shadow:0 7px 22px rgba(23,58,35,.055);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-head {
        position:relative;
        z-index:2;
        display:flex;
        min-width:0;
        grid-column:1 / -1;
        grid-row:1;
        align-items:center;
        justify-content:center;
        padding:1px 12px 0;
        border-bottom:0;
        background:#fff;
        color:var(--vlt-elegant-muted);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-head strong {
        font-size:9px;
        font-weight:850;
        letter-spacing:.11em;
        line-height:1.2;
        text-transform:uppercase;
        transform:translateY(-3px);
    }
    /* V2.10.029: Die zweite Zeile bezeichnet jede Haelfte direkt: links die
       Terminanzeige, rechts der Kalenderzugang oberhalb der vier Buttons. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-appointments-head {
        position:relative;
        z-index:2;
        display:flex;
        min-width:0;
        grid-column:1;
        grid-row:2;
        align-items:center;
        justify-content:flex-start;
        padding:0 12px;
        border-right:0;
        border-bottom:1px solid rgba(22,129,58,.14);
        background:#fff;
        color:var(--vlt-elegant-muted);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-appointments-head strong {
        color:var(--vlt-elegant-muted);
        font-size:9px;
        font-weight:850;
        letter-spacing:.11em;
        line-height:1.2;
        text-transform:uppercase;
        white-space:nowrap;
        transform:translateY(-12px);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-open {
        position:relative;
        z-index:2;
        display:flex;
        height:42px;
        min-width:0;
        grid-column:2;
        grid-row:2;
        align-self:end;
        align-items:center;
        justify-content:center;
        gap:0;
        padding:0 12px;
        border:0;
        border-bottom:1px solid rgba(22,129,58,.14);
        background:#fff;
        color:var(--vlt-elegant-green);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-open > span {
        position:absolute;
        right:0;
        bottom:18px;
        left:0;
        color:var(--vlt-elegant-muted);
        font-size:9px;
        font-weight:850;
        letter-spacing:.11em;
        line-height:1.2;
        text-transform:uppercase;
        white-space:nowrap;
    }
    .vlt-cockpit--mobile-elegant .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:0;
        border-radius:0;
        background:transparent;
        color:#d23b37;
        box-shadow:none;
        font-style:normal;
        transform:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-calendar-glyph {
        display:block;
        width:40px;
        height:36px;
        overflow:visible;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-calendar-glyph .is-shadow { fill:#3f494c; opacity:.9; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-calendar-glyph .is-sheet { fill:#fff; stroke:#e6e9e8; stroke-width:1.2; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-calendar-glyph .is-head { fill:#ef3d38; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-calendar-glyph .is-rings rect { fill:#596468; stroke:#f5f7f6; stroke-width:1.8; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-calendar-glyph .is-grid { fill:#bfc3c4; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-calendar-glyph .is-grid .is-accent { fill:#ef9a82; }
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-open:active { background:#f6faf7; }
    /* V2.10.034: In der zweiten Kopfzeile des Vertriebskalenders entfaellt nur
       die kurze senkrechte Trennung. Die gemeinsame filigrane Unterkante unter
       "Heute geplant / Zum Kalender" und das Kreuz der vier Glasbuttons bleiben. */
    /* V2.10.035: Die gemeinsame Unterkante rueckt vier Pixel naeher an die
       beiden Ueberschriften. Terminbereich und Glasbuttons folgen geschlossen
       nach oben; ihre eigenen Abmessungen bleiben unveraendert. */
    /* V2.10.022: Eine sehr feine, eingerueckte Oberkante ergaenzt die
       seitliche gruene Klammer und den filigranen Unterstrich. Sie schliesst
       die Kachel optisch, ohne daraus einen schweren Vollrahmen zu machen. */
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-elegant-overview__utility::before {
        content:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard {
        width:100%;
        grid-column:2;
        grid-row:3;
        justify-self:start;
        margin:0;
    }
    /* V2.10.023: Die untere Kachel ist nun ein reiner Terminbereich. Die
       Vorschau sitzt links, die vier zugehoerigen Glasbuttons rechts. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__appointments--utility {
        display:flex;
        width:100%;
        height:176px;
        min-height:176px;
        box-sizing:border-box;
        grid-column:1;
        grid-row:3;
        justify-self:start;
        margin:0;
        padding:13px 12px 10px;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        border:0;
        background:#fff;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-klar-year { grid-column:1 / -1; grid-row:4; }
    .vlt-cockpit--mobile-elegant .vlt-klar-welcome {
        min-height:70px;
        align-items:center;
        padding:11px 13px;
        border-left:2px solid var(--vlt-elegant-green);
        border-bottom:1px solid rgba(22,129,58,.65);
        box-shadow:0 5px 16px rgba(23,58,35,.045);
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-sun { width:42px; height:42px; border-radius:13px; font-size:23px; }
    .vlt-cockpit--mobile-elegant .vlt-klar-welcome h2 { font-size:20px !important; }
    .vlt-cockpit--mobile-elegant .vlt-klar-welcome p { font-size:11px; }
    .vlt-cockpit--mobile-elegant .vlt-klar-summary,
    .vlt-cockpit--mobile-elegant .vlt-klar-day,
    .vlt-cockpit--mobile-elegant .vlt-klar-actions,
    .vlt-cockpit--mobile-elegant .vlt-klar-mobile-switches { display:none !important; }
    .vlt-cockpit--mobile-elegant .vlt-klar-year { display:block; margin:0; padding:0; border:0; background:transparent; box-shadow:none; }
    /* Die fruehere, eingeklappte Auswertung gehoert nicht mehr in das
       Dashboard. Ihr bestehendes Markup bleibt erhalten, damit der eigene
       Footerpunkt "Auswertung" weiterhin dieselbe Vollansicht oeffnet. */
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main:not(.is-table-focused) > .vlt-klar-year {
        display:none !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main.is-table-focused > .vlt-klar-year {
        display:block !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-year__overview,
    .vlt-cockpit--mobile-elegant .vlt-klar-goal-peek,
    .vlt-cockpit--mobile-elegant .vlt-klar-section-gap { display:none !important; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview {
        display:grid;
        gap:0;
        margin-top:10px;
        overflow:hidden;
        border:1px solid var(--vlt-elegant-line);
        border-left:2px solid var(--vlt-elegant-green);
        border-bottom:1px solid rgba(22,129,58,.65);
        border-radius:18px;
        background:#fff;
        box-shadow:0 7px 22px rgba(23,58,35,.055);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top {
        position:relative;
        display:grid;
        height:132px;
        min-height:132px;
        grid-template-columns:1fr 106px 1fr;
        align-items:center;
        padding:14px 13px 11px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > h3 { position:absolute; top:10px; right:0; left:0; margin:0; color:var(--vlt-elegant-muted); font-size:9px; font-weight:850; letter-spacing:.11em; line-height:1.2; text-align:center; text-transform:uppercase; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-open-area { position:absolute; z-index:4; top:0; right:0; bottom:0; width:50%; margin:0; padding:0; border:0; border-radius:0 17px 0 0; background:transparent; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-open-area:focus-visible { outline:3px solid rgba(22,129,58,.24); outline-offset:-5px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > div:not(.vlt-elegant-overview__ring) { display:flex; min-width:0; flex-direction:column; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > .vlt-elegant-overview__clock {
        position:absolute;
        top:31px;
        right:13px;
        display:grid;
        width:112px;
        height:96px;
        align-items:stretch;
        text-align:center;
        transform:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > div:last-child { align-items:flex-end; text-align:right; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview span,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__period > span {
        color:var(--vlt-elegant-muted);
        font-size:9px;
        font-weight:850;
        letter-spacing:.11em;
        text-transform:uppercase;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top strong { margin-top:5px; color:var(--vlt-elegant-green); font-size:18px; line-height:1.1; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top small { margin-top:4px; color:var(--vlt-elegant-ink); font-size:10px; white-space:nowrap; }
    /* V2.10.075: Der aktuelle Kalendertag ersetzt den redundanten Monatsblock.
       Der Wochenring behaelt unveraendert die mittlere Spalte und seine
       bisherige Groesse. Das Kalenderblatt folgt nun dem ruhigen Cockpit-
       Glasstil und beginnt exakt auf Hoehe der Uhrzeit. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf {
        display:grid;
        width:112px;
        align-self:start;
        justify-self:start;
        margin-top:16px;
        position:relative;
        z-index:3;
        transform:none;
        pointer-events:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page {
        position:relative;
        display:grid;
        width:112px;
        height:96px;
        overflow:hidden;
        grid-template-rows:23px 40px 14px 19px;
        border:1px solid rgba(22,129,58,.28);
        border-radius:14px;
        background:#fff;
        box-shadow:0 5px 14px rgba(23,58,35,.075),inset 0 1px 0 rgba(255,255,255,.95);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page::before,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page::after {
        content:"";
        position:absolute;
        z-index:2;
        top:0;
        width:4px;
        height:9px;
        border-radius:999px;
        background:rgba(255,255,255,.94);
        box-shadow:0 1px 1px rgba(20,41,27,.18);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page::before { left:18px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page::after { right:18px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month {
        display:grid;
        margin:0;
        place-items:center;
        border-bottom:1px solid rgba(116,25,25,.24);
        background:linear-gradient(135deg,#d94a43,#bd302f);
        color:#fff;
        font-size:10px;
        font-weight:850;
        letter-spacing:.08em;
        line-height:1;
        text-transform:uppercase;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day {
        position:relative;
        display:grid;
        overflow:hidden;
        margin:0;
        place-items:center;
        color:var(--vlt-elegant-ink);
        font-size:34px;
        font-weight:500;
        line-height:1;
        transform-origin:center;
        transform-style:preserve-3d;
    }
    /* V2.10.081: Das vorhandene Kalenderblatt behaelt seine Farben. Nur die
       Tagesflaeche erhaelt die feine Klappkante. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day::after {
        content:"";
        position:absolute;
        z-index:2;
        top:50%;
        right:0;
        left:0;
        border-top:1px solid #e6ebe7;
        box-shadow:0 -1px 0 rgba(255,255,255,.78);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday {
        display:grid;
        margin:0;
        place-items:start center;
        color:var(--vlt-elegant-muted);
        font-size:7px;
        font-weight:800;
        letter-spacing:.08em;
        line-height:1;
        text-transform:uppercase;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period {
        display:grid;
        margin:0;
        padding:0 2px;
        place-items:center;
        border-top:1px solid rgba(22,129,58,.1);
        background:#fbfdfb;
        color:var(--vlt-elegant-ink);
        font-size:10px;
        font-weight:700;
        line-height:1;
        text-align:center;
        white-space:nowrap;
    }
    /* V2.10.084: Kalenderblatt ausschließlich in der Höhe leicht verdichten;
       Breite, Farben, Typografie und waagerechte Position bleiben erhalten. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page {
        height:92px;
        grid-template-rows:22px 38px 13px 19px;
    }
    /* V2.10.085: Die Uhr folgt der leicht verdichteten Kalenderhoehe. Breite,
       Zifferngroesse und die parallele Mittelachse der Tageszahl bleiben
       erhalten. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-page {
        position:relative;
        display:flex;
        width:112px;
        height:92px;
        align-items:center;
        justify-content:center;
        background:transparent;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-page::before,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-page::after {
        content:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-page::before { left:18px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-page::after { right:18px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time {
        display:flex;
        align-items:center;
        justify-content:center;
        gap:3px;
        margin:0 !important;
        color:var(--vlt-elegant-ink) !important;
        font-size:inherit !important;
        line-height:1 !important;
        transform:translateY(-5px);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > b {
        position:relative;
        display:grid;
        width:18px;
        height:38px;
        overflow:hidden;
        place-items:center;
        border:1px solid #e3e8e4;
        border-radius:6px;
        background:#fff;
        color:var(--vlt-elegant-green);
        font-size:27px;
        font-weight:500;
        box-shadow:none;
        transform-origin:center;
        transform-style:preserve-3d;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > b::before {
        content:"";
        position:absolute;
        top:0;
        right:0;
        left:0;
        height:50%;
        background:transparent;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > b::after {
        content:"";
        position:absolute;
        z-index:2;
        top:50%;
        right:0;
        left:0;
        border-top:1px solid #e6ebe7;
        box-shadow:0 -1px 0 rgba(255,255,255,.78);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > i {
        color:var(--vlt-elegant-green);
        font-size:17px;
        font-style:normal;
        font-weight:850;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring { position:absolute; z-index:6; bottom:-35px; left:50%; display:grid; width:88px; height:88px; padding:0; place-items:center; border:0; border-radius:50%; background:conic-gradient(var(--vlt-elegant-green) calc(var(--vlt-klar-progress,100) * 1%),#e3e9e4 0); color:inherit; font:inherit; cursor:pointer; transform:translateX(-50%); -webkit-tap-highlight-color:transparent; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring:focus-visible { outline:3px solid rgba(22,129,58,.22); outline-offset:4px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#fff; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring > span { position:relative; z-index:1; color:var(--vlt-elegant-ink); font-size:25px; font-weight:900; letter-spacing:0; text-transform:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring > span small { margin:0; font-size:14px; font-weight:850; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring em { position:absolute; top:100%; width:120px; margin-top:5px; color:var(--vlt-elegant-muted); font-size:7.5px; font-style:normal; font-weight:800; letter-spacing:.1em; text-align:center; text-transform:uppercase; }
    /* V2.10.086: Die Kreuzlinie vier Pixel nach oben ziehen, indem nur der
       freie Rest unter Kalenderblatt und Uhr verkürzt wird. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__details { display:grid; min-height:116px; grid-template-columns:1fr 1fr; border-top:1px solid #e6ebe7; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__period { position:relative; display:flex; min-width:0; justify-content:flex-start; flex-direction:column; padding:7px 14px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments { gap:0; justify-content:flex-start; padding-top:8px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments > span { margin-bottom:2px; color:#68756d; font-size:9px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
    /* V2.10.128: Terminzeilen folgen der freigegebenen Kalender-Skizze:
       Zeitpunkt | Kategoriepunkt | feine Linie | Name und Zusatztext. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button { display:grid; min-width:0; min-height:58px; grid-template-columns:38px 9px 1px minmax(0,1fr); align-items:center; column-gap:4px; width:100%; padding:7px 0; border:0; border-bottom:1px solid #e6ebe7; background:transparent; color:#14291b; text-align:left; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button:last-child { border-bottom:0; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button::after { content:""; width:1px; height:32px; grid-column:3; grid-row:1; background:#dbe5dd; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointment-when { display:flex; min-width:0; grid-column:1; align-self:center; flex-direction:column; gap:4px; color:#14291b; letter-spacing:0; text-transform:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointment-when > small { overflow:visible; color:#14291b; font-size:10.5px; font-weight:850; line-height:1; text-overflow:clip; white-space:nowrap; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointment-when > span { display:flex; min-height:11px; align-items:center; gap:5px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointment-dot { width:7px; height:7px; grid-column:2; grid-row:1; place-self:center; border-radius:50%; background:#16813a; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button.is-immediate .vlt-elegant-overview__appointment-dot { background:#c62828; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button.is-today .vlt-elegant-overview__appointment-dot { background:#e8a400; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button.is-tomorrow .vlt-elegant-overview__appointment-dot { background:#2475c7; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button.is-unscheduled .vlt-elegant-overview__appointment-dot { background:#8b948e; }
    /* Im Cockpit-Display ist der Punkt ein Kategorie-Etikett. Er verwendet
       deshalb exakt dieselbe Farbe wie der zugehörige Badge-Button. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button[data-category] .vlt-elegant-overview__appointment-dot { background:var(--vlt-badge-calendar,#cf2e2e); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button[data-category="installation"] .vlt-elegant-overview__appointment-dot { background:var(--vlt-badge-install,#e7a600); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button[data-category="birthday"] .vlt-elegant-overview__appointment-dot { background:var(--vlt-badge-birthday,#287fbe); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button[data-category="training"] .vlt-elegant-overview__appointment-dot { background:var(--vlt-badge-training,#7952b3); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments time { color:#14291b; font-size:10.5px; font-weight:780; white-space:nowrap; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointment-copy { display:flex; min-width:0; grid-column:4; align-self:center; flex-direction:column; gap:3px; color:#14291b; font-size:inherit; font-weight:inherit; letter-spacing:0; text-transform:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button strong { display:block; overflow:hidden; margin:0; color:#14291b; font-size:12px; font-weight:800; line-height:1.12; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button small { display:flex; min-width:0; align-items:center; gap:5px; overflow:hidden; margin:0; color:#53655a; font-size:10px; font-weight:650; line-height:1.12; white-space:nowrap; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointment-meta { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments .vlt-elegant-overview__appointment-when > small { overflow:visible; color:#14291b; font-size:10.5px; font-weight:850; line-height:1; text-overflow:clip; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button.is-empty { display:block; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__appointments button.is-empty::after { display:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__today { position:absolute; inset:0 14px 50%; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; transform:translateY(9px); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__today > strong { font-size:13px; font-weight:850; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__period strong { margin-top:4px; color:var(--vlt-elegant-green); font-size:13px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__period small { margin-top:4px; color:var(--vlt-elegant-ink); font-size:10px; font-weight:400; line-height:1.2; white-space:nowrap; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest { display:grid; grid-template-rows:1fr 1fr; border-left:1px solid #e6ebe7; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div { position:relative; display:flex; min-width:0; width:100%; align-items:flex-end; justify-content:flex-start; flex-direction:column; padding:24px 14px 5px; color:inherit; text-align:right; }
    /* V2.10.026: Die beiden Restzeit-Ueberschriften sitzen wie der Kopf
       "Aktueller Vertriebsmonat" direkt am oberen Rand ihres Linienfeldes. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div > span { position:absolute; top:7px; right:14px; line-height:1.2; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div + div { border-top:1px solid #e6ebe7; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest strong { margin-top:0; color:var(--vlt-elegant-ink); font-size:13px; white-space:nowrap; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest b { font-weight:850; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest .vlt-elegant-overview__count { color:var(--vlt-rest-color,var(--vlt-elegant-green)); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest .vlt-elegant-overview__count.is-urgent { color:var(--vlt-rest-urgent-color,#c62828); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest i { color:var(--vlt-elegant-ink); font-style:normal; font-weight:400; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu { display:grid; min-height:128px; margin-top:10px; overflow:visible; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(58px,1fr); gap:8px; border:0; border-radius:0; background:transparent; box-shadow:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu > button { position:relative; display:flex; min-width:0; min-height:58px; align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:7px 3px 6px; border:1px solid #d8e4db; border-radius:17px; background:#fff; box-shadow:0 7px 16px rgba(23,58,35,.075); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu > button::before { content:""; position:absolute; top:7px; left:50%; width:32px; height:32px; border-radius:50%; background:#edf5ef; transform:translateX(-50%); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu > button::after { content:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu svg { position:relative; z-index:1; width:20px; height:20px; fill:none; stroke:var(--vlt-elegant-green); stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu button span { overflow:visible; color:var(--vlt-elegant-ink); font-size:7px; font-weight:700; line-height:1; text-align:center; white-space:nowrap; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu button b { position:absolute; top:5px; left:calc(50% + 8px); display:grid; min-width:16px; height:16px; place-items:center; padding:0 4px; border:2px solid #fff; border-radius:999px; color:#fff; font-size:8px; font-weight:850; line-height:1; box-shadow:0 2px 6px rgba(20,41,27,.14); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu .is-calendar b { background:var(--vlt-badge-calendar,#c62828); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu .is-install b { background:var(--vlt-badge-install,#e8a400); color:#2c2410; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu .is-birthday b { background:var(--vlt-badge-birthday,#2475c7); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu .is-empty { cursor:default; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard {
        position:relative;
        box-sizing:border-box;
        height:176px;
        min-height:176px;
        padding:5px;
        overflow:hidden;
        grid-template-rows:repeat(2,80px);
        grid-auto-rows:80px;
        gap:4px;
        border:0;
        border-left:1px solid #e4e9e5;
        border-radius:0;
        background:#fff;
        box-shadow:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard::before,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard::after {
        content:"";
        position:absolute;
        z-index:0;
        pointer-events:none;
        background:rgba(22,129,58,.18);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard::before {
        top:5px;
        bottom:5px;
        left:50%;
        width:1px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard::after {
        top:50%;
        right:5px;
        left:5px;
        height:1px;
        transform:translateY(-1px);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button {
        z-index:2;
        min-height:80px;
        gap:6px;
        padding:4px 2px 3px;
        border:0;
        border-radius:17px;
        background:transparent;
        box-shadow:none;
        color:#31533c;
        transition:color .2s ease,transform .16s ease;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button:active { transform:scale(.96); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button.is-vlt-menu-glass-active { color:#087c2f; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button::before {
        top:6px;
        width:44px;
        height:44px;
        background:rgba(237,245,239,.82);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
        transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button.is-vlt-menu-glass-active::before {
        background:rgba(237,245,239,.82);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
        transform:translateX(-50%);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button svg {
        width:27px;
        height:27px;
        stroke-width:1.65;
        transform-origin:center;
        transition:stroke .2s ease,transform .2s ease;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button.is-vlt-menu-glass-active svg {
        stroke:#087c2f;
        transform:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button span {
        font-size:9px;
        font-weight:750;
        transition:color .2s ease;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button.is-vlt-menu-glass-active span { color:#075f29; font-weight:850; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu-glass {
        position:absolute;
        z-index:1;
        top:var(--vlt-menu-glass-top,5px);
        left:var(--vlt-menu-glass-left,5px);
        display:block;
        width:var(--vlt-menu-glass-width,82px);
        height:var(--vlt-menu-glass-height,72px);
        pointer-events:none;
        overflow:hidden;
        border:1px solid rgba(22,129,58,.42);
        border-radius:17px;
        background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(211,235,217,.72));
        box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(22,129,58,.08),0 7px 17px rgba(23,80,39,.17);
        opacity:1;
        transition:top .34s cubic-bezier(.2,.82,.28,1),left .34s cubic-bezier(.2,.82,.28,1),width .25s ease,height .25s ease,box-shadow .18s ease;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu-glass::after {
        content:"";
        position:absolute;
        top:-38%;
        bottom:-38%;
        left:-68%;
        width:42%;
        border-radius:50%;
        background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.82) 48%,rgba(255,255,255,.12));
        filter:blur(.4px);
        transform:skewX(-17deg);
        animation:vlt-calendar-glass-shimmer 5.8s ease-in-out infinite;
    }
    @keyframes vlt-calendar-glass-shimmer {
        0%,24% { left:-68%; opacity:0; }
        34% { opacity:.2; }
        50% { opacity:.82; }
        66% { opacity:.2; }
        76%,100% { left:126%; opacity:0; }
    }
    @media (prefers-reduced-motion:reduce) {
        .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu-glass::after { animation:none; opacity:.28; left:18%; }
    }
    /* V2.10.036: Der aktive Kalenderbereich wird durch eine innenliegende,
       vollrunde Glaskapsel statt durch ein beinahe rechteckiges Vollfeld
       markiert. Symbol und Beschriftung bleiben gemeinsam in der Kapsel. */
    /* V2.10.037: Die Glaspille konzentriert sich nur noch auf die runde
       Symbolflaeche. Die freie Beschriftung darunter signalisiert den aktiven
       Bereich zusaetzlich durch Marken-Gruen. */
    /* V2.10.038: Ein kontrastreicherer Glasrand, ein feiner Marken-Lichtschein,
       der weisse aktive Symbolkern und die kraeftigere Beschriftung machen die
       Auswahl eindeutig, ohne wieder das gesamte Buttonfeld zu ueberdecken. */
    /* V2.10.039: Der aktive Zustand umfasst wieder die komplette Kachel. Ein
       langsamer, weicher Lichtreflex wandert wie auf leicht gedrehtem Glas durch
       die Flaeche; bei reduzierter Bewegung bleibt ein ruhiger Reflex stehen. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info {
        box-sizing:border-box;
        flex-direction:column;
        gap:8px;
        padding:11px 10px 10px;
        overflow:hidden;
        border:0;
        border-left:1px solid #e4e9e5;
        border-radius:0;
        background:#fff;
        box-shadow:none;
    }
    /* Die Cockpit-Hinweise nutzen jetzt die frei gewordene linke Haelfte
       unterhalb des Vertriebsmonats. Die bestehende Restzeit-Trennung auf
       der rechten Seite bleibt dadurch unveraendert. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__details > .vlt-elegant-overview__info--sales {
        position:relative;
        display:flex;
        width:100%;
        height:116px;
        min-height:116px;
        margin:0;
        gap:5px;
        padding:7px 12px;
        border:0;
    }
    /* V2.10.027: Ohne Lampensymbol beginnt der Cockpit-Titel mit exakt
       demselben oberen Abstand wie "Rest Monat" im gegenueberliegenden Feld. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info header { display:flex; min-width:0; align-items:flex-start; gap:5px; padding-bottom:4px; border-bottom:1px solid rgba(22,129,58,.18); }
    /* V2.10.033: Im Feld "Cockpit" bleibt der Kopf bewusst clean. Nur die
       Linie direkt unter dieser Ueberschrift entfaellt; alle anderen
       Trennlinien der Vertriebsmonatskachel bleiben unveraendert. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info--sales > header { padding-bottom:0; border-bottom:0; }
    /* V2.10.024: Die Hinweisueberschrift folgt exakt der kompakten
       Typografie von "Rest Monat"; der Lauftext entspricht der ruhigen
       Datumszeile im oberen Bereich. Lampe und Statuspunkte bleiben. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info header strong { overflow:hidden; color:var(--vlt-elegant-muted); font-size:9px; font-weight:850; letter-spacing:.11em; line-height:1.2; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info header small { margin-left:auto; color:#718078; font-size:8px; font-weight:750; white-space:nowrap; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info header small b { color:var(--vlt-elegant-green); }
    /* V2.10.052: Die Meldungen verwenden dieselbe ruhige 10-Pixel-
       Datumstypografie wie "Sonntag, 2. August 2026" und behalten ihre
       natuerliche Gross-/Kleinschreibung. Ihr gesamter mehrzeiliger Block
       wird exakt auf der waagerechten Mittellinie zwischen Rest Monat und
       Rest Jahr ausgerichtet. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info-messages { position:absolute; top:50%; right:12px; left:12px; display:grid; min-height:0; padding:0; overflow:visible; transform:translateY(-50%); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info-messages p { display:none; min-width:0; align-items:center; gap:7px; margin:0; color:var(--vlt-elegant-ink); font-size:10px; font-weight:700; letter-spacing:normal; line-height:1.2; text-transform:none; }
    /* V2.10.053: Die allgemeine Kachelregel formatiert jedes span als
       Versalueberschrift. Der eigentliche Meldungstext braucht deshalb eine
       direkte Gegenregel am inneren span und nicht nur am umgebenden Absatz. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info-messages p > span { color:var(--vlt-elegant-ink); font-size:10px; font-weight:700; letter-spacing:normal; line-height:1.2; text-transform:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info-messages p.is-active { display:flex; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info-messages p i { flex:0 0 auto; width:7px; height:7px; margin-top:0; border-radius:50%; background:#16813a; box-shadow:0 0 0 3px rgba(22,129,58,.1); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info-messages p.is-notice i { background:#e8a400; box-shadow:0 0 0 3px rgba(232,164,0,.12); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info-messages p.is-career i { background:#2475c7; box-shadow:0 0 0 3px rgba(36,117,199,.11); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info-messages p.is-quiet i { background:#8b948e; box-shadow:0 0 0 3px rgba(139,148,142,.1); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info-dots { display:flex; justify-content:center; gap:4px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info--sales > .vlt-elegant-overview__info-dots { position:absolute; right:12px; bottom:6px; left:12px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info-dots i { width:4px; height:4px; border-radius:50%; background:#bdc9c0; transition:width .2s ease,background .2s ease; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info-dots i.is-active { width:12px; border-radius:999px; background:var(--vlt-elegant-green); }
    .vlt-cockpit--mobile-elegant .vlt-klar-calendar__section-menu { grid-row:auto; margin-top:18px; margin-bottom:4px; }
    .vlt-cockpit--mobile-elegant .vlt-klar-mobile-performance {
        margin-top:13px;
        min-height:70px;
        height:auto;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-mobile-performance:not(.is-analysis-collapsed) { display:none; }
    .vlt-cockpit--mobile-elegant .vlt-klar-mobile-performance.is-analysis-collapsed { display:block; }
    .vlt-cockpit--mobile-elegant .vlt-klar-analysis-head { min-height:64px; }
    .vlt-cockpit--mobile-elegant .vlt-klar-analysis-preview { display:grid; }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav {
        right:10px;
        bottom:max(8px,env(safe-area-inset-bottom));
        left:10px;
        height:76px;
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:0;
        padding:8px 5px max(7px,env(safe-area-inset-bottom));
        overflow:visible;
        border:1px solid rgba(255,255,255,.78);
        border-radius:28px;
        background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(222,239,226,.48));
        box-shadow:0 10px 30px rgba(17,56,29,.14),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(22,129,58,.1);
        backdrop-filter:blur(22px) saturate(145%);
        -webkit-backdrop-filter:blur(22px) saturate(145%);
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav > :not(.vlt-cockpit-klar-nav__plus):not(.vlt-elegant-nav-action):not(.vlt-elegant-nav-glass) { display:none !important; }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav .vlt-elegant-nav-action { position:relative; z-index:2; display:flex !important; min-width:0; transform:translateY(-4px); color:#31533c; transition:color .22s ease; }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav .vlt-elegant-nav-action::before,
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav .vlt-elegant-nav-action::after { content:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-nav-glass { position:absolute; z-index:1; top:6px; bottom:max(5px,env(safe-area-inset-bottom)); left:var(--vlt-elegant-glass-left,5px); display:block; width:var(--vlt-elegant-glass-width,92px); pointer-events:none; border:1px solid rgba(22,129,58,.38); border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(202,232,211,.78)); box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 6px 16px rgba(23,80,39,.18); opacity:.82; transform:none; transition:left .36s cubic-bezier(.2,.82,.28,1),width .28s cubic-bezier(.2,.82,.28,1),opacity .18s ease,box-shadow .18s ease; }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav.has-vlt-elegant-active .vlt-elegant-nav-glass { opacity:1; box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 7px 18px rgba(23,80,39,.22); }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav .vlt-elegant-nav-action.is-vlt-glass-active { color:#087c2f; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-nav-action.is-cockpit { grid-column:1; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-nav-action.is-goals { grid-column:2; transform:translate(-14px,-4px); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-nav-action.is-contacts { grid-column:3; transform:translate(14px,-4px); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-nav-action.is-support { grid-column:4; }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav .vlt-elegant-nav-action > svg { position:relative; z-index:2; display:block; width:32px !important; height:32px !important; overflow:visible; fill:none; stroke:var(--vlt-elegant-green); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav .vlt-elegant-nav-action > small { position:relative; z-index:2; overflow:visible; color:inherit; font-size:10px !important; font-weight:750; line-height:1; text-overflow:clip; white-space:nowrap; }
    /* V2.10.041: Alle dynamisch sichtbaren Plus-Aktionen bleiben ruhige,
       weisse Kacheln. Eine einzige bewegliche Glasscheibe wandert nur auf den
       gerade beruehrten oder fokussierten Button. So ist die Auswahl eindeutig
       und der ruhige Grundzustand bleibt erhalten.
       Die Funktionslinks und ihre vom Rechtesystem bestimmte Reihenfolge
       bleiben dabei vollstaendig unangetastet. */
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid {
        position:relative;
        isolation:isolate;
        gap:10px;
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > a,
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > span:not(.vlt-cockpit-klar-quick__glass) {
        position:relative;
        box-sizing:border-box;
        height:78px;
        min-height:78px;
        gap:6px;
        padding:7px 7px 6px;
        overflow:hidden;
        border:1px solid rgba(216,228,219,.92);
        border-left:2px solid var(--vlt-elegant-green);
        border-bottom:1px solid rgba(22,129,58,.65);
        border-radius:17px;
        background:#fff;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,1),
            0 7px 16px rgba(23,58,35,.09);
        transition:transform .16s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__glass {
        position:absolute;
        z-index:1;
        top:0;
        left:0;
        display:block;
        width:0;
        height:0;
        min-height:0;
        gap:0;
        padding:0;
        overflow:hidden;
        pointer-events:none;
        opacity:0;
        border:1px solid rgba(22,129,58,.38);
        border-radius:14px;
        background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(200,233,210,.48));
        box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 0 0 1px rgba(255,255,255,.36),0 7px 16px rgba(23,80,39,.13);
        backdrop-filter:blur(13px) saturate(145%);
        -webkit-backdrop-filter:blur(13px) saturate(145%);
        transition:transform .38s cubic-bezier(.22,.8,.25,1),width .3s ease,height .3s ease,opacity .18s ease;
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__glass::after {
        content:"";
        position:absolute;
        top:-35%;
        bottom:-35%;
        left:-48%;
        width:40%;
        transform:skewX(-17deg);
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
        animation:vltQuickActionGlassSheen 5.8s ease-in-out infinite;
    }
    @keyframes vltQuickActionGlassSheen {
        0%,64%,100% { left:-48%; }
        82% { left:112%; }
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > a::after,
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > span:not(.vlt-cockpit-klar-quick__glass)::after {
        content:"";
        position:absolute;
        z-index:0;
        top:0;
        right:12px;
        left:12px;
        height:1px;
        pointer-events:none;
        background:rgba(22,129,58,.34);
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > a::before,
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > span:not(.vlt-cockpit-klar-quick__glass)::before {
        content:"";
        position:absolute;
        z-index:0;
        top:8px;
        left:50%;
        width:42px;
        height:42px;
        border-radius:50%;
        background:rgba(237,245,239,.84);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.98);
        transform:translateX(-50%);
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > a:focus-visible,
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > a:hover {
        border-color:rgba(22,129,58,.4);
        box-shadow:inset 0 1px 0 #fff,0 9px 20px rgba(23,80,39,.15);
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > a:active {
        transform:scale(.97);
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid i,
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid small,
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid em {
        position:relative;
        z-index:2;
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid i {
        width:42px;
        height:42px;
        border-radius:50%;
        background:transparent;
        color:var(--vlt-elegant-green);
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid svg {
        width:25px;
        height:25px;
        stroke-width:1.65;
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid small {
        font-size:11px;
        font-weight:750;
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung {
        padding:7px 7px 6px;
        background:#f1f4f2;
        color:#7b8780;
        cursor:default;
        opacity:.62;
        filter:grayscale(1);
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung em {
        position:absolute;
        top:6px;
        right:7px;
        bottom:auto;
        left:auto;
        max-width:72px;
        padding:0 5px;
        border-radius:999px;
        background:#7f8b83;
        color:#fff;
        font-size:6.5px;
        font-style:normal;
        font-weight:850;
        line-height:14px;
        white-space:nowrap;
    }
    @media (prefers-reduced-motion:reduce) {
        .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__glass {
            transition:none;
        }
        .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__glass::after {
            animation:none;
            left:14%;
        }
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-nav-badge { position:absolute; top:1px; left:calc(50% + 5px); display:grid; min-width:15px; height:15px; place-items:center; padding:0 4px; border:2px solid #fff; border-radius:999px; background:#c62828; color:#fff; font-size:8px; font-weight:850; line-height:1; }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav__plus { position:absolute; z-index:2; top:-18px; left:50%; width:58px; height:58px; margin:0; transform:translateX(-50%); }
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main.is-table-focused .vlt-elegant-overview,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main.is-table-focused .vlt-klar-mobile-performance { display:flex; }
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main.is-table-focused .vlt-klar-analysis-preview { display:none !important; }
    /* Zahlenwerte der mobilen Auswertung bewusst kontrastreich halten. Die
       Schriftgröße bleibt unverändert; nur Farbe und Gewicht werden für das
       kleine Display verbessert. */
    .vlt-cockpit--mobile-elegant .vlt-klar-value-performance > [data-vlt-klar-table-body] > strong,
    .vlt-cockpit--mobile-elegant .vlt-klar-product-performance__row > strong {
        color:#111 !important;
        font-weight:700 !important;
    }

/* Dynamische Smartphone-Vollansichten müssen am Ende der Kaskade stehen.
 * Die allgemeinen Sheet-Regeln weiter oben/unten dürfen die per
 * visualViewport berechneten Grenzen nicht wieder überschreiben. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-klar {
        padding-top:calc(16px + var(--vlt-klar-page-top-offset,0px)) !important;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet {
        position:fixed !important;
        top:var(--vlt-klar-overlay-top,0px) !important;
        right:0 !important;
        bottom:auto !important;
        left:0 !important;
        display:flex;
        box-sizing:border-box;
        width:100% !important;
        height:var(--vlt-klar-overlay-nav-height,calc(100dvh - 76px)) !important;
        max-height:var(--vlt-klar-overlay-nav-height,calc(100dvh - 76px)) !important;
        overflow:hidden !important;
        flex-direction:column;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
    }
    /* Wie bei Cockpit und Meine Ziele reicht die weisse Seitenflaeche bis
       hinter die transparente Glas-Footerleiste. Der Footer bleibt als
       eigenstaendige Ebene sichtbar; nur der graue Untergrund verschwindet. */
    .vlt-cockpit--mobile-klar.vlt-klar-nav-overlay-open .vlt-klar-sheet-backdrop {
        top:var(--vlt-klar-overlay-top,0px) !important;
        right:0 !important;
        bottom:auto !important;
        left:0 !important;
        height:var(--vlt-klar-overlay-nav-height,calc(100dvh - 76px)) !important;
        background:#fff !important;
    }
    /* Bei Kontakte und Unterstuetzung bleibt die Footerleiste – wie bei den
       normalen Hauptseiten – sichtbar und bedienbar vor der weissen Flaeche. */
    .vlt-cockpit--mobile-klar.vlt-klar-nav-overlay-open .vlt-cockpit-klar-nav {
        z-index:100002 !important;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet > header,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet > .vlt-klar-sheet__search {
        flex:0 0 auto;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet > .vlt-klar-sheet__contacts,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet > .vlt-klar-sheet__support,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet > .vlt-klar-sheet__day {
        min-height:0;
        max-height:none;
        overflow:auto;
        flex:1 1 auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }
    /* Der Hintergrund laeuft hinter dem Footer weiter, der bedienbare Inhalt
       endet dagegen mit sicherem Abstand oberhalb der Footer-Symbole. */
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet > .vlt-klar-sheet__contacts,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet > .vlt-klar-sheet__support {
        padding-bottom:108px !important;
        box-sizing:border-box;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-cover-sheet,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar.is-vlt-cover-sheet {
        top:var(--vlt-klar-overlay-top,0px) !important;
        right:0 !important;
        bottom:auto !important;
        left:0 !important;
        box-sizing:border-box;
        width:100% !important;
        height:var(--vlt-klar-overlay-full-height,100dvh) !important;
        min-height:var(--vlt-klar-overlay-full-height,100dvh) !important;
        max-height:var(--vlt-klar-overlay-full-height,100dvh) !important;
        border-radius:0 !important;
    }
    /* Der Kalender ist eine echte Vollansicht. iOS darf ihn nach dem
       Schliessen des Teilen-Dialogs nicht auf die kurzzeitig gemeldete halbe
       visualViewport-Hoehe zusammenschieben. */
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar.is-vlt-cover-sheet:not([hidden]) {
        display:flex !important;
        overflow:hidden !important;
        flex-direction:column !important;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar.is-vlt-cover-sheet > .vlt-klar-calendar__voucher:not([hidden]) {
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        min-height:100% !important;
    }
}

/* V2.10.128: Die beiden Werkzeuggruppen bleiben direkt neben „Kalender“,
 * sind als getrennte Funktionsbereiche erkennbar und tragen eine kleine,
 * eindeutige Beschriftung. Die 48-Pixel-Touchflaechen bleiben erhalten. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head {
        min-height:76px;
        grid-template-columns:62px minmax(0,1fr);
        gap:1px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > .vlt-klar-calendar__header-actions,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolclusters {
        align-items:flex-start;
        justify-content:flex-start;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolcluster {
        display:grid;
        min-width:0;
        justify-items:center;
        gap:2px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolcluster > small {
        display:block;
        max-width:100%;
        overflow:hidden;
        color:#68756d;
        font-size:7px;
        font-weight:750;
        line-height:1;
        letter-spacing:.02em;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__close {
        margin-top:2px;
    }
}

/* V2.10.145: Kompakte Kontaktzentrale und persoenliche Unterstuetzungskarte.
 * Die drei Kontaktwege besitzen feste Spalten (E-Mail, WhatsApp, Telefon),
 * damit fehlende Daten niemals die Reihenfolge verschieben. Kontakte und
 * Unterstuetzung behalten die in 2.10.114 gesperrte Vollansicht samt Footer. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-klar .vlt-klar-sheet[data-vlt-klar-sheet-panel="contacts"] > .vlt-klar-contact-intro,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet[data-vlt-klar-sheet-panel="contacts"] > .vlt-klar-sheet__search {
        flex:0 0 auto;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-intro {
        padding:9px 14px 2px;
        text-align:left;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-intro small {
        display:block;
        margin-bottom:3px;
        color:#16813a;
        font-size:8px;
        font-weight:900;
        letter-spacing:.12em;
        text-transform:uppercase;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-intro h3 {
        margin:0;
        color:#173f27;
        font-size:17px;
        line-height:1.2;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-intro p {
        margin:4px 0 0;
        color:#627068;
        font-size:10px;
        line-height:1.4;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet[data-vlt-klar-sheet-panel="contacts"] > .vlt-klar-sheet__search {
        margin-top:8px;
        margin-bottom:6px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-browser {
        display:grid;
        min-height:0;
        grid-template-columns:40px minmax(0,1fr);
        gap:6px;
        overflow:hidden;
        padding:0 10px 108px 8px;
        flex:1 1 0;
        box-sizing:border-box;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-jump {
        position:relative;
        z-index:2;
        display:grid;
        min-height:0;
        width:40px;
        grid-template-rows:repeat(26,minmax(14px,1fr));
        align-content:stretch;
        padding:2px 0 5px;
        overflow:visible;
        touch-action:none;
        user-select:none;
        -webkit-user-select:none;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-jump button {
        position:relative;
        z-index:1;
        display:grid;
        width:32px;
        height:100%;
        min-height:0;
        padding:0;
        place-items:center;
        border:0;
        border-radius:999px;
        background:transparent;
        color:#16813a;
        font-size:9.5px;
        font-weight:900;
        line-height:1;
        transform-origin:left center;
        transition:transform .12s ease,background-color .12s ease,color .12s ease;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-jump button.is-unavailable {
        color:#c4cec7;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-jump button:not(.is-unavailable):active,
    .vlt-cockpit--mobile-klar .vlt-klar-contact-jump button:not(.is-unavailable):focus-visible {
        outline:0;
        background:#e7f3ea;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-jump.is-indexing button.is-near-2 {
        z-index:2;
        transform:translateX(1px) scale(1.14);
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-jump.is-indexing button.is-near-1 {
        z-index:3;
        background:#edf6ef;
        transform:translateX(3px) scale(1.38);
    }
    .vlt-cockpit--mobile-klar .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);
    }
    .vlt-cockpit--mobile-klar .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;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-browser > .vlt-klar-sheet__contacts {
        min-height:0;
        max-height:none;
        overflow-x:hidden;
        overflow-y:auto;
        padding:0 2px 8px 0 !important;
        -webkit-overflow-scrolling:touch;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article {
        display:grid;
        min-width:0;
        grid-template-columns:42px minmax(0,1fr) 100px;
        align-items:center;
        gap:6px;
        padding:8px 0;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article[hidden] {
        display:none !important;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article > .vlt-klar-contact-avatar {
        display:grid;
        width:42px;
        height:42px;
        overflow:hidden;
        place-items:center;
        border-radius:50%;
        background:#e8f4eb;
        color:#16813a;
        font-size:12px;
        font-weight:850;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-avatar img {
        display:block;
        width:100%;
        height:100%;
        object-fit:cover;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article > .vlt-klar-contact-identity {
        display:flex;
        min-width:0;
        flex:1;
        flex-direction:column;
        align-items:flex-start;
        padding:4px 2px;
        border:0;
        background:transparent;
        color:inherit;
        font:inherit;
        text-align:left;
        cursor:pointer;
        touch-action:manipulation;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article > .vlt-klar-contact-identity:focus-visible {
        border-radius:8px;
        outline:2px solid rgba(22,129,58,.34);
        outline-offset:1px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-identity strong,
    .vlt-cockpit--mobile-klar .vlt-klar-contact-identity small {
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article .vlt-klar-contact-identity strong {
        font-size:14px;
        line-height:1.2;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article .vlt-klar-contact-identity small {
        margin-top:2px;
        font-size:10.5px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article > .vlt-klar-contact-actions {
        display:grid;
        width:100px;
        flex:0 0 100px;
        flex-direction:row;
        grid-template-columns:repeat(3,32px);
        align-items:center;
        gap:2px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-action-slot {
        display:block;
        width:32px;
        height:32px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article .vlt-klar-contact-action-slot > a {
        display:grid;
        width:32px;
        height:32px;
        place-items:center;
        border:1px solid rgba(22,129,58,.34);
        border-radius:50%;
        background:#fff;
        color:#16813a;
        box-sizing:border-box;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article .vlt-klar-contact-action-slot.is-whatsapp > a {
        background:#16813a;
        color:#fff;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__contacts article .vlt-klar-contact-action-slot.is-phone > a {
        background:#edf6ef;
    }
    .vlt-cockpit--mobile-klar .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--mobile-klar .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;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card[hidden] { display:none !important; }
    .vlt-cockpit--mobile-klar .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;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card__avatar {
        display:grid;
        width:112px;
        height:112px;
        margin-top:4px;
        place-items:center;
    }
    .vlt-cockpit--mobile-klar .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;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card h3 {
        margin:12px 44px 2px;
        color:#173f27;
        font-size:21px;
        line-height:1.2;
        text-align:center;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card > p {
        margin:0;
        color:#6a776f;
        font-size:12px;
        text-align:center;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card dl {
        display:grid;
        width:100%;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        margin:18px 0 16px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card dl > div {
        min-width:0;
        padding:9px 10px;
        border-radius:10px;
        background:#f5f8f6;
        text-align:center;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card dt {
        color:#7a877f;
        font-size:8px;
        font-weight:850;
        letter-spacing:.1em;
        text-transform:uppercase;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card dd {
        margin:3px 0 0;
        overflow-wrap:anywhere;
        color:#173f27;
        font-size:12px;
        font-weight:750;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card__actions {
        width:100%;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card__actions .vlt-klar-contact-actions {
        display:grid;
        width:100%;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:12px;
    }
    .vlt-cockpit--mobile-klar .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;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card__actions .vlt-klar-contact-action-slot.is-email::after { content:"E-Mail"; }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card__actions .vlt-klar-contact-action-slot.is-whatsapp::after { content:"WhatsApp"; }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card__actions .vlt-klar-contact-action-slot.is-phone::after { content:"Telefon"; }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card__actions .vlt-klar-contact-action-slot:not(:has(a))::after { content:""; }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card__actions .vlt-klar-contact-action-slot > a {
        display:grid;
        width:54px;
        height:54px;
        place-items:center;
        border:1px solid rgba(22,129,58,.34);
        border-radius:50%;
        background:#f4f9f5;
        color:#16813a;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card__actions .vlt-klar-contact-action-slot.is-whatsapp > a {
        background:#16813a;
        color:#fff;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-contact-card__actions svg { width:25px; height:25px; }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet__support {
        padding:10px 12px 108px !important;
        text-align:left;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-card {
        overflow:hidden;
        border:1px solid #dce6de;
        border-top:3px solid var(--vlt-support-color,#009039);
        border-radius:16px;
        background:#fff;
        box-shadow:0 8px 24px rgba(23,58,35,.07);
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-card > header {
        display:block;
        padding:16px 16px 10px;
        border:0;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-card > header small {
        color:var(--vlt-support-color,#009039);
        font-size:8px;
        font-weight:900;
        letter-spacing:.12em;
        text-transform:uppercase;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-card > header h3 {
        margin:4px 0 3px;
        color:#173f27;
        font-size:18px;
        line-height:1.2;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-card > header p {
        margin:0;
        color:#627068;
        font-size:10.5px;
        line-height:1.45;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-person {
        display:flex;
        align-items:center;
        gap:14px;
        padding:4px 16px 16px;
    }
    .vlt-cockpit--mobile-klar .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--mobile-klar .vlt-klar-support-avatar img {
        display:block;
        width:100%;
        height:100%;
        border-radius:inherit;
        object-fit:cover;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-avatar.is-square {
        border-radius:14px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-avatar svg {
        width:31px;
        height:31px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.7;
        stroke-linecap:round;
        stroke-linejoin:round;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-person > span:last-child {
        display:flex;
        min-width:0;
        flex-direction:column;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-person strong {
        color:#173f27;
        font-size:18px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-person small,
    .vlt-cockpit--mobile-klar .vlt-klar-support-person em {
        color:#68756d;
        font-size:11px;
        font-style:normal;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-person em {
        margin-top:3px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-ways {
        display:grid;
        grid-template-columns:1fr;
        border-top:1px solid #e8eee9;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-ways > a {
        display:grid;
        min-height:58px;
        grid-template-columns:42px minmax(0,1fr);
        align-items:center;
        justify-content:stretch;
        gap:10px;
        padding:7px 16px;
        border:0;
        border-bottom:1px solid #e8eee9;
        border-radius:0;
        color:#173f27;
        font-size:13px;
        text-decoration:none;
        box-sizing:border-box;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-way-icon {
        display:grid;
        width:40px;
        height:40px;
        place-items:center;
        border:1px solid rgba(22,129,58,.28);
        border-radius:50%;
        background:#f4f9f5;
        color:var(--vlt-support-color,#009039);
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-way-icon.is-whatsapp {
        background:var(--vlt-support-color,#009039);
        color:#fff;
    }
    .vlt-cockpit--mobile-klar .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--mobile-klar .vlt-klar-support-ways > a > span {
        display:flex;
        min-width:0;
        flex-direction:column;
        gap:2px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-ways b {
        color:#7b8a80;
        font-size:10px;
        letter-spacing:.1em;
        text-transform:uppercase;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-ways em {
        min-width:0;
        overflow-wrap:anywhere;
        color:#173f27;
        font-size:15px;
        font-style:normal;
        font-weight:700;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-imprint {
        background:#f8faf8;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-imprint summary {
        position:relative;
        padding:14px 42px 14px 16px;
        color:#173f27;
        font-size:11px;
        font-weight:850;
        list-style:none;
        cursor:pointer;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-imprint summary::-webkit-details-marker { display:none; }
    .vlt-cockpit--mobile-klar .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--mobile-klar .vlt-klar-support-imprint[open] summary::after { content:"−"; }
    .vlt-cockpit--mobile-klar .vlt-klar-support-imprint > div {
        position:relative;
        padding:0 16px 16px;
        border-top:1px solid #e1e8e3;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-imprint h4 {
        margin:0;
        color:#173f27;
        font-size:13px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-imprint-head {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:12px 0 8px;
        border-bottom:1px solid #e1e8e3;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-imprint-brand {
        display:flex;
        min-width:0;
        flex:1 1 auto;
        align-items:center;
        justify-content:flex-start;
        gap:10px;
    }
    .vlt-cockpit--mobile-klar .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,.18);
        border-radius:14px;
        background:#fff;
        box-shadow:0 8px 20px rgba(20,55,31,.10);
    }
.vlt-cockpit--mobile-klar .vlt-klar-support-imprint-logo img {
        display:block;
        width:100%;
        height:100%;
        object-fit:cover;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-imprint p {
        margin:7px 0;
        color:#59675e;
        font-size:10px;
        line-height:1.45;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-imprint > .has-imprint-logo > p {
        max-width:calc(100% - 92px);
    }
    .vlt-cockpit--mobile-klar .vlt-klar-support-imprint a {
        display:inline;
        min-height:0;
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
        color:#126d31;
        font:inherit;
        font-weight:inherit;
        text-align:left;
        text-decoration:none;
        box-shadow:none;
    }
}

/* Bildausschnitt und Zoom bleiben getrennte Bewegungen: Der Zoom arbeitet
 * immer aus der Mitte, waehrend die gespeicherte X-/Y-Position nur den
 * sichtbaren Ausschnitt steuert. */
.vlt-cockpit--mobile-klar .vlt-klar-support-avatar img,
.vlt-cockpit--mobile-klar .vlt-klar-support-imprint-logo img {
    transform-origin:center center !important;
}

@media (max-width:374px) {
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head {
        grid-template-columns:42px minmax(0,1fr);
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolgroup button,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__close {
        width:45px;
        flex-basis:45px;
    }
}

/* V2.10.055: Die im Cockpit freigegebene Kontur wird auf die komplette
 * Zielwelt und das Plus-Aktionsmenue uebertragen: oben 1 px und unten 2 px
 * im Grau der inneren Kreuzlinien. Die linke gruene Markenklammer bleibt
 * an jeder Karte und jedem Aktionsbutton sichtbar. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-klar-view--goals > .vlt-klar-goal-hero,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--goals > .vlt-klar-current-goal,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--goals > .vlt-klar-milestone,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--goals .vlt-klar-mobile-goal-week,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--goals .vlt-klar-goal-action,
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > a,
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > span:not(.vlt-cockpit-klar-quick__glass) {
        border-top:1px solid #e6ebe7 !important;
        border-right-color:#e6ebe7 !important;
        border-bottom:2px solid #e6ebe7 !important;
        border-left:2px solid #16813a !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > a::after,
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > span:not(.vlt-cockpit-klar-quick__glass)::after {
        display:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__glass {
        border-top-color:#e6ebe7;
        border-bottom:2px solid #e6ebe7;
    }
}

/* V2.10.087: Die neuen globalen Designwerte greifen nur an Kalenderblatt,
 * Uhr und Profilfoto. Ohne gespeicherte Auswahl entsprechen alle Variablen
 * exakt dem freigegebenen Zustand von V2.10.086. */
.vlt-klar-welcome-photo-frame { display:block; position:relative; overflow:hidden; padding:0 !important; }
.vlt-klar-welcome-photo-frame img,
.vlt-klar-profile-settings__preview img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:var(--vlt-photo-x,50%) var(--vlt-photo-y,50%);
    transform:scale(var(--vlt-photo-zoom,1));
    transform-origin:var(--vlt-photo-x,50%) var(--vlt-photo-y,50%);
}
.vlt-klar-photo-placeholder svg {
    display:block;
    width:68%;
    height:68%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.vlt-klar-profile-settings {
    display:flex;
    min-height:320px;
    align-items:center;
    padding:32px 24px;
    flex-direction:column;
    text-align:center;
}
.vlt-klar-profile-settings__gesture-area {
    display:grid;
    width:min(100%,260px);
    height:178px;
    place-items:center;
    border:1px dashed #c9dbce;
    border-radius:36px;
    background:linear-gradient(145deg,rgba(241,247,242,.85),rgba(255,255,255,.35));
    touch-action:none;
    cursor:grab;
}
.vlt-klar-profile-settings__gesture-area:active { cursor:grabbing; }
.vlt-klar-profile-settings__preview {
    position:relative;
    display:grid;
    width:108px;
    height:108px;
    overflow:hidden;
    place-items:center;
    border:1px solid #d8e2da;
    border-radius:28px;
    background:#f1f7f2;
    color:#16813a;
    font-size:48px;
    pointer-events:none;
}
.vlt-klar-profile-settings h3 { margin:20px 0 4px; color:#173f27; font-size:20px; }
.vlt-klar-profile-settings p { max-width:360px; margin:0 0 18px; color:#68756d; font-size:13px; }
.vlt-klar-profile-settings__zoom { display:grid; width:min(100%,360px); grid-template-columns:auto minmax(120px,1fr) 52px; align-items:center; gap:10px; margin:0 0 16px; color:#173f27; font-size:13px; font-weight:750; text-align:left; }
.vlt-klar-profile-settings__zoom input { width:100%; accent-color:#16813a; }
.vlt-klar-profile-settings__zoom output { color:#68756d; font-variant-numeric:tabular-nums; text-align:right; }
.vlt-klar-profile-settings > div:nth-of-type(2) { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; }
.vlt-klar-profile-settings button { min-height:44px; padding:0 15px; border:1px solid #16813a; border-radius:13px; background:#16813a; color:#fff; font-weight:750; }
.vlt-klar-profile-settings button.is-secondary { background:#fff; color:#173f27; }
.vlt-klar-profile-settings > small { min-height:20px; margin-top:13px; color:#16813a; font-size:12px; }

@media (max-width:760px) {
    /* V2.10.089: Testvariante mit einer ruhigen rechten Zeitspalte. Die
       Uhr sitzt rechts oben, das Kalenderblatt direkt darunter. Die linke
       Seite bleibt dadurch als groessere zusammenhaengende Anzeigeflaeche
       frei. Der Wochenring behaelt seine bisherige sichtbare Hoehe und alle
       unteren Cockpit-/Restfelder bleiben unveraendert. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top {
        height:180px;
        min-height:180px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview {
        position:relative;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf {
        position:absolute;
        z-index:3;
        top:80px;
        right:13px;
        width:112px;
        margin:0;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > .vlt-elegant-overview__clock {
        top:31px;
        right:13px;
        width:112px;
        height:47px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-page {
        width:112px;
        height:47px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time {
        transform:none;
        pointer-events:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring {
        top:79px;
        bottom:auto;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__details > .vlt-elegant-overview__info--sales {
        position:absolute;
        z-index:1;
        top:31px;
        bottom:0;
        left:0;
        width:50%;
        height:auto;
        min-height:0;
        padding:0 46px 10px 12px;
        border-right:1px solid #e6ebe7;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info--sales > .vlt-elegant-overview__info-messages {
        right:46px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info--sales > .vlt-elegant-overview__info-dots {
        right:46px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__details > .vlt-elegant-overview__rest {
        grid-column:2;
    }
    .vlt-cockpit--mobile-elegant .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--mobile-elegant .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--mobile-elegant .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--mobile-elegant .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--mobile-elegant .vlt-elegant-overview__clock-time > b {
        color:var(--vlt-clock-color,#16813a);
        font-size:var(--vlt-clock-size,27px);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > i {
        color:var(--vlt-clock-color,#16813a);
        font-size:calc(var(--vlt-clock-size,27px) * .63);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-digital .vlt-elegant-overview__clock-time > b {
        width:auto;
        min-width:15px;
        border:0;
        border-radius:0;
        background:transparent;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-digital .vlt-elegant-overview__clock-time > b::after,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-digital .vlt-elegant-overview__clock-time > b::before,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-glass .vlt-elegant-overview__clock-time > b::after,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-glass .vlt-elegant-overview__clock-time > b::before { content:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-glass .vlt-elegant-overview__clock-time {
        gap:2px;
        padding:8px 10px;
        border:1px solid rgba(22,129,58,.18);
        border-radius:13px;
        background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(225,241,230,.56));
        box-shadow:inset 0 1px 0 #fff,0 5px 15px rgba(23,58,35,.07);
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-glass .vlt-elegant-overview__clock-time > b {
        width:auto;
        min-width:15px;
        height:auto;
        border:0;
        border-radius:0;
        background:transparent;
    }
    .vlt-elegant-overview__analog { display:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-analog .vlt-elegant-overview__clock-time { display:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-analog .vlt-elegant-overview__analog {
        position:relative;
        display:block;
        width:66px;
        height:66px;
        border:2px solid var(--vlt-clock-color,#16813a);
        border-radius:50%;
        background:repeating-conic-gradient(from -1deg,var(--vlt-clock-color,#16813a) 0 2deg,transparent 2deg 30deg),#fff;
        box-shadow:inset 0 0 0 8px #fff,0 4px 13px rgba(23,58,35,.08);
        transform:translateY(-5px);
    }
    .vlt-cockpit--mobile-elegant .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--mobile-elegant .vlt-elegant-overview__analog > .is-hour { width:3px; height:18px; margin-left:-1.5px; transform:rotate(var(--vlt-clock-hour-angle,0deg)); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__analog > .is-minute { width:2px; height:24px; margin-left:-1px; transform:rotate(var(--vlt-clock-minute-angle,0deg)); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__analog > .is-center { bottom:calc(50% - 3px); width:7px; height:7px; margin-left:-3.5px; border-radius:50%; }

    .vlt-cockpit--mobile-elegant .vlt-klar-sheet--profile-settings .vlt-klar-profile-settings {
        display:flex;
        min-height:0;
        align-items:center;
        padding:28px 24px;
        flex:1 1 auto;
        flex-direction:column;
        text-align:center;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-profile-settings__gesture-area {
        width:min(100%,260px);
        height:178px;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-profile-settings__preview {
        position:relative;
        display:grid;
        width:108px;
        height:108px;
        overflow:hidden;
        place-items:center;
        border:1px solid #d8e2da;
        border-radius:28px;
        background:#f1f7f2;
        color:#16813a;
        font-size:48px;
        touch-action:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-profile-settings h3 { margin:20px 0 4px; color:#173f27; font-size:20px; }
    .vlt-cockpit--mobile-elegant .vlt-klar-profile-settings p { max-width:310px; margin:0 0 18px; color:#68756d; font-size:13px; }
    .vlt-cockpit--mobile-elegant .vlt-klar-profile-settings > div:nth-of-type(2) { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; }
    .vlt-cockpit--mobile-elegant .vlt-klar-profile-settings button { min-height:44px; padding:0 15px; border:1px solid #16813a; border-radius:13px; background:#16813a; color:#fff; font-weight:750; }
    .vlt-cockpit--mobile-elegant .vlt-klar-profile-settings button.is-secondary { background:#fff; color:#173f27; }
    .vlt-cockpit--mobile-elegant .vlt-klar-profile-settings > small { min-height:20px; margin-top:13px; color:#16813a; font-size:12px; }
}

/* V2.10.090: Freigegebener Monatsregister-Stil nach Motiv 2.
   Das Kalenderblatt wird rechts als offenes Register statt als geschlossene
   Karte gezeigt. Tageszahl, Wochentag, Uhr und Zeitraum bleiben getrennt
   konfigurierbar; Ring, Cockpit-Hinweise und Restfelder werden nicht bewegt. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf {
        top:37px;
        right:9px;
        width:152px;
        height:140px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page {
        position:relative;
        display:block;
        width:152px;
        height:140px;
        overflow:visible;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page::before,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page::after {
        z-index:4;
        top:-4px;
        width:4px;
        height:12px;
        background:#284332;
        box-shadow:0 1px 1px rgba(20,41,27,.2);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page::before { left:24px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page::after { right:24px; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month {
        position:absolute;
        top:0;
        right:0;
        left:0;
        display:grid;
        height:27px;
        place-items:center;
        border:0;
        border-radius:15px 15px 3px 3px;
        background:var(--vlt-calendar-banner,#d94a43);
        box-shadow:0 3px 8px rgba(80,30,28,.12);
        color:#fff;
        font-size:11px;
        font-weight:850;
        letter-spacing:.08em;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day {
        position:absolute;
        top:31px;
        right:0;
        left:0;
        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--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day::after {
        border-top-color:#edf0ee;
        box-shadow:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday {
        position:absolute;
        top:81px;
        right:0;
        left:0;
        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--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period {
        position:absolute;
        top:122px;
        right:0;
        left:0;
        display:grid;
        height:17px;
        padding:0;
        place-items:center;
        border:0;
        background:transparent;
        color:var(--vlt-calendar-period-color,#173f27);
        font-size:var(--vlt-calendar-period-size,10px);
        font-weight:650;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > .vlt-elegant-overview__clock {
        top:124px;
        right:9px;
        width:152px;
        height:29px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-page {
        width:152px;
        height:29px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time {
        gap:1px;
        transform:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-analog {
        top:108px;
        height:44px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-analog .vlt-elegant-overview__clock-page {
        height:44px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-analog .vlt-elegant-overview__analog {
        width:42px;
        height:42px;
        transform:none;
    }
}

/* V2.10.094: Gespiegelte Ausrichtung der Vertriebsmonatskachel. Der
   Wochenring sitzt auf der Uhrzeitachse. Von seiner Mitte laeuft die feine
   Trennlinie nach links: Hinweise oben, optionale Diashow unten. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > .vlt-elegant-overview__clock {
        right:auto;
        left:75%;
        transform:translateX(-50%);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring { top:99px; width:var(--vlt-calendar-ring-size,80px); height:var(--vlt-calendar-ring-size,80px); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring::after { inset:var(--vlt-calendar-ring-thickness,6px); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring > span { font-size:var(--vlt-calendar-ring-text-size,23px); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring > span small { font-size:var(--vlt-calendar-ring-small-size,13px); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div { align-items:center; text-align:center; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div > span { right:0; left:0; width:100%; text-align:center; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div > strong {
        display:grid;
        grid-template-columns:3ch auto .7ch 2ch auto;
        align-items:baseline;
        justify-content:center;
        column-gap:.45em;
        font-variant-numeric:tabular-nums;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div > strong > b { min-width:0; text-align:right; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div > strong > i { text-align:left; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div > strong > em { color:var(--vlt-elegant-ink); font-style:normal; font-weight:400; text-align:center; }
    .vlt-cockpit--mobile-elegant .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:0; left:0; border-top:1px solid #e6ebe7; pointer-events:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info--sales > header { position:absolute; z-index:2; top:-1px; right:46px; left:12px; justify-content:center; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info--sales > header small { margin-left:0; }
    .vlt-cockpit--mobile-elegant .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--mobile-elegant .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--mobile-elegant .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:#f5f8f6; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__slideshow img { position:absolute; inset:0; 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 .9s ease; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__slideshow img.is-active { opacity:1; }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce) {
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__slideshow img { transition:none; }
}

/* V2.10.096: Beide Teilueberschriften des Vertriebskalenders stehen exakt
   auf den Mittelachsen ihrer jeweiligen Kartenhaelfte. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-appointments-head {
        justify-content:center;
        padding-right:0;
        padding-left:0;
        text-align:center;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-open > span {
        text-align:center;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-calendar {
        top:-3px;
        right:12px;
    }
    /* V2.10.134: Die Restzeitzeilen werden nochmals gleichmaessig um
       insgesamt fuenf Pixel verdichtet. Die obere Trennlinie gewinnt dadurch
       fuenf Pixel Abstand zum Vertriebszeitraum; beide Restzeilen bleiben
       exakt gleich hoch. Klappkante,
       Cockpit-Trennlinie und Ringoberkante verwenden dieselbe dynamische
       Achse, auch wenn Kalender oder Ring in den Einstellungen skaliert sind. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__details {
        min-height:var(--vlt-calendar-details-height,90px);
        height:var(--vlt-calendar-details-height,90px);
    }

    /* V2.10.103: Die konfigurierbare Kalendergroesse skaliert Register und
       Uhr als eine zentrierte Einheit. Die obere Kachelhaelfte, ihre
       Trennlinie und der Wochenring folgen der Groesse automatisch. */
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top {
        height:var(--vlt-calendar-top-height,180px);
        min-height:var(--vlt-calendar-top-height,180px);
    }
    .vlt-cockpit--mobile-elegant .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:top center;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > .vlt-elegant-overview__clock {
        top:var(--vlt-calendar-clock-top,143px);
        transform:translateX(-50%) scale(var(--vlt-calendar-scale,1));
        transform-origin:top center;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > .vlt-elegant-overview__clock.is-analog {
        top:var(--vlt-calendar-analog-top,127px);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring {
        top:var(--vlt-calendar-cockpit-axis-top,106px);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div {
        padding:17px 14px 3px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div > span {
        top:4px;
    }
}

/* V2.10.115: iPhone-Web-App-Regressionsschutz für Kontakte und Unterstützung.
 * Die weiße Vollansicht bleibt hinter dem unveränderten Glas-Footer bestehen;
 * nur der Inhaltsbereich zwischen Suche und Footer wird zum eigenen, vollständig
 * finger-scrollbaren Bereich. flex-basis:0 ist dabei für iOS WebKit stabiler
 * als die zuvor allgemein verwendete automatische Basis. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet {
        display:flex !important;
        min-height:0 !important;
        overflow:hidden !important;
        flex-direction:column !important;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet > header,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet > .vlt-klar-sheet__search {
        flex:0 0 auto !important;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet > .vlt-klar-sheet__contacts,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet.is-vlt-nav-sheet > .vlt-klar-sheet__support {
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        flex:1 1 0 !important;
        box-sizing:border-box !important;
        touch-action:pan-y;
        overscroll-behavior-y:contain;
        -webkit-overflow-scrolling:touch;
    }
}

/* V2.10.127: Die Kalender-Werkzeuge bleiben auch auf schmalen iPhones
 * neben der Ueberschrift. Zwei klar getrennte Gruppen und groessere
 * Touchflaechen ersetzen die fruehere, umbrechende zweite Buttonzeile. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head {
        display:grid;
        min-height:62px;
        grid-template-columns:68px minmax(0,1fr);
        grid-template-rows:1fr;
        align-items:center;
        gap:4px;
        padding:7px 8px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > div:first-child {
        display:flex;
        min-width:0;
        height:48px;
        align-items:flex-start;
        justify-content:center;
        padding:0;
        text-align:left;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > div:first-child small {
        display:none;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > div:first-child strong {
        font-size:16px;
        line-height:48px;
        white-space:nowrap;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > .vlt-klar-calendar__header-actions {
        display:flex;
        min-width:0;
        grid-row:1;
        grid-column:2;
        align-items:center;
        justify-content:flex-end;
        gap:5px;
        padding:0;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolclusters {
        display:flex;
        min-width:0;
        align-items:center;
        justify-content:flex-end;
        gap:5px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolgroup {
        padding:1px 2px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolgroup button {
        width:48px;
        height:48px;
        flex:0 0 48px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolgroup svg {
        width:22px;
        height:22px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__close {
        position:static;
        width:48px;
        height:48px;
        flex:0 0 48px;
        transform:none;
    }
}

@media (max-width:390px) {
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head {
        grid-template-columns:46px minmax(0,1fr);
        gap:3px;
        padding-right:5px;
        padding-left:5px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > div:first-child strong {
        font-size:13px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > .vlt-klar-calendar__header-actions,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolclusters {
        gap:3px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolgroup {
        padding-right:1px;
        padding-left:1px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolgroup button,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__close {
        width:46px;
        height:48px;
        flex-basis:46px;
    }
}

/* V2.10.129 Abschlussregel: Die Kalender-Ueberschrift bleibt links frei.
 * Beide Werkzeuggruppen stehen in derselben Zeile geschlossen am rechten Rand. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head {
        min-height:76px;
        grid-template-columns:80px minmax(0,1fr);
        gap:4px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > .vlt-klar-calendar__header-actions,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolclusters {
        align-items:flex-start;
        justify-content:flex-end;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolcluster {
        display:grid;
        min-width:0;
        justify-items:center;
        gap:2px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolcluster > small {
        display:block;
        max-width:100%;
        overflow:hidden;
        color:#68756d;
        font-size:7px;
        font-weight:750;
        line-height:1;
        letter-spacing:.02em;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__close {
        margin-top:2px;
    }
}
@media (max-width:390px) {
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head {
        grid-template-columns:72px minmax(0,1fr);
    }
}

/* V2.10.130 Abschlussregel: Die gewuenschte zweizeilige Werkzeugleiste
 * gewinnt verbindlich gegen die frueheren einzeiligen Varianten. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head {
        display:grid;
        min-height:132px;
        grid-template-columns:minmax(0,1fr) 52px;
        grid-template-rows:52px 72px;
        align-items:center;
        gap:2px 8px;
        padding:7px 10px 5px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > div:first-child {
        display:flex;
        min-width:0;
        height:52px;
        grid-column:1;
        grid-row:1;
        align-items:flex-start;
        justify-content:center;
        padding:0;
        text-align:left;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > div:first-child small {
        display:none;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > div:first-child strong {
        font-size:20px;
        line-height:52px;
        white-space:nowrap;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > .vlt-klar-calendar__header-actions {
        display:contents;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolclusters {
        display:flex;
        width:100%;
        min-width:0;
        grid-column:1 / -1;
        grid-row:2;
        align-items:flex-start;
        justify-content:space-between;
        gap:10px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolcluster:last-child {
        margin-right:60px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolcluster {
        display:grid;
        min-width:0;
        justify-items:center;
        gap:3px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolgroup button {
        width:52px;
        height:52px;
        flex:0 0 52px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolcluster > small {
        display:block;
        max-width:100%;
        overflow:hidden;
        color:#68756d;
        font-size:8px;
        font-weight:750;
        line-height:1;
        letter-spacing:.02em;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__close {
        position:static;
        width:52px;
        height:52px;
        grid-column:2;
        grid-row:1;
        margin:0;
        transform:none;
    }
}
@media (max-width:390px) {
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head {
        grid-template-columns:minmax(0,1fr) 50px;
        padding-right:7px;
        padding-left:7px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolgroup button,
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__close {
        width:50px;
        height:50px;
        flex-basis:50px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolcluster:last-child {
        margin-right:54px;
    }
}

/* V2.10.130: stabile Smartphone-Freigabe mit drei festen Klappbereichen. */
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing > form {
    display:flex;
    flex-direction:column;
    gap:9px;
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing > form > header {
    position:sticky;
    z-index:7;
    top:0;
    flex:0 0 auto;
    padding-bottom:5px;
    background:#fff;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-panel {
    flex:0 0 auto;
    overflow:hidden;
    border:1px solid #cfe0d3;
    border-radius:12px;
    background:#fff;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-panel--picker {
    position:sticky;
    z-index:6;
    top:48px;
    box-shadow:0 5px 14px rgba(20,55,31,.09);
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-panel > summary {
    display:flex;
    min-height:46px;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 12px;
    background:#f4f8f5;
    color:#173f27;
    font-size:12px;
    font-weight:850;
    cursor:pointer;
    list-style:none;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-panel > summary::-webkit-details-marker { display:none; }
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-panel > summary::after {
    content:'⌄';
    flex:0 0 auto;
    color:#16813a;
    font-size:15px;
    transform:rotate(0deg);
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-panel[open] > summary::after { transform:rotate(180deg); }
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-panel > summary > small {
    margin-left:auto;
    color:#16813a;
    font-size:10px;
    font-weight:850;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-panel-body {
    display:grid;
    gap:8px;
    max-height:260px;
    overflow:auto;
    padding:9px;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-panel--picker .vlt-klar-calendar__share-panel-body {
    max-height:none;
    overflow:visible;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-search {
    position:static;
    box-shadow:none;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-add {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(118px,.7fr);
    gap:7px;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-add select,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-add button {
    width:100%;
    min-width:0;
    min-height:42px;
    box-sizing:border-box;
    border:1px solid #b9d4c0;
    border-radius:9px;
    background:#fff;
    color:#173f27;
    font-size:10px;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-add button {
    grid-column:1/-1;
    border-color:#16813a;
    background:#16813a;
    color:#fff;
    font-weight:850;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-available article {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    min-height:48px;
    padding:5px 2px;
    border-bottom:1px solid #edf1ee;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article > span,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-available article > span {
    display:flex;
    min-width:0;
    flex-direction:column;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article strong,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-available article strong {
    overflow:hidden;
    color:#173f27;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article small,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-available article small {
    color:#718078;
    font-size:9px;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article button,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-available article button {
    min-width:82px;
    min-height:38px;
    border:1px solid #16813a;
    border-radius:9px;
    background:#fff;
    color:#126d31;
    font-size:10px;
    font-weight:850;
}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article button { border-color:#b74646; color:#a52d2d; }
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-save-note {
    color:#68756d;
    font-size:9px;
    line-height:1.35;
}

/* V2.10.135: Der sichtbare Kalender-Titel entfaellt zugunsten einer
 * kompakten, einzeiligen Werkzeugleiste. Der Titel bleibt fuer
 * Screenreader erhalten. Die iOS-Fokusfelder bekommen eine feste
 * Scrollreserve, waehrend die eigentliche Ausrichtung per JS erfolgt. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head {
        display:grid;
        min-height:78px;
        grid-template-columns:minmax(0,1fr) 52px;
        grid-template-rows:68px;
        align-items:start;
        gap:0 8px;
        padding:7px 10px 3px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > .vlt-klar-calendar__accessible-title {
        position:absolute !important;
        width:1px !important;
        height:1px !important;
        overflow:hidden !important;
        clip:rect(0,0,0,0) !important;
        clip-path:inset(50%) !important;
        white-space:nowrap !important;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head > .vlt-klar-calendar__header-actions {
        display:contents;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolclusters {
        display:flex;
        width:100%;
        min-width:0;
        grid-column:1;
        grid-row:1;
        align-items:flex-start;
        justify-content:space-between;
        gap:8px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolcluster:last-child {
        margin-right:0;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__close {
        position:static;
        width:52px;
        height:52px;
        grid-column:2;
        grid-row:1;
        margin:0;
        transform:none;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__composer {
        z-index:10;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form label:has(> [data-vlt-calendar-postcode]),
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form label:has(> [data-vlt-calendar-city]),
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form label:has(> [data-vlt-calendar-street]),
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form label:has(> [data-vlt-calendar-house-number]),
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form label:has(> [data-vlt-calendar-customer-phone]),
    .vlt-cockpit--mobile-klar .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));
    }
}

@media (max-width:390px) {
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head {
        grid-template-columns:minmax(0,1fr) 50px;
        gap:0 5px;
        padding-right:7px;
        padding-left:7px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-sheet--calendar > .vlt-klar-calendar__head .vlt-klar-calendar__toolclusters {
        gap:5px;
    }
}

/* V2.10.136 LETZTE KASKADE: Kalenderblock ohne Klappkante. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top { height:var(--vlt-calendar-top-height,187px); min-height:var(--vlt-calendar-top-height,187px); }
    .vlt-cockpit--mobile-elegant .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:0;
        transform:translateX(-50%) scale(var(--vlt-calendar-scale,1)); transform-origin:center center; pointer-events:none;
    }
    .vlt-cockpit--mobile-elegant .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:0; border-radius:0; background:transparent; box-shadow:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__clock,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period {
        position:relative; top:auto; right:auto; bottom:auto; left:auto; width:100%; height:auto; min-height:0; margin:0; transform:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-weekday,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period { display:grid; place-items:center; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day { overflow:visible; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-day::after { content:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__clock { display:grid; align-items:center; justify-items:center; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-page { display:grid; width:100%; height:100%; min-height:0; place-items:center; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time { gap:1px; transform:none; }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > b,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-digital .vlt-elegant-overview__clock-time > b,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock.is-glass .vlt-elegant-overview__clock-time > b {
        width:auto; min-width:.62em; height:auto; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none;
        color:var(--vlt-clock-color,#16813a); font-size:var(--vlt-clock-size,27px); font-weight:300;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > b::before,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__clock-time > b::after { content:none; }
    .vlt-cockpit--mobile-elegant .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--mobile-elegant .vlt-elegant-overview__clock.is-analog .vlt-elegant-overview__analog {
        width:min(42px,calc(var(--vlt-calendar-clock-height,44px) - 2px)); height:min(42px,calc(var(--vlt-calendar-clock-height,44px) - 2px)); transform:none;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring { top:var(--vlt-calendar-cockpit-axis-top,106px); }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__details > .vlt-elegant-overview__info--sales::after { top:calc(var(--vlt-calendar-cockpit-axis-top,106px) - 31px); }
    .vlt-cockpit--mobile-elegant .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--mobile-elegant .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--mobile-elegant .vlt-elegant-overview__rest > div > strong { margin:0; line-height:1.2; }
}

/* V2.10.137: Drei abschliessende Ausrichtungen nach der iPhone-Abnahme.
 * Kalender exakt in seiner rechten oberen Haelfte; Cockpit plus Zaehler als
 * gemeinsame Mitte; Restwerte als vollstaendig zentrierte Zahlenzeilen. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf {
        top:50%;
        transform:translate(-50%,-50%) scale(var(--vlt-calendar-scale,1));
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info--sales > header {
        right:12px;
        left:12px;
        align-items:baseline;
        justify-content:center;
        gap:8px;
        line-height:1;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info--sales > header small {
        margin:0;
        line-height:1;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div {
        place-content:center;
        place-items:center;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div > strong {
        width:max-content;
        max-width:100%;
        grid-template-columns:3ch max-content .7ch 2ch max-content;
        justify-self:center;
        justify-content:start;
    }
}

/* V2.10.138: Die Kalendergruppe sitzt in der sichtbaren Flaeche unterhalb
 * der Kartenueberschrift und oberhalb der ersten Rest-Trennlinie. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf {
        top:calc(50% + 10px);
    }
}

/* V2.10.144: Ueberschrift und Wechselzaehler teilen eine echte gemeinsame
 * Schriftgrundlinie. Das ist robuster als eine feste Pixelverschiebung und
 * veraendert weder Kartenhoehen noch die gesperrte Smartphone-Geometrie. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info--sales > header {
        align-items:baseline;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__info--sales > header small {
        transform:none;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card footer > [data-vlt-calendar-detail-show-date] {
        background:#fff;
        color:#126d31;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card footer > [data-vlt-calendar-detail-edit] {
        background:#16813a;
        color:#fff;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__detail-card footer > [data-vlt-calendar-detail-close] {
        grid-column:1/-1;
        background:#16813a;
        color:#fff;
    }
}

/* V2.10.143: Kalenderblatt-Rahmen wie in der freigegebenen Skizze. Der
 * Rahmen liegt als Outline ausserhalb des Moduls und veraendert deshalb weder
 * die Kartenhoehe noch die gesperrten Smartphone-Fenstermasse. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page {
        overflow:visible;
        border-radius:10px;
        background:rgba(255,255,255,.72);
        box-shadow:0 5px 13px rgba(24,62,37,.10),0 0 0 1px rgba(22,129,58,.20);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month {
        border-radius:10px 10px 4px 4px;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-period {
        border-radius:0 0 10px 10px;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form label:has(> [data-vlt-calendar-postcode]),
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form label:has(> [data-vlt-calendar-city]),
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form label:has(> [data-vlt-calendar-street]),
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form label:has(> [data-vlt-calendar-house-number]),
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form label:has(> [data-vlt-calendar-customer-phone]),
    .vlt-cockpit--mobile-klar .vlt-klar-calendar__form label:has(> [data-vlt-calendar-customer-email]) {
        scroll-margin-top:25vh;
        scroll-margin-bottom:45vh;
    }
    /* V2.10.256: Die getrennte Browseransicht wurde auf Wunsch
     * vollstaendig entfernt. Der Webbrowser zeigt jetzt genau dieselbe
     * Gestaltung wie die Web-App. Keine eigenen Browserregeln mehr. */
}

/* iPad-Web-App: gleiche Bedienoberflaeche wie die Smartphone-Web-App,
 * lediglich als mittig begrenzte App-Flaeche. */
html.vlt-display-tablet-app body {
    max-width:760px;
    margin-right:auto !important;
    margin-left:auto !important;
    overflow-x:hidden !important;
    background:#eef2ef !important;
}

/* Breite Browseransicht von Elegant: dieselbe ruhige Formsprache, jedoch
 * mittig begrenzt. Die Navigation ist hier kein schwebender Smartphone-
 * Footer, sondern eine normale Abschlussleiste unter den Cockpit-Karten. */
@media (min-width:761px) {
    .vlt-cockpit--desktop-elegant {
        width:min(1180px,calc(100% - 40px));
        max-width:1180px;
        margin:24px auto 36px !important;
        overflow-x:clip !important;
    }
    .vlt-cockpit--desktop-elegant > .vlt-cockpit-klar-nav {
        position:relative !important;
        inset:auto !important;
        display:grid !important;
        grid-template-columns:repeat(5,minmax(0,1fr));
        align-items:center;
        width:min(760px,calc(100% - 40px));
        min-height:78px;
        margin:28px auto 0;
        padding:10px 14px;
        border:1px solid rgba(22,129,58,.17);
        border-radius:25px;
        background:rgba(249,252,250,.96);
        box-shadow:0 12px 30px rgba(24,62,37,.10);
    }
    .vlt-cockpit--desktop-elegant > .vlt-cockpit-klar-nav > a,
    .vlt-cockpit--desktop-elegant > .vlt-cockpit-klar-nav > button {
        display:flex;
        min-width:0;
        min-height:58px;
        padding:7px 5px;
        border:0;
        border-radius:17px;
        background:transparent;
        color:#476052;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:4px;
        text-decoration:none;
        font:inherit;
        cursor:pointer;
        transform:none !important;
    }
    .vlt-cockpit--desktop-elegant > .vlt-cockpit-klar-nav > .is-active {
        background:#edf7f0;
        color:#16813a;
    }
    .vlt-cockpit--desktop-elegant > .vlt-cockpit-klar-nav svg {
        width:25px;
        height:25px;
        stroke:currentColor;
        fill:none;
        stroke-width:1.8;
    }
    .vlt-cockpit--desktop-elegant > .vlt-cockpit-klar-nav small {
        font-size:12px;
        font-weight:750;
    }
    .vlt-cockpit--desktop-elegant > .vlt-cockpit-klar-nav > .vlt-cockpit-klar-nav__plus {
        width:58px;
        height:58px;
        margin:0 auto;
        border-radius:50%;
        background:#16813a !important;
        color:#fff !important;
        font-size:34px;
        line-height:1;
    }
}

/* V2.10.155: Freigegebene hochwertige 3D-Oberflaeche fuer das Elegant-
 * Smartphone-Cockpit. Diese letzte Kaskade veraendert ausschliesslich Farbe,
 * Kantenlicht und Schatten. Saemtliche gesperrten Masse, Positionen,
 * Safe-Areas, z-index-Ebenen und Footerabstaende bleiben unveraendert. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-klar-welcome,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-elegant-overview,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-elegant-overview__utility {
        border-top-color:rgba(255,255,255,.98) !important;
        border-right-color:rgba(214,225,217,.94) !important;
        border-bottom-color:rgba(205,217,208,.96) !important;
        background:linear-gradient(145deg,#fff 0%,#fff 57%,#fbfdfb 100%);
        box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(198,211,201,.42),0 3px 0 rgba(218,225,220,.94),0 7px 11px rgba(21,55,32,.11),12px 20px 30px rgba(27,54,37,.12);
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-sun,
    .vlt-cockpit--mobile-elegant .vlt-cockpit__bell,
    .vlt-cockpit--mobile-elegant .vlt-klar-account {
        background:linear-gradient(145deg,#fff,#f2f7f3);
        box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(22,129,58,.08),0 2px 0 rgba(211,221,213,.88),0 7px 14px rgba(22,62,35,.14),7px 11px 18px rgba(24,55,36,.08);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page {
        border-color:rgba(203,215,206,.98);
        background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(248,251,249,.96));
        box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(179,194,183,.5),0 3px 0 rgba(205,214,207,.92),0 8px 12px rgba(28,57,39,.14),10px 17px 23px rgba(29,53,38,.12),0 0 0 1px rgba(22,129,58,.18);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month {
        background:linear-gradient(145deg,#ef574f 0%,#d93f39 48%,#c73330 100%);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(129,25,23,.16),0 3px 7px rgba(151,42,36,.18);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring {
        box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 3px 0 rgba(205,214,207,.92),0 8px 13px rgba(17,69,35,.2),10px 15px 23px rgba(27,53,37,.12);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring::after {
        background:linear-gradient(145deg,#fff,#f8faf8);
        box-shadow:inset 0 2px 4px rgba(18,58,31,.07),inset 0 -1px 0 rgba(255,255,255,1);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__slideshow {
        border-color:rgba(207,219,210,.94);
        background:linear-gradient(145deg,#f8faf8,#eef4f0);
        box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 2px 0 rgba(207,216,209,.9),0 7px 12px rgba(19,56,31,.14),9px 14px 21px rgba(25,50,34,.11);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button {
        background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(243,248,244,.72));
        box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(22,129,58,.07),0 2px 0 rgba(218,226,220,.76),0 6px 10px rgba(21,65,35,.09);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu-glass {
        background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(205,234,213,.82));
        box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(22,129,58,.12),0 3px 0 rgba(190,215,197,.78),0 8px 15px rgba(20,78,37,.2),8px 13px 20px rgba(24,56,35,.1);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility-calendar {
        filter:drop-shadow(0 3px 2px rgba(52,65,56,.22)) drop-shadow(5px 7px 7px rgba(29,51,37,.12));
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav {
        border-color:rgba(255,255,255,.94);
        background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(229,242,233,.69));
        box-shadow:inset 0 2px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(22,129,58,.12),0 4px 0 rgba(205,218,209,.68),0 13px 25px rgba(17,56,29,.19),14px 23px 37px rgba(22,47,31,.14);
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-nav-glass {
        background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(198,231,207,.86));
        box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(22,129,58,.12),0 3px 0 rgba(185,211,192,.75),0 8px 15px rgba(23,80,39,.2);
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav__plus {
        background:linear-gradient(145deg,#1b8e43,#126d31);
        box-shadow:inset 0 2px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(5,63,25,.25),0 4px 0 rgba(194,211,199,.95),0 10px 17px rgba(13,77,34,.29),11px 17px 25px rgba(25,51,34,.16);
    }
}

/* V2.10.158: Dezentere Abkantung rechts und unten. Mehrere scharf begrenzte,
 * helle Versatzlagen bilden die feste Seitenwand der Referenz; erst danach
 * folgt der weiche Kontaktschatten. Reine Oberflaeche ohne Geometrieaenderung. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-klar-head {
        box-shadow:inset 0 2px 0 #fff,inset -1px -1px 0 rgba(174,188,178,.3),2px 2px 0 #eef2ef,4px 4px 0 #d3dad4,7px 8px 11px rgba(25,48,33,.16),12px 16px 25px rgba(22,43,30,.13) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-klar-welcome,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-elegant-overview,
    .vlt-cockpit--mobile-elegant .vlt-klar-view--main > .vlt-elegant-overview__utility {
        box-shadow:inset 0 2px 0 #fff,inset -1px -2px 0 rgba(171,187,175,.3),2px 2px 0 #f0f3f1,4px 4px 0 #d4dbd5,7px 8px 11px rgba(24,49,32,.17),12px 18px 28px rgba(21,43,29,.14) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-klar-sun,
    .vlt-cockpit--mobile-elegant .vlt-cockpit__bell,
    .vlt-cockpit--mobile-elegant .vlt-klar-account {
        box-shadow:inset 0 2px 0 #fff,inset -1px -2px 0 rgba(166,184,171,.27),2px 2px 0 #edf1ee,4px 4px 0 #cfd6d0,7px 8px 10px rgba(21,52,32,.17),10px 13px 19px rgba(22,45,30,.11) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page {
        box-shadow:inset 0 2px 0 #fff,inset -1px -2px 0 rgba(158,178,163,.34),2px 2px 0 #edf1ee,5px 5px 0 #c7cec8,8px 9px 12px rgba(20,47,31,.19),12px 17px 24px rgba(20,42,28,.15),0 0 0 1px rgba(22,129,58,.18) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__calendar-page > .vlt-elegant-overview__calendar-month {
        box-shadow:inset 0 2px 0 rgba(255,255,255,.43),inset -1px -2px 0 rgba(114,20,18,.22),2px 2px 0 #d13a36,4px 4px 0 #a92b28,7px 8px 11px rgba(113,30,27,.22) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__ring {
        box-shadow:inset 0 2px 0 rgba(255,255,255,.88),2px 2px 0 #edf1ee,4px 4px 0 #cbd2cc,7px 8px 11px rgba(15,57,31,.2),10px 14px 21px rgba(21,44,29,.14) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__slideshow {
        box-shadow:inset 0 2px 0 #fff,inset -1px -1px 0 rgba(164,182,168,.32),2px 2px 0 #edf1ee,4px 4px 0 #cbd3cd,7px 8px 11px rgba(19,50,31,.17),11px 15px 22px rgba(20,43,29,.13) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button {
        box-shadow:inset 0 2px 0 #fff,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;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu-glass {
        box-shadow:inset 0 2px 0 #fff,inset -1px -2px 0 rgba(22,129,58,.12),2px 2px 0 #e8efe9,5px 5px 0 #b9c8bc,8px 9px 12px rgba(14,68,33,.21),11px 15px 21px rgba(20,45,29,.13) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav {
        box-shadow:inset 0 3px 0 #fff,inset -1px -2px 0 rgba(22,129,58,.12),2px 2px 0 #edf2ee,5px 5px 0 #c5cfc7,8px 10px 14px rgba(16,52,30,.19),12px 19px 29px rgba(19,41,27,.15) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-nav-glass {
        box-shadow:inset 0 2px 0 #fff,inset -1px -2px 0 rgba(22,129,58,.14),2px 2px 0 #e8efe9,4px 4px 0 #b9c8bc,7px 8px 11px rgba(14,67,32,.21),10px 14px 20px rgba(19,44,28,.13) !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-cockpit-klar-nav__plus {
        box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset -2px -3px 0 rgba(4,52,21,.26),2px 2px 0 #e8ede9,5px 5px 0 #c0cac2,8px 10px 14px rgba(9,66,29,.27),12px 17px 23px rgba(19,41,27,.15) !important;
    }
}

/* V2.10.159: Der aktive Vertriebskalender-Filter bleibt trotz 3D-Oberflaeche
 * eindeutig sichtbar. Klasse und aria-pressed werden von der vorhandenen
 * Klicklogik gesetzt; diese letzte Kaskade stellt nur die Rueckmeldung her. */
@media (max-width:760px) {
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button.is-vlt-menu-glass-active,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button[aria-pressed="true"] {
        background:linear-gradient(145deg,rgba(250,255,251,.98),rgba(209,237,216,.94)) !important;
        box-shadow:inset 0 2px 0 #fff,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:#075f29 !important;
    }
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button.is-vlt-menu-glass-active::before,
    .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu--dashboard > button[aria-pressed="true"]::before {
        background:rgba(237,248,240,.98) !important;
        box-shadow:inset 0 1px 0 #fff,0 0 0 2px rgba(22,129,58,.12) !important;
    }
}



/* ================================================================
 * V2.10.279 - Kontakte: groessere Bilder, groessere Namen
 * ================================================================
 *
 * Christian: "Die Eintraege sind mir zu klein und die Bilder auch.
 * Noch mal um die Haelfte mehr, nicht doppelt so viel."
 *
 * Vorher gemessen: Bild 42, Name 14, Zeile 63.
 * Jetzt:           Bild 60, Name 19, Zeile 83 bis 98.
 *
 * Zwei Dinge, die beim Vergroessern aufgefallen sind:
 *
 * 1. Die Zeile ist ein Raster, kein Flexkasten. Das Bild wurde zwar
 *    groesser, seine Spalte aber nicht - es ragte 7 Pixel in den Namen
 *    hinein. Deshalb steht die Spaltenbreite hier ausdruecklich mit.
 *
 * 2. Lange Namen wie "Mohamed Hakam Al Halabi" passen bei 19 Pixeln
 *    nicht mehr in eine Zeile. Sie brechen jetzt um, hoechstens auf
 *    zwei Zeilen. Abschneiden waere schlechter - der Name ist das,
 *    wonach man sucht.
 *
 * MERKSATZ: Etwas groesser machen heisst nicht, eine Zahl zu aendern.
 * Es heisst nachsehen, wer sonst noch von dieser Zahl lebt.
 */
@media screen and (max-width:760px){
    .vlt-klar-sheet__contacts > article {
        grid-template-columns:54px minmax(0,1fr) auto!important;
        column-gap:12px!important;
        padding:11px 0!important;
        align-items:center!important;
    }
    .vlt-klar-sheet__contacts .vlt-klar-contact-avatar {
        width:54px!important;
        height:54px!important;
        min-width:54px!important;
        font-size:18px!important;
    }
    .vlt-klar-sheet__contacts .vlt-klar-contact-identity {
        min-width:0!important;
    }
    .vlt-klar-sheet__contacts .vlt-klar-contact-identity > strong {
        display:-webkit-box!important;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        overflow:hidden!important;
        font-size:18px!important;
        line-height:1.2!important;
        white-space:normal!important;
        overflow-wrap:anywhere!important;
    }
    .vlt-klar-sheet__contacts .vlt-klar-contact-identity > small {
        font-size:12.5px!important;
        line-height:1.3!important;
    }
}

/* V2.10.280 - Die doppelte Ueberschrift im Kontaktblatt ist raus.
 *
 * Christian: "Darunter gibt es noch mal Kontakte, Ihre Ansprechpartner.
 * Das kann entfernt werden, das ist alles doppelt."
 *
 * Oben steht bereits: Kontakte / Deine Ansprechpartner im Ueberblick.
 * Der Block darunter sagte dasselbe noch einmal und kostete 81 Pixel.
 * Gemessen: Die Suchzeile sass bei 191, jetzt bei 110 - direkt unter
 * der Ueberschrift. Statt vier Kontakten sind sechs zu sehen.
 *
 * MERKSATZ: Platz gewinnt man nicht durch Zusammenruecken, sondern
 * durch Weglassen von dem, was zweimal dasteht.
 */
@media screen and (max-width:760px){
    .vlt-klar-sheet .vlt-klar-contact-intro {
        display:none!important;
    }
}

/* V2.10.283 - Suchzeile hoeher, mit Loesch-Kreuz.
 *
 * Christian: "Das obere Suchfeld ein bisschen erhoehen und ein x
 * reinsetzen, ungefaehr genauso gross wie die Zeile selber."
 *
 * 16 Pixel Schriftgroesse im Feld sind Absicht: Darunter zoomt iOS
 * beim Antippen die ganze Seite heran.
 */
@media screen and (max-width:760px){
    .vlt-klar-sheet__search {
        position:relative!important;
        min-height:38px!important;
        align-items:center!important;
        padding:5px 40px 5px 12px!important;
        margin:4px 14px 6px!important;
    }
    .vlt-klar-sheet__search input[type="search"] {
        height:34px!important;
        font-size:16px!important;
    }
    .vlt-klar-sheet__search input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance:none;
        appearance:none;
    }
    .vlt-klar-sheet__clear {
        position:absolute!important;
        top:50%!important;
        right:6px!important;
        transform:translateY(-50%)!important;
        width:30px!important;
        height:30px!important;
        border:0!important;
        border-radius:50%!important;
        background:#e6eae8!important;
        color:#5b666d!important;
        font-size:19px!important;
        line-height:1!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        cursor:pointer!important;
        padding:0!important;
    }
    .vlt-klar-sheet__clear[hidden] { display:none!important; }
}

/* V2.10.284 - Der Schalter fuer die Namensfolge, oben rechts. */
@media screen and (max-width:760px){
    .vlt-klar-namensfolge {
        display:flex!important;
        justify-content:center!important;
        margin:2px 0 10px!important;
    }
    .vlt-klar-namensfolge button {
        display:inline-flex!important;
        align-items:center!important;
        gap:7px!important;
        padding:11px 16px!important;
        border:1px solid #dfe4e1!important;
        border-radius:999px!important;
        background:#fff!important;
        color:#46525a!important;
        font-size:15px!important;
        font-weight:700!important;
        line-height:1!important;
        cursor:pointer!important;
        box-shadow:0 1px 4px rgba(25,33,38,.10)!important;
    }
    .vlt-klar-namensfolge button span[aria-hidden] {
        font-size:27px!important;
        line-height:1!important;
        color:#16813a!important;
        margin-top:-2px!important;
    }
}

/* V2.10.287 - Kontaktkarte weiter nach oben, Schliessen-Kreuz groesser.
 *
 * Christian: "Wenn man eine Karte oeffnet, bitte mehr nach oben ansetzen
 * unter der Kontakteleiste. Und das x groesser, wie das jetzt modern
 * beim iPhone ist."
 *
 * Gemessen: Die Karte sass 72 Pixel unter der Blattkante, obwohl der
 * Platz darueber leer war. Jetzt 16. Das Kreuz war 38 Pixel und fast
 * unsichtbar - jetzt 44 in einem grauen Kreis, so wie iOS es macht.
 *
 * Das Kreuz in der Suchzeile bleibt ausserdem immer stehen, nur blasser,
 * solange nichts eingetippt ist.
 */
@media screen and (max-width:760px){
    /* Gemessen: Der Ueberschriftblock endet 56 Pixel unter der
       Blattkante. Die Karte setzt vier Pixel darunter an - also genau
       unter "Kontakte" und dem Satz darunter, nicht darueber. */
    .vlt-klar-contact-card {
        top:60px!important;
    }
    .vlt-klar-contact-card__close {
        top:10px!important;
        right:10px!important;
        width:44px!important;
        height:44px!important;
        border:0!important;
        border-radius:50%!important;
        background:rgba(120,130,140,.16)!important;
        color:#3a444b!important;
        font-size:30px!important;
        line-height:1!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        padding:0!important;
    }
    .vlt-klar-sheet__clear.ist-leer {
        opacity:.35!important;
    }
}

/*
 * 10.08. - Christian (aus Goettingen gemeldet): "Bei dem kommen immer
 * Unterstriche unter dem Tool-Namen." Gemessen auf vl-goettingen.de:
 * .vlt-klar-brand stand auf text-decoration:underline - das kommt vom
 * Theme des Empfaengers, das Verweise unterstreicht. Unsere Kopfzeile ist
 * ein Verweis auf das Cockpit und erbt das. In Limburg faellt es nicht auf,
 * weil das Theme dort anders eingestellt ist.
 *
 * MERKSATZ: Was beim Empfaenger anders aussieht, liegt selten am Tool -
 * meistens an dem, was das Tool vom Theme erbt.
 */
.vlt-klar-brand,
.vlt-klar-brand:hover,
.vlt-klar-brand:focus,
.vlt-klar-brand *,
.vlt-mini-nav__brand,
.vlt-mini-nav__brand:hover,
.vlt-mini-nav__brand:focus,
.vlt-mini-nav__brand *,
.vlt-cockpit__brandbar-brand,
.vlt-cockpit__brandbar-brand *{
    text-decoration:none!important;
    border-bottom:0!important;
    box-shadow:none!important;
}

/*
 * 10.08. - Christian: Auf dem Gutschein stehen jetzt ALLE Produktgruppen.
 * Was der Kunde gewaehlt hat, traegt einen Haken; der Rest steht blasser
 * daneben - als Einladung, nicht als Auswahl.
 */
[data-vlt-voucher-products] li.is-open{opacity:.55}
[data-vlt-voucher-products] li.is-open i{color:#97a29b}
[data-vlt-voucher-products] li.is-checked i{color:#16813a}

/*
 * 10.08. - Christian: "WhatsApp links, SMS rechts, darunter E-Mail und
 * Teilen." Vier gleich grosse Felder in zwei Reihen; ausgeblendete Knoepfe
 * (fehlende Nummer oder Adresse) lassen ihren Platz einfach weg.
 */
.vlt-klar-calendar__voucher-actions{
    display:grid!important;grid-template-columns:1fr 1fr!important;
    gap:9px!important;align-items:stretch!important}
.vlt-klar-calendar__voucher-actions>button{width:100%!important;margin:0!important}

/*
 * 11.08. - Christian: "bei meine Ziele, bei Kontakte und bei Unterstuetzung
 * noch" - und bei den Einstellungen. Das Logo steht links neben der
 * Ueberschrift. Nur die vier Ueberschriften mit dem Zusatz --logo werden zur
 * Zeile; die uebrigen Ueberschriften bleiben unveraendert.
 */
.vlt-klar-titel-logo { display:block; flex:0 0 auto; line-height:0; }
.vlt-klar-titel-logo img { display:block; height:calc(34px * var(--vlt-tool-logo-scale,1)); width:auto; }
.vlt-klar-page-title--logo { display:flex; align-items:center; gap:10px; justify-content:flex-start; }
.vlt-klar-page-title--logo > div { display:flex; flex-direction:column; min-width:0; }
.vlt-klar-page-title--logo > button { margin-left:auto; }
.vlt-cockpit--mobile-klar .vlt-klar-sheet > header.vlt-klar-page-title--logo { justify-content:flex-start; gap:10px; }
.vlt-cockpit--mobile-klar .vlt-klar-sheet > header.vlt-klar-page-title--logo > button { margin-left:auto; }

/*
 * 11.08. - Christian: "bei Aktionen selber ist noch gar kein Heim- und
 * Hauszeichen". Das Logo steht links neben der Ueberschrift; das Kreuz
 * bleibt ganz rechts.
 */
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick header.vlt-cockpit-klar-quick__kopf { justify-content:flex-start; gap:10px; }
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick header.vlt-cockpit-klar-quick__kopf > button { margin-left:auto; }

/*
 * 11.08. - Christian: "Da ist das Logo kleiner als ueberall woanders. Das
 * Logo, da muessen wir die VL Limburg Toolschrift auch groesser machen mit
 * der Versionsnummer, dass das Logo gleich mitgeht ... genauso anpassen wie
 * die Ueberschriften, die auf den anderen Seiten sind."
 *
 * Die Marke im Cockpitkopf bekommt damit dieselben Werte wie eine
 * Seitenueberschrift: Logo 34 hoch, Name 21px/700, Zeile darunter 10px.
 * Der Regler --vlt-tool-logo-scale aus der Verwaltung wirkt weiter.
 */
.vlt-cockpit--mobile-klar .vlt-klar-brand { gap:10px; }
.vlt-cockpit--mobile-klar .vlt-klar-brand img { height:calc(34px * var(--vlt-tool-logo-scale, 1)) !important; max-width:calc(92px * var(--vlt-tool-logo-scale, 1)) !important; }
.vlt-cockpit--mobile-klar .vlt-klar-brand strong { color:#14291b; font-size:21px; font-weight:700; letter-spacing:0; line-height:1.15; }
.vlt-cockpit--mobile-klar .vlt-klar-brand small { color:#5f6c63; font-size:10px; line-height:1.2; }

/*
 * 11.08. - Christian: "Jetzt muss man nur noch den ganzen Banner hoeher
 * kriegen ... Es muss genau auf dieselbe Stelle sitzen wie vorne im
 * Cockpit. Lass uns lieber das Cockpit so anpassen, anstatt die anderen
 * alle."
 *
 * Gemessen: auf den Unterseiten sitzt das Logo 12 von links und 12 von
 * oben (bezogen auf den Anfang der App). Im Cockpit waren es 17 und 24.
 *   oben:  16 (Blattrand) + 7 (Kopfrand) = 23, Logo bei 24
 *   links: 12 (Blattrand) + 5 (Kopfrand) = 17
 * Also 12 weniger oben und 5 weniger links. Der Ausgleich fuer die
 * Statusleiste (--vlt-klar-page-top-offset) bleibt unangetastet.
 */
@media (max-width:760px) {
    .vlt-cockpit--mobile-klar {
        padding-top:calc(4px + var(--vlt-klar-page-top-offset,0px)) !important;
    }
    .vlt-cockpit--mobile-klar .vlt-klar-head { padding-left:0; }
}

/*
 * 11.08. - Christian: "Dann koennen wir den Knopf Auswertung und Ziele
 * bearbeiten ein kleines Stueck hoeher setzen, dass sie nicht mehr hinter
 * dem Plus stehen."
 *
 * Gemessen: die Knopfzeile endete bei 799, der Plusknopf beginnt bei 794 -
 * fuenf Pixel Ueberdeckung. 17 mehr Fussrand setzt die Zeile auf 729-781,
 * also 13 Pixel Luft ueber dem Plus.
 */
@media (max-width:760px) {
    .vlt-cockpit--mobile-klar .vlt-klar-goal-footer {
        padding-bottom:calc(105px + env(safe-area-inset-bottom));
    }
}

/*
 * 11.08. - Christian: "Wenn man unter Meine Ziele ist und dann auf
 * Auswertung klickt, da bitte auch noch ein Heim- und Hauslogo links
 * daneben setzen." Die Fokusregel weiter oben setzt display:block mit
 * hoeherer Staerke - deshalb hier noch einmal ausdruecklich.
 */
.vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused > .vlt-klar-focus-title.vlt-klar-page-title--logo {
    display:flex; align-items:center; gap:10px; justify-content:flex-start;
    /* Die Ansicht ist zweispaltig; ohne das hier bekaeme die Zeile nur eine
     * halbe Spalte und der Untertitel bricht um. */
    grid-column:1 / -1;
}
/*
 * 11.08. - Christian: "Wenn ich bei dem Vertriebskalender am Cockpit eine
 * oder vier Buttons klicke, dann hab ich ein kleines x oben rechts. Bitte
 * das auch genauso gross machen wie auf den anderen Seiten."
 *
 * Gemessen: das Kreuz im festen Kopf der Unterseiten ist 48 x 48 mit 30px
 * Zeichen. Die Blaetter im Cockpit hatten 34 x 34 mit 22px. Die Farbe
 * bleibt die gruene Fuellung der Blaetter.
 */
.vlt-cockpit--mobile-klar .vlt-klar-sheet > header button {
    width:48px; height:48px; flex:0 0 48px; font-size:30px;
}

/*
 * 11.08. - Christian: "Das muss bitte auch noch gross gemacht werden, das
 * kleine x." Gemeint ist das Kreuz im Rahmen der Auswertungstabelle. Es
 * stand auf 24 x 24 mit 15px Zeichen und bekommt jetzt dieselben 48 x 48
 * mit 30px wie alle anderen. Der Kopf der Tabelle ist 64 hoch, es passt
 * also ohne Verschiebung hinein.
 */
.vlt-cockpit--mobile-klar .vlt-klar-table-focus,
.vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused .vlt-klar-table-focus {
    width:36px; height:36px; border-radius:50%; font-size:24px;
}

/*
 * 11.08. - Nachtrag zum Kreuz in der Auswertungstabelle: das Zeichen selbst
 * steckt in einem <span> mit 9.5px - der Kreis war gross, das x blieb klein.
 * Ausserdem sass der Kreis mittig im Kopf und deckte damit die Spalte "Jahr"
 * ab (gemessen: 18 Pixel Ueberdeckung). Er steht jetzt oben im Kopf, die
 * Tabelle rueckt 18 Pixel nach, damit 17 Pixel Luft bleiben.
 */
.vlt-cockpit--mobile-klar .vlt-klar-table-focus span { font-size:24px!important; line-height:1; }
.vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused .vlt-klar-table-focus { top:0; transform:none; }
.vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused .vlt-klar-value-performance { margin-top:6px; }

/*
 * 11.08. - Christian: "Die Badges sind zu klein." - erst dreifach, dann
 * korrigiert: "das doppelte reicht." (Die vier Knoepfe unter dem
 * Vertriebskalender.)
 *
 * Gemessen: vorher 16 x 16 mit 8px Ziffer. Doppelt waren 32 x 32 - danach
 * Christian: "Bitte noch ein wenig kleiner, dann sind wir genau am Ziel."
 * Jetzt 28 x 28 mit 14px. Das Abzeichen rueckt von 50%+8 auf 50%+6, damit
 * es mit seinem weissen Rand nicht an der Knopfkante klebt.
 */
.vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu button b {
    top:3px; left:calc(50% + 6px);
    min-width:24px; height:24px; padding:0 5px;
    font-size:12px;
}

/*
 * 11.08. - Christian: "Unter Einstellungen, Verwaltung allgemein kann ich
 * das Logo in der Groesse veraendern ... Ich hoffe, dass diese Veraenderung
 * auf alle Masken gilt ... aber da muss auch gleich die Ueberschrift
 * mitwachsen ... gerade im Cockpit aktuell noch nicht."
 *
 * Der Regler steht als --vlt-tool-logo-scale an :root. Bisher hing nur das
 * Logo im Cockpitkopf daran, die Schrift daneben nicht. Jetzt haengen alle
 * Ueberschriften mit Logo am selben Regler. Untergrenzen sorgen dafuer,
 * dass die Schrift bei sehr kleinem Regler lesbar bleibt.
 */
.vlt-cockpit--mobile-klar .vlt-klar-brand strong { font-size:max(13px, calc(21px * var(--vlt-tool-logo-scale,1))); }
.vlt-cockpit--mobile-klar .vlt-klar-brand small { font-size:max(8px, calc(10px * var(--vlt-tool-logo-scale,1))); }
.vlt-cockpit--mobile-klar .vlt-klar-page-title--logo h2 { font-size:max(13px, calc(21px * var(--vlt-tool-logo-scale,1)))!important; }
.vlt-cockpit--mobile-klar .vlt-klar-page-title--logo p { font-size:max(8px, calc(10px * var(--vlt-tool-logo-scale,1))); }
/* Im Aktionsmenue setzt eine Regel mit ID die 21px - deshalb hier ebenso. */
#vlt-cockpit-quick-actions > header > strong { font-size:max(13px, calc(21px * var(--vlt-tool-logo-scale,1)))!important; }

/*
 * 11.08. - Christian: "Die Karte Willkommen zurueck bisschen erhoehen,
 * sodass man das Bild mehr sieht und die Begruessung mehr sieht."
 * Gemessen: Karte 70 hoch, Foto 42 x 42. Neu 96 und 62 x 62.
 */
/* 11.08. - Christian: "Die Willkommen-zurueck-Karte minimal in der Hoehe
   reduzieren, ein bisschen kompakter." Von 96 auf 84, Foto von 62 auf 54 -
   immer noch deutlich groesser als die 70/42 von vorher. */
.vlt-cockpit--mobile-klar .vlt-klar-welcome { min-height:84px; padding:11px 13px; }
.vlt-cockpit--mobile-klar .vlt-klar-sun { width:54px; height:54px; border-radius:15px; font-size:27px; }
.vlt-cockpit--mobile-klar .vlt-klar-welcome h2 { font-size:22px !important; }
.vlt-cockpit--mobile-klar .vlt-klar-welcome p { font-size:12.5px; }

/*
 * 11.08. - Christian: die Kopfleiste des Cockpits soll auch auf Meine Ziele,
 * Kontakte und Unterstuetzung stehen, "damit die Icons immer in derselben
 * Position sitzen".
 *
 * Die drei Ansichten lagen bisher UEBER der Leiste (top ≡ Overlaykante).
 * Jetzt beginnen sie darunter, die eine Leiste bleibt also stehen - mit
 * einem einzigen Kontosymbol, das gar nicht mehr verrutschen kann. Die
 * Hoehe der Leiste misst das Skript und legt sie als --vlt-klar-kopf-hoehe
 * ab; damit stimmt der Abstand auch bei geaendertem Logo-Regler.
 */
.vlt-cockpit--mobile-klar .vlt-klar-view--goals,
.vlt-cockpit--mobile-klar .vlt-klar-sheet[data-vlt-klar-sheet-panel="contacts"],
.vlt-cockpit--mobile-klar .vlt-klar-sheet[data-vlt-klar-sheet-panel="support"],
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick {
    top:calc(var(--vlt-klar-overlay-top, var(--vlt-klar-page-top-offset,0px)) + 4px + var(--vlt-klar-kopf-hoehe,55px))!important;
    /* Hoehe und Maximalhoehe waren auf die alte Oberkante gerechnet und
       ragten sonst unten aus dem Bild - die Unterkante bestimmt jetzt die
       Hoehe. */
    bottom:0!important;
    height:auto!important;
    max-height:none!important;
}
/* Die eigene Ueberschriftzeile der drei Ansichten waere jetzt doppelt -
   ihr Text wandert per Skript in die Leiste. */
.vlt-cockpit--mobile-klar .vlt-klar-view--goals > .vlt-klar-page-title--logo,
.vlt-cockpit--mobile-klar .vlt-klar-sheet[data-vlt-klar-sheet-panel="contacts"] > .vlt-klar-page-title--logo,
.vlt-cockpit--mobile-klar .vlt-klar-sheet[data-vlt-klar-sheet-panel="support"] > .vlt-klar-page-title--logo {
    display:none!important;
}
/* Im Aktionsmenue bleibt das Kreuz stehen, Logo und Name wandern in die
   Leiste darueber. */
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__kopf > .vlt-klar-titel-logo,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__kopf > strong {
    display:none!important;
}
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__kopf { justify-content:flex-end; min-height:48px; }

/*
 * 11.08. - Christian: "Bitte bei allen Seiten immer das x oben mit in die
 * Leiste reinbringen ... auch genauso gross das x. Zum Beispiel unter
 * Auftrag erfassen gefaellt es mir viel besser, vom x her und von der
 * Person zum Abmelden. Die sollte man ueberall uebertragen, auch aufm
 * Cockpit."
 *
 * Vorbild ist der feste Kopf der Unterseiten: beide Knoepfe 48 x 48, weiss,
 * duenner Rand, Kreuz 30px. Das Kreuz sitzt links neben der Person und
 * erscheint nur, wenn eine Ansicht offen ist - im Cockpit selbst gibt es
 * nichts zu schliessen.
 */
.vlt-cockpit--mobile-klar .vlt-klar-head { justify-content:flex-start; gap:10px; }
.vlt-cockpit--mobile-klar .vlt-klar-brand { margin-right:auto; min-width:0; }
.vlt-cockpit--mobile-klar .vlt-klar-kopf-zurueck,
.vlt-cockpit--mobile-klar .vlt-klar-account-menu > button.vlt-klar-account {
    display:flex; align-items:center; justify-content:center;
    width:48px; height:48px; flex:0 0 48px; padding:0;
    border:1px solid #dfe4e1; border-radius:50%;
    background:#fff; color:#192126; cursor:pointer;
}
.vlt-cockpit--mobile-klar .vlt-klar-kopf-zurueck { font-size:30px; line-height:1; }
.vlt-cockpit--mobile-klar .vlt-klar-kopf-zurueck[hidden] { display:none; }
.vlt-cockpit--mobile-klar .vlt-klar-account-menu > button.vlt-klar-account svg { width:26px; height:26px; }
/* Das Kreuz im Aktionsmenue ist damit doppelt. */
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__kopf { display:none!important; }

/*
 * 11.08. - Christian: "Die, die in Bearbeitung sind, die kriegen dann gelbe
 * Symbole in der Mitte, die Icons, und 'In Bearbeitung' steht dann auch in
 * gelb da, also in dem gelben Banner. Und wir machen noch ein kleines
 * Schild dabei."
 *
 * Die Kacheln waren komplett grau gefiltert. Der Graufilter faellt weg,
 * Symbol und Banner werden gelb, und im Banner steht das Baustellenschild
 * (als Zeichnung, damit kein Bild nachgeladen werden muss).
 */
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung {
    filter:none;
    opacity:1;
    background:#fffaeb;
    border-color:#f0d68a;
    color:#7a6a3c;
}
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung i,
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung i svg,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung i,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung i svg {
    color:#e8a400;
    stroke:currentColor;
}
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung small,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung small {
    color:#8a6f28;
}
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung em,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung em {
    display:flex;
    align-items:center;
    gap:3px;
    max-width:98px;
    padding:1px 6px 1px 4px;
    background:#f5b301;
    color:#2f2200;
    font-size:7.5px;
}
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung em::before,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung em::before {
    content:"";
    flex:0 0 12px;
    width:12px;
    height:12px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Cpath%20d%3D'M32%208%2058%2052%206%2052%20Z'%20fill%3D'%23F5C400'%20stroke%3D'%23141414'%20stroke-width%3D'5'%20stroke-linejoin%3D'round'%2F%3E%3Ccircle%20cx%3D'25'%20cy%3D'27'%20r%3D'4.2'%20fill%3D'%23141414'%2F%3E%3Cpath%20d%3D'M25%2032.5%2030%2041'%20stroke%3D'%23141414'%20stroke-width%3D'3.6'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M30%2041%2025%2049'%20stroke%3D'%23141414'%20stroke-width%3D'3.6'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M30%2041%2036%2048'%20stroke%3D'%23141414'%20stroke-width%3D'3.6'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M20%2030%2040%2042'%20stroke%3D'%23141414'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M38%2049%2044%2041%2054%2049%20Z'%20fill%3D'%23141414'%2F%3E%3C%2Fsvg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}

/* Nachtrag: die gruene Klammer links und der gruene Kreis hinter dem Symbol
   gehoerten noch zur alten Optik - beides jetzt ebenfalls gelb. */
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung {
    background:#fffdf6!important;
    border-left-color:#e8a400!important;
    border-color:#f2e0ae;
    border-left-width:2px;
}
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung::before,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung::before {
    background:rgba(253,240,206,.92)!important;
}

/*
 * 11.08. - Christian: "Das Schild noch mal separat nach links an der freien
 * Flaeche oberhalb. In Bearbeitung bleibt einfach rechts stehen."
 */
.vlt-cockpit-klar-quick__grid .vlt-quick-schild {
    position:absolute;
    top:7px;
    left:8px;
    width:30px;
    height:30px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Cpath%20d%3D'M32%208%2058%2052%206%2052%20Z'%20fill%3D'%23F5C400'%20stroke%3D'%23141414'%20stroke-width%3D'5'%20stroke-linejoin%3D'round'%2F%3E%3Ccircle%20cx%3D'25'%20cy%3D'27'%20r%3D'4.2'%20fill%3D'%23141414'%2F%3E%3Cpath%20d%3D'M25%2032.5%2030%2041'%20stroke%3D'%23141414'%20stroke-width%3D'3.6'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M30%2041%2025%2049'%20stroke%3D'%23141414'%20stroke-width%3D'3.6'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M30%2041%2036%2048'%20stroke%3D'%23141414'%20stroke-width%3D'3.6'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M20%2030%2040%2042'%20stroke%3D'%23141414'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M38%2049%2044%2041%2054%2049%20Z'%20fill%3D'%23141414'%2F%3E%3C%2Fsvg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    pointer-events:none;
}

/* Die gruene Klammer links ist ein eigenes ::after - die faerbt sich nicht
   ueber border-left. Deshalb hier ausdruecklich. */
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung::after,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung::after {
    background:rgba(232,164,0,.62)!important;
}

/* Die gruene Klammer kommt aus einer Regel mit :not() und !important -
   deshalb hier mit derselben Bauform und einer Klasse mehr. */
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > span.is-bearbeitung:not(.vlt-cockpit-klar-quick__glass),
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > span.is-bearbeitung:not(.vlt-cockpit-klar-quick__glass) {
    border-left-color:#e8a400!important;
}

/*
 * 11.08. - Der Schleier beim Aktualisieren ueber das Logo. Er liegt nur
 * ueber der Cockpithuelle, damit die Ansicht schon aufgehen kann, bevor
 * etwas zu sehen ist. Sichtbarkeit bleibt erhalten (nur Deckkraft), sonst
 * koennte das Skript die Hoehen nicht messen.
 */
html.vlt-klar-wiederherstellung .vlt-cockpit-klar-shell { opacity:0!important; }
html.vlt-klar-wiederherstellung .vlt-cockpit-klar-shell * { transition:none!important; animation:none!important; }

/*
 * 11.08. - Christian: "Das Baustellenschild bitte noch groesser. Und In
 * Bearbeitung muss besser lesbar sein ... vielleicht setzen wir das Schild
 * einfach mitten auf die Logostelle und In Bearbeitung darueber. Die Knoepfe
 * sollen nicht groesser werden, und man muss noch lesen koennen, worum es
 * geht."
 *
 * Neue Aufteilung der Kachel (Hoehe bleibt 78, Inhalt 65 hoch):
 *   In Bearbeitung  15   (vorher 16 als kleines Schildchen in der Ecke)
 *   Abstand          2
 *   Baustellenschild 34   (steht jetzt an der Stelle des Symbols)
 *   Abstand          2
 *   Name der Kachel  11
 * Summe 64 - passt ohne die Kachel zu veraendern.
 */
.vlt-cockpit-klar-quick__grid > .is-bearbeitung { gap:2px!important; }
.vlt-cockpit-klar-quick__grid > .is-bearbeitung em {
    order:-1!important;
    position:static!important;
    top:auto!important; right:auto!important; bottom:auto!important; left:auto!important;
    display:inline-flex!important;
    max-width:none!important;
    padding:1px 8px!important;
    font-size:9px!important;
}
/* Das kleine Schild im Banner faellt weg - das grosse steht jetzt darunter. */
.vlt-cockpit-klar-quick__grid > .is-bearbeitung em::before { display:none!important; }
/* Das Schild in der Ecke ebenso. */
.vlt-cockpit-klar-quick__grid > .is-bearbeitung .vlt-quick-schild { display:none!important; }
/* Der Kreis hinter dem Symbol weicht dem Schild. */
.vlt-cockpit-klar-quick__grid > .is-bearbeitung::before { display:none!important; }
.vlt-cockpit-klar-quick__grid > .is-bearbeitung i {
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Cpath%20d%3D'M32%208%2058%2052%206%2052%20Z'%20fill%3D'%23F5C400'%20stroke%3D'%23141414'%20stroke-width%3D'5'%20stroke-linejoin%3D'round'%2F%3E%3Ccircle%20cx%3D'25'%20cy%3D'27'%20r%3D'4.2'%20fill%3D'%23141414'%2F%3E%3Cpath%20d%3D'M25%2032.5%2030%2041'%20stroke%3D'%23141414'%20stroke-width%3D'3.6'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M30%2041%2025%2049'%20stroke%3D'%23141414'%20stroke-width%3D'3.6'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M30%2041%2036%2048'%20stroke%3D'%23141414'%20stroke-width%3D'3.6'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M20%2030%2040%2042'%20stroke%3D'%23141414'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M38%2049%2044%2041%2054%2049%20Z'%20fill%3D'%23141414'%2F%3E%3C%2Fsvg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:contain!important;
}
.vlt-cockpit-klar-quick__grid > .is-bearbeitung i svg { display:none!important; }
.vlt-cockpit-klar-quick__grid > .is-bearbeitung small { font-size:11px!important; }

/*
 * 11.08. - Christian: "Die dicke schwarze Umrandung vom Baustellenschild
 * etwas duenner, das sieht ein bisschen penetrant aus. Und In Bearbeitung
 * ist schwer lesbar - vielleicht ist der dunkle gelbe Knopf daran schuld."
 *
 * Schild: Randstaerke von 5 auf 3,2 (Figur von 3,6 auf 2,8). Dadurch wirkt
 * das gelbe Feld groesser und das Schild ruhiger.
 *
 * Band: dunkles Vollgelb mit fast schwarzer Schrift gibt bei 9px zu wenig
 * Trennung - beide Farben sind kraeftig und liegen dicht beieinander. Jetzt
 * heller Grund mit dunkelbrauner Schrift und schmalem Rand: derselbe gelbe
 * Charakter, aber ein klarer Hell-Dunkel-Sprung.
 */
.vlt-cockpit-klar-quick__grid > .is-bearbeitung i {
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Cpath%20d%3D'M32%209%2057%2051%207%2051%20Z'%20fill%3D'%23F5C400'%20stroke%3D'%231b1b1b'%20stroke-width%3D'3.2'%20stroke-linejoin%3D'round'%2F%3E%3Ccircle%20cx%3D'25'%20cy%3D'27.5'%20r%3D'3.4'%20fill%3D'%231b1b1b'%2F%3E%3Cpath%20d%3D'M25%2032%2030%2040.5'%20stroke%3D'%231b1b1b'%20stroke-width%3D'2.8'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M30%2040.5%2025.5%2047.5'%20stroke%3D'%231b1b1b'%20stroke-width%3D'2.8'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M30%2040.5%2035.5%2046.5'%20stroke%3D'%231b1b1b'%20stroke-width%3D'2.8'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M20.5%2030.5%2039%2041.5'%20stroke%3D'%231b1b1b'%20stroke-width%3D'2.3'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M38%2047.5%2043.5%2040.5%2052.5%2047.5%20Z'%20fill%3D'%231b1b1b'%2F%3E%3C%2Fsvg%3E")!important;
}
.vlt-cockpit-klar-quick__grid > .is-bearbeitung em {
    background:#fdf0c6!important;
    color:#6b4a00!important;
    border:1px solid #e6c470!important;
    font-size:9.5px!important;
    font-weight:850!important;
    letter-spacing:.02em!important;
    padding:0 8px!important;
}

/* ==== ENTWURF WASSERZEICHEN - ANFANG =========================
 * 11.08. - Christian: "Aehnlich wie bei den Pokalen, dass wir die hinten
 * als Wasserzeichen durchschimmern lassen - das grosse Baustellenschild auf
 * die ganze Karte setzen, aber im Hintergrund, und dann In Bearbeitung
 * sauber platzieren."
 *
 * Der Stand davor (Schild mittig statt Symbol) ist Fassung 2.10.417. Um
 * dorthin zurueckzukehren, reicht es, diesen Block bis ENDE zu entfernen.
 *
 * Aufteilung: Band 14 + 2 + Symbol 34 + 2 + Name 11 ≡ 63 von 65.
 * Das Symbol der Kachel kommt zurueck, damit man sieht, worum es geht;
 * das Schild liegt als Wasserzeichen darunter.
 */
.vlt-cockpit-klar-quick__grid > .is-bearbeitung .vlt-quick-schild {
    display:block!important;
    position:absolute!important;
    top:0!important; right:0!important; bottom:0!important; left:0!important;
    z-index:0!important;
    width:auto!important;
    height:auto!important;
    background-size:auto 92%!important;
    background-position:center!important;
    opacity:.17!important;
    pointer-events:none!important;
}
.vlt-cockpit-klar-quick__grid > .is-bearbeitung i,
.vlt-cockpit-klar-quick__grid > .is-bearbeitung small,
.vlt-cockpit-klar-quick__grid > .is-bearbeitung em {
    position:relative;
    z-index:1;
}
/* Das Symbol der Kachel wieder sichtbar, etwas kleiner damit alles passt. */
.vlt-cockpit-klar-quick__grid > .is-bearbeitung i {
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    background-image:none!important;
}
.vlt-cockpit-klar-quick__grid > .is-bearbeitung i svg { display:block!important; width:20px; height:20px; }
/* Der Kreis hinter dem Symbol kommt zurueck, in Gelb. */
.vlt-cockpit-klar-quick__grid > .is-bearbeitung::before {
    display:block!important;
    width:34px!important;
    height:34px!important;
}
/* ==== ENTWURF WASSERZEICHEN - ENDE =========================== */

/* Nachtrag zum Wasserzeichen: das Schild mit schwarzem Rand wurde bei
   17 Prozent grau und legte sich als Schleier ueber das Symbol. Fuers
   Wasserzeichen daher eine eigene Zeichnung ohne Schwarz - volles Gelb mit
   brauner Figur. Es sitzt jetzt rechts aussen, damit das Symbol in der
   Mitte frei bleibt. */
.vlt-cockpit-klar-quick__grid > .is-bearbeitung .vlt-quick-schild {
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Cpath%20d%3D'M32%207%2059%2053%205%2053%20Z'%20fill%3D'%23E8A400'%2F%3E%3Ccircle%20cx%3D'25'%20cy%3D'27.5'%20r%3D'3.6'%20fill%3D'%237a5200'%2F%3E%3Cpath%20d%3D'M25%2032%2030%2040.5'%20stroke%3D'%237a5200'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M30%2040.5%2025.5%2047.5'%20stroke%3D'%237a5200'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M30%2040.5%2035.5%2046.5'%20stroke%3D'%237a5200'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M20.5%2030.5%2039%2041.5'%20stroke%3D'%237a5200'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M38%2047.5%2043.5%2040.5%2052.5%2047.5%20Z'%20fill%3D'%237a5200'%2F%3E%3C%2Fsvg%3E")!important;
    background-size:auto 118%!important;
    background-position:right -14px center!important;
    opacity:.30!important;
}
.vlt-cockpit-klar-quick__grid > .is-bearbeitung::before { display:none!important; }

/*
 * 11.08. - Christian: "Lass uns das Symbol in der Mitte wegmachen, sodass
 * das Schild alleine erkennbar ist. Dann koennen wir das Schild auch ein
 * bisschen kraeftiger darstellen."
 *
 * Das Symbol der Kachel entfaellt. Band nach oben, Name nach unten, das
 * Schild steht frei dazwischen - jetzt bei 50 Prozent statt 30, weil es
 * nichts mehr ueberdeckt.
 */
.vlt-cockpit-klar-quick__grid > .is-bearbeitung i { display:none!important; }
.vlt-cockpit-klar-quick__grid > .is-bearbeitung { justify-content:space-between!important; }
.vlt-cockpit-klar-quick__grid > .is-bearbeitung .vlt-quick-schild {
    background-size:auto 62%!important;
    background-position:center 52%!important;
    opacity:.5!important;
}

/* ==== ENTWURF ABSPERRBAND - ANFANG ===========================
 * 11.08. - Christian: "Vielleicht machen wir die Buttons wie ein
 * Absperrband von der Baustelle, komplett durch den ganzen Button, und dann
 * In Bearbeitung. Und den Namen natuerlich drunter stehen lassen. Es soll
 * einfach nur noch Baustelle aussehen."
 *
 * Die ganze Kachel wird zum Absperrband: schraege Streifen in Gelb und
 * Anthrazit. Darueber liegt ein weisser Schleier, sonst waere die Schrift
 * auf den dunklen Streifen nicht zu lesen. Band und Name bekommen jeweils
 * eine eigene helle Flaeche, damit beide sauber stehen.
 *
 * Frueherer Stand mit Schild als Wasserzeichen: Fassung 2.10.420.
 * Frueherer Stand mit Schild als festes Symbol: Fassung 2.10.417.
 * Zum Zurueckholen diesen Block bis ENDE entfernen.
 */
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung {
    background-color:#ffffff!important;
    background-image:
        linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)),
        repeating-linear-gradient(-45deg, #f5c400 0 11px, #23231f 11px 22px)!important;
    border-color:#e3c25f!important;
    border-left-color:#23231f!important;
}
/* Das Schild tritt hinter dem Band zurueck. */
.vlt-cockpit-klar-quick__grid > .is-bearbeitung .vlt-quick-schild { display:none!important; }
.vlt-cockpit-klar-quick__grid > .is-bearbeitung em {
    background:#ffffff!important;
    border:1px solid #c9b268!important;
    color:#2b2008!important;
    box-shadow:0 1px 3px rgba(0,0,0,.14)!important;
}
.vlt-cockpit-klar-quick__grid > .is-bearbeitung small {
    padding:1px 9px!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.94)!important;
    color:#2b2008!important;
    box-shadow:0 1px 3px rgba(0,0,0,.12)!important;
}
/* ==== ENTWURF ABSPERRBAND - ENDE ============================= */

/*
 * 11.08. - Christian: "Dann koennen wir in der Mitte wieder die kleinen
 * Symbole darstellen, da ist ein sicherer Platz dafuer. Also die
 * Originallogos, nicht das Baustellenschild."
 *
 * Das Symbol der Kachel kommt zurueck und bekommt - wie die beiden
 * Schriftfelder - eine eigene helle Scheibe, damit es auf den Streifen
 * sauber steht.
 * Aufteilung: Band 16 + Symbol 34 + Name 14 ≡ 64 von 65 verfuegbaren Pixeln.
 */
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung i,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung i {
    display:grid!important;
    place-items:center!important;
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    border-radius:50%!important;
    background-image:none!important;
    background-color:rgba(255,255,255,.95)!important;
    box-shadow:0 1px 3px rgba(0,0,0,.14)!important;
    color:#33260a!important;
}
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung i svg,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung i svg {
    display:block!important;
    width:19px!important;
    height:19px!important;
    color:#33260a!important;
    stroke:currentColor!important;
}

/*
 * 11.08. - Christian: "Bleiben wir noch irgendwie so einen schraegen
 * Schriftzug drueber machen, nach dem Motto 'in Kuerze wieder zur
 * Verfuegung'."
 *
 * Ein Eckband oben links, schraeg ueber die Ecke. Der Platz reicht fuer
 * zwei kurze Woerter - der ganze Satz haette bei 202 Pixel Kachelbreite
 * nicht lesbar draufgepasst. Als Traeger dient das <b>, das vorher das
 * Schild hielt; es ist also kein neues Element noetig.
 */
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung {
    overflow:hidden!important;
}
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung .vlt-quick-schild,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung .vlt-quick-schild {
    display:block!important;
    position:absolute!important;
    top:11px!important;
    left:-27px!important;
    right:auto!important;
    bottom:auto!important;
    z-index:2!important;
    width:92px!important;
    height:14px!important;
    transform:rotate(-45deg)!important;
    background-image:none!important;
    background-color:#23231f!important;
    color:#ffd84d!important;
    font-size:6.5px!important;
    font-weight:850!important;
    font-style:normal!important;
    letter-spacing:.1em!important;
    line-height:14px!important;
    text-align:center!important;
    opacity:1!important;
    box-shadow:0 1px 3px rgba(0,0,0,.28)!important;
}
.vlt-cockpit--mobile-elegant .vlt-cockpit-klar-quick__grid > .is-bearbeitung .vlt-quick-schild::before,
.vlt-cockpit--mobile-klar .vlt-cockpit-klar-quick__grid > .is-bearbeitung .vlt-quick-schild::before {
    content:"IN KÜRZE";
}

/*
 * 11.08. - Christian: "Den Sortierbutton kompakter machen, nach links
 * ruecken, und rechts daneben einen Knopf, der auswaehlt: nur mein Bezirk
 * oder alle."
 *
 * Die Zeile stand mittig und der Knopf war 15px/11px gepolstert. Jetzt
 * beide Knoepfe kompakt und linksbuendig nebeneinander.
 */
.vlt-klar-namensfolge {
    justify-content:flex-start!important;
    gap:8px!important;
    margin:2px 14px 8px!important;
}
.vlt-klar-namensfolge button {
    gap:5px!important;
    padding:7px 11px!important;
    font-size:12px!important;
}
.vlt-klar-namensfolge button span[aria-hidden] {
    font-size:18px!important;
}
/* Der Bezirksknopf: hell, solange alle zu sehen sind - gruen, sobald nur
   der eigene Bezirk gezeigt wird. */
.vlt-klar-namensfolge button.vlt-klar-bezirksfilter[aria-pressed="true"] {
    background:#16813a!important;
    border-color:#16813a!important;
    color:#fff!important;
}
.vlt-klar-namensfolge button.vlt-klar-bezirksfilter[aria-pressed="true"] span[aria-hidden] {
    color:#fff!important;
}
/* Nur der eigene Bezirk: alles andere wird ausgeblendet. Die Suche und die
   Buchstabenleiste blenden weiterhin unabhaengig davon aus. */
.vlt-klar-sheet__contacts.is-nur-bezirk > article:not(.vlt-mein-bezirk) {
    display:none!important;
}

/* 11.08. - Aus einem Umschalter wurden zwei Knoepfe: Mein Bezirk | Alle.
   Der aktive steht gruen, der andere hell - so ist ohne Nachdenken zu
   sehen, welche Liste gerade gezeigt wird. */
.vlt-klar-namensfolge button.vlt-klar-bezirksfilter {
    padding:7px 10px!important;
    font-size:11.5px!important;
}

/*
 * 11.08. - Christian: "Die Knoepfe oben haben so eine Hinterlegung wie ein
 * 3D-Objekt. Bitte wieder plan machen, so wie bei Auftrag erfassen oder
 * Auftragsverwaltung. Einfach die Buttons oben clean halten, auf allen
 * Seiten."
 *
 * Gemessen: der Kontoknopf trug sechs uebereinandergelegte Schatten und
 * einen Verlauf. Das Kreuz daneben war schon plan. Beide sehen jetzt aus
 * wie im festen Kopf der Unterseiten: weiss, ein duenner Rand, sonst nichts.
 */
.vlt-cockpit--mobile-klar .vlt-klar-account-menu > button.vlt-klar-account,
.vlt-cockpit--mobile-elegant .vlt-klar-account-menu > button.vlt-klar-account,
.vlt-cockpit--mobile-klar .vlt-klar-kopf-zurueck,
.vlt-cockpit--mobile-elegant .vlt-klar-kopf-zurueck {
    background-image:none!important;
    background-color:#fff!important;
    box-shadow:none!important;
    filter:none!important;
    border:1px solid #dfe4e1!important;
}

/*
 * 11.08. - Christian: "Alle Ueberschriften in Grossschrift - Meine Ziele,
 * Kontakte, Unterstuetzung, Aktionen, Auftrag erfassen, Auftragsverwaltung
 * und so weiter. VL Limburg bleibt so, wie ich es in der Konfiguration
 * eingebe."
 *
 * Die Leiste traegt is-ansicht, sobald ein Seitenname darin steht. Der
 * Toolname im Cockpit bleibt damit unangetastet.
 */
.vlt-cockpit--mobile-klar .vlt-klar-head.is-ansicht .vlt-klar-brand strong,
.vlt-cockpit--mobile-elegant .vlt-klar-head.is-ansicht .vlt-klar-brand strong {
    text-transform:uppercase;
    letter-spacing:.02em;
}
/* Ueberschriften der Blaetter (Einstellungen, Auswertung) ebenso. */
.vlt-cockpit--mobile-klar .vlt-klar-page-title--logo h2,
.vlt-cockpit--mobile-elegant .vlt-klar-page-title--logo h2 {
    text-transform:uppercase;
    letter-spacing:.02em;
}

/*
 * 11.08. - Christian: "Rest Monat und Rest Jahr unter dem grossen Kalender
 * bitte als einzelne Karten bauen, sodass sie aussehen wie das 3D-Kalender-
 * blatt - Karte eins und Karte zwei, die jeweils ein bisschen herausstechen."
 *
 * Die Tiefe ist dieselbe Rezeptur wie beim Kalenderblatt, nur eine Stufe
 * flacher (4 statt 5 Pixel Versatz), weil die Karten mit 41 Pixel deutlich
 * niedriger sind als das Blatt mit 138.
 *
 * Der Block darf nicht wachsen: er sitzt in einem Raster von 414 x 90 in
 * einem Abschnitt fester Hoehe. Deshalb geben die Karten innen Rand ab, was
 * sie an Abstand untereinander dazubekommen. Rechts bleiben 7 Pixel frei,
 * damit der Schatten Platz hat und nicht an der Kante abgeschnitten wird.
 */
.vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest,
.vlt-cockpit--mobile-klar .vlt-elegant-overview__rest {
    gap:7px!important;
    padding-right:0!important;
    align-content:center!important;
    justify-items:center!important;
}
.vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div,
.vlt-cockpit--mobile-klar .vlt-elegant-overview__rest > div {
    /* 11.08. - Christian: "Die Karten sollen genauso breit sein wie der
       Kalender selber." Der Wert kommt gemessen aus dem Skript. */
    width:var(--vlt-rest-breite, 137px)!important;
    box-sizing:border-box!important;
    padding:2px 9px!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:
        inset 0 2px 0 #fff,
        inset -1px -2px 0 rgba(158,178,163,.34),
        2px 2px 0 #edf1ee,
        4px 4px 0 #c7cec8,
        6px 7px 9px rgba(20,47,31,.17),
        0 0 0 1px rgba(22,129,58,.18)!important;
}

/*
 * 11.08. - Christian: "Die zwei Karten ein bisschen verdrehen - Rest Monat
 * leicht nach links, die darunter leicht nach rechts, einfach so ein
 * bisschen Style, als waeren sie hingelegt worden."
 *
 * 1,6 Grad reichen fuer den Eindruck. Mehr geht nicht: bei 137 Pixel Breite
 * waechst die Karte je Grad um gut 2,4 Pixel in der Hoehe, und zwischen den
 * beiden liegen nur 7 Pixel. Der Block bleibt so bei seinen 89 Pixeln.
 */
/*
 * Christian, dritter Anlauf: "Stell dir vor, beide Schilder sind auf eine
 * Stange montiert und das eine dreht sich leicht nach links auf der Stange
 * und das andere leicht nach rechts."
 *
 * Also keine Neigung in der Flaeche, sondern eine Drehung um die senkrechte
 * Achse - die Karte dreht sich in den Raum hinein. Dafuer braucht der Block
 * eine Fluchtpunkt-Tiefe; die Karten bleiben dabei exakt auf ihrer Achse
 * stehen und werden nur perspektivisch schmaler. Die Hoehe aendert sich
 * nicht, der Block bleibt also bei seinen 89 Pixeln.
 */
/*
 * Christian: "Die sind jetzt verschoben, eins nach rechts, eins nach links -
 * die stehen nicht mehr parallel uebereinander."
 *
 * Ursache: die Fluchtpunkt-Tiefe stand am Block, ihr Fluchtpunkt lag damit
 * in der Mitte ZWISCHEN beiden Karten. Die obere wurde von unten, die
 * untere von oben gesehen - dadurch verschoben sich ihre sichtbaren Kanten
 * gegeneinander (gemessen 260 gegen 256).
 *
 * Jetzt bringt jede Karte ihre eigene Tiefe mit. Damit liegt der Fluchtpunkt
 * in ihrer eigenen Mitte, beide werden gleich verkuerzt und stehen exakt
 * uebereinander - nur eben die eine nach links, die andere nach rechts
 * gedreht.
 */
.vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div:first-child,
.vlt-cockpit--mobile-klar .vlt-elegant-overview__rest > div:first-child {
    transform:none!important;
}
.vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div:last-child,
.vlt-cockpit--mobile-klar .vlt-elegant-overview__rest > div:last-child {
    transform:none!important;
}

/* Nachtrag: die kurze Tiefe von 520px liess die zugewandte Haelfte staerker
   wachsen als die abgewandte schrumpfte - dadurch wirkten die Silhouetten
   gegeneinander verschoben (gemessen 260 gegen 256). Mit 1600px faellt die
   Verkuerzung sanfter aus, die Kanten bleiben buendig, die Drehung ist
   dafuer etwas groesser (16 statt 13 Grad). */

/* Nachtrag 2: eine Drehung nach links laesst die zugewandte Haelfte nach
   links wachsen, nach rechts entsprechend andersherum - die Silhouetten
   standen dadurch 2 Pixel gegeneinander. Das wird jetzt mit je einem Pixel
   Gegenschub ausgeglichen, danach stehen beide Karten buendig uebereinander.
   Der Schub steht links in der Kette und wirkt damit im Bildschirmraum,
   also nach der Drehung. */

/*
 * 11.08. - Christian schickt eine Skizze: zwei flache Schilder, sauber
 * uebereinander, an einer sichtbaren Stange montiert. Gewaehlt hat er
 * "mit sichtbarer Stange".
 *
 * Also keine Drehung mehr - die Karten stehen frontal und deckungsgleich.
 * Dahinter laeuft eine schmale Stange durch, die im Zwischenraum der beiden
 * Karten sichtbar wird und oben ein Stueck heraussteht. Platz dafuer ist
 * gemessen: zwischen Kalenderblatt (endet bei 400) und Block (beginnt bei
 * 416) liegen 16 Pixel, unten bis zur Abschnittskante nur 2.
 */
.vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest,
.vlt-cockpit--mobile-klar .vlt-elegant-overview__rest {
    position:relative!important;
}
.vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest::before,
.vlt-cockpit--mobile-klar .vlt-elegant-overview__rest::before {
    content:"";
    position:absolute;
    z-index:0;
    top:-9px;
    bottom:-9px;
    left:50%;
    width:9px;
    margin-left:-4.5px;
    border-radius:4px;
    background:linear-gradient(90deg,#8c969b 0%,#c9d1d5 22%,#f4f7f8 44%,#dfe5e8 58%,#a6b0b5 78%,#7f898e 100%);
    box-shadow:0 1px 2px rgba(20,42,28,.22);
}
.vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div,
.vlt-cockpit--mobile-klar .vlt-elegant-overview__rest > div {
    position:relative;
    z-index:1;
}

/*
 * 11.08. - Christian: "Vielleicht noch ein Minimal mehr drehen gegenseitig,
 * dann haben wir's."
 *
 * Also die Drehung um die Stange zurueck, aber sehr zurueckhaltend: 6 Grad
 * statt der 16 von vorhin. Bei 6 Grad betraegt der seitliche Versatz der
 * Silhouetten weniger als einen Pixel - die Karten stehen also weiterhin
 * buendig uebereinander, und die Stange dahinter bleibt senkrecht stehen.
 */
.vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div:first-child,
.vlt-cockpit--mobile-klar .vlt-elegant-overview__rest > div:first-child {
    transform:translateX(-4.8px) perspective(340px) rotateY(-22deg)!important;
    transform-origin:center!important;
}
.vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest > div:last-child,
.vlt-cockpit--mobile-klar .vlt-elegant-overview__rest > div:last-child {
    transform:translateX(4.8px) perspective(340px) rotateY(22deg)!important;
    transform-origin:center!important;
}

/*
 * 11.08. - Christian: "Gerne kannst du die Kachel Aktueller Vertriebsmonat
 * nach unten ein wenig erhoehen, sodass wir die Stange unten auch noch
 * sehen."
 *
 * Der Abschnitt stand auf zwei festen Zeilen: 187 fuer den oberen Teil mit
 * Kalenderblatt, 90 fuer den Block mit den beiden Karten. Die zweite Zeile
 * bekommt 14 Pixel dazu; die Karten bleiben mittig darin stehen, sodass die
 * Stange oben UND unten herausschaut. Der Bereich darunter hat Platz: er
 * endete bei 760, die Ansicht reicht bis 879.
 */
.vlt-cockpit--mobile-elegant section.vlt-elegant-overview,
.vlt-cockpit--mobile-klar section.vlt-elegant-overview {
    grid-template-rows:187px 104px!important;
}

/*
 * 11.08. - Christian: "Ueber Rest Monat gibt es auch noch eine feine
 * Trennlinie. Die koennen wir entfernen, die brauchen wir da nicht mehr."
 *
 * Gemessen: 1px solid #e6ebe7 als obere Kante des Detailbereichs. Sie hatte
 * frueher die beiden Bereiche getrennt - seit die Karten eigene Schilder mit
 * Schatten sind, trennt die Optik von selbst.
 *
 * Damit die Stange unten wirklich sichtbar wird, darf der Bereich nicht
 * beschneiden: die eigene Zeilenhoehe von 89 wird gelockert, damit die
 * 104 Pixel des Abschnitts auch ankommen.
 */
.vlt-cockpit--mobile-elegant .vlt-elegant-overview__details,
.vlt-cockpit--mobile-klar .vlt-elegant-overview__details {
    border-top:0!important;
    grid-template-rows:1fr!important;
    align-self:stretch!important;
    overflow:visible!important;
}

/* 11.08. - Christian: "Der Effekt ist mir noch nicht deutlich genug."
   Von 6 auf 20 Grad, dazu eine kuerzere Tiefe (1200 statt 1600), damit die
   Drehung wirklich raeumlich wirkt. Der seitliche Versatz waechst dadurch
   auf rund 2 Pixel je Karte und wird wie gehabt gegengeschoben, damit beide
   buendig uebereinander stehen bleiben. */

/* 11.08. - Christian sah keine Drehung: mit 1200px Tiefe stand der Betrachter
   so weit weg, dass die Karte nur schmaler wurde statt schraeg zu stehen.
   Jetzt 340px - damit entsteht ein echtes Trapez, die zugewandte Kante wird
   sichtbar hoeher als die abgewandte (gemessen 45 statt 41 Pixel Hoehe der
   Silhouette). Der seitliche Versatz waechst dadurch auf 7 Pixel und wird
   mit je 4,8 Pixel gegengeschoben. */

/*
 * 11.08. - Christian: "Unter Meine Ziele sind Auswertung und Ziele
 * bearbeiten nach oben gewandert. Die sollten unterhalb stehen bleiben,
 * kurz ueber dem Plus."
 *
 * Ursache: seit die Ansicht unter der Kopfleiste beginnt statt sie zu
 * ueberdecken, ist sie hoeher als ihr Inhalt. Das Raster packt seine Zeilen
 * oben zusammen, der Fussbereich blieb also direkt unter der letzten Karte
 * haengen (gemessen: Knopfzeile bei 539, Plusknopf bei 854).
 *
 * Jetzt haengt der Fussbereich fest an der Unterkante der Ansicht. Der
 * Innenrand von 113 Pixeln haelt ihn vom Plusknopf frei: von der Unterkante
 * bis zur Oberkante des Plus sind es 101, dazu 12 Pixel Luft.
 */
.vlt-cockpit--mobile-klar .vlt-klar-view--goals > .vlt-klar-goal-footer {
    position:absolute!important;
    left:12px!important;
    right:12px!important;
    bottom:0!important;
    padding-bottom:calc(113px + env(safe-area-inset-bottom))!important;
}

/*
 * 11.08. - Christian zur Auswertung: eigene Kopfleiste wie ueberall (Logo,
 * Kreuz, Abmelden), das Kreuz auf der Karte etwas tiefer, damit es die obere
 * Linie nicht streift, und der KW-Schalter kann weg.
 *
 * Die Ansicht beginnt jetzt unter der Leiste statt sie zu ueberdecken -
 * dieselbe Rechnung wie bei Meine Ziele, Kontakte und Unterstuetzung.
 */
.vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused {
    top:calc(var(--vlt-klar-overlay-top, var(--vlt-klar-page-top-offset,0px)) + 4px + var(--vlt-klar-kopf-hoehe,55px))!important;
    bottom:0!important;
    height:auto!important;
    max-height:none!important;
}
/* Die eigene Ueberschrift steht jetzt in der Leiste. */
.vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused > .vlt-klar-focus-title {
    display:none!important;
}
/* Das Kreuz der Karte rutscht 8 Pixel nach unten. */
.vlt-cockpit--mobile-klar .vlt-klar-view--main.is-table-focused .vlt-klar-table-focus {
    top:8px!important;
}
/* Der KW-Schalter entfaellt; die Kalenderwoche bleibt als Spaltenname stehen. */
.vlt-cockpit--mobile-klar .vlt-klar-week-switch button {
    display:none!important;
}
.vlt-cockpit--mobile-klar .vlt-klar-week-switch {
    justify-content:center!important;
    gap:0!important;
}


/* 15.08. - Christian: "Derjenige, der eingeladen wurde zum Teilen, der muss
   ja wissen, dass der andere mit dem geteilt hat." Dritter Klappbereich in
   der Freigabe-Karte - deshalb sitzt er im Formular und nicht daneben,
   sonst schrumpft die Karte auf die halbe Breite. */
.vlt-klar-calendar__eingehend-hinweis{margin:0 0 10px;font-size:13px;line-height:1.4;opacity:.75}
.vlt-klar-calendar__eingehend-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vlt-klar-calendar__eingehend-liste>li{border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:10px 12px;background:rgba(255,255,255,.55)}
.vlt-klar-calendar__eingehend-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vlt-klar-calendar__eingehend-kopf strong{font-size:15px}
.vlt-klar-calendar__eingehend-kopf em{font-style:normal;font-size:12px;font-weight:700;white-space:nowrap;padding:3px 8px;border-radius:999px;background:#eaf2ec;color:#2c5a3c}
.vlt-klar-calendar__eingehend-liste>li>small{display:block;margin-top:2px;font-size:12px;opacity:.7}
.vlt-klar-calendar__eingehend-liste details{margin-top:8px}
.vlt-klar-calendar__eingehend-liste summary{cursor:pointer;font-size:13px;font-weight:600}
.vlt-klar-calendar__eingehend-liste details ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.vlt-klar-calendar__eingehend-liste details li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.vlt-klar-calendar__eingehend-liste details em{font-style:normal;font-size:11px;opacity:.7;white-space:nowrap}
.vlt-klar-calendar__quarter-time select option:disabled{color:#9aa0a6}


/* 15.08. - Umschalten in einen freigegebenen Kalender: Name antippen, oben
   steht dann, wessen Kalender man sieht, darunter der Rueckweg. */
.vlt-klar-calendar__eingehend-oeffnen{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;font:inherit;font-size:15px;font-weight:700;color:#16813a;text-align:left;text-decoration:underline;cursor:pointer}
.vlt-klar-calendar__eingehend-oeffnen:active{opacity:.6}
.vlt-klar-calendar__zurueck{appearance:none;-webkit-appearance:none;display:block;margin:3px 0 0;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:#16813a;cursor:pointer;text-align:left}
.vlt-klar-calendar__zurueck[hidden]{display:none!important}
.vlt-klar-calendar__add[hidden]{display:none!important}


/* 15.08. - Christian: "Vielleicht sollte man hier drueber schreiben, Kalender
   von, dass man sieht, in welchem Kalender man gerade drin ist." Die vorhandene
   Kopfzeile ist auf dem Handy per clip-path fuer Vorleseprogramme versteckt -
   deshalb dieses eigene, sichtbare Band unter der Werkzeugleiste. */
.vlt-klar-calendar__fremdband{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:10px 12px;border-radius:12px;background:#009039;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.vlt-klar-calendar__fremdband[hidden]{display:none!important}
.vlt-klar-calendar__fremdband > span{display:flex;flex-direction:column;min-width:0}
.vlt-klar-calendar__fremdband small{font-size:12px;line-height:1.2;opacity:.9;letter-spacing:.02em}
.vlt-klar-calendar__fremdband strong{font-size:17px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlt-klar-calendar__fremdband button{flex:0 0 auto;appearance:none;-webkit-appearance:none;border:2px solid rgba(255,255,255,.85);border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:14px;font-weight:700;padding:8px 15px;cursor:pointer}
.vlt-klar-calendar__fremdband button:active{background:rgba(255,255,255,.2)}

/* 15.08. - Christian: "Die Auswahl der Namen ist unwahrscheinlich klein
   dargestellt ... wenn ein aelterer Mitarbeiter unterwegs ist, ist das schwierig
   zu lesen." Die Freigabekarte lag bei 9 bis 12 px. */
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-panel > summary{font-size:16px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-panel > summary > small{font-size:14px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-add select,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-add button{font-size:15px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article strong,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-available article strong{font-size:15px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article small,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-available article small{font-size:12px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__shared-current article button,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-available article button{font-size:13px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__share-save-note{font-size:13px;line-height:1.4}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing > form > header h3{font-size:20px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__eingehend-oeffnen{font-size:17px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__eingehend-kopf em{font-size:13px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__eingehend-hinweis{font-size:14px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__eingehend-liste details summary{font-size:14px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__eingehend-liste details li{font-size:14px}


/* 15.08. - Christian: "Mitarbeiter auswaehlen, dieser kleine Dropdown und nur
   ansehen, koennen wir auch ein bisschen groesser darstellen, weil das ist kaum
   zu sehen, dass da was ist." Gemessen: Suchfeld 28 px hoch bei 2 px Polster,
   die beiden Auswahlfelder zu zweit nebeneinander mit 10 bis 12 px Schrift.
   Die alten Regeln stehen mit drei Klassen im Selektor - meine frueheren
   Aufschlaege hatten nur zwei und sind deshalb untergegangen. */
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-search{min-height:52px;padding:8px 12px;border-width:1.5px;border-radius:12px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-search input{min-height:44px;padding:6px;font-size:17px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-search > span{font-size:20px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-add{grid-template-columns:1fr;gap:10px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-add select{min-height:56px;padding:10px 14px;font-size:17px;font-weight:600}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-add button{min-height:54px;font-size:17px;font-weight:700}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-panel > summary{font-size:17px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-panel > summary > small{font-size:15px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__shared-current article strong,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-available article strong{font-size:16px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__shared-current article small,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-available article small{font-size:13px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__shared-current article button,
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-available article button{font-size:14px;min-height:40px}


/* 15.08. - Suchfeld wieder etwas flacher, dafuer Trefferliste direkt darunter. */
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-search{min-height:44px;padding:5px 12px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-search input{min-height:34px;padding:4px;font-size:16px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-treffer{display:flex;flex-direction:column;gap:6px;margin:8px 0 0}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-treffer[hidden]{display:none!important}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-treffer button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;box-sizing:border-box;min-height:52px;padding:8px 14px;border:1px solid #b9d4c0;border-radius:10px;background:#fff;color:#173f27;text-align:left;cursor:pointer}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-treffer button:active{background:#eaf2ec}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-treffer strong{font-size:17px;font-weight:700;line-height:1.25}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-treffer small{font-size:13px;opacity:.7}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-treffer p{margin:0;padding:10px 4px;font-size:15px;opacity:.7}


/* 15.08. - Die Trefferliste darf die Karte nicht sprengen: bei vielen Treffern
   scrollt sie in sich, damit Auswahl und Hinzufuegen erreichbar bleiben. */
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-treffer{max-height:38vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:2px}


/* 15.08. - Ohne Tastatur auswaehlen: das Suchfeld verschwindet auf dem Handy,
   stattdessen Buchstabenleiste und die vollstaendige Namensliste. */
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-search{display:none!important}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-buchstaben{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 9px}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-buchstaben button{min-width:44px;min-height:44px;padding:0 11px;box-sizing:border-box;border:1px solid #b9d4c0;border-radius:10px;background:#fff;color:#173f27;font:inherit;font-size:16px;font-weight:700;line-height:1;cursor:pointer}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-buchstaben button.is-an{background:#009039;border-color:#009039;color:#fff}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-treffer{max-height:44vh}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-treffer button.is-gewaehlt{background:#eaf2ec;border-color:#009039;box-shadow:inset 0 0 0 2px #009039}


/* 15.08. - Buchstabenleiste in einer Zeile, seitlich wischbar: drei Zeilen
   haben 144 px Hoehe gekostet, eine Zeile braucht 44. */
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-buchstaben{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:2px;scrollbar-width:none}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-buchstaben::-webkit-scrollbar{display:none}
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing .vlt-klar-calendar__share-buchstaben button{flex:0 0 auto}


/* VLT-TASTATUR-ANFANG */
/* ===========================================================================
   Eigene Bildschirmtastatur - 15.08.
   Fester Streifen am unteren Rand. Er gehoert zur Seite, deshalb verschiebt
   er nichts und es kann nichts springen.
   =========================================================================== */
.vlt-tastatur{position:fixed;left:0;right:0;bottom:0;z-index:2147483000;box-sizing:border-box;padding:6px 5px calc(6px + env(safe-area-inset-bottom));background:#eef3ef;border-top:1px solid #cfe0d3;box-shadow:0 -10px 28px rgba(20,55,31,.18);-webkit-user-select:none;user-select:none;touch-action:manipulation}
.vlt-tastatur[hidden]{display:none!important}
.vlt-tastatur__kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 6px;font-size:13px;font-weight:700;color:#2c5a3c}
.vlt-tastatur__kopf-knoepfe{display:flex;gap:6px}
.vlt-tastatur__tasten{display:flex;flex-direction:column;gap:5px}
.vlt-tastatur__reihe{display:flex;gap:5px}
.vlt-tastatur__taste{flex:1 1 0;min-width:0;min-height:46px;padding:0 2px;box-sizing:border-box;border:1px solid #cfd8d2;border-radius:8px;background:#fff;color:#14261b;font:inherit;font-size:19px;font-weight:600;line-height:1;cursor:pointer;-webkit-appearance:none;appearance:none}
.vlt-tastatur__taste:active{background:#dbe7de}
.vlt-tastatur__taste.ist-hell{background:#dbe3dd;font-size:16px;font-weight:700}
.vlt-tastatur__taste.ist-an{background:#c2d8c8;box-shadow:inset 0 0 0 2px #009039}
.vlt-tastatur__taste.ist-gruen{background:#009039;border-color:#009039;color:#fff;font-size:16px;font-weight:700}
.vlt-tastatur__taste.ist-klein{flex:0 0 auto;min-height:32px;padding:0 10px;font-size:13px;font-weight:700;background:#fff;border-radius:999px}
.vlt-tastatur__reihe--unten .vlt-tastatur__taste{font-size:16px;font-weight:700}
@media (max-height:700px){.vlt-tastatur__taste{min-height:40px;font-size:17px}}


/* 15.08. - Alle Buchstabentasten gleich breit, kuerzere Reihen mittig -
   wie auf einer richtigen Tastatur. Vorher waren die Reihen mit elf Tasten
   spuerbar schmaler als die Reihe mit acht. Dazu groessere Schrift. */
.vlt-tastatur__reihe--eng{justify-content:center}
.vlt-tastatur__reihe--eng > .vlt-tastatur__taste{flex:0 0 calc((100% - 45px) / 10)}
.vlt-tastatur__taste{min-height:50px;font-size:22px}
.vlt-tastatur__reihe--unten .vlt-tastatur__taste{font-size:17px}
.vlt-tastatur__taste.ist-hell{font-size:18px}
.vlt-tastatur__taste.ist-gruen{font-size:17px}
.vlt-tastatur__taste.ist-klein{min-height:32px;font-size:13px}
@media (max-height:700px){.vlt-tastatur__taste{min-height:42px;font-size:19px}}


/* 15.08. - Anordnung wie die deutsche iPhone-Tastatur: elf Buchstaben je Reihe,
   Umschalten links und Loeschen rechts in der dritten Reihe, beide breiter.
   Die Buchstabentasten sind alle exakt gleich breit. */
.vlt-tastatur__reihe--eng{justify-content:center}
.vlt-tastatur__reihe--eng > .vlt-tastatur__taste{flex:0 0 calc((100% - 50px) / 11)}
.vlt-tastatur__reihe--eng > .vlt-tastatur__taste.ist-breit{flex:1 1 auto;min-width:0}
.vlt-tastatur__reihe--unten > .vlt-tastatur__taste{flex:0 0 auto;min-width:58px;padding:0 8px}
.vlt-tastatur__reihe--unten > .vlt-tastatur__taste.ist-leer{flex:1 1 auto;min-width:0}
.vlt-tastatur__taste{min-height:52px;font-size:22px}
.vlt-tastatur__reihe--unten .vlt-tastatur__taste{font-size:17px}
.vlt-tastatur__taste.ist-klein{flex:0 0 auto;min-height:30px;min-width:0;padding:0 9px;font-size:12px}
@media (max-height:700px){.vlt-tastatur__taste{min-height:44px;font-size:19px}}


/* Umschalttaste festgestellt (zweimal getippt) deutlich anders zeigen. */
.vlt-tastatur__taste.ist-fest{background:#009039;border-color:#009039;color:#fff;box-shadow:none}


/* 15.08. - Rueckweg von der Systemtastatur zur eigenen, immer sichtbar. */
.vlt-tastatur-zurueck{position:fixed;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:2147483000;padding:10px 14px;border:0;border-radius:999px;background:#009039;color:#fff;font:inherit;font-size:14px;font-weight:700;box-shadow:0 6px 18px rgba(20,55,31,.3);cursor:pointer}
.vlt-tastatur-zurueck[hidden]{display:none!important}
.vlt-tastatur__taste.ist-warnung{background:#b3261e;border-color:#b3261e;color:#fff}


/* 15.08. - Grosse ABC-Tasten: sechs je Reihe statt elf. Die Taste wird damit
   von 29 auf rund 57 px breit und die Schrift auf 27 px. */
.vlt-tastatur__reihe--gross > .vlt-tastatur__taste{flex:0 0 calc((100% - 25px) / 6)}
.vlt-tastatur.ist-gross .vlt-tastatur__taste{min-height:56px;font-size:27px}
.vlt-tastatur.ist-gross .vlt-tastatur__reihe--unten .vlt-tastatur__taste{font-size:18px}
.vlt-tastatur.ist-gross .vlt-tastatur__taste.ist-klein{min-height:30px;font-size:12px}
.vlt-tastatur__taste.ist-wahl{background:#eaf2ec;color:#2c5a3c}
@media (max-height:700px){.vlt-tastatur.ist-gross .vlt-tastatur__taste{min-height:48px;font-size:23px}}


/* Grosse Tasten etwas flacher, damit der Streifen nicht zwei Drittel des
   Bildschirms frisst. Gemessen: 537 px waren zu viel. */
.vlt-tastatur.ist-gross .vlt-tastatur__taste{min-height:52px;font-size:26px}
.vlt-tastatur.ist-gross .vlt-tastatur__reihe--unten .vlt-tastatur__taste{min-width:52px;font-size:17px}
.vlt-tastatur.ist-gross .vlt-tastatur__taste.ist-klein{min-height:28px;font-size:12px}


/* Kopfzeile der Tastatur: Feldname einzeilig kuerzen, damit die Knoepfe
   nicht aus der Zeile fallen. Gemessen: "Name des Kunden (optional)" hat den
   Kopf auf vier Zeilen aufgeblaeht und die iPhone-Taste rausgedraengt. */
.vlt-tastatur__kopf{flex-wrap:nowrap}
.vlt-tastatur__kopf > [data-vlt-tastatur-titel]{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlt-tastatur__kopf-knoepfe{flex:0 0 auto;flex-wrap:nowrap}


/* 15.08. - Christian: "Die Zeile auch etwas erhoehen, auch fuer die Aelteren."
   Die Kopfzeile traegt jetzt nur noch die vier Aktionen und teilt die Breite
   gleichmaessig auf. Der Feldname davor ist entfallen. */
.vlt-tastatur__kopf{padding:0 2px 7px}
.vlt-tastatur__kopf-knoepfe{flex:1 1 auto;width:100%;gap:5px}
.vlt-tastatur__taste.ist-klein{flex:1 1 0;min-height:44px;min-width:0;padding:0 6px;font-size:15px;font-weight:700;border:1px solid #cfd8d2;border-radius:10px}
.vlt-tastatur.ist-gross .vlt-tastatur__taste.ist-klein{min-height:46px;font-size:16px}
@media (max-height:700px){.vlt-tastatur__taste.ist-klein{min-height:38px;font-size:14px}}


/* Beschriftungen der Leiste einzeilig halten - "Ausblenden" und
   "Kleine Tasten" sind vorher auf zwei Zeilen umgebrochen. */
.vlt-tastatur__taste.ist-klein{white-space:nowrap;font-size:14px;padding:0 4px}
.vlt-tastatur.ist-gross .vlt-tastatur__taste.ist-klein{font-size:14px}


/* 15.08. - Christian: die Loeschtaste war zu klein. Sie bekommt jetzt in
   beiden Anordnungen deutlich mehr Breite als die Nachbartasten. */
.vlt-tastatur__reihe--unten > .vlt-tastatur__taste{flex:1 1 0;min-width:0;padding:0 4px}
.vlt-tastatur__reihe--unten > .vlt-tastatur__taste.ist-leer{flex:2 1 0}
.vlt-tastatur__reihe--unten > .vlt-tastatur__taste.ist-loeschen{flex:2.2 1 0;font-size:24px}
.vlt-tastatur__reihe--unten > .vlt-tastatur__taste.ist-gruen{flex:1.6 1 0}
.vlt-tastatur__reihe--eng > .vlt-tastatur__taste.ist-loeschen{flex:1.8 1 auto;font-size:24px}


/* Die Mindestbreite aus der Grossanordnung hat die Gewichtung ausgehebelt -
   die Loeschtaste kam nur von 52 auf 68 px. Ohne Mindestbreite greifen die
   Gewichte und sie wird rund 85 px breit. */
.vlt-tastatur.ist-gross .vlt-tastatur__reihe--unten .vlt-tastatur__taste{min-width:0}


/* Schalter fuer die Auftragserfassung - der Rueckweg, den Christian sich
   gewuenscht hat. Er steht immer im Formular, in beiden Zustaenden sichtbar. */
.vlt-tastatur-schalter{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border:1px solid #d7e3d9;border-radius:12px;background:#f4f8f5;font-size:16px;line-height:1.3}
.vlt-tastatur-schalter__text{font-weight:700;color:#1f3d2b}
.vlt-tastatur-schalter__knopf{-webkit-appearance:none;appearance:none;border:1px solid #009039;border-radius:999px;background:#fff;color:#009039;font-size:16px;font-weight:700;padding:10px 16px;min-height:44px;line-height:1.2;cursor:pointer}
.vlt-tastatur-schalter__knopf:active{background:#009039;color:#fff}


/* ═══════════════════════════════════════════════════════════════════════════
   15.08. - Anordnung wie beim iPhone, in beiden Groessen
   Die Reihen haben 10 / 9 / 7 Tasten. Statt fester Breiten teilen sich die
   Tasten die Reihe - dadurch werden sie automatisch so gross, wie die Reihe
   es hergibt, und "Tasten gross" muss an der Anordnung nichts mehr aendern.
   ═══════════════════════════════════════════════════════════════════════════ */
.vlt-tastatur__reihe--eng > .vlt-tastatur__taste{flex:1 1 0;min-width:0;padding-left:0;padding-right:0}
.vlt-tastatur__reihe--eng > .vlt-tastatur__taste.ist-breit{flex:1.6 1 0}
.vlt-tastatur__reihe--eng > .vlt-tastatur__taste.ist-loeschen{flex:1.6 1 0}
.vlt-tastatur__reihe--mitte{padding-left:5.5%;padding-right:5.5%}
/* Gross heisst jetzt: hoehere Tasten und groessere Schrift - nicht andere Reihen. */
.vlt-tastatur.ist-gross .vlt-tastatur__reihe .vlt-tastatur__taste{min-height:62px;font-size:26px}
.vlt-tastatur.ist-gross .vlt-tastatur__kopf .vlt-tastatur__taste{min-height:46px;font-size:16px}

/* Die Pfeile zum Feldwechsel in der Kopfleiste. */
.vlt-tastatur__kopf .vlt-tastatur__taste.ist-pfeil{flex:0 0 48px;min-width:48px;font-size:24px;font-weight:700;line-height:1}
.vlt-tastatur__taste[disabled]{opacity:.32}

/* Untertasten auf langen Fingerdruck. */
.vlt-tastatur__unter{position:absolute;transform:translate(-50%,-100%);display:flex;gap:6px;padding:8px;border-radius:16px;background:#fff;border:1px solid #cfd8d2;box-shadow:0 10px 26px rgba(0,0,0,.28);z-index:6}
.vlt-tastatur__unter-taste{min-width:60px;min-height:60px;font-size:28px;flex:0 0 auto}

/* Sechs Knoepfe in der Kopfleiste: die Textknoepfe duerfen schrumpfen,
   die beiden Pfeile behalten ihre Breite. */
.vlt-tastatur__kopf .vlt-tastatur__taste.ist-klein{flex:1 1 auto;min-width:0;padding-left:8px;padding-right:8px;font-size:15px;white-space:nowrap}
.vlt-tastatur__kopf .vlt-tastatur__taste.ist-pfeil{flex:0 0 44px;min-width:44px;padding-left:0;padding-right:0;font-size:24px;font-weight:700;line-height:1}
.vlt-tastatur__kopf-knoepfe{gap:5px}


/* 15.08. - Christian: "Die Pfeiltaste ins naechste Feld breiter gestalten.
   Dafuer den linken Knopf als Tastatursymbol mit Pfeil nach unten. Deutet an,
   dass die Taste die Tastatur ausblendet."
   Der linke Knopf traegt jetzt nur noch ein Zeichen und braucht kaum Breite.
   Die gewonnene Breite bekommt der Pfeil nach vorn - er wird am haeufigsten
   gedrueckt, weil man sich mit ihm durch die ganze Maske arbeitet. */
.vlt-tastatur__kopf .vlt-tastatur__taste.ist-verbergen{flex:0 0 46px;min-width:46px;padding-left:0;padding-right:0;display:flex;align-items:center;justify-content:center}
.vlt-tastatur__kopf .vlt-tastatur__taste.ist-verbergen svg{display:block;width:21px;height:21px}
/* Breite des Vorwaertspfeils: siehe Block 2.10.622 weiter unten. */
@media (max-width:360px){.vlt-tastatur__kopf .vlt-tastatur__taste.ist-verbergen{flex:0 0 40px;min-width:40px}}


/* 15.08. - Christian: "Fuer Kopieren und Einfuegen koennen wir auch ein Symbol
   bauen. Damit haben wir grosse Pfeile links und rechts, um in die naechste
   oder vorherige Zelle zu springen."
   Vier Knoepfe tragen nur noch ein Zeichen und bleiben schmal. Die beiden
   Pfeile teilen sich den ganzen Rest der Zeile; der nach vorn behaelt den
   groesseren Anteil, weil man sich mit ihm durch die Maske arbeitet. */
.vlt-tastatur__kopf .vlt-tastatur__taste.ist-sinnbild{flex:0 0 46px;min-width:46px;padding-left:0;padding-right:0;display:flex;align-items:center;justify-content:center}
.vlt-tastatur__kopf .vlt-tastatur__taste.ist-sinnbild svg{display:block;width:21px;height:21px}
/* Der Gross/Klein-Knopf traegt ab 2.10.625 ein Zeichen und wird wie die
   anderen Zeichenknoepfe behandelt - siehe .ist-sinnbild. */
.vlt-tastatur__kopf .vlt-tastatur__taste.ist-sinnbild svg text{font-family:inherit}
.vlt-tastatur__kopf .vlt-tastatur__taste.ist-pfeil{flex:1 1 0;min-width:64px;font-size:30px;line-height:1}
.vlt-tastatur__kopf .vlt-tastatur__taste.ist-pfeil-vor{flex:1 1 0;min-width:64px;font-size:30px;line-height:1}
.vlt-tastatur.ist-gross .vlt-tastatur__kopf .vlt-tastatur__taste.ist-pfeil{flex:1 1 0;min-width:70px;font-size:32px}
.vlt-tastatur.ist-gross .vlt-tastatur__kopf .vlt-tastatur__taste.ist-pfeil-vor{flex:1 1 0;min-width:70px;font-size:32px}
@media (max-width:360px){
.vlt-tastatur__kopf .vlt-tastatur__taste.ist-sinnbild{flex:0 0 40px;min-width:40px}
.vlt-tastatur__kopf .vlt-tastatur__taste.ist-pfeil{flex:1 1 0;min-width:52px}
.vlt-tastatur__kopf .vlt-tastatur__taste.ist-pfeil-vor{flex:1 1 0;min-width:52px}
}


/* 15.08. - Christian: "Lass uns im Tastaturfeld die Leertaste etwas breiter
   gestalten und die Punkttaste so breit wie die Umschalttaste, dann passt es."
   Gemessen auf 406 px (iPhone-Breite): Umschalttaste 55 px, Punkttaste 71 px,
   Leertaste 132 px. Der Punkt geht auf Umschalt-Breite zurueck, was er abgibt,
   bekommt die Leertaste. */
.vlt-tastatur__reihe--unten > .vlt-tastatur__taste.ist-punkt{flex:0.76 1 0}
.vlt-tastatur__reihe--unten > .vlt-tastatur__taste.ist-leer{flex:2.3 1 0}

/* 15.08. - Christian: "Ausserdem ist die untere Sonderzeichenzeile groesser als
   die Buchstaben selbst." Gemessen: 62 px je Zeichen gegen 35 px je Buchstabe.
   Keine Taste dieser Zeile ist jetzt breiter als die Umschalttaste; weil dann
   Platz uebrig bleibt, steht die Zeile mittig unter den Buchstaben. */
.vlt-tastatur__reihe--zusatz{justify-content:center}
.vlt-tastatur__reihe--eng.vlt-tastatur__reihe--zusatz > .vlt-tastatur__taste.ist-zusatzzeichen{flex:0 1 55px;max-width:55px;min-width:0;font-size:16px;padding-left:2px;padding-right:2px}
/* In der Gross-Ansicht aendern sich nur Hoehe und Schrift, nicht die Breiten -
   die Umschalttaste bleibt 55 px. Deshalb hier keine eigene Breite. */
.vlt-tastatur.ist-gross .vlt-tastatur__reihe--eng.vlt-tastatur__reihe--zusatz > .vlt-tastatur__taste.ist-zusatzzeichen{font-size:17px}


/* 16.08. - Christian: "Den Datepicker groesser darstellen."
   Die Groesse des Kalenders am Telefon steht in assets/css/order-form.css -
   dort tragen die Regeln eine Klasse mehr (.vlt-mobile-calendar) und gewinnen
   deshalb. Ein Satz Regeln an dieser Stelle hat nur verloren; er ist entfernt,
   damit es fuer eine Groesse genau einen Zustaendigen gibt. */


/* 17.08. - Christian: "Man sieht keinen Cursor in der Postleitzahlenzelle,
   deswegen kommt man durcheinander und glaubt nicht, dass man schon da ist."
   Das Telefon zeichnet den Schreibstrich nur, wenn der Finger selbst ins Feld
   getippt hat - bei einem Sprung nicht. Also zeigen wir es selbst: ein gruener
   Ring um das aktive Feld, der beim Ankommen zweimal pulst. */
input.vlt-tastatur-feld-aktiv,textarea.vlt-tastatur-feld-aktiv,select.vlt-tastatur-feld-aktiv{
border-color:#2f6f3e !important;
caret-color:#2f6f3e;
box-shadow:0 0 0 3px rgba(47,111,62,.25);
animation:vlt-feld-puls .45s ease-out 1
}
/* 17.08. - Christian: "Die Zellen muessen nicht mehr aufblinken. Die blinken
   ja zwei-, dreimal auf. Einmal kurz aufblinken reicht total."
   Also nur noch EIN kurzer Aufschlag statt zweier langer - der Ring bleibt
   danach ruhig stehen. */
@keyframes vlt-feld-puls{
0%{box-shadow:0 0 0 0 rgba(47,111,62,.5)}
100%{box-shadow:0 0 0 3px rgba(47,111,62,.32)}
}


/* Unser eigener Schreibstrich - siehe cockpit.js. Er liegt ueber der Seite,
   faengt keine Beruehrung ab und blinkt wie der des Geraets. */
.vlt-tastatur-strich{position:fixed;width:2px;background:#2f6f3e;border-radius:1px;z-index:2147482000;pointer-events:none;animation:vlt-strich-blinken 1.06s steps(1,end) infinite}
@keyframes vlt-strich-blinken{0%,49%{opacity:1}50%,100%{opacity:0}}


/* 17.08. - Christian: "Die Buchstaben unten drunter im grossen Zahlenfeld koennen
   ruhig niedriger werden, damit das ganze Tastaturverhaeltnis weiter nach oben
   geht. Die Zahlen eigentlich auch, aber nicht viel."
   Gemessen vorher: sieben Reihen zu je 52 px plus 51 px Kopf ergaben 458 px.
   Die Ziffern gehen auf 46 px, die beiden Buchstabenreihen auf 36 px. */
.vlt-tastatur.ist-ziffern .vlt-tastatur__taste{min-height:46px}
.vlt-tastatur.ist-ziffern.ist-gross .vlt-tastatur__taste{min-height:48px}
.vlt-tastatur.ist-ziffern .vlt-tastatur__reihe--flach > .vlt-tastatur__taste{min-height:36px;font-size:16px}
.vlt-tastatur.ist-ziffern.ist-gross .vlt-tastatur__reihe--flach > .vlt-tastatur__taste{min-height:38px;font-size:17px}


/* 17.08. - Der Knopf "Nr.-Zusatz" klappt a bis z auf. Die Beschriftung ist
   laenger als eine Ziffer, also kleinere Schrift und kein Umbruch. Ist die
   Klappe offen, sieht man es dem Knopf an. */
.vlt-tastatur.ist-ziffern .vlt-tastatur__taste.ist-zusatzknopf{font-size:16px;white-space:nowrap;padding:0 4px}
.vlt-tastatur.ist-ziffern .vlt-tastatur__taste.ist-zusatzknopf.ist-an{background:#2f6f3e;color:#fff;border-color:#2f6f3e}

/* 16.08. - Christian: E-Mail-Endungen wurden zu gross angezeigt (nur 2 in der Vorschau). Eigene, kleinere Groesse - die Strassenliste bleibt gross. */
.vlt-cockpit--mobile-klar .vlt-klar-calendar__email-suggestions button { min-height:44px; padding:10px; font-size:15px; }

/* VLT-GRUPPEN-OPTIK-ANFANG
   16.08. - Christians Bildschirmfoto: der Gruppen-Abschnitt quetschte sich als
   zweite Spalte NEBEN das Freigaben-Formular (die __sharing-Sektion ist eine
   Flex-Zeile). Hier: Zeile darf umbrechen, der Gruppen-Abschnitt nimmt immer
   die volle Breite auf einer eigenen Zeile darunter, und die Formulare in den
   Gruppen-Tafeln bekommen eine ordentliche Spaltenordnung. */
.vlt-klar-calendar__sharing { flex-wrap: wrap; }
.vlt-klar-calendar__gruppen { flex: 1 1 100%; width: 100%; min-width: 0; margin-top: 14px; }
.vlt-klar-calendar__gruppen h3 { margin: 0 0 6px; font-size: 17px; }
.vlt-klar-calendar__gruppen-hinweis { margin: 0 0 10px; font-size: 13px; line-height: 1.45; opacity: .85; }
.vlt-klar-calendar__gruppen .vlt-klar-calendar__share-panel { width: 100%; margin: 0 0 10px; }
.vlt-klar-calendar__gruppen-form { display: flex; flex-direction: column; gap: 10px; }
.vlt-klar-calendar__gruppen-name { display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.vlt-klar-calendar__gruppen-name input { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid rgba(20, 60, 40, .35); border-radius: 10px; font-size: 15px; }
.vlt-klar-calendar__gruppen-mitglieder { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow: auto; padding: 4px 2px; }
.vlt-klar-calendar__gruppen-mitglieder label { display: flex; align-items: center; gap: 8px; font-size: 15px; min-height: 32px; }
.vlt-klar-calendar__gruppen-mitglieder input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; }
.vlt-klar-calendar__gruppen-form button[type="submit"], .vlt-klar-calendar__gruppen-loeschen button[type="submit"] { min-height: 42px; border-radius: 10px; font-size: 15px; font-weight: 700; }
.vlt-klar-calendar__gruppen-loeschen { margin-top: 8px; }
/* VLT-GRUPPEN-OPTIK-ENDE */

/* VLT-GRUPPEN-OBEN-ANFANG
   17.08. - Der Abschnitt "Geteilte Kalender" sass nach 2.10.713 UNTER dem kompletten
   Freigaben-Formular (gemessen y ca. 864px) und war auf dem Telefon nicht erreichbar.
   order:-1 zieht ihn in der Flex-Sektion an die erste Stelle - direkt unter die
   Ueberschrift "Kalender teilen", vor "Mitarbeiter auswaehlen". */
.vlt-klar-calendar__gruppen { order: -1; margin-top: 0; margin-bottom: 16px; }
/* VLT-GRUPPEN-OBEN-ENDE */

/* VLT-TEILEN-ROLLBAR-ANFANG
   17.08. - Der eigentliche Uebeltaeter: .vlt-klar-calendar__sharing hatte
   overflow-y:hidden bei 798px Hoehe und 1217px Inhalt - 419px waren schlicht
   abgeschnitten und mit dem Finger nicht erreichbar. Deshalb war "Geteilte
   Kalender" unten unauffindbar. Jetzt rollt der Bereich richtig. */
.vlt-klar-calendar__sharing { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* VLT-TEILEN-ROLLBAR-ENDE */

/* VLT-TEILEN-ROLLBAR-2
   Die erste Fassung wurde von einer Regel in einer Media-Query ueberstimmt
   (computed blieb hidden). Deshalb hier mit Nachdruck und hoeherer Genauigkeit. */
.vlt-cockpit--mobile-klar .vlt-klar-calendar__sharing,
.vlt-klar-calendar .vlt-klar-calendar__sharing { overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* VLT-TEILEN-ROLLBAR-2-ENDE */


/* ============================================================
   VLT-HOEHE-MONATSKARTE
   19.08. - Christian: unter der Karte "Vertriebskalender" fehlte auf dem
   Galaxy Z Fold und auf dem iPhone 12 der kleine Abstand zur Fussleiste,
   den "Mein Geraet" zeigt.

   Gemessen gilt auf jedem Telefon derselbe Zusammenhang:

       Abstand = Bildschirmhoehe - 564 - Hoehe der Monatskarte

   (564 = 117 Kopf + 11 Innenabstand + 84 Willkommen + 15 Zeilenabstaende
    + 248 Vertriebskalender + 10 Aussenabstand + 76 Fussleiste - 3)

   Also bekommt die Monatskarte genau die Hoehe, bei der unten Platz
   bleibt: 100dvh - 591. Nach oben gedeckelt bei 291 (= 187 + 104), damit
   ab 882px Sichthoehe alles unveraendert bleibt - Mein Geraet, iPhone
   16/17 Pro Max, alle iPads. Nach unten bei 200, damit die Karte auf sehr
   kurzen Geraeten nicht zerfaellt. Die beiden Zeilen teilen sich die Hoehe
   im bisherigen Verhaeltnis 187 : 104.

   Nachgemessen, Abstand vorher -> nachher:
   iPhone 12 und 13  -3 -> 12   |   iPhone 15 Pro  -> 10
   iPhone 16/17 Pro  -> 18      |   Galaxy Z Fold  1 -> 18
   iPhone 11  -3 -> 18          |   15 Pro Max, 16/17 Pro Max, iPads: gleich

   Ersetzt die frueheren Bloecke VLT-FALTGERAET und VLT-KURZE-TELEFONE,
   die feste Pixelwerte je Geraet gesetzt haben.
   ============================================================ */
@media (max-width: 760px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant {
        --vlt-ov-zeilen: clamp(200px, calc(100dvh - 603px), 291px);
        --vlt-calendar-top-height: min(187px, calc(var(--vlt-ov-zeilen) * 0.6426));
        --vlt-ov-rest: clamp(70px, calc(var(--vlt-ov-zeilen) * 0.3574), 104px);
    }
    .vlt-cockpit.vlt-cockpit--mobile-elegant section.vlt-elegant-overview {
        grid-template-rows: var(--vlt-calendar-top-height) var(--vlt-ov-rest) !important;
    }
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__rest {
        height: var(--vlt-ov-rest) !important;
        min-height: 0 !important;
    }
}

/* Der Massstab der Monatskarte ist eine Verzerrung und rechnet in der
   Hoehe nicht mit - deshalb in Stufen. Ab 865px Sichthoehe reicht der
   Grundwert 0.90, dort wird nichts gesetzt. */
@media (max-width: 760px) and (max-height: 800px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant {
        --vlt-calendar-scale: .74;
        --vlt-calendar-group-top: 33px;
    }
}
@media (max-width: 760px) and (min-height: 801px) and (max-height: 825px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant {
        --vlt-calendar-scale: .79;
        --vlt-calendar-group-top: 34px;
    }
}
@media (max-width: 760px) and (min-height: 826px) and (max-height: 842px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant {
        --vlt-calendar-scale: .83;
        --vlt-calendar-group-top: 35px;
    }
}
@media (max-width: 760px) and (min-height: 843px) and (max-height: 864px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant {
        --vlt-calendar-scale: .88;
        --vlt-calendar-group-top: 36px;
    }
}

/* ============================================================
   VLT-MONATSKARTE-INNEN
   19.08. - Christian: die Schilder "Rest Monat" und "Rest Jahr" schnitten
   unten ab, auf dem Galaxy wurde das Foto neben dem Kalender in die Breite
   gezogen und oben/unten beschnitten, auf dem iPhone 12 waren die Schilder
   zu kurz.

   Drei Ursachen, drei Antworten:

   1. Die beiden Schilder sind leicht gedreht (rotateY), dadurch stehen die
      Ecken ueber ihre Zeile hinaus. Die Karte schneidet ab (overflow hidden),
      und die untere Kante der Karte lag genau auf der Ecke des Schildes.
      -> 8px Luft am unteren Rand der Karte.

   2. Das Foto ist absolut gesetzt mit left:10 und right:10, also so breit wie
      die Spalte. Auf dem Galaxy ist diese Spalte doppelt so breit wie auf dem
      Telefon, das Bild wird mit object-fit:cover auf einen breiten Streifen
      beschnitten. -> in der breiten Spalte bekommt das Foto das Seitenverhaeltnis
      vom Telefon (1.13) und steht mittig.

   3. Auf kurzen Geraeten war die Monatskarte zu klein, weil die Karte
      "Vertriebskalender" fest 238px hoch ist. Die hat unten viel Luft.
      -> auf Geraeten bis 864px Sichthoehe ist sie 200px hoch (Kopfzeilen
      unveraendert 36 + 24, nur die Knopfflaeche 176 -> 140, Knoepfe 80 -> 63).
      Die 38px gehen an die Monatskarte: dort steht 561 statt 591.

   Nachgemessen: iPhone 12 Monatskarte 215 -> 247, Schilder 42 statt 36 hoch,
   8px Luft unten; Galaxy Foto 330x114 -> 165x146; Abstand zur Fussleiste
   auf beiden 24.
   ============================================================ */
/* 19.08. - Christian wollte die Luft auch auf seinem eigenen Telefon: unter
   "Rest Jahr" laeuft der Stiel des Schildes noch 9px weiter (rest::before mit
   top -9 und bottom -9). Ohne die Luft schneidet die Karte ihn ab. Gilt jetzt
   fuer alle Telefone, auch ab 865px Sichthoehe. */
@media (max-width: 760px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant section.vlt-elegant-overview {
        padding-bottom: 8px !important;
    }
}

@media (min-width: 600px) and (max-width: 760px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__slideshow {
        left: 50% !important;
        right: auto !important;
        width: auto !important;
        max-width: calc(100% - 20px) !important;
        aspect-ratio: 1.13 !important;
        transform: translateX(-50%) !important;
    }
}

@media (max-width: 760px) and (max-height: 864px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant {
        --vlt-ov-zeilen: clamp(200px, calc(100dvh - 565px), 291px);
        --vlt-menu-glass-height: 55px;
    }
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility {
        height: 200px !important;
        grid-template-rows: 36px 24px 140px !important;
    }
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__period,
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__menu {
        height: 140px !important;
        min-height: 140px !important;
    }
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu--dashboard {
        grid-template-rows: 63px 63px !important;
    }
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu--dashboard > .is-calendar,
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu--dashboard > .is-install,
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu--dashboard > .is-birthday,
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu--dashboard > .is-training {
        height: 63px !important;
        min-height: 63px !important;
    }

    /* Die helle Platte hinter dem Sinnbild sitzt fest bei top 6 und ist 44 hoch.
       Bei 63er Knoepfen liefe sie quer durch die Beschriftung. */
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu--dashboard > .is-calendar::before,
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu--dashboard > .is-install::before,
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu--dashboard > .is-birthday::before,
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__menu--dashboard > .is-training::before {
        height: 34px !important;
    }
}

/* Massstab neu gestuft, weil die obere Zeile jetzt groesser ist. */
@media (max-width: 760px) and (max-height: 800px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant {
        --vlt-calendar-scale: .80;
        --vlt-calendar-group-top: 36px;
    }
}
@media (max-width: 760px) and (min-height: 801px) and (max-height: 815px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant {
        --vlt-calendar-scale: .86;
        --vlt-calendar-group-top: 37px;
    }
}
@media (max-width: 760px) and (min-height: 816px) and (max-height: 864px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant {
        --vlt-calendar-scale: .90;
        --vlt-calendar-group-top: 37px;
    }
}

/* ==========================================================
   VLT-BILDFELD-TELEFON
   19.08. - Christian: "das iPhone 11 ist doch nicht so breit wie das Galaxy".
   Das Bildfeld haengt an der Spaltenhoehe (top 85, bottom 10), seine Breite
   kommt aus der Spaltenbreite. Beim iPhone 11 ergab das 173 x 169 - fast
   quadratisch. Das Titelblatt ist aber hochkant (901 x 1024), also wurde es
   oben und unten beschnitten.

   Neue Regel: das Bildfeld ist nie hoeher als seine Breite geteilt durch 1.13.
   1.13 ist das Verhaeltnis, das Christians Telefon zeigt (186 x 165) - das
   bleibt damit unveraendert. Wo das Feld schon flacher ist (iPhone 12, 13,
   15/16/17 Pro), aendert sich nichts. Nur zu hohe Felder werden gekuerzt:
   iPhone 11 173 x 169 -> 173 x 153.
   ========================================================== */
@media (max-width: 599px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-elegant-overview__slideshow {
        left: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        width: auto !important;
        min-width: calc(100% - 20px) !important;
        aspect-ratio: 1.1 !important;
        max-height: calc(100% - var(--vlt-calendar-slideshow-top, 85px) - 10px) !important;
    }
}

/* ==========================================================
   VLT-TABELLENSEITEN-FUSS
   19.08. - Christian: "die Auswertung wandert unten aus dem Bild raus."
   Gemessen auf dem iPhone 12: die Auswertung ist eine feste Ansicht mit
   top 117 und bottom 0 - sie reicht also bis zur Bildschirmunterkante und
   weiss von der Fussleiste (76 hoch, 8 ueber dem Rand) nichts. Die letzten
   84px der Produkttabelle lagen dahinter und liessen sich auch nicht
   heranschieben.
   Jetzt endet sie bei 84 ueber dem Rand, also genau an der Fussleiste, und
   blaettert innen. Nachgemessen: Ansicht 117-713, Leiste ab 713, Tabelle
   vollstaendig erreichbar.
   ========================================================== */
@media (max-width: 760px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-klar-view--main.is-table-focused {
        bottom: 84px !important;
        padding-bottom: 12px !important;
    }
}

/* ==========================================================
   VLT-TABLET-HOCH
   19.08. - Christian: "iPad Pro 11 im Hochformat hat viel Platz nach unten."
   Stimmt. Im Hochformat zeigt das iPad die Telefonansicht in einer 760er
   Spalte - die Karten haben aber feste Hoehen fuer ein Telefon, und ein iPad
   ist deutlich hoeher. Gemessen bis zur Fussleiste:

     iPad Pro 13 hoch   Sichtfeld 995   Inhalt 665   206 Luft   Faktor 1.17
     iPad Air hoch      Sichtfeld 1071  Inhalt 665   206 Luft   Faktor 1.28
     iPad Pro 11 hoch   Sichtfeld 1081  Inhalt 665   215 Luft   Faktor 1.30

   Gleiche Antwort wie beim Querformat: der ganze Inhalt steht auf einem
   Faktor, statt einzelne Karten zu strecken. Anders als beim Querformat ist
   hier kein Breitenausgleich noetig - die Breite kommt aus Prozentwerten,
   und die rechnet zoom von sich aus richtig um (nachgemessen: Inhalt weiter
   12-748 wie vorher, kein Querlauf).
   ========================================================== */
@media (max-width: 760px) and (min-height: 901px) and (max-height: 1030px) {
    html.vlt-display-tablet-app .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-klar-view--main:not(.is-table-focused) { zoom: 1.16; }
}
@media (max-width: 760px) and (min-height: 1031px) {
    html.vlt-display-tablet-app .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-klar-view--main:not(.is-table-focused) { zoom: 1.28; }
}

/* ==========================================================
   VLT-AUSWERTUNG-PASSEND
   19.08. - Christian: "iPhone 12 zeigt die Auswertung unter Meine Ziele nicht
   vollstaendig an." Die Ansicht endet zwar seit 2.10.883 sauber an der
   Fussleiste und blaettert - aber blaettern heisst eben: man sieht nicht alles.

   Gemessen auf dem iPhone 12: sichtbar 596, die Auswertung braucht 690
   (Kopf 64 + Wertetabelle 160 + Stueckzahlen 480). 94 fehlen.

   Wie bei den iPads: der Inhalt steht auf einem Faktor, statt einzelne Zeilen
   zu stutzen. Der Faktor haengt an der Sichthoehe. Ab 891px passt alles von
   allein - Christians Telefon (895) bleibt also unangetastet.

   Der Faktor sitzt bewusst auf dem Inhalt und nicht auf der Ansicht selbst:
   die Ansicht ist fest positioniert (top 117, bottom 84), und zoom wuerde
   auch diese Werte umrechnen und alles nach oben ziehen.
   ========================================================== */
@media (max-width: 760px) and (max-height: 800px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-klar-view--main.is-table-focused .vlt-klar-mobile-performance { zoom: .84; }
}
@media (max-width: 760px) and (min-height: 801px) and (max-height: 830px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-klar-view--main.is-table-focused .vlt-klar-mobile-performance { zoom: .86; }
}
@media (max-width: 760px) and (min-height: 831px) and (max-height: 860px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-klar-view--main.is-table-focused .vlt-klar-mobile-performance { zoom: .90; }
}
@media (max-width: 760px) and (min-height: 861px) and (max-height: 890px) {
    .vlt-cockpit.vlt-cockpit--mobile-elegant .vlt-klar-view--main.is-table-focused .vlt-klar-mobile-performance { zoom: .94; }
}

/* ==========================================================
   VLT-NACHFASSER-LAUF-PASSEND
   19.08. - Christian: "beim iPhone 12 ist im Nachfasser der Termin unten
   abgeschnitten." Gemessen auf dem iPhone 12 (390 x 797):

     Arbeitsflaeche (Ebene "lauf")  121 - 734  = 613 hoch, overflow hidden
     Inhalt darin                   121 - 825  = 704
     Hauskarte                      564 - 825  -> 91px ragten heraus
     Knopf "Termin"                 701 - 753  -> lag im abgeschnittenen Teil

   Die Ebene ist als eine Bildschirmflaeche gebaut und schneidet ab. Also
   wird ihr Inhalt gestaffelt verkleinert, bis die Hauskarte samt "Termin"
   hineinpasst - gleiches Vorgehen wie bei der Auswertung. Die Staffel ist so
   gewaehlt, dass auch das jeweils kuerzeste Geraet eines Bandes passt.
   Ab 891px Sichthoehe passt alles von allein.

   Zusaetzlich als Netz: die Ebene blaettert jetzt (overflow-y: auto) statt zu
   schneiden - falls eine Karte doch einmal mehr Platz braucht, ist sie
   erreichbar statt weg.
   ========================================================== */
.vlt-nf__ebene[data-ebene="lauf"] { overflow-y: auto !important; }

/* Breite, aber flache Bildschirme - iPad quer und kurze Rechnerfenster:
   dort ist die Arbeitsflaeche noch kleiner (iPad Air quer 151-699 = 548 bei
   678 Inhalt), die Hauskarte ragte 130px heraus und "Termin" war weg. */
@media (min-width: 761px) and (max-height: 800px) {
    .vlt-nf__ebene[data-ebene="lauf"] > * { zoom: .80; }
}
@media (min-width: 761px) and (min-height: 801px) and (max-height: 830px) {
    .vlt-nf__ebene[data-ebene="lauf"] > * { zoom: .82; }
}
@media (max-width: 760px) and (max-height: 800px) {
    .vlt-nf__ebene[data-ebene="lauf"] > * { zoom: .84; }
}
@media (max-width: 760px) and (min-height: 801px) and (max-height: 830px) {
    .vlt-nf__ebene[data-ebene="lauf"] > * { zoom: .87; }
}
@media (max-width: 760px) and (min-height: 831px) and (max-height: 860px) {
    .vlt-nf__ebene[data-ebene="lauf"] > * { zoom: .91; }
}
@media (max-width: 760px) and (min-height: 861px) and (max-height: 890px) {
    .vlt-nf__ebene[data-ebene="lauf"] > * { zoom: .95; }
}

/* ============================================================
   VLT-TELEFON-QUER  (19.08., Stand 2.10.902)
   Telefone im Querformat werden genauso behandelt wie das iPad
   im Querformat: die Seite wird kleiner gerechnet, bis alles ohne
   Blaettern sichtbar ist. Die Fussleiste steht fest am unteren Rand.
   Das Polster ueber dem Cockpit faellt weg, seitlich bleiben 8 Pixel.
   Breite ueber 100 Prozent statt ueber 100vw - sonst steht die Karte
   6 Pixel ueber und unten erscheint eine Rollleiste.
   Greift nur breit UND sehr flach - iPads und Telefone hochkant
   bleiben unberuehrt.
   ============================================================ */
@media (min-width: 761px) and (max-width: 1000px) and (max-height: 560px) {
  html body #wrap { min-height: 0 !important; padding-bottom: 0 !important; }
  /* 19.08. - mit #primary, weil die Bannerregel im Inline-Stil drei Klassen
     hat und sonst gewinnt: dann kaeme das 30er Polster oben zurueck und das
     Cockpit rutschte unter die Fussleiste. */
  html body #wrap #primary.content-area {
    padding-top: 0 !important; padding-bottom: 0 !important;
    padding-left: 8px !important; padding-right: 8px !important;
  }
  html body #wrap .site-content {
    padding-top: 0 !important; padding-bottom: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    width: auto !important; max-width: none !important;
  }
  html body #footer {
    position: fixed !important; left: 50%; transform: translateX(-50%);
    bottom: 4px; width: calc(100vw - 16px); z-index: 40;
  }
  /* 19.08. - Der Bestand setzt hier width: min(1336px, 100vw - 72px). Im
     verkleinerten Cockpit rechnet 100vw aber weiter mit der echten Fenster-
     breite, nicht mit der des Maßstabs - der Banner blieb schmal und stand
     mittig. html body davor macht die Regel stark genug. */
  html body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-head {
    position: static !important; top: auto !important; left: auto !important;
    right: auto !important; width: auto !important; max-width: none !important;
    /* 19.08. - dieselben 12 Pixel Rand wie die Hauptansicht, damit der Kopf
       genau auf der Kante der Willkommenskarte steht. */
    margin-left: 12px !important; margin-right: 12px !important;
    /* Der Bestand schiebt den Kopf mit translateX(-50%) in die Mitte -
       ohne left: 50% landet er sonst weit links ausserhalb. */
    transform: none !important;
    /* 19.08. - Christian: der Kopf im Cockpit soll genauso aussehen wie der
       Banner auf den Unterseiten. Der Banner ist 30 hoch, Logo 20, Titel 11,5,
       Knoepfe 24. Das Cockpit wird aber verkleinert - darum jeden Wert durch
       den Faktor teilen, dann kommt auf dem Schirm dasselbe an. */
    height: calc(30px / var(--vlt-quer-faktor, 0.42)) !important;
    min-height: 0 !important;
    padding: calc(2px / var(--vlt-quer-faktor, 0.42)) calc(12px / var(--vlt-quer-faktor, 0.42)) calc(3px / var(--vlt-quer-faktor, 0.42)) !important;
    border-radius: calc(9px / var(--vlt-quer-faktor, 0.42)) !important;
  }
  html body .vlt-cockpit--desktop-elegant2 .vlt-klar-head .vlt-klar-brand img {
    width: calc(20px / var(--vlt-quer-faktor, 0.42)) !important; height: auto !important;
  }
  html body .vlt-cockpit--desktop-elegant2 .vlt-klar-head .vlt-klar-brand strong {
    font-size: calc(11.5px / var(--vlt-quer-faktor, 0.42)) !important; line-height: 1.15 !important;
  }
  html body .vlt-cockpit--desktop-elegant2 .vlt-klar-head .vlt-klar-brand small {
    font-size: calc(7px / var(--vlt-quer-faktor, 0.42)) !important; line-height: 1.15 !important;
  }
  html body .vlt-cockpit--desktop-elegant2 .vlt-klar-head .vlt-klar-account-menu,
  html body .vlt-cockpit--desktop-elegant2 .vlt-klar-head .vlt-klar-account {
    width: calc(24px / var(--vlt-quer-faktor, 0.42)) !important;
    height: calc(24px / var(--vlt-quer-faktor, 0.42)) !important;
  }
  html body .vlt-cockpit--desktop-elegant2 .vlt-klar-head .vlt-klar-account svg {
    width: calc(13px / var(--vlt-quer-faktor, 0.42)) !important;
    height: calc(13px / var(--vlt-quer-faktor, 0.42)) !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main:not(.is-table-focused) {
    padding-top: 6px !important; margin-top: 0 !important;
    width: auto !important; max-width: none !important;
  }
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell {
    width: 100% !important; max-width: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
}
@media (min-width: 761px) and (max-width: 1000px) and (max-height: 380px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell { zoom: 0.32; --vlt-quer-faktor: 0.32; }
}
@media (min-width: 761px) and (max-width: 1000px) and (min-height: 381px) and (max-height: 400px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell { zoom: 0.34; --vlt-quer-faktor: 0.34; }
}
@media (min-width: 761px) and (max-width: 1000px) and (min-height: 401px) and (max-height: 405px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell { zoom: 0.36; --vlt-quer-faktor: 0.36; }
}
@media (min-width: 761px) and (max-width: 1000px) and (min-height: 406px) and (max-height: 425px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell { zoom: 0.37; --vlt-quer-faktor: 0.37; }
}
@media (min-width: 761px) and (max-width: 1000px) and (min-height: 426px) and (max-height: 435px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell { zoom: 0.40; --vlt-quer-faktor: 0.40; }
}
@media (min-width: 761px) and (max-width: 1000px) and (min-height: 436px) and (max-height: 460px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell { zoom: 0.42; --vlt-quer-faktor: 0.42; }
}
@media (min-width: 761px) and (max-width: 1000px) and (min-height: 461px) and (max-height: 560px) {
  .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell { zoom: 0.45; --vlt-quer-faktor: 0.45; }
}

/* ============================================================
   VLT-APP-LEISTE-ZWEITE-ZEILE  (19.08.)
   Ab 782 Pixel Breite haengt WordPress an seine schwarze Leiste
   eine zweite Zeile an: "Mit Elementor bearbeiten", "Willkommen
   Christian Paulussen" mit Bild und die Lupe. Im Werkzeug als App
   hat die nichts zu suchen - sie liegt dort hinter dem oberen Rand
   und verdeckt Platz. Im Rechner-Browser bleibt sie unveraendert.
   ============================================================ */
html.vlt-display-standalone #wp-admin-bar-top-secondary,
html.vlt-display-standalone #wp-admin-bar-elementor_edit_page {
  display: none !important;
}

/* ============================================================
   VLT-FALTBAR-QUER  (19.08.)
   Das Galaxy Z Fold quer ist 1092 breit, aber nur rund 960 hoch.
   Die Regel fuer grosse Tablets rechnet dort mit 1,2 - das war
   zu gross, die Fussleiste lag ueber der letzten Zeile.
   Eigenes Band 901-1000 Pixel Hoehe mit 1,15.
   Das iPad Pro 13 quer (1008 hoch) bleibt bei 1,2.
   ============================================================ */
@media (min-width: 1001px) and (min-height: 901px) and (max-height: 1000px) {
  html.vlt-display-tablet-app body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-klar-view--main:not(.is-table-focused) {
    zoom: 1.15 !important;
    width: calc(min(1336px, 100vw - 72px) / 1.15) !important;
    max-width: none !important;
    margin-left: auto !important; margin-right: auto !important;
  }
}

/* ================
   VLT-HOCH-MASSSTAB  (20.08.)
   Referenz ist das iPhone 14 / 15 Pro Max: 430 x 932 Pixel, davon 59 fuer
   die Statusleiste, also 873 Pixel fuer die Seite. Dort ist die
   Kartenflaeche 406 Pixel breit und der sichtbare Abstand von der
   Unterkante der letzten Karte bis zur OBERKANTE des Pluszeichens
   13,3 Pixel - das sind 3,27 je 100 Einheiten Kartenbreite.

   ACHTUNG, hier lag mein Fehler: die Seitenhoehen stehen in
   includes/frontend-preview.php in vlt_ansicht_geraete_werk() unter
   "hoehe" minus "oben". Ich hatte sie geschaetzt und lag bei vier
   Geraeten daneben (14/15 Pro 793 statt 797, 12/13 Pro Max 879 statt
   873). Immer aus der Tabelle lesen, nie schaetzen.

   Jedes andere Telefon bekommt einen eigenen Massstab (in Schritten von
   0,002 ausgemessen) und dieselben Kartenwerte wie die Referenz.
   Das 15 Pro Max selbst (430 Pixel breit) faellt in kein Band.

   Unterhalb 864 Pixel Seitenhoehe greift ein aelteres Band, das die
   Innereien der Karte kleiner macht (period/menu 140 statt 176,
   Knoepfe 63 statt 80, Kalendermassstab .80 statt .90). Dann bleibt die
   Karte unten leer und es sieht nach mehr Abstand aus. Wird hier alles
   zurueckgesetzt.
   ================ */

/* iPhone 11 Pro - 375 x 812, Seite 768 */
@media (max-width: 380px) and (min-height: 700px) and (max-height: 790px) {
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-cockpit-klar-shell {
    zoom: 0.872 !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-cockpit-klar-nav {
    left: 13.76px !important;
    right: 13.76px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit.vlt-cockpit--mobile-elegant {
    --vlt-ov-zeilen: 270px !important;
    --vlt-ov-rest: 96.5px !important;
    --vlt-calendar-top-height: 173.5px !important;
    --vlt-calendar-scale: 0.90 !important;
    --vlt-calendar-group-top: 37px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-klar-view--main > .vlt-elegant-overview__utility {
    height: 238px !important;
    grid-template-rows: 36px 24px 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__period,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__menu {
    height: 176px !important;
    min-height: 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard {
    grid-template-rows: 80px 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training {
    height: 80px !important;
    min-height: 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training::before {
    height: 44px !important;
  }
}

/* iPhone 12 / 13 Pro - 390 x 844, Seite 797 */
@media (min-width: 381px) and (max-width: 391px) and (min-height: 760px) and (max-height: 820px) {
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-cockpit-klar-shell {
    zoom: 0.908 !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-cockpit-klar-nav {
    left: 13.22px !important;
    right: 13.22px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit.vlt-cockpit--mobile-elegant {
    --vlt-ov-zeilen: 270px !important;
    --vlt-ov-rest: 96.5px !important;
    --vlt-calendar-top-height: 173.5px !important;
    --vlt-calendar-scale: 0.90 !important;
    --vlt-calendar-group-top: 37px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-klar-view--main > .vlt-elegant-overview__utility {
    height: 238px !important;
    grid-template-rows: 36px 24px 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__period,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__menu {
    height: 176px !important;
    min-height: 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard {
    grid-template-rows: 80px 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training {
    height: 80px !important;
    min-height: 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training::before {
    height: 44px !important;
  }
}

/* iPhone 14 / 15 Pro - 393 x 852, Seite 793 */
@media (min-width: 392px) and (max-width: 397px) and (min-height: 765px) and (max-height: 825px) {
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-cockpit-klar-shell {
    zoom: 0.902 !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-cockpit-klar-nav {
    left: 13.30px !important;
    right: 13.30px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit.vlt-cockpit--mobile-elegant {
    --vlt-ov-zeilen: 270px !important;
    --vlt-ov-rest: 96.5px !important;
    --vlt-calendar-top-height: 173.5px !important;
    --vlt-calendar-scale: 0.90 !important;
    --vlt-calendar-group-top: 37px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-klar-view--main > .vlt-elegant-overview__utility {
    height: 238px !important;
    grid-template-rows: 36px 24px 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__period,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__menu {
    height: 176px !important;
    min-height: 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard {
    grid-template-rows: 80px 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training {
    height: 80px !important;
    min-height: 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training::before {
    height: 44px !important;
  }
}

/* iPhone 16 / 17 Pro - 402 x 874, Seite 815 */
@media (min-width: 398px) and (max-width: 408px) and (min-height: 785px) and (max-height: 845px) {
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-cockpit-klar-shell {
    zoom: 0.93 !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-cockpit-klar-nav {
    left: 12.90px !important;
    right: 12.90px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit.vlt-cockpit--mobile-elegant {
    --vlt-ov-zeilen: 270px !important;
    --vlt-ov-rest: 96.5px !important;
    --vlt-calendar-top-height: 173.5px !important;
    --vlt-calendar-scale: 0.90 !important;
    --vlt-calendar-group-top: 37px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-klar-view--main > .vlt-elegant-overview__utility {
    height: 238px !important;
    grid-template-rows: 36px 24px 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__period,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__menu {
    height: 176px !important;
    min-height: 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard {
    grid-template-rows: 80px 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training {
    height: 80px !important;
    min-height: 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training::before {
    height: 44px !important;
  }
}

/* iPhone 11 Pro Max - 414 x 896, Seite 852 */
@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-cockpit-klar-shell {
    zoom: 0.974 !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-cockpit-klar-nav {
    left: 12.32px !important;
    right: 12.32px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit.vlt-cockpit--mobile-elegant {
    --vlt-ov-zeilen: 270px !important;
    --vlt-ov-rest: 96.5px !important;
    --vlt-calendar-top-height: 173.5px !important;
    --vlt-calendar-scale: 0.90 !important;
    --vlt-calendar-group-top: 37px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-klar-view--main > .vlt-elegant-overview__utility {
    height: 238px !important;
    grid-template-rows: 36px 24px 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__period,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__menu {
    height: 176px !important;
    min-height: 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard {
    grid-template-rows: 80px 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training {
    height: 80px !important;
    min-height: 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training::before {
    height: 44px !important;
  }
}

/* iPhone 12 / 13 Pro Max - 428 x 926, Seite 879 */
@media (min-width: 421px) and (max-width: 429px) and (min-height: 845px) and (max-height: 900px) {
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-cockpit-klar-shell {
    zoom: 1.008 !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-cockpit-klar-nav {
    left: 11.90px !important;
    right: 11.90px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit.vlt-cockpit--mobile-elegant {
    --vlt-ov-zeilen: 270px !important;
    --vlt-ov-rest: 96.5px !important;
    --vlt-calendar-top-height: 173.5px !important;
    --vlt-calendar-scale: 0.90 !important;
    --vlt-calendar-group-top: 37px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-klar-view--main > .vlt-elegant-overview__utility {
    height: 238px !important;
    grid-template-rows: 36px 24px 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__period,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__menu {
    height: 176px !important;
    min-height: 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard {
    grid-template-rows: 80px 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training {
    height: 80px !important;
    min-height: 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training::before {
    height: 44px !important;
  }
}

/* iPhone 16 / 17 Pro Max - 440 x 956, Seite 894 */
@media (min-width: 435px) and (max-width: 450px) and (min-height: 860px) and (max-height: 925px) {
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-cockpit-klar-shell {
    zoom: 1.026 !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-cockpit-klar-nav {
    left: 11.70px !important;
    right: 11.70px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit.vlt-cockpit--mobile-elegant {
    --vlt-ov-zeilen: 270px !important;
    --vlt-ov-rest: 96.5px !important;
    --vlt-calendar-top-height: 173.5px !important;
    --vlt-calendar-scale: 0.90 !important;
    --vlt-calendar-group-top: 37px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-klar-view--main > .vlt-elegant-overview__utility {
    height: 238px !important;
    grid-template-rows: 36px 24px 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__period,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__utility > .vlt-elegant-overview__menu {
    height: 176px !important;
    min-height: 176px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard {
    grid-template-rows: 80px 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training {
    height: 80px !important;
    min-height: 80px !important;
  }
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-calendar::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-install::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-birthday::before,
  html:not(.vlt-display-tablet-app) body .vlt-cockpit .vlt-elegant-overview__menu--dashboard > .is-training::before {
    height: 44px !important;
  }
}

/* ================
   VLT-AKTIONSSCHRIFT  (20.08.)
   Christian: "Beim Galaxy Z Fold 7 quer gehen die Schriften der
   Aktionsbuttons teilweise drueber."
   Die Beschriftung stand mit fester Groesse und ohne Umbruch in der
   Kachel. Gemessen am echten Fold quer: Kachel innen 95,4 Pixel,
   "Auftragsverwaltung" 121,6 - also 26 Pixel zu breit.

   Erster Versuch war eine mitlaufende Schriftgroesse ueber vw. Der ist
   gescheitert, weil die Ansicht zusaetzlich einen eigenen Massstab hat
   (VLT-FALTBAR-QUER, Faktor 1.15): am Bildschirm gemessene Pixel und
   CSS-Pixel stimmen dann nicht ueberein, jede Rechnung ueber vw liegt
   daneben. Merke: in Ansichten mit zoom nie ueber vw rechnen.

   Jetzt darf die Beschriftung stattdessen umbrechen, mit deutscher
   Silbentrennung. Das braucht keine Zahlen, greift nur wenn noetig und
   funktioniert in jeder Breite und bei jedem Massstab. Die Schrift
   bleibt in voller Groesse.
   Nachgemessen am echten Fold quer: Kachel 105 x 78, laengste
   Beschriftung 91,7 x 26,7 (zwei Zeilen) - alle elf passen.
   ================ */
html body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit__actions .vlt-cockpit__action-label {
  white-space: normal !important;
  hyphens: auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15 !important;
}

/* Zweiter Teil: die drei kleinen Knoepfe unter der Monatskarte
   (Meine Ziele, Kontakte, Unterstuetzung). "Unterstuetzung" ist ein
   Wort und passte in keiner Breite in den Knopf - gemessen ragte es bei
   932, 956, 984, 1092 und 1366 Pixel Fensterbreite heraus, also nicht
   nur beim Fold. Die Seite ist auf Deutsch ausgezeichnet, deshalb reicht
   die Silbentrennung; sie greift nur dann, wenn das Wort sonst nicht
   passt. Nachgemessen: bei neun geprueften Breiten ragt nichts mehr. */
@media (min-width: 761px) {
  html body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-nav-action small {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    hyphens: auto !important;
  }
}

/* ================
   VLT-TITELBILD-VERHAELTNIS  (20.08.)
   Christian: "Links das Bild ist hochgezogen."
   Der Kasten fuer das Kurzberichter-Titelbild hatte eine feste Hoehe
   (377 Pixel beim Fold quer), die Breite kam aber aus der Spalte. Beim
   Galaxy Z Fold ist die Spalte schmaler - dadurch wurde das Bild in die
   Laenge gezogen. Gemessen: Verhaeltnis 0,642 statt 0,880.
   Jetzt richtet sich die Hoehe nach der Breite. Zusammen mit
   object-fit: contain (siehe cockpit.css) kann nichts mehr verzerren.
   Nachgemessen, alle bei 0,880: Fold quer 199x227 - Fold hochkant
   170x193 - iPad quer 235x267 - Desktop 265x302 - iPhone quer 69x78.
   Das Hochformat der Telefone bleibt aussen vor (eigener Aufbau,
   dort ist das Bild bewusst angeschnitten).
   ================ */
@media (min-width: 761px) {
  html body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-elegant-overview__slideshow {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 901 / 1024 !important;
  }
}

/* ================
   VLT-DESKTOP-KALENDERBLATT  (20.08.)
   Christian: "Im Desktop die grosse Kalenderkarte breiter ziehen,
   sodass sie so breit ist wie die Schilder darunter."
   Gemessen im echten Desktop-Fenster: die beiden Schilder REST MONAT
   und REST JAHR sind je 163,4 Pixel breit, das Kalenderblatt nur 134,4.
   Das Blatt ist zusaetzlich um den Faktor 1,2 vergroessert, deshalb
   Die beiden Schilder sind leicht gekippt und stehen deshalb nicht genau
   uebereinander: das obere reicht rechts bis 862,6, das untere links bis
   693,0. Christian will das Blatt ueber BEIDE hinweg. Massgebend ist
   also die Aussenkante beider Schilder: 693,0 bis 862,6, Spanne 169,6.
   Bei Faktor 1,2 ergibt das eine CSS-Breite von 141,3.
   Nachgemessen: Blatt 692,7 bis 862,3 - links und rechts je 0,3 Pixel
   Rest, also buendig.
   Nur ab 1281 Pixel Fensterbreite, damit Telefone und die kleineren
   Tablets unveraendert bleiben.
   ================ */
@media (min-width: 1281px) {
  html body .vlt-cockpit .vlt-elegant-overview__top > .vlt-elegant-overview__calendar-leaf {
    width: 141.3px !important;
  }
}

/* Nachtrag: das sichtbare Kalenderblatt ist nicht der Kasten
   .vlt-elegant-overview__calendar-leaf, sondern die weisse Seite darin
   (.vlt-elegant-overview__calendar-page). Die war weiter nur 134,4 breit,
   deshalb sah es trotz breiterem Kasten noch linksbuendig aus.
   Die Seite bekommt dieselbe Breite. Nachgemessen: Seite 692,7 bis 862,3,
   Schilder 693,0 bis 862,6 - das Blatt liegt ueber beiden. */
@media (min-width: 1281px) {
  html body .vlt-cockpit .vlt-elegant-overview__top .vlt-elegant-overview__calendar-page {
    width: 141.3px !important;
  }
}

/* ================
   VLT-DESKTOP-KARTENBREITE  (20.08.)
   Christian: "Bitte kontrollieren, ob der HEIM & HAUS Banner auf allen
   Seiten so breit ist wie bei Auftrag erfassen. Cockpit bitte danach
   anpassen - alles, was unter den Aktionsbuttons laeuft."
   Gemessen: Auftrag erfassen 318 bis 1602, also 1284 breit.
   Cockpit war 292 bis 1628, also 1336 - 52 Pixel zu breit.
   Die Huelle bekommt 1284 plus 24 Polster = 1308 und wird mittig
   gesetzt; der Kopf steht fest und braucht die 1284 einzeln.
   Nachgemessen: Kopf, Willkommen-Karte, Monatskarte und Kalenderkarte
   alle von 318 bis 1602.
   Erst ab 1440 Pixel Fensterbreite, wie im Auftragsformular.
   ================ */
@media (min-width: 1440px) {
  html body .vlt-cockpit .vlt-cockpit-klar-shell {
    width: 1308px !important;
    max-width: 1308px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html body .vlt-cockpit.vlt-cockpit--desktop-elegant2 .vlt-cockpit-klar-shell > .vlt-klar-head {
    width: 1284px !important;
    max-width: 1284px !important;
  }
}

/* ================
   VLT-KONTAKTE-BILDER  (20.08.)
   Christian: "Kontakte muss auch noch funktionieren als Liste, taucht
   auch noch nicht auf."
   Das Blatt geht auf, aber die Liste war unbrauchbar: die Bildchen der
   Ansprechpartner hatten keine feste Groesse und wurden auf die volle
   Blattbreite aufgeblasen. Gemessen: ein Bild mit 146 x 300 Pixeln kam
   mit 876 x 1800 Pixeln heraus, die ganze Liste war 17973 Pixel hoch -
   man sah nur ein riesiges Portraet und keine Liste.
   Jetzt bekommt das Bildchen 40 x 40 und wird passend beschnitten.
   Nachgemessen: Liste 4377 statt 17973 Pixel, jeder Eintrag 145 hoch.
   ================ */
html body .vlt-klar-sheet .vlt-klar-contact-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .vlt-klar-sheet .vlt-klar-contact-avatar img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

/* 2.10.1189 - Christian: "Beim Klick auf Buttons sitzt der Hover-Effekt nicht
   richtig drauf. Check das mal auf alle Aktionsbuttons."
   Zwei Ursachen, beide hier im Stylesheet:
   1. a:hover setzt box-shadow: 0 9px 20px rgba(23,80,39,.15) - einen grossen
      Schein NACH UNTEN. Auf dem Handy gibt es kein Zeigen; iOS laesst :hover
      nach dem Antippen haengen. Der Schein bleibt also stehen, waehrend der
      Finger laengst weg ist.
   2. a:active setzt transform: scale(.97). Der Knopf schrumpft, der Schein
      bleibt gross - dann liegt der Effekt sichtbar neben dem Knopf.
   Auf Geraeten ohne Zeiger bekommen die Aktionsknoepfe deshalb eine
   Rueckmeldung, die mittig auf ihnen sitzt: kein Versatz, kein Schrumpfen.
   Am Rechner mit Maus bleibt alles wie es war. */
@media (hover: none){
    html body .vlt-cockpit.vlt-cockpit .vlt-cockpit-klar-quick__grid > a:hover,
    html body .vlt-cockpit.vlt-cockpit .vlt-cockpit-klar-quick__grid > a:focus,
    html body .vlt-cockpit.vlt-cockpit .vlt-cockpit-klar-quick__grid > a:focus-visible,
    html body .vlt-cockpit.vlt-cockpit .vlt-elegant-overview__appointments--utility > button:hover,
    html body .vlt-cockpit.vlt-cockpit .vlt-elegant-overview__appointments--utility > button:focus,
    html body .vlt-cockpit.vlt-cockpit .vlt-elegant-nav-action:hover,
    html body .vlt-cockpit.vlt-cockpit .vlt-elegant-nav-action:focus{
        box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(23,80,39,.10) !important;
        transform: none !important;
    }
    html body .vlt-cockpit.vlt-cockpit .vlt-cockpit-klar-quick__grid > a:active,
    html body .vlt-cockpit.vlt-cockpit .vlt-elegant-overview__appointments--utility > button:active,
    html body .vlt-cockpit.vlt-cockpit .vlt-elegant-nav-action:active{
        transform: none !important;
        background-color: #eef6f0 !important;
        box-shadow: inset 0 0 0 1px rgba(22,129,58,.22), inset 0 1px 0 #fff !important;
    }
}

/* 2.10.1190 - Christian: "Stehen alle unterhalb daneben." Gemessen ist an
   den Kacheln nichts versetzt: keine zweite Flaeche, kein Theme-Effekt,
   transform steht auf none. Bleibt der Schimmer, den iOS selbst ueber
   angetippte Links legt (-webkit-tap-highlight-color). Der wird vom
   Betriebssystem gezeichnet, nicht von uns, und richtet sich nach den
   Textkaesten im Link - bei diesen Kacheln (Symbolkreis, overflow:hidden,
   Text darunter) liegt er deshalb versetzt. Wir schalten ihn ab und geben
   die Rueckmeldung selbst - mittig auf der Kachel. */
html body .vlt-cockpit .vlt-cockpit-klar-quick__grid > a,
html body .vlt-cockpit .vlt-cockpit-klar-quick__grid > span,
html body .vlt-cockpit .vlt-elegant-overview__appointments--utility > button,
html body .vlt-cockpit .vlt-elegant-nav-action,
html body .vlt-cockpit .vlt-cockpit-klar-nav__plus,
html body .vlt-cockpit .vlt-diashow-knopf{
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-touch-callout: none !important;
}

/* 2.10.1191 - Christian: "Ist nur bei den Aktionsbuttons immer noch so."
   Es bleibt genau eine Kachel so stehen: die zuletzt angetippte. iOS haelt
   den Fokus auf dem angetippten Link fest, auch wenn man das Fenster laengst
   wieder geschlossen hat - und der Fokuszustand traegt den grossen Schein
   nach unten. Auf Geraeten ohne Zeiger bekommt der Fokus deshalb ueberhaupt
   kein eigenes Aussehen mehr. Am Rechner bleibt er, dort braucht man ihn
   fuer die Bedienung ueber die Tastatur. */
@media (hover: none){
    html body .vlt-cockpit .vlt-cockpit-klar-quick__grid > a:focus,
    html body .vlt-cockpit .vlt-cockpit-klar-quick__grid > a:focus-visible,
    html body .vlt-cockpit .vlt-cockpit-klar-quick__grid > a:focus-within,
    html body .vlt-cockpit .vlt-cockpit-klar-quick__grid > a:hover,
    html body .vlt-cockpit .vlt-cockpit-klar-quick__grid > a:target{
        outline: none !important;
        transform: none !important;
        border-color: rgba(216,228,219,.92) !important;
        border-left-color: rgb(22,129,58) !important;
        background-color: #ffffff !important;
        box-shadow: inset 0 1px 0 #fff, 0 7px 16px rgba(23,58,35,.09) !important;
    }
}

/* 2.10.1193 - Christian: "Check doch mal den Hover-Effekt auf den Buttons."
   Nachgestellt und im Bild gesehen: die Kachel selbst steht still
   (transform: none), ihre Zusatzflaechen sind winzig. Der versetzte Ueberzug
   ist der Hover-Schatten 0 9px 20px rgba(23,80,39,.15) - neun Punkte nach
   unten, zwanzig weich. Der liegt zwangsläufig unterhalb der Kachel und
   quillt seitlich heraus; deshalb sieht es aus, als stuende der Effekt
   daneben statt drauf. Jetzt sitzt er mittig auf der Kachel: ein duenner
   gruener Ring direkt am Rand, ein leichter gruener Grund und nur ein
   Hauch Schatten ohne Versatz. Gilt fuer Maus und Finger gleichermassen. */
html body .vlt-cockpit .vlt-cockpit-klar-quick__grid > a:hover,
html body .vlt-cockpit .vlt-cockpit-klar-quick__grid > a:focus,
html body .vlt-cockpit .vlt-cockpit-klar-quick__grid > a:focus-visible{
    transform: none !important;
    background-color: #f4faf6 !important;
    border-color: rgba(22,129,58,.34) !important;
    border-left-color: rgb(22,129,58) !important;
    box-shadow: inset 0 0 0 1px rgba(22,129,58,.16), inset 0 1px 0 #fff,
                0 1px 3px rgba(23,80,39,.10) !important;
    outline: none !important;
}
html body .vlt-cockpit .vlt-cockpit-klar-quick__grid > a:active{
    transform: none !important;
    background-color: #eaf4ee !important;
    box-shadow: inset 0 0 0 1px rgba(22,129,58,.30), inset 0 2px 5px rgba(23,80,39,.10) !important;
}


/* 2.10.1384 - Das Logo im Kopf auf die Flucht des Kurzberichter-Blattes.
   Am Geraet gemessen: die Kante des Blattes liegt in BEIDEN Lagen bei 32
   (hoch 31, quer 32). Im Hochformat hat Christian genau diese Stellung
   bestaetigt; im Querformat war das Logo bei 34, also 2 Punkte daneben.
   Der Avatar im Willkommensbanner liegt quer bei 15 - dorthin geschoben war
   es zu weit links, die Flucht ist also das Blatt, nicht das Foto.
   Wichtig: Diese Regeln stehen hier in der Stildatei (Kopf der Seite) und
   nicht mehr im Fuss - sonst sieht man das Logo beim Laden von links nach
   rechts wandern. */
@media (max-width: 760px) {
    html body .vlt-cockpit .vlt-klar-head .vlt-klar-brand { margin-left: 20px !important; }
}
@media (min-width: 761px) and (max-width: 900px) {
    html body .vlt-cockpit .vlt-klar-head .vlt-klar-brand { margin-left: -2px !important; }
}

/* 2.10.1385 - Dieselbe Flucht auf den Aktionsseiten.
   Ueber das grosse Plus und die Aktionsbuttons kommt man auf Seiten mit einem
   anderen Kopf: .vlt-auftrag-kopf statt .vlt-klar-head. Dort sass das Logo bei
   12 (gemessen bei 441 Punkten Breite), also 20 Punkte links von der Flucht 32.
   Das Querformat dieser Seiten ist noch nicht gemessen - der Messfuehler meldet
   es, sobald Christian eine solche Seite quer oeffnet. */
@media (max-width: 760px) {
    html body.vlt-order-entry-page .vlt-auftrag-kopf__links { padding-left: 20px !important; }
}

/* 2.10.1386 - Die Regel aus 1385 an die Seite gebunden.
   Gemessen bei 441 Punkten Breite: auf /auftrag-eingeben/ faengt der Inhalt bei 30 an,
   das Logo sass bei 12 - dort gehoeren die 20 Punkte hin. Auf allen anderen Seiten hinter
   den Aktionsbuttons (meine-auftraege, bestenliste, mein-bezirk, meine-statistik,
   nachfasser, dokumente, meine-zielplanung) faengt der Inhalt schon bei 12 an, das Logo
   steht dort also richtig. Die 20 Punkte wirkten dort nur deshalb nicht, weil diese Seiten
   cockpit-klar.css gar nicht laden - reiner Zufall. Deshalb jetzt an body.vlt-order-entry-page
   gebunden, die es nur auf der Auftragsseite gibt. */

/* 2.10.1389 - Bei Kontakte und Unterstuetzung stand der Titel doppelt: einmal oben im
   schmalen Streifen (der Kopf traegt dann is-ansicht und zeigt den Namen der Ansicht),
   einmal noch einmal im Blatt darunter. Christian: "den im Fenster weg".
   Gemessen im Querformat 895: Kopf 17/70, doppelter Titel im Blatt bei 201/137.
   Die Regel greift nur, solange der Kopf wirklich eine Ansicht anzeigt - bei Meine Ziele
   und im Cockpit selbst setzt er kein is-ansicht, dort bleibt der Titel im Blatt stehen.
   Die Klasse steht vierfach, weil die vorhandene Regel display:flex !important setzt und
   sonst gewinnt. */
html body:has(.vlt-klar-head.is-ansicht) .vlt-klar-page-title.vlt-klar-page-title.vlt-klar-page-title.vlt-klar-page-title { display: none !important; }

/* V2.10.1768 Handy-Kalender: Terminliste oben beginnen (auch bei 1 Termin), vertikal stapeln,
   bei mehr Terminen intern scrollen statt unten abzuschneiden. Nur Handy (<=760px). */
@media (max-width: 760px){
  .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__appointments--utility{
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    align-items: stretch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* V2.10.1769 Termine kleiner: Termin-Einträge fürs Handy niedriger (58px -> 44px), damit drei
   Termine in die feste Box passen, ohne unten abzuschneiden. Nur Handy, nur Cockpit-Kurzliste. */
@media (max-width: 760px){
  .vlt-cockpit--mobile-elegant .vlt-elegant-overview__utility > .vlt-elegant-overview__appointments--utility button{
    min-height: 44px !important;
    padding: 4px 0 !important;
  }
}

/* V2.10.1774 Kalender: oben ausrichten, Eintraege nicht wachsen (flex:0) UND kleiner,
   damit drei Termine in die Handy-Box passen. Schlaegt beide Designs. */
@media (max-width: 760px){
  html body .vlt-cockpit .vlt-elegant-overview__utility .vlt-elegant-overview__appointments--utility{
    justify-content: flex-start !important;
    align-content: flex-start !important;
    place-content: start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  html body .vlt-cockpit .vlt-elegant-overview__utility .vlt-elegant-overview__appointments--utility > button{
    flex: 0 0 auto !important;
    padding: 2px 0 !important;
    min-height: 0 !important;
    row-gap: 1px !important;
    grid-template-rows: auto auto !important;
  }
  html body .vlt-cockpit .vlt-elegant-overview__utility .vlt-elegant-overview__appointments--utility > button strong{ font-size: 13px !important; line-height: 1.2 !important; }
  html body .vlt-cockpit .vlt-elegant-overview__utility .vlt-elegant-overview__appointments--utility > button small{ font-size: 11px !important; line-height: 1.15 !important; }
  html body .vlt-cockpit .vlt-elegant-overview__utility .vlt-elegant-overview__appointments--utility > button::after{ height: 26px !important; }
}