/* Allgemeine Stile */
:root {
    --app-frame-width: 1180px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background-color: var(--app-background);
    color: var(--app-ink);
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    max-width: none;
}

/* Header-Balken */
header {
    width: 100%;
    min-height: 74px;
    padding: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--app-chrome-border);
    background: var(--app-chrome);
    color: var(--app-on-chrome);
    text-align: left;
}

header h1 {
    margin: 0;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 1px;
}

a {
  text-decoration: none;
}


/* Formular-Styling (für Login-Seite und Buchungsseite) */
form.login-form {
    width: 100%;
    max-width: 800px;
    background-color: var(--app-surface);
    border-radius: 8px;
    box-shadow: var(--app-shadow);
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box; /* Stellt sicher, dass Padding in Breite einbezogen wird */
    padding: 20px; /* Einheitliches Padding mit Grid */
}

form.buchungen-form {
    width: 100%;
    margin: 0 0 0 0;
}

.booking-actions {
    margin-top: 18px;
}

input[type="datetime-local"],
input[type="time"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid var(--app-border);
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: var(--app-surface);
    color: var(--app-ink);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--app-ink);
    width: 100%;
}

input[type="text"],
input[type="password"],
select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid var(--app-border);
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    background: var(--app-surface);
    color: var(--app-ink);
}


.button {
    display: inline-flex;
    width: auto;
    min-width: 120px;
    min-height: 42px;
    height: auto;
    padding: 8px 16px;
    border: 1px solid var(--app-accent-dark);
    border-radius: 8px;
    box-sizing: border-box;
    background: var(--app-surface);
    color: var(--app-accent-dark);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

a.button {
    color: var(--app-accent-dark);
}

.password-reset-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--app-accent-dark);
    text-align: center;
}

.password-reset-link:hover,
.password-reset-link:focus-visible {
    color: var(--app-ink);
    text-decoration: underline;
}

button {
    color: var(--app-on-chrome);
}


.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;                    /* Abstand zwischen den Buttons */
}

.button-group > .button {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

.buchungen-form .button-group {
    width: 100%;
}

.buchungen-form .button-group .button {
    flex: 1 1 8.5rem;
    width: auto;
    min-width: 0;
    margin: 0;
}

.kennung-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 8px;
}

.kennung-group .custom-radio {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    justify-content: center;
    margin-bottom: 0;
}

.container {
    width: 100%;
    max-width: 800px;
    background-color: var(--app-surface);
    border-radius: 8px;
    box-shadow: var(--app-shadow);
    padding: 16px; /* Einheitliches Padding mit Formular */
    box-sizing: border-box; /* Stellt sicher, dass Padding in Breite einbezogen wird */
    margin: 4px 0px;
}

.meldungen-container h2,
.meldung h3,
.meldung p {
    margin-top: 0;
}

.meldungen-kopf,
.meldung-titelzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.meldungen-kopf {
    align-items: flex-start;
    margin-bottom: 16px;
}

.meldungen-hinweis,
.meldungen-leer {
    color: var(--app-muted);
}

.meldungen-hinweis {
    margin-bottom: 0;
}

.meldungen-liste {
    display: grid;
    gap: 12px;
}

.meldung {
    padding: 16px;
    border: 1px solid var(--app-border);
    border-left: 5px solid var(--app-muted);
    border-radius: 6px;
    background: var(--app-surface-muted);
}

.meldung-ungelesen {
    border-left-color: var(--app-accent);
    background: var(--app-accent-soft);
}

.meldung-titelzeile h3 {
    margin-bottom: 0;
    color: var(--app-ink);
}

.meldung-status {
    padding: 4px 8px;
    border-radius: 999px;
    background: #dce3e7;
    color: #394b55;
    font-size: 13px;
    font-weight: bold;
}

.meldung-ungelesen .meldung-status {
    background: var(--app-accent-dark);
    color: #fff;
}

.meldung-text {
    margin: 14px 0;
    line-height: 1.45;
}

.meldung-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--app-muted);
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 13px;
}

.meldung-aktion {
    margin: 12px 0 0;
}

.meldungen-kopf .meldung-aktion {
    margin-top: 0;
}

.button.meldung-button {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 10px 14px;
}






.grid-row {
    display: contents;
}

.grid-row > div {
    padding: 8px 15px;
    text-align: left;
}

.grid-buchungen {
    white-space: pre-wrap;
    color: var(--app-accent-dark);
    line-height: 1.2;
}

.grid-buchungen br {
    display: block;
    margin: 2px 0;
}

.button-bar {
    width: 100%;
    display: flex;
    gap: 8px;
}

.menu-bar {
    min-height: 59px;
    padding: 8px max(20px, calc((100% - var(--app-frame-width)) / 2));
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--app-chrome-border);
    background: var(--app-chrome);
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 0 4px;
}

.menu-btn {
    color: var(--app-on-chrome);
    text-decoration: none;
    padding: 10px 13px;
    border-radius: 10px;
    font-weight: 650;
}

.menu-btn-aktiv {
    background: var(--app-accent);
    color: var(--app-chrome);
}

.menu-btn:hover,
.menu-btn:focus-visible {
    background: var(--app-chrome-hover);
    color: var(--app-on-chrome);
    outline: none;
}

.menu-btn-aktiv:hover,
.menu-btn-aktiv:focus-visible {
    background: var(--app-accent);
    color: var(--app-chrome);
}

.menu-dropdown {
    position: relative;
}

.menu-bar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.user-menu-dropdown .submenu,
.debug-menu-dropdown .submenu {
    right: 0;
    left: auto;
}

.debug-menu-btn {
    padding: 10px 12px;
}

.debug-menu-icon {
    display: block;
    width: 18px;
    height: 18px;
}

.messages-menu-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 13px;
}

.messages-menu-icon {
    display: block;
    width: 22px;
    height: 22px;
}

.home-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 13px;
}

.home-menu-icon {
    display: block;
    width: 21px;
    height: 21px;
}

.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--app-on-chrome);
    cursor: pointer;
}

.mobile-menu-toggle svg {
    width: 24px;
    height: 24px;
}

.menu-primary {
    display: flex;
    align-items: center;
    gap: 4px;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 13px;
}

.user-menu-icon {
    display: block;
    width: 22px;
    height: 22px;
}

.messages-menu-dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--app-chrome);
    border-radius: 50%;
    background: #e32636;
    box-sizing: content-box;
}

.messages-menu-btn:hover .messages-menu-dot,
.messages-menu-btn.menu-btn-aktiv .messages-menu-dot {
    border-color: currentColor;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.menu-dropdown summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.menu-dropdown summary::-webkit-details-marker {
    display: none;
}

.menu-dropdown summary::after {
    content: none;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.menu-dropdown[open] summary::after {
    transform: rotate(180deg);
}

.debug-menu-dropdown summary::after {
    content: none;
}

.user-menu-dropdown summary::after {
    content: none;
}

.submenu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 110;
    display: flex;
    min-width: 180px;
    padding: 6px;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--app-chrome-border);
    border-radius: 14px;
    background: var(--app-chrome);
    box-shadow: 0 12px 28px rgba(23, 35, 42, .14);
}

.submenu-btn {
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--app-on-chrome);
    white-space: nowrap;
}

.submenu-btn:hover,
.submenu-btn:focus-visible {
    background: var(--app-chrome-hover);
    color: var(--app-on-chrome);
}

.submenu-btn-aktiv {
    background: var(--app-accent);
    color: var(--app-chrome);
}
.submenu-heading {
    display: block;
    margin: 7px 11px 4px;
    color: color-mix(in srgb, var(--app-on-chrome) 62%, transparent);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.menu-logout-form {
    margin: 0;
}

.menu-logout-form .submenu-btn {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.logout-form {
    margin: 0;
}

/* Spezieller Button (z.B. Admin oder "Neue Buchung") */
.admin-btn {
    margin-left: auto;             /* schiebt ihn nach rechts */
}

.admin-btn:hover {
    background: var(--app-chrome-hover);
}


.menu-bar-back {
    background:transparent;
    padding: 0px;
    display: flex;
    align-items: center;
    gap: 8px;                      /* Abstand zwischen Buttons */
    position: sticky;
    top: 50px;
    z-index: 99;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 0 2px;
}

.menu-btn-back {
    color: var(--app-on-chrome);
    background-color: var(--app-danger);
    text-decoration: none;
    padding: 4px;
    border-radius: 4px;
    font-weight: 500;
    min-width: 20px;
    text-align: center;
    /* transition: all 0.25s ease; */
}

.aktiv {
    border-bottom: 2px solid currentColor;
}

.red {
    color: var(--app-on-chrome);
    background-color: var(--app-danger);
}

.orange {
    color: #7a4b00;
    background-color: #ffe0b2;
}

.green {
    background-color: green;
}

/* Startseite: kompakter Schnellzugriff auf Mobilgeräten, vollständiges Menü ab Tablet. */
.dashboard-page {
    --dashboard-ink: var(--app-ink);
    --dashboard-muted: var(--app-muted);
    --dashboard-accent: var(--app-accent);
    --dashboard-line: var(--app-border);
}

.dashboard {
    width: min(calc(100% - 40px), 620px);
    margin: 0 auto;
    padding: 44px 0 56px;
    box-sizing: border-box;
}

.dashboard-date {
    display: flex;
    margin: 0 0 30px;
    flex-direction: column;
    gap: 5px;
}

.dashboard-weekday {
    color: var(--dashboard-muted);
    font-size: clamp(17px, 4.5vw, 21px);
    font-weight: 400;
}

.dashboard-date-value {
    color: var(--dashboard-muted);
    font-size: clamp(25px, 7vw, 34px);
    font-weight: 700;
    letter-spacing: -.5px;
}

.dashboard-cards { display: grid; gap: 18px; }

.dashboard-card {
    position: relative;
    display: flex;
    min-height: 132px;
    padding: 27px 28px;
    flex-direction: column;
    justify-content: center;
    border: 2px solid var(--dashboard-line);
    border-radius: 25px;
    background: var(--app-surface);
    color: var(--dashboard-ink);
    box-sizing: border-box;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.dashboard-card-primary { border-color: var(--dashboard-accent); background: var(--app-accent-soft); }

.dashboard-card:hover,
.dashboard-card:focus-visible {
    border-color: var(--dashboard-accent);
    box-shadow: 0 10px 24px rgba(23, 35, 42, .1);
    outline: none;
    transform: translateY(-2px);
}

.dashboard-card-title { font-size: clamp(23px, 6.5vw, 29px); font-weight: 750; letter-spacing: -.5px; }

.dashboard-card-text { margin-top: 10px; color: var(--dashboard-muted); font-size: clamp(17px, 5vw, 21px); line-height: 1.3; white-space: pre-line; }

.dashboard-empty { margin: 0; padding: 24px; border: 1px solid var(--dashboard-line); border-radius: 18px; color: var(--dashboard-muted); background: var(--app-surface); }

@media (min-width: 760px) {
    .dashboard {
        width: min(calc(100% - 80px), 980px);
        padding-top: 76px;
    }

    .dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

    .dashboard-card { min-height: 164px; }
}

.admin-dashboard {
    width: min(calc(100% - 40px), var(--app-frame-width));
    padding-top: 46px;
}

.admin-dashboard-intro {
    margin-bottom: 28px;
}

.admin-dashboard-eyebrow {
    margin: 0 0 7px;
    color: var(--app-accent-dark);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-dashboard h2 {
    margin: 0;
    color: var(--app-ink);
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -.8px;
}

.admin-dashboard-intro > p:last-child {
    margin: 9px 0 0;
    color: var(--app-muted);
    font-size: 17px;
}

.admin-dashboard-card {
    display: block;
    min-height: 150px;
    padding: 21px;
    border: 1px solid var(--app-border);
    border-top: 4px solid var(--app-accent);
    border-radius: 18px;
    background: var(--app-surface);
    color: var(--app-ink);
    box-shadow: var(--app-shadow);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

a.admin-dashboard-card:hover,
a.admin-dashboard-card:focus-visible {
    border-color: var(--app-accent);
    box-shadow: 0 11px 25px rgba(23, 35, 42, .14);
    outline: none;
    transform: translateY(-2px);
}

.admin-dashboard-card-good { border-top-color: var(--app-success); }
.admin-dashboard-card-info { border-top-color: var(--app-info); }
.admin-dashboard-card-warning { border-top-color: var(--app-warning); }
.admin-dashboard-card-attention,
.admin-dashboard-card-danger { border-top-color: var(--app-danger); }
.admin-dashboard-card-label { display: block; color: var(--app-muted); font-size: 14px; font-weight: 700; }
.admin-dashboard-card-value { display: block; margin-top: 13px; font-size: clamp(23px, 3vw, 30px); line-height: 1.1; }
.admin-dashboard-card-detail { display: block; margin-top: 9px; color: var(--app-muted); font-size: 14px; }

@media (min-width: 760px) {
    .admin-dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1050px) {
    .admin-dashboard-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* Der Seitenrahmen folgt dem Menü; der Inhalt beginnt darin links. */
body:not(.dashboard-page) {
    --content-width: 800px;
}

body.content-width-small { --content-width: 600px; }
body.content-width-medium { --content-width: 800px; }
body.content-width-large { --content-width: 1000px; }
body.content-width-full { --content-width: var(--app-frame-width); }

body:not(.dashboard-page) > :not(header):not(.menu-bar):not(.view-mode-banner):not(script):not(style):not(.auth-card):not(.app-legal-footer) {
    width: min(calc(100% - 40px), var(--content-width));
    margin-left: max(20px, calc((100% - var(--app-frame-width)) / 2));
    margin-right: 20px;
}

body:not(.dashboard-page) .container,
body:not(.dashboard-page) form.login-form {
    max-width: var(--content-width);
}

.app-header-inner {
    display: flex;
    width: min(calc(100% - 40px), var(--app-frame-width));
    margin: 0 auto;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}

.app-brand {
    margin: 0;
    color: var(--app-on-chrome);
    font-size: clamp(24px, 3vw, 31px);
    font-weight: 800;
    letter-spacing: -1px;
    white-space: nowrap;
}

.app-brand strong { color: var(--app-accent); }

.app-page-title {
    margin: 0;
    color: var(--app-on-chrome-muted);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
}

.button:hover,
.button:focus-visible {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
    color: var(--app-accent-dark);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-focus-ring);
    outline: none;
}

body:not(.dashboard-page) .grid-caption {
    border-color: var(--app-ink);
    background: var(--app-ink);
    color: var(--app-on-chrome);
}

body:not(.dashboard-page) .line > div {
    background: var(--app-surface);
    border-color: var(--app-border);
}

.button-secondary {
    border: 1px solid var(--app-border);
    background: var(--app-surface-muted);
    color: var(--app-ink);
}

.button:disabled {
    cursor: default;
    opacity: .58;
}

.button-icon::before,
.liste-quiet-button.button-icon::before,
.key-generate-button.button-icon::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: currentColor;
    -webkit-mask: var(--button-icon) center / contain no-repeat;
    mask: var(--button-icon) center / contain no-repeat;
}

.icon-add { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5Z'/%3E%3C/svg%3E"); }
.icon-save { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h12l2 2v16H5V3Zm2 2v5h10V6.2L15.8 5H7Zm0 14h10v-7H7v7Zm2-5h6v3H9v-3Z'/%3E%3C/svg%3E"); }
.icon-back { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2Z'/%3E%3C/svg%3E"); }
.icon-filter { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8L3 5Zm4.4 2L12 12.26 16.6 7H7.4Z'/%3E%3C/svg%3E"); }
.icon-reset { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5a7 7 0 1 1-6.32 10H8v-2H2v6h2v-2.58A9 9 0 1 0 3 10h2.08A7 7 0 0 1 12 5Z'/%3E%3C/svg%3E"); }
.icon-send { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 4 18 8-18 8 2-7 10-1-10-1-2-7Z'/%3E%3C/svg%3E"); }
.icon-reply { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 7-6 5 6 5v-3c5 0 8.5 1.5 11 5-1-6-4.5-9-11-9V7Z'/%3E%3C/svg%3E"); }
.icon-read { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.2 16.2-4.4-4.4-1.4 1.4L9.2 19 21 7.2l-1.4-1.4-10.4 10.4Z'/%3E%3C/svg%3E"); }
.icon-edit-text { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m16.86 3.49 3.65 3.65L9.65 18H6v-3.65L16.86 3.49Zm0 2.83L8 15.18V16h.82l8.86-8.86-.82-.82ZM4 20h16v2H4v-2Z'/%3E%3C/svg%3E"); }
.icon-upload { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 5 5h-4v7h-2V8H7l5-5ZM5 18h14v3H5v-3Z'/%3E%3C/svg%3E"); }
.icon-login { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 5h7v14h-7v-2h5V7h-5V5Zm-2.59 2.59L14.83 12l-4.42 4.41L9 15l2-2H4v-2h7L9 9l1.41-1.41Z'/%3E%3C/svg%3E"); }
.icon-logout { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h7v2H6v10h5v2H4V5Zm9.59 2.59L18 12l-4.41 4.41L12.17 15l2-2H8v-2h6.17l-2-2 1.42-1.41Z'/%3E%3C/svg%3E"); }
.icon-key { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3a7 7 0 0 0-6.71 9H3v4h3v3h3v2h4v-4.29A7 7 0 1 0 14 3Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm2 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E"); }
.icon-select { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4V4Zm2 2v12h12V6H6Zm2.2 5.8 1.4-1.4 1.9 1.9 3.9-3.9 1.4 1.4-5.3 5.3-3.3-3.3Z'/%3E%3C/svg%3E"); }
.icon-delete-text { --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4h8l1 2h4v2H3V6h4l1-2Zm-2 6h12l-1 11H7L6 10Zm3 2v7h2v-7H9Zm4 0v7h2v-7h-2Z'/%3E%3C/svg%3E"); }

.form-hint {
    margin: 0 0 22px;
    color: var(--app-muted);
    line-height: 1.5;
}

.switch-user-panel h2 { margin-top: 0; }

.view-current {
    padding: 12px 14px;
    border-left: 4px solid var(--app-accent);
    background: var(--app-accent-soft);
    font-weight: 700;
}

.dependent-select-status {
    min-height: 20px;
    margin: -7px 0 8px;
    color: var(--app-muted);
    font-size: 14px;
}

.view-mode-banner {
    width: 100%;
    border-bottom: 1px solid var(--app-accent);
    background: var(--app-accent-soft);
    color: var(--app-ink);
}

.view-mode-banner-inner {
    display: flex;
    width: min(calc(100% - 40px), var(--app-frame-width));
    min-height: 46px;
    margin: 0 auto;
    padding: 7px 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.view-mode-banner form { margin: 0; }
.view-mode-banner button {
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid var(--app-accent);
    border-radius: 7px;
    background: var(--app-surface);
    color: var(--app-accent-dark);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.view-mode-banner button:hover,
.view-mode-banner button:focus-visible {
    background: var(--app-accent);
    color: var(--app-on-chrome);
}

.warning-panel { border-left: 5px solid var(--app-accent); }

body:not(.dashboard-page) .zeit-link {
    color: var(--app-accent-dark);
}

body:not(.dashboard-page) .red,
body:not(.dashboard-page) .orange,
body:not(.dashboard-page) .lightgreen {
    color: var(--app-ink);
    background: var(--app-accent-soft);
}

@media (max-width: 759px) {
    header {
        padding: 14px 0;
    }

    .menu-bar {
        min-height: 58px;
        padding: 8px 12px;
        flex-wrap: nowrap;
        overflow: visible;
    }

    .mobile-menu-toggle {
        display: inline-flex;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus-visible {
        background: var(--app-chrome-hover);
        color: var(--app-on-chrome);
        outline: none;
    }

    .menu-primary {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        z-index: 120;
        display: none;
        padding: 10px 12px 14px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: stretch;
        border-bottom: 1px solid var(--app-chrome-border);
        background: var(--app-chrome);
        box-shadow: 0 12px 22px rgba(23, 35, 42, .12);
    }

    .menu-bar-mobile-open .menu-primary {
        display: flex;
    }

    .menu-primary > .menu-btn,
    .menu-primary > .menu-dropdown {
        width: 100%;
        box-sizing: border-box;
    }

    .menu-primary .menu-btn {
        display: flex;
        justify-content: space-between;
    }

    .menu-primary .menu-dropdown summary::after {
        content: "▾";
    }

    .menu-primary .submenu {
        position: static;
        min-width: 0;
        margin-top: 4px;
        box-shadow: none;
    }

    .menu-bar-end {
        margin-left: auto;
        flex-wrap: nowrap;
    }

    body:not(.dashboard-page) > :not(header):not(.menu-bar):not(.view-mode-banner):not(script):not(style):not(.auth-card):not(.app-legal-footer) {
        width: calc(100% - 24px);
        margin-right: 12px;
        margin-left: 12px;
    }

    .view-mode-banner-inner {
        width: calc(100% - 24px);
        padding: 10px 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .admin-dashboard {
        width: calc(100% - 28px);
        padding: 32px 0 42px;
    }

    .admin-dashboard-cards { gap: 12px; }
    .admin-dashboard-card { min-height: 132px; padding: 18px 20px; }
    .admin-dashboard-card:nth-child(n + 5) { display: none; }
}

/* Gemeinsamer kompakter Anmeldungsrahmen (pep4us, pep4webzerf, pep4support). */
body.content-width-small > .auth-card {
    width: min(calc(100% - 32px), 470px);
    margin: 28px auto;
    padding: 30px;
    border: 1px solid var(--app-border);
    border-radius: 13px;
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}
.auth-heading { margin-bottom: 24px; }
.auth-heading h1 { margin: 0 0 8px; color: var(--app-ink); font-size: clamp(25px, 4vw, 36px); line-height: 1.15; }
.auth-heading p:last-child { margin: 0; color: var(--app-muted); }
.auth-eyebrow { margin: 0 0 5px; color: var(--app-accent-dark); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.auth-card form.login-form.auth-form { display: grid; width: 100%; max-width: none; margin: 0; padding: 0; gap: 17px; align-items: stretch; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.auth-form label { display: grid; margin: 0; gap: 7px; font-size: 15px; font-weight: 650; }
.auth-form input[type="text"], .auth-form input[type="password"] { min-height: 45px; margin: 0; padding: 9px 11px; border-radius: 8px; font: inherit; }
.auth-form .password-container { position: relative; display: block; width: 100%; margin: 0; }
.auth-form .password-container input { padding-right: 45px; }
.auth-form .toggle-password { position: absolute; top: 50%; right: 7px; width: 34px; min-width: 0; min-height: 34px; padding: 0; border: 0; background: transparent; color: var(--app-muted); font-size: 19px; transform: translateY(-50%); cursor: pointer; }
.auth-form .button.auth-primary { min-height: 45px; height: auto; margin: 0; padding: 8px 16px; border: 1px solid var(--app-accent-dark); background: var(--app-accent-dark); color: #fff; font: inherit; font-size: 15px; font-weight: 700; }
.auth-form .button.auth-primary:hover, .auth-form .button.auth-primary:focus-visible { background: var(--app-accent); border-color: var(--app-accent); }
.auth-card .password-reset-link { justify-self: start; margin: 0; font-weight: 650; text-align: left; }
.auth-card > .container { width: 100%; max-width: none; margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; box-sizing: border-box; }
.auth-form small { justify-self: start; margin: -7px 0 0; color: var(--app-muted); line-height: 1.4; text-align: left; }
.auth-actions { display: grid; width: 100%; gap: 14px; }
.auth-actions .button.auth-primary { width: 100%; min-height: 45px; height: auto; margin: 0; padding: 8px 16px; border: 1px solid var(--app-accent-dark); background: var(--app-accent-dark); color: #fff; font: inherit; font-size: 15px; font-weight: 700; }
.auth-actions .password-reset-link { justify-self: center; }
.auth-alternative { display: grid; margin-top: 18px; gap: 12px; text-align: center; color: var(--app-muted); }
.auth-alternative .auth-secondary { min-height: 45px; height: auto; margin: 0; border: 1px solid var(--app-border); background: var(--app-surface-muted); color: var(--app-ink); font-size: 15px; font-weight: 700; }
@media (max-width: 759px) { body.content-width-small > .auth-card { width: calc(100% - 24px); margin: 24px auto; padding: 23px; } }

.kommen {
    background-color: #5d9a9d;
}

.gehen {
    background-color: #c44071;
}


/* Responsive Design */
@media (max-width: 600px) {
    .app-header-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    header h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
        margin: 15px 0;
    }

    .meldungen-kopf {
        flex-direction: column;
    }

}

/* Zeitnachweis */

.app-legal-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    margin-top: auto;
    padding: 22px 12px;
    color: var(--app-muted);
    font-size: 13px;
    text-align: center;
}
.app-legal-footer > a { grid-column: 2; color: inherit; }
.app-legal-footer .app-server-info {
    grid-column: 3;
    justify-self: end;
    font-size: 11px;
    text-align: right;
    overflow-wrap: anywhere;
}
@media (max-width: 760px) {
    .app-legal-footer { grid-template-columns: auto minmax(0, 1fr); }
    .app-legal-footer > a { grid-column: 1; }
    .app-legal-footer .app-server-info { grid-column: 2; }
}
.app-legal-footer a:hover,
.app-legal-footer a:focus-visible { color: var(--app-accent-dark); text-decoration: underline; }

.privacy-page { padding: 38px 0 52px; }
.privacy-intro { margin-bottom: 22px; }
.privacy-eyebrow { margin: 0 0 7px; color: var(--app-accent-dark); font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.privacy-intro h2 { margin: 0; color: var(--app-ink); font-size: clamp(28px, 4vw, 38px); }
.privacy-intro > p:last-child { margin: 12px 0 0; color: var(--app-muted); line-height: 1.55; }
.privacy-section {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}
.privacy-section h3 { margin: 0 0 14px; }
.privacy-section p { margin: 10px 0 0; line-height: 1.55; }
.privacy-cookie-list { display: grid; gap: 10px; }
.privacy-cookie-item { display: grid; grid-template-columns: minmax(130px, .55fr) minmax(260px, 2fr) minmax(150px, .75fr); gap: 14px; padding: 12px; border-radius: 9px; background: var(--app-surface-muted); align-items: start; }
.privacy-cookie-item span,
.privacy-cookie-item small { color: var(--app-muted); line-height: 1.4; }
.privacy-note { margin: 18px 2px; color: var(--app-muted); font-size: 13px; line-height: 1.5; }
.privacy-back { width: auto; min-width: 190px; }

.api-activity-page { padding: 34px 0 52px; }
.api-activity-intro { margin-bottom: 22px; }
.api-activity-intro h2 { margin: 0; font-size: clamp(27px, 4vw, 38px); }
.api-activity-intro p:last-child { margin: 8px 0 0; color: var(--app-muted); }
.api-activity-page > h3 { margin: 24px 0 10px; }
.api-activity-note { margin: 0 0 12px; color: var(--app-muted); line-height: 1.45; }
.login-activity-note { margin: 0 0 14px; padding: 11px 13px; border-left: 4px solid var(--app-accent); background: var(--app-accent-soft); color: var(--app-ink); line-height: 1.45; }
.api-activity-table-wrap { overflow-x: auto; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface); }
.api-activity-table { width: 100%; min-width: 940px; border-collapse: collapse; }
.api-log-table { min-width: 1120px; }
.api-activity-table th,
.api-activity-table td { padding: 12px 14px; border-bottom: 1px solid var(--app-border); text-align: left; vertical-align: middle; }
.api-activity-table th { background: var(--app-surface-muted); font-size: 14px; }
.login-activity-table { min-width: 980px; }
.login-activity-table th a { display: flex; justify-content: space-between; gap: 8px; color: var(--app-ink); }
.login-activity-table td:last-child,
.login-activity-table th:last-child { text-align: right; }
.login-activity-pagination { display: flex; margin-top: 14px; align-items: center; justify-content: space-between; gap: 14px; color: var(--app-muted); font-size: 13px; }
.login-activity-pagination > div { display: flex; gap: 8px; }
.login-activity-pagination .button { width: auto; min-height: 38px; margin: 0; padding: 8px 13px; }
.api-activity-table tbody tr:hover td { background: var(--app-row-hover); }
.api-activity-table tbody tr:last-child td { border-bottom: 0; }
.api-status { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.api-status-good { background: color-mix(in srgb, var(--app-success) 18%, white); color: var(--app-success); }
.api-status-warning { background: color-mix(in srgb, var(--app-warning) 18%, white); color: #755000; }
.api-status-danger { background: color-mix(in srgb, var(--app-danger) 14%, white); color: var(--app-danger); }
.session-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.session-summary { display: grid; min-width: 150px; padding: 12px 16px; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface); text-align: right; }
.session-summary strong { color: var(--app-success); font-size: 20px; }
.session-summary span { color: var(--app-muted); font-size: 13px; }
.session-table { min-width: 650px; }
.log-notice { margin: 0 0 18px; padding: 11px 14px; border-radius: 10px; line-height: 1.4; }
.log-notice-success { border-left: 4px solid var(--app-success); background: color-mix(in srgb, var(--app-success) 10%, var(--app-surface)); }
.log-notice-error { border-left: 4px solid var(--app-danger); background: color-mix(in srgb, var(--app-danger) 9%, var(--app-surface)); }
.log-maintenance { margin-top: 24px; border-top: 1px solid var(--app-border); color: var(--app-muted); }
.log-maintenance > summary { width: fit-content; padding: 13px 2px; cursor: pointer; font-size: 13px; font-weight: 700; }
.log-maintenance > summary:hover,
.log-maintenance > summary:focus-visible { color: var(--app-accent-dark); }
.log-cleanup-panel { display: grid; gap: 18px; padding: 16px; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface); }
.log-cleanup-panel h3 { margin: 0; color: var(--app-ink); font-size: 17px; }
.log-cleanup-panel p { margin: 5px 0 0; line-height: 1.45; }
.log-cleanup-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 9px; }
.log-cleanup-actions form { margin: 0; }
.log-cleanup-actions .button { width: auto; min-height: 38px; margin: 0; padding: 8px 13px; }
.log-danger-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding-left: 9px; border-left: 1px solid var(--app-border); }
.log-delete-button { border-color: var(--app-danger) !important; background: transparent !important; color: var(--app-danger) !important; }
.log-delete-button:hover,
.log-delete-button:focus-visible { background: color-mix(in srgb, var(--app-danger) 10%, var(--app-surface)) !important; }

@media (max-width: 759px) {
    .privacy-page { padding: 28px 0 38px; }
    .privacy-cookie-item { grid-template-columns: 1fr; gap: 5px; }
    .privacy-back { width: 100%; }
    .api-activity-page { padding-top: 24px; }
    .login-activity-pagination { align-items: stretch; flex-direction: column; }
    .login-activity-pagination > div,
    .login-activity-pagination .button { width: 100%; }
    .login-activity-pagination .button { text-align: center; }
    .session-intro { align-items: stretch; flex-direction: column; }
    .session-summary { min-width: 0; text-align: left; }
    .log-cleanup-actions,
    .log-cleanup-actions form,
    .log-cleanup-actions .button { width: 100%; }
    .log-danger-form { padding: 10px 0 0; border-top: 1px solid var(--app-border); border-left: 0; }
}