/* =========================================================
   DEMO PLANER – UI V2

   Aufbau:
   1. Variablen und Basis
   2. Ladebildschirm und Login
   3. Appbar
   4. App-Inhalt
   5. Sidebar und Untermenüs
   6. Startauswahl
   7. Allgemeine Oberflächen
   8. Hofbuch
   9. Mobile Ansicht
   10. Hilfsklassen
   ========================================================= */


/* =========================================================
   1. VARIABLEN UND BASIS
   ========================================================= */

:root {
    --brand: #e31010;
    --brand-dark: #b50c12;
    --brand-soft: #fff0f1;

    --background: #f2f3f5;
    --surface: #ffffff;
    --surface-soft: #f7f8fa;

    --text: #242830;
    --heading: #16191f;
    --muted: #717b89;

    --border: #dce1e7;
    --border-strong: #c9d0d8;

    --sidebar: #181c22;
    --sidebar-surface: #232831;
    --sidebar-hover: #2b313a;
    --sidebar-text: #f4f6f8;
    --sidebar-muted: #99a3b0;

    --danger: #c93131;
    --danger-soft: #fff0f0;

    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 18px;

    --appbar-height: 76px;
    --sidebar-width: 320px;
    --submenu-width: 270px;

    --shadow-small:
        0 3px 12px rgba(22, 28, 36, 0.06);

    --shadow-medium:
        0 14px 38px rgba(22, 28, 36, 0.1);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    background: var(--background);
    color: var(--text);
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
}

body.menu-open {
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    display: block;
    height: auto;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}


/* =========================================================
   2. LADEBILDSCHIRM UND LOGIN
   ========================================================= */

.app-boot-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: grid;
    place-items: center;

    padding: 24px;
    background: var(--surface);
}

.app-boot-card {
    width: min(420px, 100%);
    text-align: center;
}

.app-boot-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.app-boot-logo img {
    width: 116px;
    height: 116px;
    object-fit: contain;
}

.app-boot-spinner {
    width: 34px;
    height: 34px;

    margin: 0 auto 22px;

    border: 3px solid #eceff3;
    border-top-color: var(--brand);
    border-radius: 50%;

    animation: regu-spin 700ms linear infinite;
}

.app-boot-card h1 {
    margin-bottom: 8px;
    color: var(--heading);
    font-size: 1.35rem;
}

.app-boot-card p {
    margin-bottom: 0;
    color: var(--muted);
}

@keyframes regu-spin {
    to {
        transform: rotate(360deg);
    }
}

.login-screen {
    position: fixed;
    inset: 0;
    z-index: 9000;

    display: grid;
    place-items: center;

    padding: 24px;
    background: var(--background);
}

.login-box {
    width: min(420px, 100%);

    display: grid;
    gap: 16px;

    padding: 32px;

    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    background: var(--surface);
    box-shadow: var(--shadow-medium);
}

.login-box img {
    width: 104px;
    height: 104px;
    margin: 0 auto;
    object-fit: contain;
}

.login-box h2 {
    margin-bottom: 4px;
    color: var(--heading);
    text-align: center;
}

.login-box label {
    display: grid;
    gap: 6px;
}

.login-box label span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.login-box input {
    width: 100%;
    min-height: 44px;
}

.login-box button {
    min-height: 44px;
}

.login-error {
    min-height: 20px;
    margin-bottom: 0;

    color: var(--danger);
    text-align: center;
    font-size: 0.82rem;
}


/* =========================================================
   3. APPBAR
   ========================================================= */

#app {
    min-height: 100vh;
}

.regu-appbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;

    height: var(--appbar-height);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 0 22px;

    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow-small);

    backdrop-filter: blur(16px);
}

.regu-appbar-left,
.regu-appbar-right {
    display: flex;
    align-items: center;
    min-width: 0;
}

.regu-appbar-left {
    gap: 13px;
}

.regu-appbar-right {
    margin-left: auto;
}

.app-menu-toggle {
    position: static;

    width: 46px;
    height: 46px;
    min-width: 46px;

    display: grid;
    place-content: center;
    gap: 5px;

    padding: 0;

    border: 0;
    border-radius: 13px;

    background: var(--sidebar);
    box-shadow: none;
}

.app-menu-toggle:hover {
    background: #0f1217;
}

.app-menu-toggle span {
    width: 20px;
    height: 2px;

    display: block;

    border-radius: 999px;
    background: #ffffff;

    transition:
        transform 160ms ease,
        opacity 160ms ease;
}

.app-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform:
        translateY(7px) rotate(45deg);
}

.app-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.app-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform:
        translateY(-7px) rotate(-45deg);
}

.regu-appbar-logo {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    flex: 0 0 44px;
}

.regu-appbar-logo img {
    width: 41px;
    height: 41px;
    object-fit: contain;
}

.regu-appbar-title-area {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 10px;
}

.regu-appbar-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.regu-appbar-copy span {
    color: var(--muted);

    font-size: 0.65rem;
    line-height: 1.1;
    font-weight: 750;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.regu-appbar-copy strong {
    max-width: 320px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--heading);

    font-size: 1rem;
    line-height: 1.2;
    font-weight: 850;
}

.regu-appbar-back {
    min-height: 36px;

    padding: 8px 11px;

    border: 1px solid rgba(227, 16, 16, 0.2);
    border-radius: 10px;

    background: var(--brand-soft);
    color: var(--brand-dark);

    font-size: 0.75rem;
    font-weight: 800;
}

.regu-appbar-back:hover {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
}

.version-badge {
    padding: 6px 9px;

    border: 1px solid var(--border);
    border-radius: var(--radius-small);

    background: var(--surface-soft);
    color: var(--muted);

    font-size: 0.66rem;
    font-weight: 700;
}


/* =========================================================
   4. APP-INHALT
   ========================================================= */

.app-shell {
    min-height: 100vh;
}

.content-shell {
    width: 100%;
    min-width: 0;
    min-height: 100vh;

    padding:
        calc(var(--appbar-height) + 22px) 24px 34px;
}

.content-shell main {
    width: 100%;
    min-width: 0;
}

.tab-panel {
    display: none;
    width: 100%;
    min-width: 0;
}

.tab-panel.active {
    display: block;
}


/* =========================================================
   5. SIDEBAR UND UNTERMENÜS
   ========================================================= */

body.menu-open::before {
    content: "";

    position: fixed;
    inset:
        var(--appbar-height) 0 0 0;

    z-index: 800;

    background: rgba(13, 16, 21, 0.48);
    backdrop-filter: blur(2px);
}

.sidebar {
    position: fixed;

    top: var(--appbar-height);
    left: 0;
    bottom: 0;

    z-index: 900;

    width: var(--sidebar-width);
    max-width: calc(100vw - 24px);

    display: flex;
    flex-direction: column;

    padding: 20px 18px 18px;

    background: var(--sidebar);
    color: var(--sidebar-text);

    box-shadow:
        18px 0 50px rgba(7, 9, 12, 0.28);

    transform: translateX(-104%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        transform 190ms ease,
        opacity 150ms ease,
        visibility 190ms ease;
}

.app-shell.menu-open .sidebar {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sidebar-brand {
    display: none;
}

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: 9px;

    padding: 0 10px 14px 0;

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #59616d transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 7px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #59616d;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #747e8b;
}

.sidebar-quick-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.sidebar-quick-tab {
    min-width: 0;
    min-height: 88px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 12px 9px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;

    background: var(--sidebar-surface);
    color: var(--sidebar-text);

    text-align: center;
}

.sidebar-quick-tab strong {
    color: var(--sidebar-text);
    font-size: 0.82rem;
}

.sidebar-quick-tab small {
    color: var(--sidebar-muted);
    font-size: 0.62rem;
    line-height: 1.25;
}

.sidebar-quick-tab:hover {
    background: var(--sidebar-hover);
}

.sidebar-quick-tab.active {
    border-color: var(--brand);
    background: var(--brand);
}

.sidebar-quick-tab.active strong,
.sidebar-quick-tab.active small {
    color: #ffffff;
}

.sidebar-nav-divider {
    width: 100%;
    height: 1px;

    margin: 3px 0;

    background: rgba(255, 255, 255, 0.1);
}

.sidebar-menu-group {
    position: relative;
    width: 100%;
}

.sidebar-group-toggle {
    width: 100%;
    min-height: 67px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 12px 14px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;

    background: #22272f;
    color: var(--sidebar-text);

    text-align: left;
}

.sidebar-group-toggle:hover,
.sidebar-menu-group.open>.sidebar-group-toggle {
    border-color: rgba(255, 255, 255, 0.15);
    background: var(--sidebar-hover);
}

.sidebar-menu-group:has(.tab.active)>.sidebar-group-toggle {
    border-color: rgba(227, 16, 16, 0.55);
    background: rgba(227, 16, 16, 0.14);
}

.sidebar-group-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-group-copy strong {
    color: var(--sidebar-text);

    font-size: 0.8rem;
    line-height: 1.15;
}

.sidebar-group-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--sidebar-muted);

    font-size: 0.63rem;
    line-height: 1.2;
}

.sidebar-group-arrow {
    flex: 0 0 auto;

    color: #7f8996;
    font-size: 0.95rem;
}

.sidebar-submenu {
    position: fixed;

    top: var(--appbar-height);
    left: var(--sidebar-width);
    bottom: 0;

    z-index: 920;

    width: var(--submenu-width);

    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 24px 18px;

    border-left:
        1px solid rgba(255, 255, 255, 0.08);

    background: #252a33;

    box-shadow:
        16px 0 38px rgba(8, 10, 14, 0.2);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-10px);

    transition:
        opacity 150ms ease,
        transform 170ms ease,
        visibility 170ms ease;
}

.sidebar-menu-group.open>.sidebar-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.sidebar-submenu-head {
    display: flex;
    flex-direction: column;
    gap: 4px;

    margin-bottom: 13px;
    padding: 0 4px 16px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-submenu-head span {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 850;
}

.sidebar-submenu-head small {
    color: #929ba8;
    font-size: 0.66rem;
}

.sidebar-submenu .tab {
    width: 100%;
    min-height: 44px;

    display: flex;
    align-items: center;

    padding: 10px 12px;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;
    color: #bec5cf;

    text-align: left;
    font-size: 0.78rem;
    font-weight: 720;
}

.sidebar-submenu .tab:hover {
    background:
        rgba(255, 255, 255, 0.075);
    color: #ffffff;
}

.sidebar-submenu .tab.active {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
}

.sidebar-direct-tab,
.nix-easter-tab {
    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;

    padding: 10px 12px;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;
    color: #b7bfca;

    text-align: left;
    font-size: 0.76rem;
    font-weight: 720;
}

.sidebar-direct-tab:hover {
    background:
        rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.sidebar-direct-tab.active {
    background: var(--brand);
    color: #ffffff;
}

.sidebar-system {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    gap: 7px;

    margin-top: auto;
    padding-top: 10px;

    border-top:
        1px solid rgba(255, 255, 255, 0.1);
}


/* ---------------------------------------------------------
   Datenverwaltung
   --------------------------------------------------------- */

.sidebar-system-group {
    display: grid;
    gap: 7px;

    padding: 8px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.025);
}

.sidebar-system-label {
    padding: 0 2px;

    color: #7f8996;

    font-size: 0.53rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   Gemeinsame Systembuttons
   --------------------------------------------------------- */

.sidebar .sidebar-system-btn {
    width: 100%;
    min-width: 0;
    min-height: 36px;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 6px 8px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 9px;

    background: #252a32;
    color: #e1e5ea;

    box-shadow: none;

    text-align: left;
    font-size: 0.61rem;
    font-weight: 750;
}

.sidebar .sidebar-system-btn:hover {
    border-color:
        rgba(255, 255, 255, 0.2);

    background: #303640;
    color: #ffffff;
}

.sidebar .sidebar-system-btn:disabled {
    opacity: 0.58;

    background: #20252c;
    color: #8d96a2;

    cursor: not-allowed;
}

.sidebar .sidebar-system-btn:disabled:hover {
    border-color:
        rgba(255, 255, 255, 0.08);

    background: #20252c;
    color: #8d96a2;
}


/* ---------------------------------------------------------
   Symbole und Beschriftungen
   --------------------------------------------------------- */

.sidebar-system-icon {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    flex: 0 0 22px;

    border-radius: 6px;

    background: #353c47;
    color: #f0f2f5;

    font-size: 0.72rem;
    line-height: 1;
    font-weight: 850;
}

.sidebar-system-copy {
    min-width: 0;

    display: grid;
    gap: 1px;
}

.sidebar-system-copy strong {
    color: inherit;

    font-size: 0.59rem;
    line-height: 1.1;
    font-weight: 800;
}

.sidebar-system-copy small {
    overflow: hidden;

    color: #7f8996;

    font-size: 0.47rem;
    line-height: 1.15;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   Serverdaten neu laden
   --------------------------------------------------------- */

.sidebar-reload-button {
    justify-content: flex-start;
}


/* ---------------------------------------------------------
   Backup Import und Export
   --------------------------------------------------------- */

.sidebar-backup-row {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.sidebar .sidebar-backup-button,
.sidebar .sidebar-backup-row .file-button {
    min-width: 0;
    min-height: 46px;

    justify-content: flex-start;

    margin: 0;
    padding: 6px 7px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 9px;

    background: #252a32;
    color: #e1e5ea;
}

.sidebar .sidebar-backup-button:hover,
.sidebar .sidebar-backup-row .file-button:hover {
    border-color:
        rgba(255, 255, 255, 0.2);

    background: #303640;
    color: #ffffff;
}


/* ---------------------------------------------------------
   Nix-zu-tun-Button

   Diese Zeile existiert nur, wenn das versteckte Menü
   freigeschaltet wurde.
   --------------------------------------------------------- */

.sidebar-system>.nix-easter-tab {
    order: -1;

    width: 100%;
    min-height: 38px;

    display: flex;
    align-items: center;

    padding: 7px 10px;

    border:
        1px solid rgba(122, 104, 207, 0.24);

    border-radius: 10px;

    background:
        rgba(122, 104, 207, 0.11);

    color: #d0c9f5;

    font-size: 0.62rem;
    font-weight: 780;
}

.sidebar-system>.nix-easter-tab:hover {
    border-color:
        rgba(143, 124, 232, 0.4);

    background:
        rgba(122, 104, 207, 0.18);

    color: #ffffff;
}

.sidebar-system>.nix-easter-tab.active {
    border-color: #7460d3;
    background: #7460d3;
    color: #ffffff;
}


/* ---------------------------------------------------------
   Abmelden
   --------------------------------------------------------- */

.sidebar-system-btn.logout-btn {
    min-height: 36px;

    justify-content: center;

    margin-top: 0;

    border-color:
        rgba(227, 16, 16, 0.24);

    background:
        rgba(227, 16, 16, 0.09);

    color: #ff9191;

    text-align: center;
}

.sidebar-system-btn.logout-btn:hover {
    border-color:
        rgba(227, 16, 16, 0.4);

    background:
        rgba(227, 16, 16, 0.15);

    color: #ffb0b0;
}


/* =========================================================
   6. STARTAUSWAHL
   ========================================================= */

.work-start-screen {
    position: fixed;

    top: var(--appbar-height);
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 700;

    display: grid;
    place-items: center;

    padding: 24px;

    background:
        linear-gradient(180deg,
            #f7f8fa 0%,
            #eef0f3 100%);
}

.work-start-card {
    width: min(620px, 100%);

    padding: 34px;

    border: 1px solid var(--border);
    border-radius: 24px;

    background: var(--surface);
    box-shadow: var(--shadow-medium);

    text-align: center;
}

.work-start-logo-wrap {
    display: flex;
    justify-content: center;

    margin-bottom: 18px;
}

.work-start-logo-wrap img {
    width: 88px;
    height: 88px;
    object-fit: contain;
}

.work-start-date {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.work-start-card h2 {
    margin-bottom: 8px;
    color: var(--heading);
    font-size: 1.8rem;
}

.work-start-subtitle {
    margin-bottom: 24px;
    color: var(--muted);
}

.work-start-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;

    margin-bottom: 18px;
}

.work-start-action {
    min-height: 145px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: var(--surface-soft);
    color: var(--text);
}

.work-start-action:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.work-start-action-icon {
    font-size: 1.6rem;
}

.work-start-action strong {
    color: var(--heading);
    font-size: 1rem;
}

.work-start-action small {
    color: var(--muted);
}

.work-start-skip {
    border: 0;
    background: transparent;
    color: var(--muted);
}


/* =========================================================
   7. ALLGEMEINE OBERFLÄCHEN
   ========================================================= */

button,
.file-button {
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);

    background: var(--surface);
    color: var(--text);

    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

button {
    min-height: 40px;
    padding: 9px 13px;
    font-weight: 750;
}

button:hover,
.file-button:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
}

button.ghost,
.file-button.ghost {
    background: var(--surface-soft);
}

button.danger {
    border-color: rgba(201, 49, 49, 0.2);
    background: var(--danger-soft);
    color: var(--danger);
}

input,
select,
textarea {
    max-width: 100%;

    padding: 9px 11px;

    border: 1px solid var(--border);
    border-radius: var(--radius-medium);

    background: var(--surface);
    color: var(--text);
}

textarea {
    resize: vertical;
}

.file-button {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 13px;

    cursor: pointer;
    font-weight: 750;
}

.panel {
    width: 100%;

    padding: 20px;

    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.panel+.panel {
    margin-top: 16px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 16px;
}

.panel-header.wrap {
    flex-wrap: wrap;
}

.panel h2 {
    margin-bottom: 4px;
    color: var(--heading);
    font-size: 1.45rem;
}

.panel h3 {
    color: var(--heading);
}

.muted {
    margin-bottom: 0;
    color: var(--muted);
}

.toolbar,
.vacation-range,
.container-toolbar,
.container-action-row,
.confirm-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

/* ---------------------------------------------------------
   Modale Fenster
   --------------------------------------------------------- */

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: grid;
    place-items: center;

    padding: 24px;

    overflow-y: auto;

    background: rgba(18, 22, 28, 0.46);

    backdrop-filter: blur(4px);
}

.confirm-modal.hidden {
    display: none;
}

.confirm-box {
    width: min(460px, 100%);
    max-height: calc(100vh - 48px);

    padding: 24px;

    overflow-y: auto;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: var(--surface);
    color: var(--text);

    box-shadow:
        0 24px 70px rgba(10, 14, 20, 0.24);
}

.confirm-box h3 {
    margin: 0 0 8px;

    color: var(--heading);
    font-size: 1.25rem;
}

.confirm-box p {
    margin-bottom: 14px;
    color: var(--muted);
}

.confirm-box .confirm-actions {
    justify-content: flex-end;

    margin-top: 20px;
}

/* ---------------------------------------------------------
   Neues-Preise-Popup
   --------------------------------------------------------- */

#newPricesModal {
    background:
        rgba(19, 23, 29, 0.42);

    backdrop-filter:
        blur(7px) saturate(85%);
}

#newPricesModal:not(.hidden) .price-date-box {
    animation:
        price-modal-open 190ms cubic-bezier(.2, .75, .25, 1);
}

.price-date-box {
    position: relative;

    width: min(500px, 100%);

    padding: 0;

    overflow: hidden;

    border:
        1px solid rgba(188, 196, 207, 0.78);

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 28px 80px rgba(12, 17, 24, 0.24),
        0 3px 10px rgba(12, 17, 24, 0.08);

    text-align: left;
}

.price-modal-header {
    position: relative;

    display: grid;

    grid-template-columns:
        48px minmax(0, 1fr) 34px;

    align-items: start;
    gap: 14px;

    padding: 24px 24px 20px;

    border-bottom:
        1px solid #e7eaf0;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #fbfbfc 62%,
            #fff5f5 100%);
}

.price-date-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin: 0;

    border:
        1px solid rgba(227, 16, 16, 0.16);

    border-radius: 14px;

    background:
        var(--brand-soft);

    color:
        var(--brand);

    box-shadow: none;

    font-size: 1.15rem;
    font-weight: 900;
}

.price-modal-heading {
    min-width: 0;
}

.price-modal-eyebrow {
    display: block;

    margin: 1px 0 5px;

    color: var(--brand);

    font-size: 0.66rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.price-modal-heading h3 {
    margin: 0 0 6px;

    color: var(--heading);

    font-size: 1.28rem;
    line-height: 1.2;
    font-weight: 850;
}

.price-modal-heading p {
    max-width: 340px;

    margin: 0;

    color: var(--muted);

    font-size: 0.77rem;
    line-height: 1.45;
}

.price-modal-close {
    width: 34px;
    height: 34px;
    min-height: 34px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid transparent;

    border-radius: 9px;

    background:
        transparent;

    color: #828b98;

    font-size: 1.25rem;
    line-height: 1;
}

.price-modal-close:hover {
    border-color: var(--border);

    background:
        rgba(255, 255, 255, 0.8);

    color: var(--heading);
}

.price-modal-field {
    display: grid;
    gap: 7px;

    margin: 22px 24px 0;
    padding: 16px;

    border:
        1px solid #e2e6ec;

    border-radius: 14px;

    background:
        #f7f8fa;
}

.price-modal-field label {
    color: var(--heading);

    font-size: 0.73rem;
    font-weight: 800;
}

.price-modal-field input {
    width: 100%;
    min-height: 46px;

    padding: 9px 12px;

    border:
        1px solid #cfd5dd;

    border-radius: 10px;

    background: #ffffff;

    color: var(--heading);

    font-size: 0.84rem;
    font-weight: 780;

    box-shadow:
        inset 0 1px 2px rgba(22, 28, 36, 0.03);
}

.price-modal-field input:focus {
    outline: none;

    border-color:
        rgba(227, 16, 16, 0.65);

    box-shadow:
        0 0 0 3px rgba(227, 16, 16, 0.1);
}

.price-modal-field input.input-error {
    border-color: var(--danger);

    box-shadow:
        0 0 0 3px rgba(201, 49, 49, 0.12);
}

.price-modal-field small {
    color: var(--muted);

    font-size: 0.66rem;
    line-height: 1.35;
}

.price-modal-note {
    display: grid;

    grid-template-columns:
        24px minmax(0, 1fr);

    align-items: start;
    gap: 9px;

    margin: 12px 24px 0;
    padding: 11px 12px;

    border:
        1px solid #e5e8ed;

    border-radius: 11px;

    background: #ffffff;
}

.price-modal-note>span {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #edf0f4;
    color: #657080;

    font-size: 0.7rem;
    font-weight: 850;
}

.price-modal-note p {
    margin: 1px 0 0;

    color: var(--muted);

    font-size: 0.67rem;
    line-height: 1.4;
}

.price-modal-actions {
    justify-content: flex-end;

    margin-top: 22px;
    padding: 17px 24px 20px;

    border-top:
        1px solid #e7eaf0;

    background:
        #fafbfc;
}

.price-modal-actions button {
    min-height: 40px;

    padding: 8px 15px;

    border-radius: 10px;

    font-size: 0.73rem;
}

#newPricesSave {
    border-color: var(--brand);

    background: var(--brand);
    color: #ffffff;
}

#newPricesSave:hover {
    border-color: var(--brand-dark);

    background: var(--brand-dark);
}

@keyframes price-modal-open {
    from {
        opacity: 0;

        transform:
            translateY(10px) scale(0.975);
    }

    to {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }
}

@media (max-width: 600px) {
    .price-modal-header {
        grid-template-columns:
            42px minmax(0, 1fr) 32px;

        gap: 11px;

        padding:
            20px 18px 17px;
    }

    .price-date-icon {
        width: 42px;
        height: 42px;

        border-radius: 12px;
    }

    .price-modal-heading h3 {
        font-size: 1.12rem;
    }

    .price-modal-field,
    .price-modal-note {
        margin-right: 18px;
        margin-left: 18px;
    }

    .price-modal-actions {
        padding:
            15px 18px 18px;
    }

    .price-modal-actions button {
        flex: 1 1 auto;
    }
}

.notes-startup-box {
    width: min(560px, 100%);
    text-align: left;
}

.hofbook-entry-box,
.feedback-modal-card {
    width: min(620px, 100%);
    text-align: left;
}

.boss-edit-box,
.event-edit-box {
    width: min(760px, 100%);
    text-align: left;
}

.employee-edit-box {
    width: min(920px, 100%);
    text-align: left;
}

.vehicle-edit-box {
    width: min(1120px, 100%);
    text-align: left;
}

.hofbook-entry-box-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 18px;
}

.hofbook-entry-box-head h3 {
    margin-bottom: 0;
}

.modal-eyebrow {
    display: block;

    margin-bottom: 4px;

    color: var(--brand);

    font-size: 0.67rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.modal-x-btn {
    width: 34px;
    height: 34px;
    min-height: 34px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 9px;

    background: var(--surface-soft);
    color: var(--muted);

    font-size: 1.2rem;
}

.hofbook-entry-fields {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.hofbook-entry-fields label {
    display: grid;
    gap: 6px;
}

.hofbook-entry-fields label>span {
    color: var(--muted);

    font-size: 0.7rem;
    font-weight: 750;
}

.hofbook-entry-text-field,
.feedback-message-field {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .confirm-modal {
        place-items: end center;

        padding: 12px;
    }

    .confirm-box {
        width: 100%;
        max-height: calc(100vh - 24px);

        padding: 20px;

        border-radius: 18px 18px 12px 12px;
    }

    .hofbook-entry-fields {
        grid-template-columns: 1fr;
    }

    .hofbook-entry-text-field,
    .feedback-message-field {
        grid-column: auto;
    }
}

.dashboard-grid,
.stats-layout,
.settings-layout,
.container-layout,
.hofbook-layout,
.price-module {
    display: grid;
    gap: 16px;
}

.period-title {
    min-width: 210px;

    padding: 10px 14px;

    border: 1px solid var(--border);
    border-radius: var(--radius-medium);

    background: var(--surface-soft);

    text-align: center;
    font-weight: 800;
}

.table-wrap,
.container-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

th {
    color: var(--heading);
    background: var(--surface-soft);
}

/* =========================================================
   PREISLISTEN – MODERNER ARBEITSBEREICH
   ========================================================= */

#preislisten {
    --price-green: #2f7553;
    --price-green-soft: #eef8f2;

    --price-blue: #496d93;
    --price-blue-soft: #eef4fa;

    --price-amber: #8a681d;
    --price-amber-soft: #fff8e2;
}


/* ---------------------------------------------------------
   Grundlayout
   --------------------------------------------------------- */

#preislisten .price-module {
    display: grid;
    gap: 12px;
}


/*
 * Die Seitenüberschrift steht bereits in der Appbar.
 * Die große doppelte Überschrift wird daher ausgeblendet.
 */
#preislisten .price-module-hero {
    display: none;
}


/* ---------------------------------------------------------
   Untermenü
   --------------------------------------------------------- */

#preislisten .price-subtabs {
    width: max-content;
    max-width: 100%;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 4px;

    overflow-x: auto;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: #ffffff;
    box-shadow: var(--shadow-small);

    scrollbar-width: thin;
}

#preislisten .price-subtab {
    min-height: 36px;

    padding: 7px 12px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #66717d;

    box-shadow: none;

    font-size: 0.67rem;
    line-height: 1;
    font-weight: 800;

    white-space: nowrap;
}

#preislisten .price-subtab:hover {
    border: 0;

    background: #f1f3f5;
    color: var(--heading);
}

#preislisten .price-subtab.active {
    background: var(--brand);
    color: #ffffff;
}


/* ---------------------------------------------------------
   Nur aktiven Bereich anzeigen
   --------------------------------------------------------- */

#preislisten .price-subpanel {
    display: none;
}

#preislisten .price-subpanel.active {
    display: block;
}

#preislisten .price-subpanel>.panel {
    margin-top: 0;

    padding: 17px;

    border-radius: 14px;
}


/* =========================================================
   AKTUELLE PREISE
   ========================================================= */

#priceTabCurrent>.panel {
    min-height: 590px;
}

#priceTabCurrent .panel-header {
    margin-bottom: 12px;
}

#priceTabCurrent .panel-header h2 {
    margin: 0;

    font-size: 1.05rem;
}


/* ---------------------------------------------------------
   Suchfeld
   --------------------------------------------------------- */

#preislisten .price-current-search-box {
    position: relative;

    margin-bottom: 14px;
}

#preislisten .price-current-search-box label {
    display: grid;
    gap: 6px;
}

#preislisten .price-current-search-box label>span {
    color: var(--muted);

    font-size: 0.57rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

#preislisten .price-current-search-box::before {
    content: "⌕";

    position: absolute;
    left: 13px;
    bottom: 10px;
    z-index: 2;

    color: #77818d;

    font-size: 1rem;
    line-height: 1;

    pointer-events: none;
}

#preislisten #priceCurrentSearchInput {
    width: 100%;
    min-height: 44px;

    padding:
        9px 12px 9px 39px;

    border-radius: 10px;

    background: #ffffff;

    font-size: 0.76rem;
    font-weight: 680;
}

#preislisten #priceCurrentSearchInput:focus {
    outline: none;

    border-color:
        rgba(227, 16, 16, 0.48);

    box-shadow:
        0 0 0 3px rgba(227, 16, 16, 0.08);
}


/* ---------------------------------------------------------
   Leerer Suchzustand
   --------------------------------------------------------- */

#preislisten .price-current-results {
    min-width: 0;
}

#preislisten .price-current-empty,
#preislisten .price-list-empty {
    min-height: 150px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 24px;

    border:
        1px dashed var(--border-strong);

    border-radius: 12px;

    background:
        repeating-linear-gradient(135deg,
            rgba(120, 130, 142, 0.035) 0 7px,
            transparent 7px 14px),
        #fafbfc;

    color: var(--muted);

    text-align: center;

    font-size: 0.67rem;
    line-height: 1.4;
}

#preislisten .price-current-empty strong {
    color: var(--heading);

    font-size: 0.82rem;
}


/* ---------------------------------------------------------
   Trefferliste und ausgewählter Preis
   --------------------------------------------------------- */

#preislisten .price-current-grid.regu-only {
    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 360px;

    align-items: start;
    gap: 12px;
}

#preislisten .price-current-card {
    min-width: 0;

    padding: 0;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: #ffffff;
}

#preislisten .price-card-label {
    min-height: 39px;

    display: flex;
    align-items: center;

    padding: 9px 12px;

    border-bottom:
        1px solid var(--border);

    background: #f3f5f7;
    color: #68727e;

    font-size: 0.57rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

#preislisten .price-current-card:first-child {
    max-height: 510px;

    overflow-y: auto;

    scrollbar-width: thin;
}


/* ---------------------------------------------------------
   Einzelne Treffer
   --------------------------------------------------------- */

#preislisten .price-current-line {
    width: 100%;
    min-height: 54px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;
    gap: 14px;

    padding: 9px 12px;

    border: 0;
    border-bottom:
        1px solid #e7eaee;

    border-radius: 0;

    background: #ffffff;
    color: var(--text);

    box-shadow: none;

    text-align: left;
}

#preislisten .price-current-line:last-child {
    border-bottom: 0;
}

#preislisten .price-current-line:hover {
    border-color: #e7eaee;

    background: #f6f7f9;
}

#preislisten .price-current-line.active {
    position: relative;

    background: var(--brand-soft);
}

#preislisten .price-current-line.active::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 3px;

    background: var(--brand);
}

#preislisten .price-current-line>div {
    min-width: 0;

    display: grid;
    gap: 3px;
}

#preislisten .price-current-line>div>strong {
    overflow: hidden;

    color: var(--heading);

    font-size: 0.7rem;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#preislisten .price-current-line>div>small {
    overflow: hidden;

    color: var(--muted);

    font-size: 0.55rem;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   Preiswerte
   --------------------------------------------------------- */

#preislisten .own-price-value-stack {
    min-width: 88px;

    display: grid;
    justify-items: end;
    gap: 2px;
}

#preislisten .own-price-value-stack b {
    color: var(--price-green);

    font-size: 0.73rem;
    line-height: 1.1;
    font-weight: 900;

    white-space: nowrap;
}

#preislisten .own-price-value-stack small {
    color: var(--muted);

    font-size: 0.5rem;
    line-height: 1.2;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   Ausgewählter Preis rechts
   --------------------------------------------------------- */

#preislisten .selected-regu-price {
    position: sticky;
    top:
        calc(var(--appbar-height) + 16px);

    border-color:
        rgba(227, 16, 16, 0.22);

    box-shadow:
        0 12px 28px rgba(22, 28, 36, 0.08);
}

#preislisten .selected-regu-price .price-card-label {
    border-bottom-color:
        rgba(227, 16, 16, 0.14);

    background: var(--brand-soft);
    color: var(--brand-dark);
}

#preislisten .price-selected-box {
    display: grid;
    gap: 9px;

    padding: 18px;
}

#preislisten .price-selected-box>small {
    color: var(--muted);

    font-size: 0.58rem;
    font-weight: 750;
}

#preislisten .price-selected-box>strong {
    color: var(--heading);

    font-size: 1rem;
    line-height: 1.3;
    font-weight: 850;
}

#preislisten .price-selected-box .own-price-value-stack {
    min-width: 0;

    justify-items: start;

    padding-top: 12px;

    border-top:
        1px solid var(--border);
}

#preislisten .price-selected-box .own-price-value-stack b {
    color: var(--brand-dark);

    font-size: 1.4rem;
}

#preislisten .price-selected-box .own-price-value-stack small {
    font-size: 0.6rem;
}

#preislisten .price-current-muted {
    margin: 0 18px 18px;
    padding: 9px 10px;

    border:
        1px solid rgba(138, 104, 29, 0.18);

    border-radius: 8px;

    background: var(--price-amber-soft);
    color: var(--price-amber);

    font-size: 0.61rem;
    font-weight: 750;
}


/* =========================================================
   NEUE LISTE
   ========================================================= */

#priceTabOwnPrices>.panel {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: start;
    gap: 12px;
}

#priceTabOwnPrices .panel-header {
    grid-column: 1 / -1;

    margin-bottom: 0;
    padding-bottom: 13px;

    border-bottom:
        1px solid var(--border);
}

#priceTabOwnPrices .panel-header h2 {
    margin-bottom: 3px;

    font-size: 1.05rem;
}

#priceTabOwnPrices .panel-header p {
    font-size: 0.63rem;
}


/*
 * Der erste Upload liegt noch in einem zusätzlichen Wrapper.
 * display: contents bringt beide Uploadfelder in dasselbe Raster.
 */
#preislisten .own-price-import-grid {
    display: contents;
}


/* ---------------------------------------------------------
   Uploadfelder
   --------------------------------------------------------- */

#preislisten .price-list-upload-card {
    min-width: 0;
    min-height: 132px;

    display: grid;
    grid-template-rows:
        auto auto minmax(0, 1fr);

    align-content: start;
    gap: 8px;

    padding: 13px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #f7f8fa 100%);
}

#preislisten .price-list-upload-card>span {
    color: var(--heading);

    font-size: 0.66rem;
    font-weight: 850;
}

#preislisten .price-list-upload-button {
    width: max-content;
    max-width: 100%;
    min-height: 36px;

    justify-content: flex-start;

    padding: 7px 10px;

    border-color:
        rgba(227, 16, 16, 0.2);

    border-radius: 9px;

    background: var(--brand-soft);
    color: var(--brand-dark);

    font-size: 0.62rem;
}

#preislisten .price-list-upload-button:hover {
    border-color: var(--brand);

    background: var(--brand);
    color: #ffffff;
}

#preislisten .price-list-upload-card>small {
    overflow-wrap: anywhere;

    color: var(--muted);

    font-size: 0.55rem;
    line-height: 1.35;
}


/* ---------------------------------------------------------
   Importzusammenfassung
   --------------------------------------------------------- */

#preislisten .price-import-summary {
    grid-column: 1 / -1;

    min-height: 42px;

    display: flex;
    align-items: center;
    gap: 5px;

    padding: 10px 12px;

    border:
        1px solid rgba(47, 117, 83, 0.17);

    border-radius: 10px;

    background: var(--price-green-soft);
    color: #496457;

    font-size: 0.62rem;
    line-height: 1.3;
}

#preislisten .price-import-summary strong {
    color: var(--price-green);

    font-size: 0.82rem;
}


/* ---------------------------------------------------------
   Aktuelle importierte Preisliste
   --------------------------------------------------------- */

#preislisten .own-price-current-box {
    grid-column: 1 / -1;

    min-width: 0;

    padding-top: 14px;

    border-top:
        1px solid var(--border);
}

#preislisten .own-price-current-box .panel-header {
    padding-bottom: 10px;

    border-bottom: 0;
}

#preislisten .own-price-current-box .panel-header h3 {
    margin: 0 0 3px;

    font-size: 0.9rem;
}

#preislisten .own-price-current-box .panel-header p {
    font-size: 0.6rem;
}

#preislisten .own-price-entries {
    max-height: 550px;

    overflow-y: auto;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: #ffffff;

    scrollbar-width: thin;
}


/* ---------------------------------------------------------
   Preislisten-Zeilen
   --------------------------------------------------------- */

#preislisten .own-price-row {
    min-width: 0;
    min-height: 43px;

    display: grid;
    grid-template-columns:
        72px minmax(0, 1fr) 150px;

    align-items: center;
    gap: 10px;

    padding: 8px 11px;

    border-bottom:
        1px solid #e7eaee;

    background: #ffffff;
}

#preislisten .own-price-row:last-child {
    border-bottom: 0;
}

#preislisten .own-price-row:hover {
    background: #f7f8fa;
}

#preislisten .own-price-number {
    color: var(--muted);

    font-size: 0.6rem;
    font-weight: 850;
}

#preislisten .own-price-row>strong {
    overflow: hidden;

    color: var(--heading);

    font-size: 0.67rem;
    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#preislisten .own-price-values {
    justify-self: end;
}


/* =========================================================
   PREISENTWICKLUNG
   ========================================================= */

#priceTabHistory>.panel {
    display: grid;
    gap: 14px;
}

#priceTabHistory .panel-header {
    margin-bottom: 0;
    padding-bottom: 13px;

    border-bottom:
        1px solid var(--border);
}

#priceTabHistory .panel-header h2 {
    margin-bottom: 3px;

    font-size: 1.05rem;
}

#priceTabHistory .panel-header p {
    font-size: 0.63rem;
}


/* ---------------------------------------------------------
   Filterleiste
   --------------------------------------------------------- */

#preislisten .price-history-tools {
    display: grid;
    grid-template-columns:
        minmax(230px, 1.7fr) minmax(135px, 0.6fr) minmax(135px, 0.6fr) auto;

    align-items: end;
    gap: 8px;
}

#preislisten .price-history-tools .price-list-field {
    min-width: 0;

    display: grid;
    gap: 5px;
}

#preislisten .price-history-tools .price-list-field>span {
    color: var(--muted);

    font-size: 0.55rem;
    font-weight: 850;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#preislisten .price-history-tools select,
#preislisten .price-history-tools input {
    width: 100%;
    min-height: 38px;

    border-radius: 9px;

    font-size: 0.64rem;
}

#preislisten #ownPriceHistoryResetRangeBtn {
    min-height: 38px;

    padding: 7px 10px;

    border-radius: 9px;

    font-size: 0.61rem;
}


/* ---------------------------------------------------------
   Diagramm
   --------------------------------------------------------- */

#preislisten .own-price-chart-card {
    min-width: 0;

    padding: 12px;

    overflow-x: auto;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: #ffffff;

    scrollbar-width: thin;
}

#preislisten #ownPriceHistoryChart {
    width: 100%;
    min-width: 760px;
    height: auto;

    display: block;
}


/* ---------------------------------------------------------
   Monatsdetails
   --------------------------------------------------------- */

#preislisten .own-price-history-detail {
    display: grid;
    gap: 10px;

    padding: 12px;

    border:
        1px solid rgba(73, 109, 147, 0.18);

    border-radius: 12px;

    background: var(--price-blue-soft);
}

#preislisten .own-price-history-detail.hidden {
    display: none;
}

#preislisten .own-price-detail-head {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
}

#preislisten .own-price-detail-head>div {
    min-width: 0;

    display: grid;
    gap: 3px;

    padding: 9px 10px;

    border:
        1px solid rgba(73, 109, 147, 0.12);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.72);
}

#preislisten .own-price-detail-head span {
    color: var(--muted);

    font-size: 0.51rem;
    font-weight: 800;

    text-transform: uppercase;
}

#preislisten .own-price-detail-head strong {
    overflow: hidden;

    color: var(--heading);

    font-size: 0.69rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#preislisten .own-price-detail-list {
    display: grid;
    gap: 5px;
}

#preislisten .own-price-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 8px 10px;

    border-radius: 8px;

    background:
        rgba(255, 255, 255, 0.75);
}

#preislisten .own-price-detail-row>div {
    min-width: 0;

    display: grid;
    gap: 2px;
}

#preislisten .own-price-detail-row strong {
    color: var(--heading);

    font-size: 0.62rem;
}

#preislisten .own-price-detail-row small {
    overflow: hidden;

    color: var(--muted);

    font-size: 0.51rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#preislisten .own-price-detail-row>span {
    flex: 0 0 auto;

    color: var(--price-green);

    font-size: 0.7rem;
    font-weight: 900;
}


/* ---------------------------------------------------------
   Historische Listen
   --------------------------------------------------------- */

#preislisten .own-price-history-list {
    display: grid;
    gap: 8px;
}

#preislisten .own-history-card {
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: #ffffff;
}

#preislisten .own-history-card.current {
    border-color:
        rgba(47, 117, 83, 0.32);
}

#preislisten .own-history-head {
    width: 100%;
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 10px 12px;

    border: 0;
    border-radius: 0;

    background: #ffffff;

    box-shadow: none;

    text-align: left;
}

#preislisten .own-history-card.current .own-history-head {
    background: var(--price-green-soft);
}

#preislisten .own-history-head:hover {
    border: 0;

    background: #f6f7f9;
}

#preislisten .own-history-card.current .own-history-head:hover {
    background: #e7f4ec;
}

#preislisten .own-history-head>div {
    min-width: 0;

    display: grid;
    gap: 3px;
}

#preislisten .own-history-head strong {
    color: var(--heading);

    font-size: 0.69rem;
}

#preislisten .own-history-head small {
    overflow: hidden;

    color: var(--muted);

    font-size: 0.54rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#preislisten .own-history-head>span {
    flex: 0 0 auto;

    color: var(--brand-dark);

    font-size: 0.58rem;
    font-weight: 800;
}

#preislisten .own-history-body {
    padding: 11px;

    border-top:
        1px solid var(--border);

    background: #fafbfc;
}

#preislisten .own-history-body.hidden {
    display: none;
}

#preislisten .own-history-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;

    margin-bottom: 9px;
}

#preislisten .own-history-actions button {
    min-height: 33px;

    padding: 6px 9px;

    border-radius: 8px;

    font-size: 0.57rem;
}

#preislisten .own-history-current-pill {
    margin-right: auto;
    padding: 5px 8px;

    border:
        1px solid rgba(47, 117, 83, 0.2);

    border-radius: 999px;

    background: var(--price-green-soft);
    color: var(--price-green);

    font-size: 0.54rem;
    font-weight: 850;
}

#preislisten .own-history-entry-list {
    max-height: 360px;

    overflow-y: auto;

    border: 1px solid var(--border);
    border-radius: 9px;

    scrollbar-width: thin;
}

#preislisten .own-price-row.compact {
    min-height: 38px;

    padding-top: 6px;
    padding-bottom: 6px;
}


/* =========================================================
   RESPONSIVE PREISLISTEN
   ========================================================= */

@media (max-width: 1100px) {
    #preislisten .price-current-grid.regu-only {
        grid-template-columns: 1fr;
    }

    #preislisten .selected-regu-price {
        position: static;
    }

    #preislisten .price-current-card:first-child {
        max-height: 430px;
    }

    #preislisten .price-history-tools {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #preislisten #ownPriceHistoryResetRangeBtn {
        width: 100%;
    }
}

@media (max-width: 700px) {
    #preislisten .price-subtabs {
        width: 100%;
    }

    #preislisten .price-subtab {
        flex: 1 0 auto;
    }

    #priceTabOwnPrices>.panel {
        grid-template-columns: 1fr;
    }

    #preislisten .own-price-import-grid {
        display: block;
    }

    #preislisten .own-price-import-grid .price-list-upload-card {
        margin-bottom: 12px;
    }

    #preislisten .price-import-summary,
    #preislisten .own-price-current-box {
        grid-column: auto;
    }

    #preislisten .own-price-row {
        grid-template-columns:
            54px minmax(0, 1fr) 105px;

        gap: 7px;

        padding-right: 8px;
        padding-left: 8px;
    }

    #preislisten .own-price-row>strong {
        white-space: normal;
    }

    #preislisten .price-history-tools {
        grid-template-columns: 1fr;
    }

    #preislisten .own-price-detail-head {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   FAHRZEUGE – MODERNE FLOTTENÜBERSICHT
   ========================================================= */

#fahrzeuge {
    --vehicle-green: #2f7553;
    --vehicle-green-soft: #eef8f2;

    --vehicle-blue: #496d93;
    --vehicle-blue-soft: #eef4fa;

    --vehicle-warning: #8a681d;
    --vehicle-warning-soft: #fff8e2;

    --vehicle-danger: #b54343;
    --vehicle-danger-soft: #fff1f1;
}


/* ---------------------------------------------------------
   Hauptbereich
   --------------------------------------------------------- */

#fahrzeuge .settings-layout {
    display: block;
}

#fahrzeuge .settings-layout>.panel {
    padding: 18px;

    border-radius: 15px;
}

#fahrzeuge .panel-header {
    min-height: 46px;

    margin-bottom: 12px;
    padding-bottom: 14px;

    border-bottom:
        1px solid var(--border);
}

#fahrzeuge .panel-header h2 {
    margin: 0 0 3px;

    font-size: 1.15rem;
}

#fahrzeuge #addVehicleBtn {
    min-height: 38px;

    padding: 7px 13px;

    border-color: var(--brand);
    border-radius: 9px;

    background: var(--brand);
    color: #ffffff;

    font-size: 0.68rem;
    font-weight: 820;
}

#fahrzeuge #addVehicleBtn:hover {
    border-color: var(--brand-dark);

    background: var(--brand-dark);
}


/* ---------------------------------------------------------
   Hinweiszeile
   --------------------------------------------------------- */

#fahrzeuge .settings-note {
    min-height: 34px;

    display: flex;
    align-items: center;

    margin-bottom: 11px;
    padding: 7px 10px;

    border:
        1px solid rgba(73, 109, 147, 0.14);

    border-radius: 9px;

    background: var(--vehicle-blue-soft);
    color: #5b7086;

    font-size: 0.6rem;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Fahrzeugkategorien
   --------------------------------------------------------- */

#fahrzeuge .vehicle-type-tabs {
    width: max-content;
    max-width: 100%;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin-bottom: 12px;
    padding: 4px;

    overflow-x: auto;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: #f7f8fa;

    scrollbar-width: thin;
}

#fahrzeuge .vehicle-type-tab {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 6px 10px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #65707c;

    box-shadow: none;

    font-size: 0.64rem;
    line-height: 1;
    font-weight: 800;

    white-space: nowrap;
}

#fahrzeuge .vehicle-type-tab:hover {
    border: 0;

    background: #ffffff;
    color: var(--heading);
}

#fahrzeuge .vehicle-type-tab.active {
    background: #303944;
    color: #ffffff;
}

#fahrzeuge .vehicle-type-tab>span {
    min-width: 19px;
    height: 19px;

    display: inline-grid;
    place-items: center;

    padding: 0 5px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.72);

    color: #66717d;

    font-size: 0.53rem;
    font-weight: 900;
}

#fahrzeuge .vehicle-type-tab.active>span {
    background:
        rgba(255, 255, 255, 0.15);

    color: #ffffff;
}


/* ---------------------------------------------------------
   Fristenübersicht
   --------------------------------------------------------- */

#fahrzeuge .vehicle-deadline-summary {
    min-height: 45px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 13px;
    padding: 8px;

    border: 1px solid var(--border);
    border-radius: 11px;

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f8f9fa 100%);
}

#fahrzeuge .vehicle-deadline-summary::before {
    content: "Anstehende Fristen";

    flex: 0 0 auto;

    margin-right: 3px;
    padding: 0 5px;

    color: var(--muted);

    font-size: 0.53rem;
    font-weight: 850;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#fahrzeuge .vehicle-deadline-badge {
    min-height: 28px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 8px;

    border:
        1px solid rgba(73, 109, 147, 0.15);

    border-radius: 8px;

    background: var(--vehicle-blue-soft);
    color: var(--vehicle-blue);

    font-size: 0.56rem;
    line-height: 1;
    font-weight: 780;
}

#fahrzeuge .vehicle-deadline-badge span:first-child {
    color: var(--heading);

    font-weight: 850;
}

#fahrzeuge .vehicle-deadline-badge span+span {
    padding-left: 6px;

    border-left:
        1px solid rgba(73, 109, 147, 0.18);
}

#fahrzeuge .vehicle-deadline-badge.warning {
    border-color:
        rgba(138, 104, 29, 0.2);

    background: var(--vehicle-warning-soft);
    color: var(--vehicle-warning);
}

#fahrzeuge .vehicle-deadline-badge.danger {
    border-color:
        rgba(181, 67, 67, 0.2);

    background: var(--vehicle-danger-soft);
    color: var(--vehicle-danger);
}

#fahrzeuge .vehicle-deadline-badge.empty {
    border-style: dashed;

    background: #fafbfc;
    color: var(--muted);
}


/* ---------------------------------------------------------
   Fahrzeugraster
   --------------------------------------------------------- */

#fahrzeuge #vehiclesAdminList {
    display: grid;
    grid-template-columns:
        repeat(auto-fill,
            minmax(355px, 1fr));

    align-items: stretch;
    gap: 11px;
}

#fahrzeuge .vehicle-admin-empty {
    grid-column: 1 / -1;

    min-height: 180px;

    display: grid;
    place-items: center;

    padding: 24px;

    border:
        1px dashed var(--border-strong);

    border-radius: 12px;

    background:
        repeating-linear-gradient(135deg,
            rgba(120, 130, 142, 0.035) 0 7px,
            transparent 7px 14px),
        #fafbfc;

    color: var(--muted);

    font-size: 0.67rem;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Fahrzeugkarte
   --------------------------------------------------------- */

#fahrzeuge .vehicle-card {
    position: relative;

    min-width: 0;
    min-height: 225px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 13px;

    background:
        linear-gradient(150deg,
            #ffffff 0%,
            #fafbfc 100%);

    box-shadow:
        0 4px 14px rgba(22, 28, 36, 0.045);

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

#fahrzeuge .vehicle-card:hover {
    border-color: #c4cbd4;

    box-shadow:
        0 10px 25px rgba(22, 28, 36, 0.09);

    transform: translateY(-2px);
}

#fahrzeuge .vehicle-card::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;

    width: 3px;

    background: #89939e;
}

#fahrzeuge .vehicle-card.vehicle-card-soon::before {
    background: #d5a62c;
}

#fahrzeuge .vehicle-card.vehicle-card-overdue::before {
    background: var(--vehicle-danger);
}

#fahrzeuge .vehicle-card.vehicle-card-inactive::before {
    background: #959ca5;
}


/* ---------------------------------------------------------
   Kartenkopf
   --------------------------------------------------------- */

#fahrzeuge .vehicle-card-top {
    position: relative;

    flex: 1 1 auto;

    padding: 14px 14px 12px 17px;
}

#fahrzeuge .vehicle-card-title-row {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding-right: 34px;
}

#fahrzeuge .vehicle-card-title-row input[data-field="name"] {
    width: 100%;
    min-width: 0;
    min-height: 28px;

    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: var(--heading);

    box-shadow: none;

    text-overflow: ellipsis;

    font-size: 0.88rem;
    line-height: 1.2;
    font-weight: 850;

    pointer-events: none;
}

#fahrzeuge .vehicle-type-badge {
    min-height: 24px;

    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    padding: 4px 7px;

    border:
        1px solid rgba(73, 109, 147, 0.18);

    border-radius: 7px;

    background: var(--vehicle-blue-soft);
    color: var(--vehicle-blue);

    font-size: 0.54rem;
    line-height: 1;
    font-weight: 900;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   Nächste Frist
   --------------------------------------------------------- */

#fahrzeuge .vehicle-next-deadline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin: 11px 0;
    padding: 8px 9px;

    border:
        1px solid #e2e6eb;

    border-radius: 9px;

    background: #f6f7f9;
}

#fahrzeuge .vehicle-next-deadline span {
    color: var(--muted);

    font-size: 0.51rem;
    font-weight: 850;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}

#fahrzeuge .vehicle-next-deadline strong {
    min-width: 0;

    overflow: hidden;

    color: var(--heading);

    font-size: 0.6rem;
    line-height: 1.2;
    font-weight: 820;

    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#fahrzeuge .vehicle-card-soon .vehicle-next-deadline {
    border-color:
        rgba(138, 104, 29, 0.17);

    background: var(--vehicle-warning-soft);
}

#fahrzeuge .vehicle-card-soon .vehicle-next-deadline strong {
    color: var(--vehicle-warning);
}

#fahrzeuge .vehicle-card-overdue .vehicle-next-deadline {
    border-color:
        rgba(181, 67, 67, 0.18);

    background: var(--vehicle-danger-soft);
}

#fahrzeuge .vehicle-card-overdue .vehicle-next-deadline strong {
    color: var(--vehicle-danger);
}


/* ---------------------------------------------------------
   Fahrzeugfelder
   --------------------------------------------------------- */

#fahrzeuge .vehicle-card-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;
}

#fahrzeuge .vehicle-field {
    min-width: 0;

    display: grid;
    gap: 4px;

    padding: 8px 9px;

    border: 1px solid #e3e7eb;
    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.78);
}

#fahrzeuge .vehicle-field>span {
    color: var(--muted);

    font-size: 0.49rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}

#fahrzeuge .vehicle-field input {
    width: 100%;
    min-width: 0;
    min-height: 20px;

    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: var(--heading);

    box-shadow: none;

    text-overflow: ellipsis;

    font-size: 0.62rem;
    line-height: 1.2;
    font-weight: 760;

    pointer-events: none;
}


/* ---------------------------------------------------------
   PDF-Schaltfläche
   --------------------------------------------------------- */

#fahrzeuge .vehicle-inline-pdf {
    position: absolute;
    top: 11px;
    right: 11px;

    width: 29px;
    height: 29px;
    min-width: 29px;
    min-height: 29px;

    display: grid;
    place-items: center;

    padding: 0;

    border-color:
        rgba(181, 67, 67, 0.16);

    border-radius: 8px;

    background: var(--vehicle-danger-soft);
}

#fahrzeuge .vehicle-inline-pdf:hover {
    border-color:
        rgba(181, 67, 67, 0.3);

    background: #ffe6e6;
}

#fahrzeuge .vehicle-inline-pdf img {
    width: 15px;
    height: 15px;

    object-fit: contain;
}


/* ---------------------------------------------------------
   Kartenaktionen
   --------------------------------------------------------- */

#fahrzeuge .vehicle-card-actions {
    display: flex;
    justify-content: flex-end;

    padding: 9px 12px;

    border-top:
        1px solid var(--border);

    background: #f7f8fa;
}

#fahrzeuge .vehicle-card-actions button {
    min-height: 32px;

    padding: 6px 10px;

    border-radius: 8px;

    background: #ffffff;

    font-size: 0.59rem;
    font-weight: 800;
}


/* ---------------------------------------------------------
   Inaktive Fahrzeuge
   --------------------------------------------------------- */

#fahrzeuge .vehicle-card-inactive {
    opacity: 0.7;

    filter: saturate(65%);
}

#fahrzeuge .vehicle-card-inactive .vehicle-type-badge {
    border-color: #d5d9de;

    background: #f0f2f4;
    color: #707983;
}


/* =========================================================
   FAHRZEUG-BEARBEITUNGSFENSTER
   ========================================================= */

.vehicle-edit-box {
    width: min(820px, 100%);

    padding: 0;

    overflow: hidden;
}

.vehicle-edit-box>h3 {
    margin: 0;
    padding: 19px 21px;

    border-bottom:
        1px solid var(--border);

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f8f9fa 100%);

    font-size: 1.05rem;
}

.vehicle-edit-head {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;
    gap: 10px;

    padding: 17px 21px 0;
}

.vehicle-edit-head #vehicleEditNameInput {
    width: 100%;
    min-height: 43px;

    border-radius: 10px;

    font-size: 0.78rem;
    font-weight: 800;
}

.vehicle-edit-fields {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    padding: 15px 21px;
}

.vehicle-edit-fields .vehicle-field {
    min-width: 0;

    display: grid;
    gap: 5px;
}

.vehicle-edit-fields .vehicle-field>span {
    color: var(--muted);

    font-size: 0.55rem;
    font-weight: 850;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.vehicle-edit-fields input {
    width: 100%;
    min-height: 39px;

    border-radius: 9px;

    font-size: 0.68rem;
}

.vehicle-edit-pdf-row {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0 21px;
    padding: 11px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #f7f8fa;
}

.vehicle-pdf-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 8px;

    background: #ffffff;
}

.vehicle-pdf-icon img {
    width: 17px;
    height: 17px;
}

.vehicle-edit-pdf-label {
    min-width: 0;

    flex: 1 1 auto;

    overflow: hidden;

    color: var(--muted);

    font-size: 0.61rem;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-edit-pdf-row button {
    min-height: 33px;

    padding: 6px 9px;

    border-radius: 8px;

    font-size: 0.58rem;
}

.vehicle-edit-actions {
    margin-top: 17px;
    padding: 14px 21px 18px;

    border-top:
        1px solid var(--border);

    background: #fafbfc;
}

#vehicleEditSave {
    border-color: var(--brand);

    background: var(--brand);
    color: #ffffff;
}

#vehicleEditSave:hover {
    border-color: var(--brand-dark);

    background: var(--brand-dark);
}

#vehicleEditToggleActive {
    margin-right: auto;
}


/* ---------------------------------------------------------
   Responsive Fahrzeuge
   --------------------------------------------------------- */

@media (max-width: 900px) {
    #fahrzeuge #vehiclesAdminList {
        grid-template-columns:
            repeat(auto-fill,
                minmax(290px, 1fr));
    }

    .vehicle-edit-fields {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    #fahrzeuge .panel-header {
        align-items: stretch;
    }

    #fahrzeuge #addVehicleBtn {
        width: 100%;
    }

    #fahrzeuge #vehiclesAdminList,
    .vehicle-edit-fields {
        grid-template-columns: 1fr;
    }

    #fahrzeuge .vehicle-card-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-edit-pdf-row {
        align-items: stretch;
        flex-direction: column;
    }

    .vehicle-edit-pdf-label {
        width: 100%;
    }

    .vehicle-edit-pdf-row button {
        width: 100%;
    }
}

/* =========================================================
   STUNDENABRECHNUNG – MODERNE ABRECHNUNGSANSICHT
   ========================================================= */

#stundenabrechnung {
    --billing-green: #2f7553;
    --billing-green-soft: #eef8f2;

    --billing-blue: #496d93;
    --billing-blue-soft: #eef4fa;

    --billing-amber: #8a681d;
    --billing-amber-soft: #fff8e2;

    --billing-danger: #b54343;
    --billing-danger-soft: #fff1f1;
}


/* ---------------------------------------------------------
   Hauptbereich
   --------------------------------------------------------- */

#stundenabrechnung>.panel {
    padding: 17px;

    overflow: visible;

    border-radius: 15px;
}


/*
 * Die Seitenüberschrift steht bereits in der Appbar.
 * Deshalb wird die doppelte große Überschrift ausgeblendet.
 */
#stundenabrechnung>.panel>.panel-header>div:first-child {
    display: none;
}

#stundenabrechnung>.panel>.panel-header {
    min-height: 42px;

    justify-content: flex-end;

    margin-bottom: 12px;
}


/* ---------------------------------------------------------
   Zeitraum-Navigation
   --------------------------------------------------------- */

#stundenabrechnung .panel-header .toolbar {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-left: auto;
}

#stundenabrechnung .panel-header .toolbar button {
    min-height: 36px;

    padding: 7px 11px;

    border-radius: 9px;

    font-size: 0.66rem;
}

#stundenabrechnung #prevHoursBillingMonthBtn,
#stundenabrechnung #nextHoursBillingMonthBtn {
    width: 38px;
    min-width: 38px;

    padding: 0;

    font-size: 0;
}

#stundenabrechnung #prevHoursBillingMonthBtn::after {
    content: "‹";

    font-size: 1.2rem;
    line-height: 1;
}

#stundenabrechnung #nextHoursBillingMonthBtn::after {
    content: "›";

    font-size: 1.2rem;
    line-height: 1;
}

#stundenabrechnung #hoursBillingTitle {
    min-width: 190px;

    padding: 8px 12px;

    border-radius: 9px;

    background: #f7f8fa;

    font-size: 0.73rem;
    font-weight: 850;
}

#stundenabrechnung #todayHoursBillingBtn {
    min-width: 132px;
}


/* ---------------------------------------------------------
   Erledigt-Schalter
   --------------------------------------------------------- */

#stundenabrechnung .hours-billing-done {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin: 0 7px 0 0;
    padding: 7px 10px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #f7f8fa;
    color: #616b77;

    vertical-align: middle;

    font-size: 0.62rem;
    font-weight: 780;

    cursor: pointer;
}

#stundenabrechnung .hours-billing-done input {
    width: 16px;
    height: 16px;

    margin: 0;
    padding: 0;

    accent-color: var(--billing-green);
}

#stundenabrechnung .hours-billing-done.done {
    border-color:
        rgba(47, 117, 83, 0.2);

    background: var(--billing-green-soft);
    color: var(--billing-green);
}


/* ---------------------------------------------------------
   Übersicht / Steuerberater
   --------------------------------------------------------- */

#stundenabrechnung .hours-billing-subtabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 4px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #f7f8fa;

    vertical-align: middle;
}

#stundenabrechnung .hours-billing-subtab {
    min-height: 30px;

    padding: 6px 11px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #66717d;

    box-shadow: none;

    font-size: 0.61rem;
    line-height: 1;
    font-weight: 800;
}

#stundenabrechnung .hours-billing-subtab:hover {
    border: 0;

    background: #ffffff;
    color: var(--heading);
}

#stundenabrechnung .hours-billing-subtab.active {
    background: #303944;
    color: #ffffff;
}

#stundenabrechnung .hours-billing-subpanel {
    margin-top: 13px;
}


/* =========================================================
   ÜBERSICHT
   ========================================================= */

/*
 * Die alte Tabelle und die modernen Karten enthalten
 * dieselben Daten. Wir verwenden nur noch die Karten.
 */
#stundenabrechnung .hours-billing-table {
    display: none;
}

#stundenabrechnung #hoursBillingOverviewPanel>.table-wrap {
    display: none;
}


/* ---------------------------------------------------------
   Kartenraster
   --------------------------------------------------------- */

#stundenabrechnung .hours-billing-cards {
    display: grid;
    grid-template-columns:
        repeat(auto-fit,
            minmax(430px, 1fr));

    align-items: stretch;
    gap: 11px;
}


/* ---------------------------------------------------------
   Mitarbeiterkarte
   --------------------------------------------------------- */

#stundenabrechnung .hours-billing-card {
    position: relative;

    min-width: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 13px;

    background:
        linear-gradient(150deg,
            #ffffff 0%,
            #fafbfc 100%);

    box-shadow:
        0 4px 14px rgba(22, 28, 36, 0.045);

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

#stundenabrechnung .hours-billing-card::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 3px;

    background: #687683;
}

#stundenabrechnung .hours-billing-card:hover {
    border-color: #c5ccd4;

    box-shadow:
        0 10px 25px rgba(22, 28, 36, 0.085);

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   Kartenkopf
   --------------------------------------------------------- */

#stundenabrechnung .hours-billing-card-head {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 13px 15px 12px 17px;

    border-bottom:
        1px solid var(--border);
}

#stundenabrechnung .hours-billing-card-head>div {
    min-width: 0;

    display: grid;
    gap: 3px;
}

#stundenabrechnung .hours-billing-card-head h3 {
    overflow: hidden;

    margin: 0;

    color: var(--heading);

    font-size: 0.79rem;
    line-height: 1.2;
    font-weight: 850;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#stundenabrechnung .hours-billing-card-head span {
    color: var(--muted);

    font-size: 0.53rem;
    line-height: 1.2;
    font-weight: 700;
}

#stundenabrechnung .hours-billing-card-head>strong {
    flex: 0 0 auto;

    padding: 7px 9px;

    border:
        1px solid rgba(47, 117, 83, 0.18);

    border-radius: 8px;

    background: var(--billing-green-soft);
    color: var(--billing-green);

    font-size: 0.69rem;
    line-height: 1;
    font-weight: 900;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   Kennzahlen
   --------------------------------------------------------- */

#stundenabrechnung .hours-billing-metrics {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 6px;

    padding: 11px 13px;
}

#stundenabrechnung .hours-billing-metrics>div {
    min-width: 0;
    min-height: 67px;

    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;

    padding: 7px 5px;

    border: 1px solid #e3e7eb;
    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.82);

    text-align: center;
}

#stundenabrechnung .hours-billing-metrics span {
    overflow: hidden;

    max-width: 100%;

    color: var(--muted);

    font-size: 0.49rem;
    line-height: 1.15;
    font-weight: 850;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#stundenabrechnung .hours-billing-metrics strong {
    color: var(--heading);

    font-size: 0.8rem;
    line-height: 1;
    font-weight: 900;
}

#stundenabrechnung .hours-billing-metrics small {
    color: #75808c;

    font-size: 0.49rem;
    line-height: 1.15;
}


/* Urlaub */

#stundenabrechnung .hours-billing-metrics>div:nth-child(4) {
    border-color:
        rgba(73, 109, 147, 0.16);

    background: var(--billing-blue-soft);
}

#stundenabrechnung .hours-billing-metrics>div:nth-child(4) strong {
    color: var(--billing-blue);
}


/* Krank */

#stundenabrechnung .hours-billing-metrics>div:nth-child(5) {
    border-color:
        rgba(181, 67, 67, 0.14);

    background: var(--billing-danger-soft);
}

#stundenabrechnung .hours-billing-metrics>div:nth-child(5) strong {
    color: var(--billing-danger);
}


/* ---------------------------------------------------------
   Hinweise unter der Karte
   --------------------------------------------------------- */

#stundenabrechnung .hours-billing-card-details {
    min-height: 35px;

    display: flex;
    align-items: center;

    margin: auto 13px 12px;
    padding: 7px 9px;

    border:
        1px solid rgba(138, 104, 29, 0.16);

    border-radius: 8px;

    background: var(--billing-amber-soft);
    color: var(--billing-amber);

    font-size: 0.54rem;
    line-height: 1.35;
    font-weight: 720;
}


/* =========================================================
   STEUERBERATER
   ========================================================= */

#stundenabrechnung #hoursBillingTaxPanel {
    display: grid;
    gap: 12px;
}


/* ---------------------------------------------------------
   Steuerberater-Kopf
   --------------------------------------------------------- */

#stundenabrechnung .tax-hours-head {
    padding: 12px 14px;

    border:
        1px solid rgba(73, 109, 147, 0.15);

    border-radius: 11px;

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            var(--billing-blue-soft) 100%);
}

#stundenabrechnung .tax-hours-head h3 {
    margin: 0 0 3px;

    font-size: 0.83rem;
}

#stundenabrechnung .tax-hours-head p {
    font-size: 0.58rem;
}


/* ---------------------------------------------------------
   Anschrift und PDF
   --------------------------------------------------------- */

#stundenabrechnung .tax-advisor-box {
    display: grid;
    grid-template-columns:
        minmax(380px, 520px) auto;

    align-items: end;
    justify-content: start;
    gap: 12px;

    padding: 12px;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: #f7f8fa;
}

#stundenabrechnung .tax-advisor-box>label {
    min-width: 0;

    display: grid;
    gap: 5px;
}

#stundenabrechnung .tax-advisor-box label>span {
    color: var(--muted);

    font-size: 0.53rem;
    font-weight: 850;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#stundenabrechnung #taxAdvisorAddressInput {
    width: 100%;
    min-height: 118px;
    height: 118px;

    padding: 9px 11px;

    border-radius: 9px;

    background: #ffffff;

    font-size: 0.63rem;
    line-height: 1.45;

    resize: vertical;
}

#stundenabrechnung #taxHoursPdfBtn {
    min-width: 175px;
    min-height: 38px;

    padding: 7px 11px;

    border-color: #384653;
    border-radius: 9px;

    background: #384653;
    color: #ffffff;

    font-size: 0.61rem;
}

#stundenabrechnung #taxHoursPdfBtn:hover {
    border-color: #27333e;

    background: #27333e;
}


/* ---------------------------------------------------------
   Mitarbeiterzeilen
   --------------------------------------------------------- */

#stundenabrechnung .tax-hours-list {
    display: grid;
    gap: 8px;
}

#stundenabrechnung .tax-hours-row-v2 {
    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 170px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: #ffffff;
}

#stundenabrechnung .tax-hours-main {
    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(145px, 1.25fr) repeat(5, minmax(88px, 0.72fr)) 76px;

    align-items: end;
    gap: 7px;

    padding: 10px;
}

#stundenabrechnung .tax-hours-name {
    align-self: center;

    min-width: 0;

    overflow: hidden;

    color: var(--heading);

    font-size: 0.66rem;
    line-height: 1.25;
    font-weight: 850;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#stundenabrechnung .tax-hours-main>label {
    min-width: 0;

    display: grid;
    gap: 4px;
}

#stundenabrechnung .tax-hours-main>label>span,
#stundenabrechnung .tax-travel-field>span {
    color: var(--muted);

    font-size: 0.47rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.035em;
    text-transform: uppercase;
}

#stundenabrechnung .tax-hours-main input {
    width: 100%;
    min-width: 0;
    min-height: 34px;

    padding: 6px 7px;

    border-radius: 8px;

    background: #ffffff;

    font-size: 0.59rem;
    font-weight: 700;
}

#stundenabrechnung .tax-hours-main input:focus {
    outline: none;

    border-color:
        rgba(227, 16, 16, 0.42);

    box-shadow:
        0 0 0 3px rgba(227, 16, 16, 0.07);
}


/* ---------------------------------------------------------
   Fahrtgeld-Schalter
   --------------------------------------------------------- */

#stundenabrechnung .tax-travel-field {
    min-width: 0;

    display: grid;
    justify-items: center;
    gap: 4px;
}

#stundenabrechnung .tax-travel-field small {
    color: var(--muted);

    font-size: 0.47rem;
    line-height: 1;
}

#stundenabrechnung .tax-switch {
    position: relative;

    width: 34px;
    height: 19px;

    display: inline-block;
}

#stundenabrechnung .tax-switch input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}

#stundenabrechnung .tax-switch-slider {
    position: absolute;
    inset: 0;

    border-radius: 999px;

    background: #cfd5dc;

    cursor: pointer;

    transition:
        background 150ms ease;
}

#stundenabrechnung .tax-switch-slider::before {
    content: "";

    position: absolute;
    top: 3px;
    left: 3px;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 1px 3px rgba(22, 28, 36, 0.2);

    transition:
        transform 150ms ease;
}

#stundenabrechnung .tax-switch input:checked+.tax-switch-slider {
    background: var(--billing-green);
}

#stundenabrechnung .tax-switch input:checked+.tax-switch-slider::before {
    transform: translateX(15px);
}


/* ---------------------------------------------------------
   Stundenresultat rechts
   --------------------------------------------------------- */

#stundenabrechnung .tax-hours-result {
    min-width: 0;

    display: grid;
    align-content: center;
    gap: 4px;

    padding: 10px 12px;

    border-left:
        1px solid var(--border);

    background:
        linear-gradient(135deg,
            #f7f8fa 0%,
            #ffffff 100%);
}

#stundenabrechnung .tax-hours-result span {
    color: var(--muted);

    font-size: 0.5rem;
    line-height: 1.2;
}

#stundenabrechnung .tax-hours-result b {
    color: var(--heading);
}

#stundenabrechnung .tax-hours-result>strong {
    margin-top: 3px;

    color: var(--billing-green);

    font-size: 0.72rem;
    line-height: 1.1;
    font-weight: 900;
}


/* ---------------------------------------------------------
   Pauschalzeile
   --------------------------------------------------------- */

#stundenabrechnung .tax-flat-row {
    border-color:
        rgba(73, 109, 147, 0.2);

    background: var(--billing-blue-soft);
}

#stundenabrechnung .tax-flat-row .tax-hours-main {
    background:
        rgba(238, 244, 250, 0.5);
}

#stundenabrechnung .tax-flat-row .tax-hours-result {
    background:
        rgba(255, 255, 255, 0.75);
}

#stundenabrechnung .tax-flat-no-header {
    align-self: end;
}

#stundenabrechnung .tax-flat-placeholder {
    min-width: 0;
}


/* ---------------------------------------------------------
   Kopierausgabe
   --------------------------------------------------------- */

#stundenabrechnung .tax-hours-output {
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: #ffffff;
}

#stundenabrechnung .tax-hours-output-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 9px 11px;

    border-bottom:
        1px solid var(--border);

    background: #f7f8fa;
}

#stundenabrechnung .tax-hours-output-head strong {
    font-size: 0.62rem;
}

#stundenabrechnung #copyTaxHoursBtn {
    min-height: 31px;

    padding: 5px 9px;

    border-radius: 8px;

    font-size: 0.57rem;
}

#stundenabrechnung #taxHoursOutput {
    width: 100%;
    min-height: 150px;

    display: block;

    padding: 11px;

    border: 0;
    border-radius: 0;

    background: #ffffff;

    font-family:
        "Consolas",
        "Courier New",
        monospace;

    font-size: 0.57rem;
    line-height: 1.45;

    resize: vertical;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1250px) {
    #stundenabrechnung .hours-billing-cards {
        grid-template-columns:
            repeat(auto-fit,
                minmax(360px, 1fr));
    }

    #stundenabrechnung .tax-hours-row-v2 {
        grid-template-columns: 1fr;
    }

    #stundenabrechnung .tax-hours-result {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        align-items: center;

        border-top:
            1px solid var(--border);
        border-left: 0;
    }

    #stundenabrechnung .tax-hours-result>strong {
        margin-top: 0;

        text-align: right;
    }
}

@media (max-width: 980px) {
    #stundenabrechnung .tax-hours-main {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    #stundenabrechnung .tax-hours-name {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    #stundenabrechnung>.panel>.panel-header {
        justify-content: flex-start;
    }

    #stundenabrechnung .panel-header .toolbar {
        width: 100%;

        margin-left: 0;

        flex-wrap: nowrap;

        overflow-x: auto;
    }

    #stundenabrechnung .hours-billing-done {
        width: 100%;

        margin: 0 0 7px;
    }

    #stundenabrechnung .hours-billing-subtabs {
        width: 100%;
    }

    #stundenabrechnung .hours-billing-subtab {
        flex: 1 1 50%;
    }

    #stundenabrechnung .hours-billing-cards {
        grid-template-columns: 1fr;
    }

    #stundenabrechnung .hours-billing-metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #stundenabrechnung .tax-advisor-box {
        grid-template-columns: 1fr;
    }

    #stundenabrechnung #taxHoursPdfBtn {
        width: 100%;
    }

    #stundenabrechnung .tax-hours-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #stundenabrechnung .tax-hours-name,
    #stundenabrechnung .tax-travel-field {
        grid-column: 1 / -1;
    }

    #stundenabrechnung .tax-hours-result {
        grid-template-columns: 1fr;
    }

    #stundenabrechnung .tax-hours-result>strong {
        text-align: left;
    }
}

/* =========================================================
   URLAUBSPLANUNG – KOMPAKTE JAHRESÜBERSICHT
   ========================================================= */

#urlaubsplan {
    --vacation-blue: #4778ae;
    --vacation-blue-soft: #eaf2fb;

    --vacation-weekend: #6e7782;
    --vacation-weekend-soft: #edf0f3;

    --vacation-holiday: #b54343;
    --vacation-holiday-soft: #fff0f0;
}


/* ---------------------------------------------------------
   Hauptbereich
   --------------------------------------------------------- */

#urlaubsplan>.panel {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;
    gap: 10px 14px;

    padding: 16px;

    overflow: visible;

    border-radius: 15px;
}


/*
 * Der Seitentitel steht schon oben in der Appbar.
 */
#urlaubsplan>.panel>.panel-header {
    grid-column: 1 / -1;

    min-height: 42px;

    justify-content: flex-end;

    margin-bottom: 2px;
}

#urlaubsplan>.panel>.panel-header>div:first-child {
    display: none;
}


/* ---------------------------------------------------------
   Jahr und Geschäftsführung
   --------------------------------------------------------- */

#urlaubsplan .panel-header .toolbar {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-left: auto;
}

#urlaubsplan .panel-header .toolbar select,
#urlaubsplan .panel-header .toolbar button {
    min-height: 37px;

    padding: 7px 10px;

    border-radius: 9px;

    font-size: 0.66rem;
    font-weight: 780;
}

#urlaubsplan #vacationPlanYearSelect {
    width: 92px;
}

#urlaubsplan #vacationPlanBossSelect {
    width: 225px;
}

#urlaubsplan #todayVacationPlanBtn {
    min-width: 105px;
}


/*
 * Die Geschäftsführungs-Auswahl wird nur im
 * entsprechenden Reiter benötigt.
 */
#urlaubsplan #vacationPlanBossSelect {
    display: none;
}

#urlaubsplan:has(.vacation-plan-subtab[ data-vacation-tab="management"

    ].active) #vacationPlanBossSelect {
    display: block;
}


/* ---------------------------------------------------------
   Legende
   --------------------------------------------------------- */

#urlaubsplan #vacationPlanHints {
    min-height: 34px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    margin: 0;
}

#urlaubsplan #vacationPlanHints .pill {
    min-height: 25px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 4px 8px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: #ffffff;
    color: var(--muted);

    font-size: 0.55rem;
    line-height: 1;
    font-weight: 780;
}

#urlaubsplan #vacationPlanHints .pill::before {
    content: "";

    width: 7px;
    height: 7px;

    display: block;

    border-radius: 2px;

    background: #ffffff;

    box-shadow:
        inset 0 0 0 1px #cfd5dc;
}

#urlaubsplan #vacationPlanHints .pill.urlaub {
    border-color:
        rgba(71, 120, 174, 0.18);

    background:
        var(--vacation-blue-soft);

    color:
        var(--vacation-blue);
}

#urlaubsplan #vacationPlanHints .pill.urlaub::before {
    background:
        var(--vacation-blue);

    box-shadow: none;
}

#urlaubsplan #vacationPlanHints .pill.saturday {
    background: #f3f5f7;
    color: #737d88;
}

#urlaubsplan #vacationPlanHints .pill.saturday::before {
    background: #c8ced5;
}

#urlaubsplan #vacationPlanHints .pill.so {
    background:
        var(--vacation-weekend-soft);

    color:
        var(--vacation-weekend);
}

#urlaubsplan #vacationPlanHints .pill.so::before {
    background: #858e98;
}

#urlaubsplan #vacationPlanHints .pill.f {
    border-color:
        rgba(181, 67, 67, 0.17);

    background:
        var(--vacation-holiday-soft);

    color:
        var(--vacation-holiday);
}

#urlaubsplan #vacationPlanHints .pill.f::before {
    background:
        var(--vacation-holiday);

    box-shadow: none;
}


/* ---------------------------------------------------------
   Mitarbeiter / Geschäftsführung
   --------------------------------------------------------- */

#urlaubsplan .vacation-plan-subtabs {
    justify-self: end;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin: 0;
    padding: 4px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #f7f8fa;
}

#urlaubsplan .vacation-plan-subtab {
    min-height: 30px;

    padding: 6px 10px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #66717d;

    box-shadow: none;
    transform: none;

    font-size: 0.6rem;
    line-height: 1;
    font-weight: 820;
}

#urlaubsplan .vacation-plan-subtab:hover {
    border: 0;

    background: #ffffff;
    color: var(--heading);

    box-shadow: none;
    transform: none;
}

#urlaubsplan .vacation-plan-subtab.active {
    background: #303944;
    color: #ffffff;
}


/* ---------------------------------------------------------
   Aktiver Unterbereich
   --------------------------------------------------------- */

#urlaubsplan .vacation-plan-subpanel {
    grid-column: 1 / -1;

    min-width: 0;

    display: none;
}

#urlaubsplan .vacation-plan-subpanel.active {
    display: block;
}


/* ---------------------------------------------------------
   Jahresübersicht
   --------------------------------------------------------- */

#urlaubsplan .vacation-year-grid {
    min-width: 0;

    display: grid;
    gap: 8px;
}


/* ---------------------------------------------------------
   Einzelner Monat
   --------------------------------------------------------- */

#urlaubsplan .vacation-month-card {
    min-width: 0;

    display: grid;
    grid-template-columns:
        118px minmax(0, 1fr);

    align-items: center;
    gap: 10px;

    padding: 9px 10px;

    border: 1px solid var(--border);
    border-radius: 11px;

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #fafbfc 100%);

    transition:
        border-color 140ms ease,
        box-shadow 140ms ease;
}

#urlaubsplan .vacation-month-card:hover {
    border-color: #c7ced6;

    box-shadow:
        0 5px 14px rgba(22, 28, 36, 0.055);
}


/* ---------------------------------------------------------
   Monatsname
   --------------------------------------------------------- */

#urlaubsplan .vacation-month-title {
    min-width: 0;

    margin: 0;
    padding-left: 3px;

    color: var(--heading);

    font-size: 0.65rem;
    line-height: 1.2;
    font-weight: 850;

    text-transform: capitalize;
}


/* ---------------------------------------------------------
   Tagesraster
   --------------------------------------------------------- */

#urlaubsplan .vacation-month-grid {
    min-width: 0;

    display: grid;
    grid-template-columns:
        repeat(var(--vac-days),
            minmax(0, 1fr));

    align-items: center;
    gap: 3px;
}


/* ---------------------------------------------------------
   Einzelner Tag
   --------------------------------------------------------- */

#urlaubsplan .vacation-day-head {
    width: 100%;
    min-width: 0;
    min-height: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #e0e4e8;
    border-radius: 6px;

    background: #f8f9fa;
    color: #59636e;

    box-shadow: none;
    transform: none;

    font-size: 0.56rem;
    line-height: 1;
    font-weight: 800;

    cursor: help;

    transition:
        border-color 130ms ease,
        background 130ms ease,
        color 130ms ease,
        transform 130ms ease;
}

#urlaubsplan .vacation-day-head:hover {
    position: relative;
    z-index: 3;

    border-color: #aeb7c1;

    background: #ffffff;
    color: var(--heading);

    box-shadow:
        0 4px 10px rgba(22, 28, 36, 0.09);

    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   Samstag
   --------------------------------------------------------- */

#urlaubsplan .vacation-day-head.saturday {
    border-color: #d8dde2;

    background: #f0f2f4;
    color: #7b848e;
}


/* ---------------------------------------------------------
   Sonntag
   --------------------------------------------------------- */

#urlaubsplan .vacation-day-head.sunday {
    border-color: #cbd1d8;

    background:
        var(--vacation-weekend-soft);

    color:
        var(--vacation-weekend);
}


/* ---------------------------------------------------------
   Feiertag
   --------------------------------------------------------- */

#urlaubsplan .vacation-day-head.holiday {
    border-color:
        rgba(181, 67, 67, 0.24);

    background:
        var(--vacation-holiday-soft);

    color:
        var(--vacation-holiday);
}


/* ---------------------------------------------------------
   Urlaub
   --------------------------------------------------------- */

#urlaubsplan .vacation-day-head.urlaub {
    border-color:
        rgba(71, 120, 174, 0.32);

    background:
        var(--vacation-blue-soft);

    color:
        var(--vacation-blue);

    font-weight: 900;
}


/* ---------------------------------------------------------
   Urlaub plus Wochenende/Feiertag
   --------------------------------------------------------- */

#urlaubsplan .vacation-day-head.urlaub.saturday {
    border-color:
        rgba(71, 120, 174, 0.28);

    background:
        linear-gradient(135deg,
            var(--vacation-blue-soft) 0 50%,
            #f0f2f4 50% 100%);

    color: #536d89;
}

#urlaubsplan .vacation-day-head.urlaub.sunday {
    border-color:
        rgba(71, 120, 174, 0.3);

    background:
        linear-gradient(135deg,
            var(--vacation-blue-soft) 0 50%,
            var(--vacation-weekend-soft) 50% 100%);

    color: #526a83;
}

#urlaubsplan .vacation-day-head.urlaub.holiday {
    border-color:
        rgba(150, 80, 90, 0.3);

    background:
        linear-gradient(135deg,
            var(--vacation-blue-soft) 0 50%,
            var(--vacation-holiday-soft) 50% 100%);

    color: #68566b;
}


/* ---------------------------------------------------------
   Bearbeitbare Geschäftsführungs-Tage
   --------------------------------------------------------- */

#urlaubsplan button.vacation-day-head.boss-editable {
    cursor: pointer;
}

#urlaubsplan button.vacation-day-head.boss-editable:hover {
    border-color:
        rgba(227, 16, 16, 0.38);

    box-shadow:
        0 0 0 3px rgba(227, 16, 16, 0.07);
}

#urlaubsplan button.vacation-day-head.boss-editable:active {
    transform: scale(0.94);

    box-shadow: none;
}


/* ---------------------------------------------------------
   Leere Geschäftsführungsansicht
   --------------------------------------------------------- */

#urlaubsplan .vacation-bar-empty {
    min-height: 180px;

    display: grid;
    place-items: center;

    padding: 24px;

    border:
        1px dashed var(--border-strong);

    border-radius: 12px;

    background:
        repeating-linear-gradient(135deg,
            rgba(120, 130, 142, 0.035) 0 7px,
            transparent 7px 14px),
        #fafbfc;

    color: var(--muted);

    text-align: center;

    font-size: 0.66rem;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1050px) {
    #urlaubsplan>.panel {
        grid-template-columns: 1fr;
    }

    #urlaubsplan #vacationPlanHints,
    #urlaubsplan .vacation-plan-subtabs,
    #urlaubsplan .vacation-plan-subpanel {
        grid-column: 1;
    }

    #urlaubsplan .vacation-plan-subtabs {
        justify-self: start;
    }

    #urlaubsplan .vacation-plan-subpanel {
        max-width: 100%;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: thin;
    }

    #urlaubsplan .vacation-year-grid {
        min-width: 980px;
    }
}

@media (max-width: 650px) {
    #urlaubsplan>.panel>.panel-header {
        justify-content: flex-start;
    }

    #urlaubsplan .panel-header .toolbar {
        width: 100%;

        margin-left: 0;

        flex-wrap: wrap;
    }

    #urlaubsplan #vacationPlanYearSelect,
    #urlaubsplan #vacationPlanBossSelect,
    #urlaubsplan #todayVacationPlanBtn {
        width: 100%;
    }

    #urlaubsplan .vacation-plan-subtabs {
        width: 100%;
    }

    #urlaubsplan .vacation-plan-subtab {
        flex: 1 1 50%;
    }
}

/* =========================================================
   MITARBEITERDATEN – MODERNE STAMMDATENVERWALTUNG
   ========================================================= */

#mitarbeiterdaten {
    --employee-green: #2f7553;
    --employee-green-soft: #eef8f2;

    --employee-blue: #496d93;
    --employee-blue-soft: #eef4fa;

    --employee-amber: #8a681d;
    --employee-amber-soft: #fff8e2;

    --employee-danger: #b54343;
    --employee-danger-soft: #fff1f1;

    --employee-columns:
        38px minmax(175px, 1.35fr) 65px 90px minmax(125px, 1fr) 100px 100px 78px 82px 82px 86px;
}


/* ---------------------------------------------------------
   Seitenaufbau
   --------------------------------------------------------- */

#mitarbeiterdaten .employee-page-layout {
    display: grid;
    gap: 14px;
}

#mitarbeiterdaten .employee-page-layout>.panel {
    margin: 0;
}

#mitarbeiterdaten .employee-list-panel {
    padding: 0;

    overflow: hidden;

    border-radius: 15px;
}

#mitarbeiterdaten .employee-management-panel {
    padding: 16px;

    border-radius: 15px;
}


/* ---------------------------------------------------------
   Suche und neuer Mitarbeiter
   --------------------------------------------------------- */

#mitarbeiterdaten .employee-page-toolbar {
    display: grid;
    grid-template-columns:
        minmax(300px, 1fr) auto;

    align-items: end;
    gap: 10px;

    padding: 15px 16px;

    border-bottom:
        1px solid var(--border);

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #fafbfc 100%);
}

#mitarbeiterdaten .employee-search-field {
    min-width: 0;

    display: grid;
    gap: 5px;
}

#mitarbeiterdaten .employee-search-field>span {
    color: var(--muted);

    font-size: 0.55rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.065em;
    text-transform: uppercase;
}

#mitarbeiterdaten .employee-search-field {
    position: relative;
}

#mitarbeiterdaten .employee-search-field::after {
    content: "⌕";

    position: absolute;
    left: 12px;
    bottom: 10px;

    color: #7a8591;

    font-size: 0.95rem;

    pointer-events: none;
}

#mitarbeiterdaten #employeeSearchInput {
    width: 100%;
    min-height: 40px;

    padding:
        8px 11px 8px 37px;

    border-radius: 9px;

    background: #ffffff;

    font-size: 0.68rem;
    font-weight: 680;
}

#mitarbeiterdaten #employeeSearchInput:focus {
    outline: none;

    border-color:
        rgba(227, 16, 16, 0.48);

    box-shadow:
        0 0 0 3px rgba(227, 16, 16, 0.08);
}

#mitarbeiterdaten .employee-add-button {
    min-height: 40px;

    padding: 8px 13px;

    border-color: var(--brand);
    border-radius: 9px;

    background: var(--brand);
    color: #ffffff;

    font-size: 0.66rem;
    font-weight: 820;

    white-space: nowrap;
}

#mitarbeiterdaten .employee-add-button:hover {
    border-color: var(--brand-dark);

    background: var(--brand-dark);
}


/* ---------------------------------------------------------
   Hinweis
   --------------------------------------------------------- */

#mitarbeiterdaten .employee-info-note {
    display: grid;
    grid-template-columns:
        24px minmax(0, 1fr);

    align-items: center;
    gap: 8px;

    margin: 12px 16px 0;
    padding: 8px 10px;

    border:
        1px solid rgba(73, 109, 147, 0.15);

    border-radius: 9px;

    background: var(--employee-blue-soft);
    color: #5b7086;
}

#mitarbeiterdaten .employee-info-note>span {
    width: 21px;
    height: 21px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(73, 109, 147, 0.12);

    color: var(--employee-blue);

    font-size: 0.62rem;
    font-weight: 900;
}

#mitarbeiterdaten .employee-info-note p {
    margin: 0;

    font-size: 0.58rem;
    line-height: 1.35;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Mitarbeiterübersicht
   --------------------------------------------------------- */

#mitarbeiterdaten .employee-admin-overview {
    min-width: 0;

    display: grid;
    gap: 13px;

    padding: 13px 16px 16px;

    overflow-x: auto;

    scrollbar-width: thin;
}

#mitarbeiterdaten .employee-admin-section {
    min-width: 1160px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: #ffffff;
}

#mitarbeiterdaten .employee-admin-section-head {
    min-height: 43px;

    display: flex;
    align-items: center;

    padding: 10px 12px;

    border-bottom:
        1px solid var(--border);

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f7f8fa 100%);
}

#mitarbeiterdaten .employee-admin-section-head h3 {
    margin: 0;

    color: var(--heading);

    font-size: 0.73rem;
    line-height: 1.2;
    font-weight: 850;
}


/* ---------------------------------------------------------
   Tabellenkopf
   --------------------------------------------------------- */

#mitarbeiterdaten .employee-admin-header {
    display: grid;
    grid-template-columns:
        var(--employee-columns);

    align-items: center;

    min-width: 1160px;

    border-bottom:
        1px solid var(--border-strong);

    background: #eef1f4;
}

#mitarbeiterdaten .employee-admin-header>div {
    min-width: 0;

    padding: 8px 7px;

    color: #65707c;

    font-size: 0.5rem;
    line-height: 1.1;
    font-weight: 850;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   Mitarbeiterzeilen
   --------------------------------------------------------- */

#mitarbeiterdaten .employee-admin-list {
    min-width: 1160px;

    display: grid;
}

#mitarbeiterdaten .employee-admin-row {
    position: relative;

    min-width: 1160px;
    min-height: 49px;

    display: grid;
    grid-template-columns:
        var(--employee-columns);

    align-items: center;

    border-bottom:
        1px solid #e7eaee;

    background: #ffffff;

    transition:
        background 130ms ease,
        box-shadow 130ms ease;
}

#mitarbeiterdaten .employee-admin-row:last-child {
    border-bottom: 0;
}

#mitarbeiterdaten .employee-admin-row:hover {
    background: #f8f9fa;
}

#mitarbeiterdaten .employee-admin-row::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 3px;

    background: var(--employee-green);
}

#mitarbeiterdaten .employee-admin-row[ data-active-group="inactive"

]::before {
    background: #929aa4;
}


/* ---------------------------------------------------------
   Readonly-Felder
   --------------------------------------------------------- */

#mitarbeiterdaten .employee-admin-row input {
    width: 100%;
    min-width: 0;
    min-height: 30px;

    padding: 5px 7px;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 7px;

    background: transparent;
    color: var(--text);

    box-shadow: none;

    text-overflow: ellipsis;

    font-size: 0.61rem;
    line-height: 1.2;
    font-weight: 680;
}

#mitarbeiterdaten .employee-admin-row:hover input {
    border-color:
        rgba(207, 213, 220, 0.7);

    background:
        rgba(255, 255, 255, 0.75);
}

#mitarbeiterdaten .employee-admin-row input[data-field="name"] {
    color: var(--heading);

    font-size: 0.66rem;
    font-weight: 850;
}

#mitarbeiterdaten .employee-admin-row input[data-field="personnelNumber"],
#mitarbeiterdaten .employee-admin-row input[data-field="vacationAllowance"],
#mitarbeiterdaten .employee-admin-row input[data-field="vacationCarryover"] {
    text-align: center;
}

#mitarbeiterdaten .employee-admin-row input[data-field="department"] {
    color: var(--employee-blue);

    font-weight: 800;
}

#mitarbeiterdaten .employee-admin-row input[data-field="active"] {
    width: calc(100% - 10px);

    margin: 0 5px;

    border-color:
        rgba(47, 117, 83, 0.18);

    background: var(--employee-green-soft);
    color: var(--employee-green);

    text-align: center;

    font-size: 0.55rem;
    font-weight: 850;
}

#mitarbeiterdaten .employee-admin-row[ data-active-group="inactive"

] input[data-field="active"] {
    border-color:
        rgba(110, 119, 129, 0.18);

    background: #eef0f2;
    color: #737c86;
}


/* ---------------------------------------------------------
   Drag-Handle
   --------------------------------------------------------- */

#mitarbeiterdaten .employee-admin-row .drag-handle {
    width: 28px;
    height: 30px;
    min-width: 28px;
    min-height: 30px;

    justify-self: center;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid transparent;
    border-radius: 7px;

    background: transparent;
    color: #9aa3ad;

    box-shadow: none;

    font-size: 0.8rem;

    cursor: grab;
}

#mitarbeiterdaten .employee-admin-row .drag-handle:hover {
    border-color: var(--border);

    background: #ffffff;
    color: #59636e;
}

#mitarbeiterdaten .employee-admin-row .drag-handle:active {
    cursor: grabbing;
}

#mitarbeiterdaten .employee-admin-row .drag-handle:disabled {
    opacity: 0.28;

    cursor: not-allowed;
}


/* ---------------------------------------------------------
   Bearbeiten
   --------------------------------------------------------- */

#mitarbeiterdaten .employee-admin-row button[data-action="edit"] {
    min-height: 31px;

    margin: 0 6px;
    padding: 5px 8px;

    border-radius: 8px;

    background: #ffffff;

    font-size: 0.56rem;
    font-weight: 800;
}

#mitarbeiterdaten .employee-admin-row button[data-action="edit"]:hover {
    border-color:
        rgba(227, 16, 16, 0.28);

    background: var(--brand-soft);
    color: var(--brand-dark);
}


/* ---------------------------------------------------------
   Drag-Zustände
   --------------------------------------------------------- */

#mitarbeiterdaten .employee-admin-row.dragging {
    z-index: 5;

    opacity: 0.75;

    box-shadow:
        0 12px 28px rgba(22, 28, 36, 0.16);

    transform: scale(0.995);
}

#mitarbeiterdaten .employee-admin-row.drag-over {
    box-shadow:
        inset 0 2px 0 var(--brand);
}


/* ---------------------------------------------------------
   Leerer Bereich
   --------------------------------------------------------- */

#mitarbeiterdaten .employee-admin-empty {
    min-height: 76px;

    display: grid;
    place-items: center;

    padding: 18px;

    background:
        repeating-linear-gradient(135deg,
            rgba(120, 130, 142, 0.03) 0 7px,
            transparent 7px 14px),
        #fafbfc;

    color: var(--muted);

    text-align: center;

    font-size: 0.59rem;
    font-weight: 700;
}


/* =========================================================
   GESCHÄFTSFÜHRUNG
   ========================================================= */

#mitarbeiterdaten .employee-management-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 12px;
    padding-bottom: 13px;

    border-bottom:
        1px solid var(--border);
}

#mitarbeiterdaten .employee-section-eyebrow {
    display: block;

    margin-bottom: 4px;

    color: var(--brand);

    font-size: 0.54rem;
    font-weight: 850;

    letter-spacing: 0.075em;
    text-transform: uppercase;
}

#mitarbeiterdaten .employee-management-head h2 {
    margin: 0 0 3px;

    font-size: 0.95rem;
}

#mitarbeiterdaten .employee-management-head p {
    font-size: 0.59rem;
}

#mitarbeiterdaten .employee-management-head button {
    min-height: 35px;

    padding: 6px 10px;

    border-radius: 8px;

    font-size: 0.6rem;
}


/* ---------------------------------------------------------
   Geschäftsführungszeilen
   --------------------------------------------------------- */

#mitarbeiterdaten .employee-management-list {
    display: grid;
    gap: 7px;
}

#mitarbeiterdaten .employee-management-list:empty::before {
    content: "Noch keine Personen hinterlegt.";

    min-height: 80px;

    display: grid;
    place-items: center;

    border:
        1px dashed var(--border-strong);

    border-radius: 10px;

    background: #fafbfc;
    color: var(--muted);

    font-size: 0.6rem;
    font-weight: 700;
}

#mitarbeiterdaten .external-birthday-row {
    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(180px, 1fr) 150px minmax(180px, 0.8fr) 90px;

    align-items: center;
    gap: 8px;

    padding: 8px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #fafbfc 100%);
}

#mitarbeiterdaten .external-birthday-row input {
    width: 100%;
    min-width: 0;
    min-height: 34px;

    padding: 6px 8px;

    border-color: transparent;
    border-radius: 8px;

    background: transparent;

    font-size: 0.62rem;
}

#mitarbeiterdaten .external-birthday-row input[data-field="name"] {
    color: var(--heading);

    font-weight: 850;
}

#mitarbeiterdaten .external-birthday-row:hover input {
    border-color: var(--border);

    background: #ffffff;
}

#mitarbeiterdaten .external-birthday-row button[data-action="edit"] {
    min-height: 33px;

    padding: 6px 9px;

    border-radius: 8px;

    font-size: 0.57rem;
}


/* =========================================================
   MITARBEITER-BEARBEITUNGSFENSTER
   ========================================================= */

.employee-edit-box,
.boss-edit-box {
    padding: 0;

    overflow: hidden;
}

.employee-edit-box>h3,
.boss-edit-box>h3 {
    margin: 0;
    padding: 19px 21px;

    border-bottom:
        1px solid var(--border);

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f7f8fa 100%);

    font-size: 1.03rem;
}

.employee-edit-fields,
.boss-edit-fields {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 11px;

    padding: 18px 21px;
}

.employee-edit-fields label,
.boss-edit-fields label {
    min-width: 0;

    display: grid;
    gap: 5px;
}

.employee-edit-fields label>span,
.boss-edit-fields label>span {
    color: var(--muted);

    font-size: 0.54rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.employee-edit-fields input,
.employee-edit-fields select,
.boss-edit-fields input {
    width: 100%;
    min-height: 39px;

    border-radius: 9px;

    background: #ffffff;

    font-size: 0.67rem;
    font-weight: 680;
}

.employee-edit-fields input:focus,
.employee-edit-fields select:focus,
.boss-edit-fields input:focus {
    outline: none;

    border-color:
        rgba(227, 16, 16, 0.46);

    box-shadow:
        0 0 0 3px rgba(227, 16, 16, 0.08);
}

.employee-edit-box .confirm-actions,
.boss-edit-box .confirm-actions {
    margin: 0;
    padding: 14px 21px 18px;

    border-top:
        1px solid var(--border);

    background: #fafbfc;
}

#employeeEditSave,
#externalBirthdaySave {
    border-color: var(--brand);

    background: var(--brand);
    color: #ffffff;
}

#employeeEditSave:hover,
#externalBirthdaySave:hover {
    border-color: var(--brand-dark);

    background: var(--brand-dark);
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 850px) {
    #mitarbeiterdaten .employee-page-toolbar {
        grid-template-columns: 1fr;
    }

    #mitarbeiterdaten .employee-add-button {
        width: 100%;
    }

    #mitarbeiterdaten .employee-management-head {
        align-items: stretch;
        flex-direction: column;
    }

    #mitarbeiterdaten .employee-management-head button {
        width: 100%;
    }

    #mitarbeiterdaten .external-birthday-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #mitarbeiterdaten .external-birthday-row button[data-action="edit"] {
        grid-column: 1 / -1;
    }

    .employee-edit-fields,
    .boss-edit-fields {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {

    .employee-edit-fields,
    .boss-edit-fields {
        grid-template-columns: 1fr;
    }

    #mitarbeiterdaten .external-birthday-row {
        grid-template-columns: 1fr;
    }

    #mitarbeiterdaten .external-birthday-row button[data-action="edit"] {
        grid-column: auto;
    }
}

/* =========================================================
   NOTIZEN & TERMINE – MODERNER ORGANISATIONSBEREICH
   ========================================================= */

#notizen {
    --notes-blue: #496d93;
    --notes-blue-soft: #eef4fa;

    --notes-green: #2f7553;
    --notes-green-soft: #eef8f2;

    --notes-amber: #8a681d;
    --notes-amber-soft: #fff8e2;

    --notes-danger: #b54343;
    --notes-danger-soft: #fff1f1;
}


/* ---------------------------------------------------------
   Seitenaufbau
   --------------------------------------------------------- */

#notizen .notes-events-layout {
    display: grid;
    grid-template-columns:
        minmax(370px, 0.72fr) minmax(0, 1.65fr);

    align-items: start;
    gap: 14px;
}

#notizen .notes-events-layout>.panel {
    min-width: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border-radius: 15px;
}


/* ---------------------------------------------------------
   Bereichsköpfe
   --------------------------------------------------------- */

#notizen .notes-section-head {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 15px 16px;

    border-bottom:
        1px solid var(--border);

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #fafbfc 100%);
}

#notizen .notes-section-head>div {
    min-width: 0;
}

#notizen .notes-section-eyebrow {
    display: block;

    margin-bottom: 4px;

    color: var(--brand);

    font-size: 0.54rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#notizen .notes-section-head h2 {
    margin: 0 0 3px;

    color: var(--heading);

    font-size: 1rem;
    line-height: 1.2;
}

#notizen .notes-section-head p {
    font-size: 0.59rem;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   Hinzufügen-Schaltflächen
   --------------------------------------------------------- */

#notizen .notes-primary-button {
    min-height: 37px;

    flex: 0 0 auto;

    padding: 7px 11px;

    border-color: var(--brand);
    border-radius: 9px;

    background: var(--brand);
    color: #ffffff;

    font-size: 0.62rem;
    font-weight: 820;

    white-space: nowrap;
}

#notizen .notes-primary-button:hover {
    border-color: var(--brand-dark);

    background: var(--brand-dark);
}


/* =========================================================
   NOTIZEN
   ========================================================= */

/* ---------------------------------------------------------
   Hinweis
   --------------------------------------------------------- */

#notizen .notes-info-box {
    display: grid;
    grid-template-columns:
        23px minmax(0, 1fr);

    align-items: center;
    gap: 8px;

    margin: 12px 13px 0;
    padding: 8px 9px;

    border:
        1px solid rgba(73, 109, 147, 0.15);

    border-radius: 9px;

    background: var(--notes-blue-soft);
    color: #5c7085;
}

#notizen .notes-info-box>span {
    width: 21px;
    height: 21px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(73, 109, 147, 0.12);

    color: var(--notes-blue);

    font-size: 0.62rem;
    font-weight: 900;
}

#notizen .notes-info-box p {
    margin: 0;

    font-size: 0.55rem;
    line-height: 1.35;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Notizenliste
   --------------------------------------------------------- */

#notizen .notes-admin-list {
    display: grid;
    gap: 9px;

    padding: 12px 13px 14px;
}

#notizen .notes-admin-list:empty::before {
    content: "Noch keine Notizen vorhanden.";

    min-height: 130px;

    display: grid;
    place-items: center;

    padding: 20px;

    border:
        1px dashed var(--border-strong);

    border-radius: 11px;

    background:
        repeating-linear-gradient(135deg,
            rgba(120, 130, 142, 0.035) 0 7px,
            transparent 7px 14px),
        #fafbfc;

    color: var(--muted);

    text-align: center;

    font-size: 0.6rem;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Notizkarte
   --------------------------------------------------------- */

#notizen .note-card-row {
    position: relative;

    min-width: 0;

    display: grid;
    gap: 9px;

    padding: 12px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #fafbfc 100%);

    box-shadow:
        0 3px 10px rgba(22, 28, 36, 0.035);
}

#notizen .note-card-row::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 3px;

    border-radius: 12px 0 0 12px;

    background: var(--notes-blue);
}


/* ---------------------------------------------------------
   Titel und Datum
   --------------------------------------------------------- */

#notizen .note-card-fields {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 135px;

    gap: 7px;
}

#notizen .note-card-fields input {
    width: 100%;
    min-width: 0;
    min-height: 36px;

    padding: 7px 9px;

    border-radius: 8px;

    background: #ffffff;

    font-size: 0.63rem;
    font-weight: 700;
}

#notizen .note-card-fields input[data-field="title"] {
    color: var(--heading);

    font-weight: 820;
}

#notizen .note-card-fields input:focus,
#notizen .note-card-row textarea:focus {
    outline: none;

    border-color:
        rgba(227, 16, 16, 0.42);

    box-shadow:
        0 0 0 3px rgba(227, 16, 16, 0.07);
}


/* ---------------------------------------------------------
   Notiztext
   --------------------------------------------------------- */

#notizen .note-card-row textarea {
    width: 100%;
    min-height: 112px;

    padding: 9px 10px;

    border-radius: 9px;

    background: #ffffff;

    font-size: 0.65rem;
    line-height: 1.45;

    resize: vertical;
}


/* ---------------------------------------------------------
   Anzeigeoptionen
   --------------------------------------------------------- */

#notizen .note-card-checkboxes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

#notizen .note-checkbox-label {
    min-height: 29px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 8px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: #f7f8fa;
    color: #626d79;

    font-size: 0.54rem;
    line-height: 1.2;
    font-weight: 750;

    cursor: pointer;
}

#notizen .note-checkbox-label:has(input:checked) {
    border-color:
        rgba(47, 117, 83, 0.18);

    background: var(--notes-green-soft);
    color: var(--notes-green);
}

#notizen .note-checkbox-label input {
    width: 14px;
    height: 14px;

    margin: 0;
    padding: 0;

    accent-color: var(--notes-green);
}


/* ---------------------------------------------------------
   Notizaktionen
   --------------------------------------------------------- */

#notizen .note-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;

    padding-top: 9px;

    border-top:
        1px solid var(--border);
}

#notizen .note-card-actions button {
    min-height: 32px;

    padding: 6px 9px;

    border-radius: 8px;

    font-size: 0.57rem;
    font-weight: 800;
}

#notizen .note-card-actions button[data-action="save"] {
    border-color: #384653;

    background: #384653;
    color: #ffffff;
}

#notizen .note-card-actions button[data-action="save"]:hover {
    border-color: #27333e;

    background: #27333e;
}


/* =========================================================
   TERMINE
   ========================================================= */

/* ---------------------------------------------------------
   Tabellencontainer
   --------------------------------------------------------- */

#notizen .events-table-wrap {
    min-width: 0;

    overflow-x: auto;

    scrollbar-width: thin;
}


/* ---------------------------------------------------------
   Tabellenkopf
   --------------------------------------------------------- */

#notizen .events-list-head {
    min-width: 850px;

    display: grid;
    grid-template-columns:
        minmax(190px, 1.4fr) 105px 105px 115px minmax(180px, 1fr) 88px;

    align-items: center;

    border-bottom:
        1px solid var(--border-strong);

    background: #eef1f4;
}

#notizen .events-list-head span {
    min-width: 0;

    padding: 9px 8px;

    color: #64707c;

    font-size: 0.5rem;
    line-height: 1.1;
    font-weight: 850;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   Terminliste
   --------------------------------------------------------- */

#notizen .events-admin-list {
    min-width: 850px;

    display: grid;
}

#notizen .events-admin-list:empty::before {
    content: "Keine wichtigen Termine eingetragen.";

    min-height: 180px;

    display: grid;
    place-items: center;

    padding: 24px;

    background:
        repeating-linear-gradient(135deg,
            rgba(120, 130, 142, 0.035) 0 7px,
            transparent 7px 14px),
        #fafbfc;

    color: var(--muted);

    text-align: center;

    font-size: 0.61rem;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Terminzeile
   --------------------------------------------------------- */

#notizen .event-row {
    position: relative;

    min-width: 850px;
    min-height: 50px;

    display: grid;
    grid-template-columns:
        minmax(190px, 1.4fr) 105px 105px 115px minmax(180px, 1fr) 88px;

    align-items: center;

    border-bottom:
        1px solid #e7eaee;

    background: #ffffff;

    transition:
        background 130ms ease;
}

#notizen .event-row:last-child {
    border-bottom: 0;
}

#notizen .event-row:hover {
    background: #f8f9fa;
}

#notizen .event-row::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 3px;

    background: var(--notes-amber);
}


/* ---------------------------------------------------------
   Terminfelder
   --------------------------------------------------------- */

#notizen .event-row input {
    width: calc(100% - 10px);
    min-width: 0;
    min-height: 32px;

    margin: 0 5px;
    padding: 5px 7px;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 7px;

    background: transparent;
    color: var(--text);

    box-shadow: none;

    text-overflow: ellipsis;

    font-size: 0.59rem;
    line-height: 1.2;
    font-weight: 680;
}

#notizen .event-row:hover input {
    border-color:
        rgba(207, 213, 220, 0.72);

    background:
        rgba(255, 255, 255, 0.82);
}

#notizen .event-row input[data-field="title"] {
    color: var(--heading);

    font-size: 0.63rem;
    font-weight: 850;
}

#notizen .event-row input[data-field="date"] {
    color: var(--notes-blue);

    font-weight: 820;
}

#notizen .event-row input[data-field="type"] {
    color: var(--notes-amber);

    font-weight: 820;
}

#notizen .event-row input[data-field="recurrence"] {
    color: #6d7681;

    font-size: 0.55rem;
}


/* ---------------------------------------------------------
   Termin bearbeiten
   --------------------------------------------------------- */

#notizen .event-row button[data-action="edit"] {
    min-height: 31px;

    margin: 0 6px;
    padding: 5px 8px;

    border-radius: 8px;

    background: #ffffff;

    font-size: 0.55rem;
    font-weight: 800;
}

#notizen .event-row button[data-action="edit"]:hover {
    border-color:
        rgba(227, 16, 16, 0.26);

    background: var(--brand-soft);
    color: var(--brand-dark);
}


/* =========================================================
   TERMIN-BEARBEITUNGSFENSTER
   ========================================================= */

.event-edit-box {
    width: min(720px, 100%);

    padding: 0;

    overflow: hidden;
}

.event-edit-box>h3 {
    margin: 0;
    padding: 19px 21px;

    border-bottom:
        1px solid var(--border);

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f7f8fa 100%);

    font-size: 1.03rem;
}

.event-edit-fields {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 11px;

    padding: 18px 21px;
}

.event-edit-fields label {
    min-width: 0;

    display: grid;
    gap: 5px;
}

.event-edit-fields label>span {
    color: var(--muted);

    font-size: 0.54rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.event-edit-fields input,
.event-edit-fields select {
    width: 100%;
    min-height: 40px;

    border-radius: 9px;

    background: #ffffff;

    font-size: 0.67rem;
    font-weight: 680;
}

.event-edit-fields input:focus,
.event-edit-fields select:focus {
    outline: none;

    border-color:
        rgba(227, 16, 16, 0.44);

    box-shadow:
        0 0 0 3px rgba(227, 16, 16, 0.08);
}

.event-edit-notes {
    grid-column: 1 / -1;
}

.event-edit-box .confirm-actions {
    margin: 0;
    padding: 14px 21px 18px;

    border-top:
        1px solid var(--border);

    background: #fafbfc;
}

#eventEditSave {
    border-color: var(--brand);

    background: var(--brand);
    color: #ffffff;
}

#eventEditSave:hover {
    border-color: var(--brand-dark);

    background: var(--brand-dark);
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1180px) {
    #notizen .notes-events-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    #notizen .notes-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    #notizen .notes-primary-button {
        width: 100%;
    }

    #notizen .note-card-fields {
        grid-template-columns: 1fr;
    }

    #notizen .note-card-actions {
        align-items: stretch;
        flex-direction: column;
    }

    #notizen .note-card-actions button {
        width: 100%;
    }

    .event-edit-fields {
        grid-template-columns: 1fr;
    }

    .event-edit-notes {
        grid-column: auto;
    }
}

/* =========================================================
   STATISTIK – MITARBEITER-DASHBOARD
   ========================================================= */

#statistik {
    --stats-present: #2f7553;
    --stats-present-soft: #eef8f2;

    --stats-vacation: #4778ae;
    --stats-vacation-soft: #eaf2fb;

    --stats-sick: #b54343;
    --stats-sick-soft: #fff1f1;

    --stats-warning: #8a681d;
    --stats-warning-soft: #fff8e2;
}


/* ---------------------------------------------------------
   Seitenaufbau
   --------------------------------------------------------- */

#statistik .stats-layout {
    display: grid;
    gap: 14px;
}

#statistik .stats-layout>.panel {
    margin: 0;
    padding: 0;

    overflow: hidden;

    border-radius: 15px;
}


/* ---------------------------------------------------------
   Bereichsköpfe
   --------------------------------------------------------- */

#statistik .panel-header {
    min-height: 82px;

    margin: 0;
    padding: 15px 17px;

    border-bottom:
        1px solid var(--border);

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #fafbfc 100%);
}

#statistik .panel-header>div:first-child {
    min-width: 0;
}

#statistik .panel-header h2 {
    margin: 0 0 3px;

    font-size: 1.03rem;
}

#statistik .panel-header p {
    font-size: 0.61rem;
}


/* ---------------------------------------------------------
   Zeitraum und Export
   --------------------------------------------------------- */

#statistik .toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
}

#statistik .toolbar button,
#statistik .toolbar select {
    min-height: 36px;

    padding: 7px 10px;

    border-radius: 9px;

    font-size: 0.62rem;
    font-weight: 800;
}

#statistik #prevStatsMonthBtn,
#statistik #nextStatsMonthBtn {
    width: 38px;
    min-width: 38px;

    padding: 0;

    font-size: 0;
}

#statistik #prevStatsMonthBtn::after {
    content: "‹";

    font-size: 1.2rem;
    line-height: 1;
}

#statistik #nextStatsMonthBtn::after {
    content: "›";

    font-size: 1.2rem;
    line-height: 1;
}

#statistik #statsMonthTitle {
    min-width: 185px;

    padding: 8px 11px;

    border-radius: 9px;

    background: #f5f7f9;

    font-size: 0.7rem;
    font-weight: 850;
}

#statistik #yearSelect {
    width: 92px;

    background: #ffffff;
}

#statistik #exportMonthlyStatsBtn,
#statistik #exportYearlyStatsBtn {
    border-color: #384653;

    background: #384653;
    color: #ffffff;
}

#statistik #exportMonthlyStatsBtn:hover,
#statistik #exportYearlyStatsBtn:hover {
    border-color: #27333e;

    background: #27333e;
}


/* ---------------------------------------------------------
   Kartenraster
   --------------------------------------------------------- */

#statistik .kpi-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit,
            minmax(225px, 1fr));

    align-items: stretch;
    gap: 10px;

    padding: 14px 15px 16px;
}


/* ---------------------------------------------------------
   Mitarbeiterkarte
   --------------------------------------------------------- */

#statistik .kpi-card {
    position: relative;

    min-width: 0;
    min-height: 275px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 12px;

    background:
        linear-gradient(150deg,
            #ffffff 0%,
            #fafbfc 100%);

    box-shadow:
        0 3px 12px rgba(22, 28, 36, 0.04);

    cursor: default;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

#statistik .kpi-card:hover {
    border-color: #c5ccd4;

    box-shadow:
        0 10px 24px rgba(22, 28, 36, 0.085);

    transform: translateY(-2px);
}

#statistik .kpi-card::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 3px;

    background: var(--stats-present);
}

#statistik .kpi-card.vacation-warning::before {
    background: #d3a42c;
}

#statistik .kpi-card.vacation-danger::before {
    background: var(--stats-sick);
}


/* ---------------------------------------------------------
   Name
   --------------------------------------------------------- */

#statistik .kpi-card-title {
    display: grid;
    gap: 3px;

    padding: 11px 13px 10px 16px;

    border-bottom:
        1px solid var(--border);
}

#statistik .kpi-card-title>span {
    color: var(--muted);

    font-size: 0.48rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.065em;
    text-transform: uppercase;
}

#statistik .kpi-card-title>strong {
    overflow: hidden;

    color: var(--heading);

    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 850;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   Ringdiagramm und Legende
   --------------------------------------------------------- */

#statistik .kpi-card-main {
    display: grid;
    grid-template-columns:
        112px minmax(0, 1fr);

    align-items: center;
    gap: 9px;

    padding: 12px 13px;
}

#statistik .svg-wrap {
    position: relative;

    width: 108px;
    height: 108px;

    display: grid;
    place-items: center;
}

#statistik .svg-wrap svg {
    width: 108px;
    height: 108px;

    display: block;

    overflow: visible;
}

#statistik .svg-wrap svg circle {
    transition:
        stroke-width 150ms ease,
        opacity 150ms ease;
}

#statistik .kpi-card:hover .svg-wrap svg circle:not(:first-child) {
    stroke-width: 7;
}

#statistik .kpi-donut-center {
    position: absolute;
    inset: 0;

    display: grid;
    place-content: center;
    gap: 1px;

    text-align: center;

    pointer-events: none;
}

#statistik .kpi-donut-center strong {
    color: var(--heading);

    font-size: 1rem;
    line-height: 1;
    font-weight: 900;
}

#statistik .kpi-donut-center span {
    color: var(--muted);

    font-size: 0.48rem;
    font-weight: 750;
}


/* ---------------------------------------------------------
   Legendenwerte
   --------------------------------------------------------- */

#statistik .kpi-card-legend {
    min-width: 0;

    display: grid;
    gap: 5px;
}

#statistik .kpi-legend-row {
    min-width: 0;
    min-height: 29px;

    display: grid;
    grid-template-columns:
        8px minmax(0, 1fr) auto;

    align-items: center;
    gap: 6px;

    padding: 5px 7px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: #ffffff;
}

#statistik .kpi-legend-row i {
    width: 7px;
    height: 7px;

    display: block;

    border-radius: 50%;
}

#statistik .kpi-legend-row span {
    overflow: hidden;

    color: var(--muted);

    font-size: 0.51rem;
    font-weight: 720;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#statistik .kpi-legend-row strong {
    color: var(--heading);

    font-size: 0.58rem;
    font-weight: 900;
}

#statistik .kpi-legend-row.status-a {
    border-color:
        rgba(47, 117, 83, 0.14);

    background: var(--stats-present-soft);
}

#statistik .kpi-legend-row.status-a i {
    background: var(--stats-present);
}

#statistik .kpi-legend-row.status-u {
    border-color:
        rgba(71, 120, 174, 0.15);

    background: var(--stats-vacation-soft);
}

#statistik .kpi-legend-row.status-u i {
    background: var(--stats-vacation);
}

#statistik .kpi-legend-row.status-k {
    border-color:
        rgba(181, 67, 67, 0.14);

    background: var(--stats-sick-soft);
}

#statistik .kpi-legend-row.status-k i {
    background: var(--stats-sick);
}


/* ---------------------------------------------------------
   Jahres-Zusatzwerte
   --------------------------------------------------------- */

#statistik .kpi-card-extras {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px;

    margin: 0 13px 9px;
}

#statistik .kpi-card-extras>span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    padding: 6px 7px;

    border:
        1px solid rgba(73, 109, 147, 0.14);

    border-radius: 7px;

    background: #f5f8fb;
    color: var(--muted);

    font-size: 0.49rem;
    font-weight: 750;
}

#statistik .kpi-card-extras strong {
    color: var(--stats-vacation);

    font-size: 0.55rem;
    font-weight: 900;
}


/* ---------------------------------------------------------
   Resturlaub
   --------------------------------------------------------- */

#statistik .kpi-vacation {
    display: grid;
    gap: 5px;

    margin-top: auto;
    padding: 10px 13px 12px;

    border-top:
        1px solid var(--border);

    background: #f8f9fa;
}

#statistik .kpi-vacation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#statistik .kpi-vacation-head span {
    color: var(--muted);

    font-size: 0.49rem;
    font-weight: 800;
}

#statistik .kpi-vacation-head strong {
    color: var(--stats-present);

    font-size: 0.54rem;
    font-weight: 900;
}

#statistik .vacation-warning .kpi-vacation-head strong {
    color: var(--stats-warning);
}

#statistik .vacation-danger .kpi-vacation-head strong {
    color: var(--stats-sick);
}

#statistik .kpi-vacation-track {
    height: 6px;

    overflow: hidden;

    border-radius: 999px;

    background: #dfe4e9;
}

#statistik .kpi-vacation-track i {
    width:
        var(--vacation-progress,
            0%);

    height: 100%;

    display: block;

    border-radius: inherit;

    background:
        linear-gradient(90deg,
            var(--stats-vacation) 0%,
            #70a0d2 100%);
}

#statistik .kpi-vacation small {
    color: #808a95;

    font-size: 0.46rem;
    line-height: 1.2;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 900px) {
    #statistik .panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    #statistik .toolbar {
        width: 100%;

        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    #statistik .kpi-grid {
        grid-template-columns: 1fr;
    }

    #statistik .kpi-card-main {
        grid-template-columns:
            104px minmax(0, 1fr);
    }

    #statistik .svg-wrap,
    #statistik .svg-wrap svg {
        width: 100px;
        height: 100px;
    }

    #statistik #statsMonthTitle,
    #statistik #exportMonthlyStatsBtn,
    #statistik #exportYearlyStatsBtn {
        width: 100%;
    }
}

/* =========================================================
   FEEDBACK – MELDUNGEN UND IDEEN
   ========================================================= */

#feedback {
    --feedback-blue: #426f9d;
    --feedback-blue-soft: #edf4fb;

    --feedback-amber: #8b681b;
    --feedback-amber-soft: #fff7df;

    --feedback-green: #357354;
    --feedback-green-soft: #edf8f1;

    --feedback-red: #b54444;
    --feedback-red-soft: #fff0f0;
}


/* ---------------------------------------------------------
   Seitenaufbau
   --------------------------------------------------------- */

#feedback .feedback-page {
    width: 100%;
}

#feedback .feedback-page>.panel {
    padding: 18px;

    border-radius: 15px;
}


/* ---------------------------------------------------------
   Seitenkopf
   --------------------------------------------------------- */

#feedback .feedback-page-header {
    min-height: 50px;

    align-items: center;

    margin-bottom: 13px;
    padding-bottom: 14px;

    border-bottom:
        1px solid var(--border);
}

#feedback .feedback-page-header h2 {
    margin: 0 0 3px;

    color: var(--heading);

    font-size: 1.12rem;
    line-height: 1.2;
}

#feedback .feedback-page-header p {
    font-size: 0.64rem;
}

#feedback #feedbackNewBtn {
    min-height: 38px;

    padding: 7px 13px;

    border-color: var(--brand);
    border-radius: 9px;

    background: var(--brand);
    color: #ffffff;

    font-size: 0.67rem;
    font-weight: 820;
}

#feedback #feedbackNewBtn:hover {
    border-color: var(--brand-dark);

    background: var(--brand-dark);
}


/* ---------------------------------------------------------
   Filter- und Suchleiste
   --------------------------------------------------------- */

#feedback .feedback-toolbar {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;
    gap: 12px;

    margin-bottom: 14px;
    padding: 9px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #f7f8fa 100%);
}

#feedback .feedback-filter-group {
    min-width: 0;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

#feedback .feedback-filter-btn {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 6px 9px;

    border-color: transparent;
    border-radius: 8px;

    background: transparent;
    color: #65707c;

    box-shadow: none;

    font-size: 0.61rem;
    line-height: 1;
    font-weight: 800;
}

#feedback .feedback-filter-btn:hover {
    border-color: transparent;

    background: #eef0f3;
    color: var(--heading);
}

#feedback .feedback-filter-btn>span {
    min-width: 20px;
    height: 20px;

    display: inline-grid;
    place-items: center;

    padding: 0 5px;

    border-radius: 999px;

    background: #e6e9ed;
    color: #66717d;

    font-size: 0.52rem;
    font-weight: 900;
}


/* ---------------------------------------------------------
   Aktive Filter
   --------------------------------------------------------- */

#feedback .feedback-filter-btn.active {
    border-color: #303944;

    background: #303944;
    color: #ffffff;
}

#feedback .feedback-filter-btn.active>span {
    background:
        rgba(255, 255, 255, 0.17);

    color: #ffffff;
}

#feedback .feedback-filter-btn.active[ data-feedback-filter="new"

] {
    border-color: var(--feedback-blue);

    background: var(--feedback-blue);
}

#feedback .feedback-filter-btn.active[ data-feedback-filter="in_progress"

] {
    border-color: var(--feedback-amber);

    background: var(--feedback-amber);
}

#feedback .feedback-filter-btn.active[ data-feedback-filter="done"

] {
    border-color: var(--feedback-green);

    background: var(--feedback-green);
}


/* ---------------------------------------------------------
   Suche und Neuladen
   --------------------------------------------------------- */

#feedback .feedback-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

#feedback #feedbackSearchInput {
    width: 270px;
    min-height: 36px;

    padding: 7px 10px;

    border-radius: 9px;

    background: #ffffff;

    font-size: 0.63rem;
}

#feedback #feedbackSearchInput:focus {
    outline: none;

    border-color:
        rgba(227, 16, 16, 0.48);

    box-shadow:
        0 0 0 3px rgba(227, 16, 16, 0.08);
}

#feedback #feedbackReloadBtn {
    min-height: 36px;

    padding: 7px 10px;

    border-radius: 9px;

    font-size: 0.6rem;
}


/* ---------------------------------------------------------
   Lade- und Leerzustand
   --------------------------------------------------------- */

#feedback #feedbackLoading,
#feedback #feedbackEmpty {
    min-height: 90px;

    display: grid;
    place-items: center;

    margin: 0;
    padding: 20px;

    border:
        1px dashed var(--border-strong);

    border-radius: 12px;

    background:
        repeating-linear-gradient(135deg,
            rgba(120, 130, 142, 0.035) 0 7px,
            transparent 7px 14px),
        #fafbfc;

    color: var(--muted);

    text-align: center;

    font-size: 0.65rem;
    font-weight: 700;
}

#feedback #feedbackLoading.hidden,
#feedback #feedbackEmpty.hidden {
    display: none;
}


/* ---------------------------------------------------------
   Kartenraster
   --------------------------------------------------------- */

#feedback .feedback-list {
    display: grid;

    grid-template-columns:
        repeat(auto-fit,
            minmax(430px, 1fr));

    align-items: stretch;
    gap: 11px;
}


/* ---------------------------------------------------------
   Einzelne Feedbackkarte
   --------------------------------------------------------- */

#feedback .feedback-card {
    position: relative;

    min-width: 0;
    min-height: 235px;

    display: flex;
    flex-direction: column;

    padding: 15px 16px 14px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 13px;

    background:
        linear-gradient(150deg,
            #ffffff 0%,
            #fafbfc 100%);

    box-shadow:
        0 4px 14px rgba(22, 28, 36, 0.045);

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

#feedback .feedback-card:hover {
    border-color: #c5ccd4;

    box-shadow:
        0 10px 25px rgba(22, 28, 36, 0.085);

    transform: translateY(-1px);
}

#feedback .feedback-card::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 3px;

    background: #89939e;
}

#feedback .feedback-card.status-new::before {
    background: var(--feedback-blue);
}

#feedback .feedback-card.status-in_progress::before {
    background: var(--feedback-amber);
}

#feedback .feedback-card.status-done::before {
    background: var(--feedback-green);
}

#feedback .feedback-card.urgent::before {
    background: var(--feedback-red);
}

#feedback .feedback-card.urgent {
    border-color:
        rgba(181, 68, 68, 0.28);

    background:
        linear-gradient(150deg,
            #ffffff 0%,
            #fff7f7 100%);
}

#feedback .feedback-card.status-done {
    background:
        linear-gradient(150deg,
            #ffffff 0%,
            #f5faf7 100%);
}


/* ---------------------------------------------------------
   Kartenkopf
   --------------------------------------------------------- */

#feedback .feedback-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#feedback .feedback-card-title {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 9px;
}

#feedback .feedback-type-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex: 0 0 38px;

    border-radius: 10px;

    background: #f0f2f4;

    font-size: 1rem;
    line-height: 1;
}

#feedback .feedback-card.status-new .feedback-type-icon {
    background: var(--feedback-blue-soft);
}

#feedback .feedback-card.status-in_progress .feedback-type-icon {
    background: var(--feedback-amber-soft);
}

#feedback .feedback-card.status-done .feedback-type-icon {
    background: var(--feedback-green-soft);
}

#feedback .feedback-card.urgent .feedback-type-icon {
    background: var(--feedback-red-soft);
}

#feedback .feedback-card-title>div {
    min-width: 0;
}

#feedback .feedback-card-title strong {
    display: block;

    overflow: hidden;

    color: var(--heading);

    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 850;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#feedback .feedback-area {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color: var(--muted);

    font-size: 0.56rem;
    line-height: 1.2;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   Status- und Dringend-Badges
   --------------------------------------------------------- */

#feedback .feedback-card-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
}

#feedback .feedback-status-badge,
#feedback .feedback-urgent-badge {
    min-height: 25px;

    display: inline-flex;
    align-items: center;

    padding: 5px 8px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 0.52rem;
    line-height: 1;
    font-weight: 850;

    white-space: nowrap;
}

#feedback .feedback-status-badge.status-new {
    border-color:
        rgba(66, 111, 157, 0.18);

    background: var(--feedback-blue-soft);
    color: var(--feedback-blue);
}

#feedback .feedback-status-badge.status-in_progress {
    border-color:
        rgba(139, 104, 27, 0.18);

    background: var(--feedback-amber-soft);
    color: var(--feedback-amber);
}

#feedback .feedback-status-badge.status-done {
    border-color:
        rgba(53, 115, 84, 0.18);

    background: var(--feedback-green-soft);
    color: var(--feedback-green);
}

#feedback .feedback-urgent-badge {
    border-color:
        rgba(181, 68, 68, 0.19);

    background: var(--feedback-red-soft);
    color: var(--feedback-red);
}


/* ---------------------------------------------------------
   Meldungstext
   --------------------------------------------------------- */

#feedback .feedback-card-message {
    flex: 1 1 auto;

    margin: 13px 0;
    padding: 11px 12px;

    overflow-wrap: anywhere;

    border: 1px solid #e5e8ec;
    border-radius: 9px;

    background:
        rgba(247, 248, 250, 0.82);

    color: #343a43;

    font-size: 0.65rem;
    line-height: 1.52;
}

#feedback .feedback-card.urgent .feedback-card-message {
    border-color:
        rgba(181, 68, 68, 0.13);

    background:
        rgba(255, 240, 240, 0.58);
}


/* ---------------------------------------------------------
   Kartenfuß
   --------------------------------------------------------- */

#feedback .feedback-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;

    padding-top: 11px;

    border-top: 1px solid var(--border);
}

#feedback .feedback-meta {
    min-width: 0;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 11px;

    color: var(--muted);

    font-size: 0.51rem;
    line-height: 1.3;
}

#feedback .feedback-meta strong {
    color: #525c68;

    font-weight: 800;
}

#feedback .feedback-card-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

#feedback [data-feedback-edit-id] {
    min-height: 33px;

    padding: 6px 9px;

    border-radius: 8px;

    font-size: 0.56rem;
}


/* ---------------------------------------------------------
   Statusauswahl
   --------------------------------------------------------- */

#feedback .feedback-status-control {
    display: flex;
    align-items: center;
    gap: 6px;

    color: var(--muted);

    font-size: 0.54rem;
    font-weight: 800;
}

#feedback .feedback-status-control>span {
    color: var(--muted);
}

#feedback .feedback-status-control>strong {
    min-height: 29px;

    display: inline-flex;
    align-items: center;

    padding: 5px 8px;

    border-radius: 7px;

    background: #f0f2f4;
    color: #56606c;

    font-size: 0.55rem;
}

#feedback .feedback-status-control select {
    width: 118px;
    min-height: 33px;

    padding: 6px 8px;

    border-radius: 8px;

    background: #ffffff;

    font-size: 0.56rem;
    font-weight: 750;
}


/* =========================================================
   FEEDBACK-POPUP
   ========================================================= */

#feedbackModal {
    background:
        rgba(18, 22, 28, 0.48);

    backdrop-filter:
        blur(6px);
}

#feedbackModal:not(.hidden) .feedback-modal-card {
    animation:
        feedback-modal-open 190ms cubic-bezier(.2, .75, .25, 1);
}

#feedbackModal .feedback-modal-card {
    width: min(650px, 100%);

    padding: 22px;

    border:
        1px solid var(--border-strong);

    border-radius: 18px;

    background:
        linear-gradient(150deg,
            #ffffff 0%,
            #fafbfc 100%);

    box-shadow:
        0 28px 80px rgba(12, 17, 24, 0.25);
}

#feedbackModal .hofbook-entry-box-head {
    margin-bottom: 17px;
    padding-bottom: 15px;

    border-bottom:
        1px solid var(--border);
}

#feedbackModal .hofbook-entry-box-head h3 {
    font-size: 1.15rem;
}

#feedbackModal .feedback-modal-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

#feedbackModal .feedback-modal-grid label {
    min-width: 0;

    display: grid;
    gap: 6px;
}

#feedbackModal .feedback-modal-grid label>span {
    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 800;
}

#feedbackModal .feedback-modal-grid select,
#feedbackModal .feedback-modal-grid textarea {
    width: 100%;

    border-radius: 9px;

    background: #ffffff;

    font-size: 0.67rem;
}

#feedbackModal .feedback-modal-grid select {
    min-height: 40px;
}

#feedbackModal .feedback-message-field {
    grid-column: 1 / -1;
}

#feedbackModal .feedback-message-field textarea {
    min-height: 145px;

    padding: 10px 11px;

    resize: vertical;

    line-height: 1.5;
}

#feedbackModal .feedback-modal-grid select:focus,
#feedbackModal .feedback-modal-grid textarea:focus {
    outline: none;

    border-color:
        rgba(227, 16, 16, 0.5);

    box-shadow:
        0 0 0 3px rgba(227, 16, 16, 0.08);
}


/* ---------------------------------------------------------
   Dringend-Schalter
   --------------------------------------------------------- */

#feedbackModal .feedback-urgent-label {
    grid-column: 1 / -1;

    min-height: 42px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 9px 11px;

    border:
        1px solid rgba(181, 68, 68, 0.16);

    border-radius: 9px;

    background: var(--feedback-red-soft);
    color: var(--feedback-red);

    cursor: pointer;
}

#feedbackModal .feedback-urgent-label input {
    width: 16px;
    height: 16px;

    margin: 0;

    accent-color: var(--feedback-red);
}

#feedbackModal .feedback-urgent-label span {
    color: var(--feedback-red);

    font-size: 0.63rem;
    font-weight: 850;
}


/* ---------------------------------------------------------
   Popup-Aktionen
   --------------------------------------------------------- */

#feedbackModal .confirm-actions {
    margin-top: 18px;
    padding-top: 15px;

    border-top:
        1px solid var(--border);
}

#feedbackModal #feedbackModalCancel,
#feedbackModal #feedbackModalSubmit {
    min-height: 38px;

    padding: 7px 13px;

    border-radius: 9px;

    font-size: 0.64rem;
}

#feedbackModal #feedbackModalSubmit {
    border-color: var(--brand);

    background: var(--brand);
    color: #ffffff;
}

#feedbackModal #feedbackModalSubmit:hover {
    border-color: var(--brand-dark);

    background: var(--brand-dark);
}

@keyframes feedback-modal-open {
    from {
        opacity: 0;

        transform:
            translateY(9px) scale(0.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }
}


/* =========================================================
   RESPONSIVE FEEDBACK
   ========================================================= */

@media (max-width: 950px) {
    #feedback .feedback-toolbar {
        grid-template-columns: 1fr;
    }

    #feedback .feedback-toolbar-actions {
        width: 100%;
    }

    #feedback #feedbackSearchInput {
        width: 100%;
    }
}

@media (max-width: 720px) {
    #feedback .feedback-list {
        grid-template-columns: 1fr;
    }

    #feedback .feedback-card-head,
    #feedback .feedback-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    #feedback .feedback-card-badges,
    #feedback .feedback-card-controls {
        justify-content: flex-start;
    }

    #feedbackModal .feedback-modal-grid {
        grid-template-columns: 1fr;
    }

    #feedbackModal .feedback-message-field,
    #feedbackModal .feedback-urgent-label {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    #feedback .feedback-page>.panel {
        padding: 13px;
    }

    #feedback .feedback-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    #feedback #feedbackNewBtn {
        width: 100%;
    }

    #feedback .feedback-toolbar-actions {
        align-items: stretch;
        flex-direction: column;
    }

    #feedback #feedbackReloadBtn {
        width: 100%;
    }

    #feedback .feedback-card {
        min-height: 0;

        padding: 13px;
    }

    #feedback .feedback-card-title strong,
    #feedback .feedback-area {
        white-space: normal;
    }

    #feedbackModal .feedback-modal-card {
        padding: 18px;
    }

    #feedbackModal .confirm-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    #feedbackModal #feedbackModalCancel,
    #feedbackModal #feedbackModalSubmit {
        width: 100%;
    }
}

/* =========================================================
   EINSTELLUNGEN – SYSTEM UND EXPORTE
   ========================================================= */

#einstellungen {
    --settings-blue: #496d93;
    --settings-blue-soft: #eef4fa;

    --settings-green: #357354;
    --settings-green-soft: #edf8f1;

    --settings-amber: #8a681d;
    --settings-amber-soft: #fff8e2;
}


/* ---------------------------------------------------------
   Seitenraster
   --------------------------------------------------------- */

#einstellungen .settings-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr) minmax(330px, 0.65fr);

    align-items: start;
    gap: 14px;
}


/*
 * Büroplan-Einstellungen über die volle Breite.
 */
#einstellungen .settings-layout>.panel:first-child {
    grid-column: 1 / -1;
}


/* ---------------------------------------------------------
   Karten
   --------------------------------------------------------- */

#einstellungen .settings-layout>.panel {
    position: relative;

    min-width: 0;

    margin-top: 0;
    padding: 18px;

    overflow: hidden;

    border-radius: 15px;

    background:
        linear-gradient(150deg,
            #ffffff 0%,
            #fafbfc 100%);
}

#einstellungen .settings-layout>.panel::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 3px;

    background: #8a939e;
}

#einstellungen .settings-layout>.panel:first-child::before {
    background: var(--settings-blue);
}

#einstellungen .settings-layout>.panel:nth-child(2)::before {
    background: var(--settings-green);
}

#einstellungen .settings-layout>.panel:nth-child(3)::before {
    background: var(--settings-amber);
}


/* ---------------------------------------------------------
   Kartenköpfe
   --------------------------------------------------------- */

#einstellungen .panel-header {
    min-height: 42px;

    align-items: center;

    margin-bottom: 14px;
    padding-bottom: 13px;

    border-bottom:
        1px solid var(--border);
}

#einstellungen .panel-header h2 {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0;

    color: var(--heading);

    font-size: 1.05rem;
    line-height: 1.2;
}

#einstellungen .panel-header h2::before {
    width: 31px;
    height: 31px;

    display: inline-grid;
    place-items: center;

    flex: 0 0 31px;

    border-radius: 9px;

    background: #f0f2f4;
    color: #5f6975;

    font-size: 0.85rem;
    line-height: 1;
}

#einstellungen .settings-layout>.panel:first-child .panel-header h2::before {
    content: "⚙";

    background: var(--settings-blue-soft);
    color: var(--settings-blue);
}

#einstellungen .settings-layout>.panel:nth-child(2) .panel-header h2::before {
    content: "↓";

    background: var(--settings-green-soft);
    color: var(--settings-green);

    font-weight: 900;
}

#einstellungen .settings-layout>.panel:nth-child(3) .panel-header h2::before {
    content: "♻";

    background: var(--settings-amber-soft);
    color: var(--settings-amber);
}


/* =========================================================
   BÜROPLAN-EINSTELLUNGEN
   ========================================================= */

#einstellungen .settings-toggle-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}


/* ---------------------------------------------------------
   Schalterkarten
   --------------------------------------------------------- */

#einstellungen .toggle-label {
    min-width: 0;
    min-height: 64px;

    display: grid;

    grid-template-columns:
        42px minmax(0, 1fr);

    align-items: center;
    gap: 11px;

    padding: 11px 12px;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: #ffffff;
    color: #4f5965;

    font-size: 0.65rem;
    line-height: 1.4;
    font-weight: 760;

    cursor: pointer;

    transition:
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}

#einstellungen .toggle-label:hover {
    border-color: #c7ced7;

    background: #f8f9fa;

    box-shadow:
        0 5px 14px rgba(22, 28, 36, 0.05);
}


/* ---------------------------------------------------------
   Eigentliche Schalter
   --------------------------------------------------------- */

#einstellungen .toggle-label input[type="checkbox"] {
    position: relative;

    width: 40px;
    height: 22px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 1px solid #c9cfd7;
    border-radius: 999px;

    background: #dfe3e8;

    cursor: pointer;

    transition:
        background 150ms ease,
        border-color 150ms ease;
}

#einstellungen .toggle-label input[type="checkbox"]::before {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 2px 5px rgba(20, 25, 32, 0.2);

    transition:
        transform 150ms ease;
}

#einstellungen .toggle-label input[type="checkbox"]:checked {
    border-color: var(--settings-blue);

    background: var(--settings-blue);
}

#einstellungen .toggle-label input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

#einstellungen .toggle-label:has(input[type="checkbox"]:checked) {
    border-color:
        rgba(73, 109, 147, 0.25);

    background: var(--settings-blue-soft);
    color: #405d7a;
}

#einstellungen .toggle-label input[type="checkbox"]:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(73, 109, 147, 0.15);
}


/* =========================================================
   EXPORTE
   ========================================================= */

#einstellungen .settings-layout>.panel:nth-child(2) {
    min-height: 280px;
}


/* ---------------------------------------------------------
   ICS-Zeitraum
   --------------------------------------------------------- */

#einstellungen .ics-range-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: end;
    gap: 8px;

    margin-bottom: 11px;
    padding: 11px;

    border:
        1px solid rgba(53, 115, 84, 0.15);

    border-radius: 11px;

    background: var(--settings-green-soft);
}

#einstellungen .ics-range-grid::before {
    content: "Zeitraum für Kalenderexport";

    grid-column: 1 / -1;

    color: var(--settings-green);

    font-size: 0.55rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.065em;
    text-transform: uppercase;
}

#einstellungen .ics-range-grid input {
    width: 100%;
    min-width: 0;
    min-height: 38px;

    padding: 7px 9px;

    border-color:
        rgba(53, 115, 84, 0.18);

    border-radius: 9px;

    background: #ffffff;

    font-size: 0.63rem;
    font-weight: 720;
}

#einstellungen .ics-range-grid input:focus {
    outline: none;

    border-color: var(--settings-green);

    box-shadow:
        0 0 0 3px rgba(53, 115, 84, 0.1);
}


/* ---------------------------------------------------------
   Exportbuttons
   --------------------------------------------------------- */

#einstellungen .settings-layout>.panel:nth-child(2) .export-grid:not(.ics-range-grid) {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;
}

#einstellungen .settings-layout>.panel:nth-child(2) .export-grid button {
    min-width: 0;
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    padding: 8px 10px;

    border-radius: 9px;

    background: #ffffff;
    color: #4e5965;

    box-shadow: none;

    text-align: left;

    font-size: 0.6rem;
    line-height: 1.25;
    font-weight: 790;
}

#einstellungen .settings-layout>.panel:nth-child(2) .export-grid button::before {
    width: 25px;
    height: 25px;

    display: inline-grid;
    place-items: center;

    flex: 0 0 25px;

    border-radius: 7px;

    background: var(--settings-green-soft);
    color: var(--settings-green);

    font-size: 0.67rem;
    line-height: 1;
    font-weight: 900;
}

#einstellungen #exportOfficePlanBtn::before,
#einstellungen #exportAttendanceBtn::before,
#einstellungen #exportVehiclesCsvBtn::before {
    content: "CSV";
}

#einstellungen #exportMiaIcsBtn::before,
#einstellungen #exportAlexIcsBtn::before {
    content: "ICS";
}

#einstellungen .settings-layout>.panel:nth-child(2) .export-grid button:hover {
    border-color:
        rgba(53, 115, 84, 0.35);

    background: var(--settings-green-soft);
    color: var(--settings-green);
}


/*
 * Der letzte, fünfte Exportbutton füllt
 * die vorhandene Restbreite aus.
 */
#einstellungen #exportVehiclesCsvBtn {
    grid-column: 1 / -1;
}


/* =========================================================
   MÜLLKALENDER
   ========================================================= */

#einstellungen .settings-layout>.panel:nth-child(3) {
    min-height: 280px;

    display: flex;
    flex-direction: column;
}


/* ---------------------------------------------------------
   Importbereich
   --------------------------------------------------------- */

#einstellungen .settings-layout>.panel:nth-child(3) .export-grid {
    display: block;
}

#einstellungen #wasteIcalFileInput {
    display: none;
}

#einstellungen label.file-button:has(#wasteIcalFileInput) {
    width: 100%;
    min-height: 105px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 17px;

    border:
        1px dashed rgba(138, 104, 29, 0.34);

    border-radius: 12px;

    background:
        repeating-linear-gradient(135deg,
            rgba(138, 104, 29, 0.035) 0 7px,
            transparent 7px 14px),
        var(--settings-amber-soft);

    color: var(--settings-amber);

    text-align: center;

    font-size: 0.64rem;
    font-weight: 820;
}

#einstellungen label.file-button:has(#wasteIcalFileInput)::before {
    content: "ICS";

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #ffffff;
    color: var(--settings-amber);

    box-shadow:
        0 4px 12px rgba(80, 62, 20, 0.08);

    font-size: 0.65rem;
    font-weight: 900;
}

#einstellungen label.file-button:has(#wasteIcalFileInput):hover {
    border-color: var(--settings-amber);

    background: #fff4d1;
}


/* ---------------------------------------------------------
   Letzter Import
   --------------------------------------------------------- */

#einstellungen #wasteLastUpdate {
    min-height: 40px;

    display: flex;
    align-items: center;
    gap: 8px;

    margin: auto 0 0;
    padding: 9px 10px;

    border:
        1px solid rgba(138, 104, 29, 0.14);

    border-radius: 9px;

    background: #fffdf7;
    color: #756229;

    font-size: 0.58rem;
    line-height: 1.35;
    font-weight: 720;
}

#einstellungen #wasteLastUpdate::before {
    content: "✓";

    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    flex: 0 0 22px;

    border-radius: 50%;

    background: var(--settings-amber-soft);
    color: var(--settings-amber);

    font-size: 0.62rem;
    font-weight: 900;
}

#einstellungen #wasteLastUpdate:empty::after {
    content:
        "Noch kein Müllkalender geladen.";
}

#einstellungen #wasteLastUpdate:empty::before {
    content: "i";
}


/* =========================================================
   RESPONSIVE EINSTELLUNGEN
   ========================================================= */

@media (max-width: 1000px) {
    #einstellungen .settings-layout {
        grid-template-columns: 1fr;
    }

    #einstellungen .settings-layout>.panel:first-child {
        grid-column: auto;
    }

    #einstellungen .settings-layout>.panel:nth-child(2),
    #einstellungen .settings-layout>.panel:nth-child(3) {
        min-height: 0;
    }
}

@media (max-width: 680px) {

    #einstellungen .settings-toggle-row,
    #einstellungen .settings-layout>.panel:nth-child(2) .export-grid:not(.ics-range-grid) {
        grid-template-columns: 1fr;
    }

    #einstellungen #exportVehiclesCsvBtn {
        grid-column: auto;
    }

    #einstellungen .ics-range-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    #einstellungen .settings-layout>.panel {
        padding: 14px;
    }

    #einstellungen .toggle-label {
        min-height: 58px;
    }

    #einstellungen label.file-button:has(#wasteIcalFileInput) {
        min-height: 92px;
    }
}

/* =========================================================
   NIX ZU TUN – VERSTECKTE SPIELESEITE
   ========================================================= */

#nixzutun {
    --nix-dark: #171b22;
    --nix-dark-soft: #232933;

    --nix-purple: #7662d7;
    --nix-purple-soft: #f0edff;

    --nix-gold: #b27a12;
    --nix-gold-soft: #fff6da;

    --nix-green: #357354;
    --nix-green-soft: #edf8f1;

    --nix-red: #b54343;
    --nix-red-soft: #fff0f0;
}


/* ---------------------------------------------------------
   Hauptkarte
   --------------------------------------------------------- */

#nixzutun .nix-panel {
    position: relative;

    min-height:
        calc(100vh - var(--appbar-height) - 56px);

    padding: 18px;

    overflow: hidden;

    border-radius: 17px;

    background:
        radial-gradient(circle at 94% 3%,
            rgba(118, 98, 215, 0.12),
            transparent 28%),
        radial-gradient(circle at 4% 95%,
            rgba(178, 122, 18, 0.08),
            transparent 25%),
        #ffffff;
}


/* ---------------------------------------------------------
   Seitenkopf
   --------------------------------------------------------- */

#nixzutun .panel-header {
    min-height: 54px;

    align-items: center;

    margin-bottom: 0;
    padding-bottom: 15px;

    border-bottom:
        1px solid var(--border);
}

#nixzutun .panel-header>div {
    position: relative;

    padding-left: 48px;
}

#nixzutun .panel-header>div::before {
    content: "🎮";

    position: absolute;
    top: 0;
    left: 0;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(118, 98, 215, 0.2);

    border-radius: 11px;

    background: var(--nix-purple-soft);

    font-size: 1rem;
    line-height: 1;
}

#nixzutun .panel-header h2 {
    margin: 0 0 3px;

    color: var(--heading);

    font-size: 1.15rem;
    line-height: 1.2;
}

#nixzutun .panel-header p {
    color: #77728e;

    font-size: 0.63rem;
    font-weight: 680;
}


/* ---------------------------------------------------------
   Notausgang
   --------------------------------------------------------- */

#nixzutun .nix-game-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin: 11px 0;
}

#nixzutun .nix-panic-btn {
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 7px 12px;

    border:
        1px solid rgba(181, 67, 67, 0.24);

    border-radius: 999px;

    background: var(--nix-red-soft);
    color: var(--nix-red);

    box-shadow: none;

    font-size: 0.62rem;
    line-height: 1;
    font-weight: 850;
}

#nixzutun .nix-panic-btn:hover {
    border-color: var(--nix-red);

    background: var(--nix-red);
    color: #ffffff;
}


/* =========================================================
   SPIELEAUSWAHL
   ========================================================= */

#nixzutun .nix-game-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit,
            minmax(165px, 1fr));

    align-items: stretch;
    gap: 9px;

    margin-bottom: 13px;
}


/* ---------------------------------------------------------
   Spielekarte
   --------------------------------------------------------- */

#nixzutun .nix-game-card {
    position: relative;

    min-width: 0;
    min-height: 108px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;

    padding: 13px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 12px;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #f7f8fa 100%);

    color: var(--text);

    box-shadow:
        0 3px 10px rgba(22, 28, 36, 0.04);

    text-align: left;

    transition:
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

#nixzutun .nix-game-card::after {
    content: "";

    position: absolute;

    right: -23px;
    bottom: -25px;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    background:
        rgba(118, 98, 215, 0.045);

    transition:
        transform 180ms ease,
        background 180ms ease;
}

#nixzutun .nix-game-card:hover {
    border-color:
        rgba(118, 98, 215, 0.35);

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #f2f0ff 100%);

    box-shadow:
        0 9px 20px rgba(35, 39, 50, 0.09);

    transform: translateY(-2px);
}

#nixzutun .nix-game-card:hover::after {
    background:
        rgba(118, 98, 215, 0.1);

    transform: scale(1.18);
}


/* ---------------------------------------------------------
   Karteninhalt
   --------------------------------------------------------- */

#nixzutun .nix-game-card>span {
    position: relative;
    z-index: 1;

    min-height: 28px;

    display: flex;
    align-items: center;

    font-size: 1.35rem;
    line-height: 1;
}

#nixzutun .nix-game-card>strong {
    position: relative;
    z-index: 1;

    color: var(--heading);

    font-size: 0.7rem;
    line-height: 1.2;
    font-weight: 850;
}

#nixzutun .nix-game-card>small {
    position: relative;
    z-index: 1;

    color: var(--muted);

    font-size: 0.53rem;
    line-height: 1.3;
    font-weight: 680;
}


/* ---------------------------------------------------------
   DEMO-Quiz hervorheben
   --------------------------------------------------------- */

#nixzutun .regu-quiz-card {
    border-color:
        rgba(227, 16, 16, 0.22);

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #fff1f1 100%);
}

#nixzutun .regu-quiz-card::before {
    content: "DEMO";

    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;

    padding: 4px 6px;

    border-radius: 999px;

    background: var(--brand);
    color: #ffffff;

    font-size: 0.44rem;
    line-height: 1;
    font-weight: 900;

    letter-spacing: 0.06em;
}

#nixzutun .regu-quiz-card::after {
    background:
        rgba(227, 16, 16, 0.055);
}

#nixzutun .regu-quiz-card:hover {
    border-color:
        rgba(227, 16, 16, 0.5);

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #ffe8e8 100%);
}


/* ---------------------------------------------------------
   Ausgewähltes Spiel
   --------------------------------------------------------- */

#nixzutun .nix-game-card.active {
    border-color: var(--nix-purple);

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            var(--nix-purple-soft) 100%);

    box-shadow:
        0 0 0 3px rgba(118, 98, 215, 0.1),
        0 10px 22px rgba(35, 39, 50, 0.09);

    transform: translateY(-1px);
}

#nixzutun .nix-game-card.active::after {
    background:
        rgba(118, 98, 215, 0.13);

    transform: scale(1.25);
}

#nixzutun .regu-quiz-card.active {
    border-color: var(--brand);

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #ffe9e9 100%);

    box-shadow:
        0 0 0 3px rgba(227, 16, 16, 0.09),
        0 10px 22px rgba(35, 39, 50, 0.09);
}


/* =========================================================
   SPIELFENSTER
   ========================================================= */

#nixzutun .nix-game-frame-wrap {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 310px;

    overflow: hidden;

    border:
        1px solid rgba(35, 41, 51, 0.4);

    border-radius: 15px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(118, 98, 215, 0.18),
            transparent 42%),
        var(--nix-dark);

    box-shadow:
        0 12px 30px rgba(18, 22, 28, 0.16);
}


/* ---------------------------------------------------------
   Leerer Zustand
   --------------------------------------------------------- */

#nixzutun .nix-game-empty {
    min-height: 310px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    color: #a9b0bb;

    text-align: center;

    font-size: 0.68rem;
    line-height: 1.5;
    font-weight: 700;
}

#nixzutun .nix-game-empty::before {
    content: "↑";

    width: 34px;
    height: 34px;

    display: inline-grid;
    place-items: center;

    flex: 0 0 34px;

    margin-right: 10px;

    border:
        1px solid rgba(255, 255, 255, 0.11);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.06);

    color: #d6d9de;

    font-size: 0.85rem;
}


/* ---------------------------------------------------------
   Eingebettete Spiele
   --------------------------------------------------------- */

#nixzutun .nix-game-frame {
    width: 100%;
    height: 680px;
    min-height: 680px;

    display: block;

    border: 0;

    background: #ffffff;
}

#nixzutun .nix-game-frame.hidden,
#nixzutun .nix-game-empty.hidden,
#nixzutun .regu-quiz-game.hidden {
    display: none;
}


/* =========================================================
   DEMO-QUIZ
   ========================================================= */

#nixzutun .regu-quiz-game {
    width: 100%;
    min-width: 0;

    color: #edf0f4;
}


/* ---------------------------------------------------------
   Quiz-Grundkarte
   --------------------------------------------------------- */

#nixzutun .regu-quiz-shell {
    min-height: 520px;

    display: flex;
    flex-direction: column;

    padding: 19px;

    background:
        radial-gradient(circle at 94% 5%,
            rgba(227, 16, 16, 0.18),
            transparent 27%),
        radial-gradient(circle at 4% 95%,
            rgba(118, 98, 215, 0.16),
            transparent 29%),
        var(--nix-dark);
}


/* ---------------------------------------------------------
   Quizkopf
   --------------------------------------------------------- */

#nixzutun .regu-quiz-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding-bottom: 15px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.1);
}

#nixzutun .regu-quiz-head>div:first-child {
    min-width: 0;

    display: grid;
    gap: 4px;
}

#nixzutun .regu-quiz-head>div:first-child>strong {
    color: #ffffff;

    font-size: 1rem;
    line-height: 1.2;
    font-weight: 900;
}

#nixzutun .regu-quiz-head>div:first-child>span {
    color: #969faa;

    font-size: 0.58rem;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   Quiz-Punktestand
   --------------------------------------------------------- */

#nixzutun .regu-quiz-hud {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

#nixzutun .regu-quiz-hud>span {
    min-height: 29px;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 5px 8px;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    background:
        rgba(255, 255, 255, 0.055);

    color: #abb2bc;

    font-size: 0.53rem;
    font-weight: 720;
}

#nixzutun .regu-quiz-hud b {
    color: #ffffff;
    font-weight: 900;
}


/* ---------------------------------------------------------
   Fragebereich
   --------------------------------------------------------- */

#nixzutun .regu-quiz-question {
    width: min(690px, 100%);

    display: grid;
    align-content: center;
    gap: 13px;

    flex: 1 1 auto;

    margin: 0 auto;
    padding: 25px 0;
}

#nixzutun .regu-quiz-type {
    width: max-content;

    padding: 5px 8px;

    border:
        1px solid rgba(118, 98, 215, 0.28);

    border-radius: 999px;

    background:
        rgba(118, 98, 215, 0.14);

    color: #bdb4f2;

    font-size: 0.5rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.065em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   Materialkarte
   --------------------------------------------------------- */

#nixzutun .regu-quiz-material-card {
    display: grid;
    gap: 5px;

    padding: 19px;

    border:
        1px solid rgba(255, 255, 255, 0.11);

    border-radius: 13px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.035));

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#nixzutun .regu-quiz-material-card small {
    color: #929ba7;

    font-size: 0.53rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#nixzutun .regu-quiz-material-card strong {
    color: #ffffff;

    font-size: 1.22rem;
    line-height: 1.3;
    font-weight: 900;
}

#nixzutun .regu-quiz-material-card span {
    color: #a9b0ba;

    font-size: 0.61rem;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   Matchcode-Eingabe
   --------------------------------------------------------- */

#nixzutun .regu-quiz-answer-form {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: end;
    gap: 9px;
}

#nixzutun .regu-quiz-answer-form label {
    min-width: 0;

    display: grid;
    gap: 6px;
}

#nixzutun .regu-quiz-answer-form label>span {
    color: #aab1bb;

    font-size: 0.57rem;
    font-weight: 750;
}

#nixzutun .regu-quiz-answer-form input {
    width: 100%;
    min-height: 43px;

    padding: 8px 11px;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.08);

    color: #ffffff;

    font-size: 0.72rem;
    font-weight: 800;
}

#nixzutun .regu-quiz-answer-form input::placeholder {
    color: #747e8b;
}

#nixzutun .regu-quiz-answer-form input:focus {
    outline: none;

    border-color:
        rgba(118, 98, 215, 0.85);

    box-shadow:
        0 0 0 3px rgba(118, 98, 215, 0.18);
}

#nixzutun .regu-quiz-answer-form button {
    min-height: 43px;

    padding: 8px 15px;

    border-color: var(--nix-purple);
    border-radius: 9px;

    background: var(--nix-purple);
    color: #ffffff;

    font-size: 0.63rem;
}


/* ---------------------------------------------------------
   Preisauswahl
   --------------------------------------------------------- */

#nixzutun .regu-quiz-price-options {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

#nixzutun .regu-quiz-price-options button {
    min-height: 52px;

    padding: 10px 12px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.065);

    color: #f3f5f7;

    box-shadow: none;

    font-size: 0.75rem;
    font-weight: 850;
}

#nixzutun .regu-quiz-price-options button:hover {
    border-color:
        rgba(118, 98, 215, 0.75);

    background:
        rgba(118, 98, 215, 0.18);
}

#nixzutun .regu-quiz-price-options button:disabled {
    cursor: default;
}

#nixzutun .regu-quiz-price-options button.correct {
    border-color: #4f9a72;

    background:
        rgba(53, 115, 84, 0.32);

    color: #d9f4e4;
}

#nixzutun .regu-quiz-price-options button.wrong {
    border-color: #c65d5d;

    background:
        rgba(181, 67, 67, 0.3);

    color: #ffe3e3;
}


/* ---------------------------------------------------------
   Richtig-/Falsch-Meldung
   --------------------------------------------------------- */

#nixzutun .regu-quiz-feedback {
    padding: 10px 11px;

    border: 1px solid transparent;
    border-radius: 9px;

    font-size: 0.62rem;
    line-height: 1.45;
    font-weight: 760;
}

#nixzutun .regu-quiz-feedback.correct {
    border-color:
        rgba(79, 154, 114, 0.4);

    background:
        rgba(53, 115, 84, 0.2);

    color: #cbeed9;
}

#nixzutun .regu-quiz-feedback.wrong {
    border-color:
        rgba(198, 93, 93, 0.42);

    background:
        rgba(181, 67, 67, 0.2);

    color: #ffd2d2;
}


/* ---------------------------------------------------------
   Quiz-Aktionen
   --------------------------------------------------------- */

#nixzutun .regu-quiz-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;

    padding-top: 14px;

    border-top:
        1px solid rgba(255, 255, 255, 0.1);
}

#nixzutun .regu-quiz-actions button,
#nixzutun .regu-quiz-finish button {
    min-height: 36px;

    padding: 7px 11px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 8px;

    background:
        rgba(255, 255, 255, 0.07);

    color: #d9dde3;

    font-size: 0.58rem;
}

#nixzutun #reguQuizNextBtn {
    border-color: var(--brand);

    background: var(--brand);
    color: #ffffff;
}

#nixzutun #reguQuizNextBtn:hover {
    border-color: var(--brand-dark);

    background: var(--brand-dark);
}


/* ---------------------------------------------------------
   Quiz-Ende und fehlende Preisdaten
   --------------------------------------------------------- */

#nixzutun .regu-quiz-finish,
#nixzutun .regu-quiz-empty {
    min-height: 420px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 30px;

    color: #aeb5bf;

    text-align: center;
}

#nixzutun .regu-quiz-finish-icon,
#nixzutun .regu-quiz-empty>div:first-child {
    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    margin-bottom: 5px;

    border:
        1px solid rgba(255, 255, 255, 0.11);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.07);

    font-size: 1.65rem;
}

#nixzutun .regu-quiz-finish h3,
#nixzutun .regu-quiz-empty h3 {
    margin: 0;

    color: #ffffff;

    font-size: 1.15rem;
}

#nixzutun .regu-quiz-finish p,
#nixzutun .regu-quiz-empty p {
    max-width: 460px;

    margin: 0;

    color: #aab1bb;

    font-size: 0.65rem;
    line-height: 1.5;
}


/* =========================================================
   RESPONSIVE NIX ZU TUN
   ========================================================= */

@media (max-width: 900px) {
    #nixzutun .nix-game-grid {
        grid-template-columns:
            repeat(auto-fit,
                minmax(145px, 1fr));
    }

    #nixzutun .regu-quiz-head {
        align-items: flex-start;
        flex-direction: column;
    }

    #nixzutun .regu-quiz-hud {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    #nixzutun .nix-panel {
        padding: 13px;
    }

    #nixzutun .panel-header>div {
        padding-left: 0;
    }

    #nixzutun .panel-header>div::before {
        position: static;

        margin-bottom: 8px;
    }

    #nixzutun .nix-game-toolbar {
        justify-content: stretch;
    }

    #nixzutun .nix-panic-btn {
        width: 100%;
    }

    #nixzutun .nix-game-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #nixzutun .nix-game-card {
        min-height: 104px;
    }

    #nixzutun .regu-quiz-shell {
        padding: 14px;
    }

    #nixzutun .regu-quiz-answer-form {
        grid-template-columns: 1fr;
    }

    #nixzutun .regu-quiz-answer-form button {
        width: 100%;
    }

    #nixzutun .regu-quiz-price-options {
        grid-template-columns: 1fr;
    }

    #nixzutun .nix-game-frame {
        height: 600px;
        min-height: 600px;
    }
}

@media (max-width: 390px) {
    #nixzutun .nix-game-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   UPDATE-FENSTER
   ========================================================= */

#updateModal {
    background:
        rgba(17, 21, 27, 0.55);

    backdrop-filter:
        blur(7px);
}


/* ---------------------------------------------------------
   Fenster
   --------------------------------------------------------- */

#updateModal .update-box {
    position: relative;

    width:
        min(570px,
            calc(100vw - 28px));

    padding: 0;

    overflow: hidden;

    border:
        1px solid rgba(198, 205, 214, 0.82);

    border-radius: 21px;

    background: #ffffff;

    box-shadow:
        0 30px 90px rgba(10, 14, 20, 0.3),
        0 5px 18px rgba(10, 14, 20, 0.09);

    text-align: left;
}

#updateModal:not(.hidden) .update-box {
    animation:
        update-modal-open 200ms cubic-bezier(.2, .75, .25, 1);
}


/* ---------------------------------------------------------
   Oberer Bereich
   --------------------------------------------------------- */

#updateModal .update-box-icon {
    position: absolute;

    top: 25px;
    left: 25px;

    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(227, 16, 16, 0.2);

    border-radius: 15px;

    background:
        linear-gradient(145deg,
            #ef3434 0%,
            var(--brand) 100%);

    color: #ffffff;

    box-shadow:
        0 12px 25px rgba(227, 16, 16, 0.22);

    font-size: 1.25rem;
    line-height: 1;
    font-weight: 900;
}

#updateModal .update-box-copy {
    min-height: 146px;

    display: grid;
    align-content: center;
    gap: 6px;

    padding:
        25px 26px 23px 94px;

    border-bottom:
        1px solid var(--border);

    background:
        radial-gradient(circle at 100% 0%,
            rgba(227, 16, 16, 0.1),
            transparent 38%),
        linear-gradient(145deg,
            #ffffff 0%,
            #fafbfc 100%);
}

#updateModal .update-box-eyebrow {
    color: var(--brand);

    font-size: 0.62rem;
    line-height: 1;
    font-weight: 900;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

#updateModal .update-box h3 {
    margin: 0;

    color: var(--heading);

    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 900;
}

#updateModal #updateModalText {
    max-width: 410px;

    margin: 1px 0 0;

    color: var(--muted);

    font-size: 0.76rem;
    line-height: 1.55;
    font-weight: 600;
}


/* ---------------------------------------------------------
   Backup- und Versionshinweis
   --------------------------------------------------------- */

#updateModal .update-box-note {
    display: grid;
    gap: 7px;

    margin: 18px 22px 0;
    padding: 13px 14px;

    border:
        1px solid rgba(53, 115, 84, 0.17);

    border-radius: 12px;

    background: #edf8f1;
    color: #496457;

    font-size: 0.68rem;
    line-height: 1.35;
    font-weight: 750;
}

#updateModal .update-box-note>div {
    display: flex;
    align-items: center;
    gap: 8px;
}

#updateModal .update-box-note>div::before {
    content: "✓";

    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    flex: 0 0 22px;

    border-radius: 50%;

    background:
        rgba(53, 115, 84, 0.12);

    color: #357354;

    font-size: 0.62rem;
    font-weight: 900;
}

#updateModal #updateModalVersion {
    display: inline-flex;

    margin-left: 3px;
    padding: 3px 7px;

    border-radius: 999px;

    background: #357354;
    color: #ffffff;

    font-size: 0.59rem;
    line-height: 1;
    font-weight: 900;
}


/* ---------------------------------------------------------
   Neuerungen
   --------------------------------------------------------- */

#updateModal .update-changelog {
    margin: 11px 22px 0;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: #ffffff;
}

#updateModal .update-changelog summary {
    position: relative;

    min-height: 42px;

    display: flex;
    align-items: center;

    padding:
        10px 42px 10px 13px;

    color: #56606c;

    cursor: pointer;

    list-style: none;

    font-size: 0.67rem;
    font-weight: 850;
}

#updateModal .update-changelog summary::-webkit-details-marker {
    display: none;
}

#updateModal .update-changelog summary::before {
    content: "✦";

    width: 24px;
    height: 24px;

    display: inline-grid;
    place-items: center;

    margin-right: 8px;

    border-radius: 7px;

    background: var(--brand-soft);
    color: var(--brand);

    font-size: 0.62rem;
}

#updateModal .update-changelog summary::after {
    content: "⌄";

    position: absolute;
    right: 14px;

    color: #7c8591;

    font-size: 0.9rem;

    transition:
        transform 150ms ease;
}

#updateModal .update-changelog[open] summary::after {
    transform: rotate(180deg);
}

#updateModal .update-changelog summary:hover {
    background: #f7f8fa;
    color: var(--heading);
}

#updateModal .update-changelog[open] summary {
    border-bottom:
        1px solid var(--border);
}

#updateModal #updateChangelogList {
    display: grid;
    gap: 8px;

    margin: 0;
    padding:
        13px 16px 14px 40px;

    background: #fafbfc;
    color: #59636f;

    font-size: 0.65rem;
    line-height: 1.45;
}

#updateModal #updateChangelogList li::marker {
    color: var(--brand);
}


/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

#updateModal .update-box-actions {
    justify-content: flex-end;

    margin-top: 18px;
    padding: 16px 22px 20px;

    border-top:
        1px solid var(--border);

    background: #fafbfc;
}

#updateModal #updateModalCancel,
#updateModal #updateModalConfirm {
    min-height: 41px;

    padding: 8px 15px;

    border-radius: 10px;

    font-size: 0.69rem;
    font-weight: 850;
}

#updateModal #updateModalCancel {
    border-color: var(--border);

    background: #ffffff;
    color: #5f6874;
}

#updateModal #updateModalCancel:hover {
    border-color: var(--border-strong);

    background: #f1f3f5;
    color: var(--heading);
}

#updateModal #updateModalConfirm {
    border-color: var(--brand);

    background: var(--brand);
    color: #ffffff;

    box-shadow:
        0 8px 18px rgba(227, 16, 16, 0.17);
}

#updateModal #updateModalConfirm:hover {
    border-color: var(--brand-dark);

    background: var(--brand-dark);
}


/* ---------------------------------------------------------
   Animation
   --------------------------------------------------------- */

@keyframes update-modal-open {
    from {
        opacity: 0;

        transform:
            translateY(12px) scale(0.975);
    }

    to {
        opacity: 1;

        transform:
            translateY(0) scale(1);
    }
}


/* ---------------------------------------------------------
   Kleine Bildschirme
   --------------------------------------------------------- */

@media (max-width: 560px) {
    #updateModal {
        padding: 12px;
    }

    #updateModal .update-box {
        width: 100%;
    }

    #updateModal .update-box-icon {
        top: 20px;
        left: 20px;

        width: 44px;
        height: 44px;

        border-radius: 13px;
    }

    #updateModal .update-box-copy {
        min-height: 136px;

        padding:
            20px 19px 19px 78px;
    }

    #updateModal .update-box h3 {
        font-size: 1.15rem;
    }

    #updateModal #updateModalText {
        font-size: 0.7rem;
    }

    #updateModal .update-box-note,
    #updateModal .update-changelog {
        margin-right: 16px;
        margin-left: 16px;
    }

    #updateModal .update-box-actions {
        align-items: stretch;
        flex-direction: column-reverse;

        padding:
            15px 16px 17px;
    }

    #updateModal #updateModalCancel,
    #updateModal #updateModalConfirm {
        width: 100%;
    }
}

/* =========================================================
   BÜROPLAN – MODERNE MONATSANSICHT
   ========================================================= */

#buero {
    --office-mia: #5478a1;
    --office-mia-soft: #edf3f9;

    --office-alex: #98721d;
    --office-alex-soft: #fff8df;

    --office-danger: #b34848;
    --office-danger-soft: #fff1f1;
}


/* ---------------------------------------------------------
   Hauptfläche und Navigation
   --------------------------------------------------------- */

#buero>.panel {
    padding: 16px;

    overflow: visible;
}

#buero .panel-header {
    min-height: 42px;

    justify-content: flex-end;

    margin-bottom: 12px;
}

/*
 * Der Seitentitel steht bereits oben in der Appbar.
 * Deshalb blenden wir die doppelte Überschrift aus.
 */
#buero .panel-header>div:first-child {
    display: none;
}

#buero .panel-header .toolbar {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-left: auto;
}

#buero .panel-header .toolbar button {
    min-height: 36px;

    padding: 7px 11px;

    border-radius: 9px;

    font-size: 0.7rem;
}

#buero #prevPeriodBtn,
#buero #nextPeriodBtn {
    width: 38px;
    min-width: 38px;

    padding: 0;

    font-size: 0;
}

#buero #prevPeriodBtn::after {
    content: "‹";

    font-size: 1.2rem;
    line-height: 1;
}

#buero #nextPeriodBtn::after {
    content: "›";

    font-size: 1.2rem;
    line-height: 1;
}

#buero #periodTitle {
    min-width: 178px;

    padding: 8px 12px;

    border-radius: 9px;

    background: #f7f8fa;

    font-size: 0.74rem;
    font-weight: 850;
}

#buero #todayMonthBtn {
    min-width: 112px;
}


/* ---------------------------------------------------------
   Stundenübersicht
   --------------------------------------------------------- */

#buero #hoursCounters {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px;

    margin: 0 0 12px;
}

#buero #hoursCounters .counter-card {
    position: relative;

    min-width: 0;
    max-width: none;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;
    gap: 4px 14px;

    padding: 12px 14px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f8fafb 100%);

    box-shadow: none;
}

#buero #hoursCounters .counter-card>div:first-child {
    color: var(--muted);

    font-size: 0.62rem;
    line-height: 1.2;
    font-weight: 800;

    letter-spacing: 0.035em;
    text-transform: uppercase;
}

#buero #hoursCounters .counter-card strong {
    grid-column: 1;
    grid-row: 2;

    margin: 0;

    color: var(--heading);

    font-size: 0.96rem;
    line-height: 1.2;
    font-weight: 850;
}

#buero #hoursCounters .counter-card .meta {
    grid-column: 2;
    grid-row: 1 / 3;

    margin: 0;
    padding: 5px 8px;

    border: 1px solid #e0e4e9;
    border-radius: 7px;

    background: #ffffff;
    color: var(--muted);

    font-size: 0.59rem;
    font-weight: 750;
    white-space: nowrap;
}

#buero #hoursCounters .counter-card.warning {
    border-color:
        rgba(227, 16, 16, 0.18);

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #fff4f4 100%);
}

#buero #hoursCounters .counter-card.warning strong {
    color: var(--brand-dark);
}


/* ---------------------------------------------------------
   Wochentagskopf
   --------------------------------------------------------- */

#buero .weekday-header {
    display: grid;
    grid-template-columns:
        repeat(7, minmax(0, 1fr));
    gap: 7px;

    margin-bottom: 7px;
}

#buero .weekday-header>div {
    min-width: 0;

    padding: 7px 4px;

    border: 0;
    border-radius: 8px;

    background: #f1f3f5;
    color: #69737f;

    text-align: center;

    font-size: 0.61rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#buero .weekday-header>div:nth-child(6),
#buero .weekday-header>div:nth-child(7) {
    background: #e9ecef;
    color: #747d88;
}


/* ---------------------------------------------------------
   Monatsraster
   --------------------------------------------------------- */

#buero .office-grid.month-fit {
    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    grid-auto-rows: minmax(138px, auto);

    gap: 7px;
}

#buero .office-day {
    position: relative;

    min-width: 0;
    min-height: 138px;

    display: flex;
    flex-direction: column;
    gap: 7px;

    padding: 10px;

    overflow: hidden;

    border: 1px solid #dde2e8;
    border-radius: 12px;

    background:
        linear-gradient(160deg,
            #ffffff 0%,
            #fafbfc 100%);

    color: var(--text);

    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease;
}

#buero .office-day:hover {
    border-color: #c6cdd6;

    box-shadow:
        0 8px 20px rgba(22, 28, 36, 0.07);

    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   Datum und Kopf
   --------------------------------------------------------- */

#buero .office-head {
    min-width: 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 7px;
}

#buero .office-number {
    color: var(--heading);

    font-size: 1.15rem;
    line-height: 1;
    font-weight: 850;
}

#buero .office-weekday {
    margin-top: 3px;

    color: var(--muted);

    font-size: 0.55rem;
    line-height: 1;
    font-weight: 750;

    text-transform: uppercase;
}

#buero .office-flags {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
}


/* ---------------------------------------------------------
   Kleine Hinweise und Badges
   --------------------------------------------------------- */

#buero .tiny-badge {
    min-width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 3px 5px;

    border: 1px solid transparent;
    border-radius: 6px;

    font-size: 0.52rem;
    line-height: 1;
    font-weight: 850;
}

#buero .tiny-badge.today {
    border-color:
        rgba(227, 16, 16, 0.18);

    background: var(--brand-soft);
    color: var(--brand);
}

#buero .tiny-badge.holiday {
    border-color:
        rgba(174, 69, 69, 0.16);

    background: #fff0f0;
    color: #a34545;
}

#buero .tiny-badge.event {
    border-color:
        rgba(100, 81, 153, 0.16);

    background: #f1eef9;
    color: #665397;
}

#buero .tiny-badge.payday {
    border-color:
        rgba(164, 124, 35, 0.17);

    background: #fff5d8;
    color: #87651b;
}

#buero .tiny-badge.empty {
    border-color:
        rgba(179, 72, 72, 0.18);

    background: var(--office-danger-soft);
    color: var(--office-danger);
}

#buero .tiny-badge.birthday {
    width: 20px;
    min-width: 20px;

    padding: 0;

    background: #fff6da;

    font-size: 0.72rem;
}

#buero .office-waste-group,
#buero .office-trash-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

#buero .office-trash-group img,
#buero .office-waste-group img,
#buero .office-trash-group svg,
#buero .office-waste-group svg {
    width: 13px;
    height: 13px;

    display: block;
}


/* ---------------------------------------------------------
   Eingeteilte Personen
   --------------------------------------------------------- */

#buero .office-assigned {
    min-height: 22px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

#buero .person-chip {
    max-width: 100%;

    display: inline-flex;
    align-items: center;

    padding: 4px 7px;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 7px;

    font-size: 0.58rem;
    line-height: 1;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#buero .person-chip.mia {
    border-color:
        rgba(84, 120, 161, 0.16);

    background: var(--office-mia-soft);
    color: var(--office-mia);
}

#buero .person-chip.alex {
    border-color:
        rgba(152, 114, 29, 0.16);

    background: var(--office-alex-soft);
    color: var(--office-alex);
}

#buero .person-chip.other {
    border-color:
        rgba(76, 110, 91, 0.16);

    background: #eef6f1;
    color: #4c6f5a;
}


/* ---------------------------------------------------------
   Auswahlelemente in den Tagen
   --------------------------------------------------------- */

#buero .office-selects {
    min-width: 0;

    display: grid;
    gap: 5px;

    margin-top: auto;
}

#buero .office-selects select {
    width: 100%;
    min-width: 0;
    min-height: 30px;

    padding: 5px 24px 5px 7px;

    border-radius: 7px;

    background: rgba(255, 255, 255, 0.86);

    font-size: 0.57rem;
}

#buero .office-closed-note {
    margin-top: auto;
    padding: 7px;

    border-radius: 7px;

    background: rgba(110, 119, 129, 0.07);
    color: #77808b;

    text-align: center;

    font-size: 0.59rem;
    font-weight: 750;
}


/* ---------------------------------------------------------
   Tageszustände
   --------------------------------------------------------- */

#buero .office-day.office-mia {
    border-color:
        rgba(84, 120, 161, 0.34);

    background:
        linear-gradient(160deg,
            #ffffff 0%,
            var(--office-mia-soft) 100%);
}

#buero .office-day.office-alex {
    border-color:
        rgba(152, 114, 29, 0.34);

    background:
        linear-gradient(160deg,
            #ffffff 0%,
            var(--office-alex-soft) 100%);
}

#buero .office-day.office-filled {
    border-color:
        rgba(90, 101, 132, 0.26);

    background:
        linear-gradient(160deg,
            #ffffff 0%,
            #f1f2f8 100%);
}

#buero .office-day.office-empty {
    border-color:
        rgba(179, 72, 72, 0.34);

    border-style: dashed;

    background:
        linear-gradient(160deg,
            #ffffff 0%,
            var(--office-danger-soft) 100%);
}

#buero .office-day.office-empty .office-number {
    color: var(--office-danger);
}

#buero .office-day.sunday,
#buero .office-day.holiday {
    border-color: #d9dee4;

    background:
        repeating-linear-gradient(135deg,
            rgba(108, 117, 128, 0.035) 0 6px,
            transparent 6px 12px),
        #f3f4f5;
}

#buero .office-day.outside {
    opacity: 0.42;

    background: #f1f2f3;
}

#buero .office-day.today {
    border-color:
        rgba(227, 16, 16, 0.68);

    box-shadow:
        inset 0 0 0 1px rgba(227, 16, 16, 0.18),
        0 8px 20px rgba(22, 28, 36, 0.07);
}

#buero .office-day.today .office-number {
    color: var(--brand);
}


/* ---------------------------------------------------------
   Kleinere Bildschirme
   --------------------------------------------------------- */

@media (max-width: 1100px) {
    #buero #hoursCounters {
        grid-template-columns: 1fr;
    }

    #buero .office-grid.month-fit {
        grid-auto-rows:
            minmax(126px, auto);

        gap: 5px;
    }

    #buero .office-day {
        min-height: 126px;

        padding: 8px;
    }

    #buero .office-selects select {
        font-size: 0.53rem;
    }
}

@media (max-width: 760px) {
    #buero>.panel {
        overflow-x: auto;
    }

    #buero .panel-header {
        justify-content: flex-start;
    }

    #buero .panel-header .toolbar {
        margin-left: 0;
    }

    #buero .weekday-header,
    #buero .office-grid.month-fit {
        min-width: 980px;
    }
}

/* =========================================================
   CONTAINER – MODERNER ARBEITSBEREICH
   ========================================================= */

#container {
    --container-overdue: #b54343;
    --container-overdue-soft: #fff1f1;

    --container-due: #8a681d;
    --container-due-soft: #fff8e2;

    --container-success: #2f7553;
    --container-success-soft: #eef8f2;

    --container-blue: #496d93;
    --container-blue-soft: #eef4fa;
}


/* ---------------------------------------------------------
   Grundaufbau
   --------------------------------------------------------- */

#container .container-layout {
    display: grid;
    gap: 14px;
}

#container .container-layout .panel+.panel {
    margin-top: 0;
}


/* ---------------------------------------------------------
   Suche und Befehlsleiste
   --------------------------------------------------------- */

#container .container-command-panel {
    display: grid;
    gap: 12px;

    padding: 14px;

    border-radius: 14px;
}

#container .container-search-primary {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr) minmax(170px, 0.55fr) auto;

    align-items: end;
    gap: 8px;
}

#container .container-search-field {
    min-width: 0;

    display: grid;
    gap: 5px;
}

#container .container-search-field>span,
#container .container-edit-grid label>span {
    color: var(--muted);

    font-size: 0.57rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#container .container-search-field input {
    width: 100%;
    min-height: 40px;

    padding: 8px 11px;

    border-radius: 9px;

    background: #ffffff;

    font-size: 0.72rem;
    font-weight: 700;
}

#container .container-search-btn {
    min-width: 105px;
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 8px 14px;

    border-color: var(--brand);
    border-radius: 9px;

    background: var(--brand);
    color: #ffffff;

    font-size: 0.7rem;
}

#container .container-search-btn:hover {
    border-color: var(--brand-dark);

    background: var(--brand-dark);
}

#container .container-search-btn>span {
    font-size: 0.9rem;
}


/* ---------------------------------------------------------
   Filter und Dateiaktionen
   --------------------------------------------------------- */

#container .container-command-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    padding-top: 11px;

    border-top: 1px solid var(--border);
}

#container .container-filter-group,
#container .container-period-group,
#container .container-file-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

#container .container-period-group {
    padding-left: 8px;

    border-left: 1px solid var(--border);
}

#container .container-file-group {
    margin-left: auto;
    padding-left: 8px;

    border-left: 1px solid var(--border);
}

#container .container-command-row button,
#container .container-command-row .file-button,
#container .container-command-row select {
    min-height: 34px;

    padding: 6px 9px;

    border-radius: 8px;

    font-size: 0.61rem;
    font-weight: 780;

    white-space: nowrap;
}

#container .container-command-row select {
    width: 156px;

    background: #ffffff;
}

#container .container-filter-btn {
    padding-left: 9px;
}

#container .container-filter-btn::before {
    display: none;
}

#container .container-filter-btn.overdue {
    border-color:
        rgba(181, 67, 67, 0.18);

    background:
        var(--container-overdue-soft);

    color:
        var(--container-overdue);
}


#container .container-filter-btn.due {
    border-color:
        rgba(138, 104, 29, 0.18);

    background:
        var(--container-due-soft);

    color:
        var(--container-due);
}


/* ---------------------------------------------------------
   Tabelle und Bearbeitungsbereich nebeneinander
   --------------------------------------------------------- */

#container .container-workspace {
    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 340px;

    align-items: start;
    gap: 12px;
}


/* ---------------------------------------------------------
   Containerliste
   --------------------------------------------------------- */

#container .container-table-panel {
    min-width: 0;
    min-height: 590px;

    padding: 0;

    overflow: hidden;

    border-radius: 14px;
}

#container .container-table-head {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 15px 17px;

    border-bottom:
        1px solid var(--border);

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #fafbfc 100%);
}

#container .container-section-eyebrow {
    display: block;

    margin-bottom: 4px;

    color: var(--brand);

    font-size: 0.56rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#container .container-table-head h2,
#container .container-edit-head h2 {
    margin: 0 0 4px;

    color: var(--heading);

    font-size: 1rem;
    line-height: 1.2;
}

#container .container-table-head p,
#container .container-edit-head p {
    margin: 0;

    font-size: 0.63rem;
    line-height: 1.35;
}

#container .container-table-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    flex: 0 0 auto;

    padding: 6px 8px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: #ffffff;
    color: var(--muted);

    font-size: 0.57rem;
    font-weight: 700;
}

#container .container-table-wrap {
    max-width: 100%;

    height:
        min(510px,
            calc(100vh - 355px));

    min-height: 410px;
    max-height: 510px;

    overflow: auto;

    border: 0;
    border-radius: 0;

    background: #ffffff;

    scrollbar-width: thin;
}

#container .container-table {
    width: 100%;
    min-width: 790px;

    border-collapse: separate;
    border-spacing: 0;
}

#container .container-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;

    padding: 10px 12px;

    border-bottom:
        1px solid var(--border-strong);

    background: #f1f3f5;
    color: #59636f;

    font-size: 0.57rem;
    line-height: 1.1;
    font-weight: 850;

    letter-spacing: 0.055em;
    text-transform: uppercase;
}

#container .container-table tbody td {
    height: 48px;

    padding: 11px 13px;

    border-bottom:
        1px solid #e7eaee;

    background: #ffffff;
    color: var(--text);

    font-size: 0.68rem;
    line-height: 1.3;
}

#container .container-table tbody tr {
    cursor: pointer;
}

#container .container-table tbody tr:hover td {
    background: #f7f8fa;
}

#container .container-table td:first-child,
#container .container-table th:first-child {
    width: 120px;
}

#container .container-table td:nth-child(2),
#container .container-table th:nth-child(2) {
    width: 110px;
}

#container .container-table td:nth-child(3),
#container .container-table th:nth-child(3),
#container .container-table td:nth-child(4),
#container .container-table th:nth-child(4) {
    width: 128px;
}

#container .container-table td:nth-child(5),
#container .container-table th:nth-child(5),
#container .container-table td:nth-child(6),
#container .container-table th:nth-child(6) {
    width: 78px;
}

#container .container-table td:first-child strong {
    color: var(--heading);

    font-size: 0.7rem;
    font-weight: 850;
}

#container .container-table tbody tr.container-row-overdue td {
    background:
        var(--container-overdue-soft);
}

#container .container-table tbody tr.container-row-overdue td:first-child {
    box-shadow:
        inset 3px 0 0 var(--container-overdue);
}

#container .container-table tbody tr.container-row-due td {
    background:
        var(--container-due-soft);
}

#container .container-table tbody tr.container-row-due td:first-child {
    box-shadow:
        inset 3px 0 0 #d9a62e;
}

#container .container-table tbody tr.container-row-selected td {
    position: relative;

    background: var(--brand-soft);

    box-shadow:
        inset 0 1px 0 rgba(227, 16, 16, 0.22),
        inset 0 -1px 0 rgba(227, 16, 16, 0.22);
}

#container .container-table tbody tr.container-row-selected td:first-child {
    box-shadow:
        inset 3px 0 0 var(--brand),
        inset 0 1px 0 rgba(227, 16, 16, 0.22),
        inset 0 -1px 0 rgba(227, 16, 16, 0.22);
}

#container .container-empty-cell {
    height: 190px;

    padding: 30px 18px;

    background:
        repeating-linear-gradient(135deg,
            rgba(129, 139, 151, 0.035) 0 8px,
            transparent 8px 16px),
        #fafbfc;

    color: var(--muted);

    text-align: center;

    font-size: 0.68rem;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Bearbeitung rechts
   --------------------------------------------------------- */

#container .container-edit-panel {
    position: sticky;
    top:
        calc(var(--appbar-height) + 16px);

    align-self: start;

    padding: 17px;

    border-radius: 14px;
}

#container .container-edit-head {
    margin-bottom: 15px;
    padding-bottom: 13px;

    border-bottom:
        1px solid var(--border);
}

#container .container-edit-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: end;
    gap: 10px;
}

#container .container-edit-grid>label {
    min-width: 0;

    display: grid;
    gap: 5px;
}

#container .container-edit-grid>label:first-child,
#container .container-edit-grid .container-note-field {
    grid-column: 1 / -1;
}

#container .container-edit-grid input {
    width: 100%;
    min-height: 38px;

    padding: 7px 9px;

    border-radius: 9px;

    background: #ffffff;

    font-size: 0.68rem;
    font-weight: 680;
}

#container .container-edit-grid input:focus,
#container .container-search-field input:focus {
    outline: none;

    border-color:
        rgba(227, 16, 16, 0.48);

    box-shadow:
        0 0 0 3px rgba(227, 16, 16, 0.08);
}


/* ---------------------------------------------------------
   Bearbeitungsaktionen
   --------------------------------------------------------- */

#container .container-action-row {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;

    margin-top: 15px;
    padding-top: 14px;

    border-top:
        1px solid var(--border);
}

#container .container-action-row button {
    width: 100%;
    min-height: 37px;

    padding: 7px 8px;

    border-radius: 9px;

    font-size: 0.61rem;
    line-height: 1.2;
    font-weight: 800;
}

#container #containerAddBtn {
    border-color: var(--brand);

    background: var(--brand);
    color: #ffffff;
}

#container #containerAddBtn:hover {
    border-color: var(--brand-dark);

    background: var(--brand-dark);
}

#container #containerUpdateBtn {
    border-color: #384653;

    background: #384653;
    color: #ffffff;
}

#container #containerInspectionDoneBtn {
    border-color:
        rgba(47, 117, 83, 0.2);

    background:
        var(--container-success-soft);

    color:
        var(--container-success);
}

#container #containerInspectionBackdateBtn {
    border-color:
        rgba(73, 109, 147, 0.2);

    background:
        var(--container-blue-soft);

    color:
        var(--container-blue);
}

#container #containerDeleteBtn {
    border-color:
        rgba(181, 67, 67, 0.2);

    background:
        var(--container-overdue-soft);

    color:
        var(--container-overdue);
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1250px) {
    #container .container-workspace {
        grid-template-columns: 1fr;
    }

    #container .container-edit-panel {
        position: static;
    }

    #container .container-table-wrap {
        max-height: 520px;
    }

    #container .container-edit-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    #container .container-edit-grid>label:first-child,
    #container .container-edit-grid .container-note-field {
        grid-column: auto;
    }
}

@media (max-width: 850px) {
    #container .container-search-primary {
        grid-template-columns:
            1fr 1fr;
    }

    #container .container-search-btn {
        grid-column: 1 / -1;
    }

    #container .container-file-group {
        width: 100%;

        margin-left: 0;
        padding-top: 8px;
        padding-left: 0;

        border-top: 1px solid var(--border);
        border-left: 0;
    }

    #container .container-edit-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #container .container-edit-grid>label:first-child,
    #container .container-edit-grid .container-note-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {

    #container .container-search-primary,
    #container .container-edit-grid {
        grid-template-columns: 1fr;
    }

    #container .container-search-btn,
    #container .container-edit-grid>label:first-child,
    #container .container-edit-grid .container-note-field {
        grid-column: auto;
    }

    #container .container-filter-group,
    #container .container-period-group,
    #container .container-file-group {
        width: 100%;

        align-items: stretch;
        flex-direction: column;
    }

    #container .container-period-group {
        padding-top: 8px;
        padding-left: 0;

        border-top: 1px solid var(--border);
        border-left: 0;
    }

    #container .container-command-row button,
    #container .container-command-row .file-button,
    #container .container-command-row select {
        width: 100%;
    }

    #container .container-action-row {
        grid-template-columns: 1fr;
    }

    #container .container-table-hint {
        display: none;
    }
}

/* =========================================================
   TAGESERFASSUNG – GEMEINSAME MONATSMATRIX
   ========================================================= */

#anwesenheit>.panel {
    padding: 18px;

    overflow: visible;
}

#anwesenheit .panel-header {
    margin-bottom: 14px;
}

#anwesenheit .vacation-range {
    margin-bottom: 12px;
}

#anwesenheit .vacation-range select,
#anwesenheit .vacation-range input,
#anwesenheit .vacation-range button {
    min-height: 38px;

    border-radius: 10px;

    font-size: 0.7rem;
}

.daily-hints {
    min-height: 28px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-bottom: 10px;
}

.attendance-legend-item,
.attendance-legend-warning {
    min-height: 25px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 4px 8px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.76);
    color: var(--muted);

    font-size: 0.6rem;
    font-weight: 750;
}

.attendance-legend-item i {
    width: 8px;
    height: 8px;

    display: block;

    border-radius: 3px;

    background: #dce1e7;
}

.attendance-legend-item.present i {
    background: #cde7d7;
}

.attendance-legend-item.vacation i {
    background: #d8e8fa;
}

.attendance-legend-item.sick i {
    background: #f4d5d5;
}

.attendance-legend-item.other i {
    background: #f1e1aa;
}

.attendance-legend-warning {
    border-color:
        rgba(201, 49, 49, 0.18);

    background: var(--danger-soft);
    color: #9f4141;
}

.daily-board {
    min-width: 0;

    display: grid;
    gap: 12px;
}

.attendance-day-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 13px 15px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #fbfcfd 72%,
            #fff7f7 100%);
}

.attendance-selected-date {
    min-width: 0;

    display: grid;
    gap: 3px;
}

.attendance-selected-date>span {
    color: var(--muted);

    font-size: 0.58rem;
    font-weight: 850;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.attendance-selected-date>strong {
    color: var(--heading);

    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 850;

    text-transform: capitalize;
}

.attendance-progress {
    min-width: 270px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 11px;

    border: 1px solid #e1e5ea;
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.76);
}

.attendance-progress-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    flex: 0 0 32px;

    border-radius: 9px;

    background: #edf0f4;
    color: #5d6773;

    font-size: 0.75rem;
    font-weight: 900;
}

.attendance-progress>span:last-child {
    min-width: 0;

    display: grid;
    gap: 2px;
}

.attendance-progress strong {
    color: var(--heading);

    font-size: 0.7rem;
    line-height: 1.2;
}

.attendance-progress small {
    color: var(--muted);

    font-size: 0.6rem;
    line-height: 1.3;
}

.attendance-progress.complete {
    border-color:
        rgba(45, 131, 82, 0.18);

    background: #f2faf5;
}

.attendance-progress.complete .attendance-progress-icon {
    background: #dff1e6;
    color: #2f7553;
}

.attendance-progress.open {
    border-color:
        rgba(227, 16, 16, 0.16);

    background: #fff8f8;
}

.attendance-progress.open .attendance-progress-icon {
    background: var(--brand-soft);
    color: var(--brand);
}

.attendance-progress.blocked {
    border-color: #dfe3e8;

    background: #f7f8fa;
}

.attendance-progress.blocked .attendance-progress-icon {
    background: #e8ebef;
    color: #6d7682;
}

.attendance-matrix-shell {
    max-width: 100%;

    overflow-x: auto;
    overflow-y: visible;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--surface);
    box-shadow: var(--shadow-small);

    scrollbar-width: thin;
}

.attendance-matrix {
    width: 100%;
    min-width: 0;
}

.attendance-matrix-head,
.daily-row {
    display: grid;

    grid-template-columns:
        390px minmax(0, 1fr);
}

.attendance-matrix-head {
    min-height: 54px;

    border-bottom:
        1px solid var(--border-strong);

    background: #f7f8fa;
}

.attendance-employee-head,
.attendance-employee-cell {
    position: sticky;
    left: 0;
    z-index: 4;

    border-right:
        1px solid var(--border);

    background: inherit;
}

.attendance-employee-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 9px 13px;

    box-shadow:
        10px 0 18px rgba(22, 28, 36, 0.04);
}

.attendance-employee-head span {
    color: var(--heading);

    font-size: 0.66rem;
    font-weight: 850;
}

.attendance-employee-head small {
    color: var(--muted);

    font-size: 0.56rem;
}

.attendance-month-head,
.daily-month-track {
    display: grid;

    grid-template-columns:
        repeat(var(--attendance-days),
            minmax(0, 1fr));
}

.attendance-day-head {
    min-width: 0;
    min-height: 54px;

    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;

    padding: 3px 2px;

    border: 0;
    border-right:
        1px solid #e4e8ec;

    border-radius: 0;

    background: transparent;
    color: #69737f;
}

.attendance-day-head:hover {
    border-color: #e4e8ec;

    background: #edf0f3;
}

.attendance-day-head small {
    color: #8a929c;

    font-size: 0.48rem;
    line-height: 1;
    font-weight: 800;

    text-transform: uppercase;
}

.attendance-day-head strong {
    font-size: 0.66rem;
    line-height: 1;
}

.attendance-day-head.saturday,
.attendance-day-head.sunday,
.attendance-day-head.holiday,
.attendance-day-head.closed {
    background: #eef0f2;
}

.attendance-day-head.holiday,
.attendance-day-head.closed {
    color: #a24a4a;
}

.attendance-day-head.today:not(.selected) {
    box-shadow:
        inset 0 -2px 0 #9aa3ae;
}

.attendance-day-head.selected {
    background: var(--brand-soft);
    color: var(--brand-dark);

    box-shadow:
        inset 0 -3px 0 var(--brand);
}

.attendance-day-head.selected small {
    color: var(--brand);
}

.daily-row {
    min-height: 74px;

    border-bottom:
        1px solid var(--border);

    background: #ffffff;
}

.daily-row:last-child {
    border-bottom: 0;
}

.daily-row:nth-child(odd) {
    background: #fcfcfd;
}

.daily-row:hover {
    background: #fafbfc;
}

.attendance-employee-cell {
    display: grid;

    grid-template-columns:
            150px minmax(0, 1fr);

    align-items: center;
    gap: 11px;

    padding: 10px 12px;

    box-shadow:
        10px 0 18px rgba(22, 28, 36, 0.035);
}

.attendance-employee-identity {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 9px;
}

.attendance-avatar {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    flex: 0 0 30px;

    border-radius: 10px;

    background: #edf0f3;
    color: #48515d;

    font-size: 0.68rem;
    font-weight: 900;
}

.attendance-employee-copy {
    min-width: 0;

    display: grid;
    gap: 2px;
}

.attendance-employee-copy strong,
.attendance-employee-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-employee-copy strong {
    color: var(--heading);

    font-size: 0.73rem;
    line-height: 1.2;
}

.attendance-employee-copy small {
    color: var(--muted);

    font-size: 0.58rem;
    line-height: 1.2;
}

.daily-controls {
    position: relative;

    min-width: 0;

    display: grid;
    grid-template-columns:
        minmax(105px, 1fr) 64px;

    align-items: center;
    gap: 5px;
}

.daily-controls.single {
    grid-template-columns:
        minmax(130px, 1fr);
}

.daily-controls>select {
    width: 100%;
    min-width: 0;
    min-height: 32px;

    padding: 5px 24px 5px 7px;

    border-radius: 8px;

    background: #ffffff;

    font-size: 0.59rem;
}

.attendance-details-toggle {
    position: relative;

    min-height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 5px 6px;

    border-radius: 8px;

    background: #f6f7f9;
    color: #5c6672;

    font-size: 0.56rem;
    white-space: nowrap;
}

.attendance-details-toggle:hover,
.attendance-details-toggle[aria-expanded="true"] {
    border-color:
        rgba(227, 16, 16, 0.24);

    background: var(--brand-soft);
    color: var(--brand-dark);
}

.attendance-details-toggle>span {
    font-size: 0.73rem;
    line-height: 1;
}

.attendance-details-toggle.has-details::after {
    content: "";

    position: absolute;
    top: 5px;
    right: 5px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--brand);
}

.attendance-row-slideout {
    grid-column: 1 / -1;

    max-height: 0;

    margin-top: 0;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(-5px);

    transition:
        max-height 180ms ease,
        margin 180ms ease,
        opacity 140ms ease,
        transform 180ms ease;
}

.daily-row.details-open .attendance-row-slideout {
    max-height: 96px;

    margin-top: 7px;

    opacity: 1;

    transform:
        translateY(0);
}

.attendance-row-slideout-inner {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 28px;

    align-items: end;
    gap: 8px;

    padding: 8px;

    border:
        1px solid rgba(158, 166, 176, 0.24);

    border-radius: 10px;

    background:
        linear-gradient(135deg,
            #f8f9fa,
            #ffffff);
}

.daily-vacation-value,
.attendance-note-field {
    min-width: 0;

    display: grid;
    gap: 4px;
}

.daily-vacation-value>span,
.attendance-note-field>span {
    color: var(--muted);

    font-size: 0.49rem;
    font-weight: 800;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.daily-vacation-value select,
.attendance-note-field input {
    width: 100%;
    min-height: 33px;

    padding: 6px 8px;

    border-radius: 8px;

    background: #ffffff;

    font-size: 0.63rem;
}

.attendance-note-field input::placeholder {
    color: #9aa2ac;
}

.attendance-details-close {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 8px;

    background: #f0f2f4;
    color: #646e79;

    font-size: 0.9rem;
    line-height: 1;
}

.attendance-details-close:hover {
    background: #e7eaee;
    color: var(--heading);
}

.daily-row.details-open {
    background: #fafbfc;
}

.daily-row.details-open .attendance-employee-cell {
    align-items: start;
}

.daily-month-track {
    min-height: 100%;
}

.track-day {
    position: relative;

    min-width: 0;
    min-height: 74px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-right:
        1px solid #e7eaee;

    border-radius: 0;

    background: transparent;
    color: #9ba2ab;

    font-size: 0.64rem;
    line-height: 1;
    font-weight: 850;
}

.track-day:hover {
    border-color: #e7eaee;

    background:
        rgba(238, 241, 244, 0.72);
}

.track-day.blank>span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #d9dee4;

    color: transparent;
}

.track-day.a {
    background: #eef8f2;
    color: #2f7553;
}

.track-day.u {
    background: #eff5fc;
    color: #456e9d;
}

.track-day.k {
    background: #fff1f1;
    color: #a24747;
}

.track-day.s {
    background: #fff8e9;
    color: #8a681d;
}

.track-day.saturday-track,
.track-day.sunday-track,
.track-day.holiday-track,
.track-day.closed-track {
    background-image:
        repeating-linear-gradient(135deg,
            rgba(105, 114, 125, 0.055) 0 5px,
            transparent 5px 10px);
}

.track-day.non-counted-vacation-track {
    background:
        repeating-linear-gradient(135deg,
            rgba(84, 104, 126, 0.16) 0 4px,
            transparent 4px 8px),
        #e8eef5;

    color: #4d6279;
}

.track-day.today-track:not(.selected-track)::before {
    content: "";

    position: absolute;
    top: 7px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #8f98a3;
}

.track-day.selected-track {
    z-index: 2;

    box-shadow:
        inset 2px 0 0 var(--brand),
        inset -2px 0 0 var(--brand),
        inset 0 2px 0 var(--brand),
        inset 0 -2px 0 var(--brand);
}

.track-day[data-vacation-badge]:not([data-vacation-badge=""])::after {
    content:
        attr(data-vacation-badge);

    position: absolute;
    right: 3px;
    bottom: 4px;

    min-width: 15px;
    height: 15px;

    display: grid;
    place-items: center;

    padding: 0 3px;

    border-radius: 5px;

    background:
        rgba(255, 255, 255, 0.9);

    color: #52606e;

    font-size: 0.46rem;
    font-weight: 900;
}

@media (max-width: 1050px) {
    .attendance-day-overview {
        align-items: stretch;
        flex-direction: column;
    }

    .attendance-progress {
        width: 100%;
    }
}

/* ---------------------------------------------------------
   Beschäftigungszeitraum in der Tageserfassung
   --------------------------------------------------------- */

.daily-row.employment-blocked-attendance {
    background: #f3f4f6;
}

.daily-row.employment-blocked-attendance:hover {
    background: #f3f4f6;
}

.daily-row.employment-blocked-attendance .attendance-employee-cell {
    background: #f3f4f6;
}

.daily-row.employment-blocked-attendance .attendance-avatar {
    background: #e2e5e9;
    color: #7c848e;
}

.daily-row.employment-blocked-attendance .attendance-employee-copy strong,
.daily-row.employment-blocked-attendance .attendance-employee-copy small {
    color: #858d96;
}

.daily-row.employment-blocked-attendance .daily-controls {
    opacity: 0.72;
}

.daily-row.employment-blocked-attendance .daily-controls::after {
    content: "";

    position: absolute;
    left: 7px;
    right: 7px;
    top: 50%;
    z-index: 2;

    height: 1px;

    background: #8f969e;

    transform: rotate(-6deg);

    pointer-events: none;
}

.daily-row.employment-blocked-attendance .daily-controls>select {
    background: #eceff2;
    color: #8c939b;

    cursor: not-allowed;
}

.track-day.employment-blocked-track {
    background-color: #eef0f2;

    background-image:
        repeating-linear-gradient(135deg,
            rgba(92, 100, 110, 0.09) 0 4px,
            transparent 4px 9px);

    color: #8b929a;
}

.track-day.employment-blocked-track:hover {
    border-color: #e7eaee;

    background-color: #eef0f2;

    background-image:
        repeating-linear-gradient(135deg,
            rgba(92, 100, 110, 0.09) 0 4px,
            transparent 4px 9px);
}

.track-day.employment-blocked-track>span {
    opacity: 0.55;

    text-decoration: line-through;
}

.track-day.employment-blocked-track::before {
    content: "";

    position: absolute;
    top: 50%;
    right: 20%;
    left: 20%;

    width: auto;
    height: 1px;

    border-radius: 0;

    background: #8f969e;

    transform: rotate(-35deg);
}

/* =========================================================
   8. HOFBUCH
   Kopfbereich, Kurzübersicht, Buch und Suche
   ========================================================= */


/* ---------------------------------------------------------
   Gesamtlayout
   --------------------------------------------------------- */

.hofbook-layout {
    display: grid;
    gap: 14px;
}

.hofbook-layout .panel+.panel {
    margin-top: 0;
}


/* ---------------------------------------------------------
   Kompakter Hofbuch-Kopf
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   Hofbuch-Werkzeugleiste
   --------------------------------------------------------- */

.hofbook-hero {
    position: relative;

    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
    padding: 8px 10px;

    overflow: visible;

    border-radius: 12px;

    box-shadow:
        0 2px 10px rgba(22, 28, 36, 0.04);
}

.hofbook-nav,
.hofbook-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;

    flex: 0 0 auto;
}

.hofbook-nav>button,
.hofbook-toolbar-actions>button {
    min-height: 36px;
}

#hofbookPrevBtn,
#hofbookNextBtn {
    width: 36px;
    min-width: 36px;

    padding: 0;

    font-size: 0;
}

#hofbookPrevBtn::after,
#hofbookNextBtn::after {
    font-size: 1.2rem;
    line-height: 1;
}

#hofbookPrevBtn::after {
    content: "‹";
}

#hofbookNextBtn::after {
    content: "›";
}

#hofbookTodayBtn {
    min-width: 72px;
    padding-inline: 11px;
}

.hofbook-date-jump {
    position: relative;

    display: flex;
    align-items: center;
}

.hofbook-date-jump>span {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    white-space: nowrap;
}

.hofbook-date-jump input {
    width: 142px;
    min-height: 36px;

    padding: 7px 9px;

    border-radius: 9px;

    background: #f8f9fa;

    font-size: 0.75rem;
    font-weight: 750;
}

.hofbook-toolbar-divider {
    width: 1px;
    height: 28px;

    flex: 0 0 1px;

    margin: 0 2px;

    background: var(--border);
}

.hofbook-toolbar-actions {
    margin-left: auto;
}

.hofbook-primary-action,
.hofbook-toolbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 7px 11px;

    border-radius: 9px;

    font-size: 0.72rem;
    white-space: nowrap;
}

.hofbook-primary-action {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
}

.hofbook-primary-action:hover {
    border-color: var(--brand-dark);
    background: var(--brand-dark);
}

.hofbook-primary-action>span {
    font-size: 1rem;
    line-height: 1;
}

.hofbook-toolbar-action>span {
    color: var(--muted);
    font-size: 0.9rem;
}

#hofbookSearchToggleBtn[aria-expanded="true"] {
    border-color:
        rgba(227, 16, 16, 0.28);

    background: var(--brand-soft);
    color: var(--brand-dark);
}

.hofbook-day-title {
    display: none;
}

.hofbook-attendance-notice {
    width: max-content;
    max-width: 100%;

    padding: 0;

    border:
        1px solid rgba(201, 49, 49, 0.18);

    border-radius: 10px;

    background: var(--danger-soft);
    color: #a22c2c;

    overflow: hidden;
}

.hofbook-attendance-notice.done {
    border-color:
        rgba(45, 131, 82, 0.2);

    background: #eef8f2;
    color: #276b42;
}

.hofbook-attendance-notice-btn {
    min-height: 0;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 7px 10px;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: inherit;

    font-size: 0.68rem;
    text-align: left;
}

.hofbook-attendance-notice-btn:hover {
    border-color: transparent;

    background:
        rgba(255, 255, 255, 0.35);
}

.hofbook-attendance-notice-btn small {
    color: inherit;
    opacity: 0.78;
}


/* ---------------------------------------------------------
   Kompakte Schnellinformationen
   --------------------------------------------------------- */

.hofbook-quick-dashboard {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 2px;

    flex: 1 1 auto;
}

.hofbook-quick-card {
    min-width: 0;
    min-height: 36px;

    display: inline-flex;
    align-items: center;

    padding: 6px 9px;

    border: 1px solid transparent;
    border-radius: 8px;

    background: transparent;
    color: var(--text);

    box-shadow: none;
    white-space: nowrap;
}

.hofbook-quick-card:hover {
    border-color: transparent;
    background: #f3f5f7;
}

.hofbook-quick-card.alert {
    background: #fff5f5;
}

.hofbook-quick-card.alert::before {
    content: "";

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    margin-right: 6px;

    border-radius: 50%;

    background: var(--brand);
}

.hofbook-quick-copy {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 4px;
}

.hofbook-quick-label,
.hofbook-quick-copy strong,
.hofbook-quick-separator {
    font-size: 0.69rem;
    line-height: 1.2;
}

.hofbook-quick-label {
    color: var(--muted);
    font-weight: 700;
}

.hofbook-quick-copy strong {
    color: var(--heading);
    font-weight: 800;
}

.hofbook-quick-event-value {
    max-width: 230px;

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.hofbook-quick-separator {
    color: #a1a8b2;
}

.hofbook-quick-notes-wrap {
    position: relative;
    z-index: 30;

    flex: 0 0 auto;
}

.hofbook-quick-notes-preview {
    position: absolute;

    top: calc(100% + 9px);
    right: 0;
    z-index: 100;

    width:
        min(360px,
            calc(100vw - 48px));

    padding: 12px;

    border: 1px solid #e4d39a;
    border-radius: 12px;

    background: #fffdf7;

    box-shadow:
        0 18px 46px rgba(22, 28, 36, 0.16);

    text-align: left;
}

.hofbook-quick-notes-preview::before {
    content: "";

    position: absolute;

    top: -6px;
    right: 24px;

    width: 11px;
    height: 11px;

    border-top: 1px solid #e4d39a;
    border-left: 1px solid #e4d39a;

    background: #fffdf7;

    transform: rotate(45deg);
}

.hofbook-quick-notes-preview-head {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 9px;
}

.hofbook-quick-notes-preview-head strong {
    color: #684f12;
    font-size: 0.82rem;
}

.hofbook-quick-notes-preview-head button {
    width: 28px;
    height: 28px;
    min-height: 28px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #f7edce;
    color: #684f12;
}

.hofbook-quick-notes-preview-list {
    position: relative;
    z-index: 1;

    max-height: 280px;

    display: grid;
    gap: 7px;

    overflow-y: auto;
}

.hofbook-quick-note-preview-item {
    padding: 9px 10px;

    border: 1px solid #eadfbf;
    border-radius: 9px;

    background: #fffaf0;

    cursor: pointer;
}

.hofbook-quick-note-preview-item:hover {
    border-color: #d9bd67;
    background: #fff5d9;
}

.hofbook-quick-note-preview-item small,
.hofbook-quick-note-preview-item strong {
    display: block;
}

.hofbook-quick-note-preview-item small {
    margin-bottom: 3px;

    color: var(--muted);
    font-size: 0.62rem;
}

.hofbook-quick-note-preview-item strong {
    color: var(--heading);
    font-size: 0.78rem;
}

.hofbook-quick-note-preview-item p {
    margin: 5px 0 0;

    color: var(--text);

    font-size: 0.7rem;
    line-height: 1.35;
}

/* ---------------------------------------------------------
   Buchfläche
   --------------------------------------------------------- */

.hofbook-paper-panel {
    padding: 0;
    overflow: visible;

    border: 0;
    background: transparent;
    box-shadow: none;
}

.hofbook-paper {
    min-height: 0;

    padding: 4px 0 0;

    background: transparent;
}

.hofbook-book-stage {
    width: 100%;

    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 14px;

    perspective: 1800px;
    transform-style: preserve-3d;
}

.hofbook-side-nav {
    width: 40px;
    height: 52px;
    min-height: 52px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--surface);
    color: var(--heading);

    font-size: 1.45rem;
    line-height: 1;
}

.hofbook-side-nav:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
}

.hofbook-book-spread {
    position: relative;

    width: 100%;
    min-width: 0;
    max-width: 1500px;
    min-height: 720px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    margin: 0 auto;

    border-radius: 18px;

    background: #fbf8ef;

    box-shadow:
        0 0 0 7px #28333d,
        0 2px 0 8px rgba(255, 255, 255, 0.34),
        0 30px 60px rgba(20, 28, 36, 0.24),
        0 10px 22px rgba(20, 28, 36, 0.12);

    overflow: hidden;

    perspective: 1800px;
    transform-style: preserve-3d;
}

.hofbook-book-spread::before,
.hofbook-book-spread::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;

    transform: translateX(-50%);

    pointer-events: none;
}

.hofbook-book-spread::before {
    z-index: 5;

    width: 46px;

    background:
        linear-gradient(90deg,
            rgba(49, 40, 28, 0.11) 0%,
            rgba(49, 40, 28, 0.035) 26%,
            rgba(255, 255, 255, 0.44) 49%,
            rgba(49, 40, 28, 0.035) 74%,
            rgba(49, 40, 28, 0.11) 100%);
}

.hofbook-book-spread::after {
    z-index: 6;

    width: 2px;

    background:
        rgba(74, 60, 42, 0.18);

    box-shadow:
        -5px 0 10px rgba(54, 43, 29, 0.07),
        5px 0 10px rgba(54, 43, 29, 0.07);
}

/* ---------------------------------------------------------
   Blätteranimation
   --------------------------------------------------------- */

.hofbook-flip-page {
    position: absolute;
    top: 0;
    bottom: 0;

    z-index: 30;

    width: 50%;

    transform-style: preserve-3d;
    transition:
        transform 720ms cubic-bezier(.45, .05, .2, 1);

    will-change: transform;
    pointer-events: none;
}

.hofbook-flip-page.next {
    right: 0;

    transform-origin: left center;
    transform: rotateY(0deg);
}

.hofbook-flip-page.next.turning {
    transform: rotateY(-178deg);
}

.hofbook-flip-page.prev {
    left: 0;

    transform-origin: right center;
    transform: rotateY(0deg);
}

.hofbook-flip-page.prev.turning {
    transform: rotateY(178deg);
}

.hofbook-flip-face {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #fffdf7;

    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.hofbook-flip-front {
    transform:
        rotateY(0deg) translateZ(1px);
}

.hofbook-flip-back {
    transform:
        rotateY(180deg) translateZ(1px);
}

.hofbook-flip-face .hofbook-book-page {
    width: 100%;
    height: 100%;
    min-height: 100%;

    border-radius: 0;
    box-shadow: none;
}

.hofbook-flip-page::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 5;

    opacity: 0.52;

    pointer-events: none;
    backface-visibility: hidden;
}

.hofbook-flip-page.next::after {
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.22) 0%,
            rgba(0, 0, 0, 0.08) 20%,
            transparent 58%);
}

.hofbook-flip-page.prev::after {
    background:
        linear-gradient(270deg,
            rgba(0, 0, 0, 0.22) 0%,
            rgba(0, 0, 0, 0.08) 20%,
            transparent 58%);
}

.hofbook-flip-page .hofbook-book-line-actions {
    opacity: 0;
}

@media (max-width: 700px) {
    .hofbook-flip-page {
        transition:
            transform 340ms ease,
            opacity 340ms ease;
    }

    .hofbook-flip-page.next.turning {
        transform: translateX(-16px);
        opacity: 0;
    }

    .hofbook-flip-page.prev.turning {
        transform: translateX(16px);
        opacity: 0;
    }
}

.hofbook-book-page {
    position: relative;

    min-width: 0;
    min-height: 720px;

    display: flex;
    flex-direction: column;

    padding: 28px 32px 34px;

    color: #292a2b;

    background:
        radial-gradient(circle at 16% 8%,
            rgba(255, 255, 255, 0.72),
            transparent 30%),
        linear-gradient(90deg,
            rgba(91, 72, 43, 0.035),
            transparent 10%,
            transparent 90%,
            rgba(91, 72, 43, 0.045)),
        #fbf8ef;
}

.hofbook-book-page.left {
    padding-right: 44px;
}

.hofbook-book-page.right {
    padding-left: 44px;
}

.hofbook-book-page.today .hofbook-book-weekday::after {
    content: "";

    width: 6px;
    height: 6px;

    display: inline-block;

    margin-left: 8px;

    border-radius: 50%;

    background: var(--brand);

    vertical-align: middle;
}

.hofbook-book-page.hofbook-page-sunday,
.hofbook-book-page.hofbook-page-closed {
    background:
        radial-gradient(circle at 18% 8%,
            rgba(255, 255, 255, 0.42),
            transparent 30%),
        linear-gradient(90deg,
            rgba(66, 72, 80, 0.055),
            transparent 12%,
            transparent 88%,
            rgba(66, 72, 80, 0.065)),
        #e8eaec;
}

.hofbook-book-page.hofbook-page-sunday .hofbook-book-weekday,
.hofbook-book-page.hofbook-page-closed .hofbook-book-weekday {
    color: #68717b;
}

.hofbook-book-page.hofbook-page-sunday .hofbook-book-daynumber,
.hofbook-book-page.hofbook-page-closed .hofbook-book-daynumber {
    color: #555d66;
}

.hofbook-book-page.hofbook-page-sunday .hofbook-book-meta,
.hofbook-book-page.hofbook-page-closed .hofbook-book-meta {
    color: #737b84;
}

.hofbook-book-page.hofbook-page-holiday {
    background:
        radial-gradient(circle at 18% 8%,
            rgba(255, 255, 255, 0.7),
            transparent 30%),
        linear-gradient(90deg,
            rgba(166, 74, 74, 0.035),
            transparent 12%,
            transparent 88%,
            rgba(166, 74, 74, 0.04)),
        #fff7f5;
}

/* ---------------------------------------------------------
   Seitenkopf
   --------------------------------------------------------- */

.hofbook-book-page-head {
    min-height: 118px;

    display: grid;
    grid-template-columns:
        minmax(145px, 0.72fr) minmax(0, 1.28fr);

    align-items: end;
    gap: 18px;

    margin-bottom: 0;
    padding: 0 0 16px;

    border-bottom:
        1px solid rgba(91, 102, 115, 0.22);
}

.hofbook-book-dateblock {
    min-width: 0;
}

.hofbook-book-weekday {
    display: block;

    margin-bottom: 4px;

    color: #626b76;

    font-size: 0.67rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hofbook-book-daynumber {
    display: block;

    color: #202226;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2.8rem, 4vw, 3.55rem);

    line-height: 0.94;
    font-weight: 500;
}

.hofbook-book-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 8px;

    color: #69727d;

    font-size: 0.67rem;
    line-height: 1.2;
    font-weight: 720;
}

.hofbook-page-status-badge {
    display: inline-flex;
    align-items: center;

    min-height: 22px;

    padding: 3px 7px;

    border:
        1px solid rgba(99, 107, 117, 0.18);

    border-radius: 6px;

    background:
        rgba(255, 255, 255, 0.48);

    color: #66707b;

    font-size: 0.6rem;
    font-weight: 800;
}

.hofbook-page-status-badge.holiday {
    border-color:
        rgba(181, 70, 70, 0.18);

    background:
        rgba(255, 237, 237, 0.72);

    color: #a13a3a;
}


/* ---------------------------------------------------------
   Badges auf den Buchseiten
   --------------------------------------------------------- */

.hofbook-book-badge-row {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.hofbook-book-badge-row.empty {
    min-height: 1px;
}

.hofbook-book-badge {
    min-width: 0;
    min-height: 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    padding: 4px 8px;

    border:
        1px solid rgba(117, 128, 141, 0.2);

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.54);

    color: #59636f;

    font-size: 0.61rem;
    line-height: 1.1;
    font-weight: 720;

    box-shadow: none;
}

button.hofbook-book-badge:hover {
    border-color:
        rgba(117, 128, 141, 0.32);

    background:
        rgba(255, 255, 255, 0.8);
}

.hofbook-book-badge.office {
    border-color:
        rgba(73, 105, 137, 0.2);

    background:
        rgba(235, 242, 248, 0.78);

    color: #496882;
}

.hofbook-book-badge.vacation {
    border-color:
        rgba(63, 123, 93, 0.18);

    background:
        rgba(235, 246, 239, 0.82);

    color: #3c7558;
}

.hofbook-book-badge.sick,
.hofbook-book-badge.absence {
    border-color:
        rgba(169, 73, 73, 0.16);

    background:
        rgba(255, 239, 239, 0.82);

    color: #9a4949;
}

.hofbook-book-badge.event,
.hofbook-book-badge.manual {
    border-color:
        rgba(102, 83, 154, 0.17);

    background:
        rgba(242, 239, 250, 0.82);

    color: #665495;
}

.hofbook-book-badge.birthday {
    border-color:
        rgba(163, 123, 30, 0.18);

    background:
        rgba(255, 247, 218, 0.86);

    color: #8a671d;
}

.hofbook-book-badge.waste {
    border-color:
        rgba(95, 106, 118, 0.16);

    background:
        rgba(237, 240, 243, 0.82);

    color: #5f6872;
}

.hofbook-book-badge-delete {
    width: 17px;
    height: 17px;
    min-height: 17px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 5px;

    background:
        rgba(255, 255, 255, 0.5);

    color: inherit;

    line-height: 1;
}


/* ---------------------------------------------------------
   Eintragszeilen
   --------------------------------------------------------- */

.hofbook-book-lines {
    flex: 1 1 auto;
    min-height: 0;

    display: block;

    background:
        repeating-linear-gradient(to bottom,
            transparent 0,
            transparent 31px,
            rgba(104, 128, 149, 0.2) 31px,
            rgba(104, 128, 149, 0.2) 32px);
}

.hofbook-book-page.hofbook-page-sunday .hofbook-book-lines,
.hofbook-book-page.hofbook-page-closed .hofbook-book-lines {
    background:
        repeating-linear-gradient(to bottom,
            transparent 0,
            transparent 31px,
            rgba(102, 109, 117, 0.22) 31px,
            rgba(102, 109, 117, 0.22) 32px);
}

.hofbook-book-line,
.hofbook-book-empty-text,
.hofbook-book-empty-slot {
    height: 32px;
    min-height: 32px;

    border: 0;
}

.hofbook-book-line {
    position: relative;

    display: grid;
    grid-template-columns:
        23px minmax(0, 1fr);

    align-items: center;
    gap: 9px;

    padding: 0 4px;
}

.hofbook-book-line.hint {
    margin: 0;
    padding: 0 4px;

    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;

    background: transparent;
}

.hofbook-book-line.hint .hofbook-book-check {
    border-color:
        rgba(165, 126, 35, 0.5);
}

.hofbook-book-line.done {
    opacity: 0.58;
}

.hofbook-book-line.done strong {
    text-decoration: line-through;
    text-decoration-thickness: 1px;

    text-decoration-color:
        rgba(51, 55, 60, 0.62);
}

.hofbook-book-check {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid rgba(92, 105, 117, 0.58);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.42);

    color: #32775b;

    font-size: 0.68rem;
    line-height: 1;
}

.hofbook-book-check:hover {
    border-color: #53616f;

    background:
        rgba(255, 255, 255, 0.76);
}

.hofbook-book-entry-text {
    min-width: 0;

    display: flex;
    align-items: baseline;
    gap: 7px;

    padding-right: 4px;

    cursor: pointer;
}

.hofbook-book-entry-text>span {
    display: none;
}

.hofbook-book-entry-text strong {
    min-width: 0;

    overflow-wrap: anywhere;

    color: #323334;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Segoe UI",
        sans-serif;

    font-size: 0.82rem;
    line-height: 1.3;
    font-weight: 500;
}

.hofbook-book-line.hint .hofbook-book-entry-text::before {
    content: "Hinweis ·";

    flex: 0 0 auto;

    color: #98721d;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.57rem;
    font-weight: 850;

    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.hofbook-book-line-actions {
    position: absolute;
    right: 3px;
    top: 50%;

    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;

    padding-left: 28px;

    opacity: 0;
    pointer-events: none;

    transform: translateY(-50%);

    background:
        linear-gradient(90deg,
            transparent,
            rgba(251, 248, 239, 0.94) 28%);

    transition: opacity 140ms ease;
}

.hofbook-book-line:hover .hofbook-book-line-actions,
.hofbook-book-line:focus-within .hofbook-book-line-actions {
    opacity: 1;
    pointer-events: auto;
}

.hofbook-book-line-actions button {
    min-height: 25px;

    padding: 4px 7px;

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.82);

    font-size: 0.58rem;
    line-height: 1;
}

.hofbook-line-delete {
    width: 25px;
    min-width: 25px;

    padding: 0;

    border-color:
        rgba(183, 70, 70, 0.17);

    background:
        rgba(255, 239, 239, 0.9);

    color: #a74343;
}

.hofbook-book-empty-text {
    display: flex;
    align-items: center;

    padding-left: 32px;

    color: #91979f;

    font-size: 0.68rem;
    font-style: italic;
}

.hofbook-book-empty-slot {
    border: 0;
    outline: 0;
    box-shadow: none;

    background: transparent;

    cursor: text;
}

.hofbook-book-empty-slot:hover {
    border: 0;
    outline: 0;
    box-shadow: none;

    background: transparent;
}

.hofbook-book-empty-slot.editing {
    background: transparent;
}

.hofbook-inline-entry {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 40px 40px;
    align-items: center;
    gap: 8px;

    height: 32px;
    padding: 0 2px;
}

.hofbook-inline-type,
.hofbook-inline-text {
    height: 32px;
    min-height: 32px;

    border: 1px solid rgba(134, 144, 155, 0.28);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.88);
    color: #2b2f35;

    box-shadow: none;
}

.hofbook-inline-type {
    padding: 0 12px;

    font-size: 0.74rem;
    font-weight: 650;
}

.hofbook-inline-text {
    width: 100%;
    min-width: 0;

    padding: 0 14px;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        "Segoe UI",
        sans-serif;

    font-size: 0.8rem;
    line-height: 1.2;
}

.hofbook-inline-text::placeholder {
    color: #8f959d;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 0.74rem;
    font-style: normal;
}

.hofbook-inline-type:focus,
.hofbook-inline-text:focus {
    outline: none;

    border-color: rgba(227, 16, 16, 0.42);

    box-shadow:
        0 0 0 3px rgba(227, 16, 16, 0.08);

    background: #ffffff;
}

.hofbook-inline-save,
.hofbook-inline-cancel {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;

    display: grid;
    place-items: center;

    padding: 0;

    border-radius: 10px;

    font-size: 0.95rem;
    line-height: 1;
}

.hofbook-inline-save {
    border-color: rgba(47, 117, 83, 0.18);
    background: rgba(232, 245, 237, 0.96);
    color: #2f7553;
}

.hofbook-inline-save:hover {
    border-color: rgba(47, 117, 83, 0.3);
    background: rgba(219, 241, 227, 1);
}

.hofbook-inline-cancel {
    border-color: rgba(148, 156, 166, 0.2);
    background: rgba(245, 246, 248, 0.96);
    color: #535b65;
}

.hofbook-inline-cancel:hover {
    border-color: rgba(148, 156, 166, 0.34);
    background: rgba(236, 239, 242, 1);
}

@media (max-width: 900px) {
    .hofbook-inline-entry {
        grid-template-columns: 1fr 36px 36px;
        gap: 6px;

        height: auto;
        min-height: 68px;
        padding: 4px 0;
    }

    .hofbook-inline-type {
        grid-column: 1 / -1;
    }

    .hofbook-inline-text {
        grid-column: 1 / 2;
    }
}

/* ---------------------------------------------------------
   Post-its
   --------------------------------------------------------- */

.hofbook-postit {
    position: absolute;
    z-index: 20;

    width: 190px;
    min-height: 155px;

    padding: 11px 12px 10px;

    border: 1px solid rgba(171, 137, 27, 0.28);
    border-radius: 4px;

    background:
        linear-gradient(145deg,
            #fff7a9 0%,
            #ffe979 100%);

    color: #423a1f;

    box-shadow:
        0 12px 24px rgba(43, 35, 9, 0.18);

    transform: rotate(-1deg);

    touch-action: none;
}

.hofbook-postit-grip {
    margin-bottom: 6px;

    color: rgba(67, 56, 20, 0.45);

    text-align: center;
    line-height: 1;
    letter-spacing: 0.12em;

    cursor: grab;
}

.hofbook-postit.dragging {
    z-index: 40;

    cursor: grabbing;
    transform: rotate(0deg) scale(1.02);
}

.hofbook-postit-text {
    min-height: 82px;

    font-size: 0.78rem;
    line-height: 1.4;
    font-weight: 650;
}

.hofbook-postit-draft-input {
    width: 100%;
    min-height: 90px;

    padding: 7px;

    border: 1px solid rgba(111, 91, 21, 0.28);
    border-radius: 4px;

    background: rgba(255, 255, 255, 0.4);
    color: #423a1f;
}

.hofbook-postit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;

    margin-top: 7px;
}

.hofbook-postit-actions button {
    width: 27px;
    height: 27px;
    min-height: 27px;

    padding: 0;

    border-color: rgba(95, 75, 16, 0.2);
    border-radius: 6px;

    background: rgba(255, 255, 255, 0.45);
    color: #4d411c;
}


/* ---------------------------------------------------------
   Suchbereich
   --------------------------------------------------------- */

.hofbook-search-panel {
    display: grid;
    gap: 12px;
}

.hofbook-search-grid {
    display: grid;
    grid-template-columns:
        minmax(280px, 1fr) 150px 150px 150px auto;

    align-items: end;
    gap: 9px;
}

.hofbook-search-grid label {
    display: grid;
    gap: 5px;
}

.hofbook-search-grid label span {
    color: var(--muted);

    font-size: 0.7rem;
    font-weight: 750;
}

.hofbook-search-summary {
    color: var(--muted);

    font-size: 0.76rem;
    font-weight: 700;
}

.hofbook-search-results {
    max-height: 360px;

    display: grid;
    gap: 7px;

    overflow-y: auto;
}

.hofbook-search-result {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 10px 12px;

    border: 1px solid var(--border);
    border-radius: var(--radius-medium);

    background: var(--surface-soft);
    color: var(--text);

    text-align: left;
}

.hofbook-search-result div {
    min-width: 0;

    display: grid;
    gap: 3px;
}

.hofbook-search-result strong {
    overflow-wrap: anywhere;
    color: var(--heading);
}

.hofbook-search-result small {
    color: var(--muted);
}

.hofbook-search-result>span {
    flex: 0 0 auto;

    color: var(--brand);
    font-weight: 800;
}


/* ---------------------------------------------------------
   Responsive Hofbuch-Ansicht
   --------------------------------------------------------- */

@media (max-width: 1150px) {
    .hofbook-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "navigation"
            "date"
            "notice";
    }

    .hofbook-day-title {
        justify-content: flex-start;
    }

    .hofbook-book-stage {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        gap: 8px;
    }

    .hofbook-side-nav {
        width: 36px;
    }

        .hofbook-book-page {
            padding: 24px 22px 30px;
        }
    
        .hofbook-book-page.left {
            padding-right: 28px;
        }
    
        .hofbook-book-page.right {
            padding-left: 28px;
        }
    
        .hofbook-book-page-head {
            grid-template-columns: 1fr;
    
            align-items: start;
            gap: 12px;
        }
    
        .hofbook-book-badge-row {
            justify-content: flex-start;
        }
    
        .hofbook-book-line-actions {
            right: 0;
    
            padding-bottom: 0;
        }

    .hofbook-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hofbook-search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .hofbook-hero {
        padding: 14px;
    }

    .hofbook-nav {
        align-items: stretch;
    }

    .hofbook-date-jump {
        width: 100%;
    }

    .hofbook-date-jump input {
        flex: 1;
    }

        .hofbook-hero {
            overflow-x: auto;
            overflow-y: visible;
    
            scrollbar-width: thin;
        }
    
        .hofbook-nav,
        .hofbook-quick-dashboard,
        .hofbook-toolbar-actions {
            flex: 0 0 auto;
        }
    
        .hofbook-quick-card {
            flex: 0 0 auto;
        }

    .hofbook-paper {
        padding: 12px;
        overflow-x: auto;
    }

    .hofbook-book-stage {
        min-width: 920px;
    }

    .hofbook-search-grid {
        grid-template-columns: 1fr;
    }

    .hofbook-search-field {
        grid-column: auto;
    }
}


/* =========================================================
   9. MOBILE ANSICHT
   ========================================================= */

@media (hover: hover) and (min-width: 761px) {
    .sidebar-menu-group:hover>.sidebar-submenu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }
}

@media (max-width: 760px) {
    :root {
        --appbar-height: 66px;
    }

    .regu-appbar {
        padding: 0 12px;
    }

    .app-menu-toggle {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .regu-appbar-logo {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .regu-appbar-logo img {
        width: 36px;
        height: 36px;
    }

    .regu-appbar-copy span,
    .version-badge {
        display: none;
    }

    .regu-appbar-copy strong {
        max-width: 130px;
        font-size: 0.84rem;
    }

    .regu-appbar-back {
        padding: 7px 9px;
        font-size: 0.69rem;
    }

    .content-shell {
        padding:
            calc(var(--appbar-height) + 14px) 12px 24px;
    }

    .sidebar {
        width: min(330px, 90vw);
        max-width: 90vw;

        padding: 14px;

        overflow-x: hidden;
        overflow-y: auto;
    }

    .sidebar-quick-grid {
        grid-template-columns: 1fr;
    }

    .sidebar-quick-tab {
        min-height: 70px;
    }

    .sidebar-menu-group {
        position: static;
    }

    .sidebar-submenu {
        position: static;

        width: 100%;

        display: none;

        margin-top: 6px;
        padding: 8px 0 4px 12px;

        border-left:
            1px solid rgba(255, 255, 255, 0.12);

        background: transparent;
        box-shadow: none;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .sidebar-menu-group.open>.sidebar-submenu {
        display: flex;
    }

    .sidebar-submenu-head {
        display: none;
    }


    .work-start-card {
        padding: 24px 18px;
    }

    .work-start-actions {
        grid-template-columns: 1fr;
    }

    .work-start-action {
        min-height: 100px;
    }

    .panel-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   DETAIL-SLIDEOUT
   ========================================================= */

.detail-drawer {
    position: fixed;
    inset: 0;
    z-index: 4500;

    pointer-events: none;
}


/* ---------------------------------------------------------
   Hintergrund
   --------------------------------------------------------- */

.detail-drawer-backdrop {
    position: absolute;

    top: var(--appbar-height);
    right: 0;
    bottom: 0;
    left: 0;

    background:
        rgba(17, 21, 27, 0.36);

    opacity: 0;

    backdrop-filter: blur(2px);

    transition:
        opacity 180ms ease;
}


/* ---------------------------------------------------------
   Seitenbereich
   --------------------------------------------------------- */

.detail-drawer-panel {
    position: absolute;

    top: var(--appbar-height);
    right: 0;
    bottom: 0;

    width:
        min(440px,
            calc(100vw - 18px));

    display: flex;
    flex-direction: column;

    padding: 16px;

    overflow-x: hidden;
    overflow-y: auto;

    border-left:
        1px solid var(--border);

    background:
        linear-gradient(160deg,
            #ffffff 0%,
            #f8f9fa 100%);

    box-shadow:
        -20px 0 50px rgba(13, 18, 25, 0.18);

    transform:
        translateX(100%);

    transition:
        transform 180ms ease;

    overscroll-behavior: contain;
}


/* ---------------------------------------------------------
   Geöffneter Zustand
   --------------------------------------------------------- */

.detail-drawer.open {
    pointer-events: auto;
}

.detail-drawer.open .detail-drawer-backdrop {
    opacity: 1;
}

.detail-drawer.open .detail-drawer-panel {
    transform:
        translateX(0);
}


/* ---------------------------------------------------------
   Schließen
   --------------------------------------------------------- */

.detail-drawer-close {
    min-height: 34px;

    align-self: flex-end;

    margin-bottom: 10px;
    padding: 6px 9px;

    border-radius: 8px;

    font-size: 0.58rem;
}


/* ---------------------------------------------------------
   Inhalt
   --------------------------------------------------------- */

#detailDrawerContent {
    min-width: 0;

    display: grid;
    gap: 14px;

    padding-bottom: 18px;
}

.drawer-section {
    min-width: 0;

    display: grid;
    gap: 11px;
}

.drawer-eyebrow {
    color: var(--brand);

    font-size: 0.55rem;
    line-height: 1;
    font-weight: 850;

    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.drawer-section h3 {
    margin: 0;

    color: var(--heading);

    font-size: 1.05rem;
    line-height: 1.25;
}

.drawer-section>p {
    margin: -3px 0 2px;

    color: var(--muted);

    font-size: 0.63rem;
    line-height: 1.45;
}

.drawer-section h4 {
    margin: 5px 0 -3px;

    color: var(--heading);

    font-size: 0.66rem;
    line-height: 1.2;
    font-weight: 850;
}


/* ---------------------------------------------------------
   Listen
   --------------------------------------------------------- */

.drawer-list {
    display: grid;
    gap: 6px;
}

.drawer-list-item {
    min-width: 0;

    display: grid;
    gap: 3px;

    padding: 10px 11px;

    border:
        1px solid var(--border);

    border-radius: 9px;

    background: #ffffff;
}

.drawer-list-item strong {
    overflow: hidden;

    color: var(--heading);

    font-size: 0.65rem;
    line-height: 1.25;
    font-weight: 820;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-list-item span {
    color: var(--muted);

    font-size: 0.56rem;
    line-height: 1.35;
}

.drawer-list-item small {
    color: var(--brand-dark);

    font-size: 0.52rem;
    font-weight: 800;
}

.drawer-list-item.holiday {
    border-color:
        rgba(181, 67, 67, 0.18);

    background: #fff3f3;
}

.drawer-list-item.sunday {
    border-color:
        rgba(138, 104, 29, 0.17);

    background: #fff9e8;
}


/* ---------------------------------------------------------
   Aktionen
   --------------------------------------------------------- */

.hofbook-quick-drawer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;

    padding-top: 5px;
}

.hofbook-quick-drawer-actions button,
.drawer-section>button {
    min-height: 34px;

    padding: 6px 9px;

    border-radius: 8px;

    font-size: 0.58rem;
}


/* ---------------------------------------------------------
   Kleine Fenster
   --------------------------------------------------------- */

@media (max-width: 600px) {
    .detail-drawer-panel {
        width: 100%;

        border-left: 0;
    }

    .hofbook-quick-drawer-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hofbook-quick-drawer-actions button,
    .drawer-section>button {
        width: 100%;
    }
}

/* =========================================================
   10. HILFSKLASSEN
   Dieser Abschnitt bleibt am Dateiende.
   ========================================================= */

.hidden,
#app.hidden,
.app-boot-loader.hidden,
.login-screen.hidden,
.work-start-screen.hidden {
    display: none;
}