/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {

    /* Liquid-Glass-Look für halbtransparente Flächen (.view-toggle, .topbar-nav, ...) */
    --glass-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.04);
    --glass-btn-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5);

    --accent: #0e85e6;
    --accent-hover: #1074c6;

    --body-bg: #f1f0ee;
    --body-text: #202224;

    --bg-white: #ffffff;
    --bg-white-light: #f7f7f6;
    --bg-hover: #f7f7f6;

    --sidebar-bg: #ffffff;
    --sidebar-text: #202224;
    --sidebar-active: #efede9;

    --btn-text-color: #ffffff;
    --btn-bg-secondary: #ecf1f4;

    --border: #dfdcd4;
    --border-multi: #f1eae5;
    --border-input: #e6dfd8;
    --border-input-modal: #dbd8d0;

    --muted-dense: #353532;
    --muted-heavy: #67625f;
    --muted: #8c8a86;
    --muted-light: #bab5aa;

    --bg-green:       #a8ea6f;
    --text-green:     #222420;
    --bg-red:         #fee2e2;
    --text-red:       #991b1b;
    --border-red:     #fecaca;
    --bg-yellow:      #fff4de;
    --text-yellow:    #854d0e;
    --border-yellow:  #fef08a;
    --accent-yellow:  #ffd246;
    --accent-blue:    #00d1ff;
    --bg-blue:        #dbeafe;
    --text-blue:      #1e40af;
    --border-blue:    #bfdbfe;

    /* ── Kalenderfarben ────────────────────────────────────────────────────────────
       Zentrale Stellschraube für Multi- und Einzelansicht: hier geaenderte Werte
       schlagen in beiden Kalendern, in der Auslastung und in der Legende durch. */
    --kal-buchung: #c64444;   /* Art 0 - gebucht, auch Auslastung */
    --kal-reserviert:    #f39832;   /* Art 1 - reserviert */
    --kal-blockiert:     #497cb8;   /* Art 2 - blockiert / Sperrzeit */
    --kal-reinigung:     #9897a8;   /* Art 20 - Reinigungsbelegung */
    --kal-geschlossen:   #9897a8;   /* Art 21 - geschlossen */
    --kal-neu:           #00d1ff;   /* Neu-Marker und Angebots-Strich */
    --kal-sel:           #ec4343;  /* Zeitraum-Auswahl und Hover */
    --kal-reinigung-punkt: radial-gradient(circle at 25% 25%, #e2e1ec, #ffbf45 50%, #e49e19);

}

p a,
.link-underline { color: var(--body-text); border-bottom: 1px solid var(--body-text); text-decoration: none; transition: border-color .15s ease; }
p a:hover,
.link-underline:hover { border-bottom-color: transparent; text-decoration: none; }

[data-theme="light"] body[data-portal="2"]  {
    --accent: #327dc8;
    --accent-hover: #2368ac;
    --body-bg: #f0f0f0;
    --kal-buchung: #d43f3f;
    /*--sidebar-bg: #2f669e;*/
    /*--bg-hover: #27507e;*/
    --accent-yellow: #327dc8;
    /*--muted-dense: #f1f3f6;*/
    /*.sidebar { margin: 0 !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }*/
}

[data-theme="light"] body[data-portal="1"]  {
    --accent: #C4394E;
    --accent-hover: #b63447;
    --kal-buchung: #C4394E;
}


[data-theme="dark"] {
    --glass-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
    --glass-btn-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
    --accent: #2268c5;
    --body-bg: #171c27;
    --input-bg:       #141921;
    --body-text:      #bcc4d4;
    --border:         #242d3b;
    --border-input:   #344258;
    --border-input-modal: #81889a;
    --border-multi:   #2c3646;
    --muted-dense:    #bcc4d4;
    --muted-heavy:    #bcc4d4;
    --muted:          #8e97ac;
    --muted-light:    #81889a;
    --sidebar-bg:     #212733;
    --sidebar-text:   #dde3eb;
    --sidebar-active: #313a4b;
    --bg-hover:  #313e50;
    --bg-white:       #212733;
    --bg-white-light: #212733;
    --bg-green:       #a5d57c;
    --bg-red:         #4a1f1f;
    --text-red:       #fca5a5;
    --border-red:     #7f2020;
    --bg-yellow:      #4a3f1f;
    --text-yellow:    #fde68a;
    --border-yellow:  #78600a;
    --bg-blue:        #1e2d4a;
    --text-blue:      #93c5fd;
    --border-blue:    #2d4a7a;
    --btn-text-color:   #dadada;
}

/*[data-theme="light"] body[data-portal="2"] {
    --body-bg: #E7E9EA;
}*/

body[data-portal="2"] {
    --muted-light: #abadae;
}


/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
*:focus-visible { outline: none; }

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    font-family: 'Mulish', system-ui, sans-serif;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--body-text);
    background: var(--body-bg);

    /* Füllfarbe des ausgewählten Radios - standardmäßig die Akzentfarbe,
       hier aenderbar, ohne --accent selbst anzufassen. Bewusst auf body und
       nicht auf :root: die Marken-Akzente stehen auf body[data-portal], eine
       Definition auf :root wuerde nur den html-Wert sehen und sie verlieren. */
}

strong {
    font-weight: 700;
}

small { display: block; font-size: .85rem; font-weight: 400; color: var(--muted); line-height: 1.3; }

button {
    font-family: 'Mulish', system-ui, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }



::placeholder { color: var(--muted-light); opacity: 1; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg, #fff) inset;
    -webkit-text-fill-color: var(--body-text);
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: inherit;
    transition: background-color 9999s ease;
}

h1 { margin: 0 0 0 7px; font-size: 1.4rem; }
.form-box > h1 { margin-top: 0; margin-bottom: 16px; }
.form-box > p, .info-text { color: var(--muted-heavy); font-weight: 400; margin: 10px 0; }
.info-text a.btn { flex-shrink: 0; align-self: flex-start; margin: 8px 24px; }
.info-text--icon { display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.info-text--icon .info-text-icon { flex-shrink: 0; color: var(--muted); }
.info-text--icon p { margin: 0; }
/* Einleitungsbox mit "Hilfe lesen"-Button - trägt alles selbst, ohne .info-text.
   Achtung: hilfe/frame.php nutzt denselben Namen fuer die Tipp-Box der
   Hilfeseiten und laedt diese Datei mit; dort setzt der lokale <style> nach. */
.hilfe-tipp { display: flex; align-items: center; justify-content: space-between; gap: 64px; font-weight: 400; margin: 16px 7px; }
.hilfe-tipp p { margin: 0; }
.hilfe-tipp a.btn { flex-shrink: 0; align-self: flex-start; margin: 8px 24px; }
h2 { margin: 2px 0 8px; font-size: 1.2rem; font-weight: 700; }
h3 { margin: 0 0 8px; font-size: 1rem; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.topbar {
    height: 65px;
    flex-shrink: 0;
    background: transparent;
}

.topbar-inner {
    max-width: calc(220px + 980px);
    display: flex;
    align-items: center;
    padding: 8px 40px 0 40px;
    height: 100%;
    position: relative;
}

.topbar-logo {
    height: 30px;
    width: auto;
    margin-left: 22px;
}

/* ── por_id White Label ────────────────────────────────────────────────────────────── */

[data-portal="1"] .topbar-logo { height: 38px; margin-left: 10px; }
[data-portal="2"] .topbar-logo { height: 40px; margin-left: 28px; margin-top: -5px; }
[data-portal="3"] .sidebar-brand:not(.sidebar-brand--collapsed) .topbar-logo { width: 122px; margin-left: 20px; }
[data-portal="4"] .sidebar-brand:not(.sidebar-brand--collapsed) .topbar-logo { width: 128px; margin-left: 21px; }

[data-portal="1"] .sidebar-brand--collapsed .topbar-logo,
[data-portal="2"] .sidebar-brand--collapsed .topbar-logo,
[data-portal="3"] .sidebar-brand--collapsed .topbar-logo,
[data-portal="4"] .sidebar-brand--collapsed .topbar-logo { height: 40px; margin-left: 13px; }


.topbar-actions {
    display: flex;
    align-items: center;
    gap: 29px;
}

.topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 50px 0 0 50px;
    padding: 7px 10px 6px 18px;
    position: relative;
    height: 35px;
    transition: background .15s ease;
    border-right: none;
}
.topbar-search:hover,
.topbar-search:focus-within { background: var(--bg-white); }
.topbar-search svg { width: 16px; height: 16px; stroke-width: 2; color: var(--muted-dense); flex-shrink: 0; }
.topbar-search .ti { color: var(--muted-light); font-size: 1rem; -webkit-text-stroke: .1px var(--muted-light); }
.topbar-search-input {
    background: none;
    border: none;
    outline: none;
    color: var(--muted-dense);
    width: 250px;
    font-family: 'Mulish', system-ui, sans-serif;
    font-weight: 600;
    font-size: .9rem;
}
.topbar-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 320px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 500;
    overflow: hidden;
}
.topbar-search-dropdown.open { display: block; }
.topbar-search-item {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--body-text);
    gap: 5px;
    border-bottom: 1px solid var(--border);
}
.topbar-search-item:last-child { border-bottom: none; }
.topbar-search-item:hover,
.topbar-search-item.keyboard-focus { background: var(--bg-hover); text-decoration: none; }
.tsi-name { display: inline-flex; align-items: center; gap: 5px; font-size: 1rem; font-weight: 600; color: inherit; }
.tsi-name .ti { color: inherit; }
.tsi-meta { display: inline-flex; align-items: center; gap: 5px; font-size: .875rem; color: var(--muted); }
.tsi-meta .ti { color: inherit; }

.topbar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: transparent;
    border: none;
    color: var(--body-text);
    border-radius: 50px;
    font-family: inherit;
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    margin-left: auto;
    max-height: 35px;
    background: color-mix(in srgb, var(--bg-white) 70%, transparent);
}
.topbar-btn .ti { font-size: 1.2rem; }
.icon-preisrechner {
    display: inline-block;
    width: 19px;
    height: 19px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 22H14C19 22 21 20 21 15V9C21 4 19 2 14 2H10C5 2 3 4 3 9V15C3 20 5 22 10 22Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 7.57996V8.57996C16.5 9.39996 15.83 10.08 15 10.08H9C8.18 10.08 7.5 9.40996 7.5 8.57996V7.57996C7.5 6.75996 8.17 6.07996 9 6.07996H15C15.83 6.07996 16.5 6.74996 16.5 7.57996Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.13612 14H8.14767' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9952 14H12.0068' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.8544 14H15.8659' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.13612 17.5H8.14767' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9952 17.5H12.0068' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.8544 17.5H15.8659' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 22H14C19 22 21 20 21 15V9C21 4 19 2 14 2H10C5 2 3 4 3 9V15C3 20 5 22 10 22Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 7.57996V8.57996C16.5 9.39996 15.83 10.08 15 10.08H9C8.18 10.08 7.5 9.40996 7.5 8.57996V7.57996C7.5 6.75996 8.17 6.07996 9 6.07996H15C15.83 6.07996 16.5 6.74996 16.5 7.57996Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.13612 14H8.14767' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9952 14H12.0068' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.8544 14H15.8659' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.13612 17.5H8.14767' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9952 17.5H12.0068' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.8544 17.5H15.8659' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.topbar-btn:hover { background: var(--bg-hover); text-decoration: none; }
.topbar-btn:active { transform: translate(1px, 1px); }
.topbar-btn--hilfe { margin-right: 16px; gap: 7px; }
.topbar-btn--add { position: relative; margin-left: -30px; padding: 6px 23px 7px 18px; background: color-mix(in srgb, var(--bg-white) 77%, transparent); height: 34px; border-radius: 0 50px 50px 0; box-shadow: var(--glass-shadow); margin-top: -1px; }
.topbar-btn--add:hover { background: var(--bg-white-light); }
.topbar-btn--add::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 25px;
    border-radius: 0 50px 50px 0;
    transition: background .15s ease;
}
[data-theme="dark"] .topbar-btn:hover { background: rgba(255,255,255,.08); }
[data-theme="dark"] .topbar-btn--add:hover::before { background: rgba(255,255,255,.08); }

.topbar-nav {
    display: flex;
    align-items: center;
    gap: 0;
    background: color-mix(in srgb, var(--bg-white) 90%, transparent);
    border-radius: 50px;
    padding: 2px;
    height: 35px;
    box-shadow: var(--glass-shadow);
}
.topbar-nav:not(.topbar-nav--links) { margin-left: auto; }
.topbar-nav--links { margin-right: 40px; background: transparent; }
.topbar-nav--links .topbar-nav-item { padding: 6px 18px; }
.topbar-nav .topbar-user-menu { margin-left: 0; }
.topbar-nav-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    background: transparent;
    border: none;
    border-radius: 50px;
    color: var(--body-text);
    font-family: inherit;
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.topbar-nav-item .ti { font-size: 1.2rem; }
.topbar-nav-item:hover { text-decoration: none; background: var(--bg-hover); }
.topbar-nav-item:active { transform: translate(1px, 1px); }
.topbar-nav-item.active { background: var(--bg-white); color: var(--body-text); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.06); }

[data-theme="dark"] .topbar-nav-item:hover { background: rgba(255,255,255,.08); }

.btn-group-nav {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--sidebar-active);
    border-radius: 50px;
    padding: 3px 4px;
    flex-shrink: 0;
    margin-right: 4px;
}
.btn-group-nav .btn-icon { border: none; border-radius: 50px; background: transparent; font-size: .85rem; }
.btn-group-nav .btn-icon:hover { background: var(--bg-white); }
[data-theme="dark"] .btn-group-nav .btn-icon:hover { background: rgba(255,255,255,.08); }

.topbar-user-menu {
    position: relative;
    margin-left: 8px;
}
.topbar-user-menu .ti-user-circle { font-size: 1.3rem; }


.topbar-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    min-width: 240px;
    z-index: 200;
    overflow: hidden;
}
.topbar-user-menu.open .topbar-dropdown { display: block; }

.topbar-dropdown-user {
    padding: 11px 16px 4px;
    font-weight: 500;
}
.topbar-dropdown-meta {
    padding: 15px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    line-height: 1.6;
    text-align: right;
}
.topbar-dropdown-meta small {
    padding: 5px 0 0 0;
}
/* Kunden-Nr. */
/* PDF-Icon als Bild statt Font-Icon - farbiges Dateisymbol */
.icon-pdf {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjgwMHB4IiB3aWR0aD0iODAwcHgiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIAogICAgIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggc3R5bGU9ImZpbGw6I0UyRTVFNzsiIGQ9Ik0xMjgsMGMtMTcuNiwwLTMyLDE0LjQtMzIsMzJ2NDQ4YzAsMTcuNiwxNC40LDMyLDMyLDMyaDMyMGMxNy42LDAsMzItMTQuNCwzMi0zMlYxMjhMMzUyLDBIMTI4eiIvPgo8cGF0aCBzdHlsZT0iZmlsbDojQjBCN0JEOyIgZD0iTTM4NCwxMjhoOTZMMzUyLDB2OTZDMzUyLDExMy42LDM2Ni40LDEyOCwzODQsMTI4eiIvPgo8cG9seWdvbiBzdHlsZT0iZmlsbDojQ0FEMUQ4OyIgcG9pbnRzPSI0ODAsMjI0IDM4NCwxMjggNDgwLDEyOCAiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0YxNTY0MjsiIGQ9Ik00MTYsNDE2YzAsOC44LTcuMiwxNi0xNiwxNkg0OGMtOC44LDAtMTYtNy4yLTE2LTE2VjI1NmMwLTguOCw3LjItMTYsMTYtMTZoMzUyYzguOCwwLDE2LDcuMiwxNiwxNgogICAgVjQxNnoiLz4KPGc+CiAgICA8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTEwMS43NDQsMzAzLjE1MmMwLTQuMjI0LDMuMzI4LTguODMyLDguNjg4LTguODMyaDI5LjU1MmMxNi42NCwwLDMxLjYxNiwxMS4xMzYsMzEuNjE2LDMyLjQ4CiAgICAgICAgYzAsMjAuMjI0LTE0Ljk3NiwzMS40ODgtMzEuNjE2LDMxLjQ4OGgtMjEuMzZ2MTYuODk2YzAsNS42MzItMy41ODQsOC44MTYtOC4xOTIsOC44MTZjLTQuMjI0LDAtOC42ODgtMy4xODQtOC42ODgtOC44MTZWMzAzLjE1MnoKICAgICAgICAgTTExOC42MjQsMzEwLjQzMnYzMS44NzJoMjEuMzZjOC41NzYsMCwxNS4zNi03LjU2OCwxNS4zNi0xNS41MDRjMC04Ljk0NC02Ljc4NC0xNi4zNjgtMTUuMzYtMTYuMzY4SDExOC42MjR6Ii8+CiAgICA8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTE5Ni42NTYsMzg0Yy00LjIyNCwwLTguODMyLTIuMzA0LTguODMyLTcuOTJ2LTcyLjY3MmMwLTQuNTkyLDQuNjA4LTcuOTM2LDguODMyLTcuOTM2aDI5LjI5NgogICAgICAgIGM1OC40NjQsMCw1Ny4xODQsODguNTI4LDEuMTUyLDg4LjUyOEgxOTYuNjU2eiBNMjA0LjcyLDMxMS4wODhWMzY4LjRoMjEuMjMyYzM0LjU0NCwwLDM2LjA4LTU3LjMxMiwwLTU3LjMxMkgyMDQuNzJ6Ii8+CiAgICA8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTMwMy44NzIsMzEyLjExMnYyMC4zMzZoMzIuNjI0YzQuNjA4LDAsOS4yMTYsNC42MDgsOS4yMTYsOS4wNzJjMCw0LjIyNC00LjYwOCw3LjY4LTkuMjE2LDcuNjgKICAgICAgICBoLTMyLjYyNHYyNi44NjRjMCw0LjQ4LTMuMTg0LDcuOTItNy42NjQsNy45MmMtNS42MzIsMC05LjA3Mi0zLjQ0LTkuMDcyLTcuOTJ2LTcyLjY3MmMwLTQuNTkyLDMuNDU2LTcuOTM2LDkuMDcyLTcuOTM2aDQ0LjkxMgogICAgICAgIGM1LjYzMiwwLDguOTYsMy4zNDQsOC45Niw3LjkzNmMwLDQuMDk2LTMuMzI4LDguNzA0LTguOTYsOC43MDRoLTM3LjI0OFYzMTIuMTEyeiIvPgo8L2c+CjxwYXRoIHN0eWxlPSJmaWxsOiNDQUQxRDg7IiBkPSJNNDAwLDQzMkg5NnYxNmgzMDRjOC44LDAsMTYtNy4yLDE2LTE2di0xNkM0MTYsNDI0LjgsNDA4LjgsNDMyLDQwMCw0MzJ6Ii8+Cjwvc3ZnPgo=");
    background-size: contain;
    background-repeat: no-repeat;
}
.icon-pdf--gross { width: 52px; height: 52px; }

.page-konto-rechnungen .rechnung-row {
    grid-template-columns: 2fr auto auto 1fr auto;
    align-items: center;
    gap: 20px;
}
.page-konto-rechnungen .rechnung-preis { font-weight: 700; white-space: nowrap; }
.rechnung-objekt { margin-top: 8px; }
.page-konto-rechnungen .rechnung-status { text-align: center; }
.page-konto-rechnungen .rechnung-actions { justify-content: flex-end; }
.page-konto-rechnungen .rechnung-pdf { justify-self: end; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 8px 12px; border-radius: 8px; border: 1.5px solid transparent; transition: border-color .15s ease, background-color .15s ease; }
.page-konto-rechnungen .rechnung-pdf:hover { border-color: var(--accent-yellow); background-color: var(--bg-white); }
.rechnung-pdf-label { font-size: .75rem; color: var(--body-text); }
.rechnung-pdf-icon-wrap { position: relative; }
.rechnung-pdf-download {
    position: absolute;
    right: 49px;
    bottom: 32px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-yellow);
    color: var(--body-text);
    border-radius: 50%;
    font-size: .85rem;
}
.rechnung-admin-links { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.link-btn { background: none; border: none; padding: 0; color: var(--body-text); border-bottom: 1px solid var(--body-text); cursor: pointer; font-size: .85rem; }
.link-btn:hover { border-bottom-color: transparent; }

.topbar-dropdown-nr {
    background: var(--body-bg);
    padding: 2px 10px;
    margin-left: 6px;
    border-radius: 15px;
    color: var(--body-text);
    font-size: 1rem;
    font-weight: 700;
}
/* Anmeldename unter der Kunden-Nr. */
.topbar-dropdown-name {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: var(--body-text);
}
.topbar-dropdown form { margin: 0; }
.topbar-dropdown a { text-decoration: none; }
.topbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    font-size: .95rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--body-text);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}
.topbar-dropdown-item:hover { background: var(--bg-hover); }
.topbar-dropdown-item--active { font-weight: 700; border-right: 5px solid var(--accent-yellow); }
.topbar-dropdown-item svg { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; }
.topbar-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.app-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.layout {
    display: flex;
    height: calc(100vh - 65px);
    overflow: hidden;
}

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    transition: width .2s ease;
    margin: 0 7px 7px 7px;
    border-radius: 0 0 12px 12px;
    border: .5px solid var(--border);
    box-shadow: 1px 0 8px rgba(0, 0, 0, .03);
}

.sidebar.collapsed,
.sidebar-pre-collapsed .sidebar { width: 80px; }
.sidebar.collapsed .nav-label,
.sidebar-pre-collapsed .sidebar .nav-label { display: none; }
.sidebar.collapsed #darkmode-toggle,
.sidebar-pre-collapsed .sidebar #darkmode-toggle { display: none; }
.sidebar.collapsed .nav-section,
.sidebar-pre-collapsed .sidebar .nav-section { margin-left: 20px; margin-right: 20px; }
.sidebar.collapsed .sidebar-nav a,
.sidebar-pre-collapsed .sidebar .sidebar-nav a {
    justify-content: center;
    min-height: 37px;
    /* Nur horizontal abweichend (Icon zentrieren, schmalere Sidebar) - vertikal
       (padding-top/bottom, Margin) identisch zum ausgeklappten Zustand, sonst
       ändert sich die Höhe jedes Items minimal und sie verrutschen beim Umschalten. */
    padding: 11px 8px 11px 0;
    margin: 2px 8px 2px 8px;
}

.sidebar-bottom-btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin: auto 22px 15px;
}
.sidebar.collapsed .sidebar-bottom-btn,
.sidebar-pre-collapsed .sidebar .sidebar-bottom-btn { justify-content: center; }
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    background: none;
    border: none;
    color: var(--muted-light);
    cursor: pointer;
    border-radius: 6px;
    font-size: 1.3rem;
}
.sidebar-collapse-btn:hover { background: var(--bg-hover); color: var(--muted-dense); }

.sidebar-brand {
    display: flex;
    align-items: center;
    height: 58px;
    padding: 15px 12px 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--muted-dense);
    text-decoration: none;
}
.sidebar-brand--collapsed {
    max-width: 90px;
    margin-left: -5px;
    overflow: hidden;
}

.sidebar-nav { position: relative; padding: 12px 0 0; flex: 1; }

/* Sliding Indicator (siehe initSlidingIndicator() in app.js): gleitet zur
   Position/Groesse des aktiven Eintrags, statt dass die Markierung springt. */
.sidebar-nav-indicator {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    border-radius: 6px;
    background: var(--sidebar-active);
    transition: transform .22s ease, width .22s ease, height .22s ease, opacity .3s ease;
    pointer-events: none;
    z-index: 0;
}

.sidebar-nav a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 37px;
    padding: 11px 15px;
    margin: 2px 16px;
    border-radius: 12px;
    color: var(--muted-dense);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
}

.sidebar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 2; }
.sidebar-nav a .ti { font-size: 1.3rem; }
.sidebar-nav a .nav-label { color: var(--body-text); line-height: 1; margin-top: 2px; }

.sidebar-nav a { border-left: 6px solid transparent; transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.sidebar-nav a:not(:active):hover { text-shadow: 0 0 .3px currentColor, 0 0 .3px currentColor; }
.sidebar-nav a:active { transform: translate(1px, 1px); }

.nav-icon-wrap { position: relative; display: inline-flex; }
/* Zähler offener Anfragen, gleiche Anmutung wie .topbar-support-badge */
.nav-badge-neu {
    position: absolute;
    top: -5px;
    right: -9px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--kal-buchung);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Das display: flex oben schlägt sonst das [hidden] des Browsers,
   und bei 0 bliebe eine leere rote Pille stehen. */
.nav-badge-neu[hidden] { display: none; }

.sidebar-nav .nav-section {
    display: block;
    margin: 13px 32px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-top: 1px solid rgba(0,0,0,0.08);
}


.main-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
    transition: opacity .12s ease;
}

.main-content {
    flex: 1;
    padding: 15px 40px 64px 40px;
    max-width: 1200px;
}
/* Seiten ohne Breitenbegrenzung (Multikalender, Preise-Multi, PDF-Vorschauen) */
.page-wide .main-content { max-width: none; }

/* ── Flash-Meldungen ──────────────────────────────────────────────────────── */
.flash-wrap { padding: 16px 0; }

.alert {
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: .9rem;
    overflow: hidden;
}
.alert[hidden] { display: none; }

.alert-success { background: var(--bg-green); display: flex; align-items: center; gap: 8px; }
.alert-icon { font-size: 1.5rem; flex-shrink: 0; margin: 0 10px; }
.alert-error,
.alert-danger  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; display: flex; align-items: center; gap: 8px; }
.alert-info {
    background: #fff3e1;
    color: #92751e;
    border: 1px solid #ffd246;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: .85rem;
    margin-bottom: 16px;
    margin-top: 7px;
}
.alert-info .alert-title { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: 5px; margin-top: 4px; }
.alert-info p { margin: 0; }

.alert--freischalten { justify-content: space-between; }
.alert-freischalten-preis { flex-shrink: 0; text-align: right; margin-left: 16px; }
.alert-freischalten-preis-betrag { display: block; font-size: 1.8rem; font-weight: 700; color: var(--body-text); line-height: 1.1; }
.alert-freischalten-preis-einheit { display: block; font-size: .75rem; white-space: nowrap; }

/* Geometrie wie .alert.alert-info; Farben bleiben Tokens, damit der Dark Mode mitzieht */
.info-box { background: var(--bg-yellow); border: 1px solid var(--accent-yellow); border-radius: 10px; padding: 16px; font-size: .9rem; margin-bottom: 25px; display: flex; align-items: center; gap: 8px; color: var(--text-yellow); }
.info-box .ti { font-size: 1.5rem; color: var(--text-yellow); }
.info-box--top { margin-top: 20px; }


/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn--xs { padding: 4px 10px; font-size: .78rem; }

.btn {
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 8px 18px;
    border-radius: 25px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    background: var(--accent);
    color: var(--btn-text-color);
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .15s ease;
}

.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { transform: translate(1px, 1px); }



.btn-secondary {
    padding: 7px 17px;
    background: color-mix(in srgb, var(--bg-white) 95%, transparent);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    color: var(--body-text);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.4);
    box-shadow: var(--glass-btn-shadow);
    border: 1px solid var(--border-input);
}
.btn-secondary:hover { text-decoration: none; background: color-mix(in srgb, var(--bg-white) 40%, transparent); }
[data-theme="dark"] .btn-secondary {
    background: var(--bg-white);
    border-color: rgba(255,255,255,.14);
    box-shadow: var(--glass-btn-shadow);
}
.btn-mini { padding: 7px 15px 6px 15px !important; font-size: .8rem; }
.btn-lg { padding: 9px 18px; font-size: .95rem; }
.btn-nav-inactive { opacity: .35; cursor: not-allowed; }
.btn-nav-inactive:hover { opacity: .35; }

.btn-success { background: var(--accent); color: #fff; padding: 9px 26px; margin-right: 16px; }
.btn-success:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }

.btn-danger { background: #ef4444; color: #fff; }
.btn-danger:hover { background: #ff505f; color: #fff; text-decoration: none; }

.btn svg { width: 14px; height: 14px; stroke-width: 2; vertical-align: middle; margin-right: 9px; }
.btn .ti { margin-right: 8px; font-size: 1rem; }


/* ── Sync-Schritte ────────────────────────────────────────────────────────── */

/* ── Formulare ────────────────────────────────────────────────────────────── */
.form-box {
  background: transparent;
  border-radius: 10px;
  padding: 15px 20px 20px 20px;
  margin-bottom: 25px;
  font-weight: 500;
  border: 1.5px solid var(--bg-white);
  margin-top: 10px;
}
.form-box.grow { flex: 1; min-width: 0; }

.hilfe-box { border-radius: 12px; padding: 16px 20px; background: var(--bg-white-light); }
.hilfe-box--mt { margin-top: 29px; }
.hilfe-box-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; margin-bottom: 12px; color: var(--muted); }
.hilfe-box-title svg { flex-shrink: 0; width: 18px; height: 18px; }
.hilfe-box p { margin: 0 0 10px; font-size: .85rem; font-weight: 400; color: var(--muted); line-height: 1.4; }
.hilfe-box p:last-child { margin-bottom: 0; }
.hilfe-box code { font-size: .8rem; background: var(--body-bg); padding: 1px 4px; border-radius: 4px; }

.form-box h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
  font-weight: 700;
}
.form-box h3:not(:first-of-type) {
  margin-top: 24px;
  border-top: 1.5px solid var(--bg-white);
  padding-top: 24px;
}

.form-box h4 {
    margin-top: 25px;
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-size: 1rem;
    font-weight: 600;
}

.form-box .btn,
.app-modal .btn {
    margin-right: 13px;
}

.textarea-counted { position: relative; }
/* Höhe setzt das Auto-Grow-JS der Objekt-Maske; ohne dies blitzt beim Tippen eine Scrollbar auf */
.obj-section textarea { overflow: hidden; }
.textarea-counted .textarea-counter {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: .78rem;
    color: var(--muted);
    background: var(--bg-white);
    padding: 0 5px;
    pointer-events: none;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
}
.form-row {
    display: flex;
    gap: 10px 25px;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 0;
}
.form-row--nowrap { flex-wrap: nowrap; }
.form-row--center { align-items: center; }
.form-box-duo { display: flex; gap: 25px; }
.form-box-duo > .form-box,
.form-box-duo > .form-group { flex: 1; min-width: 0; }
.form-row--equal > .form-group { flex: 1; min-width: 0; }
.form-group--grow { flex: 1; min-width: 0; }
.form-group--narrow { flex: 0 0 110px; }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
}

.form-group label {
    color: var(--muted);
    font-weight: 600;
    font-size: .85rem;
    padding-bottom: 2px;
}

.form-group--btn { justify-content: flex-end; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
    padding: 8px 12px;
    border: 1px solid var(--border-input);
    border-radius: 8px;
    font-family: inherit;
    background: var(--input-bg, #fff);
    color: var(--body-text);
    font-weight: 500;
    font-size: .95rem;
}

.app-modal-box .form-group input:not([type="checkbox"]):not([type="radio"]),
.app-modal-box .form-group select,
.app-modal-box .form-group textarea,
.app-modal-box .input-addon input,
.app-modal-box .input-addon .input-addon-text {
    border-color: var(--border-input-modal);
}

.app-modal-box .select2-container--default .select2-selection--single {
    background: var(--input-bg, #fff);
    border-color: var(--border-input-modal);
}

#neu-einheit-modal .select2-container {
    min-width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ── Floating Label ───────────────────────────────────────────────────────── */
.form-float {
    position: relative;
    margin-top: 0;
}
.form-float input[type=text],
.form-float input[type=number],
.form-float input[type=email],
.form-float input[type=tel] {
    padding: 22px 12px 7px !important;
    height: 48px !important;
}
.form-float label {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    max-width: calc(100% - 26px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 400;
    pointer-events: none;
    transition: all .15s ease;
    padding: 0;
}
.form-float input:not(:placeholder-shown) ~ label,
.form-float input:focus ~ label {
    top: 5px;
    transform: none;
    font-size: .75rem;
    color: var(--muted);
    font-weight: 600;
}

.form-group.grow { flex: 2; min-width: 160px; }
.input-addon { display: flex; align-items: stretch; border-radius: 4px; overflow: hidden; max-width: 190px; }
/* Mit Präfix UND Suffix (input-addon-text--end) braucht die Zeile mehr Platz
   als der Standardfall mit nur einem Textlabel. */
.input-addon:has(.input-addon-text--end) { max-width: 280px; }
.input-addon .input-addon-text {
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: var(--body-bg);
    border: 1px solid var(--border-input);
    border-right: none;
    border-right-color: currentcolor;
    border-radius: 6px 0 0 6px;
    color: var(--muted-dense);
    font-size: .9rem;
    white-space: nowrap;
}
.input-addon input {
    flex: 1;
    min-width: 0;
    width: 70px;
    padding: 7px 10px;
    font-size: .9rem;
    border: 1.2px solid var(--border-input);
    border-radius: 0 6px 6px 0;
    font-family: 'Mulish', system-ui, sans-serif;
    background: var(--input-bg, #fff);
    color: var(--body-text);
}
/* Support-Mail: Thema, Von und An untereinander - gleich breite Beschriftungen */
.support-mail-form .input-addon-text { min-width: 70px; }
.input-addon > input:first-child { border-radius: 6px 0 0 6px; }
.input-addon > input[type="number"]:first-child { border-radius: 6px; }
.input-addon-text ~ input { border-radius: 0 6px 6px 0 !important; }
.input-addon-text--end {
    border-right: 1px solid var(--border-input);
    border-left: none;
    border-radius: 0 6px 6px 0;
}
.input-addon input + .input-addon-text--end {
  border-radius: 0 6px 6px 0;
  background: transparent;
  border: none;
}
.input-addon--sm { max-width: 160px; }
.input-addon--full { max-width: 100%; flex: 1; }
.date-input-wrap { position: relative; }
.date-input-wrap input { width: 100%; padding-right: 36px; font-weight: 700 !important; }
.date-input-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 1rem;
    pointer-events: none;
}
.input-addon-value {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 7px 15px 7px 10px;
    font-size: .9rem;
    font-weight: 600;
    border: 1px solid var(--border-input);
    border-left: none;
    border-radius: 0 6px 6px 0;
    background: var(--bg-white-light);
    color: var(--body-text);
}
.input-addon-select {
  border: 1px solid var(--border-input); border-left: none;
  border-radius: 0 6px 6px 0; padding: 7px 8px;
  font-size: .9rem; font-family: inherit; background: var(--input-bg, #fff); color: var(--body-text);
}

/* ── Preis-Einstellung Layout ────────────────────────────────────────────── */
.einst-layout { display: flex; gap: 32px; align-items: flex-start; margin-top: 1px; }
.einst-nav {
  flex: 0 0 220px; display: flex; flex-direction: column; gap: 3px;
  background: var(--sidebar-bg); border-radius: 8px; padding: 6px 11px 6px 11px;
  min-width: 170px;
  margin-top: 10px;
}
.einst-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 6px;
  color: var(--body-text);
  text-decoration: none;
}
/* Ab Tablet bleibt die Navigation beim Scrollen stehen; unter 640px liegt sie als
   Zeile ueber dem Inhalt (siehe mobile.css) und darf nicht kleben. Bezugspunkt ist
   .main-wrap, der eigentliche Scroll-Container. */
@media (min-width: 641px) {
    .einst-nav-wrap { position: sticky; top: 16px; align-self: flex-start; }
}
.einst-nav-divider {
  margin: 0 1px 5px 1px;
  padding: 8px 5px 5px 10px;
  border-bottom: 1px solid var(--border);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
}
.einst-nav-divider--first { margin-top: 0; }
.einst-nav-item:hover { background: var(--bg-hover); text-decoration: none; }
.einst-nav-item--active { background: var(--sidebar-active); }
.einst-content {
  flex: 1;
  min-width: 0;
  max-width: 922px;
}

/* ── Form-Checks (Radio/Checkbox) ────────────────────────────────────────── */
.form-check { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.form-check--inline { flex-wrap: wrap; gap: 8px; }
.form-check--gap-lg { gap: 16px 48px; }
.form-check-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 100px; }
.form-check label { font-size: .9rem; cursor: pointer; margin: 0; }

input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    border: 1.5px solid var(--border-input);
    border-radius: 50%;
    background: var(--bg-white);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: background .15s ease, border-color .15s ease;
}
input[type=radio]::after {
    content: '';
    width: 13px;
    height: 13px;
    background: var(--accent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    transform: scale(0);
    transition: transform .12s ease;
}
input[type=radio]:checked {
    background: var(--bg-white);
    border-color: var(--border);
}
input[type=radio]:checked::after { transform: scale(1); }

input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    border: 1.5px solid var(--border-input);
    border-radius: 5px;
    background: var(--bg-white);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: background .15s ease, border-color .15s ease;
}
input[type=checkbox]::after {
    content: '';
    width: 11px;
    height: 11px;
    background: var(--body-text);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    transform: scale(0);
    transition: transform .12s ease;
}
input[type=checkbox]:checked {
    background: var(--bg-white);
    border-color: var(--border);
}
input[type=checkbox]:checked::after { transform: scale(1); }
.form-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; margin: 0 15px; }
.form-switch input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.form-switch-track { position: relative; width: 55px; height: 24px; border: none; background: var(--border-multi); border-radius: 999px; transition: background .2s; flex-shrink: 0; }
.form-switch-track::after { content: ''; position: absolute; top: 4px; left: 4px; width: 27px; height: calc(100% - 8px); border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s; }
.form-switch input[type=checkbox]:checked + .form-switch-track { background: var(--accent); }
.form-switch input[type=checkbox]:checked + .form-switch-track::after { left: calc(100% - 29px - 2px); }
.form-switch-label { font-size: .9rem; color: var(--muted-heavy); }
.form-switch input[type=checkbox]:checked ~ .form-switch-label .form-switch-off { display: none; }
.form-switch input[type=checkbox]:not(:checked) ~ .form-switch-label .form-switch-on { display: none; }
.form-input { width: 100%; padding: 7px 12px; border: 1px solid var(--border-input); border-radius: 6px; font-size: .9rem; font-family: inherit; font-weight: 600; background: var(--input-bg, #fff); color: var(--body-text); outline: none; transition: border-color .15s, box-shadow .15s; }
textarea.form-input { padding-top: 10px; padding-bottom: 10px; }
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74,96,201,.15); }
.form-input[readonly] { background: transparent; box-shadow: none; cursor: default; pointer-events: none; user-select: text; }
.form-input[readonly]:hover { border-color: var(--border-input); }
/* readonly-Felder, die einen Datepicker öffnen, müssen klickbar bleiben */
.form-input--picker[readonly] { pointer-events: auto; cursor: pointer; background: var(--bg-white); }
.code-font,
.widget-code textarea[readonly] {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .82rem;
    font-weight: 400;
}
/* readonly Code-Textareas zum Markieren/Kopieren müssen klickbar bleiben */
.widget-code textarea[readonly] {
    pointer-events: auto;
    cursor: text;
    background: #1d2230;
    color: #e3e7f0;
    border-color: #344258;
}
.form-select { padding: 7px 10px; border: 1px solid var(--border-input); border-radius: 4px; font-size: .9rem; font-family: inherit; background: var(--input-bg, #fff); color: var(--body-text); }
.form-select-sm { padding: 5px 8px; border: 1px solid var(--border-input); border-radius: 4px; font-size: .85rem; font-family: inherit; background: var(--input-bg, #fff); color: var(--body-text); }
.form-textarea { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--border-input); border-radius: 4px; font-size: .9rem; font-family: inherit; resize: vertical; background: var(--input-bg, #fff); color: var(--body-text); }
.form-hint { color: var(--muted-heavy); font-size: .85rem; font-weight: 400; }

/* ── Tabellen ─────────────────────────────────────────────────────────────── */

.btn-icon[hidden] { display: none; }
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    padding: 7px 15px;
    background: var(--bg-white);
    color: var(--body-text);
    border-radius: 25px;
    text-decoration: none;
    transition: background-color .2s ease;
    border: 1px solid var(--border-input);
}
.btn-icon:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 8%, #fff); }

.btn-icon .ti {
    margin-right: 2px;
    color: var(--body-text);
    font-size: 1.1rem;
}
#kal-heatmap-toggle .ti { margin-right: 7px; }

.btn-icon svg { width: 16px; height: 16px; stroke-width: 2; }
.btn-icon--danger { color: inherit; font-size: .95rem; border-color: transparent; }
.btn-icon--danger:hover { background: #fee2e2; }
.btn-icon-placeholder { display: inline-flex; width: calc(2 * 16px + 16px + 2px); flex-shrink: 0; }

/* ── Karten-Grid ──────────────────────────────────────────────────────────── */
/* ── View Toggle ──────────────────────────────────────────────────────────── */
.view-toggle {
    position: relative;
    display: inline-flex;
    gap: 3px;
    margin: 0 0 15px 0;
    background: color-mix(in srgb, var(--bg-white) 90%, transparent);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-radius: 30px;
    padding: 4px;
    box-shadow: var(--glass-shadow);
}
[data-theme="dark"] .view-toggle {
    border-color: rgba(255,255,255,.12);
    box-shadow: var(--glass-shadow);
}
/* Sliding Indicator (siehe initSlidingIndicator() in app.js): position:relative +
   z-index:1 auf .vt-tab, damit der Tab-Text ueber der positionierten Markierung
   liegt statt darunter zu verschwinden. */
.view-toggle .vt-indicator {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    border-radius: 20px;
    background: var(--sidebar-active);
    transition: transform .22s ease, width .22s ease, height .22s ease;
    pointer-events: none;
    z-index: 0;
}
.vt-tab {
    position: relative;
    z-index: 1;
    font-size: .9rem;
    padding: 7px 16px;
    border-radius: 20px;
    color: var(--body-text);
    text-decoration: none;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    white-space: nowrap;
    text-align: center;
    min-width: 72px;
    user-select: none;
    -webkit-user-drag: none;
}
.vt-tab .ti {
    margin-right: 4px;
}
.vt-tab .ti:last-child {
    margin-right: 0;
    font-size: 1.1rem;
}
/* Gilt auch für den aktiven Reiter, sonst schlägt a:hover mit underline durch */
.vt-tab:hover { text-decoration: none; }
.app-modal-box .vt-tab { font-size: .95rem; }
/* Halbtransparent, damit sich Hover vom deckenden .vt-tab--active abhebt.
   Der aktive Reiter selbst reagiert nicht – er ist ja schon dort. */
.vt-tab:not(.vt-tab--active):hover { text-shadow: 0 0 .3px currentColor, 0 0 .3px currentColor; }
.vt-tab:not(.vt-tab--active):active { transform: translate(1px, 1px); }
[data-theme="dark"] .vt-tab:not(.vt-tab--active):hover { background: rgba(255,255,255,.08); }

/* Jahr-/Monatsnavigation mit Pfeilen: Vor/Zurück plus optionalem Heute-Button
   und einer Anzeige (Jahr, Monat, Datum) dazwischen - eng zusammenstehend,
   damit sie als eine Einheit wirken statt gleichmaessig verteilter Buttons.
   Gemeinsam genutzt von /preise (Saisonpreise/Preisliste) und /kalender. */
.jahr-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}
.jahr-nav .btn-icon {
    padding: 7px 15px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-white) 90%, transparent);
    border: 2px solid var(--bg-white);
}
.jahr-nav .btn-icon:hover { background: var(--sidebar-active); }
.jahr-nav > :first-child { border-radius: 25px 6px 6px 25px; color: var(--muted-heavy); }
.jahr-nav > :last-child { border-radius: 6px 25px 25px 6px; }
.jahr-nav .btn .ti { font-size: 1.1rem; margin-right: 0; }

/* Folgejahr-Hinweis: steht im ">"-Button selbst statt als eigener Tab -
   zeigt nur per rotem Punkt an, falls dort noch keine Preise hinterlegt sind. */
#preis-jahr-next { gap: 4px; }
.jahr-folge-hinweis {
    position: relative;
    color: var(--muted-light);
    font-size: .85rem;
}
.jahr-folge-hinweis--leer::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kal-buchung);
}

/* Wer Bewegung abbestellt hat, bekommt nur den Farbwechsel */
@media (prefers-reduced-motion: reduce) {
    .vt-tab { transition: background .18s ease, color .18s ease; }
    .vt-tab:not(.vt-tab--active):hover { transform: none; }
}
.vt-tab--active {
    background: var(--sidebar-active);
    color: var(--body-text);
    /* Fett-Optik ohne echtes font-weight: das würde die Zeichenbreite ändern
       und dadurch beim Tab-Wechsel die Breite/Position aller Tabs springen
       lassen. text-shadow simuliert den fetten Look ohne Breitenänderung. */
    text-shadow: 0 0 .2px currentColor, 0 0 .2px currentColor;
    /* führt auf die Seite, auf der man schon ist – kein Klickangebot */
    cursor: default;
}
[data-theme="dark"] .vt-tab--active {
    background: var(--sidebar-active);
}

.vt-xxl .vt-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.vt-xxl .vt-tab .ti { margin-right: 0; font-size: 1rem; line-height: 1; }


.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 21px;
    margin-top: 16px;
    margin-bottom: 32px;
}
.card-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 30px; }

.card {
    border-radius: 18px;
    padding: 16px 20px;
    background: var(--bg-white);
    font-weight: 400;
}

.card h3 { margin: 0 0 5px; font-size: 1.1rem; }
.card p  { margin: 0 0 16px; }

/* ── Objekt-Gruppe ────────────────────────────────────────────────────────── */
.objekt-leer { padding: 12px 24px; margin: 0; color: var(--muted); font-size: .9rem; }
.channel-logo { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: 7px; border-radius: 4px; }
.badge { display: inline-block; padding: 4px 10px 5px 10px; border-radius: 6px; font-size: .8rem; font-weight: 400; text-wrap: nowrap; background: var(--body-bg); }
.btn .badge, .vt-tab .badge {
    border-radius: 15px;
    margin-left: 6px;
    padding: 2px 8px 2px 8px;
    line-height: 1.3;
    color: var(--body-text);
    background: var(--bg-white);
    font-size: .75rem;
}
.btn .badge, .vt-tab--active .badge { background: var(--body-bg); }
.vt-tab--active .badge { background: var(--body-bg); }
.badge--muted   { background: var(--bg-white); color: var(--muted); }
/* Gleiche Farbwelt wie der erledigte Schritt in .li-item--step */
.badge--success { background: var(--bg-green); color: var(--text-green); }
.badge--inaktiv { margin-top: 16px; background: var(--bg-red); color: var(--text-red); border-color: var(--border-red); }
/* Tokens statt fester Farbe, damit der Dark Mode mitzieht */
.badge--frei    { background: var(--bg-green); color: var(--text-green); }



/* ── Request-Preview ─────────────────────────────────────────────────────── */
.mt-16 { margin-top: 16px; }
.mb-2 { margin-bottom: 32px; }
.form-inline { display: inline; margin-left: 16px; }
.li-box-body { padding: 16px 20px 20px; }
.list-box--indent { margin-left: 16px; }
.input-w-260 { width: 260px; }
.form-group--mt { margin-top: 16px; }
.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 20px; margin-bottom: 30px; }
.form-actions .del-form { margin-left: auto; }
/* Löst sich beim Scrollen von seiner Stelle und bleibt am oberen Rand von .main-wrap
   (dem Scroll-Container) stehen; der Hintergrund deckt den darunter laufenden Inhalt ab */
.form-actions--sticky { position: sticky; top: 0; z-index: 10; padding: 10px 0; background: var(--body-bg); }
.page-aside { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: start; margin-top: 16px; }
.page-aside--wide-right { grid-template-columns: 1fr 380px; }

.input-password-wrap { position: relative; }
.input-password-wrap .form-input { padding-right: 45px; }
.password-toggle-btn {
    position: absolute;
    right: 11px;
    top: 0;
    bottom: 0;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--muted-light);
    display: flex;
    align-items: center;
    border-radius: 4px;
    font-size: 1.25rem;
}
.password-toggle-btn:hover { color: var(--muted); }
.password-toggle-btn svg { width: 18px; height: 18px; stroke-width: 2; }


.hidden { display: none !important; }
.invisible { visibility: hidden !important; }


/* ── Buchungs-Status ──────────────────────────────────────────────────────── */


/* ── Status-LED (systemweit: /nachrichten, /cockpit, /ical) ───────────────── */
.status-led { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-left: 2px; margin-right: 2px; flex-shrink: 0; background: currentColor; animation: status-led-pulse 1.8s ease-in-out infinite; }
.status-led--blue       { color: #00d1ff; }
.status-led--blue-light { color: #00d1ff; }
.status-led--yellow     { color: #f7b650; }
.status-led--green      { color: var(--bg-green); }
.status-led--red        { color: #dc3338; animation: none; }
.status-led--off        { color: var(--body-bg); animation: none; }
.status-led--grey       { color: var(--border); animation: none; }
@keyframes status-led-pulse {
    0%   { box-shadow: 0 0 0 0 currentColor; }
    60%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Hilfstexte ───────────────────────────────────────────────────────────── */
.meta      { color: var(--body-text); font-size: .9rem; margin-bottom: 24px; }
.text-muted { color: var(--muted-heavy); font-size: .9rem; font-weight: 400; }

/* ── Fehlerseiten ─────────────────────────────────────────────────────────── */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    text-align: center;
}
.error-code {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
    opacity: .25;
    margin-bottom: 8px;
}
.error-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--body-text);
}
.error-msg {
    color: var(--muted);
    margin-bottom: 28px;
    max-width: 380px;
}
.error-detail {
    background: var(--bg-white);
    border: 1px solid var(--border-input);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: .8rem;
    color: #991b1b;
    text-align: left;
    max-width: 600px;
    white-space: pre-wrap;
    word-break: break-word;
}


.page-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
/* Der Zurück-Button hat keine Text-Baseline wie das h1 daneben - align-items:
   baseline setzt ihn dadurch etwas zu tief an; hier leicht nach oben rücken. */
.page-header > .btn-icon:first-child { position: relative; top: -2px; }
.page-header h1 { margin-right: 48px; }
.page-header .meta { margin: 0; width: 100%; }
.page-header-info { display: flex; flex-direction: column; gap: 3px; }
.page-header-info h1 { margin: 0; }
.page-header-sub { font-size: .88rem; color: var(--muted); }

/* ── Detail-Tabellen & Nachrichten-Hover (systemweit) ────────────────────── */
.tbl-rows { display: flex; flex-direction: column; gap: 2px; padding: 5px 8px; }
.tbl-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 4px 0; font-size: .95rem; border-radius: 6px; }
/* :not(.badge) – ein Badge ist einziges Kind seiner Zelle und damit auch
   first-child; das display:flex wuerde es zum Block strecken. */
.tbl-row span:first-child:not(.badge) { display: flex; align-items: center; gap: 13px; }
.notiz-add-btns { gap: 16px !important; }
.tbl-row .pre-wrap { display: block; flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.tbl-row span:last-child { white-space: nowrap; }
.tbl-row span.pre-wrap { white-space: pre-wrap; }
.input-addon .select2-container { flex: 1; min-width: 0; }
.input-addon .select2-container--default .select2-selection--single { border-radius: 0 4px 4px 0; }

/* ── Page-Nav (Preise) ──────────────────────────────────────────────────── */
.page-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}


/* ── App Modal ────────────────────────────────────────────────────────────── */
.app-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s;
}
.app-modal.hidden { display: flex !important; }
.app-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.app-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
}
.app-modal-box {
    position: relative;
    z-index: 1;
    background: color-mix(in srgb, var(--body-bg) 92%, transparent);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.5);
    width: 100%;
    max-width: 510px;
    padding: 20px 29px 29px 29px;
    transform: translateY(-12px) scale(.97);
    transition: transform .2s ease;
}
[data-theme="dark"] .app-modal-box {
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 8px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.app-modal--open .app-modal-box {
    transform: translateY(0) scale(1);
}
.app-modal-box--sm { max-width: 500px; }
.app-modal-box--lg { max-width: 780px; max-height: 90vh; overflow-y: auto; min-height: 470px; }
.app-modal-box--pr {
    max-width: 780px;
    max-height: 80vh;
    min-height: 615px;
    background: var(--body-bg);
    display: flex;
    flex-direction: column;
}
.app-modal-box--pr #pr-modal-ergebnisse {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 8px;
    max-height: 395px;
}
.app-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-weight: 700;
    font-size: 1.3rem;
}
.app-modal-header:not(:has(+ .app-modal-sub)) { margin-bottom: 16px; }
#saison-modal .app-modal-header,
#saison-modal .app-modal-sub,
#preis-modal .app-modal-header,
#preis-modal .app-modal-sub,
#pr-modal .app-modal-header,
#saison-del-modal .app-modal-header,
#saison-entfernen-modal .app-modal-header,
#bel-edit-modal .app-modal-header { cursor: move; }
#saison-modal .app-modal-header > span:first-child,
#preis-modal .app-modal-header > span:first-child,
#pr-modal .app-modal-header > span:first-child,
#saison-del-modal .app-modal-header > span:first-child,
#saison-entfernen-modal .app-modal-header > span:first-child,
#bel-edit-modal .app-modal-header > span:first-child { flex: 1; }
/* Generisches "Verschieben"-Icon fuer alle per Header verschiebbaren app-modal-Fenster -
   per Maske eingefaerbt (statt Icon-Font), damit es Light/Dark-Theme automatisch folgt. */
.app-modal-drag-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 32px;
    flex-shrink: 0;
    background-color: var(--muted-heavy);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-miterlimit='10'%3E%3Cpath d='M11.05,22.5,5.91,17.36a2,2,0,0,1-.59-1.43,2,2,0,0,1,2-2,2,2,0,0,1,1.43.59l1.32,1.32V6.38a2,2,0,0,1,1.74-2,1.89,1.89,0,0,1,1.52.56,1.87,1.87,0,0,1,.56,1.34V12l5,.72a1.91,1.91,0,0,1,1.64,1.89h0a17.18,17.18,0,0,1-1.82,7.71l-.09.18'/%3E%3Cpolyline points='19.64 7.23 22.5 4.36 19.64 1.5'/%3E%3Cline x1='15.82' y1='4.36' x2='22.5' y2='4.36'/%3E%3Cpolyline points='4.36 7.23 1.5 4.36 4.36 1.5'/%3E%3Cline x1='8.18' y1='4.36' x2='1.5' y2='4.36'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-miterlimit='10'%3E%3Cpath d='M11.05,22.5,5.91,17.36a2,2,0,0,1-.59-1.43,2,2,0,0,1,2-2,2,2,0,0,1,1.43.59l1.32,1.32V6.38a2,2,0,0,1,1.74-2,1.89,1.89,0,0,1,1.52.56,1.87,1.87,0,0,1,.56,1.34V12l5,.72a1.91,1.91,0,0,1,1.64,1.89h0a17.18,17.18,0,0,1-1.82,7.71l-.09.18'/%3E%3Cpolyline points='19.64 7.23 22.5 4.36 19.64 1.5'/%3E%3Cline x1='15.82' y1='4.36' x2='22.5' y2='4.36'/%3E%3Cpolyline points='4.36 7.23 1.5 4.36 4.36 1.5'/%3E%3Cline x1='8.18' y1='4.36' x2='1.5' y2='4.36'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
@media (max-width: 900px) {
    #saison-modal .app-modal-header,
    #preis-modal .app-modal-header,
    #pr-modal .app-modal-header,
    #saison-del-modal .app-modal-header,
    #saison-entfernen-modal .app-modal-header,
    #bel-edit-modal .app-modal-header { cursor: auto; }
    .app-modal-drag-icon { display: none; }
}
.app-modal-sub {
    font-size: .9rem;
    margin-bottom: 10px;
    font-weight: 700;
}
.app-modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--body-text);
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background .15s, color .15s, transform .2s ease;
}
.app-modal-close:hover { color: var(--body-text); background: var(--bg-white); box-shadow: var(--glass-btn-shadow); transform: rotate(90deg); }
.app-modal-footer { display: flex; gap: 8px; margin-top: 32px; }
.app-modal-box .form-group { margin-top: 15px; }

.del-modal-text { margin: 0 0 20px; font-size: .95rem; font-weight: 400; }
#del-modal-confirm { padding-left: 28px; padding-right: 28px; margin-right: 16px; }

.saison-entfernen-liste { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.saison-entfernen-liste li { font-size: .9rem; background: var(--body-bg); border-radius: 8px; padding: 7px 12px; }


.funktionen-card { position: relative; padding-top: 30px; }
.funktionen-card-icon { position: absolute; top: 16px; right: 16px; }
.funktionen-card-icon svg { width: 29px; height: 29px; display: block; }
.funktionen-card-icon .ti { font-size: 1.6rem; }
.funktionen-icon-img { height: 29px; width: auto; display: block; }
.funktionen-card--dev { opacity: .75; }
.funktionen-card--gesperrt { opacity: .75; }
.badge-dev {
    position: absolute;
    top: -2px;
    left: 140px;
    font-size: .7rem;
    font-weight: 600;
    background: #FFD246;
    color: #000;
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}

.badge-neu { left: 21px; background: var(--accent-yellow); border-radius: 0 0 6px 6px; }

.badge-pro {
    position: absolute;
    top: -2px;
    left: 190px;
    font-size: .9rem;
    font-weight: 700;
    background: var(--accent-yellow);
    color: #000;
    border-radius: 0 0 6px 6px;
    padding: 3px 10px;
    white-space: nowrap;
}

.btn-disabled { cursor: not-allowed; opacity: .55; pointer-events: none; }

/* ── Scrollbars (theme-adaptive) ─────────────────────────────────────────── */
* { scrollbar-color: var(--border) var(--body-bg); scrollbar-width: thin; }
::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-track { background: var(--body-bg); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Statistik ─────────────────────────────────────────────────────────────── */



/* ── Angebote ──────────────────────────────────────────────────────────────── */
.li-item.ang-item { display: grid; grid-template-columns: 100px 1.2fr 170px 1.5fr auto; align-items: center; gap: 16px; flex-direction: unset; }
.ang-item-typ { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ang-badge { display: inline-block; font-size: 1.2rem; font-weight: 700; padding: 3px 10px; border-radius: 7px; color: #fff; background: linear-gradient(125deg,#0b7db7 0%,#0b7db7 38%,#c92a2a 62%,#c92a2a 100%); }
.ang-badge--unvollstaendig { background: var(--border); color: var(--muted); }
/* Angebots-Icon vor der Zahl mit etwas Luft dahinter */
.ang-badge .ti-tag { font-size: 1.2rem; margin-right: 13px; }
/* Das Prozentzeichen steht nur hier - die Views geben allein die Zahl aus */
.ang-badge::after { content: "%"; }
.ang-item-art { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ang-item-actions { gap: 10px; }

@media (max-width: 768px) {

    /* Zeile 1: Badge · Typname · Aktionen — Zeile 2: Zeitraum — Zeile 3: Angebotsart */
    .li-item.ang-item {
        grid-template-columns: 64px 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 5px 12px;
    }
    .ang-item-badge   { grid-row: 1; grid-column: 1; }
    .ang-item-typ     { grid-row: 1; grid-column: 2; }
    .ang-item-actions { grid-row: 1 / 4; grid-column: 3; flex-direction: column; align-items: flex-end; justify-content: center; }
    .ang-item-zeit    { grid-row: 2; grid-column: 1 / 3; }
    .ang-item-art     { grid-row: 3; grid-column: 1 / 3; white-space: normal; }

    .app-modal-box,
    .app-modal-box--lg {
        width: calc(100% - 24px);
        max-width: none;
        min-height: 0;
        max-height: calc(100vh - 24px);
        padding: 16px 18px 20px;
    }
}
.ang-art-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 2px solid var(--border); border-radius: 8px; cursor: pointer; font-size: .9rem; user-select: none; }
.ang-art-tab input[type=radio] { display: none; }
.ang-art-tab--active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }


/* ── Utilities (Ersatz für Inline-Styles) ──────────────────────────────────── */
.mb-1 { margin-bottom: 16px; }
.mb-15 { margin-bottom: 24px; }
.mt-1 { margin-top: 16px; }
.mt-2 { margin-top: 32px; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.w-80 { width: 80px; }
.w-100 { width: 100px; }
.card-body { padding: 0 10px 10px; }
.card-body--col { display: flex; flex-direction: column; gap: 12px; }
.card-body--row { display: flex; gap: 12px; align-items: flex-end; }
.card-body--wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.m-0 { margin: 0; }
.fs-85 { font-size: .85rem; }
.btn-row { display: flex; gap: 24px; }
.page-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-header-row h1 { margin: 0; }
.ta-c { text-align: center; }
.page-header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.fs-8 { font-size: .8rem; }
.pt-15 { padding-top: 24px; }
.d-flex { display: flex; }
.gap-5 { gap: 8px; }
.ai-c { align-items: center; }
.form-row--wrap { gap: 12px; flex-wrap: wrap; }
.form-group--btm { align-self: flex-end; padding-bottom: 7px; }
.ang-f-naechte-group { min-width: 80px; }
.mt-0 { margin-top: 0; }
.ml-5 { margin-left: 8px; }
.ml-16 { margin-left: 16px; }
.d-inline { display: inline; }
.pre-wrap { white-space: pre-wrap; }
.fw-400 { font-weight: 400; }

/* Promo-Einblendung: genutzt von .auth-promo-* (login) */
@keyframes promo-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hover-Tooltip (systemweit, siehe public/js/app-tooltip.js: [data-tip] / [title]) ── */
.app-tip {
    position: fixed;
    z-index: 1200;
    max-width: 320px;
    padding: 12px 13px 14px 12px;
    /* Liquid-Glass-Optik: teiltransparenter, weichgezeichneter Hintergrund statt
       flächigem Weiß - wirkt wie durch Glas gesehen, egal was darunterliegt. */
    background: color-mix(in srgb, var(--bg-white) 72%, transparent);
    backdrop-filter: blur(14px) saturate(1.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    color: var(--body-text);
    font-size: .85rem;
    line-height: 1.4;
    border-radius: 8px;
    border-left: 8px solid transparent;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.35);
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease;
}
.app-tip--visible { opacity: 1; transform: translateY(0); }
.app-tip::first-line { font-weight: 700; font-size: .85rem; }
.app-tip--single::first-line { font-weight: 500; font-size: .85rem; }
.app-tip--b { border-left-color: #c54d4d; }
.app-tip--r { border-left-color: #f39832; }
.app-tip--s { border-left-color: #4977ae; }
.app-tip--c { border-left-color: #a3a2b6; }

/* ── POI-Liste "In der Nähe" (Objekt bearbeiten) ── */
.poi-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin: 15px 0;
}
.poi-item {
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--bg-white);
    font-size: .8rem;
    border: 1px solid var(--border);
}
.poi-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Änderungshistorie einer Belegung (partials/bel_modified.php):
   im Cockpit unter der Ereigniszeile, unter /gast/…/kommunikation über dem Layout */
.bel-mody {
    margin: 0 8px 8px;
    border-top: 2px solid var(--body-bg);
    border-radius: 0 0 8px 8px;
    background: var(--bg-white);
    overflow: hidden;
}

.bel-mody summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    font-size: .9rem;
    font-weight: 400;
    color: var(--muted-heavy);
    cursor: pointer;
    user-select: none;
}

.bel-mody-list {
    margin: 0;
    padding: 2px 17px 12px;
    list-style: none;
}

.bel-mody-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
    font-size: .85rem;
}

.bel-mody-feld {
    min-width: 88px;
    font-weight: 600;
}

.bel-mody-wert--alt {
    color: var(--muted-heavy);
    text-decoration: line-through;
}

.bel-mody-wert--neu {
    font-weight: 600;
}

.bel-mody-pfeil {
    color: var(--muted);
}

.bel-mody-meta {
    margin-left: auto;
    color: var(--muted);
    font-size: .8rem;
}