/*
 * AVS Backend UI v4
 *
 * Eigenständiger Ersatz für backendv31.css. Die Datei wird nicht zusammen mit
 * backendv31.css geladen. Bestehende DOM- und JavaScript-Verträge bleiben
 * erhalten; wiederkehrende Werte werden über die folgenden Tokens gesteuert.
 */

:root {
    /* Neutral (Hintergrund, Karten, Linien) */
    --color-bg: rgba(240, 240, 240, 1); /* hellgrau */
    --color-bg-shading: rgba(240, 240, 240, 0.35); /* transparentes hellgrau */
    --color-surface: #ffffff; /* reines Weiß */
    --color-border: #ddd; /* leichtes Grau für Linien */
    --color-table-header-bg: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));

    /* Text */
    --color-text: #374151; /* dunkles Grau für Fließtext */
    --color-heading: #111827; /* fast Schwarz für Überschriften */
    --color-muted: #6b7280; /* mittelgrau für Hilfstext/Placeholders */
    --color-on-accent: #ffffff; /* Text auf gefüllten Aktions-/Statusflächen */
    --color-event-text: #111827; /* fachliche Kalenderereignisse bleiben dunkel lesbar */
    --color-tooltip-bg: var(--color-surface);
    --color-tooltip-border: var(--color-border);
    --color-tooltip-text: var(--color-text);

    /* Primär-Aktionen (Buttons, Links) */
    --color-primary: #3b82f6; /* sanftes Blau */
    --color-primary-hover: #2563eb; /* etwas dunkler beim Hover */

    /* Sekundär-Aktionen */
    --color-secondary: #10b981; /* dezentes Grün */
    --color-secondary-hover: #059669; /* dunkler beim Hover */

    /* Statusfarben */
    --color-success: #10b981; /* Erfolg (grün) */
    --color-warning: #f59e0b; /* Warnung (amber) */
    --color-error: #ef4444; /* Fehler (rot) */
    --color-info: #0ea5e9; /* Info (hellblau) */
    --color-accent-muted: #487888;
    --color-ok-text: #228319;

    /* Abstände und Größen */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --control-height: 2rem;
    --control-radius: 0.305rem;
    --panel-radius: 0.5rem;

    /* Verbindliche Typografiestufen */
    --font-size-standard: 0.9375rem;
    --font-size-heading: calc(var(--font-size-standard) + 0.125rem);
    --font-size-sub: 0.8125rem;

    /* Tiefe und Fokus */
    --shadow-panel: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-floating: 0 0 5px #aaa;
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.3);

    --font-ui: "Roboto", sans-serif;
}

/* Verwaltung > Account > Mandanteneinstellungen */
#form_mandanteinstellungen.mandant-settings {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-4);
}

.mandant-settings__section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    min-width: 0;
    overflow: hidden;
}

.mandant-settings__section-heading {
    align-items: center;
    background: var(--color-table-header-bg);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-heading);
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}

.mandant-settings__section-heading .fa-solid {
    color: var(--color-primary);
    flex: 0 0 auto;
    font-size: var(--font-size-standard);
    text-align: center;
    width: 1.25rem;
}

.mandant-settings__section-heading h3 {
    font-size: var(--font-size-standard);
    line-height: 1.3;
    margin: 0;
}

.mandant-settings__grid {
    display: grid;
    gap: var(--space-3) var(--space-4);
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
}

.mandant-settings__field {
    align-content: start;
    display: grid;
    min-width: 0;
}

.mandant-settings__label {
    color: var(--color-text);
    font-size: var(--font-size-sub);
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: var(--space-1);
}

.mandant-settings__control,
.mandant-settings__control > input,
.mandant-settings__control > select,
.mandant-settings__control > textarea {
    min-width: 0;
    width: 100%;
}

.mandant-settings__control > input,
.mandant-settings__control > select,
.mandant-settings__control > textarea {
    margin: 0;
}

.mandant-settings__help {
    background: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    color: var(--color-muted);
    font-size: var(--font-size-sub);
    margin-top: var(--space-2);
    padding: var(--space-3);
}

.mandant-settings__help ul {
    margin: var(--space-1) 0 var(--space-2) 1.25rem;
}

.mandant-settings__help p {
    margin: 0;
}

.mandant-settings__actions {
    display: flex;
    justify-content: flex-end;
}

.mandant-settings__actions .button {
    margin: 0;
}

@media only screen and (min-width: 40em) {
    .mandant-settings__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mandant-settings__field--wide {
        grid-column: 1 / -1;
    }
}

@media only screen and (max-width: 39.9375em) {
    #form_mandanteinstellungen.mandant-settings {
        padding: var(--space-3);
    }

    .mandant-settings__grid {
        padding: var(--space-3);
    }

    .mandant-settings__actions .button {
        width: 100%;
    }
}

/* Log v2 */
.logv2-page {
    padding: var(--space-4);
}

.logv2-header,
.logv2-table-header {
    align-items: flex-start;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
}

.logv2-header {
    margin-bottom: var(--space-4);
}

.logv2-header h1,
.logv2-header p,
.logv2-table-header h2,
.logv2-table-header p {
    margin-bottom: 0;
}

.logv2-status {
    min-height: 1.5rem;
}

.logv2-status.is-error {
    color: var(--color-error);
}

.logv2-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
    min-width: 0;
    padding: var(--space-4);
}

.logv2-filter {
    align-items: center;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: auto minmax(18rem, 1.4fr) auto minmax(15rem, 1fr) auto minmax(15rem, 1fr) auto;
    margin-bottom: var(--space-4);
}

.logv2-content .logv2-filter > label {
    font-size: var(--font-size-sub);
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

.logv2-content .logv2-filter > select,
.logv2-content .logv2-filter > input,
.logv2-content .logv2-filter > .logv2-find-button {
    box-sizing: border-box;
    height: var(--control-height);
    margin: 0;
}

.logv2-content .logv2-filter > select,
.logv2-content .logv2-filter > input {
    width: 100%;
}

.logv2-find-button {
    align-self: center;
    margin: 0;
    white-space: nowrap;
}

.logv2-table-header {
    margin-bottom: var(--space-3);
}

.logv2-table-wrap {
    overflow-x: auto;
}

.logv2-actions {
    white-space: nowrap;
}

.logv2-actions .button {
    margin: 0 var(--space-1) var(--space-1) 0;
    padding: var(--space-1) var(--space-2);
}

.logv2-preview-status {
    color: var(--color-muted);
    margin-bottom: var(--space-2);
}

.logv2-preview-content {
    max-height: calc(100vh - 14rem);
    overflow: auto;
}

.logv2-preview-content pre {
    background: var(--color-bg-shading);
    border-radius: var(--control-radius);
    margin: 0;
    padding: var(--space-3);
    white-space: pre-wrap;
    word-break: break-word;
}

@media only screen and (max-width: 63.9375em) {
    .logv2-filter {
        grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .logv2-find-button {
        grid-column: 4;
    }
}

@media only screen and (max-width: 39.9375em) {
    .logv2-page,
    .logv2-content {
        padding: var(--space-3);
    }

    .logv2-header {
        display: block;
    }

    .logv2-filter {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .logv2-find-button {
        grid-column: 2;
        width: 100%;
    }
}

/* Fahrzeugverwaltung V2 */
body[filename="verwaltung-fahrzeugev2.php"] {
    overflow-x: hidden;
}

.vehicle-editor-v2 {
    margin: 0 auto;
    max-width: 96rem;
    padding: var(--space-4);
}

.vehicle-editor-v2__header,
.vehicle-editor-v2__section-heading {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

.vehicle-editor-v2__header {
    margin-bottom: var(--space-4);
}

.vehicle-editor-v2__eyebrow {
    color: var(--color-primary);
    font-size: var(--font-size-sub);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-1);
    text-transform: uppercase;
}

.vehicle-editor-v2__header h1,
.vehicle-editor-v2__section-heading h2 {
    margin: 0;
}

.vehicle-editor-v2__intro,
.vehicle-editor-v2__section-heading p {
    color: var(--color-muted);
    margin: var(--space-1) 0 0;
}

.vehicle-editor-v2__header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

.vehicle-editor-v2__header-actions .button {
    margin: 0;
}

.vehicle-editor-v2__mode {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    border-radius: 999px;
    color: var(--color-primary);
    font-size: var(--font-size-sub);
    font-weight: 700;
    padding: var(--space-2) var(--space-3);
}

.vehicle-editor-v2__summary {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 var(--space-4);
}

.vehicle-editor-v2__summary > div {
    background: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    min-width: 0;
    padding: var(--space-3);
}

.vehicle-editor-v2__summary dt {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
}

.vehicle-editor-v2__summary dd {
    font-weight: 700;
    margin: var(--space-1) 0 0;
    overflow-wrap: anywhere;
}

.vehicle-editor-v2__message {
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
}

.vehicle-editor-v2__message.success {
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
    border-color: var(--color-success);
}

.vehicle-editor-v2__message.alert {
    background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
    border-color: var(--color-error);
}

.vehicle-editor-v2__message.warning {
    background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
    border-color: var(--color-warning);
}

.vehicle-editor-v2__tabs > .ui-tabs-nav {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.vehicle-editor-v2__tabs > .ui-tabs-nav > li {
    float: none;
    display: inline-block;
}

.vehicle-editor-v2__panel {
    min-width: 0;
}

.vehicle-editor-v2__view-switch {
    margin-bottom: var(--space-3);
}

.vehicle-editor-v2__view-switch label {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
    margin: 0;
}

.vehicle-editor-v2__sections {
    display: grid;
    gap: var(--space-4);
}

.vehicle-editor-v2__section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
    min-width: 0;
    padding: var(--space-4);
}

.vehicle-editor-v2__section-heading {
    justify-content: flex-start;
    margin-bottom: var(--space-4);
}

.vehicle-editor-v2__section-icon {
    align-items: center;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    border-radius: var(--control-radius);
    color: var(--color-primary);
    display: inline-flex;
    flex: 0 0 var(--control-height);
    height: var(--control-height);
    justify-content: center;
}

.vehicle-editor-v2__section-heading h2 {
    font-size: var(--font-size-heading);
}

.vehicle-editor-v2__field-grid,
.vehicle-editor-v2__equipment-grid,
.vehicle-editor-v2__dialog-grid {
    display: grid;
    gap: var(--space-3) var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vehicle-editor-v2__field,
.vehicle-editor-v2__dialog-grid > div {
    min-width: 0;
}

.vehicle-editor-v2__field--wide,
.vehicle-editor-v2__dialog-wide {
    grid-column: 1 / -1;
}

.vehicle-editor-v2__field > label,
.vehicle-editor-v2__dialog-grid label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.vehicle-editor-v2__control,
.vehicle-editor-v2__control > table,
.vehicle-editor-v2__control > .row,
.vehicle-editor-v2__control input,
.vehicle-editor-v2__control select,
.vehicle-editor-v2__control textarea,
.vehicle-editor-v2__dialog-grid input,
.vehicle-editor-v2__dialog-grid select,
.vehicle-editor-v2__dialog-grid textarea {
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.vehicle-editor-v2__control > table td,
.vehicle-editor-v2__control > .row > .column {
    min-width: 0;
}

.vehicle-editor-v2__field small {
    color: var(--color-muted);
    display: block;
    margin-top: var(--space-1);
}

.vehicle-editor-v2__extra-fields {
    margin-top: var(--space-4);
}

.vehicle-editor-v2__equipment-item {
    background: var(--color-bg-shading);
    border-radius: var(--control-radius);
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
}

.vehicle-editor-v2__equipment-item label {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    margin: 0;
}

.vehicle-editor-v2__equipment-item input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
    width: auto;
}

.vehicle-editor-v2__damage-frame,
.vehicle-editor-v2__dms-frame {
    border: 0;
    display: block;
    width: 100%;
}

.vehicle-editor-v2__damage-frame {
    min-height: 32rem;
}

.vehicle-editor-v2__dms-frame {
    min-height: 42rem;
}

.vehicle-editor-v2__actions {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    bottom: var(--space-3);
    box-shadow: var(--shadow-panel);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    margin-top: var(--space-4);
    padding: var(--space-3);
    position: sticky;
    z-index: 100;
}

.vehicle-editor-v2__actions .button {
    margin: 0;
}

.vehicle-editor-v2__toolbar {
    align-items: end;
    background: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
}

.vehicle-editor-v2__toolbar--end {
    justify-content: flex-end;
}

.vehicle-editor-v2__toolbar-field {
    flex: 1 1 12rem;
}

.vehicle-editor-v2__toolbar-field label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.vehicle-editor-v2__toolbar-field input {
    margin-bottom: 0;
}

.vehicle-editor-v2__toolbar .button {
    margin: 0;
}

.vehicle-editor-v2__loading,
.vehicle-editor-v2__empty {
    color: var(--color-muted);
    padding: calc(var(--space-4) * 1.5);
    text-align: center;
}

.vehicle-editor-v2__table-wrap {
    overflow-x: auto;
}

.vehicle-editor-v2__data-table {
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    margin: 0;
    width: 100%;
}

.vehicle-editor-v2__data-table th,
.vehicle-editor-v2__data-table td {
    vertical-align: top;
}

.vehicle-editor-v2__data-table tr.is-warning td {
    background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
}

.vehicle-editor-v2__row-actions {
    text-align: right;
    white-space: nowrap;
}

.vehicle-editor-v2__row-actions .icon-button {
    margin-left: var(--space-1);
}

.vehicle-editor-v2__discrepancy,
.vehicle-editor-v2__collision {
    color: var(--color-warning);
    font-size: var(--font-size-sub);
    font-weight: 700;
    margin-top: var(--space-1);
}

.vehicle-v2-meter-input {
    min-width: 6rem;
    width: 7rem;
}

.vehicle-editor-v2__summary-cards {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: var(--space-4);
}

.vehicle-editor-v2__summary-cards > div {
    background: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    padding: var(--space-3);
}

.vehicle-editor-v2__summary-cards span,
.vehicle-editor-v2__summary-cards small {
    display: block;
}

.vehicle-editor-v2__summary-cards span {
    font-size: var(--font-size-heading);
    font-weight: 700;
}

.vehicle-editor-v2__summary-cards small {
    color: var(--color-muted);
}

.vehicle-editor-v2__summary-cards .is-warning {
    border-color: var(--color-warning);
}

.vehicle-editor-v2__export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.vehicle-editor-v2__export-actions .button {
    margin: 0;
}

@media only screen and (max-width: 63.9375em) {
    .vehicle-editor-v2__summary,
    .vehicle-editor-v2__summary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 39.9375em) {
    .vehicle-editor-v2 {
        padding: var(--space-3);
    }

    .vehicle-editor-v2__header {
        display: block;
    }

    .vehicle-editor-v2__header-actions {
        justify-content: flex-start;
        margin-top: var(--space-3);
    }

    .vehicle-editor-v2__summary,
    .vehicle-editor-v2__summary-cards,
    .vehicle-editor-v2__field-grid,
    .vehicle-editor-v2__equipment-grid,
    .vehicle-editor-v2__dialog-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .vehicle-editor-v2__field--wide,
    .vehicle-editor-v2__dialog-wide {
        grid-column: auto;
    }

    .vehicle-editor-v2__section {
        padding: var(--space-3);
    }

    .vehicle-editor-v2__actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .vehicle-editor-v2__actions .button,
    .vehicle-editor-v2__toolbar .button {
        width: 100%;
    }

    .vehicle-editor-v2__toolbar {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .vehicle-editor-v2__table-wrap {
        overflow: visible;
    }

    .vehicle-editor-v2__data-table,
    .vehicle-editor-v2__data-table tbody,
    .vehicle-editor-v2__data-table tr,
    .vehicle-editor-v2__data-table td {
        display: block;
        width: 100%;
    }

    .vehicle-editor-v2__data-table thead {
        display: none;
    }

    .vehicle-editor-v2__data-table tr {
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-2);
    }

    .vehicle-editor-v2__data-table td {
        border: 0;
        padding: var(--space-2);
    }

    .vehicle-editor-v2__data-table td::before {
        color: var(--color-muted);
        content: attr(data-label);
        display: block;
        font-size: var(--font-size-sub);
        font-weight: 700;
        margin-bottom: var(--space-1);
    }

    .vehicle-editor-v2__row-actions {
        text-align: left;
    }
}

:root[data-backend-theme="night"] {
    color-scheme: dark;

    --color-bg: #111827;
    --color-bg-shading: rgba(255, 255, 255, 0.08);
    --color-surface: #1f2937;
    --color-border: #4b5563;
    --color-text: #e5e7eb;
    --color-heading: var(--color-text);
    --color-muted: #9ca3af;
    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-tooltip-bg: #000000;
    --color-tooltip-border: #000000;
    --color-tooltip-text: #ffffff;
    --shadow-panel: 0 2px 5px rgba(0, 0, 0, 0.35);
    --shadow-floating: 0 0 5px rgba(0, 0, 0, 0.6);
    --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.35);
}

@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans/OpenSans-Regular.ttf");
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto/Roboto-Regular.ttf");
}

@font-face {
    font-family: "Monaco";
    font-style: normal;
    font-weight: normal;
    src:
            local("Monaco"),
            url("fonts/Monaco/Monaco.woff") format("woff");
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
span,
div:not(.ace_editor):not(.ace_editor *),
select,
input,
button,
textarea,
a,
.ui-widget input {
    font-family: var(--font-ui), sans-serif;
}

.ace_editor *,
.json-viewer * {
    color: inherit;
    font-family: "Monaco", monospace;
    font-size: var(--font-size-standard);
}

a, .ui-widget-content.ui-dialog-content a {
    color: var(--color-primary);
    text-decoration: none;
}
.ui-state-active a, .ui-state-active a:link {
     color: var(--color-on-accent);
 }

.ace_editor {
    font-family:
            "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
}

body.frame {
    background-color: transparent;
}

html {
    -webkit-overflow-scrolling: touch;
}

div.content-row {
    font-size: var(--font-size-standard);
    margin-bottom: 9px;
    margin-top: 5px;
}

div.row#table_freipos_bezeichnung div.column {
    padding: 0;
    padding-left: 1rem;
}

div.row#table_freipos_bezeichnung div.column:first-child {
    padding: 0;
}

div.round label.switch-paddle {
    border-radius: 6px;
}

label {
    align-items: center;
    display: flex;
    font-size: var(--font-size-standard);
}

label .switch {
    display: inline;
    margin-bottom: auto;
    margin-right: 5px;
    margin-top: auto;
}

div.content-row.row {
    max-width: 1330px;
    width: 98%;
}

@media only screen and (max-width: 1300px) {
    .fc-button-group .fc-resourceTimeline12Months-button,
    .fc-button-group .fc-resourceTimelineSixMonths-button,
    .fc-button-group .fc-resourceTimelineThreeMonths-button {
        display: none !important;
    }
    .fc-toolbar button,
    .fc-toolbar input {
        font-size: var(--font-size-standard) !important;
        margin-right: var(--space-1) !important;
        padding: var(--space-2) var(--space-3) !important;
    }
    #jstree_baum_tarif span.tarif_bezeichnung {
        font-size: var(--font-size-sub);
    }
}

#artikelpreis_abweichend td.einheit {
    width: 20%;
}

.jstree-anchor {
    /*ensure lower nodes move down*/
    height: auto !important;
    /*offset icon width*/
    padding-right: 24px;
    /*enable wrapping*/
    white-space: normal !important;
}

#jstree_baum_tarif .jstree-themeicon.fa-solid,
#jstree_fahrzeug .jstree-themeicon.fa-solid,
#jstree_fzg .jstree-themeicon.fa-solid,
#einrichtung_tree .jstree-themeicon.fa-solid {
    background: none !important;
    color: var(--color-text);
    font-size: 1em !important;
    line-height: 1.5rem;
    text-align: center;
}

.management-tree-icon-online {
    color: var(--color-primary) !important;
}

.management-tree-icon-inactive {
    color: var(--color-muted) !important;
}

div#contentbereich[filename="belegungsplan.php"],
div#contentbereich[filename="verwaltung-formularev2.php"] {
    max-width: 98%;
}

table tbody th,
table tbody td {
    padding: 3px;
}

.small_form {
    max-width: 500px;
}

.menucontainer {
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-panel);
    position: relative;
}

.menu {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.menu > li.suche {
    padding-left: 10px;
    padding-right: 10px;
}

.menu > li.suche input {
    min-width: 180px;
}

.menu.horizontal > li,
.menu > li {
    display: inline-flex;
}

.menubottom-before {
    height: 60px;
}

.menubottom {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    bottom: 0;
    margin-bottom: 0;
    padding-bottom: 15px;
    padding-top: 7px;
    position: fixed;
    width: 100%;
}

.menubottom.regular {
    padding-bottom: 0;
}

.menubottom.regular ul {
    margin-left: auto;
    margin-right: auto;
    max-width: 1330px;
    text-align: right;
}
body.frame .menubottom {
    position: unset;
}

body[filename="belegungsplan.php"] .menubottom {
    z-index: 10000000;
}

.menubottom li {
    display: inline;
    list-style-type: none;
    margin-bottom: 2rem;
    margin-left: 1.4rem;
}

.menubottom li:last-child {
    padding-right: 2.5rem;
}

.menubottom .row div.column:last-child {
    padding-right: 3.5rem;
}

.menubottom table {
    padding-right: 3.5rem;
}

.dropdown.menutop .IconEditSmall,
#tabs_belegungsplan > ul > li .IconEditSmall,
.ui-tabs-tab .IconEditSmall {
    display: none;
}

div.kopfzeile {
    padding-bottom: 0;
    padding-top: 0.6em;
}

ul.topleiste li a {
    padding: 0;
}

ul.topleiste li img {
    cursor: pointer;
    height: 1.1rem;
}

ul.topleiste input[type="button"] {
    height: 29px;
    padding: 0;
    vertical-align: middle;
    width: 6rem;
}

ul.topleiste input[type="search"] {
    height: 30px;
    margin-right: 0;
    padding-bottom: 0;
    padding-top: 0;
    width: 10rem;
}

button:not(.ui-datepicker-trigger):not(.dt-paging-button),
input[type="button"],
input[type="submit"],
a.button {
    -webkit-appearance: none;
    background-color: var(--color-primary);
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    color: var(--color-on-accent);
    cursor: pointer;

    display: inline-block;
    font-size: var(--font-size-standard);
    height: var(--control-height);
    line-height: calc(var(--control-height) - 2px);
    margin: 0.2rem;
    padding: 0 var(--space-2);
    text-align: center;
    transition:
            background-color 0.25s ease-out,
            border-color 0.25s ease-out,
            box-shadow 0.25s ease-out,
            color 0.25s ease-out,
            filter 0.25s ease-out;
    vertical-align: middle;
}
button.alert,
.button.alert,
.button.secondary,
.button.clear,
.button.hollow,
.button.hollow.alert,
.button.hollow.success {
    background-color: var(--color-surface);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

button:hover:not(.ui-datepicker-trigger):not(.dt-paging-button),
input[type="button"]:hover,
input[type="submit"]:hover,
a.button:hover,
button:focus:not(.ui-datepicker-trigger):not(.dt-paging-button),
input[type="button"]:focus,
input[type="submit"]:focus,
a.button:focus,
button.alert:hover,
button.alert:focus,
button.success:hover,
button.success:focus,
button.warning:hover,
button.warning:focus,
.button.alert:hover,
.button.alert:focus,
.button.secondary:hover,
.button.secondary:focus,
.button.success:hover,
.button.success:focus,
.button.warning:hover,
.button.warning:focus,
.button.hollow:hover,
.button.hollow:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-on-accent);
    filter: none;
}

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
a.button:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
.button.disabled {
    cursor: not-allowed;
    filter: grayscale(0.35);
    opacity: 0.55;
}

button.success,
.button.success,
button.warning,
.button.warning {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-accent);
}

[data-whatinput="mouse"] button,
input[type="button"],
input[type="submit"] {
    outline: 0;
}

.table_calendar {
    margin: 0;
    padding: 0px;
    white-space: nowrap;
}

.table_calendar img {
    padding-left: 2px;
    padding-right: 2px;
}

.table_calendar input[type="text"] {
    display: inline;
}

.table_calendar input[type="date"],
.table_calendar input[type="time"] {
    display: inline-block;
}

.table_calendar input.textbox_datum {
    /*By PHCOM*/
    width: 120px;
}

.table_calendar input::-webkit-clear-button {
    -webkit-appearance: none; /* turn off default browser styling */
    display: none; /* Hide the button */
}

.table_calendar input.textbox_zeitv3 {
    /*By PHCOM*/
    width: 60px;
}

.IconClick {
    border: 0;
    cursor: pointer;
    height: 1.2em;
    min-width: 1.2em;
}

i.IconEdit,
i.IconEdity {
    cursor: pointer;
    font-size: 2em;
    vertical-align: middle;
}

.app-icon {
    display: inline-block;
    line-height: 1;
    text-align: center;
    width: 1.25em;
}

button.icon-button {
    background: transparent;
    border: 0;
    color: inherit;
    line-height: 1;
    margin: 0;
    padding: 0.25rem;
}

button.icon-button:hover,
button.icon-button:focus {
    background: transparent;
    border-color: transparent;
    color: var(--color-primary-hover);
}

i.app-icon[role="button"]:focus-visible,
button.icon-button:focus-visible {
    border-radius: var(--control-radius);
    box-shadow: var(--focus-ring);
    outline: none;
}

img.IconEdit,
img.IconEdity {
    border: 0;
    cursor: pointer;
    height: 28px;
    min-width: 28px;
}

.iconAction img.IconEdit,
.iconAction i.IconEdit,
#dialogFzg img,
#dialogFzg i.app-icon {
    height: 40px;
    margin: 8px;
}

.iconAction i.IconEdit,
#dialogFzg i.app-icon {
    font-size: 2.5rem;
    height: auto;
}

img.IconEditSmall {
    border: 0;
    height: 1.1em;
    margin-right: 3px;
    min-width: 1.1em;
}

i.IconEditSmall {
    font-size: 1.1em;
    margin-right: 3px;
    min-width: 1.1em;
    vertical-align: middle;
}

i.IconEditSmall.link {
    cursor: pointer;
}

i.IconEditSmall.veryright {
    float: right;
}
img.IconEditSmall.link {
    cursor:pointer;
}

img.IconEditSmall.veryright {
    float: right;
}

.einrichtungsassileitfaden .ablaufitem.aktiv {
    background-color: var(--color-surface);
}

.einrichtungsassileitfaden .infotext {
    margin-bottom: 8px;
}

.addRemoveButtonField .IconEditSmall {
    cursor: pointer;
}

td.icon_cell {
    float: right;
    white-space: nowrap;
}

.redcolor {
    color: var(--color-error);
}

.fehlermeldung,
.marked-red,
.marked-red a {
    background-color: var(--color-error);
    color: var(--color-on-accent);
}

td.marked-red,
td.marked-green,
tr.marked-green td,
div.marked-green {
    border-bottom: 1px solid var(--color-surface);
}

.marked-green,
.marked-green a,
tr.marked-green td,
div.marked-green a {
    background-color: var(--color-secondary) !important;
    color: var(--color-on-accent) !important;
}

/*TooltipBelegungsplan*/

.tooltipevent {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 4px;
    box-shadow: var(--shadow-floating);
    max-width: 300px;
    padding: 8px;
    position: absolute;
    z-index: 9999;
}

.systembuchung {
    background: var(--color-heading);
    color: var(--color-on-accent);
}

.standardbuchung {
    background: var(--color-warning);
    color: var(--color-heading);
}

/*Vorgang*/

.table_vorgang,
table#tableBuchungPositionen {
    border: 0px solid var(--color-heading);
    width: 100%;
}

.table_vorgang tr td:first-child,
.vorgang_td_width,
.viertel-width {
    width: 25%;
}

.table_vorgang tr td {
    padding-bottom: 4px;
    padding-right: 4px;
    padding-top: 4px;
}

#table_vorgang .td_re_nr {
    text-align: center;
}

#table_vorgang .td_re_nr div.wrapping {
    border: 0;
    float: right;
    margin-bottom: 1px;
    margin-right: 25px;
    min-width: 115px;
}

#table_vorgang .td_re_nr input {
    float: left;
}

#table_vorgang .td_re_nr img {
    float: right;
    margin-left: 3px;
}

#tableBuchungPositionen,
#table_freipos_bezeichnung,
table.table_no_pad,
table.table_no_pad td,
table.table_vorgang tr td > table {
    margin: 0px;
    padding: 0px;
    width: fit-content;
}

table.table_no_pad tr,
table.table_no_pad tbody tr:nth-child(2n),
table#tablef1 > tbody > tr {
    background-color: transparent;
}

table,
table thead,
table tbody,
table tfoot {
    background-color: transparent;
    border: 0;
}

table thead td,
table thead th {
    padding: 0;
}

table tr td [type="text"],
table tr td [type="password"],
table tr td [type="date"],
table tr td [type="datetime"],
table tr td [type="datetime-local"],
table tr td [type="month"],
table tr td [type="week"],
table tr td [type="email"],
table tr td [type="number"],
table tr td [type="search"],
table tr td [type="tel"],
table tr td [type="time"],
table tr td [type="url"],
table tr td [type="color"],
table tr td textarea,
table tr td select {
    margin: 0;
}

.select2-container .select2-selection--single {
    border-radius: 0;
    height: 2.15rem;
    margin-top: 0px;
}

.select2-container--default
.select2-selection--single
.select2-selection__rendered {
    line-height: 2.15rem;
}

.half-width {
    width: 50%;
}

.full-width,
.fullwidth,
iframe#vorschau_formular {
    width: 100%;
}

/*FormularAuswahlActive*/

.FormularAuswahlAktiv {
    background-color: var(--color-muted) !important;
    color: var(--color-on-accent);
}

/*Tabs fuer den Belegunsplan */

#tabmenu,
#tabmenu1,
#tabmenu2 {
    border-bottom: 1px solid var(--color-surface);
    overflow: hidden;
}

#tabmenu .tab,
#tabmenu1 .tab1,
#tabmenu2 .tab2 {
    background-color: var(--color-surface);
    border: 1px solid var(--color-error);
    border-bottom: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    float: left;
    font-weight: bold;
    margin-left: 3px;
    padding: 3px;
}

#tabmenu .active,
#tabmenu1 .active,
#tabmenu2 .active {
    background-color: var(--color-primary);
    color: var(--color-on-accent);
}

#tabmenu .tab:hover,
#tabmenu1 .tab1:hover,
#tabmenu2 .tab2:hover {
    background-color: var(--color-primary);
    color: var(--color-on-accent);
    cursor: pointer;
}

h4.formheadline {
    color: var(--color-accent-muted);
    font-size: var(--font-size-heading);
    height: 1.2em;
    margin-top: 0px !important;
    padding-top: 0px;
}

h4.formheadline img {
    height: 0.9em;
    padding-right: 10px;
}

h1,
h2,
h3,
b,
strong,
.fc-toolbar h2 {
    font-size: var(--font-size-standard);
    font-weight: bold;
}

div.codeHTML {
    border: 1px solid var(--color-heading);
    height: 400px;
    width: 100%;
}

.form_element {
    float: left;
    margin: 0;
    margin-bottom: 1.5em;
    margin-right: 1.5em;
    width: 47%;
}

/**** AUTOCOMPLETE - FELDER ************/

.Ajax_DIV {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-heading);
    display: none;
    font-family: "Open Sans", sans-serif;
    font-size: var(--font-size-standard);
    overflow: hidden;
    padding: 3px;
    position: absolute;
    white-space: nowrap;
    z-index: 999;
}

.Ajax_DIV UL {
    list-style: none;
    margin: 0;
    padding: 0;
}

.Ajax_DIV UL LI {
    background-color: var(--color-surface);
    display: block;
}

.Ajax_DIV A {
    color: var(--color-heading);
    text-decoration: none;
}

.Ajax_DIV A:hover {
    color: var(--color-heading);
}

.Ajax_DIV LI.selected {
    background-color: var(--color-primary);
    color: var(--color-heading);
}

.ACL_DIV {
    background-color: var(--color-surface);
    border: 1px solid var(--color-heading);
    color: var(--color-heading);
    display: block;
    font-family: "Open Sans", sans-serif;
    font-size: var(--font-size-sub);
    margin: 0px;
    padding: 0px;
    position: absolute;
    white-space: nowrap;
    z-index: 999;
}

.ACL_DIV UL {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ACL_DIV UL LI {
    display: block;
}

.ACL_DIV A {
    color: var(--color-heading);
    text-decoration: none;
}

.ACL_DIV A:hover {
    background-color: var(--color-primary);
    color: var(--color-heading);
}

.tooltip {
    background-color: var(--color-tooltip-bg);
    border-color: var(--color-tooltip-border);
    border-style: solid;
    border-width: 1px;
    display: none;
    font-family: "Open Sans", sans-serif;
    font-size: var(--font-size-sub);
    color: var(--color-tooltip-text);
    padding: 2px;
    position: absolute;
}

.NotOK,
.OK {
    font-size: var(--font-size-standard);
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
    text-decoration: none;
    text-transform: none;
}

.NotOK {
    color: var(--color-error);
}

.OK {
    color: var(--color-ok-text);
}

/*Globale Einstellungen*/

table.tableGlobaleEinstellungen {
    empty-cells: show;
}

table.tableGlobaleEinstellungen tr td {
    border-bottom: 1px solid var(--color-muted);
    padding-bottom: 6px;
    padding-left: 3px;
    padding-top: 6px;
}

table.tableGlobaleEinstellungen .SUA td,
li a.SUA,
tr.SUA td,
.column.SUA,
.row.SUA .column,
div.SUA {
    background-color: var(--color-error);
    color: var(--color-on-accent);
    padding-bottom: 4px;
    padding-top: 4px;
}

.tab_zahlung,
.tab_zahlung_aktiv {
    border: 1px solid var(--color-heading);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    float: left;
    font-weight: bold;
    margin: 1px;
    margin-bottom: -1px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    text-decoration: none;
}

.tab_zahlung {
    background-color: var(--color-surface);
    color: var(--color-heading);
}

#loginscreen {
    margin-top: 2.5rem;
}

.tab_zahlung:hover,
.tab_zahlung_aktiv:hover {
    background-color: var(--color-primary);
    color: var(--color-on-accent);
    cursor: pointer;
}

.tab_zahlung_aktiv {
    background-color: var(--color-primary);
    color: var(--color-on-accent);
}

.tab_zahlung_content_frame {
    border: 1px solid var(--color-error);
    border-radius: 6px;
    clear: left;
    display: block;
    padding: 5px;
}

/*Formularvorschau*/

table#tablef1 div table {
    margin-top: 3px;
}

table#tablef1 div table tr td,
table#tablef1 div.ui-accordion-content {
    margin: 0px;
    padding: 0px;
}

.assi_maske_content .chzn-choices {
    overflow: visible;
}

.assi_maske_content .chzn-container-multi .chzn-choices li {
    float: none;
}

.chzn-container-active .chzn-choices {
    border: 1px solid var(--color-accent-muted);
}

.assi_maske_content label {
    display: inline;
}

.assi_maske_content legend {
    font-weight: bold;
    padding: 0 5px;
}

.assi_maske_content fieldset,
.assi_maske_content input[type="text"],
.assi_maske_content input[type="password"],
.assi_maske_content textarea,
.assi_maske_content input[type="search"],
.assi_maske_content input[type="number"],
.assi_maske_content input[type="date"],
.assi_maske_content input[type="time"],
.assi_maske_content input[type="email"],
.assi_maske_content input[type="tel"],
.assi_maske_content input[type="url"],
.assi_maske_content .custom-combobox,
.cke {
    margin-bottom: 10px !important;
    margin-top: 2px !important;
}

.assi_maske_content .select-style {
    margin-bottom: 10px !important;
    margin-top: 2px !important;
}

.assi-thumbnail {
    display: block;
    height: 50px;
    margin-bottom: 5px;
    width: auto;
}

.assi_input_around {
    display: inline-block;
    width: 100%;
}

.assi_input_around label {
    vertical-align: middle;
}

.assi_maske_content iframe {
    border: 1px solid var(--color-border);
    min-height: 300px;
    width: 100%;
}

.assi_maske_content input[type="checkbox"],
input[type="checkbox"] {
    height: 20px;
    vertical-align: middle;
    width: 20px;
}

.assi_artikeltext {
    height: 16px;
    margin-bottom: 10px !important;
    margin-top: 2px !important;
}

.zweispaltig {
    /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-gap: 20px; /* Firefox */
    column-gap: 20px;
}

.assi_divider {
    border: 1px dotted var(--color-border);
    clear: both;
    display: block;
    margin: 30px 0;
    width: 100%;
}

.spalte_around {
    break-inside: avoid;
    -moz-column-break-inside: avoid;
    display: block;
    float: left;
    margin-right: 4%;
    page-break-inside: avoid;
    width: 45%;
}

.spalte_around.right {
    margin-right: 0;
}

.spalte_around.fullwidth {
    width: 100%;
}

#SchadenEingabe3,
.schaden_iframe {
    height: 500px;
    min-width: 550px;
    overflow: hidden;
    width: 100%;
}

#iframe_vorschau,
#iframe1,
#SchadenEingabe3 {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    display: block;
    margin: 10px 0;
    min-height: 400px;
    padding: 2%;
    width: 100%;
}

.statistik_table {
    width: 100%;
}

.statistik_table tr td:first-child {
    width: 20%;
}

.ui-accordion .ui-accordion-content {
    overflow: visible;
}

div#preise_tarif_div div.ui-accordion-content {
    padding: 10px;
}

div.gueltigkeit_fieldset .checkboxes label,
.tageauswahl label {
    background-color: var(--color-surface);
    display: inline-block;
    height: 30px;
    margin-bottom: 4px;
    margin-right: 5px;
    padding-left: 4px;
    padding-right: 4px;
    white-space: nowrap;
}

fieldset,
.fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
}

fieldset legend {
    font-weight: bold;
}

.ui-autocomplete-category {
    font-weight: bold;
}

form#form_assi_schnellbuchung div#tabs-1 label {
    font-weight: bold;
}

form#form_assi_schnellbuchung div.row {
    margin-left: 0;
    margin-right: 0;
}

form#form_assi_schnellbuchung div.columns {
    padding-left: 3px;
    padding-right: 3px;
}

ul.list_uebersicht {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.list_uebersicht li {
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sub);
}

div#div_vorgang_abrechnen div.ui-accordion-content {
    padding: 2px;
}

#live_vorschau,
#live_vorschau-pdf,
#live_vorschau-email {
    height: 500px;
    width: 100%;
}

a.belegungsplan_tab_delay:link {
    background-color: var(--color-error);
    color: var(--color-on-accent);
}

div#belegungsplan_content
table
tr[class^="fc-resourcerow-fzg_id"]
> td:not(.fc-resourceName) {
    background: var(--color-surface);
}

div#belegungsplan_content table tr[class^="fc-resourcerow-fgz_gruppe"] > td,
div#belegungsplan_content table tr td.fc-resourceName {
    background: var(--color-surface);
}

div#belegungsplan_content table tr[class^="fc-resourcerow-fgz_gruppe"] > td.fc-resourceName/*Border - RIght*/ {
    font-weight: bold;
    vertical-align: middle;
}

div#belegungsplan_content table tr[class^="fc-resourcerow-fzg_id"] > td.fc-resourceName  /*Kein border bottom */ {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    cursor: pointer;
    vertical-align: middle;
}

div#belegungsplan_content table tr[class^="fc-resourcerow-fzg_id"].fc-last > td.fc-resourceName  /*Kein border bottom */ {
    border-bottom: 1px solid var(--color-border);
}

div#tabs_belegungsplan .aktualisieren {
    font-size: var(--font-size-standard);
    padding: 7px;
}

.fc-button-primary:disabled,
.fc-button-primary:not(:disabled):active,
.fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--color-text);
}

.ui-tabs .ui-tabs-panel.tab-station,
#tabs_belegungsplan-station > ul li.ui-tabs-tab {
    background-color: var(--color-surface);
}

.ui-state-active,
h3.plan,
a.ui-state-active {
    background: var(--color-primary) !important;
    border: 0 !important;
    color: var(--color-on-accent) !important;
}

div.SelectboxSelectDiv {
    display: inline;
}

div#belegungsplan_nav input[type="button"],
input.SelectNoItems,
input.SelectAllItems,
input.fahrzeuggruppen_auswahl {
    height: 29px;
    padding-bottom: 0;
    padding-top: 0;
    vertical-align: middle;
}

input:checked ~ .switch-paddle {
    background: var(--color-secondary);
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 300px;
}

input.waehrung {
    max-width: 110px;
    text-align: right;
}

input.smallboxnumber {
    text-align: right;
    width: 6rem;
}

input.hasDatepicker {
    text-align: right;
    width: 7rem;
}

input.boxuhrzeit {
    text-align: right;
    width: 5rem;
}

div#vorschau_iframe_container {
    border: 1px solid var(--color-border);
    max-height: 600px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

div#vorschau_iframe_container iframe {
    height: 100%;
    width: 100%;
}

.no-js-hide,
.no-js {
    display: none;
}

/*Alter Belegungsplan Roller */

table#table_belegungsplan tr/*, table.noAlternateBackgground tr*/ {
    background: transparent !important;
}

span.belegt_span_termin {
    cursor: pointer;
}

.durchstrich,
.durchstrich td,
.durchstrich .column {
    text-decoration: line-through;
}

table#table_formular_auswahl tr td div {
    word-wrap: break-word;
}

div.form-builder ul li {
    height: auto;
}

.ui-datepicker-trigger i {
    font-size: 2em;
    margin: 0 5px 0 8px;
    vertical-align: middle;
}

div.row_abstand .row .column {
    padding-bottom: 18px;
}

div.alternierend:nth-of-type(even) {
    background-color: var(--color-bg);
}

div.alternierend div.column {
    padding-bottom: 6px;
    padding-top: 6px;
}

table#table_station,
table#table_kennzeichen {
    margin: 0;
}

table#table_station td,
table#table_kennzeichen td {
    padding: 0;
}

div#jstree_website {
    min-height: 200px;
}

.kassenbuch button.ui-button {
    background-color: var(--color-surface);
}

table#ausgaben tbody tr:hover td,
table#einnahmen tbody tr:hover td,
table#storno tbody tr:hover td {
    background-color: var(--color-surface) !important;
}

tr.storno td {
    color: var(--color-error);
}

div.tabs.kassenbuch table.ui-widget {
    width: 100%;
}

.auswahlsticky {
    background-color: var(--color-surface);
}

.textbold {
    font-weight: bold;
}

.unterschrift_iframe {
    min-height: 300px;
    width: 100%;
}

body.noscroll {
    bottom: 0;
    left: 0;
    /* disable scrollbar on both x and y axis */
    overflow: hidden;

    /* disable scrollbar on x-axis only */
    overflow-x: hidden;

    /* disable scrollbar on y-axis only */
    overflow-y: hidden;

    /* disable scroll */
    position: fixed;
    right: 0;
    top: 0;
}

.jstree a.inaktiv {
    text-decoration: line-through;
}

.jstree a.jstree-anchor i.jstree-icon {
    background-size: contain !important;
}

#einstellungen_tab tr:first-child td u {
    font-weight: bold;
    text-decoration: none;
}

#einstellungen_tab tr td {
    vertical-align: top;
}

#form_mitarbeiter_aufwand img.img_person_drucken,
#form_mitarbeiter_aufwand img.img_person_email,
#form_mitarbeiter_aufwand img.img_person_sms,
table.mitarbeiter_aufwand img.img_person_sms {
    display: none;
}

table.mitarbeiter_aufwand thead td {
    border-bottom: 1px solid var(--color-heading);
    vertical-align: bottom;
}

table.mitarbeiter_aufwand tr:last-child .DelIcon,
table.mitarbeiter_aufwand .img_person_drucken,
table.mitarbeiter_aufwand .img_person_email {
    display: none;
}

/*Zuweisung*/

table#table_zuweisung {
    border-collapse: collapse;
}

table#table_zuweisung tr.zuweisung_sicher td {
    background-color: var(--color-secondary);
    border-bottom: 1px solid var(--color-heading);
    border-top: 1px solid var(--color-heading);
}

table#table_zuweisung tr.zuweisung_unsicher td {
    background-color: var(--color-warning);
    border-bottom: 1px solid var(--color-heading);
    border-top: 1px solid var(--color-heading);
}

.drittelwidth,
.drittel-width {
    width: 33%;
}

.zweidrittelwidth {
    width: 66%;
}

.valigntop {
    vertical-align: top;
}

.nomargin {
    border-collapse: collapse;
    margin: 0;
}

.nomargin td {
    margin: 0;
    padding: 0;
}

.belegt_span_termin {
    background-color: var(--color-muted);
}

.textbox.colorPicker {
    display: none;
}

#vorschau_container #tarifbetrag_vorschau {
    max-height: 280px;
    overflow-y: scroll;
}

#table_abholung tr td,
#table_rueckgabe tr td {
    word-wrap: break-word;
}

a.formularvorschau.active {
    text-decoration: underline;
}

input.eingabe_mitarbeiter_nummer {
    font-size: var(--font-size-heading);
    height: 60px;
    text-align: right;
    width: 200px;
}

div.person_icons img {
    float: right;
}

div.person_box {
    float: left;
    margin-right: 5px;
    max-width: 80%;
    min-width: 60%;
}

div.person_box_auswahl {
    margin-left: 5px;
    padding-left: 5px;
    vertical-align: middle;
}

div.person_box_auswahl img {
    margin-right: 5px;
}

div.person_box_auswahl img:last-child {
    margin-right: 0;
}

input[type="button"].gedreht {
    transform: rotate(270deg);
}

div.nopadding {
    margin: 0 !important;
    padding: 0 !important;
}

i.IconEdit.aktuelles_datum_setzen {
    margin-left: 10px;
    margin-right: 10px;
}

.table_calendar .ui-datepicker-trigger i,
.table_calendar i.IconEdit.aktuelles_datum_setzen {
    color: var(--color-text);
    font-size: 1.6em;
}

.ui-widget-content .column > a:not(.button) {
    color: var(--color-primary);
}

a:not(.button):hover {
    text-decoration: underline;
}

div.hilfetext {
    align-items: center;
    color: var(--color-muted);
    display: flex;
    font-size: var(--font-size-sub);
    height: var(--control-height);
    margin: 0;
    opacity: 0.65;
    padding-left: var(--space-1);
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

div.hilfetext > .app-icon {
    font-size: var(--font-size-sub) !important;
    line-height: 1;
}

input[type="text"][title],
input[type="search"][title],
input[type="email"][title],
input[type="num"][title] {
    text-indent: 10px;
}

.ui-autocomplete li {
    overflow: hidden;
}

div.hilfe_pencil {
    cursor: pointer;
    font-size: 25px;
}

.hilfetext_aktiv {
    border: 2px solid green;
}

.premiumfont {
    color: var(--color-primary);
}

.premium {
    background: transparent;
    color: var(--color-primary);
    font-size: 50px;
}

.blockUI.blockOverlay {
    cursor: not-allowed;
    min-height: 60px;
    padding: 8px;
}

.premiumaccount > .dark {
    opacity: 0.2;
}

/*Belegungsplan V2*/

li.alert.rueckgabe,
li.ui-tab.alert,
#tabs_belegungsplan .row.alert {
    background-color: var(--color-error);
    color: var(--color-on-accent);
}

#tabs_belegungsplan .row.alert {
    margin-bottom: 1px;
}

li.ui-tabs-active.alert {
    background-color: var(--color-error);
}

li.ui-tab.alert a {
    color: var(--color-error);
}

div.row.alert a {
    color: var(--color-heading) !important;
}

div.fc-view-container table tbody tr:nth-child(even) {
    background-color: transparent;
    border-bottom: 0;
}

.fc-event:hover {
    cursor: pointer;
}

#tab-belegungsplan[recht_id="10"]
.fc-resource-area
tr[data-resource-id^="fzg_id"]:hover {
    background-color: var(--color-primary) !important;
    cursor: pointer;
}

#tab-belegungsplan[recht_id="10"] .fc-resource-area tr[data-resource-id^="fzg_id"]:hover
* {
    color: var(--color-on-accent) !important;
}

/*
 * FullCalendar ergänzt rechts die Breite der vertikalen Ressourcen-Scrollbar.
 * Seine dynamisch gesetzten Scroller-Ränder gleichen diese Breite zwischen
 * Kopf und Körper aus und dürfen nicht global überschrieben werden.
 * Auf Desktop bleibt die Zeitachse scrollbar, ihre rein technische untere
 * Scrollbar wird jedoch nicht als zusätzliche graue Leiste dargestellt.
 */
@media only screen and (min-width: 40em) {
    body[filename="belegungsplan.php"]
    .fc-timeline
    .fc-body
    .fc-time-area
    .fc-scroller {
        scrollbar-width: none;
    }

    body[filename="belegungsplan.php"]
    .fc-timeline
    .fc-body
    .fc-time-area
    .fc-scroller::-webkit-scrollbar:horizontal {
        height: 0;
    }
}

.fc-widget-header .fc-scroller {
    overflow: hidden !important;
}

.fc-scroller-canvas .fc-content > table tbody tr:nth-child(3) {
    display: none;
}

.fc-resource-area th.fc-widget-header .fc-cell-text {
    display: none;
}

.cssMarker {
    border-bottom: 2px dashed var(--color-error);
    position: absolute;
    z-index: 20;
}

body.testmodus {
    background-color: var(--color-surface);
}

div.fc-view table thead th.fc-widget-header .fc-cell-content span {
    white-space: normal;
}

body[filename="belegungsplan.php"] .belegungsplan-weather-slot {
    align-items: center;
    display: flex;
    gap: var(--space-1);
    justify-content: center;
    line-height: 1;
    margin-inline-start: 0;
    margin-top: var(--space-1);
    width: 100%;
}

body[filename="belegungsplan.php"] .belegungsplan-weather-slot__temperature {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
    font-weight: normal;
}

body[filename="belegungsplan.php"] .belegungsplan-weather-day-detail {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-inline-start: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-standard);
    font-weight: normal;
    vertical-align: middle;
}

body[filename="belegungsplan.php"] .belegungsplan-weather-description {
    color: var(--color-heading);
    text-transform: capitalize;
}

body[filename="belegungsplan.php"] .belegungsplan-weather-metric {
    color: var(--color-muted);
    white-space: nowrap;
}

body[filename="belegungsplan.php"] .belegungsplan-weather-icon {
    color: var(--color-primary);
}

body[filename="belegungsplan.php"] .belegungsplan-weather-icon--clear,
body[filename="belegungsplan.php"] .belegungsplan-weather-icon--storm {
    color: var(--color-warning);
}

body[filename="belegungsplan.php"] .belegungsplan-weather-icon--mist,
body[filename="belegungsplan.php"] .belegungsplan-weather-icon--snow {
    color: var(--color-muted);
}

@media only screen and (max-width: 39.9375em) {
    body[filename="belegungsplan.php"] .belegungsplan-weather-day-detail {
        justify-content: center;
        margin: var(--space-1) 0 0;
        width: 100%;
    }
}

.aktion button,
.aktion a.button {
    font-size: var(--font-size-standard);
    padding: 5px;
}

body[filename="belegungsplan.php"] #tab-abholung .aktion .vorgang_oeffnen,
body[filename="belegungsplan.php"] #tab-rueckgabe .aktion .vorgang_oeffnen {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    vertical-align: middle;
}

body[filename="belegungsplan.php"] #tab-abholung .aktion .vorgang_oeffnen .app-icon,
body[filename="belegungsplan.php"] #tab-rueckgabe .aktion .vorgang_oeffnen .app-icon {
    line-height: 1;
    margin: 0;
}

body[filename="belegungsplan.php"] .belegungsplan-list-loading {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    color: var(--color-text);
    display: flex;
    font-size: var(--font-size-standard);
    gap: var(--space-2);
    justify-content: center;
    min-height: 12rem;
    padding: var(--space-4);
}

body[filename="belegungsplan.php"] .belegungsplan-list-loading .app-icon {
    color: var(--color-primary);
}

body[filename="belegungsplan.php"] .belegungsplan-liste-table {
    margin: 0 !important;
    table-layout: auto;
    width: 100% !important;
}

body[filename="belegungsplan.php"] .belegungsplan-liste-table th,
body[filename="belegungsplan.php"] .belegungsplan-liste-table td {
    line-height: 1.25;
    padding: var(--space-1) var(--space-2);
    vertical-align: middle;
}

body[filename="belegungsplan.php"] .belegungsplan-liste-table th {
    white-space: nowrap;
}

body[filename="belegungsplan.php"] .belegungsplan-liste-table .datum,
body[filename="belegungsplan.php"] .belegungsplan-liste-table .vorgang,
body[filename="belegungsplan.php"] .belegungsplan-liste-table .betrag,
body[filename="belegungsplan.php"] .belegungsplan-liste-table .aktion {
    white-space: nowrap;
}

body[filename="belegungsplan.php"] .belegungsplan-liste-table .positionen {
    max-width: 24rem;
    min-width: 14rem;
    padding-right: calc(var(--space-2) + 1.5rem);
    position: relative;
}

body[filename="belegungsplan.php"] .belegungsplan-liste-table .kategorie {
    min-width: 9rem;
    max-width: 13rem;
}

body[filename="belegungsplan.php"] .belegungsplan-liste-table .mietartikel {
    min-width: 7rem;
    max-width: 11rem;
}

body[filename="belegungsplan.php"] .belegungsplan-liste-table .kategorie,
body[filename="belegungsplan.php"] .belegungsplan-liste-table .mietartikel {
    overflow-wrap: anywhere;
}

body[filename="belegungsplan.php"] .belegungsplan-liste-clamp {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-clamp: 2;
    max-height: 2.5em;
    overflow: hidden;
}

body[filename="belegungsplan.php"] .belegungsplan-positionen-text {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-clamp: 2;
    max-height: 2.5em;
    overflow: hidden;
    white-space: normal;
}

body[filename="belegungsplan.php"] .positionen.is-expanded .belegungsplan-positionen-text {
    -webkit-line-clamp: unset;
    display: block;
    line-clamp: unset;
    max-height: none;
    overflow: visible;
}

body[filename="belegungsplan.php"] .belegungsplan-positionen-toggle {
    align-items: center;
    appearance: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    bottom: var(--space-1);
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    font: inherit;
    height: 1.25rem;
    justify-content: center;
    margin: 0;
    padding: 0;
    position: absolute;
    right: var(--space-1);
    width: 1.25rem;
}

body[filename="belegungsplan.php"] .belegungsplan-positionen-toggle:hover,
body[filename="belegungsplan.php"] .belegungsplan-positionen-toggle:focus-visible {
    background: var(--color-bg-shading);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

body[filename="belegungsplan.php"] .belegungsplan-positionen-toggle .app-icon,
body[filename="belegungsplan.php"] .belegungsplan-positionen-warnung {
    font-size: var(--font-size-sub);
    line-height: 1;
}

body[filename="belegungsplan.php"] .belegungsplan-positionen-warnung {
    color: var(--color-error);
    float: left;
    margin: 0 var(--space-1) 0 0;
}

body[filename="belegungsplan.php"] .belegungsplan-liste-table .betrag {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

body[filename="belegungsplan.php"] .belegungsplan-liste-table .backend-action-cell {
    min-width: calc(var(--control-height) + (2 * var(--space-2)));
    text-align: center;
}

body[filename="belegungsplan.php"] .belegungsplan-liste-table .aktion {
    text-align: right;
}

body[filename="belegungsplan.php"] .belegungsplan-list-action-menu > summary {
    height: 2.75rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    width: 2.75rem;
}

body[filename="belegungsplan.php"] .belegungsplan-list-action-menu .backend-action-menu-items {
    min-width: min(15rem, calc(100vw - (2 * var(--space-4))));
}

body[filename="belegungsplan.php"] .belegungsplan-list-action-menu .backend-action-option {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4) !important;
}

body[filename="belegungsplan.php"] .belegungsplan-liste-table tr.alert td {
    background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
    color: var(--color-text);
}

body[filename="belegungsplan.php"] #tab-abholung .dt-container,
body[filename="belegungsplan.php"] #tab-rueckgabe .dt-container {
    margin-top: var(--space-2);
}

body[filename="belegungsplan.php"] #tab-abholung .dt-layout-table,
body[filename="belegungsplan.php"] #tab-rueckgabe .dt-layout-table {
    overflow: visible;
}

@media only screen and (max-width: 63.9375em) {
    body[filename="belegungsplan.php"] #tab-abholung .dt-layout-table,
    body[filename="belegungsplan.php"] #tab-rueckgabe .dt-layout-table {
        overflow-x: auto;
    }

    body[filename="belegungsplan.php"] .belegungsplan-liste-table {
        min-width: 84rem;
    }
}

.DivAccBel.Warnung h3 {
    background-color: var(--color-surface);
    color: var(--color-error);
}

div.fc-view-container
table
tbody
tr[data-resource-id^="fahrzeuggruppe_sub_id"] {
    background-color: var(--color-surface);
}

#tabs-suche .column.rechnungsnummer {
    overflow: hidden;
}

tr[data-resource-id^="fzg_id"] .fc-widget-content .fc-cell-content .fc-icon,
tr[data-resource-id^="fahrzeuggruppe_sub_id"] .fc-cell-content > .fc-icon {
    display: none;
}

.ansicht_datenobjekt {
    max-height: 600px;
    overflow-y: scroll;
}

.neueinrichtung.ui-progressbar > div {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    margin: 0;
}


.fc-button .fc-icon {
    font-size: 1em;
}

.fc-view > table {
    empty-cells: show;
}

.fc-view > table .tableFloatingHeaderOriginal {
    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
}

area {
    background: var(--color-error);
}

div.einbuchen {
    cursor: pointer;
}

div.einbuchen:hover {
    text-decoration: underline;
}

div.einbuchen .hilfetext {
    display: none;
}

#link_gen_area xmp {
    white-space: pre-wrap;
}

div.DivAccordion.grundeinrichtung .ui-accordion-content {
    padding-left: 0;
    padding-right: 0;
}

.row .column .chzn-container,
.row .column .select2 {
    margin: 0 0 1rem;
}

.switch {
    margin-bottom: 6px;
}

.formularedit.email > ul {
    display: none;
}

.formularedit.email {
    border: 0;
}

.formularedit.email #tab-edit-email {
    padding: 0;
}

.vorgang_positionen .headline {
    border-bottom: 1px solid var(--color-border);
    font-weight: bold;
    margin-bottom: 10px;
}

body[filename="buchung.php"] #form_buchung #freiposition_container {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-bottom: 0;
    border-radius: var(--panel-radius) var(--panel-radius) 0 0;
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-3) 0;
}

body[filename="buchung.php"]
#form_buchung
#freiposition_container + .row.column {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 var(--panel-radius) var(--panel-radius);
    margin: 0;
    max-width: none;
    padding: 0 var(--space-3) var(--space-3);
}

body[filename="buchung.php"]
#form_buchung
#freiposition_container .freiposition > .column {
    align-items: flex-start;
}

body[filename="buchung.php"]
#form_buchung
.freiposition-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

body[filename="buchung.php"]
#form_buchung
.freiposition-actions::before,
body[filename="buchung.php"]
#form_buchung
.freiposition-actions::after {
    content: none;
    display: none;
}

body[filename="buchung.php"]
#form_buchung
.freiposition-actions .button {
    margin: 0;
}

#form_buchung .DivAccordionClosed.warnung h3,
#form_buchung .DivAccordion.warnung h3 {
    background-color: var(--color-warning);
}

div.fahrzeugmiete .fahrzeugbezeichnung {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ul#positionen {
    margin-left: 0;
}

ul#positionen li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#positionen li:before {
    content: "\2022";
    margin-right: 6px;
}

span.station_mietbeginn {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uebersicht .statuscheck ul {
    margin-left: 0;
    margin-top: 9px;
    padding-left: 0;
}

.statuscheck ul,
.statuscheck ul li {
    list-style-type: none;
}

.statuscheck ul li {
    -webkit-box-orient: vertical; /* vertikale Ausrichtung */
    display: -webkit-box; /* nötig für Box-Layout */
    -webkit-line-clamp: 4; /* maximal 4 Zeilen anzeigen */
    overflow: hidden; /* Textüberlauf abschneiden */
}

.statuscheck input[type="button"] {
    display: none;
}

.statuscheck input[type="button"]:first-child {
    display: inherit;
}

.row.bordertop .column {
    border-top: 1px solid var(--color-border);
}

.is-dropdown-submenu {
    min-width: 250px;
}

div.fc-rows tr.auswahl_aktiv td {
    background-color: var(--color-primary);
    color: var(--color-on-accent);
}

div.fc-rows table tr .fc-divider {
    background-color: var(--color-primary);
    color: var(--color-on-accent);
}

div.fc-rows table>tbody>tr[data-resource-id^="fahrzeuggruppe_sub_id"]  {
    background-color: var(--color-bg);
}
.fc-resource-area div.fc-rows table>tbody>tr[data-resource-id^="fzg_id"]:nth-child(even),
.fc-time-area div.fc-rows table>tbody>tr[data-resource-id^="fzg_id"]:nth-child(even) {
    background-color: var(--color-bg-shading);
}

.ui-tabs .ui-tabs-panel.inhaltartikelauswahl {
    padding-top: 1.5rem;
}

div#sammelvorgang_container ul.sammelvorgang_items {
    max-height: 250px;
    overflow-y: auto;
}

div#sammelvorgang_container ul,
div#sammelvorgang_container ul li {
    list-style-type: none;
}

div#sammelvorgang_container ul li {
    cursor: pointer;
    margin-left: -5px;
}

div#sammelvorgang_container ul li:hover {
    text-decoration: underline;
}

div.DivAccBel h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.DivAccBel > div hr:last-child {
    display: none;
}

div.tabartikelliste div.artikelliste:last-child hr {
    display: none;
}

td.addRemoveButtonField {
    padding-top: 0;
}

table.fahrzeug_table table {
    margin-bottom: 0;
}

.kopfzeile {
    min-height: 35px;
}

#artikel_kategorie tbody tr:first-child .deleteIconTable {
    display: none;
}

.callout {
    border: 1px solid var(--color-border);
    border-collapse: collapse;
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
}

.callout.secondary {
    background-color: var(--color-surface);
}

.callout.content-width {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

/* jQuery UI: einheitliche Backend-Darstellung bei unverändertem Widget-Verhalten. */
.ui-tabs {
    background-color: var(--color-surface);
    margin-top: 5px;
    padding: 0;
}

.ui-tabs .ui-tabs-nav li {
    background-color: var(--color-surface);
    margin-right: var(--space-2);
    margin-top: var(--space-1);
}

.ui-tabs .ui-tabs-panel {
    background-color: var(--color-surface);
    padding-left: 0;
    padding-right: 0;
}

.ui-widget-header {
    background: var(--color-bg);
}
.ui-widget-header,
.ui-widget,
.ui-widget.ui-widget-content {
    border: 0;
}

.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: var(--font-ui), sans-serif;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    background: var(--color-bg);
    border: 0;
    color: var(--color-text);
    font-weight: normal;
}
.ui-dialog-titlebar .ui-button.ui-button-icon-only {
    background-color: var(--color-surface);
}

.ui-dialog {
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
}

.ui-dialog .ui-dialog-titlebar {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
}

.ui-dialog .ui-dialog-content {
    color: var(--color-text);
}

.ui-dialog .ui-dialog-buttonpane {
    border-top: 1px solid var(--color-border);
    margin-top: 0;
    padding: var(--space-2);
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    background: var(--color-warning);
    border: 1px solid var(--color-warning);
    color: var(--color-muted);
}

.ui-progressbar {
    background: var(--color-surface);
}

.ui-tooltip {
    background: var(--color-tooltip-bg);
    border: 1px solid var(--color-tooltip-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-floating);
    color: var(--color-tooltip-text);
    max-width: min(22rem, calc(100vw - 2rem));
    padding: var(--space-2) var(--space-3);
}

.ui-tooltip * {
    color: var(--color-tooltip-text);
}

/* Night Shift: alle aus title-Attributen erzeugten Tooltips eindeutig Schwarz/Weiß. */
:root[data-backend-theme="night"] body .ui-tooltip,
:root[data-backend-theme="night"] body .ui-tooltip.ui-widget-content,
:root[data-backend-theme="night"] body .tooltip {
    background-color: var(--color-tooltip-bg) !important;
    background-image: none !important;
    border-color: var(--color-tooltip-border) !important;
    color: var(--color-tooltip-text) !important;
    opacity: 1;
    text-shadow: none;
}

:root[data-backend-theme="night"] body .ui-tooltip *,
:root[data-backend-theme="night"] body .tooltip * {
    color: var(--color-tooltip-text) !important;
    text-shadow: none;
}

.systembuchung * {
    color: var(--color-on-accent);
}

.ui-autocomplete {
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    box-shadow: var(--shadow-panel);
}

.ui-datepicker {
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
}

body.frame h3.ui-accordion-header,
.ui-tabs .ui-tabs-panel div.ui-accordion h3.ui-accordion-header {
    background-color: var(--color-bg);
}

.ui-accordion .ui-accordion-header-active {
    color: var(--color-on-accent);
}

.ui-accordion .ui-accordion-header-collapsed {
    margin-bottom: 4px;
}

#gruppe_container .row:first-child input.alert {
    display: none;
}

ul.liste_belegungsplan_tooltip {
    margin-bottom: 0;
}

#tab-felder-content .feldliste {
    background-color: var(--color-surface);
    border: 1px solid var(--color-muted);
    margin: 5px;
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
}

#progressbar div {
    text-align: center;
}

#progressbar {
    height: 50px;
}

#tab-tabelle-content ul,
#tab-tabelle-content li {
    list-style-type: none;
}

.feldliste label,
#tab-tabelle-content label {
    display: table-cell;
    height: 26px;
    vertical-align: middle;
}

#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}

#sortable li {
    background: var(--color-surface);
    margin: 0 3px 3px 3px;
    padding: 0.4em;
    padding-left: 1.5em;
}

#sortable li span {
    margin-left: -1.3em;
    margin-top: 3px;
    position: absolute;
}

div#abfrage_ansicht {
    margin-bottom: 20px;
    margin-top: 10px;
}

code {
    color: var(--color-heading);
    display: block;
    font-family: monospace;
    margin: 1em 0;
    white-space: pre;
    line-height:1rem;
    padding-top:2rem;
    padding-bottom:2rem;
}

.ui-dialog .ui-dialog-content.dialog_growl {
    background: var(--color-surface);
    border-radius: 5px;
    color: var(--color-heading);
    opacity: 0.85;
}

.vorgang_suchfilter .SelectboxSelectDiv {
    display: none;
}

/** Datatable CSS **/

div.dt-container .dt-length label,
div.dt-container .dt-search label {
    align-items: center;
    display: inline-flex;
    gap: 0.4rem;
    margin: 0;
}

div.dt-container .dt-length select.dt-input {
    margin: 0;
    min-width: 4.5rem;
    width: auto;
}

div.dt-container .dt-search input.dt-input {
    margin: 0;
    width: 12rem;
}

.dataTableHistorie ul li {
    font-size: var(--font-size-sub);
}

.dataTableHistorie ul {
    margin: 0;
}

.DataTableSlim td,
.DataTable td,
.DataTableSlim td a,
.DataTable td a {
    word-wrap: break-word;
}

table.dataTable tr.odd {
    background-color: var(--color-bg-shading);
}

.DataTableAroundDiv {
    margin-bottom: 25px;
}

.dataTable th:first-child {
    border-left: 0;
}

.dataTable th,
.dataTable th *,
.dataTable td,
.dataTable td * {
    font-size: var(--font-size-standard);
}

.dataTable th i,
.dataTable th * i,
.dataTable td i {
    font-size: 1em;
}

#datatable td,
#datatable th {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.DataTableSlim.vorgang,
.DataTableSlim.vorgang b,
.DataTableSlim.vorgang input.button {
    font-size: var(--font-size-standard);
}

@media only screen and (max-width: 800px) {
    .DataTableSlim.vorgang,
    .DataTableSlim.vorgang b,
    .DataTableSlim.vorgang input.button {
        font-size: var(--font-size-standard);
    }
}

.DataTableSlim.vorgang tr td {
    vertical-align: middle;
}


td.positionen.show-for-large {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em;
}

.DataTableSlim.vorgang tr td.betrag {
    text-align: right;
    white-space: nowrap;
}

a.button.vorgang_alt {
    display: none;
}

#url_api_te {
    font-family: courier;
    word-break: break-word;
}

td.km_eingabe input {
    width: 100px;
}

div.container .row:first-child input.entfernen {
    display: none;
}

div#ausweisinfopreview img {
    margin: 5px;
    margin-bottom: 11px;
    max-height: 59px;
}

div#langzeitrabatt div.werte_langzeitrabatt:first-child .alert {
    display: none;
}

#hinweis_bestellung {
    margin-top: 10px;
}

.sticky_bottom_before {
    height: 60px;
}

.sticky_bottom {
    bottom: 35px;
    position: fixed;
    width: 100%;
    z-index: 1;
}

.pricingdiv input[type="number"] {
    margin-bottom: 15px;
}
input[type=number], input.hasDatepicker, input.smallboxnumber{
    max-width:120px;
}

.pricingdiv input[type="text"] {
    margin-bottom: 15px;
    max-width: 80%;
}

.pricingdiv input.account_tm {
    max-width: 500px;
}

sub {
    line-height: unset;
    position: unset;
}

[type="checkbox"],
[type="file"],
[type="radio"] {
    margin: 0;
}

table.eingabetabelle,
div.eingabetabelle {
    max-width: 640px;
}
table.eingabetabelle.full-width{
    max-width: 100%;
}

table.eingabetabelle {
    border: 1px solid var(--color-border);
    border-collapse: collapse;
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
    width: 100%;
}

table.eingabetabelle tr:nth-child(even) {
    background-color: var(--color-surface);
}

table.eingabetabelle td {
    border: 1px solid var(--color-border);
    padding: 8px;
}

table.eingabetabelle input,
table.eingabetabelle textarea,
table.eingabetabelle select {
    border-radius: 4px;
    box-sizing: border-box;
}

.preis_setting_container > .einstellungen_tarif {
    margin-bottom: 3px;
    padding: 10px;
}

.preis_setting_container > .einstellungen_tarif:nth-child(even) {
    background-color: var(--color-surface);
}

.ui-tabs .ui-tabs-panel.useACCIntern {
    padding: 5px;
}

.mehrdauer_einheit {
    max-width: 150px;
}

#chatgpt_ergebnis {
    overflow-x: auto;
}

#chatgpt_menu .vertical.menu {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

#chatgpt_menu .vertical.menu li {
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    text-overflow: ellipsis;
    transition:
            background-color 0.2s ease,
            padding-left 0.2s ease;
}

#chatgpt_menu .vertical.menu li:last-child {
    border-bottom: none;
}

/* Hover state */

#chatgpt_menu .vertical.menu li:hover,
#chatgpt_menu .vertical.menu li.active {
    padding-left: 1.25rem;
}
#chatgpt_menu .vertical.menu li:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-on-accent);
}
#chatgpt_menu .vertical.menu li.active {
    background-color: var(--color-primary);
    color: var(--color-on-accent);
}

/* Formulare */

[type="text"],
[type="password"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="month"],
[type="week"],
[type="email"],
[type="number"],
[type="search"],
[type="tel"],
[type="time"],
[type="url"],
[type="color"],
select,
option {
    height: var(--control-height);
}

input[type="number"] {
    padding: 0 var(--space-2);
    text-align: right;
}

input[readonly] {
    cursor: default;
}

textarea {
    height: 4.15rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="number"],
textarea,
select {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    box-sizing: border-box;
    color: var(--color-text);
    transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease;
    width: 100%;
}

/* Placeholder-Farbe */
input::placeholder,
textarea::placeholder {
    color: var(--color-muted);
}

/* Fokus-Zustand */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

/* Disabled-Zustand */
input:disabled,
textarea:disabled,
select:disabled {
    background-color: var(--color-bg);
    color: var(--color-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Fehler- und Erfolgszustand */
input:invalid,
input.feldFehler,
.feldFehler:focus {
    border-color: var(--color-error);
}
input.valid,
input.feldOK,
.feldOK:focus {
    border-color: var(--color-success);
}

/* Optional: kleine Ausnahmen für Inline-Checkbox/Radio */
input[type="checkbox"],
input[type="radio"] {
    border: none;
    box-shadow: none;
    margin-right: 0.25rem;
    padding: 0;
}

/*** Preisliste ***/
#row_preise table tbody tr:nth-child(even){
    background-color: var(--color-surface);
}
#row_preise input[type="text"], #row_preise input[type="number"]  {
    max-width: 120px;
}
#row_preise input[name="bezeichnung"], #row_preise input[name="bezeichnung_internet"]{
    max-width: 100%;
}
#row_preise input::placeholder {
    text-align: right;
}
#row_preise table.tarifVorschau{
    width: 100%;
}

/*Neueinrichtung */
.neueinrichtung.ui-progressbar{
    border: 1px solid var(--color-border);
}

.setup-station-form {
    margin-inline: auto;
    max-width: 68rem;
}

.setup-station-form #tabs-1 > .DivAccordion {
    margin-inline: auto;
}

body[filename="verwaltung-stationen-popup.php"] form:not(.setup-station-form) {
    margin-inline: auto;
    max-width: 80rem;
}

body[filename="verwaltung-stationen-popup.php"] #tabs > .ui-tabs-panel {
    padding: var(--space-4);
}

.station-form-sections {
    display: grid;
    gap: var(--space-4);
}

.station-form-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    overflow: hidden;
}

.station-form-section__header {
    align-items: center;
    background: var(--color-table-header-bg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}

.station-form-section__header i {
    color: var(--color-primary);
}

.station-form-section__header h4,
.station-info-callout h3 {
    color: var(--color-heading);
    font-size: var(--font-size-heading);
    margin: 0;
}

.station-form-grid,
.station-integration-fields,
.station-gps-fields {
    display: grid;
    gap: var(--space-3) var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-4);
}

.station-form-field {
    min-width: 0;
}

.station-form-field > label {
    display: block;
    margin-bottom: var(--space-1);
}

.station-form-field__control > :last-child,
.station-form-field input,
.station-form-field select {
    margin-bottom: 0;
    max-width: none;
    width: 100%;
}

.station-form-field--compact .station-form-field__control {
    align-items: center;
    display: flex;
    min-height: var(--control-height);
}

.station-form-field--compact input[type="checkbox"] {
    width: auto;
}

.station-form-field--wide {
    grid-column: 1 / -1;
}

.station-integration-tab {
    display: grid;
    gap: var(--space-4);
}

.station-info-callout {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    margin: 0;
}

.station-info-callout__icon {
    color: var(--color-primary);
    flex: 0 0 auto;
    font-size: 1.5em;
    margin-top: var(--space-1);
}

.station-info-callout p {
    margin: var(--space-2) 0 0;
}

.station-integration-fields,
.station-gps-fields {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
}

.station-feed-url {
    background: var(--color-table-header-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    display: block;
    overflow-wrap: anywhere;
    padding: var(--space-3);
}

.station-integration-fields .help-text {
    margin: var(--space-2) 0 0;
}

.station-ical-actions {
    margin-top: var(--space-3);
}

.station-ical-actions .button {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
    margin: 0;
}

.station-map {
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    height: 350px;
    overflow: hidden;
    width: 100%;
}

.station-detail-stack,
.station-online-editors {
    display: grid;
    gap: var(--space-4);
}

.station-editor-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.station-content-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    min-width: 0;
    overflow: hidden;
}

.station-content-card__header {
    align-items: flex-start;
    background: var(--color-table-header-bg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.station-content-card__header > i {
    color: var(--color-primary);
    flex: 0 0 auto;
    margin-top: var(--space-1);
}

.station-content-card__header h4 {
    color: var(--color-heading);
    font-size: var(--font-size-heading);
    margin: 0;
}

.station-content-card__header p {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
    margin: var(--space-1) 0 0;
}

.station-content-card__body {
    min-width: 0;
    padding: var(--space-4);
}

.station-content-card__body > :last-child,
.station-content-card__body textarea {
    margin-bottom: 0;
}

.station-freetext-grid {
    display: grid;
    gap: var(--space-3) var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-4);
}

.station-form-section__intro {
    color: var(--color-muted);
    margin: 0;
    padding: var(--space-3) var(--space-4) 0;
}

.station-freetext-grid textarea {
    min-height: 8rem;
    width: 100%;
}

.station-form-grid > .station-form-field:not(.station-form-field--switch) > .help-text {
    color: var(--color-muted);
    display: block;
    font-style: normal;
    line-height: 1.4;
    margin: var(--space-2) 0 0;
    position: static;
}

.station-form-field--switch {
    align-items: center;
    background: var(--color-table-header-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-3);
}

.station-form-field--switch label,
.station-form-field--switch .help-text {
    margin: 0;
}

.station-form-field--switch .station-form-field__control {
    flex: 0 0 auto;
}

.station-form-field--switch input[type="checkbox"] {
    width: auto;
}

.setup-complete {
    display: grid;
    gap: var(--space-4);
}

.setup-complete__intro {
    align-items: flex-start;
    background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
}

.setup-complete__intro strong {
    color: var(--color-heading);
    display: block;
    font-size: var(--font-size-heading);
    margin-bottom: var(--space-1);
}

.setup-complete__intro p,
.setup-complete__details p {
    margin: 0;
}

.setup-complete__icon {
    color: var(--color-primary);
    font-size: 2rem;
    line-height: 1;
}

.setup-complete__details {
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    display: grid;
}

.setup-complete__details p {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.setup-complete__details p + p {
    border-top: 1px solid var(--color-border);
}

.setup-complete__details i {
    color: var(--color-primary);
    margin-top: 0.15em;
    width: 1.2em;
}

.setup-complete__actions {
    display: flex;
    justify-content: flex-end;
}

.setup-complete__button {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
    justify-content: center;
    margin: 0;
}

.belegungsplan-welcome-dialog {
    max-width: calc(100vw - 2rem);
}

.belegungsplan-welcome-dialog .ui-dialog-content {
    max-height: calc(100vh - 8rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
}

.belegungsplan-welcome {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
}

.belegungsplan-welcome__hero {
    align-items: flex-start;
    background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
}

.belegungsplan-welcome__hero-icon {
    color: var(--color-primary);
    flex: 0 0 auto;
    font-size: 2rem;
    line-height: 1;
}

.belegungsplan-welcome__hero-copy {
    min-width: 0;
}

.belegungsplan-welcome__eyebrow {
    color: var(--color-primary);
    display: block;
    font-size: var(--font-size-sub);
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.belegungsplan-welcome__hero-copy strong {
    color: var(--color-heading);
    display: block;
    font-size: var(--font-size-heading);
    margin-bottom: var(--space-2);
}

.belegungsplan-welcome__hero-copy p {
    margin: 0;
}

.belegungsplan-welcome__details {
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    overflow: hidden;
}

.belegungsplan-welcome__details-heading {
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}

.belegungsplan-welcome__details-heading i,
.belegungsplan-welcome__content li > i {
    color: var(--color-primary);
}

.belegungsplan-welcome__content {
    padding: var(--space-3) var(--space-4);
}

.belegungsplan-welcome__content > :last-child {
    margin-bottom: 0;
}

.belegungsplan-welcome__section-title {
    color: var(--color-heading);
    font-size: var(--font-size-standard);
    margin: var(--space-3) 0 var(--space-2);
}

.belegungsplan-welcome__content ul {
    list-style: none;
    margin: 0 0 var(--space-3);
}

.belegungsplan-welcome__content li {
    align-items: flex-start;
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.belegungsplan-welcome__content li > i {
    flex: 0 0 1em;
    margin-top: 0.2em;
    text-align: center;
}

.belegungsplan-welcome__actions {
    display: flex;
    justify-content: flex-end;
}

.belegungsplan-welcome__button {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
    justify-content: center;
    margin: 0;
}

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .station-editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (max-width: 39.9375em) {
    .setup-station-form {
        max-width: none;
    }

    body[filename="verwaltung-stationen-popup.php"] #tabs > .ui-tabs-panel {
        padding: var(--space-3);
    }

    .station-form-grid,
    .station-integration-fields,
    .station-gps-fields,
    .station-editor-grid,
    .station-freetext-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-3);
    }

    .station-editor-grid {
        padding: 0;
    }

    .station-form-field--wide {
        grid-column: auto;
    }

    .station-info-callout {
        padding: var(--space-3);
    }

    .station-content-card__body,
    .station-content-card__header {
        padding: var(--space-3);
    }

    .station-form-field--switch {
        align-items: flex-start;
    }

    .setup-complete__actions,
    .setup-complete__button,
    .belegungsplan-welcome__actions,
    .belegungsplan-welcome__button {
        width: 100%;
    }

    .belegungsplan-welcome {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .belegungsplan-welcome__hero {
        padding: var(--space-3);
    }
}

/*Fahrzeug umbuchen */
.station_row table{
    margin-bottom:0;
}
.station_row.fzg_station_hide{
    display:none;
}



.spinner {
    display: inline-block;
    height: 1em;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    margin-right: 0.35em;
    vertical-align: middle;
    width: 1em;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.statusanzeige select{
    max-width:133px;
}

.ui-tabs-panel > .row {
    margin-left:0;
    margin-right:0;
}
#form_intervall_aktiv_label{
    margin-bottom: 10px;
}

td.positionen{
    /* Grundlegendes: Zeilenumbruch erlauben */
    white-space: normal;
    word-wrap: break-word;
    -webkit-box-orient: vertical;       /* vertikale Ausrichtung */
    -webkit-line-clamp: 3;              /* auf 3 Zeilen beschränken */
    overflow: hidden;
}

.callout label .switch {
    margin-bottom: 1rem;
    margin-top: 1rem;
}
.ui-tabs-panel.ui-widget-content {
    margin-left:0;
}
.row .column > label {
    margin-top: 0.5rem;
}

div#tabs-grundeinstellungen .tabs .column {
    border-top: 0;
    padding: 0.5rem;
}

/* Ruhige Optionsgruppen statt eines durchgehenden Rasters aus Trennlinien. */
div#tabs-grundeinstellungen .ui-tabs-panel > .row:has(> .large-4) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3);
}

div#tabs-grundeinstellungen .ui-tabs-panel > .row:has(> .large-4)::before,
div#tabs-grundeinstellungen .ui-tabs-panel > .row:has(> .large-4)::after {
    display: none;
}

div#tabs-grundeinstellungen .ui-tabs-panel > .row:has(> .large-4) > .column {
    background-color: var(--color-bg-shading);
    border: 0;
    border-radius: var(--panel-radius);
    display: flex;
    flex-direction: column;
    float: none;
    gap: var(--space-2);
    justify-content: space-between;
    min-height: 4.5rem;
    padding: var(--space-3);
    width: auto;
}

div#tabs-grundeinstellungen .ui-tabs-panel > .row:has(> .large-4) > .column:empty {
    display: none;
}

div#tabs-grundeinstellungen .ui-tabs-panel > .row:has(> .large-4) > .column:not(.large-4) {
    grid-column: 1 / -1;
}

div#tabs-grundeinstellungen .ui-tabs-panel > .row:has(> .large-4) > .column > .premiumaccount {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-2);
    justify-content: space-between;
}

@media (min-width: 640px) {
    div#tabs-grundeinstellungen .ui-tabs-panel > .row:has(> .large-4) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    div#tabs-grundeinstellungen .ui-tabs-panel > .row:has(> .large-4) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Einstellungen: bereichsübergreifende Suche und tabellarische Optionslisten. */
.settings-browser__search {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    margin: 0 0 calc(var(--space-4) + var(--space-2));
    padding: var(--space-3);
}

#tabs-app .settings-app-guide {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
    margin: 0 0 calc(var(--space-4) + var(--space-2));
    overflow: hidden;
}

.settings-app-guide__header {
    align-items: center;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--space-4);
}

.settings-app-guide__hero-icon,
.settings-app-guide__step-icon {
    align-items: center;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    color: var(--color-primary);
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
}

.settings-app-guide__hero-icon {
    border-radius: var(--panel-radius);
    font-size: var(--font-size-heading);
    height: 3rem;
    width: 3rem;
}

.settings-app-guide__heading {
    min-width: 0;
}

.settings-app-guide__eyebrow {
    color: var(--color-primary);
    display: block;
    font-size: var(--font-size-sub);
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.settings-app-guide h2,
.settings-app-guide h3,
.settings-app-guide p {
    margin-top: 0;
}

.settings-app-guide h2 {
    margin-bottom: var(--space-1);
}

.settings-app-guide h3 {
    margin-bottom: var(--space-3);
}

.settings-app-guide__heading p {
    color: var(--color-muted);
    margin-bottom: 0;
    max-width: 52rem;
}

.settings-app-guide__store-link {
    align-items: center;
    display: inline-flex !important;
    gap: var(--space-2);
    justify-content: center;
    margin: 0 !important;
    white-space: nowrap;
}

.settings-app-guide__content {
    border-top: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.72fr);
}

.settings-app-guide__instructions,
.settings-app-guide__login {
    min-width: 0;
    padding: var(--space-4);
}

.settings-app-guide__steps {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
}

.settings-app-guide__steps > li {
    align-items: start;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 2.25rem minmax(0, 1fr);
}

.settings-app-guide__step-icon {
    border-radius: 50%;
    height: 2.25rem;
    width: 2.25rem;
}

.settings-app-guide__steps strong,
.settings-app-guide__steps li > div > span,
.settings-app-guide__login figcaption strong,
.settings-app-guide__login figcaption > span,
.settings-app-guide__security strong,
.settings-app-guide__security span,
.settings-app-guide__package strong,
.settings-app-guide__package span {
    display: block;
}

.settings-app-guide__steps strong,
.settings-app-guide__login figcaption strong,
.settings-app-guide__security strong,
.settings-app-guide__package strong {
    color: var(--color-heading);
    font-size: var(--font-size-standard);
}

.settings-app-guide__steps li > div > span,
.settings-app-guide__login figcaption > span:not(.settings-app-guide__eyebrow),
.settings-app-guide__security span,
.settings-app-guide__package span {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
    margin-top: var(--space-1);
}

.settings-app-guide__security,
.settings-app-guide__package {
    align-items: start;
    background: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
}

.settings-app-guide__security {
    margin-top: var(--space-4);
}

.settings-app-guide__security > i,
.settings-app-guide__package > i {
    color: var(--color-primary);
    flex: 0 0 auto;
    margin-top: var(--space-1);
}

.settings-app-guide__login {
    align-items: center;
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    text-align: center;
}

.settings-app-guide__login figcaption {
    margin-bottom: var(--space-3);
}

.settings-app-guide__qr-frame {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
    padding: var(--space-3);
}

.settings-app-guide__qr-frame img {
    display: block;
    height: auto;
    max-width: 11rem;
    width: 100%;
}

.settings-app-guide__login p {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
    margin: var(--space-3) 0 0;
    max-width: 30rem;
}

.settings-app-guide__package {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    border-bottom: 0;
    padding: var(--space-3) var(--space-4);
}

@media (max-width: 63.9375em) {
    .settings-app-guide__header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .settings-app-guide__store-link {
        grid-column: 2;
        justify-self: start;
    }

    .settings-app-guide__content {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-app-guide__login {
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }
}

@media (max-width: 39.9375em) {
    .settings-app-guide__header {
        align-items: start;
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-app-guide__hero-icon {
        height: 2.5rem;
        width: 2.5rem;
    }

    .settings-app-guide__store-link {
        grid-column: 1;
        justify-self: stretch;
        white-space: normal;
    }

    .settings-app-guide__instructions,
    .settings-app-guide__login,
    .settings-app-guide__header {
        padding: var(--space-3);
    }

    .settings-app-guide__package {
        padding: var(--space-3);
    }
}

.settings-browser__label {
    align-items: center;
    color: var(--color-text);
    display: flex;
    font-size: var(--font-size-standard);
    font-weight: 600;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
}

.settings-browser__label > i {
    color: var(--color-primary);
    flex: 0 0 auto;
}

.settings-browser__search-control {
    align-items: stretch;
    display: flex;
    gap: var(--space-2);
    max-width: 42rem;
}

.settings-browser__input {
    box-sizing: border-box;
    flex: 1 1 auto;
    height: var(--control-height) !important;
    margin: 0 !important;
    min-width: 0;
    width: 100%;
}

.settings-browser__clear {
    align-items: center;
    align-self: stretch;
    box-sizing: border-box;
    display: inline-grid !important;
    flex: 0 0 var(--control-height);
    height: var(--control-height) !important;
    justify-content: center;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center;
    position: static;
    vertical-align: top;
    width: var(--control-height);
}

.settings-browser__clear > i {
    line-height: 1;
}

.settings-browser__summary {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
    margin: var(--space-2) 0 0;
}

.settings-browser__summary:empty,
.settings-browser__tabs--empty {
    display: none !important;
}

.settings-browser__empty {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    margin: var(--space-3) 0;
    padding: var(--space-3);
}

.settings-table-wrapper {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    margin: 0 0 var(--space-3);
    overflow: auto;
}

.settings-table-wrapper--datatable {
    border: 0;
    overflow: visible;
}

#tabs-app .settings-table-wrapper--datatable .dt-layout-row:first-child {
    margin-top: 0;
}

#tabs-app .settings-table-wrapper--datatable .dt-search {
    margin-left: auto;
}

.settings-table {
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    table-layout: fixed;
    width: 100%;
}

.settings-table th {
    background: var(--color-table-header-bg);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-heading);
    font-size: var(--font-size-standard);
    font-weight: 600;
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: middle;
}

.settings-table th:first-child {
    width: 11rem;
}

.settings-table th:nth-child(2) {
    width: 32%;
}

.settings-table td {
    background: var(--color-surface);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--font-size-standard);
    overflow-wrap: anywhere;
    padding: var(--space-2) var(--space-3);
    vertical-align: middle;
}

.settings-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--color-primary) 2.5%, var(--color-surface));
}

.settings-table tbody tr:last-child td {
    border-bottom: 0;
}

.settings-checklist-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
}

.settings-checklist-box > .callout {
    margin: 0 0 var(--space-3);
}

.settings-checklist-box > .tabs {
    margin: 0;
}

.settings-table__control {
    min-width: 0;
}

.settings-table__control input:not([type="checkbox"]):not([type="radio"]),
.settings-table__control select,
.settings-table__control textarea,
.settings-table__control .select2-container,
.settings-table__control > .premiumaccount input:not([type="checkbox"]):not([type="radio"]),
.settings-table__control > .premiumaccount select,
.settings-table__control > .premiumaccount textarea,
.settings-table__control > .premiumaccount .select2-container {
    margin: 0;
    max-width: 20rem;
    width: 100% !important;
}

.settings-table__control input[type="checkbox"],
.settings-table__control input[type="radio"] {
    margin-bottom: 0;
}

.settings-table__label {
    color: var(--color-text);
    font-weight: 500;
    line-height: 1.4;
}

.settings-table__description {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
    line-height: 1.4;
}

.settings-table__description:empty::before {
    content: "\2014";
}

.settings-email-table th:first-child {
    width: 20rem;
}

.settings-email-table th:nth-child(2) {
    width: 32%;
}

.settings-email-table__warning {
    color: var(--color-text);
    display: block;
    font-weight: 500;
    margin-top: var(--space-1);
}

.settings-email-test {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-4);
}

.settings-email-test__content {
    min-width: 0;
}

.settings-email-test h2 {
    color: var(--color-heading);
    font-size: var(--font-size-heading);
    margin: 0 0 var(--space-2);
}

.settings-email-test p {
    margin: 0;
}

.settings-email-test__recipient {
    color: var(--color-muted);
    margin-top: var(--space-3) !important;
}

.settings-email-test__recipient strong {
    color: var(--color-text);
}

.settings-email-test__actions {
    flex: 0 0 auto;
}

.settings-email-test__actions .button {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
    justify-content: center;
    margin: 0;
}

.google-mail-settings {
    display: grid;
    gap: var(--space-3);
}

.google-mail-settings__status {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    color: var(--color-text);
    line-height: 1.65;
    padding: var(--space-3);
}

.google-mail-settings__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.google-mail-settings__actions .button {
    margin: 0;
}

.settings-table__control-heading {
    font-size: 0;
}

.settings-table .fa-circle-info,
.settings-table .settings-list__info {
    display: none !important;
}

.settings-table-panel > .row:empty,
.settings-table-panel > .row_abstand:empty,
.settings-table-panel > .premiumaccount:empty,
.settings-list-source:empty,
.settings-list__separator {
    display: none !important;
}

.settings-table__control > .premiumaccount {
    align-items: center;
    display: flex;
}

@media (max-width: 639px) {
    .settings-email-test {
        align-items: stretch;
        flex-direction: column;
        padding: var(--space-3);
    }

    .settings-email-test__actions .button {
        width: 100%;
    }

    .google-mail-settings__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .google-mail-settings__actions .button {
        width: 100%;
    }

    .settings-table thead {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .settings-table,
    .settings-table tbody,
    .settings-table tr,
    .settings-table td {
        display: block;
        width: 100%;
    }

    .settings-table tr {
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-2) 0;
    }

    .settings-table tbody tr:last-child {
        border-bottom: 0;
    }

    .settings-table td,
    .settings-table tbody tr:nth-child(even) td {
        background: var(--color-surface);
        border-bottom: 0;
        display: grid;
        gap: var(--space-2);
        grid-template-columns: 6.5rem minmax(0, 1fr);
        padding: var(--space-2) var(--space-3);
    }

    .settings-table td::before {
        color: var(--color-muted);
        content: attr(data-label);
        font-size: var(--font-size-sub);
        font-weight: 600;
    }

    .settings-table__control input:not([type="checkbox"]):not([type="radio"]),
    .settings-table__control select,
    .settings-table__control textarea,
    .settings-table__control .select2-container {
        max-width: none;
    }
}

/* Einstellungen > Layout: Hinweise klar von der vorausgehenden Auswahl trennen. */
#tabs-css .settings-layout-hint {
    margin-bottom: var(--space-4);
    margin-top: var(--space-4);
}

#tabs-css .settings-layout-hint > .app-icon {
    margin-right: var(--space-2);
}

#tabs-syspara-reset .settings-reset-warning {
    margin-bottom: var(--space-4);
}

.settings-reset-intro {
    margin-bottom: var(--space-4);
}

.settings-reset-intro h2,
.settings-reset-intro p,
.settings-reset-card h3,
.settings-reset-card p {
    margin: 0;
}

.settings-reset-intro p,
.settings-reset-card p {
    color: var(--color-muted);
    margin-top: var(--space-1);
}

.settings-reset-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-reset-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    justify-content: space-between;
    min-width: 0;
    padding: var(--space-4);
}

.settings-reset-card--setup {
    border-color: var(--color-warning);
}

.settings-reset-card__heading {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
}

.settings-reset-card__heading > .app-icon {
    align-items: center;
    background: var(--color-bg-shading);
    border-radius: var(--control-radius);
    color: var(--color-primary);
    display: inline-flex;
    flex: 0 0 var(--control-height);
    height: var(--control-height);
    justify-content: center;
    margin: 0;
    width: var(--control-height);
}

.settings-reset-card--setup .settings-reset-card__heading > .app-icon {
    color: var(--color-warning);
}

.settings-reset-card__heading > div {
    min-width: 0;
}

.settings-reset-card__actions {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
}

.settings-reset-card__actions .button {
    height: auto;
    line-height: 1.3;
    margin: 0;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3);
    white-space: normal;
}

@media only screen and (max-width: 63.9375em) {
    .settings-reset-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * Backend-Facelift 2026
 *
 * Zentrale Theme-Schicht für das bestehende AVS-Markup. Foundation-,
 * jQuery-UI-, DataTables- und FullCalendar-Strukturen bleiben unverändert;
 * ausschließlich ihre sichtbare Darstellung wird vereinheitlicht.
 */

/* Fundament und Typografie */
body {
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-standard);
    line-height: 1.5;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-heading);
    font-size: var(--font-size-heading);
    line-height: 1.25;
}

h1 {
    font-size: var(--font-size-heading);
    margin-bottom: var(--space-4);
}

h2 {
    font-size: var(--font-size-heading);
}

h3 {
    font-size: var(--font-size-heading);
}

a {
    color: var(--color-primary);
    transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease,
            box-shadow 0.2s ease;
}

a:hover,
a:focus {
    color: var(--color-primary-hover);
}

a:focus-visible {
    border-radius: var(--control-radius);
    box-shadow: var(--focus-ring);
    outline: none;
}

div.content-row.row {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    width: 100%;
}

div#contentbereich[filename="belegungsplan.php"],
div#contentbereich[filename="verwaltung-formularev2.php"] {
    max-width: 100%;
}

/* Formulareditor: verfügbare Arbeitsfläche statt fester 400-Pixel-Höhe. */
body[filename="verwaltung-formularev2.php"] #tabs-edit {
    padding: var(--space-2);
}

body[filename="verwaltung-formularev2.php"] #tabs-edit > .row {
    align-items: start;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    width: 100%;
}

body[filename="verwaltung-formularev2.php"] #tabs-edit > .row::before,
body[filename="verwaltung-formularev2.php"] #tabs-edit > .row::after {
    display: none;
}

body[filename="verwaltung-formularev2.php"] #tabs-edit > .row > .column {
    float: none;
    min-width: 0;
    padding: 0;
    width: auto;
}

body[filename="verwaltung-formularev2.php"] #tabs-edit .formularedit,
body[filename="verwaltung-formularev2.php"] #tabs-edit .formularedit .tabs {
    margin-top: 0;
}

body[filename="verwaltung-formularev2.php"] #tabs-edit .formularedit .ui-tabs-panel {
    padding: var(--space-2);
}

body[filename="verwaltung-formularev2.php"] #tabs-edit div.codeHTML {
    height: max(20rem, calc(100dvh - 19rem));
    max-width: none;
    width: 100%;
}

body[filename="verwaltung-formularev2.php"] #tabs-edit .ace_editor,
body[filename="verwaltung-formularev2.php"] #tabs-edit .ace_editor *,
body[filename="verwaltung-formularev2.php"] #formular_json,
body[filename="verwaltung-formularev2.php"] #formular_json .json-viewer,
body[filename="verwaltung-formularev2.php"] #formular_json .json-viewer * {
    font-size: var(--font-size-sub) !important;
}

body[filename="verwaltung-formularev2.php"] #formular_json {
    background-color: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-sizing: border-box;
    height: 24rem;
    overflow: auto;
    padding: var(--space-3);
}

body[filename="verwaltung-formularev2.php"] #formular_json .json-viewer {
    margin: 0;
    min-width: max-content;
    padding-left: var(--space-3);
}

@media (min-width: 1024px) {
    body[filename="verwaltung-formularev2.php"] #tabs-edit > .row {
        grid-template-columns: minmax(0, 3fr) minmax(20rem, 1fr);
    }

    body[filename="verwaltung-formularev2.php"] #tabs-edit div.codeHTML {
        height: max(24rem, calc(100dvh - 20rem));
    }

    body[filename="verwaltung-formularev2.php"] #formular_json {
        height: max(32rem, calc(100dvh - 8rem));
    }
}

#contentbereich,
#contentbereich > .columns,
#contentbereich .ui-tabs,
#contentbereich .ui-tabs-panel,
#contentbereich .fc {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

/* Hauptnavigation und Foundation-Dropdowns */
.menucontainer {
    background-color: var(--color-surface);
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-panel);
    max-width: 100%;
    min-height: 4rem;
    width: 100%;
    z-index: 1000;
}

.menucontainer > ul.menu.menutop {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0 auto;
    max-width: none;
    padding: var(--space-2) var(--space-4);
    width: 100%;
}

.menucontainer .menutop > li {
    align-items: center;
    display: flex;
    margin: 0;
}

.menucontainer .menutop > li:first-child {
    flex: 0 0 auto;
    margin-right: var(--space-3);
}

.menucontainer #topbarlink {
    border-bottom: 0;
    padding: var(--space-1) var(--space-2);
}

.menucontainer #topbarlink img {
    display: block;
    max-height: 2.75rem;
    max-width: 7rem;
    object-fit: contain;
}

.menucontainer .menutop > li > a:not(#topbarlink) {
    align-items: center;
    border-bottom: 2px solid transparent;
    border-radius: var(--control-radius) var(--control-radius) 0 0;
    color: var(--color-text);
    display: flex;
    font-size: var(--font-size-standard);
    line-height: 1.25;
    min-height: 2.75rem;
    padding: var(--space-3);
    white-space: nowrap;
}

.menucontainer .menutop > li > a:not(#topbarlink):hover,
.menucontainer .menutop > li > a:not(#topbarlink):focus,
.menucontainer .menutop > li.is-active > a:not(#topbarlink),
.menucontainer .menutop > li.is-dropdown-submenu-parent.is-active > a:not(#topbarlink) {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}

.menucontainer .menutop > li > a:not(#topbarlink):hover,
.menucontainer .menutop > li > a:not(#topbarlink):focus {
    background-color: var(--color-bg-shading);
}

.menucontainer .menutop a,
.menucontainer .menutop a:hover,
.menucontainer .menutop a:focus {
    text-decoration: none;
}

.menucontainer .menutop > li.is-active > a:not(#topbarlink),
.menucontainer .menutop > li.is-dropdown-submenu-parent.is-active > a:not(#topbarlink) {
    background-color: transparent;
}

body[filename="belegungsplan.php"] .menutop > li > a[href="belegungsplan.php"],
body[filename="buchung.php"] .menutop > li > a[href="vorgang.php"],
body[filename^="vorgang-"] .menutop > li > a[href="vorgang.php"],
body[filename="vorgang.php"] .menutop > li > a[href="vorgang.php"],
body[filename^="statistik-"] .menutop > li > a[href="reporting.php"],
body[filename="reporting.php"] .menutop > li > a[href="reporting.php"],
body[filename^="verwaltung-"] .menutop > li > a[href="verwaltung.php"],
body[filename="verwaltung.php"] .menutop > li > a[href="verwaltung.php"],
body[filename="einstellungen.php"] .menutop > li > a[href="einstellungen.php"] {
    background-color: transparent;
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}

.menucontainer .menutop > li > a.SUA:not(#topbarlink) {
    align-self: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
    border-radius: var(--control-radius);
    color: var(--color-primary);
    margin-left: var(--space-1);
}

.menucontainer .menutop > li > a.SUA:not(#topbarlink):hover,
.menucontainer .menutop > li > a.SUA:not(#topbarlink):focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-on-accent);
}

.menucontainer .menutop > li.suche {
    flex: 0 1 12ch;
    justify-content: flex-end;
    margin-left: auto;
    padding: 0;
}

.menucontainer .menutop > li.suche input[type="search"] {
    box-sizing: border-box;
    margin: 0;
    max-width: 12ch;
    min-width: 0;
    width: 12ch;
}

.menucontainer .is-dropdown-submenu {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-floating);
    min-width: 17.5rem;
    padding: var(--space-2);
    z-index: 1010;
}

.menucontainer .is-dropdown-submenu > li {
    display: block;
    margin: 0;
}

.menucontainer .is-dropdown-submenu > li > a {
    align-items: center;
    border-radius: var(--control-radius);
    color: var(--color-text);
    display: flex;
    font-size: var(--font-size-standard);
    line-height: 1.25;
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-3);
    white-space: normal;
}

.menucontainer .is-dropdown-submenu > li > a:hover,
.menucontainer .is-dropdown-submenu > li > a:focus,
.menucontainer .is-dropdown-submenu > li.is-active > a {
    background-color: var(--color-bg-shading);
    color: var(--color-primary);
}

.menucontainer .dropdown.menu.menutop > li.is-dropdown-submenu-parent > a::after {
    border: solid var(--color-primary);
    border-width: 0 0.125rem 0.125rem 0;
    content: "";
    display: block;
    height: 0.4rem;
    margin-top: -0.3rem;
    right: var(--space-3);
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 0.4rem;
}

.menucontainer .dropdown.menu.menutop .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after {
    margin-top: -0.2rem;
    transform: rotate(-45deg);
}

.menucontainer .is-dropdown-submenu-parent > a {
    padding-right: 1.75rem !important;
    position: relative;
}

/* Sekundäre Navigation und Footer */
.top-bar {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-panel);
}

.top-bar .menu,
.top-bar .menu li {
    background-color: transparent;
}

.top-bar .menu a {
    color: var(--color-text);
    padding: var(--space-3);
}

.top-bar .menu a:hover,
.top-bar .menu a:focus {
    background-color: var(--color-bg-shading);
    color: var(--color-primary);
}

body.noframe .menubottom-before {
    height: 3.75rem;
}

.menubottom.regular {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: none;
    opacity: 1;
    padding: var(--space-2) var(--space-4);
    bottom: 0;
    left: 0;
    min-height: 3.5rem;
    position: fixed;
    right: 0;
    z-index: 1000;
}

.menubottom {
    box-shadow: none;
}

.menubottom.regular > ul {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2) var(--space-4);
    justify-content: flex-end;
    margin: 0 auto;
    max-width: none;
    overflow-x: auto;
    padding: 0;
    width: 100%;
}

.menubottom.regular li,
.menubottom.regular li:last-child {
    margin: 0;
    padding: 0;
}

.menubottom.regular a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    box-sizing: border-box;
    color: var(--color-text);
    display: inline-flex;
    gap: var(--space-1);
    min-height: 2.25rem;
    padding: var(--space-1) var(--space-2);
    opacity: 1;
}

.menubottom.regular a:hover,
.menubottom.regular a:focus {
    background-color: var(--color-bg-shading);
    color: var(--color-primary);
}

.menubottom.regular .backend-night-shift-toggle {
    align-items: center;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    box-sizing: border-box;
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    font-weight: normal;
    gap: var(--space-1);
    min-height: 2.25rem;
    padding: var(--space-1) var(--space-2);
}

.menubottom.regular .backend-night-shift-toggle:hover,
.menubottom.regular .backend-night-shift-toggle:focus,
.menubottom.regular .backend-night-shift-toggle[aria-pressed="true"] {
    background-color: var(--color-bg-shading);
    color: var(--color-primary);
}

.menubottom.regular .backend-night-shift-toggle:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

body.frame .menubottom.regular {
    position: static;
}

.menubottom.regular select {
    height: 2.25rem;
    margin: 0;
    min-width: 8rem;
    width: auto;
}

.menubottom.regular .backend-footer-more {
    display: none;
}

/* Foundation-Formulare und Buttons */
label {
    color: var(--color-text);
    font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="number"],
textarea,
select {
    box-shadow: none;
    margin-bottom: var(--space-3);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

select:not([multiple]) {
    background-image:
            linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
            linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
    background-origin: border-box;
    background-position:
            calc(100% - var(--space-3) - 0.125rem) calc(50% + 0.125rem),
            calc(100% - var(--space-3) + 0.125rem) calc(50% + 0.125rem);
    background-repeat: no-repeat;
    background-size: 0.25rem 0.25rem;
    padding-right: calc(var(--space-4) + var(--space-2));
}

input[readonly],
textarea[readonly] {
    background-color: var(--color-bg-shading);
    color: var(--color-muted);
}

button:not(.ui-datepicker-trigger):not(.dt-paging-button),
input[type="button"],
input[type="submit"],
a.button,
.ui-button {
    border-radius: var(--control-radius);
    font-weight: 600;
    height: var(--control-height);
    line-height: calc(var(--control-height) - 2px);
    min-height: var(--control-height);
    padding-bottom: 0;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    padding-top: 0;
}

@media only screen and (max-width: 39.9375em) {
    :root {
        --control-height: 2.25rem;
    }
}

.button.tiny,
button.tiny {
    line-height: calc(var(--control-height) - 2px);
    min-height: var(--control-height);
    padding: 0 var(--space-2);
}

input:checked ~ .switch-paddle {
    background-color: var(--color-primary);
}

.switch-paddle {
    background-color: var(--color-muted);
}

/* Foundation-Switches als ruhige, kompakte Pillen statt großer Rechteckflächen. */
.switch {
    align-items: center;
    display: flex;
    min-height: var(--control-height);
}

body .switch label.switch-paddle {
    background-color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-surface) 20%, transparent);
    height: 1.375rem;
    transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease;
    width: 2.5rem;
}

label > .switch {
    flex: 0 0 auto;
    height: 1.375rem;
    margin-bottom: 0;
    margin-right: var(--space-2);
    margin-top: 0;
    min-height: 1.375rem;
}

.switch > .switch-paddle::after {
    background-color: var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    height: 1rem;
    left: 2px;
    top: 2px;
    transition: left 0.2s ease;
    width: 1rem;
}

.switch-input:checked ~ .switch-paddle {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.switch-input:checked ~ .switch-paddle::after {
    left: calc(100% - 1rem - 2px);
}

.switch-input:focus-visible ~ .switch-paddle {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.switch-input:disabled ~ .switch-paddle {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Verwaltung > Frontend: Legacy-Checkboxen an den Backend-Standardswitch angleichen. */
#tabs-frontend input[type="checkbox"]:not(.switch-input) {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-surface) 20%, transparent);
    cursor: pointer;
    display: inline-block;
    flex: 0 0 auto;
    height: 1.375rem;
    margin: 0 var(--space-2) 0 0;
    padding: 0;
    position: relative;
    transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease;
    vertical-align: middle;
    width: 2.5rem;
}

#tabs-frontend input[type="checkbox"]:not(.switch-input)::after {
    background-color: var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    content: "";
    height: 1rem;
    left: 2px;
    position: absolute;
    top: 2px;
    transition: left 0.2s ease;
    width: 1rem;
}

#tabs-frontend input[type="checkbox"]:not(.switch-input):checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

#tabs-frontend input[type="checkbox"]:not(.switch-input):checked::after {
    left: calc(100% - 1rem - 2px);
}

#tabs-frontend input[type="checkbox"]:not(.switch-input):focus-visible {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

#tabs-frontend input[type="checkbox"]:not(.switch-input):disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

#tabs-frontend .assi_input_around.check {
    align-items: center;
    display: flex;
    min-height: var(--control-height);
}

#tabs-frontend .assi_input_around.check > label {
    flex: 1 1 auto;
    margin: 0;
}

#tabs-frontend .tageauswahl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

#tabs-frontend .tageauswahl label {
    align-items: center;
    display: flex;
    height: auto;
    margin: 0;
    min-height: var(--control-height);
    padding: 0;
}

#tabs-frontend .frontend-individual-content-reset {
    align-items: center;
    display: flex;
    gap: var(--space-5);
    justify-content: space-between;
    margin-top: var(--space-5);
}

#tabs-frontend .frontend-individual-content-reset__copy {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
}

#tabs-frontend .frontend-individual-content-reset__copy > .app-icon {
    color: var(--color-primary);
    flex: 0 0 auto;
    margin-top: 0.15em;
}

#tabs-frontend .frontend-individual-content-reset__copy p {
    margin: var(--space-1) 0 0;
}

#tabs-frontend .frontend-individual-content-reset > .button {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

@media screen and (max-width: 39.9375em) {
    #tabs-frontend .frontend-individual-content-reset {
        align-items: stretch;
        flex-direction: column;
    }

    #tabs-frontend .frontend-individual-content-reset > .button {
        width: 100%;
    }
}

/* Verwaltung > Frontend > Vorschau: direkte Frontend-Ziele als Linkkarten. */
#tabs-frontend-5-link .frontend-preview-links {
    display: grid;
    gap: var(--space-4);
}

#tabs-frontend-5-link .frontend-preview-links-intro {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    margin: 0;
}

#tabs-frontend-5-link .frontend-preview-links-intro > .app-icon {
    align-items: center;
    background-color: var(--color-bg-shading);
    border-radius: 50%;
    color: var(--color-primary);
    display: inline-flex;
    flex: 0 0 2rem;
    height: 2rem;
    justify-content: center;
    margin: 0;
    width: 2rem;
}

#tabs-frontend-5-link .frontend-preview-links-intro p {
    color: var(--color-muted);
    margin: var(--space-1) 0 0;
}

#tabs-frontend-5-link .frontend-preview-link-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
}

#tabs-frontend-5-link .frontend-preview-link-card {
    align-content: start;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
}

#tabs-frontend-5-link .frontend-preview-link-card-header {
    align-items: center;
    display: flex;
    gap: var(--space-2);
}

#tabs-frontend-5-link .frontend-preview-link-card-header > .app-icon {
    color: var(--color-primary);
    flex: 0 0 1.25rem;
    margin: 0;
    text-align: center;
    width: 1.25rem;
}

#tabs-frontend-5-link .frontend-preview-link-card-header h3 {
    color: var(--color-text);
    font-size: var(--font-size-standard);
    margin: 0;
}

#tabs-frontend-5-link .frontend-preview-link-url {
    align-items: center;
    background-color: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    color: var(--color-text);
    display: grid;
    font-size: var(--font-size-sub);
    gap: var(--space-2);
    grid-template-columns: 1rem minmax(0, 1fr);
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3);
}

#tabs-frontend-5-link .frontend-preview-link-url > .app-icon {
    color: var(--color-muted);
    margin: 0;
}

#tabs-frontend-5-link .frontend-preview-link-url > span {
    overflow-wrap: anywhere;
}

#tabs-frontend-5-link .frontend-preview-link-action {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
    justify-self: start;
    margin: 0;
}

#tabs-frontend-5-link .frontend-preview-link-action > .app-icon {
    margin: 0;
}

@media only screen and (min-width: 64em) {
    #tabs-frontend-5-link .frontend-preview-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Verwaltung > Frontend > Standardtexte: fachlich gruppierte Editor-Karten. */
#tabs-frontend-standardtexte .frontend-standardtexts {
    display: grid;
    gap: var(--space-4);
}

#tabs-frontend-standardtexte .frontend-standardtexts-intro {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    margin: 0;
}

#tabs-frontend-standardtexte .frontend-standardtexts-intro > .app-icon,
#tabs-frontend-standardtexte .frontend-standardtext-group-header > .app-icon {
    align-items: center;
    background-color: var(--color-bg-shading);
    border-radius: 50%;
    color: var(--color-primary);
    display: inline-flex;
    flex: 0 0 2rem;
    height: 2rem;
    justify-content: center;
    margin: 0;
    width: 2rem;
}

#tabs-frontend-standardtexte .frontend-standardtexts-intro p,
#tabs-frontend-standardtexte .frontend-standardtext-group-header p,
#tabs-frontend-standardtexte .frontend-standardtext-card-header p {
    color: var(--color-muted);
    margin: var(--space-1) 0 0;
}

#tabs-frontend-standardtexte .frontend-standardtext-group {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    padding: var(--space-4);
}

#tabs-frontend-standardtexte .frontend-standardtext-group-header {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

#tabs-frontend-standardtexte .frontend-standardtext-group-header h2,
#tabs-frontend-standardtexte .frontend-standardtext-card-header h3 {
    color: var(--color-text);
    margin: 0;
}

#tabs-frontend-standardtexte .frontend-standardtext-group-header h2 {
    font-size: var(--font-size-heading);
}

#tabs-frontend-standardtexte .frontend-standardtext-card-header h3 {
    font-size: var(--font-size-standard);
}

#tabs-frontend-standardtexte .frontend-standardtext-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
}

#tabs-frontend-standardtexte .frontend-standardtext-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    min-width: 0;
    padding: var(--space-3);
}

#tabs-frontend-standardtexte .frontend-standardtext-card-header {
    margin-bottom: var(--space-3);
}

#tabs-frontend-standardtexte .frontend-standardtext-card-header a {
    white-space: nowrap;
}

#tabs-frontend-standardtexte .frontend-standardtext-variables {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

#tabs-frontend-standardtexte .frontend-standardtext-variables code {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    color: var(--color-text);
    font-size: var(--font-size-sub);
    padding: var(--space-1) var(--space-2);
}

#tabs-frontend-standardtexte .frontend-standardtext-language-tabs {
    margin-top: var(--space-3);
}

#tabs-frontend-standardtexte .frontend-standardtext-card .callout {
    align-items: center;
    display: flex;
    font-size: var(--font-size-sub);
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

#tabs-frontend-standardtexte .frontend-standardtext-card .callout > .app-icon {
    flex: 0 0 auto;
    margin: 0;
}

#tabs-frontend-standardtexte .frontend-standardtext-card textarea,
#tabs-frontend-standardtexte .frontend-standardtext-card .cke {
    width: 100% !important;
}

@media only screen and (min-width: 64em) {
    #tabs-frontend-standardtexte .frontend-standardtext-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Verwaltung > AGB und Datenschutz: mehrsprachige Rechtstexte und Dokumenthinweise. */
#tabs-standardtexte .legal-texts {
    display: grid;
    gap: var(--space-4);
    margin: 0 auto;
    max-width: 112rem;
}

#tabs-standardtexte .legal-texts-intro,
#tabs-standardtexte .legal-texts-setup-hint,
#tabs-standardtexte .legal-texts-section-header {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
}

#tabs-standardtexte .legal-texts-intro,
#tabs-standardtexte .legal-texts-setup-hint {
    margin: 0;
}

#tabs-standardtexte .legal-texts-intro > .app-icon,
#tabs-standardtexte .legal-texts-section-header > .app-icon {
    align-items: center;
    background-color: var(--color-bg-shading);
    border-radius: 50%;
    color: var(--color-primary);
    display: inline-flex;
    flex: 0 0 2.25rem;
    height: 2.25rem;
    justify-content: center;
    margin: 0;
    width: 2.25rem;
}

#tabs-standardtexte .legal-texts-intro p,
#tabs-standardtexte .legal-texts-section-header p,
#tabs-standardtexte .legal-text-card-header p {
    color: var(--color-muted);
    margin: var(--space-1) 0 0;
}

#tabs-standardtexte .legal-texts-editor-hint {
    align-items: center;
    display: flex;
    font-size: var(--font-size-sub);
    gap: var(--space-2);
}

#tabs-standardtexte .legal-texts-editor-hint > .app-icon,
#tabs-standardtexte .legal-texts-setup-hint > .app-icon {
    flex: 0 0 auto;
    margin: 0;
}

#tabs-standardtexte .legal-texts-setup-hint p {
    margin: 0;
}

#tabs-standardtexte .legal-texts-section {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    padding: var(--space-4);
}

#tabs-standardtexte .legal-texts-section-header {
    margin-bottom: var(--space-4);
}

#tabs-standardtexte .legal-texts-section-header h2,
#tabs-standardtexte .legal-text-card-header h3 {
    color: var(--color-text);
    margin: 0;
}

#tabs-standardtexte .legal-texts-section-header h2 {
    font-size: var(--font-size-heading);
}

#tabs-standardtexte .legal-text-card-header h3 {
    font-size: var(--font-size-standard);
}

#tabs-standardtexte .legal-texts-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
}

#tabs-standardtexte .legal-text-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    min-width: 0;
    padding: var(--space-3);
}

#tabs-standardtexte .legal-text-card-header {
    margin-bottom: var(--space-3);
}

#tabs-standardtexte .legal-text-card-header code {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    color: var(--color-text);
    font-size: var(--font-size-sub);
    padding: 0 var(--space-1);
}

#tabs-standardtexte .legal-text-language-tabs {
    margin: 0;
}

#tabs-standardtexte .legal-text-language-tabs > .ui-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

#tabs-standardtexte .legal-text-card .callout {
    display: none;
}

#tabs-standardtexte .legal-text-card textarea,
#tabs-standardtexte .legal-text-card .cke {
    min-height: 10rem;
    width: 100% !important;
}

#tabs-standardtexte .legal-texts-actions {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    bottom: var(--space-3);
    display: flex;
    justify-content: flex-end;
    padding: var(--space-3);
    position: sticky;
    z-index: 5;
}

#tabs-standardtexte .legal-texts-actions .button {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
    margin: 0;
}

#tabs-standardtexte .legal-texts-actions .app-icon {
    margin: 0;
}

@media only screen and (min-width: 64em) {
    #tabs-standardtexte .legal-texts-grid:not(.legal-texts-grid--primary) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #tabs-standardtexte .legal-text-card--wide {
        grid-column: 1 / -1;
    }
}

@media only screen and (min-width: 75em) {
    #tabs-standardtexte .legal-texts-grid--primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 39.99875em) {
    #tabs-standardtexte .legal-texts-section,
    #tabs-standardtexte .legal-text-card {
        padding: var(--space-3);
    }

    #tabs-standardtexte .legal-texts-actions {
        bottom: var(--space-2);
    }

    #tabs-standardtexte .legal-texts-actions .button {
        justify-content: center;
        width: 100%;
    }
}

/* Foundation-Callouts und fachliche Rückmeldungen */
.callout {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: none;
    color: var(--color-text);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
}

.callout p:last-child {
    margin-bottom: 0;
}

.callout.primary,
.callout.secondary,
.callout.success,
.callout.warning,
.callout.alert {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.callout.success a,
.callout.warning a,
.callout.alert a {
    color: var(--color-primary);
}

.payment-empty-callout {
    align-items: center;
    display: flex;
    gap: var(--space-3);
}

.payment-empty-callout .app-icon {
    color: var(--color-primary);
    flex: 0 0 auto;
}

/* jQuery UI: Tabs, Accordions, Dialoge und Auswahlzustände */
.ui-widget,
.ui-widget-content {
    color: var(--color-text);
}

.ui-tabs {
    background-color: transparent;
    margin-top: var(--space-2);
}

.ui-tabs > .ui-tabs-nav {
    align-items: flex-end;
    background-color: transparent;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: 0 var(--space-1);
}

.ui-tabs > .ui-tabs-nav > li.ui-tabs-tab {
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--control-radius) var(--control-radius) 0 0;
    margin: 0 0 -1px;
    padding: 0;
    position: relative;
    top: 0;
}

.ui-tabs > .ui-tabs-nav > li.ui-tabs-tab > a.ui-tabs-anchor {
    color: var(--color-text);
    padding: var(--space-2) var(--space-3);
}

.ui-tabs > .ui-tabs-nav > li.ui-tabs-tab:hover,
.ui-tabs > .ui-tabs-nav > li.ui-tabs-tab:focus-within {
    background-color: var(--color-bg-shading);
}

.ui-tabs > .ui-tabs-nav > li.ui-tabs-active,
.ui-tabs > .ui-tabs-nav > li.ui-state-active {
    background-color: var(--color-surface) !important;
    border-bottom: 2px solid var(--color-primary) !important;
    z-index: 1;
}

.ui-tabs > .ui-tabs-nav > li.ui-tabs-active > a,
.ui-tabs > .ui-tabs-nav > li.ui-state-active > a {
    color: var(--color-primary) !important;
}

.ui-tabs > .ui-tabs-panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 var(--panel-radius) var(--panel-radius);
    box-shadow: var(--shadow-panel);
    margin: 0;
    padding: var(--space-4);
}

.ui-tabs .ui-tabs > .ui-tabs-panel {
    box-shadow: none;
}

.ui-accordion .ui-accordion-header {
    background-color: var(--color-table-header-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    color: var(--color-text);
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
}

.ui-accordion .ui-accordion-header:hover,
.ui-accordion .ui-accordion-header:focus {
    background-color: var(--color-table-header-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ui-accordion .ui-accordion-header.ui-accordion-header-active {
    background-color: var(--color-table-header-bg) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
}

.ui-accordion .ui-accordion-content {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--panel-radius) var(--panel-radius);
    padding: var(--space-4);
}

.ui-dialog {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-floating);
    padding: 0;
}

.ui-dialog .ui-dialog-titlebar {
    background-color: var(--color-bg);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--panel-radius) var(--panel-radius) 0 0;
    color: var(--color-heading);
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-4);
}

.ui-dialog .ui-dialog-content {
    background-color: var(--color-surface);
    padding: var(--space-4);
}

.ui-dialog .ui-dialog-buttonpane {
    background-color: var(--color-surface);
    padding: var(--space-3) var(--space-4);
}

.ui-dialog .ui-dialog-buttonpane .ui-button {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-accent);
}

.ui-dialog .ui-dialog-buttonpane .ui-button:hover,
.ui-dialog .ui-dialog-buttonpane .ui-button:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-on-accent);
}

.ui-dialog-titlebar .ui-button.ui-button-icon-only {
    align-items: center;
    background-color: var(--color-surface);
    border: 1px solid transparent;
    color: var(--color-muted);
    display: inline-flex;
    justify-content: center;
    margin: 0;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: var(--control-height);
}

.ui-dialog-titlebar .ui-button.ui-button-icon-only:hover,
.ui-dialog-titlebar .ui-button.ui-button-icon-only:focus {
    background-color: var(--color-bg-shading);
    border-color: var(--color-border);
    color: var(--color-primary);
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background-color: var(--color-bg-shading);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.ui-menu .ui-menu-item-wrapper {
    border: 0;
    border-radius: var(--control-radius);
    color: var(--color-text);
    min-height: 2.25rem;
    padding: var(--space-2) var(--space-3);
}

.ui-menu .ui-menu-item-wrapper.ui-state-active {
    background-color: var(--color-primary) !important;
    border: 0 !important;
    color: var(--color-on-accent) !important;
    margin: 0;
}

.ui-datepicker {
    background-color: var(--color-surface);
    padding: var(--space-2);
}

.ui-datepicker .ui-datepicker-header {
    background-color: var(--color-bg);
    border: 0;
    border-radius: var(--control-radius);
    color: var(--color-heading);
}

.ui-datepicker td a,
.ui-datepicker td span {
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    text-align: center;
}

.ui-datepicker td a:hover,
.ui-datepicker td a:focus,
.ui-datepicker td a.ui-state-active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-on-accent) !important;
}

.ui-progressbar {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    overflow: hidden;
}

.ui-progressbar .ui-progressbar-value {
    background-color: var(--color-primary);
    border: 0;
}

.ui-widget-overlay {
    background-color: var(--color-heading);
    opacity: 0.35;
}

/* Tabellen und DataTables */
table {
    width: 100%;
}

table.statistik_table,
#person_suchergebnis table {
    width: 100%;
}

div.dt-container table,
.dataTables_wrapper table {
    width: 100% !important;
}

div.dt-container,
div.dt-container .dt-layout-row,
div.dt-container .dt-layout-cell,
div.dt-container .dt-layout-table {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
}

table.eingabetabelle,
table.dataTable,
table.tableGlobaleEinstellungen {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-collapse: separate;
    border-radius: var(--panel-radius);
    border-spacing: 0;
}

body:not(.isfrontend) table:not(.table_no_pad):not(.table_calendar) > thead > tr > th,
body:not(.isfrontend) table:not(.table_no_pad):not(.table_calendar) > thead > tr > td {
    background-color: var(--color-table-header-bg);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-heading);
    font-size: var(--font-size-standard);
    font-weight: 600;
    line-height: 1.2;
    padding: var(--space-2) var(--space-3);
    vertical-align: middle;
    white-space: nowrap;
}

body:not(.isfrontend) table.dataTable > thead .dt-column-header {
    min-width: 0;
}

body:not(.isfrontend) table.dataTable > thead .dt-column-title {
    display: block;
    max-width: 16rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.isfrontend) table.dataTable > thead .dt-column-order {
    align-self: center;
    color: currentColor;
    flex: 0 0 1em;
    height: 1.2em;
    margin-left: var(--space-1);
    width: 1em;
}

body:not(.isfrontend) table.dataTable > thead .dt-column-order::before,
body:not(.isfrontend) table.dataTable > thead .dt-column-order::after {
    color: currentColor;
    font-family: "Font Awesome 7 Free";
    font-size: 0.625em;
    font-style: normal;
    font-weight: 900;
    left: 50%;
    line-height: 1;
    opacity: 0.22;
    transform: translateX(-50%);
}

body:not(.isfrontend) table.dataTable > thead .dt-column-order::before {
    bottom: 50%;
    content: "\f077" / "";
}

body:not(.isfrontend) table.dataTable > thead .dt-column-order::after {
    content: "\f078" / "";
    top: 50%;
}

body:not(.isfrontend) table.dataTable > thead > tr > th[aria-sort="ascending"] .dt-column-order::before,
body:not(.isfrontend) table.dataTable > thead > tr > th[aria-sort="descending"] .dt-column-order::after {
    opacity: 1;
}

body:not(.isfrontend) table.dataTable > thead > tr > th[aria-sort="ascending"] .dt-column-order::after,
body:not(.isfrontend) table.dataTable > thead > tr > th[aria-sort="descending"] .dt-column-order::before {
    opacity: 0.18;
}

body:not(.isfrontend) .fc table > thead > tr > th,
body:not(.isfrontend) .fc table > thead > tr > td,
body:not(.isfrontend) .ui-datepicker-calendar > thead > tr > th,
body:not(.isfrontend) .ui-datepicker-calendar > thead > tr > td {
    background-color: transparent;
    max-width: none;
    overflow: visible;
    padding: 0;
    text-overflow: clip;
    white-space: normal;
}

table.dataTable > tbody > tr > td,
table.eingabetabelle > tbody > tr > td,
table.tableGlobaleEinstellungen > tbody > tr > td {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
}

table.dataTable > tbody > tr:nth-child(even):not(.selected) > *,
table.eingabetabelle > tbody > tr:nth-child(even),
table.tableGlobaleEinstellungen > tbody > tr:nth-child(even) {
    background-color: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
    box-shadow: none;
}

table.dataTable > tbody > tr:hover:not(.selected) > *,
table.eingabetabelle > tbody > tr:hover,
table.tableGlobaleEinstellungen > tbody > tr:hover {
    background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
    box-shadow: none;
}

table.dataTable > thead > tr:first-child > th:first-child,
table.dataTable > thead > tr:first-child > td:first-child {
    border-top-left-radius: var(--panel-radius);
}

table.dataTable > thead > tr:first-child > th:last-child,
table.dataTable > thead > tr:first-child > td:last-child {
    border-top-right-radius: var(--panel-radius);
}

table.dataTable > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--panel-radius);
}

table.dataTable > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--panel-radius);
}

body[filename="vorgang-mahnwesen.php"] .mahnwesen-open-button {
    align-items: center;
    display: inline-flex;
    gap: var(--space-1);
    justify-content: center;
    margin: 0;
    white-space: nowrap;
}

@media screen and (max-width: 90em) {
    body[filename="vorgang-mahnwesen.php"] .mahnwesen-open-button {
        padding: 0;
        width: var(--control-height);
    }

    body[filename="vorgang-mahnwesen.php"] .mahnwesen-open-button__label {
        display: none;
    }
}

/* Foundation setzt für gerade Zeilen einen festen hellen Grauton. */
:root[data-backend-theme="night"] table.TableAlternierend > tbody > tr:nth-child(even) {
    background-color: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
    color: var(--color-text);
}

:root[data-backend-theme="night"] table.TableAlternierend > tbody > tr:nth-child(even) > th,
:root[data-backend-theme="night"] table.TableAlternierend > tbody > tr:nth-child(even) > td {
    background-color: transparent;
    color: inherit;
}

div.dt-container .dt-layout-row {
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0;
}

div.dt-container .dt-paging .dt-paging-button {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: var(--control-radius);
    color: var(--color-primary) !important;
    min-height: var(--control-height);
}

div.dt-container .dt-paging .dt-paging-button:hover,
div.dt-container .dt-paging .dt-paging-button.current {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-on-accent) !important;
}

div.dt-container .dt-paging .dt-paging-button:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

/* Vorhandene Auswahl- und Editor-Plugins in dieselbe Formensprache einpassen. */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple,
.chzn-container-single .chzn-single,
.chzn-container-multi .chzn-choices {
    background-color: var(--color-surface);
    background-image: none;
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    box-shadow: none;
    color: var(--color-text);
    min-height: var(--control-height);
}

.select2-container--focus .select2-selection,
.select2-container--open .select2-selection,
.chzn-container-active .chzn-single,
.chzn-container-active .chzn-choices {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.select2-dropdown,
.chzn-container .chzn-drop {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    box-shadow: var(--shadow-floating);
    color: var(--color-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.chzn-container .chzn-results .highlighted {
    background-color: var(--color-primary);
    background-image: none;
    color: var(--color-on-accent);
}

.cke_chrome,
.ace_editor {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--control-radius);
    box-shadow: none !important;
}

:root[data-backend-theme="night"] .cke_chrome,
:root[data-backend-theme="night"] .cke_inner,
:root[data-backend-theme="night"] .cke_top,
:root[data-backend-theme="night"] .cke_bottom {
    background: var(--color-surface) !important;
    background-image: none !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

:root[data-backend-theme="night"] .cke_contents,
:root[data-backend-theme="night"] .cke_source {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

:root[data-backend-theme="night"] .cke_toolgroup,
:root[data-backend-theme="night"] .cke_combo_button {
    background: var(--color-bg-shading) !important;
    background-image: none !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
}

:root[data-backend-theme="night"] .cke_button:hover,
:root[data-backend-theme="night"] .cke_button:focus,
:root[data-backend-theme="night"] .cke_button_on,
:root[data-backend-theme="night"] .cke_combo_button:hover,
:root[data-backend-theme="night"] .cke_combo_button:focus,
:root[data-backend-theme="night"] .cke_combo_on .cke_combo_button {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)) !important;
    background-image: none !important;
}

:root[data-backend-theme="night"] .cke_button_icon {
    filter: invert(1) brightness(1.35);
}

:root[data-backend-theme="night"] .cke_button_label,
:root[data-backend-theme="night"] .cke_combo_text,
:root[data-backend-theme="night"] .cke_path_item,
:root[data-backend-theme="night"] .cke_path_empty {
    color: var(--color-text) !important;
    text-shadow: none !important;
}

/* FullCalendar 4 / Scheduler: Struktur und Statusfarben bleiben erhalten. */
.fc {
    color: var(--color-text);
}

.fc .fc-toolbar {
    align-items: center;
    background-color: var(--color-surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: var(--space-3);
    padding: var(--space-3) 0;
}

.fc .fc-toolbar h2 {
    color: var(--color-heading);
    font-size: var(--font-size-heading);
}

.fc .fc-button-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-accent);
}

.fc .fc-button-primary:hover,
.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-on-accent);
}

.fc .fc-button-primary:disabled {
    background-color: var(--color-muted);
    border-color: var(--color-muted);
    color: var(--color-on-accent);
    opacity: 0.6;
}

.fc .fc-view-container {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
}

.fc .fc-widget-header {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-heading);
}

body[filename="belegungsplan.php"] .fc .fc-head,
body[filename="belegungsplan.php"] .fc .fc-head table,
body[filename="belegungsplan.php"] .fc .fc-head .fc-scroller-clip,
body[filename="belegungsplan.php"] .fc .fc-head .fc-scroller,
body[filename="belegungsplan.php"] .fc .fc-head .fc-scroller-canvas {
    background-color: var(--color-surface);
}

body[filename="belegungsplan.php"] .fc td.fc-time-area.fc-widget-header,
body[filename="belegungsplan.php"] .fc td.fc-divider.fc-widget-header {
    padding: 0 !important;
}

body[filename="belegungsplan.php"] .tab-station > div[id$="-calendar"] + .hinweistext {
    margin-top: var(--space-3);
}

.fc .fc-divider {
    background-color: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-heading);
}

.fc .fc-widget-content,
.fc .fc-resource-area,
.fc .fc-time-area,
.fc td,
.fc th {
    border-color: var(--color-border);
}

.fc .fc-event {
    border-radius: var(--control-radius);
    box-shadow: var(--shadow-panel);
    transition:
            filter 0.2s ease,
            box-shadow 0.2s ease;
}

.fc .fc-event:hover,
.fc .fc-event:focus {
    box-shadow: var(--shadow-floating);
    filter: brightness(0.94);
}

body[filename="belegungsplan.php"] #tabs_belegungsplan > .ui-tabs-panel,
body[filename="belegungsplan.php"] #tabs_belegungsplan-station > .ui-tabs-panel {
    padding: var(--space-2);
}

/* Cockpit und Buchung: vorhandene Inhaltsstrukturen als Karten nutzen. */
.cockpit-app-login {
    align-items: stretch;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
    margin: 0 auto;
    max-width: 62rem;
    overflow: hidden;
}

.cockpit-app-login__intro {
    min-width: 0;
    padding: calc(var(--space-4) * 1.5);
}

.cockpit-app-login__eyebrow {
    align-items: center;
    color: var(--color-primary);
    display: inline-flex;
    font-size: var(--font-size-sub);
    font-weight: 700;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.cockpit-app-login h2 {
    margin: 0 0 var(--space-2);
}

.cockpit-app-login__lead {
    color: var(--color-text);
    margin: 0 0 var(--space-4);
    max-width: 42rem;
}

.cockpit-app-login__steps {
    counter-reset: cockpit-app-login-step;
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
}

.cockpit-app-login__steps > li {
    align-items: center;
    counter-increment: cockpit-app-login-step;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 2.25rem minmax(0, 1fr);
}

.cockpit-app-login__step-icon {
    align-items: center;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    border-radius: 50%;
    color: var(--color-primary);
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.cockpit-app-login__steps strong,
.cockpit-app-login__steps small {
    display: block;
}

.cockpit-app-login__steps strong {
    color: var(--color-heading);
    font-size: var(--font-size-standard);
}

.cockpit-app-login__steps small {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
    margin-top: var(--space-1);
}

.cockpit-app-login__security {
    align-items: center;
    background: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    color: var(--color-text);
    display: flex;
    font-size: var(--font-size-sub);
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
}

.cockpit-app-login__security .fa-solid {
    color: var(--color-primary);
    flex: 0 0 auto;
}

.cockpit-app-login__code {
    align-items: center;
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: calc(var(--space-4) * 1.5);
    text-align: center;
}

.cockpit-app-login__code figcaption strong,
.cockpit-app-login__code figcaption span {
    display: block;
}

.cockpit-app-login__code figcaption strong {
    color: var(--color-heading);
    font-size: var(--font-size-standard);
}

.cockpit-app-login__code figcaption span {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
    margin-top: var(--space-1);
}

.cockpit-app-login__qr-frame {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
    margin-top: var(--space-3);
    padding: var(--space-3);
}

.cockpit-app-login__qr-frame img {
    display: block;
    height: auto;
    max-width: 13rem;
    width: 100%;
}

@media only screen and (min-width: 64em) {
    .cockpit-app-login {
        grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.75fr);
    }

    .cockpit-app-login__code {
        border-left: 1px solid var(--color-border);
        border-top: 0;
    }
}

body[filename="cockpit.php"] #tabs-dashboard > .row > .column > h2 {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
    min-height: 6.5rem;
    padding: var(--space-4);
}

body[filename="cockpit.php"] #tabs-dashboard .countup {
    color: var(--color-primary);
    display: inline-block;
    font-size: var(--font-size-heading);
    margin-top: var(--space-2);
}

body[filename="buchung.php"] #form_buchung > h1 {
    margin-top: var(--space-2);
}

body[filename="buchung.php"] #form_buchung .uebersicht .issticky {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
    padding: var(--space-4);
}

body[filename="buchung.php"] #form_buchung > .row > .medium-9 > .ui-accordion:first-child > .ui-accordion-header:first-child {
    margin-top: 0;
}

body[filename="buchung.php"] #form_buchung .uebersicht h3 {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-heading);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
}

body[filename="buchung.php"] #form_buchung #kunde_email_adresse {
    margin: 0;
    padding-left: calc(var(--space-4) + var(--space-3));
    text-indent: 0;
    width: 100%;
}

body[filename="buchung.php"] #form_buchung .booking-email-confirmation-box {
    align-items: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    max-width: none;
    padding-bottom: var(--space-3);
    padding-top: var(--space-3);
    row-gap: var(--space-2);
    width: 100%;
}

body[filename="buchung.php"]
#form_buchung
.booking-email-confirmation-box > .column {
    align-items: center;
    display: flex;
    min-height: var(--control-height);
}

body[filename="buchung.php"]
#form_buchung
.booking-email-confirmation-box .kunde_email_alert_checkbox label {
    align-items: center;
    display: flex;
    margin: 0;
    min-height: var(--control-height);
    width: 100%;
}

body[filename="buchung.php"]
#form_buchung
.booking-email-confirmation-box .kunde_email_alert_checkbox .switch {
    display: flex;
    flex: 0 0 2.5rem;
    height: 1.375rem;
    margin: 0 var(--space-2) 0 0;
    min-height: 1.375rem;
    width: 2.5rem;
}

body[filename="buchung.php"]
#form_buchung
.booking-email-confirmation-box .kunde_email_alert_checkbox .switch-paddle {
    flex: 0 0 2.5rem;
    margin: 0;
    min-height: 1.375rem;
}

body[filename="buchung.php"]
#form_buchung
.booking-email-confirmation-box .booking-email-address {
    position: relative;
}

body[filename="buchung.php"]
#form_buchung
.vorgang_positionen .row:not(.column) {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
}

body[filename="buchung.php"]
#form_buchung
.vorgang_positionen .row:not(.column) > .column {
    align-items: center;
    display: flex;
}

/* Buchung: durchgehendes 2-6-2-2-Raster für Anzahl und Beträge auf Large. */
@media only screen and (min-width: 64em) {
    body[filename="buchung.php"]
    #form_buchung
    .booking-position-content > .row:not(.column) {
        margin-left: 0;
        margin-right: 0;
    }

    body[filename="buchung.php"]
    #form_buchung
    .booking-position-content .inhaltartikelauswahl {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body[filename="buchung.php"]
    #form_buchung
    .booking-position-content .inhaltartikelauswahl > .row.artikel {
        margin-left: -1px;
        margin-right: -1px;
    }

    body[filename="buchung.php"]
    #form_buchung
    .booking-position-content #freiposition_container > .row.freiposition {
        margin-left: calc((var(--space-3) + 1px) * -1);
        margin-right: calc((var(--space-3) + 1px) * -1);
    }

    body[filename="buchung.php"]
    #form_buchung
    .booking-position-content .anzahl input[type="number"],
    body[filename="buchung.php"]
    #form_buchung
    .booking-position-content .use_artikel input[type="number"] {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        width: 7.5rem;
    }

    body[filename="buchung.php"]
    #form_buchung
    .booking-position-content .use_artikel > div {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        width: 7.5rem;
    }
}

body[filename="buchung.php"] #form_buchung .buchung_buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

body[filename="buchung.php"] #form_buchung .buchung_buttons .button {
    margin: 0;
}

body[filename="buchung.php"] #form_buchung .table_calendar input.textbox_zeitv3 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

body[filename="buchung.php"] #form_buchung .table_calendar .ui-datepicker-trigger i {
    margin-left: var(--space-1);
    margin-right: var(--space-1);
}

body[filename="buchung.php"] #form_buchung .table_calendar .ui-datepicker-trigger {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
}

body[filename="buchung.php"] #form_buchung .table_calendar i.IconEdit.aktuelles_datum_setzen {
    margin-left: var(--space-3);
    margin-right: var(--space-2);
}

/* Personenwahl: gleich breites Feld und wiederverwendbares Text-Aktionsmenü. */
body[filename="buchung.php"] #form_buchung .booking-driver-row {
    margin-top: var(--space-2);
}

/* Nur Fahrerwahl: Foundation-Row-Gutter innerhalb der bereits eingerückten Formularspalte neutralisieren. */
body[filename="buchung.php"] #form_buchung .booking-driver-row > .booking-person-control {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
}

.booking-person-control {
    align-items: center;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: minmax(0, 1fr) var(--control-height);
    margin-left: 0;
    margin-right: 0;
    position: relative;
    width: 100%;
}

.booking-person-control.nopadding {
    margin-bottom: 0.75rem !important;
}

.booking-person-control::before,
.booking-person-control::after {
    content: none;
    display: none;
}

.booking-person-control > .person_box,
.booking-person-control > .booking-person-field,
.booking-person-control > .booking-person-actions {
    float: none;
    margin: 0;
    max-width: none;
    min-width: 0;
    padding: 0;
    width: auto;
}

.booking-person-control > .person_box,
.booking-person-control > .booking-person-field {
    grid-column: 1;
    grid-row: 1;
}

.booking-person-control > .booking-person-actions {
    grid-column: 2;
    grid-row: 1;
}

.booking-person-control input[type="text"],
.booking-person-control select {
    margin: 0;
    width: 100%;
}

.booking-person-control select {
    background-position: right var(--space-2) center;
    padding-right: calc(var(--space-4) + var(--space-2));
}

.booking-person-actions {
    align-items: center;
    display: flex;
    height: var(--control-height);
    justify-content: center;
}

.booking-person-action-menu {
    display: inline-block;
    position: relative;
}

.booking-person-action-menu[open] {
    z-index: 1200;
}

.booking-person-action-menu > summary {
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--control-radius);
    color: var(--color-primary);
    cursor: pointer;
    display: inline-flex;
    height: var(--control-height);
    justify-content: center;
    list-style: none;
    margin: 0;
    width: var(--control-height);
}

.booking-person-action-menu > summary::-webkit-details-marker {
    display: none;
}

.booking-person-action-menu > summary:hover,
.booking-person-action-menu > summary:focus,
.booking-person-action-menu[open] > summary {
    background-color: var(--color-bg-shading);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
}

.booking-person-action-menu > summary:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.booking-person-action-menu > summary > i {
    align-items: center;
    display: inline-flex;
    height: 1em;
    justify-content: center;
    line-height: 1;
    margin: 0;
    width: 1em;
}

.booking-person-action-menu-items {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-sizing: border-box;
    box-shadow: var(--shadow-floating);
    display: grid;
    min-width: 0;
    padding: var(--space-2);
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-1));
    width: min(21rem, calc(100vw - 2rem));
    z-index: 1200;
}

.booking-person-action-option {
    align-items: center;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: var(--control-radius);
    color: var(--color-text) !important;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1.25rem minmax(0, 1fr);
    height: auto !important;
    justify-items: start;
    line-height: 1.25 !important;
    margin: 0;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3) !important;
    text-align: left;
    width: 100%;
}

.booking-person-action-option:hover,
.booking-person-action-option:focus {
    background-color: var(--color-bg-shading) !important;
    color: var(--color-primary) !important;
}

.booking-person-action-option:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.booking-person-action-option > i {
    align-items: center;
    display: inline-flex;
    height: 1.25rem;
    justify-content: center;
    line-height: 1;
    margin: 0;
    width: 1.25rem;
}

@media screen and (max-width: 39.99875em) {
    .booking-person-action-menu-items {
        width: calc(100vw - 4rem);
    }
}

/* Mandantenneutraler Login auf Basis der vorhandenen Anmeldefunktion. */
body[filename="index.php"] {
    background-color: var(--color-bg);
    background-image:
            radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--color-primary) 8%, transparent) 0, transparent 32rem),
            linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 2%, var(--color-surface)) 0, var(--color-bg) 55%);
    background-repeat: no-repeat;
}

body[filename="index.php"] .menucontainer,
body[filename="index.php"] .menucontainer > ul.menu.menutop {
    min-height: 5.5rem;
}

body[filename="index.php"] .menucontainer {
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-subtle);
}

body[filename="index.php"] div.content-row.row {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 5.5rem);
    min-height: calc(100dvh - 5.5rem);
    padding-bottom: clamp(3rem, 10vh, 7rem);
    padding-top: clamp(2rem, 5vh, 4rem);
}

#loginscreen {
    margin: 0 auto;
    max-width: 34rem;
    padding: 0 var(--space-4);
    width: 100%;
}

#loginscreen > form {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-floating);
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 2rem);
    position: relative;
}

#loginscreen > form::before {
    background-color: var(--color-primary);
    content: "";
    height: 0.2rem;
    inset: 0 0 auto;
    position: absolute;
}

.backend-login-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-top: var(--space-2);
    text-align: center;
}

.backend-login-header__icon {
    align-items: center;
    background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
    border-radius: 50%;
    color: var(--color-primary);
    display: inline-flex;
    font-size: var(--font-size-heading);
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

#loginscreen .backend-login-header h1 {
    color: var(--color-heading);
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

#loginscreen .callout.content-width {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    width: 100%;
}

#loginscreen .backend-login-notice {
    align-items: flex-start;
    background-color: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    color: var(--color-text);
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}

#loginscreen .backend-login-notice p {
    align-items: flex-start;
    display: flex;
    gap: var(--space-2);
    line-height: 1.45;
    margin: 0;
}

#loginscreen .backend-login-notice .app-icon {
    color: var(--color-primary);
    flex: 0 0 auto;
    margin-top: 0.12em;
}

#loginscreen .backend-login-fields {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-4);
}

#loginscreen .backend-login-fields > label {
    color: var(--color-heading);
    font-weight: 600;
    line-height: 1.3;
    margin: var(--space-2) 0 0;
}

#loginscreen input[type="text"],
#loginscreen input[type="password"],
#loginscreen select,
#loginscreen input[type="submit"] {
    min-height: 2.75rem;
}

#loginscreen input[type="text"],
#loginscreen input[type="password"],
#loginscreen select {
    margin: 0;
    width: 100%;
}

#loginscreen input[type="submit"] {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
    margin-top: var(--space-3);
    width: 100%;
}

#loginscreen .backend-login-primary-action {
    width: 100%;
}

#loginscreen .backend-login-secondary-action {
    margin-top: var(--space-3);
    text-align: center;
}

#loginscreen a.button.alert.hollow {
    background-color: transparent;
    border: 0;
    color: var(--color-primary);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
}

#loginscreen a.button.alert.hollow:hover,
#loginscreen a.button.alert.hollow:focus {
    background-color: var(--color-bg-shading);
    color: var(--color-primary-hover);
}

/* Passwort vergessen: verständlicher Ablauf im Backend-v4-Look. */
body[filename="index-passwort-vergessen.php"] {
    background-color: color-mix(in srgb, var(--color-primary) 2%, var(--color-surface));
}

body[filename="index-passwort-vergessen.php"] .menucontainer {
    box-shadow: none;
}

body[filename="index-passwort-vergessen.php"] div.content-row.row {
    align-items: center;
    display: flex;
    min-height: calc(100vh - 5.5rem);
    padding-bottom: clamp(1rem, 4vw, 3rem);
    padding-top: clamp(1rem, 4vw, 3rem);
}

body[filename="index-passwort-vergessen.php"] #contentbereich > .columns {
    width: 100%;
}

.password-reset-page {
    align-items: stretch;
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.85fr);
    margin: 0 auto;
    max-width: 68rem;
    width: 100%;
}

.password-reset-card,
.password-reset-process {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
    min-width: 0;
}

.password-reset-card {
    padding: clamp(1.25rem, 4vw, 2rem);
}

.password-reset-card__header {
    align-items: flex-start;
    display: flex;
    gap: var(--space-4);
    margin-bottom: calc(var(--space-4) + var(--space-2));
}

.password-reset-card__icon,
.password-reset-result__icon {
    align-items: center;
    background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    border-radius: 50%;
    color: var(--color-primary);
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
}

.password-reset-card__icon {
    height: 2.75rem;
    width: 2.75rem;
}

.password-reset-card__header h1,
.password-reset-process h2,
.password-reset-result h2,
.password-reset-process h3 {
    color: var(--color-heading);
}

.password-reset-card__header h1,
.password-reset-process h2,
.password-reset-result h2 {
    font-size: var(--font-size-heading);
}

.password-reset-card__header h1 {
    margin: 0 0 var(--space-2);
}

.password-reset-card__header p,
.password-reset-result p,
.password-reset-process p {
    color: var(--color-text);
    font-size: var(--font-size-standard);
    line-height: 1.55;
}

.password-reset-card__header p {
    margin: 0;
}

.password-reset-card__eyebrow {
    color: var(--color-primary) !important;
    font-size: var(--font-size-sub) !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-1) !important;
    text-transform: uppercase;
}

.password-reset-status {
    align-items: flex-start;
    background-color: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    color: var(--color-text);
    display: flex;
    font-size: var(--font-size-standard);
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
}

.password-reset-status > i {
    color: var(--color-primary);
    line-height: 1.4;
}

.password-reset-form label {
    color: var(--color-heading);
    font-size: var(--font-size-standard);
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.password-reset-form__help,
.password-reset-card__note,
.password-reset-result__hint {
    color: var(--color-muted) !important;
    font-size: var(--font-size-sub) !important;
}

.password-reset-form__help {
    line-height: 1.45;
    margin: 0 0 var(--space-2);
}

.password-reset-form input[type="text"] {
    margin: 0;
    width: 100%;
}

.password-reset-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.password-reset-actions .button {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
    justify-content: center;
    margin: 0;
}

.password-reset-actions--centered {
    justify-content: center;
}

.password-reset-card__note {
    align-items: center;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-2);
    line-height: 1.45;
    margin: calc(var(--space-4) + var(--space-2)) 0 0;
    padding-top: var(--space-3);
}

.password-reset-card__note > i {
    color: var(--color-primary);
}

.password-reset-process {
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.password-reset-process h2 {
    border-bottom: 1px solid var(--color-border);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
}

.password-reset-process ol {
    display: grid;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
}

.password-reset-process li {
    align-items: flex-start;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 2rem minmax(0, 1fr);
}

.password-reset-process li > span {
    align-items: center;
    background-color: var(--color-primary);
    border-radius: 50%;
    color: var(--color-on-accent);
    display: inline-flex;
    font-size: var(--font-size-sub);
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.password-reset-process h3 {
    font-size: var(--font-size-standard);
    margin: 0 0 var(--space-1);
}

.password-reset-process p {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
    line-height: 1.45;
    margin: 0;
}

.password-reset-result {
    padding: var(--space-4) 0;
    text-align: center;
}

.password-reset-result__icon {
    font-size: var(--font-size-heading);
    height: 3rem;
    margin-bottom: var(--space-3);
    width: 3rem;
}

.password-reset-result h2 {
    margin: 0 0 var(--space-2);
}

.password-reset-result p {
    margin: 0 auto var(--space-3);
    max-width: 34rem;
}

.password-reset-credential {
    background-color: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    display: grid;
    gap: var(--space-1);
    margin: var(--space-4) auto;
    max-width: 18rem;
    padding: var(--space-3) var(--space-4);
}

.password-reset-credential span {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
}

.password-reset-credential strong {
    color: var(--color-heading);
    font-size: var(--font-size-heading);
    letter-spacing: 0.08em;
}

@media only screen and (max-width: 63.9375em) {
    body[filename="index-passwort-vergessen.php"] div.content-row.row {
        align-items: flex-start;
        min-height: 0;
    }

    .password-reset-page {
        grid-template-columns: minmax(0, 1fr);
        max-width: 42rem;
    }
}

@media only screen and (max-width: 39.9375em) {
    .password-reset-card__header {
        display: grid;
        gap: var(--space-3);
    }

    .password-reset-actions,
    .password-reset-actions .button {
        width: 100%;
    }
}

/* Responsive Anpassungen entlang der vorhandenen Foundation-Breakpoints. */
@media only screen and (max-width: 63.9375em) {
    .menucontainer > ul.menu.menutop {
        gap: 0;
        padding: var(--space-2);
    }

    .menucontainer .menutop > li:first-child {
        margin-right: var(--space-2);
    }

    .menucontainer .menutop > li > a:not(#topbarlink) {
        font-size: var(--font-size-standard);
        min-height: 2.5rem;
        padding: var(--space-2);
    }

    .menucontainer .menutop > li.suche {
        flex-basis: 12ch;
        min-width: 0;
        padding-top: var(--space-1);
    }

    .menucontainer .menutop > li.suche input[type="search"] {
        max-width: 12ch;
        width: 12ch;
    }

    body[filename="buchung.php"] #form_buchung > .row > .medium-9,
    body[filename="buchung.php"] #form_buchung > .row > .uebersicht {
        float: none;
        width: 100%;
    }

    body[filename="buchung.php"] #form_buchung > .row > .uebersicht {
        margin-top: var(--space-4);
    }

    .fc .fc-toolbar {
        align-items: stretch;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        justify-content: space-between;
    }

    .fc .fc-toolbar .fc-left,
    .fc .fc-toolbar .fc-center,
    .fc .fc-toolbar .fc-right {
        float: none;
        margin: 0;
    }

    .fc .fc-toolbar .fc-center {
        flex: 1 1 12rem;
        text-align: center;
    }

    .fc .fc-toolbar .fc-right {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

@media only screen and (max-width: 39.9375em) {
    div.content-row.row {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .menucontainer .menutop > li:first-child {
        flex-basis: 100%;
        justify-content: center;
        margin: 0 0 var(--space-1);
    }

    .menucontainer .menutop > li:not(:first-child):not(.suche) {
        flex: 1 1 100%;
    }

    .menucontainer .menutop > li > a:not(#topbarlink) {
        justify-content: center;
        width: 100%;
    }

    .menucontainer .is-dropdown-submenu {
        left: 0;
        max-width: calc(100vw - 1rem);
        min-width: 0;
        position: absolute;
        right: auto;
        width: calc(100vw - 1rem);
    }

    body.noframe .menubottom-before,
    .menubottom-before {
        height: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }

    .menubottom.regular {
        min-height: calc(4.25rem + env(safe-area-inset-bottom, 0px));
        overflow: visible;
        padding: var(--space-1) max(var(--space-1), env(safe-area-inset-right, 0px))
            max(var(--space-1), env(safe-area-inset-bottom, 0px))
            max(var(--space-1), env(safe-area-inset-left, 0px));
    }

    .menubottom.regular > ul {
        display: grid;
        gap: 2px;
        grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
        overflow: visible;
        width: 100%;
    }

    .menubottom.regular > ul > li {
        display: none !important;
        min-width: 0;
    }

    .menubottom.regular > ul > .backend-footer-mobile-primary,
    .menubottom.regular > ul > .backend-footer-more {
        display: block !important;
    }

    .menubottom.regular > ul > .backend-footer-mobile-primary > a,
    .menubottom.regular .backend-footer-more > details > summary {
        align-items: center;
        border: 1px solid transparent;
        border-radius: var(--control-radius);
        box-sizing: border-box;
        color: var(--color-text) !important;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        font-size: var(--font-size-standard) !important;
        gap: 2px;
        justify-content: center;
        line-height: 1.15;
        margin: 0 !important;
        min-height: 3.75rem;
        min-width: 0;
        padding: var(--space-1);
        text-align: center;
        width: 100%;
    }

    .menubottom.regular > ul > .backend-footer-mobile-primary > a > .app-icon,
    .menubottom.regular .backend-footer-more > details > summary > .app-icon {
        font-size: 1rem !important;
        line-height: 1;
    }

    .menubottom.regular > ul > .backend-footer-mobile-primary > a {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .menubottom.regular .backend-footer-more > details {
        position: relative;
    }

    .menubottom.regular .backend-footer-more > details > summary {
        list-style: none;
    }

    .menubottom.regular .backend-footer-more > details > summary::-webkit-details-marker {
        display: none;
    }

    .menubottom.regular .backend-footer-more > details[open] > summary,
    .menubottom.regular .backend-footer-more > details > summary:hover,
    .menubottom.regular .backend-footer-more > details > summary:focus {
        background-color: var(--color-bg-shading);
        border-color: var(--color-primary);
        color: var(--color-primary) !important;
    }

    .menubottom.regular .backend-footer-more-menu {
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--panel-radius);
        bottom: calc(100% + var(--space-2));
        box-shadow: var(--shadow-panel);
        display: flex;
        flex-direction: column;
        gap: 2px;
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
        padding: var(--space-2);
        position: absolute;
        right: 0;
        width: min(17rem, calc(100vw - 1rem));
        z-index: 2;
    }

    .menubottom.regular .backend-footer-more-menu > li,
    .menubottom.regular .backend-footer-more-menu > li.hide-for-small-only {
        display: block !important;
        width: 100%;
    }

    .menubottom.regular .backend-footer-more-menu a,
    .menubottom.regular .backend-footer-more-menu .backend-night-shift-toggle {
        align-items: center;
        display: flex;
        justify-content: flex-start;
        margin: 0 !important;
        min-height: 2.5rem;
        padding: var(--space-1) var(--space-2);
        text-align: left;
        width: 100%;
    }

    .ui-tabs > .ui-tabs-nav > li.ui-tabs-tab > a.ui-tabs-anchor {
        font-size: var(--font-size-standard);
        padding: var(--space-2);
    }

    .ui-tabs > .ui-tabs-panel,
    .ui-accordion .ui-accordion-content {
        padding: var(--space-3);
    }

    .fc .fc-toolbar {
        display: block;
    }

    .fc .fc-toolbar > * {
        margin-bottom: var(--space-2);
        text-align: center;
    }

    .fc .fc-toolbar > *:last-child {
        margin-bottom: 0;
    }

    #loginscreen {
        padding: 0 var(--space-2);
    }

    body[filename="index.php"] div.content-row.row {
        align-items: flex-start;
        min-height: 0;
    }
}

/*
 * Belegungsplan auf schmalen Touch-Geräten: Das gewachsene FullCalendar-
 * Markup bleibt unverändert, erhält aber wieder eine bedienbare Arbeitsfläche.
 */
@media only screen and (max-width: 39.9375em) {
    body[filename="belegungsplan.php"] div.content-row.row {
        padding-left: var(--space-1);
        padding-right: var(--space-1);
    }

    body[filename="belegungsplan.php"] #contentbereich > .columns {
        padding-left: 0;
        padding-right: 0;
    }

    body[filename="belegungsplan.php"] #tabs_belegungsplan > .ui-tabs-panel,
    body[filename="belegungsplan.php"] #tabs_belegungsplan-station > .ui-tabs-panel {
        padding: var(--space-1);
    }

    body[filename="belegungsplan.php"] #tabs_belegungsplan > .ui-tabs-nav,
    body[filename="belegungsplan.php"] #tabs_belegungsplan-station > .ui-tabs-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    body[filename="belegungsplan.php"] #tabs_belegungsplan > .ui-tabs-nav > li,
    body[filename="belegungsplan.php"] #tabs_belegungsplan-station > .ui-tabs-nav > li {
        flex: 0 0 auto;
    }

    body[filename="belegungsplan.php"] .fc .fc-toolbar {
        display: grid;
        gap: var(--space-2);
        grid-template-columns: 1fr;
        padding: var(--space-2) 0;
    }

    body[filename="belegungsplan.php"] .fc .fc-toolbar > * {
        margin: 0;
        min-width: 0;
        text-align: center;
        width: 100%;
    }

    body[filename="belegungsplan.php"] .fc .fc-toolbar .fc-left,
    body[filename="belegungsplan.php"] .fc .fc-toolbar .fc-right {
        align-items: center;
        display: flex;
        justify-content: center;
    }

    body[filename="belegungsplan.php"] .fc .fc-toolbar .fc-center,
    body[filename="belegungsplan.php"] .fc .fc-toolbar .fc-center .show-for-medium {
        display: block !important;
    }

    body[filename="belegungsplan.php"] .fc .fc-toolbar .fc-right {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    body[filename="belegungsplan.php"] .fc .fc-toolbar .fc-right .fc-button-group {
        display: inline-flex;
        flex: 0 0 auto;
        width: max-content;
    }

    body[filename="belegungsplan.php"] .fc .fc-toolbar .fc-right .show-for-medium {
        display: inline-flex !important;
        flex: 0 0 auto;
    }

    body[filename="belegungsplan.php"] .fc .fc-resource-area {
        min-width: 7.5rem;
        width: 38% !important;
    }

    body[filename="belegungsplan.php"] .fc .fc-time-area .fc-scroller {
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
    }
}

/* Kompakte, touchfähige Hauptnavigation ausschließlich auf Handys. */
.backend-mobile-menu-toggle,
.backend-mobile-submenu-toggle {
    display: none;
}

@media only screen and (max-width: 39.9375em) {
    .menucontainer {
        min-height: 3.75rem;
        position: relative;
    }

    .menucontainer .backend-mobile-menu-toggle {
        align-items: center;
        background-color: transparent !important;
        border: 1px solid var(--color-primary) !important;
        border-radius: var(--control-radius);
        color: var(--color-primary) !important;
        display: inline-flex !important;
        height: var(--control-height);
        justify-content: center;
        margin: 0;
        padding: 0 !important;
        position: absolute;
        right: var(--space-3);
        top: var(--space-2);
        width: var(--control-height);
        z-index: 1020;
    }

    .menucontainer .backend-mobile-menu-toggle:hover,
    .menucontainer .backend-mobile-menu-toggle:focus,
    .menucontainer.mobile-menu-open .backend-mobile-menu-toggle {
        background-color: var(--color-bg-shading) !important;
        border-color: var(--color-primary-hover) !important;
        color: var(--color-primary-hover) !important;
    }

    .menucontainer > ul.menu.menutop {
        display: flex;
        gap: 0;
        overflow: visible;
        padding: var(--space-1) var(--space-2);
        width: 100%;
    }

    .menucontainer .menutop > li:first-child {
        flex: 1 1 auto;
        justify-content: flex-start;
        margin: 0;
        min-height: 3.25rem;
        padding-right: calc(var(--control-height) + var(--space-4));
        width: 100%;
    }

    .menucontainer #topbarlink {
        padding: var(--space-1) var(--space-2);
    }

    .menucontainer #topbarlink img {
        max-height: 2.5rem;
        max-width: 6rem;
    }

    .menucontainer .menutop > li:not(:first-child):not(.suche) {
        display: none !important;
    }

    .menucontainer.mobile-menu-open .menutop > li:not(:first-child):not(.suche) {
        align-items: stretch;
        display: flex !important;
        flex: 1 1 100%;
        flex-wrap: wrap;
        width: 100%;
    }

    .menucontainer.mobile-menu-open .menutop > li > a:not(#topbarlink) {
        justify-content: flex-start;
        min-height: var(--control-height);
        padding: var(--space-2) var(--space-3);
        width: 100%;
    }

    .menucontainer.mobile-menu-open .menutop > li.is-dropdown-submenu-parent > a:not(#topbarlink) {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    .menucontainer .backend-mobile-submenu-toggle {
        align-items: center;
        background-color: transparent !important;
        border: 0 !important;
        color: var(--color-primary) !important;
        display: inline-flex !important;
        flex: 0 0 var(--control-height);
        height: var(--control-height);
        justify-content: center;
        margin: 0;
        padding: 0 !important;
        width: var(--control-height);
    }

    .menucontainer .backend-mobile-submenu-toggle:hover,
    .menucontainer .backend-mobile-submenu-toggle:focus {
        background-color: var(--color-bg-shading) !important;
        color: var(--color-primary-hover) !important;
    }

    .menucontainer .dropdown.menu.menutop > li.is-dropdown-submenu-parent > a::after {
        display: none;
    }

    .menucontainer.mobile-menu-open .menutop > li > .is-dropdown-submenu {
        background-color: var(--color-bg);
        border: 0;
        border-left: 2px solid var(--color-primary);
        border-radius: 0;
        box-shadow: none;
        display: none !important;
        flex: 1 1 100%;
        left: auto !important;
        margin: 0 var(--space-2) var(--space-2);
        max-width: none;
        min-width: 0;
        padding: var(--space-1) 0 var(--space-1) var(--space-2);
        position: static !important;
        width: calc(100% - var(--space-4));
    }

    .menucontainer.mobile-menu-open .menutop > li.mobile-submenu-open > .is-dropdown-submenu {
        display: block !important;
    }

    .menucontainer.mobile-menu-open .menutop > li > .is-dropdown-submenu > li > a {
        min-height: var(--control-height);
        padding: var(--space-2) var(--space-3);
    }

    .menucontainer.mobile-menu-open .menutop > li > a.SUA:not(#topbarlink) {
        margin: var(--space-2) 0 0;
        width: 100%;
    }
}

/* Verbindliche Typografie für AVS, Foundation, jQuery UI und FullCalendar. */
body,
body :where(*:not(i):not(.ui-icon):not(.fc-icon):not(.premium):not(.hilfe_pencil)) {
    font-size: var(--font-size-standard) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.ui-dialog-title,
.fc .fc-toolbar h2,
body[filename="cockpit.php"] #tabs-dashboard .countup {
    font-size: var(--font-size-heading) !important;
}

:is(h1, h2, h3, h4, h5, h6, .ui-dialog-title)
    :where(*:not(i):not(.ui-icon):not(.fc-icon):not(.premium):not(.hilfe_pencil)) {
    font-size: var(--font-size-heading) !important;
}

/* jQuery-UI-Komponenten bilden keine eigene Typografiestufe. */
.ui-widget,
.ui-widget :where(*:not(i):not(.ui-icon):not(.fc-icon)) {
    font-size: var(--font-size-standard) !important;
}

/* Der Zeitraum im Belegungsplan bleibt so kompakt wie die Bedienleiste. */
.fc .fc-toolbar h2,
.fc .fc-toolbar-title {
    font-size: var(--font-size-standard) !important;
}

small,
caption,
.help-text,
.subheader,
.form-error {
    font-size: var(--font-size-sub) !important;
}

.menubottom.regular a {
    color: var(--color-text) !important;
    font-size: var(--font-size-standard) !important;
}

.menubottom.regular a:hover,
.menubottom.regular a:focus {
    color: var(--color-primary) !important;
}

/* Einheitliche Bedienhöhe im Belegungsplan. */
body[filename="belegungsplan.php"] #tabs_belegungsplan button,
body[filename="belegungsplan.php"] #tabs_belegungsplan .button,
body[filename="belegungsplan.php"] #tabs_belegungsplan input[type="button"],
body[filename="belegungsplan.php"] #tabs_belegungsplan .fc-button {
    box-sizing: border-box;
    height: var(--control-height) !important;
    line-height: 1 !important;
    margin-bottom: 0;
    margin-top: 0;
    min-height: var(--control-height) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body[filename="belegungsplan.php"] #tabs_belegungsplan .fc-button .fc-icon {
    line-height: 1;
}

body[filename="belegungsplan.php"] #tabs_belegungsplan button.aktualisieren {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: var(--control-height);
}

body[filename="belegungsplan.php"] #tabs_belegungsplan button.aktualisieren .belegungsplan-refresh-icon {
    font-size: 1.25em !important;
    width: 1em;
}

/* Die aktuelle Zeit läuft vom Pfeil ohne Unterbrechung bis durch den Kalenderkörper. */
body[filename="belegungsplan.php"] .fc-now-indicator-line {
    border-left-color: var(--color-error);
}

body[filename="belegungsplan.php"] .fc-time-area.fc-widget-header .fc-now-indicator-arrow {
    border-top-color: var(--color-error);
}

body[filename="belegungsplan.php"] .fc-time-area.fc-widget-header .fc-now-indicator-arrow::after {
    border-left: 1px solid var(--color-error);
    content: "";
    height: 69px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 6px;
}

/* Fachliche Eventfarben bleiben erhalten; Hover und Tooltip sichern den Kontrast. */
body[filename="belegungsplan.php"] .fc-event,
body[filename="belegungsplan.php"] .fc-event .fc-content,
body[filename="belegungsplan.php"] .fc-event .fc-title {
    color: var(--color-event-text) !important;
}

body[filename="belegungsplan.php"] .fc-event .fc-title,
body[filename="belegungsplan.php"] .fc-event .belegungsplan-event-icons,
body[filename="belegungsplan.php"] .fc-event .belegungsplan-event-label {
    font-size: var(--font-size-sub) !important;
}

body[filename="belegungsplan.php"] .belegungsplan-event-icons {
    align-items: center;
    display: inline-flex;
    gap: 0.06em;
    line-height: 0.72;
    margin-right: 0.16em;
    vertical-align: 0.1em;
}

body[filename="belegungsplan.php"] .belegungsplan-event-icons .app-icon {
    font-size: 0.72em !important;
    line-height: 1;
    width: 1em;
}

@media only screen and (min-width: 64em) {
    body[filename="belegungsplan.php"] .fc-timeline-event.belegungsplan-event-with-icons .fc-title {
        align-items: flex-start;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1 !important;
        max-width: 100%;
    }

    body[filename="belegungsplan.php"] .fc-timeline-event.belegungsplan-event-with-icons .belegungsplan-event-icons {
        margin-bottom: 0.08em;
        margin-right: 0;
    }

    body[filename="belegungsplan.php"] .fc-timeline-event.belegungsplan-event-with-icons .belegungsplan-event-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

body[filename="belegungsplan.php"] .fc-event:hover {
    box-shadow: var(--shadow-panel);
    filter: none;
    outline: 2px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    outline-offset: 1px;
    z-index: 2;
}

body[filename="belegungsplan.php"] .ui-tooltip {
    background: var(--color-tooltip-bg);
    border: 1px solid var(--color-tooltip-border);
    color: var(--color-tooltip-text);
}

body[filename="belegungsplan.php"] .ui-tooltip * {
    color: var(--color-tooltip-text);
}

/* Accordion-Köpfe verwenden systemweit dieselbe dezente Fläche wie Tabellenköpfe. */
body .ui-accordion .ui-accordion-header,
body.frame h3.ui-accordion-header,
.ui-tabs .ui-tabs-panel div.ui-accordion h3.ui-accordion-header,
body .ui-accordion .ui-accordion-header.ui-accordion-header-active {
    background-color: var(--color-table-header-bg) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
}

body .ui-accordion .ui-accordion-header:hover,
body .ui-accordion .ui-accordion-header:focus,
body .ui-accordion .ui-accordion-header.ui-accordion-header-active:hover,
body .ui-accordion .ui-accordion-header.ui-accordion-header-active:focus {
    background-color: var(--color-table-header-bg) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* Geöffneter Kopf und Inhalt teilen sich eine einzige Trennlinie. */
body .ui-accordion .ui-accordion-header.ui-accordion-header-active + .ui-accordion-content {
    border-top: 0 !important;
}

/* Systemweite Buttonfarbe: Variantenklassen ändern keine Aktionsfarbe. */
button.success,
button.alert,
button.warning,
button.secondary,
input[type="button"].success,
input[type="button"].alert,
input[type="button"].warning,
input[type="button"].secondary,
input[type="submit"].success,
input[type="submit"].alert,
input[type="submit"].warning,
input[type="submit"].secondary,
.button.success,
.button.alert,
.button.warning,
.button.secondary,
.ui-button.success,
.ui-button.alert,
.ui-button.warning,
.ui-button.secondary,
button.ui-state-error,
.ui-button.ui-state-error {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-on-accent) !important;
}

button.success:hover:not(:disabled),
button.success:focus:not(:disabled),
button.alert:hover:not(:disabled),
button.alert:focus:not(:disabled),
button.warning:hover:not(:disabled),
button.warning:focus:not(:disabled),
button.secondary:hover:not(:disabled),
button.secondary:focus:not(:disabled),
input[type="button"].success:hover,
input[type="button"].success:focus,
input[type="button"].alert:hover,
input[type="button"].alert:focus,
input[type="button"].warning:hover,
input[type="button"].warning:focus,
input[type="button"].secondary:hover,
input[type="button"].secondary:focus,
input[type="submit"].success:hover,
input[type="submit"].success:focus,
input[type="submit"].alert:hover,
input[type="submit"].alert:focus,
input[type="submit"].warning:hover,
input[type="submit"].warning:focus,
input[type="submit"].secondary:hover,
input[type="submit"].secondary:focus,
.button.success:hover,
.button.success:focus,
.button.alert:hover,
.button.alert:focus,
.button.warning:hover,
.button.warning:focus,
.button.secondary:hover,
.button.secondary:focus,
.ui-button.success:hover,
.ui-button.success:focus,
.ui-button.alert:hover,
.ui-button.alert:focus,
.ui-button.warning:hover,
.ui-button.warning:focus,
.ui-button.secondary:hover,
.ui-button.secondary:focus,
button.ui-state-error:hover,
button.ui-state-error:focus,
.ui-button.ui-state-error:hover,
.ui-button.ui-state-error:focus {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: var(--color-on-accent) !important;
}

button.hollow,
input[type="button"].hollow,
input[type="submit"].hollow,
.button.hollow,
.ui-button.hollow {
    background-color: var(--color-surface) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

button.clear,
input[type="button"].clear,
input[type="submit"].clear,
.button.clear,
.ui-button.clear {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--color-primary) !important;
}

#loginscreen a.button.alert.hollow {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--color-primary) !important;
}

/* Night Shift: ruhige Kopfbereiche, ausschließlich hohle Buttons und dunkle Fokusfelder. */
:root[data-backend-theme="night"] body:not(.isfrontend) a:not(.button):not(.fc-event) {
    color: var(--color-text) !important;
}

:root[data-backend-theme="night"] body:not(.isfrontend) a:not(.button):not(.fc-event):hover,
:root[data-backend-theme="night"] body:not(.isfrontend) a:not(.button):not(.fc-event):focus,
:root[data-backend-theme="night"] body:not(.isfrontend) .ui-tabs > .ui-tabs-nav > li.ui-tabs-active > a,
:root[data-backend-theme="night"] body:not(.isfrontend) .ui-tabs > .ui-tabs-nav > li.ui-state-active > a,
:root[data-backend-theme="night"] body:not(.isfrontend) .menucontainer .menutop > li.is-active > a,
:root[data-backend-theme="night"] body:not(.isfrontend) .jstree-clicked {
    color: var(--color-primary) !important;
}

:root[data-backend-theme="night"] body .fc .fc-toolbar,
:root[data-backend-theme="night"] body .fc .fc-head,
:root[data-backend-theme="night"] body .fc .fc-head table,
:root[data-backend-theme="night"] body .fc .fc-head .fc-widget-header {
    background-color: var(--color-surface) !important;
    color: var(--color-heading) !important;
}

:root[data-backend-theme="night"] body button:not(.ui-datepicker-trigger):not(.backend-night-shift-toggle),
:root[data-backend-theme="night"] body input[type="button"],
:root[data-backend-theme="night"] body input[type="submit"],
:root[data-backend-theme="night"] body a.button,
:root[data-backend-theme="night"] body .button,
:root[data-backend-theme="night"] body .ui-button,
:root[data-backend-theme="night"] body .fc .fc-button-primary {
    background-color: transparent !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    filter: none !important;
}

:root[data-backend-theme="night"] body button:hover:not(:disabled):not(.ui-datepicker-trigger):not(.backend-night-shift-toggle),
:root[data-backend-theme="night"] body button:focus:not(:disabled):not(.ui-datepicker-trigger):not(.backend-night-shift-toggle),
:root[data-backend-theme="night"] body input[type="button"]:hover:not(:disabled),
:root[data-backend-theme="night"] body input[type="button"]:focus:not(:disabled),
:root[data-backend-theme="night"] body input[type="submit"]:hover:not(:disabled),
:root[data-backend-theme="night"] body input[type="submit"]:focus:not(:disabled),
:root[data-backend-theme="night"] body a.button:hover,
:root[data-backend-theme="night"] body a.button:focus,
:root[data-backend-theme="night"] body .button:hover,
:root[data-backend-theme="night"] body .button:focus,
:root[data-backend-theme="night"] body .ui-button:hover,
:root[data-backend-theme="night"] body .ui-button:focus,
:root[data-backend-theme="night"] body .fc .fc-button-primary:hover,
:root[data-backend-theme="night"] body .fc .fc-button-primary:focus,
:root[data-backend-theme="night"] body .fc .fc-button-primary:not(:disabled):active,
:root[data-backend-theme="night"] body .fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: transparent !important;
    border-color: var(--color-primary-hover) !important;
    color: var(--color-primary-hover) !important;
    filter: none !important;
}

:root[data-backend-theme="night"] body button:disabled,
:root[data-backend-theme="night"] body input[type="button"]:disabled,
:root[data-backend-theme="night"] body input[type="submit"]:disabled,
:root[data-backend-theme="night"] body .button.disabled,
:root[data-backend-theme="night"] body .ui-button:disabled,
:root[data-backend-theme="night"] body .fc .fc-button-primary:disabled {
    background-color: transparent !important;
    border-color: var(--color-muted) !important;
    color: var(--color-muted) !important;
}

:root[data-backend-theme="night"] body input[type="text"]:focus,
:root[data-backend-theme="night"] body input[type="email"]:focus,
:root[data-backend-theme="night"] body input[type="url"]:focus,
:root[data-backend-theme="night"] body input[type="tel"]:focus,
:root[data-backend-theme="night"] body input[type="password"]:focus,
:root[data-backend-theme="night"] body input[type="search"]:focus,
:root[data-backend-theme="night"] body input[type="date"]:focus,
:root[data-backend-theme="night"] body input[type="time"]:focus,
:root[data-backend-theme="night"] body input[type="datetime-local"]:focus,
:root[data-backend-theme="night"] body input[type="month"]:focus,
:root[data-backend-theme="night"] body input[type="week"]:focus,
:root[data-backend-theme="night"] body input[type="number"]:focus,
:root[data-backend-theme="night"] body textarea:focus,
:root[data-backend-theme="night"] body select:focus,
:root[data-backend-theme="night"] body .ui-autocomplete-input:focus {
    background-color: var(--color-surface) !important;
    border-color: var(--color-primary) !important;
    box-shadow: var(--focus-ring) !important;
    color: var(--color-text) !important;
    outline: none !important;
}

:root[data-backend-theme="night"] body input:-webkit-autofill,
:root[data-backend-theme="night"] body input:-webkit-autofill:hover,
:root[data-backend-theme="night"] body input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text) !important;
    box-shadow: 0 0 0 1000px var(--color-surface) inset !important;
    caret-color: var(--color-text);
}

/* Footeraktionen benötigen im Night Shift einen deutlich sichtbaren Hoverzustand. */
:root[data-backend-theme="night"] .menubottom.regular a:hover,
:root[data-backend-theme="night"] .menubottom.regular a:focus,
:root[data-backend-theme="night"] .menubottom.regular .backend-night-shift-toggle:hover,
:root[data-backend-theme="night"] .menubottom.regular .backend-night-shift-toggle:focus {
    background-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary-hover) !important;
}

:root[data-backend-theme="night"] .menubottom.regular a:focus-visible,
:root[data-backend-theme="night"] .menubottom.regular .backend-night-shift-toggle:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

/* Kompakte Dokumentauswahl im E-Mail-Protokoll der Formularvorschau. */
body[filename="vorgang-formular-auswahl.php"] #druckversand_row .table_no_pad {
    align-items: center;
    background-color: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    padding: var(--space-3);
}

body[filename="vorgang-formular-auswahl.php"] #druckversand_row .table_no_pad > .column,
body[filename="vorgang-formular-auswahl.php"] #druckversand_row .table_no_pad > .columns {
    align-items: center;
    display: flex;
    min-height: var(--control-height);
}

body[filename="vorgang-formular-auswahl.php"] #druckversand_row .table_no_pad > .text-right {
    gap: var(--space-2);
    justify-content: flex-end;
}

body[filename="vorgang-formular-auswahl.php"] #druckversand_row .table_no_pad > .column:empty {
    display: none;
}

body[filename="vorgang-formular-auswahl.php"] #druckversand_row .table_no_pad input,
body[filename="vorgang-formular-auswahl.php"] #druckversand_row .table_no_pad .button {
    height: var(--control-height) !important;
    margin-bottom: 0;
    margin-top: 0;
    min-height: var(--control-height) !important;
}

body[filename="vorgang-formular-auswahl.php"] #druckversand_row .table_no_pad input[type="button"] {
    line-height: calc(var(--control-height) - 2px) !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body[filename="vorgang-formular-auswahl.php"] #tab-email table.TableAlternierend {
    border-collapse: separate;
    border-spacing: 0 var(--space-1);
    margin-bottom: 0;
}

body[filename="vorgang-formular-auswahl.php"] #tab-email .email-log-panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    padding: var(--space-3);
}

body[filename="vorgang-formular-auswahl.php"] #tab-email table.TableAlternierend th {
    padding: var(--space-2) var(--space-3);
    vertical-align: middle;
}

body[filename="vorgang-formular-auswahl.php"] #tab-email table.TableAlternierend tr:not(:first-child) td {
    background-color: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) !important;
    vertical-align: middle !important;
}

body[filename="vorgang-formular-auswahl.php"] #tab-email table.TableAlternierend tr:nth-child(odd):not(:first-child) td {
    background-color: var(--color-bg-shading) !important;
}

body[filename="vorgang-formular-auswahl.php"] #tab-email table.TableAlternierend tr:not(:first-child) td:first-child {
    border-left: 1px solid var(--color-border);
    border-radius: var(--panel-radius) 0 0 var(--panel-radius);
}

body[filename="vorgang-formular-auswahl.php"] #tab-email table.TableAlternierend tr:not(:first-child) td:last-child {
    border-radius: 0 var(--panel-radius) var(--panel-radius) 0;
    border-right: 1px solid var(--color-border);
}

body[filename="vorgang-formular-auswahl.php"] .email-log-document-cell {
    position: relative;
    text-align: center;
    vertical-align: middle !important;
    width: 1%;
}

body[filename="vorgang-formular-auswahl.php"] .email-log-document-menu {
    display: inline-block;
    position: relative;
}

body[filename="vorgang-formular-auswahl.php"] .email-log-document-menu > summary {
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--control-radius);
    color: var(--color-primary);
    cursor: pointer;
    display: inline-grid;
    height: var(--control-height);
    list-style: none;
    place-items: center;
    width: var(--control-height);
}

body[filename="vorgang-formular-auswahl.php"] .email-log-document-menu > summary > i {
    align-items: center;
    display: inline-flex;
    height: 1em;
    justify-content: center;
    line-height: 1;
    margin: 0;
    width: 1em;
}

body[filename="vorgang-formular-auswahl.php"] .email-log-document-menu > summary::-webkit-details-marker {
    display: none;
}

body[filename="vorgang-formular-auswahl.php"] .email-log-document-menu > summary:hover,
body[filename="vorgang-formular-auswahl.php"] .email-log-document-menu > summary:focus,
body[filename="vorgang-formular-auswahl.php"] .email-log-document-menu[open] > summary {
    background-color: var(--color-bg-shading);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
}

body[filename="vorgang-formular-auswahl.php"] .email-log-document-menu > summary:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

body[filename="vorgang-formular-auswahl.php"] .email-log-document-menu-items {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-floating);
    display: grid;
    min-width: min(22rem, calc(100vw - 2rem));
    padding: var(--space-2);
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-1));
    z-index: 1100;
}

body[filename="vorgang-formular-auswahl.php"] .email-log-document-option {
    align-items: center;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: var(--control-radius);
    color: var(--color-text) !important;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1.25rem minmax(0, 1fr);
    height: auto !important;
    justify-items: start;
    line-height: 1.25 !important;
    margin: 0;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3) !important;
    text-align: left;
    width: 100%;
}

body[filename="vorgang-formular-auswahl.php"] .email-log-document-option:hover,
body[filename="vorgang-formular-auswahl.php"] .email-log-document-option:focus {
    background-color: var(--color-bg-shading) !important;
    color: var(--color-primary) !important;
}

body[filename="vorgang-formular-auswahl.php"] .email-log-document-option span {
    overflow-wrap: anywhere;
}

body[filename="vorgang-formular-auswahl.php"] .email-log-document-option > i {
    align-items: center;
    align-self: center;
    display: inline-flex;
    height: 1.25rem;
    justify-content: center;
    justify-self: center;
    line-height: 1;
    margin: 0;
    width: 1.25rem;
}

/* Personen-Suchergebnis: volle DataTable-Breite und kompakte Text-Aktionsauswahl. */
#person_suchergebnis fieldset,
#person_suchergebnis .dt-container,
#person_suchergebnis .dt-layout-row,
#person_suchergebnis .dt-layout-cell,
#person_suchergebnis .dt-layout-table,
#person_suchergebnis table.tablePersonen.dataTable {
    box-sizing: border-box;
    max-width: none !important;
    width: 100% !important;
}

#person_suchergebnis table.tablePersonen .person-action-column,
#person_suchergebnis table.tablePersonen .person-action-cell {
    text-align: center;
    vertical-align: middle;
    width: calc(var(--control-height) + (2 * var(--space-3)));
}

#person_suchergebnis table.tablePersonen > thead > tr:first-child > .person-number-column {
    border-top-left-radius: var(--panel-radius);
}

#person_suchergebnis table.tablePersonen > tbody > tr:last-child > .person-number-column {
    border-bottom-left-radius: var(--panel-radius);
}

#person_suchergebnis .person-action-cell {
    overflow: visible;
    position: relative;
}

#person_suchergebnis .person-action-menu {
    display: inline-block;
    position: relative;
}

#person_suchergebnis .person-action-menu[open] {
    z-index: 1200;
}

#person_suchergebnis .person-action-menu > summary {
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--control-radius);
    color: var(--color-primary);
    cursor: pointer;
    display: inline-flex;
    height: var(--control-height);
    justify-content: center;
    list-style: none;
    margin: 0;
    width: var(--control-height);
}

#person_suchergebnis .person-action-menu > summary::-webkit-details-marker {
    display: none;
}

#person_suchergebnis .person-action-menu > summary > i {
    align-items: center;
    display: inline-flex;
    height: 1em;
    justify-content: center;
    line-height: 1;
    margin: 0;
    width: 1em;
}

#person_suchergebnis .person-action-menu > summary:hover,
#person_suchergebnis .person-action-menu > summary:focus,
#person_suchergebnis .person-action-menu[open] > summary {
    background-color: var(--color-bg-shading);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
}

#person_suchergebnis .person-action-menu > summary:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

#person_suchergebnis .person-action-menu-items {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-floating);
    display: grid;
    min-width: min(21rem, calc(100vw - 2rem));
    padding: var(--space-2);
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-1));
    z-index: 1200;
}

#person_suchergebnis .person-action-option {
    align-items: center;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: var(--control-radius);
    color: var(--color-text) !important;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1.25rem minmax(0, 1fr);
    height: auto !important;
    justify-items: start;
    line-height: 1.25 !important;
    margin: 0;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3) !important;
    text-align: left;
    text-decoration: none !important;
    width: 100%;
}

#person_suchergebnis .person-action-option:hover,
#person_suchergebnis .person-action-option:focus {
    background-color: var(--color-bg-shading) !important;
    color: var(--color-primary) !important;
}

#person_suchergebnis .person-action-option.is-disabled {
    color: var(--color-muted) !important;
    cursor: not-allowed;
}

#person_suchergebnis .person-action-option > i {
    align-items: center;
    display: inline-flex;
    height: 1.25rem;
    justify-content: center;
    justify-self: center;
    line-height: 1;
    margin: 0;
    width: 1.25rem;
}

/* Gutscheinliste: kompakte, beschriftete Zeilenaktionen. */
body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-column,
body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-cell {
    text-align: center;
    vertical-align: middle;
    width: calc(var(--control-height) + (2 * var(--space-3)));
}

body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-cell {
    overflow: visible;
    position: relative;
}

body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-menu {
    display: inline-block;
    position: relative;
}

body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-menu[open] {
    z-index: 1200;
}

body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-menu > summary {
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--control-radius);
    color: var(--color-primary);
    cursor: pointer;
    display: inline-flex;
    height: var(--control-height);
    justify-content: center;
    list-style: none;
    margin: 0;
    width: var(--control-height);
}

body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-menu > summary::-webkit-details-marker {
    display: none;
}

body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-menu > summary > i {
    align-items: center;
    display: inline-flex;
    height: 1em;
    justify-content: center;
    line-height: 1;
    margin: 0;
    width: 1em;
}

body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-menu > summary:hover,
body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-menu > summary:focus,
body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-menu[open] > summary {
    background-color: var(--color-bg-shading);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
}

body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-menu > summary:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-menu-items {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-floating);
    display: grid;
    min-width: min(12rem, calc(100vw - 2rem));
    padding: var(--space-2);
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-1));
    z-index: 1200;
}

body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-option {
    align-items: center;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: var(--control-radius);
    color: var(--color-text) !important;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1.25rem minmax(0, 1fr);
    height: auto !important;
    justify-items: start;
    line-height: 1.25 !important;
    margin: 0;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3) !important;
    text-align: left;
    width: 100%;
}

body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-option:hover,
body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-option:focus {
    background-color: var(--color-bg-shading) !important;
    color: var(--color-primary) !important;
}

body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-option:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

body[filename="verwaltung-gutschein-finden.php"] #table_vorgang .voucher-action-option > i {
    align-items: center;
    display: inline-flex;
    height: 1.25rem;
    justify-content: center;
    justify-self: center;
    line-height: 1;
    margin: 0;
    width: 1.25rem;
}

/* Verwaltung > Artikel: DataTable-Zeilenaktionen als beschriftetes Kompaktmenü. */
body[filename="verwaltung.php"] #tabs-artikel .article-management-table .article-action-column,
body[filename="verwaltung.php"] #tabs-artikel .article-management-table .article-action-cell {
    text-align: center;
    vertical-align: middle;
    width: calc(var(--control-height) + (2 * var(--space-3)));
}

body[filename="verwaltung.php"] #tabs-artikel .article-management-table .article-action-cell {
    overflow: visible;
    position: relative;
}

body[filename="verwaltung.php"] #tabs-artikel .article-action-menu {
    display: inline-block;
    position: relative;
}

body[filename="verwaltung.php"] #tabs-artikel .article-action-menu[open] {
    z-index: 1200;
}

body[filename="verwaltung.php"] #tabs-artikel .article-action-menu > summary {
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--control-radius);
    color: var(--color-primary);
    cursor: pointer;
    display: inline-flex;
    height: var(--control-height);
    justify-content: center;
    list-style: none;
    margin: 0;
    width: var(--control-height);
}

body[filename="verwaltung.php"] #tabs-artikel .article-action-menu > summary::-webkit-details-marker {
    display: none;
}

body[filename="verwaltung.php"] #tabs-artikel .article-action-menu > summary > i {
    align-items: center;
    display: inline-flex;
    height: 1em;
    justify-content: center;
    line-height: 1;
    margin: 0;
    width: 1em;
}

body[filename="verwaltung.php"] #tabs-artikel .article-action-menu > summary:hover,
body[filename="verwaltung.php"] #tabs-artikel .article-action-menu > summary:focus,
body[filename="verwaltung.php"] #tabs-artikel .article-action-menu[open] > summary {
    background-color: var(--color-bg-shading);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
}

body[filename="verwaltung.php"] #tabs-artikel .article-action-menu > summary:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

body[filename="verwaltung.php"] #tabs-artikel .article-action-menu-items {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-floating);
    display: grid;
    min-width: min(12rem, calc(100vw - 2rem));
    padding: var(--space-2);
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-1));
    z-index: 1200;
}

body[filename="verwaltung.php"] #tabs-artikel .article-action-option {
    align-items: center;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: var(--control-radius);
    color: var(--color-text) !important;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1.25rem minmax(0, 1fr);
    height: auto !important;
    justify-items: start;
    line-height: 1.25 !important;
    margin: 0;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3) !important;
    text-align: left;
    width: 100%;
}

body[filename="verwaltung.php"] #tabs-artikel .article-action-option:hover,
body[filename="verwaltung.php"] #tabs-artikel .article-action-option:focus {
    background-color: var(--color-bg-shading) !important;
    color: var(--color-primary) !important;
}

body[filename="verwaltung.php"] #tabs-artikel .article-action-option:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

body[filename="verwaltung.php"] #tabs-artikel .article-action-option > i {
    align-items: center;
    display: inline-flex;
    height: 1.25rem;
    justify-content: center;
    justify-self: center;
    line-height: 1;
    margin: 0;
    width: 1.25rem;
}

/* Schadensmanagement: kompakte Fahrzeug- und Zeilenaktionen ohne zweite Suche. */
body[filename="verwaltung-schaden-manage.php"] .damage-filter-panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
}

body[filename="verwaltung-schaden-manage.php"] .damage-filter-header {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

body[filename="verwaltung-schaden-manage.php"] .damage-filter-header > .app-icon {
    align-items: center;
    background-color: var(--color-bg-shading);
    border-radius: 50%;
    color: var(--color-primary);
    display: inline-flex;
    flex: 0 0 2rem;
    height: 2rem;
    justify-content: center;
    margin: 0;
    width: 2rem;
}

body[filename="verwaltung-schaden-manage.php"] .damage-filter-header h2 {
    color: var(--color-text);
    font-size: var(--font-size-heading);
    margin: 0;
}

body[filename="verwaltung-schaden-manage.php"] .damage-filter-header p {
    color: var(--color-muted);
    margin: var(--space-1) 0 0;
}

body[filename="verwaltung-schaden-manage.php"] .damage-filter-grid {
    align-items: end;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
}

body[filename="verwaltung-schaden-manage.php"] .damage-filter-field {
    min-width: 0;
}

body[filename="verwaltung-schaden-manage.php"] .damage-filter-label {
    color: var(--color-text);
    display: block;
    margin-bottom: var(--space-1);
}

body[filename="verwaltung-schaden-manage.php"] .damage-filter-field input,
body[filename="verwaltung-schaden-manage.php"] .damage-filter-field select {
    margin-bottom: 0;
    width: 100%;
}

body[filename="verwaltung-schaden-manage.php"] .damage-filter-actions {
    display: flex;
    justify-content: flex-end;
}

body[filename="verwaltung-schaden-manage.php"] .damage-filter-actions .button {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
    justify-content: center;
    margin: 0;
}

body[filename="verwaltung-schaden-manage.php"] .damage-filter-actions .button > .app-icon {
    margin: 0;
}

@media only screen and (min-width: 40em) {
    body[filename="verwaltung-schaden-manage.php"] .damage-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[filename="verwaltung-schaden-manage.php"] .damage-filter-actions {
        grid-column: 1 / -1;
    }
}

@media only screen and (min-width: 64em) {
    body[filename="verwaltung-schaden-manage.php"] .damage-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media only screen and (min-width: 80em) {
    body[filename="verwaltung-schaden-manage.php"] .damage-filter-grid {
        grid-template-columns: minmax(10rem, 0.9fr) minmax(14rem, 1.2fr) minmax(12rem, 1fr) minmax(12rem, 1fr) auto;
    }

    body[filename="verwaltung-schaden-manage.php"] .damage-filter-actions {
        grid-column: auto;
    }
}

body[filename="verwaltung-schaden-manage.php"] .damage-vehicle-control {
    align-items: start;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: minmax(0, 1fr) var(--control-height);
    margin: 0;
    width: 100%;
}

body[filename="verwaltung-schaden-manage.php"] .damage-vehicle-control::before,
body[filename="verwaltung-schaden-manage.php"] .damage-vehicle-control::after {
    content: none;
    display: none;
}

body[filename="verwaltung-schaden-manage.php"] .damage-vehicle-field,
body[filename="verwaltung-schaden-manage.php"] .damage-vehicle-actions {
    float: none !important;
    min-width: 0;
    padding: 0;
    width: auto !important;
}

body[filename="verwaltung-schaden-manage.php"] .damage-vehicle-field {
    grid-column: 1;
    grid-row: 1;
}

body[filename="verwaltung-schaden-manage.php"] .damage-vehicle-actions {
    grid-column: 2;
    grid-row: 1;
}

body[filename="verwaltung-schaden-manage.php"] .damage-vehicle-field input[type="text"] {
    margin: 0;
    width: 100% !important;
}

body[filename="verwaltung-schaden-manage.php"] .damage-vehicle-actions {
    position: relative;
}

body[filename="verwaltung-schaden-manage.php"] .damage-management-table,
body[filename="verwaltung-schaden-manage.php"] .dt-container {
    width: 100% !important;
}

body[filename="verwaltung-schaden-manage.php"] .damage-management-table .damage-action-column,
body[filename="verwaltung-schaden-manage.php"] .damage-management-table .damage-action-cell {
    text-align: center;
    vertical-align: middle;
    width: calc(var(--control-height) + (2 * var(--space-3)));
}

body[filename="verwaltung-schaden-manage.php"] .damage-management-table .damage-action-cell {
    overflow: visible;
    position: relative;
}

body[filename="verwaltung-schaden-manage.php"] .damage-action-menu {
    display: inline-block;
    position: relative;
}

details[class$="-action-menu"] > summary {
    box-sizing: border-box;
}

body[filename="verwaltung-schaden-manage.php"] .damage-action-menu[open] {
    z-index: 1200;
}

body[filename="verwaltung-schaden-manage.php"] .damage-action-menu > summary {
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--control-radius);
    color: var(--color-primary);
    cursor: pointer;
    display: inline-flex;
    height: var(--control-height);
    justify-content: center;
    list-style: none;
    margin: 0;
    width: var(--control-height);
}

body[filename="verwaltung-schaden-manage.php"] .damage-action-menu > summary::-webkit-details-marker {
    display: none;
}

body[filename="verwaltung-schaden-manage.php"] .damage-action-menu > summary > i {
    align-items: center;
    display: inline-flex;
    height: 1em;
    justify-content: center;
    line-height: 1;
    margin: 0;
    width: 1em;
}

body[filename="verwaltung-schaden-manage.php"] .damage-action-menu > summary:hover,
body[filename="verwaltung-schaden-manage.php"] .damage-action-menu > summary:focus,
body[filename="verwaltung-schaden-manage.php"] .damage-action-menu[open] > summary {
    background-color: var(--color-bg-shading);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
}

body[filename="verwaltung-schaden-manage.php"] .damage-action-menu > summary:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

body[filename="verwaltung-schaden-manage.php"] .damage-action-menu-items {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-floating);
    display: grid;
    min-width: min(18rem, calc(100vw - 2rem));
    padding: var(--space-2);
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-1));
    z-index: 1200;
}

body[filename="verwaltung-schaden-manage.php"] .damage-action-option {
    align-items: center;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: var(--control-radius);
    color: var(--color-text) !important;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1.25rem minmax(0, 1fr);
    height: auto !important;
    justify-items: start;
    line-height: 1.25 !important;
    margin: 0;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3) !important;
    text-align: left;
    width: 100%;
}

body[filename="verwaltung-schaden-manage.php"] .damage-action-option:hover,
body[filename="verwaltung-schaden-manage.php"] .damage-action-option:focus {
    background-color: var(--color-bg-shading) !important;
    color: var(--color-primary) !important;
}

body[filename="verwaltung-schaden-manage.php"] .damage-action-option:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

body[filename="verwaltung-schaden-manage.php"] .damage-action-option > i {
    align-items: center;
    display: inline-flex;
    height: 1.25rem;
    justify-content: center;
    justify-self: center;
    line-height: 1;
    margin: 0;
    width: 1.25rem;
}

/* Wiederverwendbares kompaktes Aktionsmenü für Backend-Tabellen. */
.backend-action-column,
.backend-action-cell {
    text-align: center;
    vertical-align: middle;
    width: calc(var(--control-height) + (2 * var(--space-3)));
}

.backend-action-cell {
    overflow: visible;
    position: relative;
}

.backend-action-menu {
    display: inline-block;
    position: relative;
}

.backend-action-menu[open] {
    isolation: isolate;
    z-index: 1000000;
}

.backend-action-menu > summary {
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--control-radius);
    color: var(--color-primary);
    cursor: pointer;
    display: inline-flex;
    height: var(--control-height);
    justify-content: center;
    list-style: none;
    margin: 0;
    width: var(--control-height);
}

.backend-action-menu > summary::-webkit-details-marker {
    display: none;
}

.backend-action-menu > summary > i {
    align-items: center;
    display: inline-flex;
    height: 1em;
    justify-content: center;
    line-height: 1;
    margin: 0;
    width: 1em;
}

.backend-action-menu > summary:hover,
.backend-action-menu > summary:focus,
.backend-action-menu[open] > summary {
    background-color: var(--color-bg-shading);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
}

.backend-action-menu > summary:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.backend-action-menu-items {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-floating);
    display: grid;
    gap: var(--space-1);
    min-width: min(12rem, calc(100vw - 2rem));
    padding: var(--space-2);
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-1));
    z-index: 1000001;
}

.backend-action-option {
    align-items: center;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: var(--control-radius);
    color: var(--color-text) !important;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 1.25rem minmax(0, 1fr);
    height: auto !important;
    justify-items: start;
    line-height: 1.25 !important;
    margin: 0;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4) !important;
    text-align: left;
    font-weight: 500 !important;
    width: 100%;
}

.backend-action-option > i,
.backend-action-option > span {
    font-weight: inherit;
}

.backend-action-option:hover,
.backend-action-option:focus {
    background-color: var(--color-bg-shading) !important;
    color: var(--color-primary) !important;
}

.backend-action-option:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.backend-action-option > i {
    align-items: center;
    display: inline-flex;
    height: 1.25rem;
    justify-content: center;
    justify-self: center;
    line-height: 1;
    margin: 0;
    width: 1.25rem;
}

/* Alle ueber einen Drei-Punkte-Button geoeffneten Aktionsmenues bleiben linksbuendig. */
details > [class*="-action-menu-items"],
body[filename="vorgang-formular-auswahl.php"] .email-log-document-menu-items {
    justify-items: stretch;
    text-align: left !important;
}

details > [class*="-action-menu-items"] > [class*="-action-option"],
body[filename="vorgang-formular-auswahl.php"] .email-log-document-menu-items > .email-log-document-option {
    justify-content: start !important;
    justify-items: start !important;
    text-align: left !important;
}

details > [class*="-action-menu-items"] > [class*="-action-option"] > span,
body[filename="vorgang-formular-auswahl.php"] .email-log-document-option > span {
    justify-self: stretch;
    text-align: left !important;
}

body[filename="verwaltung-newsboard.php"] #table_vorgang,
body[filename="verwaltung-newsboard.php"] #table_vorgang_wrapper {
    width: 100% !important;
}

/* Personenformular V2: parallele Smarty-Maske mit bestehendem Fachvertrag */
body[filename="verwaltung-personen-edit-v2.php"] {
    background-color: var(--color-surface);
}

.person-editor-v2 {
    color: var(--color-text);
    margin: 0 auto;
    max-width: 78rem;
    padding: var(--space-4);
}

.person-editor-v2__header {
    align-items: flex-start;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.person-editor-v2__header h1,
.person-editor-v2__section-heading h2 {
    margin: 0;
}

.person-editor-v2__eyebrow {
    align-items: center;
    color: var(--color-primary);
    display: flex;
    font-size: var(--font-size-sub);
    font-weight: 600;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
    text-transform: uppercase;
}

.person-editor-v2__intro,
.person-editor-v2__section-heading p {
    color: var(--color-muted);
    margin: var(--space-1) 0 0;
}

.person-editor-v2__mode {
    background-color: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--control-radius);
    color: var(--color-primary);
    flex: 0 0 auto;
    font-size: var(--font-size-sub);
    font-weight: 600;
    padding: var(--space-2) var(--space-3);
}

.person-editor-v2__quick-entry {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
}

.person-editor-v2__section-heading {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.person-editor-v2__section-icon {
    align-items: center;
    background-color: var(--color-bg-shading);
    border-radius: var(--control-radius);
    color: var(--color-primary);
    display: inline-flex;
    flex: 0 0 var(--control-height);
    height: var(--control-height);
    justify-content: center;
}

.person-editor-v2__quick-entry > label {
    color: var(--color-heading);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.person-editor-v2__quick-entry textarea {
    min-height: 6rem;
    resize: vertical;
}

.person-editor-v2__quick-entry-action {
    display: flex;
    justify-content: flex-end;
}

.person-editor-v2__quick-entry-action .button,
.person-editor-v2__actions .button {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
    justify-content: center;
    margin: 0;
}

.person-editor-v2__form > #check_buchung_iframe {
    display: none;
}

.person-editor-v2__form > .ui-accordion,
.person-editor-v2__form > .DivAccordion,
.person-editor-v2__form > .DivAccordionClosed {
    margin-bottom: var(--space-3);
}

.person-editor-v2__form .ui-accordion .ui-accordion-header {
    align-items: center;
    display: flex;
    min-height: calc(var(--control-height) + var(--space-3));
    padding: var(--space-2) var(--space-4) var(--space-2) 2.25rem;
}

.person-editor-v2__form .ui-accordion .ui-accordion-content {
    padding: var(--space-4);
}

.person-editor-v2__form table.tablePersonen {
    border: 0;
    margin: 0;
    width: 100%;
}

.person-editor-v2__form table.tablePersonen > tbody > tr {
    background-color: transparent;
}

.person-editor-v2__form table.tablePersonen > tbody > tr > td {
    background-color: transparent;
    border: 0;
    padding: var(--space-2);
    vertical-align: middle;
}

.person-editor-v2__form table.tablePersonen > tbody > tr > td:first-child:not([colspan]) {
    color: var(--color-heading);
    font-weight: 600;
}

.person-editor-v2__form table.tablePersonen input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.person-editor-v2__form table.tablePersonen select,
.person-editor-v2__form table.tablePersonen textarea {
    margin-bottom: 0;
    max-width: none;
    width: 100%;
}

.person-editor-v2__form table.tablePersonen:not(#tb_freitext):not(:has(> tbody > tr > td:nth-child(3))) > tbody {
    display: grid;
    gap: var(--space-3) var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.person-editor-v2__form table.tablePersonen:not(#tb_freitext):not(:has(> tbody > tr > td:nth-child(3))) > tbody > tr:not(.hide):not([style*="display:none"]):not([style*="display: none"]) {
    align-content: start;
    display: grid !important;
    grid-template-columns: minmax(7.5rem, 0.32fr) minmax(0, 1fr);
}

.person-editor-v2__form table.tablePersonen:not(#tb_freitext):not(:has(> tbody > tr > td:nth-child(3))) > tbody > tr:has(> td:only-child),
.person-editor-v2__form table.tablePersonen:not(#tb_freitext):not(:has(> tbody > tr > td:nth-child(3))) > tbody > tr:has(> td[colspan]) {
    grid-column: 1 / -1;
}

.person-editor-v2__form table.tablePersonen:not(#tb_freitext):not(:has(> tbody > tr > td:nth-child(3))) > tbody > tr > td {
    width: auto;
}

.person-editor-v2__form .callout {
    margin-bottom: var(--space-3);
}

.person-editor-v2__form #tb_freitext textarea {
    min-height: 8rem;
}

.person-editor-v2__form .table_calendar {
    align-items: center;
    display: grid;
    gap: var(--space-1);
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
}

.person-editor-v2__form .table_calendar .aktuelles_datum_setzen {
    margin-left: 0;
}

.person-editor-v2__actions {
    align-items: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    bottom: var(--space-3);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    margin-top: var(--space-4);
    padding: var(--space-3);
    position: sticky;
    z-index: 100;
}

.person-editor-v2__cancel {
    background-color: transparent !important;
    color: var(--color-primary) !important;
}

.person-editor-v2__submit {
    min-width: 11rem;
}

@media only screen and (min-width: 40em) and (max-width: 63.9375em) {
    .person-editor-v2__form table.tablePersonen:not(#tb_freitext):not(:has(> tbody > tr > td:nth-child(3))) > tbody > tr:not(.hide):not([style*="display:none"]):not([style*="display: none"]) {
        grid-template-columns: minmax(0, 1fr);
    }

    .person-editor-v2__form table.tablePersonen:not(#tb_freitext):not(:has(> tbody > tr > td:nth-child(3))) > tbody > tr > td {
        display: block;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    .person-editor-v2__form table.tablePersonen:not(#tb_freitext):not(:has(> tbody > tr > td:nth-child(3))) > tbody > tr > td:first-child:not([colspan]) {
        padding-bottom: 0;
    }
}

@media only screen and (max-width: 39.9375em) {
    .person-editor-v2 {
        padding: var(--space-3);
    }

    .person-editor-v2__header {
        display: block;
    }

    .person-editor-v2__mode {
        display: inline-block;
        margin-top: var(--space-3);
    }

    .person-editor-v2__form .ui-accordion .ui-accordion-content {
        padding: var(--space-3);
    }

    .person-editor-v2__form table.tablePersonen:not(#tb_freitext):not(:has(> tbody > tr > td:nth-child(3))) > tbody {
        grid-template-columns: minmax(0, 1fr);
    }

    .person-editor-v2__form table.tablePersonen:not(#tb_freitext):not(:has(> tbody > tr > td:nth-child(3))) > tbody > tr:not(.hide):not([style*="display:none"]):not([style*="display: none"]) {
        display: block !important;
    }

    .person-editor-v2__form #tb_freitext > tbody > tr {
        display: block;
    }

    .person-editor-v2__form table.tablePersonen > tbody > tr > td {
        display: block;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    .person-editor-v2__form table.tablePersonen > tbody > tr > td:first-child:not([colspan]) {
        padding-bottom: 0;
    }

    .person-editor-v2__actions {
        align-items: stretch;
        bottom: var(--space-2);
        flex-direction: column-reverse;
    }

    .person-editor-v2__actions .button {
        width: 100%;
    }

    #person_suchergebnis table.tablePersonen > thead > tr:first-child > .person-name-column {
        border-top-left-radius: var(--panel-radius);
    }

    #person_suchergebnis table.tablePersonen > tbody > tr:last-child > .person-name-column {
        border-bottom-left-radius: var(--panel-radius);
    }

    #person_suchergebnis .person-action-menu-items {
        min-width: 0;
        width: min(18rem, calc(100vw - 5rem));
    }

    body[filename="vorgang-formular-auswahl.php"] #druckversand_row .table_no_pad {
        gap: var(--space-2);
    }

    body[filename="vorgang-formular-auswahl.php"] #druckversand_row .table_no_pad > .column,
    body[filename="vorgang-formular-auswahl.php"] #druckversand_row .table_no_pad > .columns {
        flex: 1 1 100%;
        padding-left: 0;
        padding-right: 0;
    }

    body[filename="vorgang-formular-auswahl.php"] #druckversand_row .table_no_pad > .text-right {
        justify-content: flex-start;
    }

    body[filename="verwaltung-schaden-manage.php"] .damage-action-menu-items {
        min-width: 0;
        width: min(18rem, calc(100vw - 5rem));
    }
}

/* Autoarchiv v2 */
.autoarchive-v2-page {
    padding: var(--space-4);
}

.autoarchive-v2-header,
.autoarchive-v2-section-header {
    align-items: flex-start;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
}

.autoarchive-v2-header {
    margin-bottom: var(--space-4);
}

.autoarchive-v2-header h1,
.autoarchive-v2-header p,
.autoarchive-v2-section-header h2,
.autoarchive-v2-section-header p,
.autoarchive-v2-month-card h3,
.autoarchive-v2-month-card p {
    margin-bottom: 0;
}

.autoarchive-v2-intro p {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    margin-bottom: 0;
}

.autoarchive-v2-intro .app-icon {
    color: var(--color-primary);
    flex: 0 0 auto;
}

.autoarchive-v2-summary {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: var(--space-4);
}

.autoarchive-v2-summary article {
    align-items: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
    display: flex;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
}

.autoarchive-v2-summary article > .app-icon {
    color: var(--color-primary);
    font-size: 1.5rem;
}

.autoarchive-v2-summary strong,
.autoarchive-v2-summary span {
    display: block;
}

.autoarchive-v2-summary strong {
    color: var(--color-heading);
    font-size: var(--font-size-heading);
}

.autoarchive-v2-summary span {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
}

.autoarchive-v2-panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-panel);
    margin-bottom: var(--space-4);
    min-width: 0;
    padding: var(--space-4);
}

.autoarchive-v2-section-header {
    margin-bottom: var(--space-4);
}

.autoarchive-v2-section-header > .button,
.autoarchive-v2-preview-actions .button,
.autoarchive-v2-month-actions .button,
.autoarchive-v2-file-actions .button,
.autoarchive-v2-year-nav .button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    margin: 0;
    text-align: center;
}

.autoarchive-v2-section-header > .button i,
.autoarchive-v2-preview-actions .button i,
.autoarchive-v2-month-actions .button i,
.autoarchive-v2-file-actions .button i,
.autoarchive-v2-year-nav .button i {
    flex: 0 0 auto;
}

.autoarchive-v2-year-nav,
.autoarchive-v2-month-actions,
.autoarchive-v2-preview-actions,
.autoarchive-v2-file-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.autoarchive-v2-year-nav {
    margin-bottom: var(--space-4);
}

.autoarchive-v2-month-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.autoarchive-v2-month-card {
    background-color: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: space-between;
    min-width: 0;
    padding: var(--space-3);
}

.autoarchive-v2-month-card.is-active {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.autoarchive-v2-month-card p,
.autoarchive-v2-section-header p {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
}

.autoarchive-v2-month-actions .button {
    flex: 1 1 auto;
}

.autoarchive-v2-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
}

.autoarchive-v2-table {
    margin-bottom: 0;
    table-layout: fixed;
    width: 100%;
}

.autoarchive-v2-table th:first-child {
    width: 50%;
}

.autoarchive-v2-table th:nth-child(2),
.autoarchive-v2-table th:nth-child(3) {
    width: 10rem;
}

.autoarchive-v2-table th:last-child {
    width: 18rem;
}

.autoarchive-v2-file-name,
.autoarchive-v2-preview-file-name {
    overflow-wrap: anywhere;
}

.autoarchive-v2-file-actions {
    justify-content: flex-end;
}

.autoarchive-v2-file-actions .button {
    padding: var(--space-2) var(--space-3);
}

.autoarchive-v2-file-note {
    color: var(--color-muted);
    font-size: var(--font-size-sub);
}

.autoarchive-v2-empty {
    color: var(--color-muted);
    padding: var(--space-4);
    text-align: center;
}

.autoarchive-v2-empty p {
    margin-bottom: 0;
}

.autoarchive-v2-preview-dialog {
    display: none;
    overflow: hidden !important;
}

.autoarchive-v2-preview-window {
    z-index: 100001 !important;
}

.autoarchive-v2-preview-overlay {
    z-index: 100000 !important;
}

.autoarchive-v2-preview-dialog-header {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.autoarchive-v2-preview-file-name {
    min-width: 0;
}

.autoarchive-v2-preview-download {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    margin: 0;
    text-align: center;
}

.autoarchive-v2-preview-frame {
    background-color: var(--color-bg-shading);
    border: 1px solid var(--color-border);
    border-radius: var(--panel-radius);
    display: block;
    height: calc(100% - 3.5rem);
    min-height: 20rem;
    width: 100%;
}

@media only screen and (max-width: 63.9375em) {
    .autoarchive-v2-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .autoarchive-v2-table {
        min-width: 58rem;
    }
}

@media only screen and (max-width: 39.9375em) {
    .autoarchive-v2-page {
        padding: var(--space-3);
    }

    .autoarchive-v2-header,
    .autoarchive-v2-section-header {
        display: block;
    }

    .autoarchive-v2-section-header > .button,
    .autoarchive-v2-preview-actions {
        margin-top: var(--space-3);
    }

    .autoarchive-v2-month-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .autoarchive-v2-table-wrap {
        overflow: visible;
    }

    .autoarchive-v2-table,
    .autoarchive-v2-table tbody,
    .autoarchive-v2-table tr,
    .autoarchive-v2-table td {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .autoarchive-v2-table thead {
        display: none;
    }

    .autoarchive-v2-table tr {
        border: 1px solid var(--color-border);
        border-radius: var(--panel-radius);
        margin-bottom: var(--space-3);
        padding: var(--space-3);
    }

    .autoarchive-v2-table td {
        border: 0;
        padding: var(--space-1) 0;
    }

    .autoarchive-v2-table td[data-label]::before {
        color: var(--color-muted);
        content: attr(data-label);
        display: block;
        font-size: var(--font-size-sub);
        font-weight: 700;
        margin-bottom: var(--space-1);
    }

    .autoarchive-v2-file-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .autoarchive-v2-file-actions .button,
    .autoarchive-v2-preview-actions .button,
    .autoarchive-v2-month-actions .button {
        text-align: center;
        width: 100%;
    }

    .autoarchive-v2-preview-frame {
        min-height: 16rem;
    }

    .autoarchive-v2-preview-dialog-header {
        align-items: stretch;
        flex-direction: column;
    }

    .autoarchive-v2-preview-download {
        width: 100%;
    }
}