:root {
    --zr-blue: #002f50;
    --zr-blue-soft: #0b456d;
    --zr-bg: #f4f7fa;
    --zr-card: #ffffff;
    --zr-text: #102033;
    --zr-muted: #66788a;
    --zr-border: #d8e0e7;
    --zr-focus: rgba(0, 47, 80, 0.16);
    --radius-lg: 24px;
    --radius-md: 14px;
}

* {
    box-sizing: border-box;
}

html {
    font-family:
        Ubuntu,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--zr-bg);
    color: var(--zr-text);
}

button,
input,
select {
    font: inherit;
}

.page-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.booking-card {
    width: min(960px, 100%);
    background: var(--zr-card);
    border: 1px solid var(--zr-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: 0 18px 60px rgba(20, 44, 65, 0.08);
}

.booking-header {
    margin-bottom: 32px;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--zr-blue);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    color: var(--zr-blue);
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.05;
}

.intro {
    margin: 14px 0 0;
    color: var(--zr-muted);
    font-size: 1.05rem;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field label,
.weekday-label {
    font-weight: 700;
    color: var(--zr-blue);
}

select,
input[type="date"] {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--zr-border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--zr-text);
    padding: 0 14px;
    outline: none;
    transition:
        border-color 120ms ease,
        box-shadow 120ms ease;
}

select:focus,
input[type="date"]:focus {
    border-color: var(--zr-blue);
    box-shadow: 0 0 0 4px var(--zr-focus);
}

.weekday-block {
    margin-top: 28px;
}

.weekday-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.weekday-options label {
    cursor: pointer;
}

.weekday-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.weekday-options span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 44px;
    border: 1px solid var(--zr-border);
    border-radius: 999px;
    background: #fff;
    font-weight: 700;
    color: var(--zr-blue);
    transition: all 120ms ease;
}

.weekday-options input:checked + span {
    background: var(--zr-blue);
    border-color: var(--zr-blue);
    color: #fff;
}

.weekday-options input:focus-visible + span {
    box-shadow: 0 0 0 4px var(--zr-focus);
}

.actions {
    margin-top: 34px;
    display: flex;
    justify-content: flex-end;
}

.primary-button {
    min-height: 52px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--zr-blue);
    color: #fff;
    font-weight: 700;
    padding: 0 24px;
    cursor: pointer;
    transition:
        transform 120ms ease,
        background 120ms ease;
}

.primary-button:hover {
    background: var(--zr-blue-soft);
    transform: translateY(-1px);
}

.primary-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--zr-focus);
}

.booking-footer {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--zr-border);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--zr-muted);
    font-size: 0.86rem;
}

@media (max-width: 760px) {
    .page-shell {
        padding: 16px;
        align-items: flex-start;
    }

    .booking-card {
        padding: 24px;
        border-radius: 18px;
    }

    .field-grid {
        grid-template-columns: 1fr;
    }

    .actions {
        justify-content: stretch;
    }

    .primary-button {
        width: 100%;
    }

    .booking-footer {
        flex-direction: column;
    }
}

.message {
    margin-bottom: 24px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
}

.error-message {
    background: #fff2f2;
    border: 1px solid #efcaca;
    color: #8b2929;
}

.availability {
    margin-top: 42px;
    padding-top: 34px;
    border-top: 1px solid var(--zr-border);
}

.availability-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.availability-heading h2 {
    margin: 0;
    color: var(--zr-blue);
    font-size: 1.8rem;
}

.slot-duration {
    color: var(--zr-muted);
    font-size: 0.9rem;
}

.availability-days {
    display: grid;
    gap: 18px;
}

.availability-day {
    padding: 20px;
    border: 1px solid var(--zr-border);
    border-radius: var(--radius-md);
    background: #fbfcfd;
}

.availability-day h3 {
    margin: 0 0 16px;
    color: var(--zr-blue);
    font-size: 1rem;
}

.slot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.slot-button {
    min-width: 76px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--zr-border);
    border-radius: 12px;
    background: #fff;
    color: var(--zr-blue);
    font-weight: 700;
    cursor: pointer;
    transition:
        background 120ms ease,
        color 120ms ease,
        border-color 120ms ease,
        transform 120ms ease;
}

.slot-button:hover {
    background: var(--zr-blue);
    border-color: var(--zr-blue);
    color: #fff;
    transform: translateY(-1px);
}

.slot-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--zr-focus);
}

.empty-state {
    padding: 24px;
    border: 1px dashed var(--zr-border);
    border-radius: var(--radius-md);
    color: var(--zr-muted);
    text-align: center;
}

@media (max-width: 760px) {
    .availability-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .availability-day {
        padding: 16px;
    }

    .slot-button {
        flex: 1 0 72px;
    }
}

/* Kompakte Terminübersicht */

.availability {
    margin-top: 26px;
    padding-top: 24px;
}

.availability-heading {
    align-items: center;
    margin-bottom: 18px;
}

.availability-heading h2 {
    font-size: 1.55rem;
}

.period-switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--zr-border);
    border-radius: 12px;
    background: #f4f7fa;
}

.period-button {
    min-height: 38px;
    padding: 0 15px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--zr-muted);
    font-weight: 700;
    cursor: pointer;
}

.period-button.active {
    background: var(--zr-blue);
    color: #fff;
}

.availability-days {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.availability-day {
    min-width: 0;
    padding: 12px;
    border-radius: 14px;
}

.day-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding-bottom: 9px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--zr-border);
    color: var(--zr-blue);
}

.day-header strong {
    font-size: 0.95rem;
}

.day-header span {
    color: var(--zr-muted);
    font-size: 0.82rem;
}

.availability-day .slot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.availability-day .slot-button {
    min-width: 0;
    width: 100%;
    min-height: 36px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.88rem;
}

.slot-button[hidden] {
    display: none;
}

.no-slots-period {
    padding: 16px 4px;
    color: var(--zr-muted);
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: center;
}

.no-slots-period[hidden] {
    display: none;
}

.booking-header {
    margin-bottom: 24px;
}

.weekday-block {
    margin-top: 20px;
}

.actions {
    margin-top: 20px;
}

.booking-footer {
    margin-top: 22px;
}

@media (max-width: 900px) {
    .availability-days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .availability-heading {
        align-items: stretch;
    }

    .period-switch {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .period-button {
        padding: 0 8px;
    }

    .availability-days {
        grid-template-columns: 1fr;
    }
}

/* Weitere Verdichtung fuer Desktop */

@media (min-width: 901px) {
    .booking-card {
        padding: 28px 38px 26px;
    }

    .booking-header {
        margin-bottom: 18px;
    }

    h1 {
        font-size: 2.55rem;
    }

    .intro {
        margin-top: 8px;
        font-size: 0.98rem;
    }

    .field-grid {
        gap: 16px;
    }

    select,
    input[type="date"] {
        min-height: 46px;
    }

    .weekday-block {
        margin-top: 16px;
    }

    .weekday-options span {
        min-width: 54px;
        height: 40px;
    }

    .actions {
        margin-top: 14px;
    }

    .primary-button {
        min-height: 48px;
    }

    .availability {
        margin-top: 20px;
        padding-top: 18px;
    }

    .availability-heading {
        margin-bottom: 14px;
    }

    .availability-heading h2 {
        font-size: 1.4rem;
    }

    .availability-day {
        padding: 10px;
    }

    .availability-day .slot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .availability-day .slot-button {
        min-height: 34px;
        font-size: 0.82rem;
        padding: 0 4px;
    }

    .day-header {
        padding-bottom: 7px;
        margin-bottom: 8px;
    }

    .booking-footer {
        margin-top: 16px;
        padding-top: 14px;
    }
}

/* Wochentage und Suchbutton auf gleicher Hoehe */

@media (min-width: 761px) {
    .booking-form {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 24px;
        align-items: end;
    }

    .field-grid {
        grid-column: 1 / -1;
    }

    .weekday-block {
        grid-column: 1;
        margin-top: 16px;
    }

    .actions {
        grid-column: 2;
        margin-top: 16px;
        align-self: end;
    }

    .primary-button {
        white-space: nowrap;
    }
}

/* Kundendaten */

.details-view {
    margin-top: 8px;
}

.details-view[hidden] {
    display: none;
}

.step-heading {
    margin-bottom: 18px;
}

.step-heading h2 {
    margin: 0;
    color: var(--zr-blue);
    font-size: 1.5rem;
}

.selected-appointment {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px;
    border: 1px solid var(--zr-border);
    border-radius: var(--radius-md);
    background: #f7f9fb;
}

.selected-appointment > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.summary-label {
    color: var(--zr-muted);
    font-size: 0.76rem;
}

.selected-appointment strong {
    color: var(--zr-blue);
    font-size: 0.95rem;
}

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

.customer-form input[type="text"],
.customer-form input[type="tel"],
.customer-form input[type="email"],
.customer-form textarea {
    width: 100%;
    border: 1px solid var(--zr-border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--zr-text);
    padding: 0 14px;
    outline: none;
    transition:
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.customer-form input[type="text"],
.customer-form input[type="tel"],
.customer-form input[type="email"] {
    min-height: 46px;
}

.customer-form textarea {
    min-height: 74px;
    padding-top: 11px;
    padding-bottom: 11px;
    resize: vertical;
}

.customer-form input:focus,
.customer-form textarea:focus {
    border-color: var(--zr-blue);
    box-shadow: 0 0 0 4px var(--zr-focus);
}

.remark-field {
    margin-top: 14px;
}

.optional {
    margin-left: 5px;
    color: var(--zr-muted);
    font-size: 0.76rem;
    font-weight: 400;
}

.privacy-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    color: var(--zr-text);
    font-size: 0.9rem;
    cursor: pointer;
}

.privacy-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--zr-blue);
}

.detail-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

.secondary-button {
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--zr-border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--zr-blue);
    font-weight: 700;
    cursor: pointer;
}

.secondary-button:hover {
    border-color: var(--zr-blue);
    background: #f4f7fa;
}

@media (max-width: 700px) {
    .selected-appointment {
        grid-template-columns: 1fr;
    }

    .customer-grid {
        grid-template-columns: 1fr;
    }

    .detail-actions {
        flex-direction: column-reverse;
    }

    .detail-actions button {
        width: 100%;
    }
}

.summary-title {
    margin: 0 0 18px;
    color: var(--zr-blue);
    font-size: 1.5rem;
}

.booking-success-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--zr-border);
    border-radius: var(--radius-md);
    background: #f7f9fb;
}

.booking-success-summary > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.booking-success-summary strong {
    overflow-wrap: anywhere;
    color: var(--zr-blue);
}

.result-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.result-error {
    margin-top: 22px;
}

.primary-button:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

@media (max-width: 700px) {
    .booking-success-summary {
        grid-template-columns: 1fr;
    }
}

/* Einheitliche Schrift in allen Formularfeldern */

input,
select,
textarea,
button {
    font-family:
        Ubuntu,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

textarea {
    font-family:
        Ubuntu,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/* Login oben rechts */

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

.booking-header-top .eyebrow {
    margin: 0;
}

.login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--zr-border);
    border-radius: 10px;
    background: #f1f3f5;
    color: var(--zr-blue);
    font-weight: 700;
    text-decoration: none;
    transition:
        background 120ms ease,
        border-color 120ms ease;
}

.login-button:hover {
    background: #e7ebef;
    border-color: #c7d0d8;
}

.login-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--zr-focus);
}

/* Administration */

.admin-card {
    width: min(1100px, 100%);
}

.admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.admin-module {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px;
    border: 1px solid var(--zr-border);
    border-radius: var(--radius-md);
    background: #f8fafb;
}

.admin-number {
    color: var(--zr-blue);
    font-size: 1.65rem;
    font-weight: 700;
}

.admin-module strong {
    color: var(--zr-blue);
}

.admin-module > span:last-child {
    color: var(--zr-muted);
    font-size: 0.86rem;
}

@media (max-width: 800px) {
    .admin-header {
        flex-direction: column;
    }

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

@media (max-width: 520px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-header-actions {
        width: 100%;
        flex-direction: column;
    }

    .admin-header-actions a {
        width: 100%;
    }
}

/* Admin Dashboard Erweiterung */

.admin-grid-five {
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
}

.admin-module-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 120ms ease,
        border-color 120ms ease,
        background 120ms ease;
}

.admin-module-link:hover {
    transform: translateY(-2px);
    border-color: #b8c6d1;
    background: #f3f6f8;
}

.admin-module-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--zr-focus);
}

.admin-number-text {
    font-size: 1.15rem;
    line-height: 1.35;
}

@media (max-width: 1050px) {
    .admin-grid-five {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .admin-grid-five {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    .admin-grid-five {
        grid-template-columns: 1fr;
    }
}

/* Admin-Module: Stores */

.success-message {
    background: #eef8f1;
    border: 1px solid #c9e5d0;
    color: #285d35;
}

.admin-section {
    margin-top: 28px;
}

.admin-section + .admin-section {
    padding-top: 28px;
    border-top: 1px solid var(--zr-border);
}

.admin-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.admin-section-header h2 {
    margin: 0;
    color: var(--zr-blue);
    font-size: 1.45rem;
}

.admin-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f0f3f6;
    color: var(--zr-blue);
    font-weight: 700;
}

.admin-create-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.admin-list {
    display: grid;
    gap: 10px;
}

.admin-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--zr-border);
    border-radius: var(--radius-md);
    background: #fff;
}

.admin-list-row.is-inactive {
    background: #f7f8f9;
    opacity: 0.72;
}

.admin-row-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.admin-row-actions {
    display: flex;
    gap: 8px;
}

.admin-inline-input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--zr-border);
    border-radius: 10px;
    background: #fff;
    color: var(--zr-text);
}

.admin-inline-input:focus {
    outline: none;
    border-color: var(--zr-blue);
    box-shadow: 0 0 0 4px var(--zr-focus);
}

.status-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.status-active {
    background: #3e9b58;
}

.status-inactive {
    background: #9ca8b2;
}

.compact-button {
    min-height: 42px;
    padding: 0 14px;
}

.danger-button {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #e1b9b9;
    border-radius: 10px;
    background: #fff5f5;
    color: #922f2f;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.danger-button:hover {
    background: #fbeaea;
}

@media (max-width: 760px) {
    .admin-create-form {
        grid-template-columns: 1fr;
    }

    .admin-list-row {
        grid-template-columns: 1fr;
    }

    .admin-row-main {
        grid-template-columns: auto 1fr;
    }

    .admin-row-main .compact-button {
        grid-column: 1 / -1;
    }

    .admin-row-actions {
        flex-direction: column;
    }

    .admin-row-actions form,
    .admin-row-actions button {
        width: 100%;
    }
}

/* Stores Feinschliff */

.store-create-form {
    align-items: center;
}

.admin-create-input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--zr-border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--zr-text);
    font-family:
        Ubuntu,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 1rem;
    outline: none;
}

.admin-create-input:focus {
    border-color: var(--zr-blue);
    box-shadow: 0 0 0 4px var(--zr-focus);
}

.store-create-form .primary-button {
    min-height: 48px;
}

.admin-section-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.store-order-buttons {
    display: inline-flex;
    gap: 4px;
}

.order-button {
    width: 36px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--zr-border);
    border-radius: 9px;
    background: #f5f7f9;
    color: var(--zr-blue);
    font-family:
        Ubuntu,
        system-ui,
        sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.order-button:hover {
    background: #e9eef2;
    border-color: #bcc9d3;
}

.order-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--zr-focus);
}

/* Admin-Module: Terminarten */

.appointment-create-form {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto;
    gap: 14px;
    align-items: center;
}

.duration-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
}

.duration-field span {
    color: var(--zr-muted);
    font-size: 0.9rem;
}

.admin-duration-input {
    width: 92px;
    min-height: 48px;
    padding: 0 10px;
    border: 1px solid var(--zr-border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--zr-text);
    font-family:
        Ubuntu,
        system-ui,
        sans-serif;
    font-size: 1rem;
    outline: none;
}

.admin-duration-input:focus {
    border-color: var(--zr-blue);
    box-shadow: 0 0 0 4px var(--zr-focus);
}

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

.appointment-row-main {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto
        auto;
    align-items: center;
    gap: 10px;
}

.appointment-row-main .admin-duration-input {
    min-height: 42px;
}

@media (max-width: 850px) {
    .appointment-create-form {
        grid-template-columns: 1fr;
    }

    .appointment-row-main {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .appointment-row-main .duration-field,
    .appointment-row-main .compact-button {
        grid-column: 1 / -1;
    }
}

/* Store-Zuordnung fuer Terminarten */

.store-multiselect {
    position: relative;
    min-width: 160px;
}

.store-multiselect summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--zr-border);
    border-radius: 10px;
    background: #fff;
    color: var(--zr-blue);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.store-multiselect summary::-webkit-details-marker {
    display: none;
}

.store-multiselect summary::after {
    content: "▾";
    margin-left: auto;
    color: var(--zr-muted);
}

.store-multiselect[open] summary::after {
    content: "▴";
}

.store-multiselect-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    width: 260px;
    max-height: 310px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--zr-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(20, 44, 65, 0.14);
}

.store-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.store-check:hover {
    background: #f3f6f8;
}

.store-check input {
    width: 17px;
    height: 17px;
    accent-color: var(--zr-blue);
}

.all-stores-check {
    margin-bottom: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--zr-border);
    font-weight: 700;
}

/* Terminarten-Zeile sauber einzeilig halten */

.appointment-row-main {
    grid-template-columns:
        auto
        minmax(180px, 1fr)
        auto
        minmax(150px, 180px)
        auto;
    align-items: center;
    gap: 10px;
}

.appointment-row-main .store-multiselect {
    min-width: 150px;
    max-width: 180px;
}

.appointment-row-main .compact-button {
    grid-column: auto;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .appointment-row-main {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;
    }

    .appointment-row-main .store-multiselect,
    .appointment-row-main .compact-button {
        grid-column: auto;
    }
}

/* Terminart anlegen kompakter und einzeilig */

.appointment-create-form {
    grid-template-columns:
        minmax(260px, 1fr)
        auto
        minmax(160px, 190px)
        auto;
    gap: 14px;
    align-items: center;
}

.appointment-create-form .admin-create-input {
    min-width: 0;
}

.appointment-create-form .primary-button {
    min-height: 48px;
    white-space: nowrap;
    padding: 0 22px;
}

@media (max-width: 850px) {
    .appointment-create-form {
        grid-template-columns: 1fr;
    }

    .appointment-create-form .primary-button {
        width: 100%;
    }
}

/* Admin: Kalendereinstellungen */

.admin-section-description {
    margin: 5px 0 0;
    color: var(--zr-muted);
    font-size: 0.9rem;
}

.calendar-weekdays {
    display: grid;
    gap: 8px;
}

.calendar-weekday-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 58px;
    padding: 8px 14px;
    border: 1px solid var(--zr-border);
    border-radius: 12px;
}

.calendar-weekday-row.is-inactive {
    background: #f7f8f9;
}

.calendar-day-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--zr-blue);
    font-weight: 700;
    cursor: pointer;
}

.calendar-day-toggle input,
.calendar-repeat-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--zr-blue);
}

.calendar-time-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-time-range input,
.calendar-time-input,
.calendar-date-input,
.calendar-select {
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--zr-border);
    border-radius: 10px;
    background: #fff;
    color: var(--zr-text);
    font: inherit;
}

.calendar-time-range input {
    width: 112px;
}

.calendar-save-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.calendar-create-row {
    display: grid;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.calendar-break-create {
    grid-template-columns:
        minmax(180px, 1fr)
        160px
        120px
        auto
        120px
        auto;
}

.calendar-closure-create {
    grid-template-columns:
        minmax(220px, 1fr)
        175px
        auto
        auto;
}

.calendar-inline-label {
    color: var(--zr-muted);
    text-align: center;
}

.calendar-repeat-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-weight: 700;
    cursor: pointer;
}

.calendar-list {
    display: grid;
    gap: 8px;
}

.calendar-list-row {
    display: grid;
    grid-template-columns:
        auto
        minmax(160px, 1fr)
        140px
        160px
        auto;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid var(--zr-border);
    border-radius: 12px;
}

.calendar-list-row.is-inactive {
    opacity: 0.65;
    background: #f7f8f9;
}

.closure-row {
    grid-template-columns:
        auto
        minmax(180px, 1fr)
        200px
        auto;
}

@media (max-width: 850px) {
    .calendar-weekday-row {
        grid-template-columns: 1fr;
    }

    .calendar-time-range {
        flex-wrap: wrap;
    }

    .calendar-break-create,
    .calendar-closure-create {
        grid-template-columns: 1fr;
    }

    .calendar-list-row,
    .closure-row {
        grid-template-columns: 1fr;
    }
}

/* Kalenderfelder im ZR-Design */

.calendar-time-range input[type="time"],
.calendar-time-input,
.calendar-date-input,
.calendar-select {
    min-height: 46px;
    border: 1px solid var(--zr-border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--zr-text);
    font-family:
        Ubuntu,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 0.95rem;
    padding: 0 12px;
    outline: none;
    transition:
        border-color 120ms ease,
        box-shadow 120ms ease,
        background 120ms ease;
}

.calendar-time-range input[type="time"]:focus,
.calendar-time-input:focus,
.calendar-date-input:focus,
.calendar-select:focus {
    border-color: var(--zr-blue);
    box-shadow: 0 0 0 4px var(--zr-focus);
}

.calendar-time-range input[type="time"]:hover,
.calendar-time-input:hover,
.calendar-date-input:hover,
.calendar-select:hover {
    border-color: #bcc9d3;
}

.calendar-date-input::-webkit-calendar-picker-indicator,
.calendar-time-input::-webkit-calendar-picker-indicator,
.calendar-time-range input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.75;
}

.calendar-select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #6b7c89 50%),
        linear-gradient(135deg, #6b7c89 50%, transparent 50%);
    background-position:
        calc(100% - 16px) 50%,
        calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

.calendar-closure-create {
    grid-template-columns:
        minmax(200px, 1fr)
        170px
        auto
        170px
        auto
        auto;
}

/* Automatische Feiertage & Pagination */

.automatic-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--zr-border);
    border-radius: 10px;
    background: #f2f5f7;
    color: var(--zr-muted);
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.closure-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.pagination-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--zr-border);
    border-radius: 9px;
    background: #f5f7f9;
    color: var(--zr-blue);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 120ms ease,
        border-color 120ms ease;
}

.pagination-arrow:hover {
    background: #e9eef2;
    border-color: #bcc9d3;
}

.pagination-arrow.is-disabled {
    opacity: 0.35;
    cursor: default;
}

.pagination-position {
    min-width: 46px;
    color: var(--zr-muted);
    font-size: 0.82rem;
    text-align: center;
}

.store-create-form {
    grid-template-columns:
        minmax(220px, 1fr)
        190px
        auto;
}

.store-state-select {
    min-width: 150px;
}

.store-assumption-select {
    min-width: 230px;
}

.admin-row-main {
    grid-template-columns:
        auto
        minmax(160px, 1fr)
        160px
        230px
        auto;
}

/* Stores: regionale Sonderfeiertage nicht mehr separat anzeigen */

.admin-row-main {
    grid-template-columns:
        auto
        minmax(180px, 1fr)
        170px
        auto;
}

.store-assumption-select {
    display: none;
}

/* Pagination Schließtage */

.closure-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.pagination-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--zr-border);
    border-radius: 9px;
    background: #f5f7f9;
    color: var(--zr-blue);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
}

.pagination-arrow:hover {
    background: #e9eef2;
    border-color: #bcc9d3;
}

.pagination-arrow.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.pagination-position {
    min-width: 46px;
    color: var(--zr-muted);
    font-size: 0.82rem;
    text-align: center;
}

/* ZR Datepicker */

.zr-datepicker {
    position: relative;
}

.zr-date-display {
    width: 100%;
    min-height: 48px;
    padding: 0 44px 0 14px;
    border: 1px solid var(--zr-border);
    border-radius: var(--radius-md);
    background:
        #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23002F50' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E")
        no-repeat
        calc(100% - 14px)
        center;
    color: var(--zr-text);
    font: inherit;
    cursor: pointer;
    outline: none;
}

.zr-date-display:hover {
    border-color: #b9c7d1;
}

.zr-date-display:focus {
    border-color: var(--zr-blue);
    box-shadow: 0 0 0 4px var(--zr-focus);
}

.zr-datepicker-popup {
    position: absolute;
    z-index: 100;
    top: calc(100% + 7px);
    left: 0;
    width: 292px;
    padding: 12px;
    border: 1px solid var(--zr-border);
    border-radius: 14px;
    background: #fff;
    box-shadow:
        0 16px 40px
        rgba(0, 47, 80, 0.16);
}

.zr-datepicker-popup[hidden] {
    display: none;
}

.zr-datepicker-header {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    margin-bottom: 10px;
}

.zr-datepicker-title {
    color: var(--zr-blue);
    font-weight: 700;
    text-align: center;
}

.zr-datepicker-nav {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--zr-blue);
    font: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
}

.zr-datepicker-nav:hover {
    background: #eef3f6;
}

.zr-datepicker-weekdays,
.zr-datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.zr-datepicker-weekdays {
    margin-bottom: 4px;
}

.zr-datepicker-weekdays span {
    padding: 5px 0;
    color: var(--zr-muted);
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
}

.zr-datepicker-day {
    aspect-ratio: 1;
    margin: 2px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--zr-text);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.zr-datepicker-day:hover:not(:disabled) {
    background: #eef3f6;
}

.zr-datepicker-day.outside-month {
    color: #a8b2ba;
}

.zr-datepicker-day.today {
    box-shadow:
        inset 0 0 0 1px
        #9eb2c0;
}

.zr-datepicker-day.selected {
    background: var(--zr-blue);
    color: #fff;
    font-weight: 700;
}

.zr-datepicker-day:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.zr-datepicker-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid var(--zr-border);
}

.zr-datepicker-today {
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: #eef3f6;
    color: var(--zr-blue);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.zr-datepicker-today:hover {
    background: #e3ebf0;
}

.availability-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.availability-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.availability-arrow {
    width: 42px;
    height: 42px;
    border: 1px solid var(--zr-border);
    border-radius: 10px;
    background: #f4f6f8;
    color: var(--zr-blue);
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.availability-arrow:hover {
    background: #e9eef2;
    border-color: #b8c6d0;
}

.availability-arrow:active {
    transform: translateY(1px);
}


.success-inline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.success-inline-message {
    margin: 0;
    color: var(--zr-muted);
}

/* Feinschliff Navigation freie Termine */

.availability-nav {
    gap: 6px;
}

.availability-arrow {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f4f6f8;
    border: 1px solid var(--zr-border);
    color: var(--zr-blue);
    font-size: 1rem;
    font-weight: 700;
}

.availability-arrow:hover {
    background: #eaf0f4;
    border-color: #b9c7d1;
}

.availability-arrow:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--zr-focus);
}

/* Leere Verfügbarkeit dezenter */

.no-slots-period,
.availability-day .empty-state {
    color: var(--zr-muted);
    font-size: 0.78rem;
    font-weight: 400;
    text-align: center;
}

.no-slots-period {
    padding: 26px 6px;
}

/* Erfolgsseite kompakter */

.result-card {
    min-height: auto;
}

.result-card h1 {
    margin-bottom: 10px;
}

.booking-success-summary {
    margin-top: 14px;
}

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

.success-inline-row {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--zr-border);
}

.success-inline-message {
    align-self: center;
    margin: 0;
    line-height: 1.35;
}

.success-inline-row .primary-button,
.success-inline-row .button-link {
    flex: 0 0 auto;
}

/* Erfolgsseite: Text links auf Buttonhoehe */

.success-inline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
}

.success-inline-message {
    margin: 0;
    color: var(--zr-muted);
    line-height: 1.35;
}

.success-inline-row .button-link {
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 650px) {
    .success-inline-row {
        align-items: stretch;
        flex-direction: column;
    }

    .success-inline-row .button-link {
        width: 100%;
    }
}

/* RemoteCARE Benutzerverwaltung */

.user-admin-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.user-admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 18px;
    border: 1px solid var(--zr-border);
    border-radius: 12px;
    background: var(--zr-surface, #fff);
}

.user-admin-main {
    min-width: 0;
}

.user-admin-name {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.user-admin-email,
.user-admin-meta {
    margin-top: 4px;
    color: var(--zr-muted);
    font-size: 0.84rem;
}

.user-admin-meta {
    font-size: 0.76rem;
}

.user-admin-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.user-admin-actions form {
    margin: 0;
}

.user-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #eef2f5;
    color: var(--zr-blue);
}

.user-status-pending .user-status-badge {
    background: #fff3d7;
}

.user-status-blocked .user-status-badge {
    background: #fde8e8;
}

.user-status-approved .user-status-badge {
    background: #e4f3e8;
}

@media (max-width: 700px) {
    .user-admin-row {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .user-admin-actions {
        width: 100%;
    }
}