:root {
    color-scheme: light only;
    --brand-primary: #032f5a;
    --brand-primary-hover: #043a6f;
    --brand-primary-active: #022847;
    --surface-card: #ffffff;
    --surface-soft: #f6f8fa;
    --text-strong: #1b1b1b;
    --border-soft: #e6ebf1;
    --border-stronger: #dbdbdb;
    --shadow-card: 0 6px 14px rgba(3, 47, 90, 0.08);
    --shadow-card-hover: 0 10px 22px rgba(3, 47, 90, 0.12);
    --shadow-card-soft: 0 1px 3px rgba(10, 10, 10, 0.08);
}

.guest-page button.guest-action-loading {
    background-color: #e5e7eb !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
    color: transparent !important;
    pointer-events: none;
}

.guest-page button.guest-action-loading:not(.button) {
    position: relative;
}

.guest-page button.guest-action-loading:not(.button)::after {
    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    width: 1em;
    height: 1em;
    border: 2px solid #4b5563;
    border-right-color: transparent;
    border-top-color: transparent;
    border-radius: 999px;
    content: "";
    animation: guest-button-spin 0.65s linear infinite;
}

.guest-page button.guest-action-loading:not(.button).pshop-action-btn--add::after,
.guest-page button.guest-action-loading:not(.button).pshop-action-btn--take::after {
    border-left-color: #4b5563;
    border-bottom-color: #4b5563;
}

.guest-page button.guest-action-loading.button::after {
    border-color: transparent transparent #4b5563 #4b5563 !important;
}

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

.karma-request-info h4 {
    margin: 0 0 0.5rem;
}

.karma-request-shopping {
    margin-top: 0.75rem;
}

.karma-request-shopping ul {
    margin-top: 0.4rem;
    margin-left: 1rem;
}

.karma-request-shopping li {
    margin: 0.25rem 0;
}

.karma-shopping-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.karma-shopping-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.8fr) minmax(78px, 0.45fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #d0e3f0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(232, 244, 253, 0.82) 0%, rgba(240, 247, 255, 0.9) 100%);
    color: #1a3a5c;
}

.karma-shopping-list--no-points .karma-shopping-list-head {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.8fr) minmax(78px, 0.45fr);
}

.karma-shopping-list--no-points .karma-shopping-list-item {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.8fr) minmax(78px, 0.45fr);
}

.karma-shopping-list-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.karma-shopping-list-main small {
    color: #667085;
}

.karma-shopping-list-fill {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.karma-shopping-list-fill small {
    color: #667085;
    font-size: 0.78rem;
}

.guest-page .karma-portal-card {
    background: linear-gradient(135deg, rgba(232, 244, 253, 0.92) 0%, rgba(240, 247, 255, 0.92) 100%);
    border: 1px solid #d0e3f0;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    color: #1a3a5c;
}

.karma-fill-meter {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7edf4;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14);
}

.karma-fill-meter-bar {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
}

.karma-fill-meter-bar.is-empty {
    min-width: 0;
    background: #8b1010;
}

.karma-fill-meter-bar.is-low {
    background: #c2410c;
}

.karma-fill-meter-bar.is-mid {
    background: #d97706;
}

.karma-fill-meter-bar.is-high {
    background: #14853b;
}

.karma-portal-card {
    border: 1px solid var(--border-soft);
}

.karma-scale-labels {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.82rem;
    line-height: 1.2;
}

.karma-scale-wrap {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 0.45rem;
    margin: 0.35rem 0 0.4rem;
}

.karma-balance-summary {
    margin: 0;
    text-align: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    color: currentColor;
}

.karma-portal-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 320px) 1fr auto;
    align-items: center;
    gap: 1rem 1.25rem;
}

.karma-meter-block {
    min-width: 0;
    max-width: 320px;
}

.karma-portal-balance {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.karma-portal-balance .karma-balance-summary {
    text-align: center;
    margin-left: 0;
    padding: 0.2rem 0.65rem;
    font-size: 0.86rem;
}

.karma-balance-action-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(3, 47, 90, 0.18);
    box-shadow: 0 2px 6px rgba(3, 47, 90, 0.16);
    color: #032f5a;
    font-weight: 700;
    white-space: nowrap;
}

.karma-meter-block__mood {
    margin-bottom: 0.2rem;
    font-size: 0.68rem;
}

.karma-meter-slider {
    min-width: 0;
}

.karma-scale--fillmeter {
    background: linear-gradient(90deg, #e76868 0%, #f3c55a 50%, #52c26b 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.karma-portal-meter-ticks {
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.karma-portal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
}

@media (max-width: 768px) {
    .karma-portal-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.55rem 0.75rem;
    }

    .karma-meter-block {
        grid-column: 1 / -1;
        max-width: none;
    }

    .karma-portal-balance {
        justify-content: flex-start;
    }

    .karma-portal-actions {
        justify-content: flex-end;
    }
}

.karma-scale-edge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.karma-scale-edge-icon svg {
    width: 20px;
    height: 20px;
}

.karma-scale-edge-icon .karma-scale-edge-glyph {
    font-size: 22px;
    line-height: 1;
}

.karma-scale-edge-icon--bad {
    color: #8b1010;
}

.karma-scale-edge-icon--good {
    color: #14853b;
}

.karma-scale {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6b0000 0%, #d86c00 35%, #f1d66b 50%, #7ac77d 75%, #14853b 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

.karma-scale-marker {
    position: absolute;
    top: -3px;
    width: 4px;
    height: 14px;
    border-radius: 999px;
    background: #111;
    transform: translateX(-50%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.karma-suggestions {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 0.78rem;
}
/* Variant used when only the Mithelfen CTA button remains – center it within
   the card so it reads as the primary call-to-action. */
.karma-suggestions--centered {
    justify-content: center;
}
.karma-suggestions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Match pshop-action-btn typography (compact, 0.75rem, weight 600, rounded). */
.karma-suggestions-buttons .button.is-small {
    height: auto;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 8px;
    white-space: nowrap;
}

/* Legacy karma-suggestion list styles (kept for compatibility) */
.karma-suggestion-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    width: 100%;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-soft);
}

.karma-suggestion-choice:last-child {
    border-bottom: 0;
}

.karma-suggestion-choice input {
    margin-top: 0.25rem;
}

.karma-suggestion-choice-body {
    flex: 1;
    min-width: 0;
}

.karma-suggestion-choice-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.karma-suggestion-choice-head .tag {
    flex-shrink: 0;
    margin-left: auto;
}

/* --- New karma suggestion modal (selection cards) --- */
.karma-suggestion-modal-card {
    width: min(560px, 95vw);
    max-height: 90vh;
}
.karma-suggestion-modal-head {
    background: linear-gradient(135deg, #e8f4fd 0%, #f0f7ff 100%);
    border-bottom: 1px solid #d0e3f0;
    gap: 10px;
    align-items: center;
}
.karma-suggestion-modal-head .modal-card-title {
    color: #032f5a;
    font-weight: 700;
    font-size: 1.05rem;
    flex: 1;
    min-width: 0;
}
.karma-suggestion-modal-body {
    background: #f8fbff;
}
.karma-suggestion-modal-intro {
    font-size: 0.8rem;
    color: #6b7a8d;
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.karma-suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.karma-suggestion-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1.5px solid #e0e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.karma-suggestion-card:hover {
    border-color: #5a9fd4;
    background: #f4faff;
}
.karma-suggestion-card-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.karma-suggestion-card-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 2px solid #c7d0da;
    border-radius: 6px;
    background: #fff;
    margin-top: 0;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
}
.karma-suggestion-card-check::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 7px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.12s;
}
.karma-suggestion-card-input:checked ~ .karma-suggestion-card-check {
    background: #1b7f5a;
    border-color: #1b7f5a;
}
.karma-suggestion-card:hover .karma-suggestion-card-check {
    border-color: #1b7f5a;
}
.karma-suggestion-card-input:checked ~ .karma-suggestion-card-check::after {
    transform: rotate(45deg) scale(1);
}
.karma-suggestion-card:has(.karma-suggestion-card-input:checked) {
    border-color: #032f5a;
    background: #eaf3fc;
    box-shadow: 0 1px 4px rgba(3, 47, 90, 0.12);
}
.karma-suggestion-card-input:focus-visible ~ .karma-suggestion-card-check {
    outline: 2px solid #5a9fd4;
    outline-offset: 2px;
}
/* Dedicated left-column icon indicating the todo's type (shopping, supplies,
   cleaning, generic). Aligns vertically across all rows so the type is
   visually scannable at a glance. */
.karma-suggestion-card-type-icon {
    flex-shrink: 0;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: 0;
    border-radius: 8px;
    background: #e8f4fd;
    color: #1a3a5c;
    border: 1px solid #cfe4f3;
}
.karma-suggestion-card-type-icon__glyph,
.karma-suggestion-card-type-icon svg {
    width: 1.25em;
    height: 1.25em;
    font-size: 1.25em;
    line-height: 1;
}
.karma-suggestion-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.karma-suggestion-card-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.karma-suggestion-card-label {
    font-weight: 700;
    font-size: 0.92rem;
    color: #1a3a5c;
    flex: 1 1 auto;
    min-width: 0;
}
.karma-task-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    color: #1a3a5c;
    background: #e8f4fd;
    border: 1px solid #cfe4f3;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
}
.karma-task-type-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.karma-task-type-badge__icon svg,
.karma-task-type-badge__glyph {
    width: 1em;
    height: 1em;
    font-size: 1em;
    line-height: 1;
}
.karma-task-type-badge--hint {
    background: #f4ecff;
    border-color: #dfcdf7;
    color: #5a3d85;
}
.karma-suggestion-card-info {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7a8d;
    background: #eef2f6;
    padding: 1px 7px;
    border-radius: 6px;
}
.karma-suggestion-card-desc {
    font-size: 0.78rem;
    color: #6b7a8d;
    line-height: 1.35;
    margin-top: 1px;
}
.karma-suggestion-bar {
    width: 18px;
    height: auto;
    min-height: 56px;
    align-self: stretch;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .karma-suggestion-card {
        padding: 9px 10px;
        gap: 8px;
    }
    .karma-suggestion-card-label {
        font-size: 0.88rem;
    }
}

.karma-action-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.karma-group-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.karma-group-buttons-col {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.karma-group-buttons-col--negative {
    justify-content: flex-start;
}

.karma-group-buttons-col--positive {
    justify-content: flex-end;
}

.karma-group-button {
    white-space: normal;
    min-height: auto;
    width: auto;
    min-width: 0;
    padding: 6px 10px;
    font-size: 0.8rem;
}

.karma-modal-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.karma-modal-action {
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 0.85rem;
    background: var(--surface-soft);
}

.karma-modal-action--pshop {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 0;
}

.karma-modal-action--pshop .pshop-item-main {
    flex: 1;
}

.karma-modal-action--pshop .pshop-item-side {
    display: flex;
    align-items: center;
}

.karma-modal-action-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.karma-notice-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.karma-notice-actions > .button,
.karma-notice-actions > form {
    width: 100%;
}

.karma-notice-actions > form .button {
    width: 100%;
}

.karma-discount-highlight {
    margin: 1rem auto 0.65rem;
    padding: 0.85rem 1rem;
    border: 1px solid #b7dfc1;
    border-radius: 14px;
    background: linear-gradient(135deg, #e7f7eb 0%, #f2fbf4 100%);
    color: #155724;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.35;
    box-shadow: 0 4px 14px rgba(21, 87, 36, 0.1);
}

.karma-current-balance {
    margin: 0 0 1rem;
    color: #1a3a5c;
    font-weight: 700;
}

.karma-shopping-appeal {
    margin: 1.35rem 0 0.75rem;
    color: #1a3a5c;
    font-weight: 600;
    line-height: 1.35;
}

.karma-shopping-question {
    flex-basis: 100%;
    margin: 0 0 0.15rem;
    color: #032f5a;
    font-weight: 800;
    text-align: center;
}

.karma-shopping-pdf-link {
    flex-basis: 100%;
    color: #1a6fb5;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.karma-notice-actions form {
    margin: 0;
}

.karma-notice-modal .guest-welcome-card {
    position: relative;
}

.karma-notice-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.karma-take-details {
    margin-bottom: 0.75rem;
}

.karma-action-column {
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 1rem;
    background: var(--surface-soft);
}

.karma-action-column h4 {
    margin: 0.75rem 0 0.4rem;
    font-size: 1rem;
}

.karma-action-column h4:first-child {
    margin-top: 0;
}

.karma-action-item {
    margin-bottom: 0.45rem;
}

.karma-action-button {
    justify-content: space-between;
    height: auto;
    min-height: 3rem;
    white-space: normal;
    text-align: left;
}

.karma-action-button span:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.karma-action-button small {
    opacity: 0.75;
}

@media (max-width: 760px) {
    .karma-action-columns,
    .karma-group-buttons {
        grid-template-columns: 1fr;
    }

    .karma-scale-labels {
        font-size: 0.8rem;
    }

    .karma-shopping-list-item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

/* =====================================================================
   Unified UI components – single source of truth for cards, tabs,
   tables, buttons. Bereichs-Modifier (.admin-card / .guest-card etc.)
   bauen auf den Bulma-Basisklassen (.card, .tabs, .table, .button) auf.
   ===================================================================== */

/* ---- Card (Basis) ---- */
.card {
    background: var(--surface-card);
    color: var(--text-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-card-soft);
    margin: 0;
}

.card .card-header {
    box-shadow: none;
    border-bottom: 1px solid var(--border-soft);
}

.card .card-content {
    padding: 1.25rem;
}

.card .card-footer {
    border-top: 1px solid var(--border-soft);
}

/* ---- Card – Admin-Variante ---- */
.card.admin-card,
.admin .admin-card {
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.15s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-card);
}

.card.admin-card:hover,
.admin .admin-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.card.admin-card .card-header,
.admin .admin-card .card-header {
    background-color: var(--surface-soft);
    border-bottom: 1px solid var(--border-stronger);
    border-radius: 10px 10px 0 0;
    box-shadow: none;
}

.card.admin-card .card-header-title,
.admin .admin-card .card-header-title {
    color: var(--brand-primary);
    font-weight: 700;
}

.card.admin-card .card-content,
.admin .admin-card .card-content {
    flex: 1;
    padding: 1.25rem;
}

.card.admin-card .card-footer,
.admin .admin-card .card-footer {
    background-color: var(--surface-soft);
    border-top: 1px solid var(--border-stronger);
    border-radius: 0 0 10px 10px;
    padding: 0.75rem;
}

/* Admin-Card – Sidebar-Modifier (ersetzt früheres .admin-left-menu-box) */
.card.admin-card.admin-card--menu {
    padding: 14px;
}

/* ---- Card – Guest-Variante ---- */
.card.guest-card,
.guest-page .card {
    border: 1px solid #e0e5ec;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-strong);
}

/* ---- Tabs (Basis-Modifier) ---- */
.tabs.admin-tabs ul,
.tabs.guest-tabs ul,
.tabs.apartment-tabs ul,
.tabs.infocard-content-tabs ul {
    border-bottom-color: var(--border-stronger);
}

.tabs.admin-tabs.is-toggle li.is-active a,
.tabs.guest-tabs.is-toggle li.is-active a,
.tabs.apartment-tabs.is-toggle li.is-active a,
.tabs.infocard-content-tabs.is-toggle li.is-active a {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.tabs.admin-tabs.is-toggle a,
.tabs.guest-tabs.is-toggle a,
.tabs.apartment-tabs.is-toggle a,
.tabs.infocard-content-tabs.is-toggle a {
    color: var(--brand-primary);
}

.tabs.admin-tabs.is-toggle a:hover:not(.is-active),
.tabs.guest-tabs.is-toggle a:hover:not(.is-active),
.tabs.apartment-tabs.is-toggle a:hover:not(.is-active),
.tabs.infocard-content-tabs.is-toggle a:hover:not(.is-active) {
    background-color: rgba(3, 47, 90, 0.06);
    color: var(--brand-primary);
    border-color: var(--border-stronger);
}

/* ---- Buttons (Bulma-Erweiterungen) ---- */
.button.is-icon {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 0.34em;
}

.button.is-icon .icon {
    margin: 0 !important;
}

.button.is-icon .button-text {
    display: none !important;
}

/* Pill-Variante (vorher .guest-btn-small) */
.button.is-pill {
    border-radius: 999px;
}

/* Admin action/readability baseline. Bulma's light outlined variant is too pale
   on the admin surfaces, especially after table action normalization. */
.admin .button.is-light.is-outlined,
.admin .button.is-light.is-outlined:visited {
    background-color: #ffffff !important;
    border-color: #9aa9ba !important;
    color: #243447 !important;
}

.admin .button.is-light.is-outlined:hover,
.admin .button.is-light.is-outlined:focus-visible {
    background-color: #eef3f8 !important;
    border-color: #66788d !important;
    color: #102a43 !important;
}

.admin .button.is-light.is-outlined[disabled],
.admin .button.is-light.is-outlined.is-disabled {
    background-color: #f5f7fa !important;
    border-color: #ccd5df !important;
    color: #69798a !important;
}

.admin .button.is-danger {
    background-color: #b4232f;
    border-color: #b4232f;
    color: #fff;
}

.admin .button.is-danger:hover,
.admin .button.is-danger:focus-visible {
    background-color: #9f1f2a;
    border-color: #9f1f2a;
    color: #fff;
}

/* ---- Tabellen – einheitliche Action-Spalte ---- */
td.actions-cell,
td.admin-actions-cell,
td[data-label="Aktionen"],
td[data-label="Actions"] {
    white-space: normal;
    min-width: 7.5rem;
}

td.actions-cell .buttons,
td.admin-actions-cell .buttons,
td[data-label="Aktionen"] .buttons,
td[data-label="Actions"] .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 0 !important;
}

td.actions-cell .buttons .button,
td.admin-actions-cell .buttons .button,
td[data-label="Aktionen"] .buttons .button,
td[data-label="Actions"] .buttons .button {
    flex: 0 0 auto;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

th.actions-head,
th.admin-actions-head {
    min-width: 7.5rem;
}

.admin-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.admin-ctx-menu {
    position: fixed;
    z-index: 10000;
    min-width: 12.5rem;
    max-width: 18rem;
    padding: 6px 0;
    margin: 0;
    background: #fff;
    color: #1b1f24;
    border: 1px solid #d5d8de;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2);
    opacity: 1;
}

.admin-ctx-menu[hidden] {
    display: none !important;
}

.admin-ctx-menu__item {
    padding: 2px 8px;
}

.admin-ctx-menu__item form,
.admin-ctx-menu__item .button {
    width: 100%;
    justify-content: flex-start;
    margin: 0;
}

.admin-ctx-menu .admin-action-menu__btn.button,
.admin-ctx-menu .admin-action-menu__btn.button.is-light,
.admin-ctx-menu .admin-action-menu__btn.button.is-light.is-outlined,
.admin-ctx-menu .admin-action-menu__btn.button.is-info,
.admin-ctx-menu .admin-action-menu__btn.button.is-success,
.admin-ctx-menu .admin-action-menu__btn.button.is-danger,
.admin-ctx-menu .admin-action-menu__btn.button.is-warning {
    height: auto !important;
    min-height: 34px !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0.4rem 0.7rem !important;
    border-radius: 6px !important;
    opacity: 1 !important;
    background: #fff !important;
    border-color: transparent !important;
    color: #1b1f24 !important;
    box-shadow: none !important;
}

.admin-ctx-menu .admin-action-menu__btn.button:hover:not(:disabled):not([aria-disabled="true"]),
.admin-ctx-menu .admin-action-menu__btn.button:focus-visible:not(:disabled):not([aria-disabled="true"]),
.admin-ctx-menu .admin-action-menu__btn.button.is-danger:hover:not(:disabled),
.admin-ctx-menu .admin-action-menu__btn.button.is-success:hover:not(:disabled),
.admin-ctx-menu .admin-action-menu__btn.button.is-light.is-outlined:hover:not(:disabled) {
    background: #eef2f6 !important;
    color: #1b1f24 !important;
}

.admin-ctx-menu .admin-action-menu__btn.button:disabled,
.admin-ctx-menu .admin-action-menu__btn.button[disabled],
.admin-ctx-menu .admin-action-menu__btn.button[aria-disabled="true"] {
    opacity: 0.45 !important;
    color: #8a9098 !important;
    background: #fff !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.admin-ctx-menu .admin-action-menu__btn.button .button-text {
    display: inline !important;
    margin-left: 0.4rem;
}

.admin-ctx-menu .admin-action-menu__btn.button .icon {
    margin-right: 0 !important;
}

/* ---- Form-Hilfetexte (Bulma .help) ---- */
/* Hilfetexte sollen IMMER in einer eigenen Zeile unter dem zugehörigen
   Element erscheinen – auch dann, wenn das Eltern-Element ein Flex-Container
   (z. B. `is-flex` neben einer Überschrift) ist. */
p.help {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
}

.is-flex:has(> p.help),
.buttons:has(> p.help),
.field:has(> p.help) {
    flex-wrap: wrap;
}

.is-flex > p.help,
.buttons > p.help {
    flex: 1 0 100%;
    order: 999;
}

html, body {
    min-height: 100%;
    background: #eef2f5;
    color: #1b1b1b;
}

/* Force light mode for all form elements and common components */
input, textarea, select, button {
    color-scheme: light;
    color: #1b1b1b;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select {
    background-color: #fff;
    color: #1b1b1b;
    border-color: #dbdbdb;
}

.input, .textarea, .select select {
    background-color: #fff;
    color: #1b1b1b;
}

.box {
    box-shadow: none;
    background: transparent;
    color: #1b1b1b;
}

.modal-card, .modal-card-head, .modal-card-body, .modal-card-foot {
    background-color: #fff;
    color: #1b1b1b;
}

.modal-card-head {
    border-bottom-color: #dbdbdb;
}

.modal-card-foot {
    border-top-color: #dbdbdb;
}

/* Endreinigung in iframe-Modal: volle Viewport-Fläche (Gastportal, Tablet) */
.modal.modal-endreinig-fullscreen {
    min-height: 100vh;
    min-height: 100dvh;
}

.modal.modal-endreinig-fullscreen.is-active {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}

/* Gegen .guest-page .modal { padding: 8px } in der schmalen Media Query */
.guest-page .modal.modal-endreinig-fullscreen.is-active {
    padding: 0;
}

.modal.modal-endreinig-fullscreen .modal-card {
    align-self: stretch;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.modal.modal-endreinig-fullscreen .modal-card-head {
    flex-shrink: 0;
}

.modal.modal-endreinig-fullscreen .modal-card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
}

.modal.modal-endreinig-fullscreen .modal-endreinig-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    display: block;
}

.table {
    background-color: #fff;
    color: #1b1b1b;
}

.table th {
    color: #363636;
}

/* Keep Bulma primary actions aligned with navbar brand color */
.button.is-primary {
    background-color: #032f5a;
    border-color: #032f5a;
    color: #ffffff;
}

.button.is-primary:hover,
.button.is-primary.is-hovered {
    background-color: #043a6f;
    border-color: #043a6f;
    color: #ffffff;
}

.button.is-primary:focus,
.button.is-primary.is-focused,
.button.is-primary:active,
.button.is-primary.is-active {
    background-color: #022847;
    border-color: #022847;
    color: #ffffff;
}

/* Keep icon + label spacing consistent across all Bulma buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48em;
}

.button .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0 !important;
}

.button .icon:first-child:not(:last-child),
.button .icon:last-child:not(:first-child) {
    margin: 0 !important;
}

/* Unified table buttons */
.table .button {
    font-size: 0.85rem;
    padding: 0.35rem 0.65rem;
    line-height: 1.1;
    height: auto;
}

.label, label {
    color: #363636;
}

body {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background: #eef2f5;
    color: #1b1b1b;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

:root {
    --header-height: 96px;
    --header-height-shrink: 64px;
    --logo-size: 140px;
    --logo-size-shrink: 86px;
    --logo-overlap: 36px;
    --logo-overlap-shrink: 18px;
    --logo-offset-x: -8px;
}

h1, h2, h3, h4, h5, h6 {
    color: #032f5a;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin: 0 0 0.6rem;
}

h1 {
    font-size: 2.1rem;
    font-weight: 700;
}

h2 {
    font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
    font-weight: 600;
    margin-top: 2.2rem;
    margin-bottom: 1rem;
    padding: 0;
    color: #032f5a;
    letter-spacing: 0.02em;
    line-height: 1.15;
}

.modal h2,
.notification h2 {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.modal h3,
.notification h3 {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

h3 {
    font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    font-size: 1.4rem;
}

.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6 {
    color: inherit;
}

h4 {
    font-size: 1.05rem;
    font-weight: 700;
}

h5 {
    font-size: 1rem;
    font-weight: 700;
}

h6 {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.accent {
    color: #032f5a;
    font-weight: 700;
}

.content strong,
.content b,
.block-textcard strong,
.block-textcard b {
    color: #032f5a;
}

.hero-content strong,
.hero-content b {
    color: #ee7317;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

.site-header, .site-footer {
    background: #032f5a;
    color: #fff;
}

.site-header {
    position: sticky;
    top: 0;
    /* Above map UI (.map-tabs, Leaflet controls at z-index 1000), below modals/lightbox */
    z-index: 1100;
    overflow: visible;
    transition: box-shadow 0.2s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.navbar {
    background: #032f5a;
    padding: 0;
    overflow: visible;
    min-height: var(--header-height);
    transition: min-height 0.2s ease;
}

.navbar .container,
.navbar-brand {
    overflow: visible;
    align-items: center;
    min-height: var(--header-height);
}

.navbar-burger {
    color: #fff;
    margin-left: auto;
    position: relative;
    z-index: 4;
}

.navbar-menu {
    min-height: var(--header-height);
}

.navbar-item, .navbar-link {
    color: #fff;
}

.navbar-item:hover, .navbar-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.navbar-menu {
    background: #032f5a;
}

.site-header .container {
    padding-top: 0;
    padding-bottom: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-item {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.brand-logo {
    height: var(--logo-size);
    width: auto;
    max-height: none;
    transform: translateY(calc(-1 * var(--logo-overlap)));
    margin-left: var(--logo-offset-x);
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
    transition: height 0.2s ease, transform 0.2s ease;
}

.navbar-item img.brand-logo {
    max-height: none;
    height: var(--logo-size);
    margin-bottom: -100px;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 12px;
    position: relative;
    z-index: 3;
    text-decoration: none;
    color: inherit;
}

a.brand-copy:hover {
    text-decoration: none;
    color: inherit;
}

.brand-text-mobile {
    display: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    gap: 2px;
}

.brand-text-mobile span {
    display: block;
}

.brand-text {
    font-size: 18px;
    font-weight: 700;
    transition: font-size 0.2s ease;
}

.brand-sub {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    transition: font-size 0.2s ease, opacity 0.2s ease;
}

.site-header.is-shrink .navbar {
    min-height: var(--header-height-shrink);
}

.site-header.is-shrink .navbar .container,
.site-header.is-shrink .navbar-brand,
.site-header.is-shrink .navbar-menu {
    min-height: var(--header-height-shrink);
}

.site-header.is-shrink .brand-logo {
    height: var(--logo-size-shrink);
    transform: translateY(calc(-1 * var(--logo-overlap-shrink)));
    margin-bottom: -40px;
}

.site-header.is-shrink .navbar-item img.brand-logo {
    height: var(--logo-size-shrink);
}

.site-header.is-shrink .brand-text {
    font-size: 14px;
}

.site-header.is-shrink .brand-sub {
    font-size: 10px;
    opacity: 0.85;
}

.site-header.is-shrink .brand {
    padding-top: 0;
    padding-bottom: 0;
}

.site-header.is-shrink .navbar-item {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.lang-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.9em;
}

.site-footer {
    margin-top: 40px;
    padding-left: 10px;
    padding-right: 10px;
}

main.section {
    flex: 1;
    padding-top: 0px;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-sub {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
}

.footer-links {
    display: flex;
    gap: 14px;
}

.site-footer .container {
    display: block;
}

.site-header a, .site-footer a {
    color: #fff;
    text-decoration: none;
    margin-right: 10px;
}

.nav a {
    margin-right: 12px;
}

.hero {
    background: #fff;
    padding: 28px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.hero-snow {
    background: #032f5a;
    color: #fefefe;
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: clamp(360px, 55vh, 580px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Eine Spalte: Inhalt füllt die Hero-Höhe → margin-top:auto schiebt CTAs/Tabs ans untere Ende */
.hero-snow > .hero-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.hero-snow::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/config-asset/pno/assets/winter1.jpeg");
    background-size: cover;
    background-position: center;
    z-index: 0;
}
/* Hide default ::after when a custom background image is configured */
.hero-snow.has-custom-bg::after {
    display: none;
}
/* Custom background image element */
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Bottom-up gradient for headline legibility */
.hero-snow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(3,47,90,0) 0%,
        rgba(3,47,90,0) 38%,
        rgba(3,47,90,0.55) 72%,
        rgba(3,47,90,0.85) 100%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(10px, 2vw, 20px);
}

.hero-content .feature-badges-widget {
    position: absolute;
    bottom: 10px;
    right: 20px;
}

.hero-snow .hero-actions,
.hero-snow .hero-apartment-tabs {
    margin-top: auto;
}

.hero-snow .hero-actions {
    position: absolute;
  bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  right: 0px;
  z-index: 3;
}

@media (min-width: 1024px) {
    /* Hero aus Container-Padding nach außen ziehen (volle Breite / bündig) */
    .hero.hero-snow {
        margin-left: calc(-3rem - 20px);
        margin-right: calc(-3rem - 20px);
        border-radius: 0;
    }
}

.hero-snow .hero-content h1,
.hero-snow .hero-content h1 * {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.hero-text {
    align-self: flex-start;
    max-width: 100%;
    padding: clamp(14px, 2.2vw, 22px) clamp(16px, 2.4vw, 26px);
    background: rgba(0, 0, 0, 0.45);
    border-radius: 12px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.hero-text > * {
    color: #fff;
}

.hero-text > *:first-child {
    margin-top: 0;
}

.hero-text > *:last-child {
    margin-bottom: 0;
}

.hero-snow h1 {
    font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 10px;
    color: #fff;
    letter-spacing: 0.02em;
}

.hero-snow .hero-subtitle,
.hero-snow .hero-text > p,
.hero-snow .hero-content > p {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    width:fit-content;
    color: #032f5a;
    background: rgba(255, 255, 255, 0.45);
    padding: 10px;
    border-radius: 12px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    line-height: 1.35;
    letter-spacing: 0.02em;
}

/* Markdown / Blöcke im Hero: gleiche Handschrift wie Seitenüberschriften */
.hero-snow .hero-content h2 {
    font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
    font-size: clamp(1.65rem, 3.2vw, 2.2rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.15;
}

.hero-snow .hero-content h3 {
    font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .hero-snow {
        min-height: 320px;
        margin-top: 75px;
    }
}

.hero-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* Dezenter heller Schein um Hero-CTAs (Lesbarkeit auf Foto) */

.hero-snow .hero-actions .button:hover,
.hero-snow .hero-actions .button:focus {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.65),
        0 0 22px rgba(255, 255, 255, 0.38),
        0 6px 16px rgba(0, 0, 0, 0.22);
}

.hero-snow .hero-actions .button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.95);
    outline-offset: 3px;
}

.hero-small {
    padding: 20px;
}

/*.hero-snow.hero-small {
    padding: 0;
    min-height: clamp(220px, 38vh, 360px);
    margin-top: 30px;
}*/

/* Apartment tabs placed inside a hero panel (photo background) */
.hero-apartment-tabs {
    margin-top: 18px;
}
.hero-apartment-tabs .apartment-tabs {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin-bottom: 0 !important;
}
.hero-apartment-tabs .apartment-tabs li a {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.hero-apartment-tabs .apartment-tabs li:not(.is-active) a:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.hero-apartment-tabs .apartment-tabs li.is-active a {
    background: #ffffff;
    color: #032f5a;
    text-shadow: none;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.hero-apartment-tabs .apartment-tab-tooltip {
    color: #1b1b1b;
}
.hero-apartment-tabs .apartment-tab-tooltip,
.hero-apartment-tabs .apartment-tab-tooltip * {
    text-shadow: none;
}

.highlights {
    list-style: none;
    padding: 0;
}

.highlights li {
    margin-bottom: 6px;
}

.hero-subtitle {
    font-size: 1.05rem;
    margin-bottom: 12px;
}

.highlight-cards {
    margin: 24px 0;
}

.highlight-cards .column {
    display: flex;
}

.highlight-cards .box {
    flex: 1;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.gallery-amenities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.gallery-amenities .gallery-item {
    display: flex;
    flex-direction: column;
}

.gallery-amenities .gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

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

@media (max-width: 600px) {
    .gallery-amenities {
        grid-template-columns: 1fr;
    }
}

.gallery-item,
.activities-item {
    overflow: hidden;
}

.block-picturerow,
.calendar-month,
#request-modal .modal-card,
.activities-panel,
.amenities-list,
.lightbox-content,
.map-embed,
.admin-calendar-card,
.pshop-modal-panel,
.pshop-category-balance,
.gallery-item,
.activities-item {
    border-radius: 12px;
}

.gallery-item {
    background: #fff;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.gallery-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 10px 12px;
    font-size: 0.9em;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.gallery-item:hover figcaption,
.gallery-item:focus-within figcaption {
    opacity: 1;
}

@media (hover: none) {
    .gallery-item figcaption {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    }

    .gallery-item {
        width: 100%;
    }
}

.block-pageheader {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 0;
}
.block-pageheader-logo {
    max-height: 70px;
    width: auto;
    border-radius: 8px;
    flex-shrink: 0;
}
.block-pageheader-title {
    font-size: 1.8em;
    font-weight: 700;
    margin: 0;
    color: #032f5a;
}
.block-pageheader-subtitle {
    margin: 4px 0 0;
    font-size: 1.1em;
    color: #5b6b7c;
}
@media (max-width: 480px) {
    .block-pageheader {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .block-pageheader-title {
        font-size: 1.4em;
    }
}

.block-textcard {
    margin-top: 24px;
}
.block-picturerow {
    padding: 24px 28px;
    margin-top: 24px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.08);
    background: #fff;
}
.block-textcard .content > *:last-child,
.block-picturerow .content > *:last-child {
    margin-bottom: 0;
}
.block-picturerow .content {
    margin-bottom: 16px;
}

.markdown-spacer {
    display: block;
    height: 0.45rem;
    margin: 0;
}

.md-img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0.6rem 0;
    border-radius: 8px;
}
.md-img--w33 {
    width: 33%;
}
.md-img--w50 {
    width: 50%;
}
.md-img--w100 {
    width: 100%;
}
.md-img--left {
    float: left;
    margin: 0.35rem 1rem 0.8rem 0;
}
.md-img--right {
    float: right;
    margin: 0.35rem 0 0.8rem 1rem;
}
.md-img--center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.infocard-md-panel::after,
.infocard-md-preamble::after,
.content::after {
    content: "";
    display: table;
    clear: both;
}
.md-img-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0.6rem 0;
}
.md-img-row .md-img {
    float: none;
    margin: 0;
}
.md-img-row .md-img--w50 {
    width: calc(50% - 0.25rem);
}
.md-img-row .md-img--w33 {
    width: calc(33.333% - 0.34rem);
}

.block-picturerow .gallery {
    margin: 0;
}

/* Picturerow vertical layout */
.block-picturerow-vertical {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.block-picturerow-vertical .block-picturerow-text {
    flex: 1 1 50%;
    min-width: 0;
}
.block-picturerow-vertical .block-picturerow-images {
    flex: 1 1 50%;
    min-width: 0;
}
.block-picturerow-vertical .block-picturerow-images .gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.block-picturerow-vertical .block-picturerow-images .gallery .gallery-item {
    margin: 0;
}
.block-picturerow-vertical .block-picturerow-text .content {
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .block-picturerow-vertical {
        flex-direction: column;
    }
}


.box .button {
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: max-content;
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.table th, .table td {
    padding: 8px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
}

/* ----- Calendar Card (kalender) ----- */
.calendar-page-header {
    margin: 0 0 14px;
}

.calendar-page-header h2 {
    margin: 0;
}

.calendar-page-header .range-hint {
    margin-top: 6px;
}

.calendar-wrap {
    min-width: 0;
}

.calendar-wrap > * {
    min-width: 0;
}

.calendar-summary {
    margin: 0 0 14px;
    min-width: 0;
}

.calendar-summary .summary-card {
    margin: 0;
    width: 100%;
}

/* Desktop: shrink the summary so it fits to the left of the absolutely-
   positioned apartment switcher in the top-right of the block card.
   The switcher's actual pixel width is exposed via --apt-switcher-width
   by apt-switcher.js; a conservative fallback leaves room for a 2–3 apt
   pill switcher. */
@media (min-width: 701px) {
    .block-wrapper.has-apt-switcher .calendar-summary {
        width: fit-content;
        max-width: calc(100% - var(--apt-switcher-width, 240px) - 24px);
    }

    .block-wrapper.has-apt-switcher .calendar-summary .summary-card {
        width: auto;
        max-width: 100%;
    }
}

/* Let apt-switchers used inside "in-card" slots size to their badges instead
   of inheriting width: 100% from the global .apt-switcher rule. Paired with
   the apt-switcher.js measurement against the surrounding card width. */
.map-apt-badges-in-card .apt-switcher {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
}

.calendar-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.calendar-legend-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    margin-bottom: 12px;
}

.calendar-legend-row .legend {
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.calendar-legend-row .holiday-controls {
    flex: 0 0 auto;
    align-self: flex-end;
}

.calendar-load-more-row {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.calendar-load-more-row .button[disabled] {
    opacity: 0.55;
    pointer-events: none;
}

.calendar-wrap.is-loading {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* ----- Block wrapper (shared for all blocks with common heading/intro/apt-switcher) ----- */
.block-wrapper {
    margin: 0 0 24px;
    min-width: 0;
}

.block-wrapper > * {
    min-width: 0;
}

.block-wrapper-heading[hidden],
.block-wrapper-intro[hidden] {
    display: none;
}

.block-wrapper-intro {
    margin: 0 0 14px;
}

.block-wrapper-body-wrap {
    position: relative;
    min-width: 0;
}

.block-wrapper-body:empty {
    display: none;
}

/* Apt-switcher: top-right corner of the inner block card. */
.block-wrapper.has-apt-switcher .block-wrapper-switcher {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    margin: 0;
    /* Let the switcher size to its badges – not full-width of an undefined absolute parent. */
    max-width: calc(100% - 24px);
}

.block-wrapper.has-apt-switcher .block-wrapper-switcher .apt-switcher {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
}

.block-wrapper.has-apt-switcher .block-wrapper-switcher .apt-switcher .map-apt-badges {
    flex-wrap: nowrap;
    overflow: visible;
}

.block-wrapper.is-loading {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

@media (max-width: 700px) {
    .block-wrapper.has-apt-switcher .block-wrapper-switcher {
        position: static;
        margin: 0 0 12px;
        display: flex;
        justify-content: flex-end;
    }
}

/* 2 Monate nebeneinander auf Desktop, jeweils 6 Monate */
.calendar-months-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 8px;
}
@media (min-width: 769px) {
    .calendar-months-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.calendar-months-grid .calendar-month {
    margin-bottom: 0;
    min-width: 0;
}

.calendar-month {
    margin-bottom: 24px;
    background: #f8fafc;
    padding: 12px;
    border: 1px solid #eef1f4;
    box-shadow: none;
    min-width: 0;
}
.calendar-months-grid .calendar-month:last-child {
    margin-bottom: 0;
}

.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 8px;
    font-weight: 600;
    color: #9aa7b2;
}

.weekday-header {
    text-align: center;
}

.weekend-header {
    color: #032f5a;
}

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

.calendar-day {
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    color: #2c3e50;
    font-size: 0.9em;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: none;
    background: transparent;
    min-height: 64px;
    min-width: 0;
    overflow: hidden;
    --calendar-current-bg: transparent;
    --calendar-before-bg: transparent;
}

.calendar-day .date {
    font-size: 0.85em;
}

.calendar-day .date-full {
    display: none;
}

.calendar-day .date-compact {
    display: none;
}

.calendar-day .date-short {
    display: inline;
}

.calendar-day-price {
    display: inline-block;
    font-size: 0.66rem;
    line-height: 1.1;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(21, 101, 192, 0.12);
    color: #0d47a1;
    white-space: nowrap;
}

.day-icons.has-price {
    position: static;
}

.day-icons.has-price .calendar-day-price {
    position: static;
    grid-column: 2;
    justify-self: center;
    transform: none;
}

.day-icons {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
}

.day-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.65em;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.08);
    opacity: 0.35;
}

.day-icon.arrival {
    background: #5b9bd5;
    grid-column: 3;
    justify-self: end;
}
.day-icon.departure {
    background: #9b7fc4;
    grid-column: 1;
    justify-self: start;
}

/* Leichte Darstellung wenn keine Anreise/Abreise möglich */
.day-icon.muted {
    background: #e0e0e0;
    color: #9e9e9e;
    opacity: 0.85;
}

.calendar-day .day-icon.arrival {
    margin-left: 0;
}

.calendar-day .day-icon.departure {
    margin-right: 0;
}

.day-icon svg {
    width: 12px;
    height: 12px;
    display: block;
}

/* Freie Tage: wie zuvor; keine Anreise/Abreise halb transparent */
.calendar-day.free { --calendar-current-bg: #c8e6c9; background: var(--calendar-current-bg); color: #1b5e20; }
.calendar-day.free.no-check-in-out { --calendar-current-bg: rgba(200, 230, 201, 0.25); background: var(--calendar-current-bg); color: rgba(27, 94, 32, 0.5); }
button.calendar-day.free.no-check-in-out:hover { background: rgba(200, 230, 201, 0.25); box-shadow: none; transform: none; }
.calendar-day.hold { --calendar-current-bg: #fff8e6; background: var(--calendar-current-bg); color: #7c5a0a; }
.calendar-day.booked, .calendar-day.blocked { --calendar-current-bg: #ffcdd2; background: var(--calendar-current-bg); color: #c62828; }
.calendar-day.before-free { --calendar-before-bg: #c8e6c9; }
.calendar-day.before-hold { --calendar-before-bg: #fff8e6; }
.calendar-day.before-booked,
.calendar-day.before-blocked { --calendar-before-bg: #ffcdd2; }
.calendar-day.day-split {
    background: linear-gradient(
        to bottom right,
        var(--calendar-before-bg) 0 calc(50% - 1px),
        rgba(255, 255, 255, 0.85) calc(50% - 1px) calc(50% + 1px),
        var(--calendar-current-bg) calc(50% + 1px) 100%
    );
}
.calendar-day.day-split.free.no-check-in-out {
    background: linear-gradient(
        to bottom right,
        var(--calendar-before-bg) 0 calc(50% - 1px),
        rgba(255, 255, 255, 0.85) calc(50% - 1px) calc(50% + 1px),
        var(--calendar-current-bg) calc(50% + 1px) 100%
    );
}
button.calendar-day.day-split.free.no-check-in-out:hover {
    background: linear-gradient(
        to bottom right,
        var(--calendar-before-bg) 0 calc(50% - 1px),
        rgba(255, 255, 255, 0.85) calc(50% - 1px) calc(50% + 1px),
        var(--calendar-current-bg) calc(50% + 1px) 100%
    );
}
.calendar-day.holiday {
    outline: 2px solid #ce93d8;
    outline-offset: -2px;
}
.calendar-day.weekend { box-shadow: 0 0 0 2px rgba(0,0,0,0.05) inset; }
.calendar-day.empty {
    background: #f5f5f5;
    box-shadow: none;
    pointer-events: none;
    color: #9e9e9e;
}
.calendar-day.selected {
    outline: 3px solid #1565c0;
    box-shadow: 0 0 0 1px #fff inset;
}
.calendar-day.in-range {
    outline: 2px dashed rgba(21, 101, 192, 0.5);
}
.calendar-day.is-today {
    outline: 2px solid #424242;
    outline-offset: -2px;
}
.calendar-day.is-today.selected {
    outline: 3px solid #1565c0;
}

.legend {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.legend-item {
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.legend-item.free { background: #c8e6c9; color: #1b5e20; }
.legend-item.no-check-in-out { background: rgba(200, 230, 201, 0.25); color: rgba(27, 94, 32, 0.5); }
.legend-item.hold { background: #fff8e6; color: #7c5a0a; }
.legend-item.booked { background: #ffcdd2; color: #c62828; }
.legend-item.holiday { background: #f3e5f5; color: #6a1b9a; }
.legend-item.last-minute { background: #e8f5e9; color: #1b5e20; }

.calendar-day-price.is-last-minute {
    background: rgba(46, 125, 50, 0.16);
    color: #1b5e20;
}

.calendar-day-price-total {
    background: #1565c0;
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    padding: 2px 7px;
    display: inline-block;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    font-size: 0.72rem;
    line-height: 1.1;
}

/* Sticky am Wrapper – Banner bleibt ueber den Tabs, nicht an .guest-tabs
   (dort overflow-x:auto bricht sticky). */
.guest-page .guest-todo-sticky {
    position: sticky;
    top: 0;
    /* Unter Bulmas .modal (z-index 40), sonst scheint die Leiste durch offene Modals. */
    z-index: 30;
    background: #f7f9fb;
    padding: 4px 0 6px;
    margin: 0 0 2px;
    box-shadow: 0 10px 14px -4px rgba(247, 249, 251, 0.98);
}
.guest-page .guest-todo-sticky [data-guest-todo-inbox] {
    margin-bottom: 8px;
}
.guest-page .guest-todo-sticky #guest-tabs-nav {
    position: static;
    top: auto;
    z-index: auto;
    background: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
}
.guest-page .guest-tabs {
    margin: 0;
    padding: 4px;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    box-shadow: 0 6px 18px rgba(3, 47, 90, 0.08);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.guest-page .guest-tabs ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
}
.guest-page .guest-tabs li {
    flex: 1 1 0;
    min-width: auto;
}
.guest-page .guest-tabs a.guest-tab-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    border: 0;
    border-radius: 9px;
    background: #ffffff;
    color: #264868;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.guest-page .guest-tabs li:not(.is-active):not(.is-disabled) a.guest-tab-link:hover {
    background: #f2f7fd;
    color: #032f5a;
}
.guest-page .guest-tabs li.is-active a.guest-tab-link {
    background: linear-gradient(135deg, #043a6f 0%, #032f5a 100%);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(3, 47, 90, 0.3);
    transform: translateY(-1px);
}
.guest-page .guest-tabs li.is-disabled a.guest-tab-link {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f5f8fc;
    color: #7a8ea5;
}
.guest-page .guest-tabs li.is-disabled a.guest-tab-link:hover {
    background: #f5f8fc;
    color: #7a8ea5;
}

/* Tab-Leiste: Symbol statt Text, sobald vier Tabs nicht mehr nebeneinander
   passen. Der Text bleibt im Markup (aria-label am Link beschriftet den Tab). */
.guest-page .guest-tabs .guest-tab-icon {
    display: none;
    font-size: 20px;
    line-height: 1;
}
.guest-page .guest-tabs .guest-tab-mark {
    font-size: 0.85em;
}
/* Offen schlaegt erledigt: ein roter Punkt mit Ausrufezeichen sagt "hier
   wartet etwas", der gruene Haken bleibt dem Erledigten vorbehalten. */
.guest-page .guest-tabs .guest-tab-mark--alert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35em;
    height: 1.35em;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    line-height: 1;
}
.guest-page .guest-tabs li.is-active .guest-tab-mark--alert { background: #fff; color: #dc2626; }
/* Wartet auf den Vermieter (gemeldete Ueberweisung): weder erledigt noch Alarm. */
.guest-page .guest-tabs .guest-tab-mark--pending { background: #f59e0b; color: #fff; }
.guest-page .guest-tabs li.is-active .guest-tab-mark--pending { background: #fff; color: #b45309; }
/* Auf dem Handy: Symbol oben, Text darunter. Vier Icons ohne Beschriftung
   waren fuer Erstbesucher nicht zu deuten. */
@media (max-width: 600px) {
    .guest-page .guest-tabs .guest-tab-icon {
        display: inline-flex;
        font-size: 20px;
    }
    .guest-page .guest-tabs .guest-tab-text {
        display: block;
        font-size: 0.68rem;
        line-height: 1.1;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }
    .guest-page .guest-tabs a.guest-tab-link {
        padding: 6px 2px 5px;
        flex-direction: column;
        gap: 2px;
        min-height: 46px;
    }
}
.apartment-tabs {
    overflow: visible;
    border-radius: 14px;
    background: #e8f0f8;
    box-shadow: inset 0 0 0 1px rgba(3, 47, 90, 0.12);
    padding: 4px;
}
.apartment-tabs ul {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    overflow: visible !important;
}
.apartment-tabs li {
    min-width: 130px;
    position: relative !important;
    overflow: visible !important;
    flex: 0 0 auto;
}
.apartment-tabs li a {
    height: 100%;
    min-height: 38px;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent;
    color: #032f5a;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.apartment-tabs li:not(.is-active) a:hover {
    background: #f6fbff;
    color: #032f5a;
}
.apartment-tabs li.is-active a {
    background: linear-gradient(135deg, #043a6f 0%, #032f5a 100%);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(3, 47, 90, 0.32);
    transform: translateY(-1px);
}

.apartment-tab-tooltip {
    position: absolute !important;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%) translateY(-4px);
    width: min(360px, 90vw);
    border: 1px solid #dbe5f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(10, 32, 56, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 999;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
    overflow: hidden;
}

.apartment-tab-item:hover .apartment-tab-tooltip,
.apartment-tab-item:focus-within .apartment-tab-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.apartment-tab-tooltip::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-top: 1px solid #dbe5f0;
    border-left: 1px solid #dbe5f0;
    transform: translateX(-50%) rotate(45deg);
}

.apartment-tab-tooltip-media img {
    display: block;
    width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.apartment-tab-tooltip-body {
    padding: 0.75rem 0.8rem 0.85rem;
}

.apartment-tab-tooltip-title {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.97rem;
    color: #143454;
}

.apartment-tab-tooltip-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.4rem;
}

.apartment-tab-tooltip-feature {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    border: 1px solid #dbe5f0;
    border-radius: 999px;
    background: #f7fafd;
    color: #2d4a67;
    padding: 0.16rem 0.46rem;
    font-size: 0.8rem;
    line-height: 1.15;
}

.apartment-tab-tooltip-feature-icon {
    font-size: 0.92rem;
    line-height: 1;
}

.apartment-tab-tooltip-feature--dimmed {
    color: #8f9aa7;
    border-color: #e3e7ed;
    background: #f5f7fa;
}

/* Immediate tooltip for dimmed/unavailable feature badges. */
[data-feature-tooltip] {
    position: relative;
}

[data-feature-tooltip]::after {
    content: attr(data-feature-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    transform: translateX(-50%);
    padding: 0.34rem 0.46rem;
    border-radius: 6px;
    background: #0d1f2d;
    color: #fff;
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 1200;
}

[data-feature-tooltip]:hover::after,
[data-feature-tooltip]:focus::after,
[data-feature-tooltip]:focus-visible::after {
    opacity: 1;
}

/* Keep equipment icon footprint stable while icon font is loading. */
.equipment-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    min-width: 1em;
    flex: 0 0 1em;
    overflow: hidden;
    vertical-align: middle;
}

html.material-symbols-pending .equipment-feature-icon {
    color: transparent !important;
    background: rgba(3, 47, 90, 0.16);
    border-radius: 999px;
    text-shadow: none !important;
}

/* Fixed overlay tooltip for disabled tabs */
.tab-tooltip-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    pointer-events: none;
}
.tab-tooltip-overlay.is-visible {
    display: block;
}
.tab-tooltip-bubble {
    position: absolute;
    width: 340px;
    max-width: 90vw;
    padding: 14px 20px;
    background: #032f5a;
    white-space: normal;
    color: #fff;
    font-size: 0.95em;
    line-height: 1.5;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,.3);
    text-align: center;
    animation: tabTooltipIn .15s ease-out;
}
.tab-tooltip-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #032f5a;
}
@keyframes tabTooltipIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.departure-card {
    padding: 16px;
}

.departure-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.departure-form {
    display: block;
}

/* Check-out-Aufgaben tragen dasselbe Kaestchen wie die Aufgaben in den anderen
   Reitern. Das native Ankreuzfeld bleibt bestehen - daran haengen Formular,
   Zustandsabgleich und die "alles erledigt"-Pruefung -, es bekommt nur das
   Aussehen der Aufgabenliste. Der doppelte Selektor uebersticht die allgemeine
   .checkbox-Regel weiter unten, die sonst Groesse und Rundung zurueckdreht. */
.departure-item input[type="checkbox"],
.departure-item.checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin: 0;
    border: 2px solid #c7d0da;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.departure-item input[type="checkbox"]:checked,
.departure-item.checkbox input[type="checkbox"]:checked {
    background: #1b7f5a;
    border-color: #1b7f5a;
}
.departure-item input[type="checkbox"]:checked::after,
.departure-item.checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.departure-item input[type="checkbox"]:hover:not(:disabled),
.departure-item.checkbox input[type="checkbox"]:hover:not(:disabled) {
    border-color: #1b7f5a;
}
.departure-item input[type="checkbox"]:disabled,
.departure-item.checkbox input[type="checkbox"]:disabled { cursor: default; opacity: 0.55; }

/* Gastportal: jedes Ankreuzfeld sieht aus wie das Haekchen-Feld der
   Aufgabenlisten (.ops-check) - 26px, eckig, gruen wenn gesetzt. Gilt fuer die
   nativen Kaestchen (Endreinigung, Mitbringen-Liste, Vorratshilfe,
   Thermostat-Automatik) genauso wie fuer die Abreise-Checkliste oben. Der
   unsichtbare Input der Karma-Vorschlagskarten bleibt ausgenommen, dort
   zeichnet .karma-suggestion-card-check das Kaestchen. */
.guest-page input[type="checkbox"]:not(.karma-suggestion-card-input) {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin: 0;
    border: 2px solid #c7d0da;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    vertical-align: middle;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.guest-page input[type="checkbox"]:not(.karma-suggestion-card-input):checked {
    background: #1b7f5a;
    border-color: #1b7f5a;
}
.guest-page input[type="checkbox"]:not(.karma-suggestion-card-input):checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.guest-page input[type="checkbox"]:not(.karma-suggestion-card-input):hover:not(:disabled) {
    border-color: #1b7f5a;
}
.guest-page input[type="checkbox"]:not(.karma-suggestion-card-input):focus-visible {
    outline: 2px solid #5a9fd4;
    outline-offset: 2px;
}
.guest-page input[type="checkbox"]:not(.karma-suggestion-card-input):disabled {
    cursor: default;
    opacity: 0.55;
}
.guest-page .checkbox input[type="checkbox"] {
    margin-right: 8px;
}

.departure-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.departure-title {
    font-weight: 600;
}

.departure-desc {
    font-size: 0.9em;
    color: #52626f;
}

/* departure-btn-large removed, buttons use standard guest-btn sizes */

.departure-feedback {
    margin-top: 16px;
}

.rating-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 6px;
}

.rating-stars input {
    display: none;
}

.rating-stars label {
    font-size: 1.4rem;
    color: #c7d2e2;
    cursor: pointer;
    transition: transform 0.1s ease, color 0.15s ease;
}

.rating-stars label:hover,
.rating-stars label:hover ~ label {
    color: #ffb400;
}

.rating-stars input:checked ~ label {
    color: #ffb400;
}

.rating-stars label:active {
    transform: scale(0.95);
}

/* Bewertung im Aufgaben-Assistenten: grosse, luftige Sterne unter der Beschriftung (Tippziel >= 44px). */
#guest-todo-wizard .rating-stars {
    display: flex;
    justify-content: flex-end;
    width: fit-content;
    gap: 14px;
    margin-top: .35rem;
}
#guest-todo-wizard .rating-stars label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 2.6rem;
    line-height: 1;
}
/* Farben mit derselben Staerke wie die Groesse: eine Label-Regel des Portals faerbte die leeren Sterne am Handy schwarz. */
#guest-todo-wizard .rating-stars label { color: #c7d2e2; }
#guest-todo-wizard .rating-stars label:hover,
#guest-todo-wizard .rating-stars label:hover ~ label,
#guest-todo-wizard .rating-stars input:checked ~ label { color: #ffb400; }
@media (max-width: 480px) {
    #guest-todo-wizard .rating-stars { gap: 8px; }
    #guest-todo-wizard .rating-stars label { font-size: 2.3rem; }
}

.cost-delete-form {
    display: inline;
}

.cost-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #d9534f;
    background: #fff;
    color: #d9534f;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s;
}

.cost-delete-btn:hover {
    background: #d9534f;
    color: #fff;
}

.departure-actions {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

/* legacy .card override – Basisregeln stehen jetzt im Unified-UI-Block am Anfang */
.card.card--legacy-spaced {
    padding: 12px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.checkbox {
    display: block;
    margin-bottom: 6px;
}

.checkbox input[type="checkbox"] {
    accent-color: #1b4f8a;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(27, 79, 138, 0.25);
}

.select select,
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 10px;
    border: 1px solid #c7d2e2;
    padding: 0.5rem 2.2rem 0.5rem 0.9rem;
    min-height: 38px;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, transparent 50%, #3f566b 50%),
        linear-gradient(135deg, #3f566b 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    box-shadow: 0 1px 0 rgba(10, 10, 10, 0.04);
}

/* Hide Bulma's default ::after arrow – we use background-image on <select> instead */
.select::after {
    display: none !important;
}

/* Match Bulma text inputs: same height/padding as .input (see --bulma-control-*) */
.admin select:not([multiple]),
.admin .select:not(.is-multiple) select {
    border-radius: 6px;
    min-height: 0;
    height: var(--bulma-control-height);
    padding: var(--bulma-control-padding-vertical) 2.2rem var(--bulma-control-padding-vertical)
        var(--bulma-control-padding-horizontal);
    line-height: var(--bulma-control-line-height);
    font-weight: 600;
    color: #032f5a;
    box-sizing: border-box;
}

.admin .select select[multiple],
.admin select[multiple] {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
}

/* Match Bulma text inputs, same as .admin selects above */
.guest-page select:not([multiple]),
.guest-page .select:not(.is-multiple) select {
    border-radius: 6px;
    min-height: 0;
    height: var(--bulma-control-height);
    padding: var(--bulma-control-padding-vertical) 2.2rem var(--bulma-control-padding-vertical)
        var(--bulma-control-padding-horizontal);
    line-height: var(--bulma-control-line-height);
    color: #1b1b1b;
    box-shadow: none;
    box-sizing: border-box;
}

.guest-page .select select[multiple],
.guest-page select[multiple] {
    border-radius: 6px;
    box-shadow: none;
}

.admin .inline,
.admin .is-inline {
    display: inline-flex;
    align-items: center;
}

.qr-section {
    margin-top: 20px;
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    text-align: center;
}

.qr-section img {
    display: block;
    margin: 8px auto 0;
}

.guest-qr-url {
    display: block;
    margin: 12px 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    word-break: break-all;
    color: #2b6fa3;
}

.holiday-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.holiday-controls-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #52626f;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
    white-space: nowrap;
}

.range-hint {
    margin-top: 12px;
    color: #52626f;
}

.fine-print {
    font-size: 0.9em;
    color: #52626f;
    margin-bottom: 12px;
}

.fine-print-line {
    margin-top: 10px;
    margin-bottom: 0;
    white-space: normal;
}

.friends-code-field {
    display: none;
}

.request-submit-row {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.request-options-card,
.request-accommodation-card,
.guest-options-card {
    background: #fff;
    border: 1px solid #e0e4ea;
    border-radius: 14px;
}
.request-options-card .card-content {
    padding: 12px 14px;
}
.request-accommodation-card {
    margin-bottom: 10px;
}
.request-accommodation-title {
    margin-top: 28px;
}
.request-accommodation-card .card-content {
    padding: 10px 14px;
}
.request-accommodation-card strong {
    display: block;
    font-size: 1.05rem;
    color: #032f5a;
}
.request-option-item,
.guest-option-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    border-radius: 8px;
}
.request-option-item {
    padding: 8px 6px;
}
.request-option-item-static {
    cursor: default;
    padding-left: 32px;
}
.request-option-item-onsite {
    border-top: 1px solid #eef1f4;
    margin-top: 4px;
    padding-top: 10px;
    color: #6b7280;
}
.request-option-item input[type="checkbox"],
.guest-option-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: #032f5a;
}
.request-option-label {
    flex: 1;
    min-width: 0;
}
.request-option-title-row,
.guest-option-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.request-option-title-row {
    justify-content: space-between;
}
.request-option-title-row strong,
.guest-option-title-row strong {
    color: #032f5a;
}
.request-option-item-onsite .request-option-title-row strong {
    color: #6b7280;
}
.request-option-title-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.request-option-onsite-badge {
    display: inline-block;
    background: #eef0f3;
    color: #5f6b7a;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.request-option-billing-badge {
    display: inline-block;
    background: #e8f1fb;
    color: #032f5a;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.request-option-price-tag,
.guest-option-price-tag {
    display: inline-block;
    background: #e8f1fb;
    color: #032f5a;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.request-option-item-onsite .request-option-price-tag {
    background: #eef0f3;
    color: #5f6b7a;
}
.request-option-item-onsite .request-option-billing-badge {
    background: #eef0f3;
    color: #5f6b7a;
}
.request-option-item-onsite .request-option-desc {
    color: #8a94a3;
}
.guest-option-price-tag {
    margin-left: 0;
    justify-self: end;
}
.request-option-desc,
.guest-option-desc {
    display: block;
    font-size: 0.82rem;
    color: #6b7a8d;
    font-weight: 400;
    line-height: 1.3;
}
.request-option-desc {
    margin-top: 2px;
}


#request-modal .modal-card {
    width: 90vw;
    max-width: 720px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#request-modal .modal-card-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

@media (max-width: 768px) {
    #request-modal .modal-card {
        width: 96vw;
        max-height: 94vh;
        margin: 8px;
    }
}

.seasons {
    margin-top: 24px;
}

.activities-panel,
.amenities-list {
    position: relative;
    background: #fff;
    padding: 16px;
}

.free-terms-box,
.map-section {
    position: relative;
    padding: 16px;
}

/* Auswahl rechts oben in der Card, Inhalt (Text/Karte) darunter – kein Overlay */
.map-apt-badges-in-card {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.map-apt-badges-in-card .map-apt-badges {
    padding: 8px 12px;
    margin: 0;
}

.map-apt-badges-in-card .map-apt-badges-label {
    margin-right: 8px;
}

.activities-panel,
.amenities-list,
.gallery-item {
    box-shadow: 0 10px 22px rgba(0,0,0,0.1);
}

.section-intro {
    margin-bottom: 12px;
}

.section-actions {
    margin-bottom: 16px;
}

.section-actions .button,
.map-section .button {
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: max-content;
}

.map-external-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 12px;
    justify-content: center;
}

.map-external-buttons .button {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

.map-external-buttons .map-google-link {
    border-color: #b5b5b5;
    color: #4a4a4a;
}

.map-external-buttons .map-google-link:hover {
    border-color: #363636;
    color: #363636;
}

.map-external-buttons .map-to-phone-btn {
    border-color: #8a8a8a;
    color: #2f2f2f;
    background-color: #ffffff;
}

.map-external-buttons .map-to-phone-btn:hover,
.map-external-buttons .map-to-phone-btn:focus-visible {
    border-color: #4a4a4a;
    color: #1f1f1f;
    background-color: #f5f5f5;
}

.seasons-price-disclaimer {
    font-size: 0.8rem;
    font-weight: 700;
    color: #4a5568;
    margin-top: 12px;
    margin-bottom: 0;
}

.guest-options-title {
    margin-top: 24px;
}

.table td, .table th {
    border-color: transparent;
}

/* Options card – same layout as supply-help (Einkaufsliste), white bg + red badges */
.guest-options-card {
    text-align: left;
}
.guest-option-item {
    margin-bottom: 4px;
    padding: 6px 10px;
}
.guest-option-item:last-child {
    margin-bottom: 0;
}
.guest-option-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    flex: 1;
    font-size: 0.95rem;
}
.guest-option-label > span,
.guest-option-label-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: center;
    flex: 1;
    min-width: 0;
    width: 100%;
}
.guest-option-multi {
    justify-content: space-between;
    gap: 10px;
}
.guest-option-label-form {
    flex: 1;
    min-width: 0;
    width: 100%;
}
.guest-option-label-text {
    flex: 1;
    font-size: 0.95rem;
}
.guest-option-title-row {
    gap: 10px;
}
.guest-option-multi .guest-option-label-text > .guest-option-price-tag {
    grid-column: 2;
    justify-self: end;
}
.guest-option-plusminus-controls {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.guest-qty-btn-inline {
    width: 22px;
    height: 22px;
    font-size: 0.9rem;
}
.guest-qty-value-inline {
    min-width: 16px;
    font-size: 0.88rem;
}
.guest-option-hidden-action-form {
    display: none;
}
.guest-option-desc {
    margin-top: 1px;
    grid-column: 1 / -1;
}
.guest-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid #032f5a;
    background: #fff;
    color: #032f5a;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.guest-qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.guest-qty-btn:hover:not(:disabled) {
    background: #032f5a;
    color: #fff;
}
.guest-qty-value {
    font-weight: 700;
    font-size: 0.95rem;
    min-width: 18px;
    text-align: center;
}

@media (max-width: 700px) {

    /* All guest buttons full width on mobile */
    .guest-page .button {
        width: 100%;
        box-sizing: border-box;
    }

    .guest-page .modal-card-foot {
        flex-direction: column;
        align-items: stretch;
    }
    .guest-page .modal-card-foot > * {
        width: 100%;
    }
    .guest-page .modal-card-foot form.inline {
        width: 100%;
    }

    .guest-page .guest-todo-inbox__actions {
        flex: 1 1 100%;
        margin-left: 0;
        justify-content: stretch;
    }

    .guest-page .guest-todo-inbox__show {
        width: 100%;
    }

    .guest-page .modal {
        padding: 8px;
    }
    .guest-page .modal-card {
        margin: 0;
        max-width: 100%;
    }
}

/* Info cards grid */
.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-flow: dense;
    gap: 16px;
    margin-top: 16px;
}

.guest-page .info-cards {
    align-items: start;
    /* Lücken neben 2-zeiligen Karten schließen (row + dense) */
    grid-auto-flow: row dense;
    container-type: inline-size;
    container-name: guest-infocards;
    margin-top: 8px;
}

.guest-page .guest-card-order-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0 4px;
    padding: 10px 12px;
    border: 1px solid #d8e2ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(3, 47, 90, 0.08);
    overflow-x: auto;
    white-space: nowrap;
}

.guest-page .guest-card-order-toolbar__head,
.guest-page .guest-card-order-toolbar__controls {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 10px;
}

.guest-page .guest-card-order-toolbar__head {
    justify-content: flex-start;
    min-width: 0;
}

.guest-page .guest-card-order-toolbar__controls {
    flex: 0 1 auto;
    justify-content: flex-end;
    padding-left: 10px;
    border-left: 1px solid #e2e8f0;
}

.guest-page .guest-card-order-toolbar__title,
.guest-page .guest-card-order-toolbar__control-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #032f5a;
    font-size: 0.88rem;
    font-weight: 700;
}

.guest-page .guest-card-order-toolbar__title .icon,
.guest-page .guest-card-order-toggle .button .material-symbols-rounded {
    font-size: 1.05rem;
    line-height: 1;
}

.guest-page .guest-card-order-toolbar__status {
    align-self: center;
    flex: 0 0 auto;
    margin: 0;
    color: #607086;
    font-size: 0.78rem;
    text-align: left;
}

.guest-page .guest-card-order-toolbar__status.is-saving {
    color: #8a6d1f;
}

.guest-page .guest-card-order-toolbar__status.is-saved {
    color: #1b7f5a;
}

.guest-page .guest-card-order-toolbar__status.is-error {
    color: #b4232f;
}

.guest-page .info-cards[data-guest-card-sortable="1"] > [data-guest-card-key] {
    position: relative;
}

.guest-page .guest-card-drag-handle {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 12;
    display: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(3, 47, 90, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #315a82;
    box-shadow: 0 3px 10px rgba(3, 47, 90, 0.14);
    cursor: grab;
    touch-action: none;
}

.guest-page .guest-card-edit-handle {
    position: absolute;
    top: 6px;
    right: 40px;
    z-index: 12;
    display: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(3, 47, 90, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #315a82;
    box-shadow: 0 3px 10px rgba(3, 47, 90, 0.14);
    cursor: pointer;
}

.guest-page[data-guest-card-order-editing="1"] .guest-card-drag-handle,
.guest-page[data-guest-card-order-editing="1"] .guest-card-edit-handle {
    display: inline-grid;
}

.guest-page .guest-card-drag-handle:active {
    cursor: grabbing;
}

.guest-page .guest-card-drag-handle .material-symbols-rounded,
.guest-page .guest-card-edit-handle .material-symbols-rounded {
    font-size: 1.1rem;
    line-height: 1;
}

.guest-page .info-cards[data-guest-card-sortable="1"] > [data-guest-card-key].is-guest-card-dragging {
    opacity: 0.86;
    outline: 2px dashed var(--brand-primary, #3273dc);
    outline-offset: -4px;
    box-shadow: 0 16px 36px rgba(3, 47, 90, 0.22);
    cursor: grabbing;
}

.guest-page .guest-card-drag-placeholder {
    min-width: 0;
    border: 2px dashed rgba(3, 47, 90, 0.24);
    border-radius: 10px;
    background: rgba(3, 47, 90, 0.04);
}

.guest-page .guest-card-drag-placeholder--separator {
    grid-column: 1 / -1;
    min-height: 32px;
    border-radius: 999px;
}

.guest-page .info-cards[data-guest-card-sortable="1"] > .info-card-separator[data-guest-card-key] {
    height: 32px;
    margin: 4px 0;
    background: transparent;
}

.guest-page .info-cards[data-guest-card-sortable="1"] > .info-card-separator[data-guest-card-key]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 42px;
    top: 50%;
    height: 1px;
    background: #dfe4ea;
    border-radius: 1px;
    transform: translateY(-50%);
}

.guest-page .info-cards[data-guest-card-sortable="1"] > .info-card-separator[data-guest-card-key] .guest-card-drag-handle {
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
}

.guest-page .info-cards[data-guest-card-sortable="1"] > .info-card-separator[data-guest-card-key] .guest-card-edit-handle {
    top: 50%;
    right: 36px;
    transform: translateY(-50%);
}

.guest-page .guest-card-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.guest-page .guest-card-type-choice {
    justify-content: flex-start;
    min-height: 44px;
}

.guest-page .guest-card-editor-modal.is-active > .modal-card {
    display: flex;
    flex-direction: column;
    width: min(760px, calc(100vw - 24px));
    max-height: min(92vh, 900px);
    overflow: hidden;
}

.guest-page .guest-card-icon-modal .modal-card {
    width: min(860px, calc(100vw - 24px));
}

/* "Karte konfigurieren" haengt sein Kopf-/Körper-/Fussgeruest in ein <form>.
   Ohne diese Regel ist das Formular ein gewoehnlicher Block: der Koerper
   erfaehrt nie, wieviel Hoehe ihm bleibt, waechst ueber die Karte hinaus und
   bekommt deshalb keine Bildlaufleiste. Als Flex-Spalte gibt es die Hoehe der
   Karte an seine Kinder weiter. overflow:hidden haelt den Fuss (Speichern)
   im sichtbaren Bereich, auch wenn Sensor/Schalter-Listen lang sind. */
.guest-page .guest-card-editor-modal.is-active > .modal-card > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.guest-page .guest-card-editor-modal .modal-card-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

.guest-page .guest-card-editor-modal .modal-card-foot {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
}

.guest-page .guest-card-icon-modal .modal-card-body {
    max-height: min(72vh, 760px);
    overflow: auto;
}

.guest-page .guest-card-editor-modal .select:not(.is-multiple) select,
.guest-page .guest-card-editor-modal select:not([multiple]),
.guest-page .guest-card-editor-modal .input,
.guest-page .guest-card-editor-modal .textarea,
.guest-page .guest-card-icon-modal .input {
    min-height: 34px;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.25;
    background-color: #fff;
    box-shadow: none;
}

.guest-page .guest-card-editor-modal .select:not(.is-multiple) select,
.guest-page .guest-card-editor-modal select:not([multiple]) {
    padding-right: 2rem;
}

.guest-page .guest-card-editor-modal .select.is-multiple select,
.guest-page .guest-card-editor-modal select[multiple] {
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.25;
    background-color: #fff;
    box-shadow: none;
}

.guest-page .guest-card-icon-picker-trigger {
    justify-content: flex-start;
    width: 100%;
    min-height: 38px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
}

.guest-page .guest-card-icon-picker-trigger .material-symbols-rounded {
    font-size: 1.25rem;
}

.guest-page .guest-card-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 8px;
}

.guest-page .guest-card-icon-choice {
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    gap: 5px;
    min-height: 74px;
    padding: 9px 6px;
    border: 1px solid #d8e2ee;
    border-radius: 8px;
    background: #fff;
    color: #243b53;
    cursor: pointer;
}

.guest-page .guest-card-icon-choice:hover,
.guest-page .guest-card-icon-choice.is-active {
    border-color: #5a9fd4;
    background: #eef6fd;
}

.guest-page .guest-card-icon-choice .material-symbols-rounded {
    font-size: 1.55rem;
    line-height: 1;
}

.guest-page .guest-card-icon-choice__name {
    max-width: 100%;
    overflow: hidden;
    color: #52677f;
    font-size: 0.68rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Symbolauswahl (Karten und Bereiche, 15.09.2026): deutscher Begriff ueber dem Symbolnamen,
   Abschnitte "Haeufig genutzt"/"Alle Symbole", "Kein Symbol" und "Eigenes Symbol". */
.guest-page .guest-card-icon-choice {
    min-width: 0;
}
.guest-page .guest-card-icon-choice__label {
    max-width: 100%;
    overflow: hidden;
    color: #243b53;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-page .guest-card-icon-choice__label + .guest-card-icon-choice__name {
    margin-top: -3px;
}
.guest-page .guest-card-icon-choice--custom {
    border-style: dashed;
}
.guest-page .guest-card-icon-choice--none .material-symbols-rounded {
    color: #9aabbd;
}
.guest-page .guest-card-icon-grid__heading {
    grid-column: 1 / -1;
    margin: 8px 0 -2px;
    color: #52677f;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.guest-page .guest-card-icon-grid__heading:first-child {
    margin-top: 0;
}
.guest-page .guest-card-icon-grid__empty {
    grid-column: 1 / -1;
    margin: 0;
    color: #52677f;
    font-size: 0.85rem;
    line-height: 1.4;
}
.guest-page .guest-card-icon-picker-trigger {
    max-width: 100%;
    overflow: hidden;
}
.guest-page .guest-card-icon-picker-trigger__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-page .guest-card-icon-picker-trigger .guest-card-icon-picker-trigger__more {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 8px;
    color: #607086;
    font-size: 1.15rem;
}
.guest-page .guest-card-icon-picker-trigger.is-empty [data-guest-card-icon-preview],
.guest-page .guest-card-icon-picker-trigger.is-empty .guest-card-icon-picker-trigger__text {
    color: #7b8ca1;
}

.guest-page .guest-card-addon-editor {
    margin: 0 0 0.9rem;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.guest-page .guest-card-addon-row {
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.guest-page .guest-card-addon-row:last-child {
    border-bottom: 0;
}

.guest-page .guest-card-device-select,
.guest-page .guest-card-device-select select {
    width: 100%;
}

.guest-page .guest-card-device-select select {
    min-height: 10rem;
}

.guest-page[data-guest-card-order-layout="mobile"] .info-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: min(100%, 430px);
}

.guest-page[data-guest-card-order-layout="mobile"] .guest-header,
.guest-page[data-guest-card-order-layout="mobile"] .guest-todo-sticky,
.guest-page[data-guest-card-order-layout="mobile"] #guest-tabs-nav,
.guest-page[data-guest-card-order-layout="mobile"] [id$="-tab-content"] {
    width: min(100%, 430px);
    margin-left: auto;
    margin-right: auto;
}

.guest-page[data-guest-card-order-layout="mobile"] .guest-header {
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
}

.guest-page[data-guest-card-order-layout="mobile"] .guest-header-titles {
    grid-column: 1 / 2;
}

.guest-page[data-guest-card-order-layout="mobile"] .guest-header-right {
    grid-column: 2 / 3;
}

.guest-page[data-guest-card-order-layout="mobile"] .guest-date-box {
    display: none;
}

.guest-page[data-guest-card-order-layout="mobile"] .guest-tabs {
    padding: 3px;
}

.guest-page[data-guest-card-order-layout="mobile"] .guest-tabs ul {
    width: max-content;
}

.guest-page[data-guest-card-order-layout="mobile"] .guest-tabs li {
    flex: 0 0 auto;
    min-width: 116px;
}

.guest-page[data-guest-card-order-layout="mobile"] .guest-tabs a.guest-tab-link {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 0.86rem;
}

/* Symbolmodus der Tab-Leiste. Muss nach den Regeln der Karten-Editor-
   Mobilansicht stehen, die sonst 116 px Textbreite je Tab erzwingt. Die
   Mobilansicht stellt die Seite auf Telefonbreite - dort gilt derselbe Modus. */
@media (max-width: 600px) {
    .guest-page .guest-tabs li,
    .guest-page[data-guest-card-order-layout="mobile"] .guest-tabs li {
        flex: 1 1 0;
        min-width: 0;
    }
    .guest-page[data-guest-card-order-layout="mobile"] .guest-tabs ul {
        width: 100%;
    }
}
.guest-page[data-guest-card-order-layout="mobile"] .guest-tabs .guest-tab-icon {
    display: inline-flex;
}
.guest-page[data-guest-card-order-layout="mobile"] .guest-tabs .guest-tab-text {
    display: none;
}
.guest-page[data-guest-card-order-layout="mobile"] .guest-tabs li {
    flex: 1 1 0;
    min-width: 0;
}
.guest-page[data-guest-card-order-layout="mobile"] .guest-tabs ul {
    width: 100%;
}

.guest-page[data-guest-card-order-layout="mobile"] .karma-portal-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem 0.75rem;
    align-items: center;
}

.guest-page[data-guest-card-order-layout="mobile"] .karma-meter-block {
    grid-column: 1 / -1;
    max-width: none;
}

.guest-page[data-guest-card-order-layout="mobile"] .karma-portal-balance {
    justify-content: flex-start;
}

.guest-page[data-guest-card-order-layout="mobile"] .karma-portal-actions {
    justify-content: flex-end;
}

.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card {
    gap: 5px;
    padding: 10px 4px;
    border-radius: 10px;
}

.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card .info-card-label {
    font-size: 0.72rem;
    line-height: 1.12;
    -webkit-line-clamp: 2;
}

/* Ein-Zellen-Kacheln im Gäste-Portal: gleiche (quadratische) Grundfläche */
.guest-page .info-cards > a.info-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    height: auto; /* nicht Zeilenhöhe von Nachbar-Karten mit span 2 mitstrecken */
    overflow: hidden;
    align-self: start;
}
.guest-page .info-cards > a.info-card .info-card-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.2;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.info-card-separator {
    grid-column: 1 / -1;
    height: 1px;
    background: #dfe4ea;
    border-radius: 1px;
    margin: 16px 0 6px;
}

.info-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e0e5ec;
    border-radius: 14px;
    padding: 24px 12px;
    text-decoration: none;
    color: #1b1b1b;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
    cursor: pointer;
    text-align: center;
}

.info-card:hover {
    box-shadow: 0 6px 24px rgba(3, 47, 90, 0.13);
    border-color: #032f5a;
    transform: translateY(-2px);
}

.info-card:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(3, 47, 90, 0.10);
}

.info-card-icon {
    font-size: 2.2rem;
    line-height: 1;
}
.info-card-icon .material-symbols-rounded {
    font-size: 1em;
    vertical-align: middle;
}
.mdi-hex {
    font-family: "Material Design Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.modal-card-title .mdi-hex {
    margin-right: 6px;
}
.modal-card-title .material-symbols-rounded {
    margin-right: 6px;
    vertical-align: middle;
}

.info-card-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #032f5a;
}

/* Info-card dialogs: fixed 80% viewport size */
.modal[id^="infocard-"] .modal-card {
    width: 80vw;
    max-width: 80vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
}
.modal[id^="infocard-"] .modal-card-body {
    flex: 1;
    overflow: auto;
}
.modal[id^="infocard-"] .modal-card-body.infocard-modal-body--split,
.info-lightbox-body.infocard-modal-body--split {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.infocard-modal-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
.infocard-modal-aside {
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(42dvh, 46%);
    overflow: auto;
    padding: 12px 16px;
    background: #f6f9fc;
    border-bottom: 1px solid #e0e5ec;
}
.infocard-modal-scroll {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 20px;
}
.info-lightbox-body.infocard-modal-body--split .infocard-modal-aside {
    padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 56px));
}
@media (min-width: 769px) {
    .infocard-modal-layout {
        flex-direction: row-reverse;
    }
    .infocard-modal-aside {
        flex: 0 0 min(22.5rem, 38%);
        max-height: none;
        border-bottom: none;
        border-left: 1px solid #e0e5ec;
    }
    .info-lightbox-body.infocard-modal-body--split .infocard-modal-aside {
        padding-top: 16px;
    }
}

.infocard-md-preamble {
    margin-bottom: 0.85rem;
}

.modal[id^="infocard-"] .modal-card-body:has(> .infocard-md-tabs),
.modal[id^="infocard-"] .infocard-modal-scroll:has(> .infocard-md-tabs),
.info-lightbox-body:has(> .infocard-md-tabs),
.info-lightbox-body .infocard-modal-scroll:has(> .infocard-md-tabs) {
    padding-top: 0;
}

.infocard-md-tabs .tabs.infocard-content-tabs,
.infocard-modal-tabs-bar .tabs.infocard-content-tabs {
    margin: 0;
}

.infocard-md-tabs .tabs.infocard-content-tabs ul,
.infocard-modal-tabs-bar .tabs.infocard-content-tabs ul {
    margin: 0;
    border-bottom: none;
    flex-wrap: wrap;
    gap: 6px;
}

.infocard-md-tabs .tabs.infocard-content-tabs a,
.infocard-modal-tabs-bar .tabs.infocard-content-tabs a {
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

.modal[id^="infocard-"] .infocard-md-tabs-nav,
.info-lightbox-body .infocard-md-tabs-nav {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    margin: 0 -20px 0.85rem;
    padding: 12px 20px 10px;
    border-bottom: 1px solid #dbdbdb;
}

/* Popup mit Tabs UND Zusatzoptionen: Reiter-Leiste ueber voller Breite oberhalb von Optionen + Text */
.infocard-modal-tabbed {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
.infocard-modal-tabbed > .infocard-modal-layout {
    height: auto;
}
/* Optionen-Block nicht zugunsten des Textes stauchen; max-height (Handy) bleibt die Grenze */
.infocard-modal-tabbed .infocard-modal-aside {
    flex-shrink: 0;
}
.infocard-modal-tabs-bar {
    flex: 0 0 auto;
    padding: 12px 16px 10px;
    background: #fff;
    border-bottom: 1px solid #dbdbdb;
}
.modal[id^="infocard-"] .infocard-modal-tabs-bar .infocard-md-tabs-nav,
.info-lightbox-body .infocard-modal-tabs-bar .infocard-md-tabs-nav {
    position: static;
    margin: 0;
    padding: 0;
    border-bottom: none;
}
.infocard-modal-tabs-bar .tabs.infocard-content-tabs {
    overflow: visible;
}
.infocard-modal-tabs-bar .tabs.infocard-content-tabs ul {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
}
.infocard-modal-tabs-bar .tabs.infocard-content-tabs li {
    flex: 1 1 auto;
    min-width: 0;
}
.infocard-modal-tabs-bar .tabs.infocard-content-tabs a {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
}
/* Text-Spalte ohne eigene Tab-Leiste behaelt ihr normales Padding oben */
.modal[id^="infocard-"] .infocard-modal-scroll:has(> .infocard-md-tabs--detached),
.info-lightbox-body .infocard-modal-scroll:has(> .infocard-md-tabs--detached) {
    padding-top: 20px;
}
/* Lightbox: Platz fuer den Schliessen-Button oben wandert von den Optionen in die Tab-Leiste */
.info-lightbox-body.infocard-modal-body--split .infocard-modal-tabs-bar {
    padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 56px));
}
.info-lightbox-body.infocard-modal-body--split .infocard-modal-tabbed .infocard-modal-aside {
    padding-top: 12px;
}
@media (min-width: 769px) {
    .info-lightbox-body.infocard-modal-body--split .infocard-modal-tabs-bar {
        padding-top: 16px;
        padding-right: 64px;
    }
    .info-lightbox-body.infocard-modal-body--split .infocard-modal-tabbed .infocard-modal-aside {
        padding-top: 16px;
    }
}

.modal[id^="infocard-"] .modal-card-body img.infocard-modal-hero-img {
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0 auto 16px;
    display: block;
}
/* Mit Markdown/HTML: natürliche Größe, nicht auf Dialogbreite hochskalieren */
.modal[id^="infocard-"] .modal-card-body img.infocard-modal-hero-img--with-text {
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Prozentuales max-height am img greift nicht: die Markdown-Wrapper
   haben height:auto. Deshalb vh, passend zur 80vh-Karte inkl. Kopf/Tabs. */
.modal[id^="infocard-"] .modal-card-body img {
    max-height: min(52vh, calc(80vh - 12rem));
    max-height: min(52dvh, calc(80dvh - 12rem));
    object-fit: contain;
}

/* Infokarten-Zusatzoptionen: gleiches Block-Layout wie „Zusatzoptionen hinzubuchen“ (Tab Buchung) */
.modal-card-body .infocard-addon-panel-wrap,
.info-lightbox-body .infocard-addon-panel-wrap {
    width: 100%;
    max-width: none;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    box-sizing: border-box;
}
.info-lightbox-body .infocard-pshop-admin-list {
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding-right: 4px;
}

#guest-admin-fill-levels-modal .infocard-pshop-admin-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

/* Füllstände-Modal: fast volle Fläche, Karte wächst mit dem Viewport */
#guest-admin-fill-levels-modal .modal-card.guest-admin-fill-levels-card {
    z-index: 1;
    position: relative;
    width: min(100vw - 1.5rem, 64rem);
    max-width: calc(100vw - 1.5rem);
    height: min(92svh, 92vh, calc(100dvh - 1.5rem));
    max-height: min(92svh, 92vh, calc(100dvh - 1.5rem));
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    overflow: hidden;
}

#guest-admin-fill-levels-modal .modal-background {
    z-index: 0;
}

#guest-admin-fill-levels-modal .guest-admin-fill-levels-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* Eine vertikale Scrollbar: der Body füllt die Karte und scrollt; Liste ohne eigene max-height */
#guest-admin-fill-levels-modal .guest-admin-fill-levels-body.modal-card-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
}

/* Schieberegler: 1 Spalte schmal, 2 Spalten ab ca. 600px */
#guest-admin-fill-levels-modal .guest-admin-fill-levels-sliders,
#guest-karma-supplies-modal .guest-admin-fill-levels-sliders {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 1.25rem;
    align-items: start;
}
@media (min-width: 600px) {
    #guest-admin-fill-levels-modal .guest-admin-fill-levels-sliders,
    #guest-karma-supplies-modal .guest-admin-fill-levels-sliders {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Admin Füllstände: Schieberegler-Blöcke in der Grid-Zelle (ohne pshop-Zwischenschritt) */
.guest-page #guest-admin-fill-levels-modal .guest-admin-fill-levels-form .pshop-modal-grid {
    display: block;
}
.guest-page #guest-admin-fill-levels-modal .guest-admin-supply-row {
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px 12px 12px;
    margin-bottom: 0;
    min-width: 0;
}
.guest-page #guest-admin-fill-levels-modal .guest-admin-supply-row__head,
.guest-page #guest-karma-supplies-modal .guest-admin-supply-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-bottom: 8px;
}
.guest-page #guest-admin-fill-levels-modal .guest-admin-supply-row__label,
.guest-page #guest-karma-supplies-modal .guest-admin-supply-row__label {
    font-weight: 600;
    color: #032f5a;
    flex: 1;
    min-width: 0;
}
.guest-page #guest-admin-fill-levels-modal .guest-admin-supply-row__slider,
.guest-page #guest-karma-supplies-modal .guest-admin-supply-row__slider {
    max-width: 100%;
    margin-top: 4px;
}
.guest-page #guest-admin-fill-levels-modal .guest-admin-fill-levels-form .pshop-modal--single,
.guest-page #guest-admin-fill-levels-modal .guest-admin-fill-levels-form .pshop-modal-panel--input {
    display: block;
}
.modal-card-body .infocard-modal-purchase-category,
.info-lightbox-body .infocard-modal-purchase-category {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.guest-page .modal-card-body .infocard-addon-options--pshop-tint.card,
.guest-page .info-lightbox-body .infocard-addon-options--pshop-tint.card {
    background: linear-gradient(135deg, rgba(232, 244, 253, 0.92) 0%, rgba(240, 247, 255, 0.92) 100%);
    border-color: #d0e3f0;
}
.modal-card-body .infocard-addon-action-btn,
.info-lightbox-body .infocard-addon-action-btn {
    width: auto;
    min-width: 6.5rem;
    padding: 6px 12px;
}
.modal-card-body .infocard-addon-booking-layout .infocard-addon-qty-btn,
.info-lightbox-body .infocard-addon-booking-layout .infocard-addon-qty-btn {
    border-radius: 8px;
    width: auto;
    min-width: 26px;
    height: 26px;
    padding: 0 5px;
}
.modal-card-body .infocard-addon-qty-btn--take,
.info-lightbox-body .infocard-addon-qty-btn--take {
    border: none !important;
    background: #fce4d6 !important;
    color: #b5451a !important;
}
.modal-card-body .infocard-addon-qty-btn--take:hover:not(:disabled),
.info-lightbox-body .infocard-addon-qty-btn--take:hover:not(:disabled) {
    background: #f8d4bf !important;
    color: #b5451a !important;
}
.modal-card-body .infocard-addon-qty-btn--add,
.info-lightbox-body .infocard-addon-qty-btn--add {
    border: none !important;
    background: #d4edda !important;
    color: #1a6b2e !important;
}
.modal-card-body .infocard-addon-qty-btn--add:hover:not(:disabled),
.info-lightbox-body .infocard-addon-qty-btn--add:hover:not(:disabled) {
    background: #c1e6ca !important;
    color: #1a6b2e !important;
}
#guest-qr-generic-purchase-modal .guest-qr-purchase-modal-body .pshop-category-card {
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
}
.guest-page .infocard-addon-panel-wrap .guest-options-title {
    margin-top: 0;
    margin-bottom: 10px;
    text-align: left;
}
.guest-page .infocard-addon-panel-wrap .infocard-addon-booking-layout.card {
    margin-bottom: 0;
}
.guest-page .infocard-addon-panel-wrap .infocard-addon-cond-md {
    margin-top: 4px;
    font-size: 0.82rem;
    color: #6b7a8d;
    line-height: 1.35;
}
.guest-page .infocard-addon-panel-wrap .infocard-addon-cond-md p:last-child {
    margin-bottom: 0;
}
.guest-page .infocard-addon-panel-wrap .infocard-addon-inline-status {
    width: 100%;
}
.infocard-modal-purchase-category {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.infocard-modal-aside .infocard-addon-panel-wrap + .infocard-modal-purchase-category {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid #e8edf3;
}
.infocard-modal-purchase-category .pshop-category-card {
    grid-row: auto !important;
    max-width: 100%;
}
.modal-card-body .infocard-modal-purchase-category .purchase-shop-items,
.info-lightbox-body .infocard-modal-purchase-category .purchase-shop-items {
    width: 100%;
}
.info-lightbox-addon-foot {
    flex-shrink: 0;
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid #e0e5ec;
    max-height: 42vh;
    overflow: auto;
}

/* Info-card lightbox: full-screen overlay (no prev/next) */
.info-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.info-lightbox.is-active {
    display: flex;
}
.info-lightbox-background {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    cursor: pointer;
}
.info-lightbox-close {
    position: absolute;
    top: env(safe-area-inset-top, 12px);
    right: env(safe-area-inset-right, 12px);
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 28px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.info-lightbox-content {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    min-height: 0;
}
.info-lightbox-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.info-lightbox-body img.info-lightbox-img {
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0 auto 16px;
    display: block;
}
.info-lightbox-body img.info-lightbox-img--with-text {
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.info-lightbox-body img {
    max-height: min(68vh, calc(100vh - 8rem));
    max-height: min(68dvh, calc(100dvh - 8rem));
    object-fit: contain;
}
.info-lightbox-body p {
    margin: 0 0 0.75em;
}
.info-lightbox-body p:last-child {
    margin-bottom: 0;
}

/* Iframe card: full-bleed dark area, no padding */
.info-lightbox-body.iframe-card-body {
    padding: 0;
    background: #242424;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .info-lightbox-content {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .info-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .guest-page .info-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 10px;
    }
    .guest-page .guest-card-order-toolbar {
        align-items: center;
        flex-direction: row;
        gap: 8px;
        margin-top: 8px;
        padding: 8px;
    }
    .guest-page .guest-card-order-toolbar__head,
    .guest-page .guest-card-order-toolbar__controls,
    .guest-page .guest-card-order-toolbar__status {
        width: auto;
        text-align: left;
    }
    .guest-page .guest-card-order-toolbar__head,
    .guest-page .guest-card-order-toolbar__controls {
        justify-content: flex-start;
        min-width: 0;
    }
    .guest-page .guest-card-order-toolbar__controls {
        padding-left: 0;
        border-left: 0;
    }
    .guest-page .guest-card-order-toggle,
    .guest-page .guest-card-order-toggle .button,
    .guest-page .guest-card-order-edit-toggle {
        width: auto;
        flex: 0 0 auto;
    }
    .guest-page .guest-card-drag-handle,
    .guest-page .guest-card-edit-handle {
        top: 4px;
        width: 24px;
        height: 24px;
    }
    .guest-page .guest-card-drag-handle {
        right: 4px;
    }
    .guest-page .guest-card-edit-handle {
        right: 32px;
    }
    .guest-page .guest-card-drag-handle .material-symbols-rounded,
    .guest-page .guest-card-edit-handle .material-symbols-rounded {
        font-size: 0.98rem;
    }
    .info-card {
        padding: 18px 8px;
    }
    .guest-page .info-card {
        gap: 5px;
        padding: 10px 4px;
        border-radius: 10px;
    }
    .info-card-icon {
        font-size: 1.8rem;
    }
    .guest-page .info-card-icon {
        font-size: 1.35rem;
    }
    .guest-page .info-card-label {
        font-size: 0.72rem;
        line-height: 1.12;
    }
    .guest-page .info-cards > a.info-card .info-card-label {
        -webkit-line-clamp: 2;
    }
    .guest-page .info-card-separator {
        margin: 8px 0 2px;
    }
}

.apt-season-name {
    margin: 16px 0 8px;
}
.apt-season-name .tag {
    font-size: 0.9em;
}
/* Subtle apartment labels in seasons widget */
.apt-season-label {
    display: inline-block;
    font-size: 0.82em;
    font-weight: 500;
    color: #8a97a8;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
/* Clickable apartment link in seasons widget */
.apt-season-link {
    display: inline-block;
    font-size: 0.82em;
    font-weight: 600;
    color: #5a6a7a;
    text-decoration: none;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-bottom: 1px dashed #b0bec5;
    padding-bottom: 1px;
    transition: color 0.18s, border-color 0.18s;
}
.apt-season-link:hover {
    color: #032f5a;
    border-bottom-color: #032f5a;
    border-bottom-style: solid;
}

/* ── Features widget ({{FEATURES}}) ── */
.features-widget {
    margin-top: 24px;
}
.features-widget .features-card {
    background: #fff;
    padding: 20px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.features-widget .features-card .features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 12px;
}
.features-widget .feature-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}
.features-widget .feature-item--all {
    color: #1a1a1a;
}
.features-widget .feature-icon {
    font-size: 1.25rem;
    color: #5a6a7a;
}
.features-widget .feature-item--all .feature-icon {
    color: #032f5a;
}
.features-widget .feature-badge {
    font-size: 0.78em;
    color: #5a6a7a;
    font-weight: 500;
    margin-left: 4px;
}

/* Features inline inside Termine & Preise (seasons) */
.seasons-features-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem 0.36rem;
    margin-top: 18px;
    margin-bottom: 24px;
}
.seasons-features-inline .feature-item {
    line-height: 1.15;
}
.seasons-features-inline .feature-icon {
    line-height: 1;
}

.seasons-features-inline .feature-item--dimmed .feature-icon,
.seasons-features-inline .feature-item--dimmed .feature-label {
    color: #9ca3af;
    opacity: 0.85;
}

.seasons-features-more-details {
    margin-top: -12px;
    margin-bottom: 18px;
}

.seasons-features-more-summary {
    display: inline-block;
    font-size: 0.8rem;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}

.seasons-features-more-summary::marker {
    content: '';
}

.seasons-features-more-summary::-webkit-details-marker {
    display: none;
}

.seasons-features-inline--more {
    margin-top: 10px;
    margin-bottom: 0;
}

/* ── Pricing table (seasons widget) ── */
.pricing-table-wrap {
    margin: 18px 0 12px;
    background: #f0f2f5;
    border-radius: 8px;
    padding: 12px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}
.pricing-table thead th {
    text-align: left;
    padding: 6px 8px;
    font-weight: 600;
    font-size: 0.84rem;
    color: #5a6a7a;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.pricing-table tbody td {
    padding: 7px 8px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: middle;
    font-size: 0.92rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.pricing-table tbody tr:last-child td {
    border-bottom: none;
}
.pricing-table tbody tr:hover {
    background: #f7fafc;
}
.pricing-table tbody td:nth-child(3) strong {
    color: #3273dc;
}

.availability-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
}
.availability-badge.is-available {
    background: #e6f7e6;
    color: #1f7a3f;
}
.availability-badge.is-unavailable {
    background: #ffe6e6;
    color: #b3261e;
}

/* Mobile: stack table rows as cards */
@media (max-width: 768px) {
    .pricing-table thead {
        display: none;
    }
    .pricing-table tbody tr {
        display: block;
        background: #f8fafc;
        border-radius: 8px;
        padding: 12px 14px;
        margin-bottom: 10px;
        border: 1px solid #e2e8f0;
    }
    .pricing-table tbody tr:last-child {
        margin-bottom: 0;
    }
    .pricing-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 3px 0;
        border-bottom: none;
        font-size: 0.9rem;
    }
    .pricing-table tbody td:first-child {
        font-size: 0.95rem;
        padding-bottom: 4px;
        border-bottom: 1px solid #e2e8f0;
        margin-bottom: 4px;
    }
    .pricing-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #5a6a7a;
        margin-right: 10px;
        flex-shrink: 0;
        font-size: 0.82rem;
    }
    .pricing-table tbody td:first-child::before {
        display: none;
    }
    .pricing-table tbody td:empty,
    .pricing-table tbody td:last-child:empty {
        display: none;
    }
}

.activities {
    margin: 24px 0;
}

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

.activities-block h2 {
    margin: 0 0 12px;
}

.activities-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 16px;
    align-items: start;
}

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

.activities-text p {
    margin-bottom: 10px;
}

.activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.activities-item {
    margin: 0;
    box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}

.activities-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.lightbox.hidden {
    display: none;
}

.lightbox-content {
    background: #000;
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: min(1000px, 90%);
    max-height: 90%;
    color: #fff;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0;
}

.lightbox-content #lightboxCaption {
    flex-shrink: 0;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background: rgba(0,0,0,0.85);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.lightbox-content #lightboxCaption:empty {
    display: none;
}

.lightbox-close {
    border: none;
    color: #fff;
    font-size: 24px;
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    cursor: pointer;
    z-index: 2;
    padding: 0;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    font-size: 32px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    padding: 0;
}

.lightbox-nav.prev { left: 16px; }
.lightbox-nav.next { right: 16px; }

/* Mobile / schmale Landscape: volle Fläche (inkl. dvh bei Drehung), Caption als Overlay */
@media (max-width: 768px),
       (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
    .lightbox {
        align-items: stretch;
        justify-content: flex-start;
        /* Volle Höhe inkl. mobiler Browser-UI / Querformat */
        min-height: 100vh;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
        box-sizing: border-box;
    }

    .lightbox-content {
        max-width: none;
        max-height: none;
        width: 100%;
        height: 100%;
        min-height: 0;
        flex: 1 1 auto;
        align-self: stretch;
        align-items: stretch;
        justify-content: flex-start;
        border-radius: 0;
        overflow: hidden;
    }

    .lightbox-content img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;
        object-fit: contain;
    }

    .lightbox-content #lightboxCaption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        flex-shrink: 0;
        padding: 10px 14px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        text-align: left;
        font-size: 0.95rem;
        font-weight: 500;
        color: #fff;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.15) 70%, transparent);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    }

    .lightbox-close {
        top: max(12px, env(safe-area-inset-top, 12px));
        right: max(12px, env(safe-area-inset-right, 12px));
        width: 48px;
        height: 48px;
        font-size: 28px;
    }

    .lightbox-nav {
        width: 52px;
        height: 52px;
        font-size: 36px;
    }

    .lightbox-nav.prev { left: max(8px, env(safe-area-inset-left, 8px)); }
    .lightbox-nav.next { right: max(8px, env(safe-area-inset-right, 8px)); }
}

.amenities-list {
    margin: 20px 0;
}

.map-area {
    margin: 24px 0;
}

.map-address-hint {
    margin-top: 6px;
    margin-bottom: 12px;
    color: #555;
    font-size: 0.95rem;
}

.map-canvas--fullscreen {
    min-height: 60vh;
    width: 100%;
}

/* Vollbild-Karte: volle Viewport-Größe wie Lightbox */
.map-fullscreen-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.map-fullscreen-modal.map-fullscreen-modal--open {
    opacity: 1;
    visibility: visible;
}

.map-fullscreen-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.map-fullscreen-content {
    position: relative;
    background: #fff;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Sommer/Winter-Tabs als Overlay über der Karte – ohne Hintergrund-Pille,
   mit Abstand zu den Leaflet +/- Buttons oben links. */
.map-fullscreen-overlay-tabs {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: inline-flex;
    gap: 6px;
    max-width: calc(100% - 136px);
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.map-fullscreen-overlay-tabs .map-tab {
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    padding: 6px 14px;
    border-radius: 9999px;
    font-weight: 600;
    color: #032f5a;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.map-fullscreen-overlay-tabs .map-tab.is-active {
    background: #032f5a;
    color: #fff;
    box-shadow: 0 2px 8px rgba(3, 47, 90, 0.4);
}

/* Footer am unteren Rand der Karte – transparent, nur Legende sichtbar */
.map-fullscreen-footer {
    position: absolute;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 1100;
    padding: 0;
    background: transparent;
    pointer-events: none;
}

.map-fullscreen-footer > * {
    pointer-events: auto;
}

/* Adresse im Vollbild ausblenden – Footer zeigt nur die Legende */
.map-fullscreen-footer .map-address-hint {
    display: none;
}

.map-fullscreen-close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 1101;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: #fff;
    border-radius: 4px;
    font-size: 18px;
    line-height: 26px;
    color: #1f2f46;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

.map-fullscreen-close:hover,
.map-fullscreen-close:focus-visible {
    background: #f4f4f4;
    color: #0d47a1;
}

.map-fullscreen-close .material-symbols-rounded {
    font-size: 18px;
}

.leaflet-touch .map-fullscreen-close {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.leaflet-touch .map-fullscreen-close .material-symbols-rounded {
    font-size: 20px;
}

.map-fullscreen-content .map-address-hint {
    margin-top: 0;
    margin-bottom: 4px;
    padding-right: 0;
    flex-shrink: 0;
    color: #032f5a;
    font-weight: 500;
}

/* Aufklappbare Legende */
.map-fullscreen-legend-details {
    margin: 0;
}

.map-fullscreen-legend-details > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
    color: #032f5a;
    font-size: 0.85rem;
    font-weight: 600;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.map-fullscreen-legend-details > summary::-webkit-details-marker {
    display: none;
}

.map-fullscreen-legend-details > summary::after {
    content: "\25BE"; /* ▾ */
    font-size: 0.85em;
    transition: transform 0.15s ease;
}

.map-fullscreen-legend-details[open] > summary::after {
    transform: rotate(180deg);
}

.map-fullscreen-legend-body {
    margin-top: 8px;
    max-height: 40vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.map-fullscreen-legend-body .map-legend {
    margin: 0;
}

/* QR-Modal „aufs Handy“: Karte als QR-Code */
.map-qr-modal .map-qr-modal-card {
    max-width: 320px;
}
.map-qr-modal .map-qr-section {
    text-align: center;
    padding: 8px 0;
}
.map-qr-modal .map-qr-section img {
    display: block;
    margin: 0 auto 12px;
}
.map-qr-modal .map-qr-url-hint {
    font-size: 0.85rem;
    color: #666;
    word-break: break-all;
    margin: 0;
}

.map-fullscreen-content .map-canvas--fullscreen {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    min-height: 0;
}

.map-apt-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 12px 0;
    padding: 0 0 10px 0;
}

/* Auto-collapsing switcher (badges → <select>) used by map / seasons. */
.apt-switcher {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.apt-switcher .map-apt-badges {
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
}
.apt-switcher.is-collapsed .map-apt-badges {
    display: none;
}
.apt-switcher-select {
    display: none;
    appearance: none;
    -webkit-appearance: none;
    color: #0d47a1;
    background-color: #e3f2fd;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%230d47a1' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 7px;
    border: 1px solid #90caf9;
    border-radius: 9999px;
    padding: 6px 32px 6px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    max-width: 100%;
}
.apt-switcher.is-collapsed .apt-switcher-select {
    display: inline-block;
}
.apt-switcher-select:focus-visible {
    outline: 2px solid #0d47a1;
    outline-offset: 2px;
}

/* Apartment switcher dropdown – shown when there are more than 2 apartments.
   Visually matches the .apartment-tabs design (light blue panel, dark blue accent). */
.apartment-dropdown-wrapper {
    margin-bottom: 18px;
    background: #e8f0f8;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(3, 47, 90, 0.12);
    padding: 4px;
    width: 100%;
    box-sizing: border-box;
}
.apartment-dropdown {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 38px;
    padding: 8px 36px 8px 14px;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(3, 47, 90, 0.32);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23ffffff' d='M6 8L0 0h12z'/></svg>"),
        linear-gradient(135deg, #043a6f 0%, #032f5a 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: right 14px center, 0 0;
    background-size: 10px 7px, cover;
}
.apartment-dropdown:focus-visible {
    outline: 2px solid #043a6f;
    outline-offset: 2px;
}
.apartment-dropdown option {
    color: #032f5a;
    background: #ffffff;
    font-weight: 500;
}
/* Hero-Variante: heller Glasrahmen passend zum Hero */
.hero-apartment-tabs .apartment-dropdown-wrapper {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin-bottom: 0;
}
.map-apt-badges-in-card {
    flex-wrap: wrap;
}
.map-apt-badges-in-card .apt-switcher {
    padding: 8px 12px;
}

.map-area .map-section:first-of-type .map-apt-badges,
.map-apt-badges:first-of-type {
    border-top: none;
}


.seasons .map-apt-badges {
    border-top: none;
}

.map-apt-badges-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bulma-text-strong, #363636);
    margin-right: 4px;
}

.map-apt-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0d47a1;
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.map-apt-badge:hover {
    background: #bbdefb;
    border-color: #64b5f6;
}

.map-apt-badge.map-apt-badge--active {
    color: #fff;
    background: #0d47a1;
    border-color: #0d47a1;
}

/* Seasons section: same badges as links */
a.map-apt-badge {
    text-decoration: none;
}

.map-apt-marker {
    background: transparent !important;
    border: none !important;
}

.map-apt-marker-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 2px solid #0d47a1;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

.map-apt-marker-inner .material-symbols-rounded {
    transform: rotate(45deg);
}

.map-apt-marker.map-apt-marker--grayed .map-apt-marker-inner {
    opacity: 0.5;
    filter: grayscale(1);
    border-color: #9e9e9e;
}

.map-apt-marker.map-apt-marker--grayed .map-apt-marker-inner .material-symbols-rounded {
    color: #9e9e9e !important;
}

.map-poi-legend-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--bulma-text-strong, #363636);
}

.map-poi-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 12px;
    align-items: center;
}

.map-poi-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

.map-poi-legend-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.map-poi-marker {
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
}

.map-poi-marker .map-poi-icon-wrap {
    font-size: 0;
}

.map-poi-rating-badge {
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    min-width: 28px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #f4b400;
    border: 1px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    white-space: nowrap;
    z-index: 2;
}

.map-poi-child-badge {
    align-items: center;
    background: #2e7d32;
    border: 1px solid #fff;
    border-radius: 9px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    color: #fff;
    display: flex;
    height: 18px;
    justify-content: center;
    left: 50%;
    min-width: 30px;
    padding: 0 5px;
    position: absolute;
    top: -18px;
    transform: translateX(-50%);
    z-index: 3;
}

.map-poi-child-badge--stacked {
    top: -38px;
}

.map-poi-child-badge .material-symbols-rounded {
    font-size: 13px;
    line-height: 1;
}

.map-poi-child-badge-value {
    font-size: 10.5px;
    font-weight: 800;
    line-height: 17px;
    margin-left: 2px;
}

.map-poi-marker--closed .map-poi-icon-wrap {
    background: #f2f3f5 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24) !important;
    filter: grayscale(1);
    opacity: 0.62;
}

.map-poi-ai-status {
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.18);
    color: #27364a;
    display: none;
    gap: 8px;
    margin: 0 10px 12px 0;
    max-width: min(260px, calc(100vw - 44px));
    padding: 8px 10px;
    pointer-events: auto;
}

.map-poi-ai-status.is-visible {
    display: flex;
}

.map-poi-ai-status--overlay {
    bottom: 12px;
    margin: 0;
    position: absolute;
    right: 12px;
    z-index: 1002;
}

.map-poi-ai-status-spinner {
    border: 2px solid #d8dee8;
    border-top-color: var(--brand-primary, #0d47a1);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
    animation: map-poi-ai-spin 0.85s linear infinite;
}

.map-poi-ai-status.is-done .map-poi-ai-status-spinner {
    animation: none;
    border-color: #2e7d32;
    position: relative;
}

.map-poi-ai-status.is-done .map-poi-ai-status-spinner::after {
    border: solid #2e7d32;
    border-width: 0 2px 2px 0;
    content: "";
    height: 8px;
    left: 5px;
    position: absolute;
    top: 2px;
    transform: rotate(45deg);
    width: 4px;
}

.map-poi-ai-status-body {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.map-poi-ai-status-title {
    font-size: 0.78rem;
    font-weight: 800;
}

.map-poi-ai-status-detail {
    color: #667085;
    font-size: 0.72rem;
    margin-top: 2px;
    white-space: nowrap;
}

@keyframes map-poi-ai-spin {
    to {
        transform: rotate(360deg);
    }
}

.map-user-location-marker {
    background: transparent !important;
    border: none !important;
}

.map-user-location-marker-inner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
        linear-gradient(#c62828, #c62828) center / 2px 24px no-repeat,
        linear-gradient(90deg, #c62828, #c62828) center / 24px 2px no-repeat,
        radial-gradient(circle at center, #ffffff 0 3px, #c62828 3px 5px, transparent 5px),
        radial-gradient(circle at center, transparent 0 12px, #c62828 12px 14px, transparent 14px);
    border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-quick-controls {
    margin-top: 8px;
}

.map-fullscreen-control {
    margin-top: 0;
}

.map-quick-control {
    width: 26px;
    height: 26px;
    line-height: 26px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #ccc;
    background: #fff;
    color: #1f2f46;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.leaflet-touch .map-quick-control {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.map-quick-control:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.map-quick-control:last-child {
    border-bottom: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.map-quick-control:hover,
.map-quick-control:focus-visible {
    background: #f4f4f4;
    color: #0d47a1;
}

.map-quick-control .material-symbols-rounded {
    font-size: 18px;
}

.leaflet-touch .map-quick-control .material-symbols-rounded {
    font-size: 20px;
}

.map-quick-control-crosshair {
    width: 17px;
    height: 17px;
    display: inline-block;
    border-radius: 50%;
    background:
        linear-gradient(currentColor, currentColor) center / 2px 15px no-repeat,
        linear-gradient(90deg, currentColor, currentColor) center / 15px 2px no-repeat,
        radial-gradient(circle at center, #fff 0 2px, currentColor 2px 4px, transparent 4px),
        radial-gradient(circle at center, transparent 0 6px, currentColor 6px 8px, transparent 8px);
}

.leaflet-touch .map-quick-control-crosshair {
    width: 19px;
    height: 19px;
    background:
        linear-gradient(currentColor, currentColor) center / 2px 17px no-repeat,
        linear-gradient(90deg, currentColor, currentColor) center / 17px 2px no-repeat,
        radial-gradient(circle at center, #fff 0 3px, currentColor 3px 5px, transparent 5px),
        radial-gradient(circle at center, transparent 0 7px, currentColor 7px 9px, transparent 9px);
}

.map-track-line {
    cursor: pointer;
}

.map-track-cursor,
.map-track-cursor .leaflet-interactive,
.map-track-cursor .leaflet-tile,
.map-track-cursor .leaflet-pane {
    cursor: pointer !important;
}

.map-track-line--osm-path {
    pointer-events: none;
}

.map-track-line--osm-route,
.map-track-line--osm-hidden,
.map-track-line--osm-hover {
    pointer-events: none;
}

.map-poi-popup {
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: min(76vw, 340px);
    min-width: min(72vw, 260px);
    overflow-wrap: anywhere;
    width: max-content;
}

.leaflet-popup-content .map-poi-popup {
    width: min(72vw, 300px);
}

.map-poi-popup-row {
    align-items: flex-start;
    color: #4d5a6b;
    display: grid;
    gap: 7px;
    grid-template-columns: 18px minmax(0, 1fr);
    margin-top: 5px;
}

.map-poi-popup-row:first-child {
    margin-top: 0;
}

.map-poi-popup-row > .material-symbols-rounded {
    color: #667085;
    font-size: 16px;
    line-height: 1.25;
    margin-top: 1px;
    text-align: center;
}

.map-poi-popup-row-body {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.map-poi-popup-row--title {
    color: #27364a;
}

.map-poi-popup-row--rating > .material-symbols-rounded,
.map-poi-popup-row--child > .material-symbols-rounded {
    color: #f4b400;
}

.map-poi-popup-row--child > .material-symbols-rounded {
    color: #2e7d32;
}

.map-poi-popup-title {
    color: #27364a;
    display: inline-block;
    font-weight: 800;
}

.map-poi-popup-addr,
.map-poi-popup-hours,
.map-poi-popup-desc {
    color: #555;
}

.map-poi-popup-details {
    color: #27364a;
    font-weight: 600;
}

.map-poi-popup-rating {
    align-items: center;
    color: #27364a;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
    min-width: 0;
}

.map-poi-popup-child-rating {
    align-items: center;
    color: #27364a;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    min-width: 0;
}

.map-poi-popup-stars {
    color: #f4b400;
    display: inline-flex;
    gap: 1px;
    letter-spacing: 0;
}

.map-poi-popup-stars .is-empty {
    color: #d4dae3;
}

.map-poi-popup-rating-value {
    font-weight: 700;
}

.map-poi-popup-rating-unknown {
    color: #667085;
    font-weight: 700;
}

.map-poi-popup-rating-source,
.map-poi-popup-rating-count {
    color: #667085;
}

.map-poi-popup-rating-reason {
    color: #4d5a6b;
    display: inline-block;
    margin-top: 2px;
}

.map-poi-popup-info {
    display: block;
    flex-direction: column;
    margin-top: 0;
}

.map-poi-popup-info-item {
    color: #4d5a6b;
}

.map-poi-popup-info-label {
    color: #27364a;
    font-weight: 700;
}

.map-poi-popup-info-item--open .material-symbols-rounded,
.map-poi-popup-info-item--open .map-poi-popup-info-label {
    color: #2e7d32;
}

.map-poi-popup-info-item--closed .material-symbols-rounded,
.map-poi-popup-info-item--closed .map-poi-popup-info-label {
    color: #747b85;
}

.map-poi-popup-status--closed {
    color: #747b85;
    font-weight: 700;
}

.map-poi-popup a {
    overflow-wrap: anywhere;
    word-break: break-all;
}

.map-track-popup {
    font-size: 0.9rem;
    line-height: 1.45;
    min-width: 180px;
}

.map-track-popup-sep {
    margin: 8px 0;
    border: none;
    border-top: 1px solid rgba(0,0,0,.12);
}

.map-track-popup-item strong {
    display: block;
    margin-bottom: 4px;
}

.map-track-popup-ref,
.map-track-popup-difficulty,
.map-track-popup-type {
    color: #555;
    font-size: 0.85em;
}

.map-track-popup a {
    word-break: break-all;
}

.map-track-popup-symbol-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 4px;
    border-radius: 4px;
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 12px 0;
    padding: 10px 0;
    font-size: 0.9rem;
    color: var(--bulma-text, #363636);
}

.map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.map-legend-item--clickable {
    cursor: pointer;
}

.map-legend-item--clickable:hover {
    opacity: 0.85;
}

.map-legend-item .map-legend-icon {
    font-size: 20px;
    width: 1em;
    height: 1em;
}

.map-legend-distance {
    color: #666;
    font-size: 0.85em;
    white-space: nowrap;
}

.map-embed {
    position: relative;
    width: 100%;
    min-height: 420px;
    background: #e8eef2;
    overflow: hidden;
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-tabs {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    gap: 0;
    width: fit-content;
    max-width: calc(100% - 112px);
    overflow: hidden;
}

.map-tab {
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    border: none;
    background: #fff;
    color: #555;
    cursor: pointer;
}

.map-tab:hover {
    background: #f5f5f5;
}

.map-tab.is-active {
    background: var(--primary, #0d47a1);
    color: #fff;
}

@media (max-width: 480px) {
    .map-tabs {
        max-width: calc(100% - 96px);
    }

    .map-tab,
    .map-fullscreen-overlay-tabs .map-tab {
        padding: 5px 8px;
        font-size: 0.72rem;
        white-space: nowrap;
    }

    .map-fullscreen-overlay-tabs {
        max-width: calc(100% - 112px);
    }
}

/* Vollbild-Karte unter /map (ohne Legende) */
.body-map-fullpage { margin: 0; padding: 0; min-height: 100vh; }
.main-map-fullpage { margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; }
.map-area--fullpage { flex: 1; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; }
.map-area--fullpage .map-section { flex: 1; display: flex; flex-direction: column; margin: 0; padding: 0; }
.map-area--fullpage .map-embed { flex: 1; min-height: 0; margin: 0; padding: 0; }
.map-area--fullpage .map-canvas { height: 100%; min-height: 100vh; }

.map-embed iframe {
    width: 100%;
    height: 450px;
    border: 0;
}

.map-embed .map-canvas {
    width: 100%;
    height: 450px;
}

/* Wenn Kacheln noch fehlen: dezenter Hintergrund statt hartes Leaflet-Grau (#ddd) */
.map-area .leaflet-container,
.body-map-fullpage .leaflet-container {
    background: #bfc4bb;
}

.map-area .leaflet-tile-container,
.body-map-fullpage .leaflet-tile-container,
.map-fullscreen-content .leaflet-tile-container {
    will-change: transform;
}

/* Winter-Modus: die eigentliche Winter-Optik ist serverseitig in die
   merged_winter-Kacheln eingebrannt (ImageMagick). Das Mapnik-Underlay
   (tile-{z}-{x}-{y}.png aus dem fwMapTileUnderlay-Pane) kommt aber als
   normales, buntes OSM → würde, bis die merged-winter-Kacheln geladen sind,
   als "bunter Platzhalter" durchscheinen. Deshalb bekommt ausschließlich das
   Underlay einen dezenten Winter-Filter (entsättigen + leicht kühler + etwas
   heller), der zur eingebackenen Look-and-Feel der merged-Kacheln passt.
   Scope ist via `.map-winter-base img` + Pane-Selektor bewusst eng gehalten,
   damit der Filter die bereits korrekt gefärbten merged-winter-Kacheln nie
   trifft. */
.leaflet-pane.leaflet-tile-pane .map-winter-base img.leaflet-tile,
.leaflet-pane .map-winter-base img.leaflet-tile {
    filter: saturate(0.35) brightness(1.12) hue-rotate(195deg);
}

/* Bike-Modus: Tracks und Start/Ziel-Marker. Linienfarbe wird inline je Tour gesetzt. */
.map-track-line--bike {
    cursor: pointer;
    transition: stroke-width 120ms ease-out, stroke-opacity 120ms ease-out;
}
.map-bike-endpoint {
    background: transparent;
    border: none;
}
.map-bike-endpoint-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font: 600 12px/1 var(--family-sans, system-ui, sans-serif);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    color: #fff;
}
.map-bike-endpoint--end .map-bike-endpoint-inner {
    border-color: #222;
}

/* Wander-Modus: kuratierte Touren aus almenrausch.at. Farben inline gesetzt. */
.map-track-line--hike {
    cursor: pointer;
    transition: stroke-width 120ms ease-out, stroke-opacity 120ms ease-out;
}
.map-hike-endpoint {
    background: transparent;
    border: none;
}
.map-hike-endpoint-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font: 600 12px/1 var(--family-sans, system-ui, sans-serif);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    color: #fff;
}
.map-hike-endpoint--end .map-hike-endpoint-inner {
    border-color: #222;
}

@media (max-width: 1023px) {
    .navbar-menu {
        box-shadow: 0 16px 24px rgba(0, 0, 0, 0.2);
    }

    .navbar-end {
        padding: 8px 0 12px;
    }

}

@media (max-width: 768px) {
    :root {
        --header-height: 64px;
        --header-height-shrink: 64px;
        --logo-size: 86px;
        --logo-size-shrink: 86px;
        --logo-overlap: 18px;
        --logo-overlap-shrink: 18px;
        --logo-offset-x: -2px;
    }

    .container {
        padding: 0px;
    }

    .activities-content {
        grid-template-columns: 1fr;
    }

    body:not(.admin):not(.guest-page) .site-header {
        position: fixed;
        width: 100%;
    }

    body:not(.admin):not(.guest-page) main.section {
        /*padding-top: calc(var(--header-height) + 24px);*/
        padding-left: 8px;
        padding-right: 8px;
        
    }

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

    .hero-actions .button.is-primary {
        background-color: #043a6f;
        border-color: #032f5a;
    }

    .navbar {
        min-height: var(--header-height-shrink);
    }

    .navbar .container,
    .navbar-brand,
    .navbar-menu {
        min-height: var(--header-height-shrink);
    }

    .brand-logo,
    .navbar-item img.brand-logo {
        height: var(--logo-size-shrink);
        transform: translateY(calc(-1 * var(--logo-overlap-shrink)));
    }

    .navbar-item img.brand-logo {
        margin-bottom: -40px;
    }

    .brand-text {
        font-size: 14px;
    }

    .brand-sub {
        font-size: 10px;
        opacity: 0.85;
    }

    .brand-text,
    .brand-sub {
        display: none;
    }

    .brand-text-mobile {
        display: block;
        font-size: 13px;
        line-height: 1.2;
    }

    .navbar-item {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }

    .calendar-header,
    .calendar-grid {
        gap: 4px;
    }

    .calendar-month {
        padding: 8px;
    }

    .holiday-controls {
        width: 100%;
    }

    .holiday-controls .control.select {
        flex: 1 1 auto;
    }

    .holiday-controls .control.select,
    .holiday-controls .control.select select {
        width: 100%;
    }

    .calendar-legend-row {
        flex-direction: column;
        align-items: stretch;
    }

    .calendar-day {
        min-height: 44px;
        padding: 4px;
        gap: 2px;
        font-size: 0.8em;
    }

    .calendar-day .date {
        font-size: 0.85em;
    }

    .calendar-day .date-full {
        display: none;
    }

    .calendar-day .date-short {
        display: none;
    }

    .calendar-day .date-compact {
        display: inline;
    }

    .calendar-day-price {
        display: none;
    }

    .day-icon {
        width: 14px;
        height: 14px;
    }

    .day-icon svg {
        width: 10px;
        height: 10px;
    }
}

.is-hidden {
    display: none;
}

/* Basis-Regeln für .card.admin-card stehen im Unified-UI-Block am Anfang.
   Hier nur noch admin-spezifische Sub-Komponenten (Header-Actions, Footer). */

.admin .admin-card .admin-card-header-actions,
.card.admin-card .admin-card-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.admin .admin-card .admin-card-header-actions .button,
.admin .admin-card .admin-card-header-actions .tag {
    margin: 0;
}

.admin .admin-card .admin-card-footer {
    padding: 0;
}

.admin .admin-card .admin-card-footer .admin-card-footer-item {
    border: 0;
    justify-content: flex-end;
    padding: 0.75rem;
}

.admin .admin-card .admin-card-footer .buttons {
    margin-bottom: 0;
}

/* General status tags */
.tag.status-confirmed, .tag.status-paid, .tag.status-entrichtet {
    background-color: #d6f2e4;
    color: #1b6f44;
}

.tag.status-unconfirmed, .tag.status-hold, .tag.status-faellig {
    background-color: #fde8d2;
    color: #8a4a10;
}

.tag.status-cancelled, .tag.status-blocked, .tag.status-closed, .tag.status-error {
    background-color: #f7d3d7;
    color: #8a1f2d;
}

.tag.status-finished {
    background-color: #e0e4e8;
    color: #555;
}

.tag.status-info, .tag.status-ok {
    background-color: #d9e7f9;
    color: #1c4c86;
}


/* Table inputs consistency */
.admin .table td .input,
.admin .table td .select,
.admin .table td .select select,
.admin .table td .button:not(.is-icon) {
    height: 2.2em !important;
    font-size: 0.9rem !important;
    margin: 0;
}

.admin .table td .select::after {
    top: 50% !important;
    margin-top: -0.375em !important;
}

.admin .table td {
    vertical-align: middle !important;
}

/* Apartment tags consistency */
.tag.is-apartment {
    background-color: #f5f5f5;
    color: #4a4a4a;
    border: 1px solid #dbdbdb;
    font-weight: 600;
}

.admin .infocard-icon-input {
    display: flex;
    align-items: center;
    gap: 6px;
}
.admin .infocard-icon-preview {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: 1.1rem;
    color: #1b1b1b;
}

.admin [data-tooltip] {
    position: relative;
}

.admin [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 6px 8px;
    background: #0d1f2d;
    color: #fff;
    font-size: 0.72rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease, transform 0.1s ease;
    z-index: 20;
}

.admin [data-tooltip]:hover::after,
.admin [data-tooltip]:focus::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.admin .admin-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    min-height: 40px;
}

@media (min-width: 769px) {
    .admin .admin-table-toolbar {
        flex-wrap: nowrap;
    }
}

.admin .admin-table-toolbar__group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 40px;
}

@media (min-width: 769px) {
    .admin .admin-table-toolbar__group {
        flex-wrap: nowrap;
    }
}

.admin .admin-table-toolbar__group--right {
    margin-left: auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.admin .admin-table-search {
    min-width: 180px;
    max-width: 280px;
}

.admin .admin-table-toolbar .input.admin-table-search {
    font-size: 0.8125rem;
    border-radius: 8px !important;
}

.admin .admin-table-toolbar select,
.admin .admin-table-toolbar .input {
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box;
    border-radius: 8px !important;
}

.admin .admin-table-toolbar .select {
    height: 40px !important;
    min-height: 40px !important;
    display: inline-flex;
    align-items: stretch;
    border-radius: 8px !important;
}

.admin .admin-table-toolbar .select select {
    height: 100%;
    line-height: 1.2;
    padding-top: 0;
    padding-bottom: 0;
}

.admin .admin-table-toolbar .button {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px;
    box-sizing: border-box;
    font-size: 0.8125rem;
    border-radius: 8px !important;
}

.admin .admin-table-toolbar .admin-table-bulk-apply.button.is-primary {
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.admin .admin-table-bulk-select select {
    min-width: 140px;
    font-size: 0.8125rem;
}

.admin .admin-table-column-filter select {
    max-width: 170px;
}

.admin .admin-apartment-filter {
    margin-bottom: 0;
    min-width: 0;
    flex: 1 1 auto;
}

.admin .admin-apartment-filter.apartment-tabs,
.admin .admin-apartment-filter .apartment-tabs {
    margin-bottom: 0;
}

.admin .admin-apartment-filter .apartment-dropdown {
    min-height: 34px;
    font-size: 0.875rem;
}

.admin .admin-table-selection {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: 0.8125rem;
    color: #6b7c8c;
    font-weight: 500;
    white-space: nowrap;
}

.admin .admin-has-selection .admin-select-cell {
    width: 36px;
}

.admin .admin-table th.is-sortable {
    cursor: pointer;
    position: relative;
    padding-right: 18px;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

.admin .admin-table th {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

.admin .admin-table th.admin-th-compact {
    font-size: 0.78rem;
    letter-spacing: 0.015em;
}

.admin .admin-table td code,
.admin .admin-table td.is-family-monospace {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

.admin .admin-table td {
    line-height: 1.25;
}

.admin .admin-table td br {
    display: none;
}

.admin .admin-table td br + .is-size-7::before,
.admin .admin-table td br + .has-text-grey::before,
.admin .admin-table td br + small::before,
.admin .admin-table td br + a::before {
    content: " · ";
    color: #9aa8b6;
    font-weight: 500;
}

.admin .admin-table td .is-size-7,
.admin .admin-table td small,
.admin .admin-table td .admin-date-muted {
    font-size: 0.72rem !important;
    line-height: 1.15;
}

.admin .admin-table td .has-text-grey,
.admin .admin-table td .admin-date-muted {
    color: #748293 !important;
}

.admin .admin-table .tag {
    min-height: 1.45em;
    padding: 0.1em 0.45em;
    font-size: 0.68rem;
    line-height: 1.15;
    white-space: nowrap;
}

.admin .admin-table th.is-sortable::after {
    content: "↕";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    opacity: 0.4;
}

.admin .admin-table th.is-sorted-asc::after {
    content: "↑";
    opacity: 0.9;
}

.admin .admin-table th.is-sorted-desc::after {
    content: "↓";
    opacity: 0.9;
}

.admin .admin-table-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.admin .admin-table-pagination__info {
    font-size: 0.85rem;
    color: #5b6b7c;
    font-weight: 600;
}

.admin .admin-sort-ts {
    display: none !important;
}

.admin .admin-date-muted {
    font-size: 0.82rem;
    color: #6b7785;
    font-weight: 500;
}


/* Ensure modals are always above the sticky navbar (z-index: 1100) */
.modal {
    z-index: 1200;
}

.admin .modal-card-head,
.guest-page .modal-card-head,
.modal-card-head {
    background-color: #f6f8fa;
    border-bottom: 1px solid #dbdbdb;
    padding: 12px 20px;
}

.admin .modal-card-title,
.guest-page .modal-card-title,
.modal-card-title {
    font-weight: 700;
    color: #032f5a;
    font-size: 1.1rem;
    margin: 0;
}

.admin .modal-card,
.guest-page .modal-card,
.modal-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Make admin edit dialogs wider by default across all tables/pages. */
.admin .modal[id*="edit-"] .modal-card,
.admin .modal[id*="-edit"] .modal-card {
    width: min(920px, calc(100vw - 32px));
}

/* Booking edit modal needs more horizontal space for status + payment tables. */
.admin .modal[id^="booking-edit-"] .modal-card {
    width: min(1120px, calc(100vw - 32px));
}

.admin .modal-card-body,
.guest-page .modal-card-body,
.modal-card-body {
    padding: 20px;
}

.admin .modal-card-foot,
.guest-page .modal-card-foot,
.modal-card-foot {
    background-color: #f6f8fa;
    border-top: 1px solid #dbdbdb;
    padding: 12px 20px;
    justify-content: flex-end;
    gap: 10px;
}

.admin .modal-card-foot [data-modal-close] {
    order: 0;
    margin-right: auto;
}

.admin .modal-card-foot .button:not([data-modal-close]) {
    order: 1;
}

.admin .modal-card-head .delete,
.admin .modal-card-head .modal-close,
.admin .modal-card-head [data-modal-close].delete,
.admin .modal-card-head .js-smarthome-modal-close.delete {
    width: 32px !important;
    min-width: 32px !important;
    max-width: none !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: none !important;
}

.admin .modal-card-foot [data-modal-close].button,
.admin .modal-card-foot .button {
    min-height: 40px !important;
    border-radius: 8px;
}

.admin .modal-card-foot .button.is-primary,
.admin .modal-card-foot .button.is-success,
.admin .modal-card-foot .button.is-danger:not(.is-light) {
    order: 2;
}

/* Booking status toggles */
.booking-status-toggles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.status-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-toggle-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid #ccc;
    background: #f5f5f5;
    color: #999;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.15s;
}

.status-toggle-btn:hover {
    border-color: #888;
}

.status-toggle-btn.is-active {
    background: #d6f2e4;
    border-color: #34a853;
    color: #1b6f44;
}

.status-toggle-label {
    font-size: 0.9rem;
    color: #333;
}

.status-toggle-date {
    color: #888;
    font-size: 0.8rem;
}

/* Payment status dropdown in admin */
.pay-status-select {
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    appearance: auto;
}

.pay-status-select.is-paid {
    background: #d6f2e4;
    color: #1b6f44;
    border-color: #34a853;
}

.pay-status-select.is-pending {
    background: #fff8e1;
    color: #f57f17;
    border-color: #ffa000;
}

.pay-status-select.is-check {
    background: #fff3cd;
    color: #7a5300;
    border-color: #e0b400;
}

.pay-status-select.is-open {
    background: #fde8e8;
    color: #c0392b;
    border-color: #e74c3c;
}

/* Booking status indicator dots in table */
.booking-status-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.status-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    background: #eee;
    color: #5f6b76;
    border: 1px solid #d8dee6;
    cursor: default;
}

.status-dot.is-ok {
    background: #d6f2e4;
    color: #1b6f44;
    border-color: #a8dfbf;
}

@media (max-width: 700px) {
    .booking-status-icons {
        gap: 5px;
    }

    .status-dot {
        width: 18px;
        min-width: 18px;
        height: 18px;
        min-height: 18px;
        padding: 0;
        font-size: 0.62rem;
    }
}

.admin .checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}

.cleaning-done-banner,
.done-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #d6f2e4;
    color: #1b6f44;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 14px 20px;
    border-radius: 10px;
    margin-bottom: 16px;
    border: 2px solid #a8e0be;
}

/* Disabled fieldsets appear semi-transparent */
fieldset[disabled],
.card.is-done {
    opacity: 0.5;
}

.cleaning-done-icon,
.done-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #1b6f44;
    color: #fff;
    border-radius: 50%;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.admin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}

.admin-page-header h2,
.admin main.section > .container > .is-flex:has(> h2) h2,
.admin .calendar-page-header h2 {
    margin: 0;
    color: #032f5a;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.2;
}

.admin main.section > .container > .is-flex:has(> h2) {
    margin: 0 0 18px !important;
    min-height: 40px;
    gap: 10px;
    flex-wrap: wrap;
}

.admin .title.is-5,
.admin .title.is-6,
.admin h3 {
    color: #243447;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.admin-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-page-actions .button,
.admin main.section > .container > .is-flex:has(> h2) > .button,
.admin main.section > .container > .is-flex:has(> h2) > a.button {
    min-height: 40px !important;
    height: 40px;
    border-radius: 8px !important;
}

.admin-page-header .button.is-small,
.admin-page-actions .button.is-small {
    min-height: 40px !important;
    height: 40px;
}

/* Apartments admin pages: clean, consistent layout and controls */
.admin .admin-apartments-page,
.admin .admin-apartments-inventory {
    --apartment-surface: #f7f9fc;
    --apartment-border: #dce3ec;
}

.admin .admin-apartments-page .admin-page-header,
.admin .admin-apartments-inventory .admin-page-header {
    margin-bottom: 1rem;
}

.admin .admin-apartments-page .admin-card,
.admin .admin-apartments-inventory .admin-card {
    border-color: var(--apartment-border);
    box-shadow: 0 6px 16px rgba(3, 47, 90, 0.07);
    overflow: hidden;
}

.admin .admin-apartments-page .admin-card.is-apartment-disabled {
    opacity: 0.78;
    border-color: #f6c35a;
    background: repeating-linear-gradient(
        -45deg,
        #fffaf0 0,
        #fffaf0 14px,
        #fdf4e0 14px,
        #fdf4e0 28px
    );
}
.admin .admin-apartments-page .admin-card.is-apartment-disabled .apartment-admin-teaser img {
    filter: grayscale(0.6);
}

.admin .admin-apartments-page .admin-card .card-header,
.admin .admin-apartments-inventory .admin-card .card-header {
    display: none;
}

.admin .admin-apartments-inventory .admin-card .card-header-title {
    font-size: 1rem;
    font-weight: 700;
    color: #12385f;
}

/* Rechte Spalte der Uebersicht: die globale Regel `.admin-card { height: 100% }`
   zieht jede Karte auf die Hoehe der linken Spalte auf - bei drei gestapelten
   Karten ergibt das riesige Leerflaechen und einen Ueberlauf. Hier zaehlt der
   Inhalt. */
.admin .admin-apartments-inventory .admin-overview-grid__side > .admin-card,
.admin .admin-apartments-inventory .admin-overview-grid__side > .admin-guest-chat-compact > .admin-card {
    height: auto;
}

/* Ausnahme: Tuerschloss und Tablet stehen als eigene Karten nebeneinander -
   ohne Ueberschrift ist nicht erkennbar, wo die eine aufhoert. Schmaler
   Titelbalken statt des vollen Bulma-Headers. */
.admin .admin-apartments-inventory .admin-door-panel-compact .card-header,
.admin .admin-apartments-inventory .admin-tablet-panel-compact .card-header {
    display: block;
    padding: 0.55rem 1rem 0;
}

.admin .admin-apartments-inventory .admin-door-panel-compact .card-header-title,
.admin .admin-apartments-inventory .admin-tablet-panel-compact .card-header-title {
    display: block;
    padding: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7a8ba0;
}

.admin .admin-apartments-inventory .admin-door-panel-compact .card-content,
.admin .admin-apartments-inventory .admin-tablet-panel-compact .card-content {
    padding-top: 0.6rem;
}

.admin .admin-apartments-inventory .admin-card .admin-card-header-actions {
    padding: 0;
    gap: 0.4rem;
}

.admin .admin-apartments-page .admin-card .card-content,
.admin .admin-apartments-inventory .admin-card .card-content {
    padding: 0.75rem 0.85rem;
}

.admin .admin-apartments-inventory .admin-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.admin .admin-apartments-inventory .admin-card-title-blue {
    margin: 0;
    line-height: 1.1;
    font-weight: 800;
    color: #0f4f8f;
}

.admin .admin-apartments-inventory .admin-card-title-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.admin .admin-apartments-page .admin-card .card-footer,
.admin .admin-apartments-inventory .admin-card .card-footer {
    background: var(--apartment-surface);
    border-top: 1px solid var(--apartment-border);
    padding: 0.75rem 1rem;
}

.admin .admin-apartments-page .admin-card .admin-card-footer-item,
.admin .admin-apartments-inventory .admin-card .admin-card-footer-item {
    width: 100%;
    border: 0;
    padding: 0;
}

.admin .admin-apartments-page .admin-card .buttons,
.admin .admin-apartments-inventory .admin-card .buttons,
.admin .admin-apartments-page .admin-apartment-selector .buttons,
.admin .admin-apartments-inventory .admin-apartment-selector .buttons {
    gap: 0.5rem;
    margin-bottom: 0;
}

/* Geräte-Tokens: scrollbar, standardmäßig etwa 3 Einträge sichtbar */
.admin .admin-device-tokens-scroll {
    max-height: 9.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
    margin-right: -4px;
}

.admin .admin-device-tokens-scroll--cards {
    max-height: 26rem;
}

/* Wohnungen: Buchungskarte – Aktionszeile unten rechts */
.admin .admin-apartments-inventory .booking-inv-main-cell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.admin .admin-apartments-inventory .booking-inv-cell-footer {
    margin-top: auto;
    border-top: 1px solid #f5f5f5;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem 0.6rem;
}

.admin .admin-apartments-inventory .booking-inv-cell-footer__total {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
}

.admin .admin-apartments-inventory .booking-inv-cell-footer__actions {
    flex: 0 1 auto;
    justify-content: flex-end;
}

/* Buchungskarte kompakt: enge Seitenspalten, dichte Kontaktzeile */
.admin .admin-apartments-inventory .booking-nav-side {
    line-height: 1.25;
}

.admin .admin-apartments-inventory .booking-nav-side > div + div {
    margin-top: 1px;
}

.admin .admin-apartments-inventory .booking-inv-main-cell {
    line-height: 1.3;
}

.admin .admin-apartments-inventory .booking-inv-contact-row {
    margin-top: 0.25rem;
}

.admin .admin-apartments-inventory .booking-inv-main-cell .tag {
    height: 1.4rem;
    padding: 0 0.55em;
    font-size: 0.65rem;
}

.admin .admin-apartments-inventory .admin-door-strip {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
}

/* Wohnungen: Chat + Türschloss nebeneinander (je 50 % Desktop) */
.admin .admin-apartments-inventory .admin-guest-chat-compact .guest-chat-thread {
    max-height: 14rem;
    overflow-y: auto;
    margin-bottom: 0.65rem;
}

.admin .admin-apartments-inventory .admin-door-panel-compact .admin-door-no-code-table {
    max-height: 11rem;
    overflow-y: auto;
}

/* Uebersicht: Einkaufen / Aufgaben erledigen / Vorraete pruefen kompakt.
   Nur im Adminbereich - die Putzkraft-Ansicht braucht grosse Tippflaechen. */
.admin .admin-apartments-inventory .ops-buckets {
    gap: 6px;
}

.admin .admin-apartments-inventory .ops-bucket {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 0;
    padding: 7px 10px;
    border-width: 1px;
    border-radius: 8px;
    text-align: left;
    box-shadow: none;
    border-color: #e6e6e6;
}

.admin .admin-apartments-inventory .ops-bucket__icon {
    font-size: 20px;
    flex: 0 0 auto;
}

.admin .admin-apartments-inventory .ops-bucket__count {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
}

.admin .admin-apartments-inventory .ops-bucket__title {
    font-size: 0.75rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin .admin-apartments-inventory .ops-bucket__help {
    display: none;
}

.admin .admin-apartments-inventory .ops-panel {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
}

.admin .admin-apartments-inventory .ops-panel h3 {
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.admin .admin-apartments-inventory .ops-panel__hint {
    font-size: 0.72rem;
    margin-bottom: 8px;
}

.admin .admin-apartments-inventory .ops-window-tabs {
    margin-bottom: 0.5rem;
}

.admin .admin-apartments-inventory .ops-window-tabs a {
    padding: 2px 10px;
    font-size: 0.75rem;
}

.admin .admin-apartments-inventory .ops-window-tabs .tag {
    height: 1.15rem;
    padding: 0 0.4em;
    font-size: 0.65rem;
}

/* Im aktiven Reiter ist die Schrift weiss - das helle Bulma-Tag waere sonst
   weiss auf weiss und die Anzahl nicht lesbar. */
.admin .admin-apartments-inventory .ops-window-tabs li.is-active .tag {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

@media (max-width: 560px) {
    .admin .admin-apartments-inventory .ops-buckets {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Wohnungen: Tuerschloss-Paneel maximal kompakt (Codes als Mini-Kacheln,
   Listen in aufklappbaren Details, dichte Tabellenzeilen) */
.admin .admin-apartments-inventory .admin-door-panel-compact .notification {
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
}

.admin .admin-apartments-inventory .admin-door-codes-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

@media (max-width: 560px) {
    .admin .admin-apartments-inventory .admin-door-codes-mini {
        grid-template-columns: minmax(0, 1fr);
    }
}

.admin .admin-apartments-inventory .admin-door-code-mini {
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 4px 8px 5px;
    min-width: 0;
    line-height: 1.25;
}

.admin .admin-apartments-inventory .admin-door-code-mini > span {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin .admin-apartments-inventory .admin-door-code-mini__label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #8c8c8c;
}

.admin .admin-apartments-inventory .admin-door-code-mini__code {
    font-family: monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: #363636;
}

.admin .admin-apartments-inventory .admin-door-code-mini__period {
    font-size: 0.65rem;
    color: #7a7a7a;
}

.admin .admin-apartments-inventory .admin-door-details {
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid #f0f0f0;
}

.admin .admin-apartments-inventory .admin-door-details > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    padding: 1px 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #4a4a4a;
}

.admin .admin-apartments-inventory .admin-door-details > summary::-webkit-details-marker {
    display: none;
}

.admin .admin-apartments-inventory .admin-door-details > summary::before {
    content: 'chevron_right';
    font-family: 'Material Symbols Rounded';
    font-size: 1rem;
    line-height: 1;
    font-weight: normal;
    font-feature-settings: 'liga';
    color: #9a9a9a;
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}

.admin .admin-apartments-inventory .admin-door-details[open] > summary::before {
    transform: rotate(90deg);
}

.admin .admin-apartments-inventory .admin-door-details__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin .admin-apartments-inventory .admin-door-details > summary .tag {
    height: 1.2rem;
    padding: 0 0.45em;
    font-size: 0.65rem;
    flex: 0 0 auto;
}

.admin .admin-apartments-inventory .admin-door-panel-compact .table-container {
    margin-top: 0.35rem;
    margin-bottom: 0;
    overflow-y: auto;
}

.admin .admin-apartments-inventory .admin-door-panel-compact .admin-door-codes-table {
    max-height: 12rem;
}

.admin .admin-apartments-inventory .admin-door-panel-compact .admin-door-no-code-table {
    max-height: 10rem;
}

.admin .admin-apartments-inventory .admin-door-panel-compact .table {
    min-width: 0;
}

.admin .admin-apartments-inventory .admin-door-panel-compact .table th,
.admin .admin-apartments-inventory .admin-door-panel-compact .table td {
    padding: 0.15rem 0.35rem;
    font-size: 0.7rem;
    vertical-align: middle;
    white-space: nowrap;
}

.admin .admin-apartments-inventory .admin-door-panel-compact .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-card, #fff);
}

.admin .admin-apartments-inventory .admin-door-panel-compact .table .tag {
    height: 1.15rem;
    padding: 0 0.4em;
    font-size: 0.62rem;
}

/* Bezeichnungsspalte darf kuerzen - sonst drueckt ein langer Gastname die
   Tabelle in den Querlauf und Code/Zeitraum rutschen aus dem Blick. */
.admin .admin-apartments-inventory .admin-door-codes-table__label {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin .admin-apartments-inventory .admin-door-codes-table__hint {
    font-size: 0.85rem;
    line-height: 1;
    vertical-align: text-bottom;
    color: #b5b5b5;
}

.admin .admin-apartments-inventory .admin-door-panel-compact .table .actions-cell {
    width: 1%;
    min-width: 0;
    white-space: nowrap;
    text-align: right;
}

.admin .admin-apartments-inventory .admin-door-panel-compact .table .actions-cell .button {
    min-width: 1.75rem;
    min-height: 1.75rem;
    height: 1.75rem;
    padding: 0 0.4em;
}

/* Wohnungen: Tablet-Modus als eigene Karte neben dem Tuerschloss-Paneel.
   Kein Abstand/Trenner mehr - die Karte liefert Rahmen und Ueberschrift. */
.admin .admin-apartments-inventory .admin-tablet-panel-compact {
    margin-top: 1rem;
}

.admin .admin-apartments-inventory .admin-overview-tablet-compact {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.admin .admin-apartments-inventory .admin-overview-tablet-compact__row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.admin .admin-apartments-inventory .admin-overview-tablet-compact__form .select {
    max-width: 15rem;
}

.admin .admin-apartments-inventory .admin-overview-tablet-compact__previews {
    gap: 6px;
}

/* Buchung: Türschloss eine Zeile (kein Stapel der Blöcke) */
.admin .admin-apartments-inventory .admin-door-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #ececec;
    line-height: 1.3;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.admin .admin-apartments-inventory .admin-door-strip__status {
    flex: 1 1 0;
    min-width: 0;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin .admin-apartments-inventory .admin-door-strip__status .admin-door-strip__val {
    font-weight: 600;
    color: #4a4a4a;
}

.admin .admin-apartments-inventory .admin-door-strip__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.admin .admin-apartments-inventory .admin-door-strip__actions .button,
.admin .admin-apartments-inventory .booking-inv-cell-footer__actions .button,
.admin .admin-apartments-inventory .admin-overview-tablet-compact__previews .button {
    min-width: 2.5rem;
    min-height: 2.5rem;
}

.admin .admin-apartments-inventory .admin-door-strip__code {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding-left: 10px;
    margin-left: 4px;
    border-left: 1px solid #ddd;
}

.admin .admin-apartments-inventory .admin-door-strip__code-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: #242424;
    white-space: nowrap;
}

.admin .admin-apartments-inventory .admin-door-strip__code-meta {
    font-size: 0.65rem;
    color: #888;
    white-space: nowrap;
}

.admin .admin-apartments-inventory .admin-door-strip--code-only .admin-door-strip__code {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.admin .admin-apartments-page .input,
.admin .admin-apartments-page .select select,
.admin .admin-apartments-page .textarea,
.admin .admin-apartments-inventory .input,
.admin .admin-apartments-inventory .select select,
.admin .admin-apartments-inventory .textarea {
    border-radius: 8px;
}

.admin .admin-apartments-inventory .shopping-admin-list {
    border: 1px solid #e7edf5 !important;
    border-radius: 10px;
    background: #fff;
}

.admin .admin-apartments-inventory .shopping-admin-list > div:last-child {
    border-bottom: 0 !important;
}

.admin .admin-apartments-inventory .shopping-inline-form {
    align-items: center !important;
}

.admin .admin-apartments-inventory .shopping-actions-row {
    gap: 10px;
    align-items: flex-start;
}

.admin .admin-apartments-inventory .shopping-add-actions {
    flex: 1 1 auto;
    min-width: 0;
}

.admin .admin-apartments-inventory .shopping-add-form {
    display: flex;
    gap: 6px !important;
    align-items: center !important;
    padding: 6px;
    border: 1px solid #e7edf5;
    border-radius: 10px;
    background: #f9fbff;
}

.admin .admin-apartments-inventory .shopping-add-form .button {
    flex: 0 0 auto;
}

.admin .admin-apartments-inventory .shopping-add-select {
    min-width: 170px;
}

.admin .admin-apartments-inventory .shopping-add-select,
.admin .admin-apartments-inventory .shopping-add-select select {
    width: 100%;
}

.admin .admin-apartments-inventory .shopping-qty-input {
    width: 64px;
    text-align: center;
}

.admin .admin-apartments-inventory .shopping-custom-title-input {
    width: 180px;
    flex: 0 0 180px;
}

.admin .admin-apartments-inventory .shopping-custom-desc-input {
    flex: 1 1 260px;
    width: auto;
    min-width: 180px;
}

.admin .admin-apartments-inventory .shopping-save-btn {
    align-self: flex-start;
    flex: 0 0 auto;
}

.admin .admin-apartments-inventory .shopping-inline-form .input.is-small,
.admin .admin-apartments-inventory .shopping-inline-form .select.is-small select,
.admin .admin-apartments-inventory .shopping-inline-form .button.is-small {
    height: 2.15rem !important;
    min-height: 2.15rem !important;
    line-height: 1.2 !important;
}

@media (max-width: 768px) {
    .admin .admin-apartments-inventory .booking-nav-side {
        display: none !important;
    }

    .admin .admin-apartments-inventory .shopping-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .admin .admin-apartments-inventory .shopping-add-form {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .admin .admin-apartments-inventory .shopping-add-form .select,
    .admin .admin-apartments-inventory .shopping-add-form .select select,
    .admin .admin-apartments-inventory .shopping-add-form .input {
        width: 100% !important;
        max-width: none;
    }

    .admin .admin-apartments-inventory .shopping-qty-input {
        width: 100% !important;
    }

    .admin .admin-apartments-inventory .shopping-add-form .button,
    .admin .admin-apartments-inventory .shopping-save-btn {
        width: 100%;
        justify-content: center;
    }
}

.ical-subscribe {
    position: relative;
}

.ical-info {
    margin-top: 8px;
    background: #f5f7fa;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 320px;
}

.ical-info .input {
    font-size: 0.85em;
    font-family: monospace;
}

@media (max-width: 700px) {
    .ical-info {
        min-width: 0;
        width: 100%;
    }
}

/* Past/current row styling for admin tables */
.admin tr.is-past {
    opacity: 0.5;
    background: #f3f3f5;
}

.admin tr.is-past:hover {
    opacity: 0.85;
}

.admin table[data-current-highlight="true"] tr.is-current {
    background: #eef4ff;
    border-left: 3px solid #3273dc;
}

/* Gastname in der Buchungsliste: Einstieg ins Gast-Popup. Sieht aus wie der
   Name, nicht wie ein Knopf - er steht in einer Datenzeile, und ein
   Schaltflaechen-Rahmen wuerde die Spalte unruhig machen. Dass er anklickbar
   ist, zeigt sich beim Zeigen darauf. */
.admin .booking-guest-link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    text-decoration-color: #b6c2d2;
}
.admin .booking-guest-link:hover,
.admin .booking-guest-link:focus-visible {
    color: #3273dc;
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}

.admin .guest-portal-link {
    font-size: 0.8em;
    color: #3273dc;
    text-decoration: none;
    opacity: 0.7;
}

.admin .guest-portal-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.admin tr.is-cancelled {
    opacity: 0.5;
    background: #fef2f2;
    text-decoration: line-through;
}

.admin tr.is-cancelled:hover {
    opacity: 0.85;
}

.admin tr.is-cancelled td:last-child {
    text-decoration: none;
}

.admin-calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.admin-calendar-card {
    background: #fff;
    border: 1px solid #e6ebf1;
    padding: 16px;
    box-shadow: 0 10px 22px rgba(3, 47, 90, 0.08);
}

.admin-calendar-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.admin-calendar-count {
    background: #eef2f5;
    color: #032f5a;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.85em;
}

.admin-calendar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.admin-calendar-item {
    border: 1px solid #e6ebf1;
    border-radius: 10px;
    padding: 10px 12px;
    background: #f9fbfc;
    transition: opacity 0.15s;
}

.admin-calendar-item.is-past {
    opacity: 0.5;
    background: #f3f3f5;
    border-color: #ddd;
}

.admin-calendar-item.is-past:hover {
    opacity: 0.85;
}

.admin-calendar-item.is-current {
    border-color: #3273dc;
    border-width: 2px;
    background: #eef4ff;
    box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.15);
}

.admin-calendar-item__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 600;
    color: #032f5a;
}

.admin-calendar-item__meta {
    margin-top: 4px;
    color: #5b6b7c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-calendar-id {
    color: #032f5a;
    font-weight: 700;
}

.admin-calendar-name {
    color: #1b1b1b;
    font-weight: 600;
}

.admin-calendar-badge {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.78em;
    font-weight: 700;
    background: #e6ebf1;
    color: #1b1b1b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-calendar-badge.status-confirmed {
    background: #d6f2e4;
    color: #1b6f44;
}

.admin-calendar-badge.status-paid {
    background: #d9e7f9;
    color: #1c4c86;
}

.admin-calendar-badge.status-unconfirmed {
    background: #fde8d2;
    color: #8a4a10;
}

.admin-calendar-badge.status-blocked,
.admin-calendar-badge.status-closed {
    background: #f7d3d7;
    color: #8a1f2d;
}

.admin-calendar-badge.status-finished {
    background: #e0e4e8;
    color: #555;
}

.admin-calendar-badge.status-cancelled {
    background: #f7d3d7;
    color: #8a1f2d;
}

.admin-calendar-empty {
    color: #5b6b7c;
    margin: 0;
}

.admin .admin-calendar-box .calendar-month {
    margin-bottom: 18px;
}

.admin .admin-calendar-box .calendar-day {
    min-height: 122px;
    align-items: flex-start;
}

.admin .admin-day-prices {
    width: 100%;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin .admin-day-prices .calendar-day-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.62rem;
    padding: 1px 5px;
}

.admin .admin-day-price-apt {
    font-weight: 600;
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin .admin-day-events {
    width: 100%;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin .admin-day-event {
    display: block;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 0.68rem;
    line-height: 1.25;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.8);
    color: #1b1b1b;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.admin .admin-day-event--booking {
    border-left: 3px solid #1c4c86;
}

.admin .admin-day-event--booking:hover {
    background: #ffffff;
    border-color: #1c4c86;
}

.admin .admin-day-event--block {
    border-left: 3px solid #8a1f2d;
}

.admin .admin-day-event-text {
    display: block;
    font-weight: 600;
}

.admin .admin-day-event-apt {
    display: block;
    opacity: 0.78;
}

/* Admin header – slim bar (public site keeps the tall logo header) */
.admin .admin-header {
    position: sticky;
    top: 0;
    z-index: 900;
    --header-height: 48px;
    --header-height-shrink: 48px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.admin .admin-header .navbar,
.admin .admin-header .navbar-brand,
.admin .admin-header .navbar-menu {
    min-height: 48px;
}

.admin .admin-header .navbar-item,
.admin .admin-header .navbar-link {
    font-size: 0.875rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.admin .admin-header .brand-text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin .admin-header .navbar-burger {
    height: 48px;
    width: 48px;
}

/* Admin dropdown menu */
.admin .navbar-dropdown {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 200px;
}
.admin .navbar-dropdown .navbar-item {
    font-size: 0.9rem;
    padding: 8px 16px;
}
.admin .navbar-dropdown .navbar-item:hover {
    background: #f0f4f8;
}
.admin .has-dropdown .navbar-link::after {
    border-color: #5b6b7c;
}

/* Two-column settings dropdown (desktop only; the burger menu stays single
   column via the mobile rules below). Groups flow across two columns and are
   kept intact with break-inside. */
@media screen and (min-width: 1024px) {
    .admin .navbar-dropdown.admin-settings-dropdown {
        width: 32rem;
        max-width: min(32rem, calc(100vw - 1.5rem));
        max-height: min(70vh, 36rem);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .admin .admin-settings-dropdown .admin-settings-grid {
        columns: 2;
        column-gap: 0.75rem;
        padding: 0 0.25rem;
    }
    .admin .admin-settings-dropdown .admin-settings-group {
        break-inside: avoid;
        padding-bottom: 0.4rem;
    }
}

.admin main.section {
    padding-top: 24px;
}

/* Admin table scrolling (all screen sizes) */
.admin {
    overflow-x: hidden;
}

.admin .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
}

.admin .table-wrapper {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e6ebf1;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(3, 47, 90, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    background-color: #fff;
    padding: 14px;
    margin-bottom: 1.4rem;
}

.admin .table-wrapper:hover {
    box-shadow: 0 10px 22px rgba(3, 47, 90, 0.12);
}

.admin .table-wrapper > .admin-table-toolbar {
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid #e8edf3;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
}

.admin .table-wrapper > .table {
    background: transparent;
}

.admin .table-wrapper > .admin-table-pagination {
    margin-top: 12px;
}

.admin .table-wrapper.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin .table-wrapper.table-wrapper--plain {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin-bottom: 0.75rem;
}

.admin .table-wrapper.table-wrapper--plain:hover {
    box-shadow: none;
    transform: none;
}

.admin .table-wrapper.table-wrapper--plain > .admin-table-toolbar {
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid #e8edf3;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 8px 10px;
}

.admin .table {
    width: 100%;
}

@media (min-width: 1024px) {
    .admin .table-container {
        overflow-x: hidden;
    }

    .admin .table th,
    .admin .table td {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .admin .admin-table th {
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
    }

    .admin .table td code {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* Admin mobile responsiveness */
@media (max-width: 1023px) {
    /* Burger menu must stay within the viewport and scroll when long
       (Einstellungen has many grouped entries). position:fixed so it is
       not clipped by .admin / .container overflow-x:hidden. */
    .admin .admin-header .container {
        overflow: visible;
    }

    .admin .admin-header .navbar-menu.is-active {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        top: 48px;
        width: 100%;
        max-height: calc(100dvh - 48px);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
        z-index: 901;
    }

    .admin .has-dropdown .navbar-dropdown {
        display: none;
        position: static;
        left: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0 0.35rem 0.75rem;
    }
    .admin .has-dropdown.is-active .navbar-dropdown {
        display: block;
    }
    .admin .admin-settings-dropdown .admin-settings-grid {
        columns: 1;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    .admin .admin-settings-dropdown .admin-settings-group {
        break-inside: auto;
        padding-bottom: 0.15rem;
    }
    .admin .admin-settings-dropdown .navbar-item {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .admin .has-dropdown .navbar-link::after {
        display: inline-block;
        transition: transform 0.2s;
    }
    .admin .has-dropdown.is-active .navbar-link::after {
        transform: rotate(135deg);
        margin-top: 4px;
    }

    .admin .admin-header {
        position: fixed;
        width: 100%;
        overflow: visible;
    }

    .admin main.section {
        padding-top: 56px;
        padding-left: 8px;
        padding-right: 8px;
        padding-bottom: 12px;
    }

    .admin .section {
        padding: 12px 8px;
    }

    .admin .container {
        padding-left: 8px;
        padding-right: 8px;
        max-width: 100%;
    }

    .admin main .container {
        overflow-x: hidden;
    }

    .admin .table-container {
        margin: 0 -4px;
        padding: 0 4px;
    }

    .admin .table-wrapper {
        padding: 10px;
        margin: 0 0 1rem;
    }

    .admin .table-wrapper > .admin-table-toolbar {
        padding: 8px;
    }

    .admin .table {
        min-width: 600px;
    }

    .admin .table th,
    .admin .table td {
        white-space: nowrap;
        font-size: 0.85em;
        padding: 6px 8px;
    }

    .admin .buttons.are-small {
        flex-wrap: wrap;
        gap: 4px;
    }

    .admin h2 {
        font-size: 1.3rem;
    }

    .admin h3 {
        font-size: 1.1rem;
    }

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


    .admin .modal-card {
        margin: 8px;
        max-width: calc(100vw - 16px);
        max-height: 90vh;
    }

    .admin .modal-card-body {
        overflow-y: auto;
        max-height: 70vh;
    }

    .admin .field .input,
    .admin .field .textarea,
    .admin .field .select select {
        font-size: 0.9em;
    }
}

@media (max-width: 700px) {
    .admin .admin-table-toolbar {
        align-items: stretch;
    }

    .admin .admin-table-toolbar__group,
    .admin .admin-table-toolbar__group--right {
        width: 100%;
        justify-content: flex-start;
    }

    .admin .admin-table-toolbar .button,
    .admin .admin-table-toolbar select,
    .admin .admin-table-toolbar .input,
    .admin .admin-table-toolbar .select {
        width: 100%;
    }

    .admin .admin-table-search,
    .admin .admin-table-column-filter,
    .admin .admin-table-column-filter select,
    .admin .admin-table-bulk-select,
    .admin .admin-table-bulk-select select {
        width: 100%;
        max-width: none;
    }

    .admin .admin-table-toolbar .admin-table-bulk-apply.button {
        margin-left: 0;
    }

    .admin .admin-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    .admin .admin-table thead {
        display: none;
    }

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

    .admin .admin-table tr {
        background: #fff;
        border: 1px solid #e6ebf1;
        border-radius: 10px;
        padding: 10px 12px;
        box-shadow: 0 6px 14px rgba(3, 47, 90, 0.08);
    }

    .admin .admin-table td {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 6px 0;
        white-space: normal;
    }

    .admin .admin-table td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        font-weight: 600;
        color: #5b6b7c;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .admin .admin-table td[data-label="Auswahl"]::before {
        content: '';
    }

    .admin .admin-has-selection .admin-table td.admin-select-cell {
        padding-top: 0;
    }

    .admin .admin-has-selection .admin-table td.admin-select-cell input[type="checkbox"] {
        margin-left: 2px;
    }

    .admin .admin-table tbody tr.is-past,
    .admin .admin-table tbody tr.is-current,
    .admin .admin-table tbody tr.is-cancelled {
        border-left: none;
    }
}

.confirm-page {
    text-align: center;
    padding: 40px 20px;
    max-width: 600px;
    margin: 0 auto;
}

.confirm-summary {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px 24px;
    margin: 20px auto;
    text-align: left;
}

.confirm-details {
    width: 100%;
    border-collapse: collapse;
}
.confirm-details td {
    padding: 6px 8px;
    border-bottom: 1px solid #edf2f7;
    font-size: 0.92rem;
}
.confirm-details tr:last-child td {
    border-bottom: none;
}
.confirm-details td:first-child {
    width: 120px;
    color: #5a6a7a;
    white-space: nowrap;
}

.confirm-cost-items {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 18px;
    margin: 12px auto;
    text-align: left;
}
.confirm-cost-items h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    color: #2c3e50;
}
.confirm-cost-items .confirm-details {
    table-layout: fixed;
    width: 100%;
}
.confirm-cost-items thead th {
    font-size: 0.82rem;
    color: #5a6a7a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 6px 8px 8px;
    border-bottom: 2px solid #e2e8f0;
    text-align: left;
}
.confirm-cost-items tbody td {
    padding: 8px 8px;
    border-bottom: 1px solid #edf2f7;
    font-size: 0.95rem;
    line-height: 1.35;
}
.confirm-cost-items th,
.confirm-cost-items td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    max-width: 0;
}
.confirm-cost-items th:nth-child(1),
.confirm-cost-items td:nth-child(1) {
    width: 58%;
}
.confirm-cost-items th:nth-child(2),
.confirm-cost-items td:nth-child(2) {
    width: 22%;
    text-align: right;
}
.confirm-cost-items th:nth-child(3),
.confirm-cost-items td:nth-child(3) {
    width: 20%;
}
.confirm-item-label {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.confirm-item-meta {
    display: block;
    margin-top: 2px;
    color: #7a8a9a;
    font-size: 0.86em;
    font-weight: 400;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.confirm-cost-items .tag {
    padding: 3px 8px;
    font-size: 0.78em;
    white-space: nowrap;
}
.confirm-open-amount {
    background: linear-gradient(135deg, #e8f4fd 0%, #f0f7ff 100%);
    border: 1px solid #d0e3f0;
    border-radius: 10px;
    padding: 14px 20px;
    margin: 16px auto;
    text-align: center;
    font-size: 1.05rem;
    color: #1a3a5c;
}
.confirm-open-amount .open-amount-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2563eb;
    margin-left: 0.4rem;
}
.confirm-actions {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* ---- Welcome Card (Block-Renderer) ---- */
.block-welcomecard {
    background: linear-gradient(140deg, var(--surface-card, #fff) 0%, color-mix(in srgb, var(--brand-primary, #3273dc) 8%, var(--surface-card, #fff)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-primary, #3273dc) 18%, transparent);
}
.block-welcomecard .welcomecard-icon {
    font-size: 3rem;
    line-height: 1;
    color: var(--brand-primary, #3273dc);
    margin-bottom: 10px;
}
.block-welcomecard .welcomecard-icon-glyph { font-size: 3rem; }
.block-welcomecard .welcomecard-title {
    font-size: 1.6rem;
    margin: 4px 0 12px;
    color: var(--brand-primary, #3273dc);
}
.block-welcomecard .welcomecard-content {
    max-width: 640px;
    margin: 0 auto;
}

/* ---- Guest Welcome Modal & Booking-Hilfe (einheitliches Overlay) ---- */
.guest-welcome-modal {
    z-index: 60;
}
.guest-welcome-modal .modal-background {
    background: rgba(15, 25, 50, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.32s ease;
}
.guest-welcome-modal .modal-content {
    width: min(680px, 92vw);
    max-height: 90vh;
    overflow: auto;
    transform: translateY(40px) scale(0.92);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1.2, 0.36, 1), opacity 0.32s ease;
}
.guest-welcome-modal.is-active .modal-background { opacity: 1; }
.guest-welcome-modal.is-active .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.guest-welcome-modal.is-closing .modal-background { opacity: 0; }
.guest-welcome-modal.is-closing .modal-content {
    transform: translateY(20px) scale(0.96);
    opacity: 0;
}

.guest-welcome-card {
    border-radius: 18px;
    box-shadow: 0 24px 60px -20px rgba(15, 25, 50, 0.45);
    background: linear-gradient(155deg, #ffffff 0%, color-mix(in srgb, var(--brand-primary, #3273dc) 12%, #fff) 100%);
    overflow: hidden;
    position: relative;
}
.guest-welcome-card::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto auto;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary, #3273dc) 35%, transparent) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0.55;
}
.guest-welcome-icon {
    font-size: 4.5rem;
    line-height: 1;
    color: var(--brand-primary, #3273dc);
    margin-bottom: 12px;
    display: inline-block;
    transform-origin: center;
    animation: guestWelcomePop 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) 0.15s both;
}
.guest-welcome-icon-glyph { font-size: 4.5rem; }
.guest-welcome-greeting {
    font-size: 1.85rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--brand-primary, #3273dc);
    animation: guestWelcomeFadeUp 0.55s ease 0.3s both;
}
.guest-welcome-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(15, 25, 50, 0.78);
    margin: 0 0 14px;
    animation: guestWelcomeFadeUp 0.55s ease 0.42s both;
}
.guest-welcome-body {
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(15, 25, 50, 0.85);
    margin: 0 auto 18px;
    max-width: 540px;
    animation: guestWelcomeFadeUp 0.55s ease 0.55s both;
}
.guest-welcome-actions {
    margin-top: 20px;
    animation: guestWelcomeFadeUp 0.55s ease 0.7s both;
}
.guest-welcome-cta {
    padding-left: 28px !important;
    padding-right: 24px !important;
    font-weight: 600;
    box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--brand-primary, #3273dc) 60%, transparent);
}
.guest-welcome-cta .icon { margin-left: 6px; }

.guest-booking-help-modal .guest-welcome-card {
    text-align: left;
}
.guest-booking-help-modal .guest-welcome-body {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.guest-booking-help-modal-content.guest-welcome-modal-content {
    width: min(720px, 94vw);
}
.guest-booking-help-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}
.guest-booking-help-shopping-wrap {
    max-height: min(38vh, 280px);
    overflow-y: auto;
    margin-top: 0.35rem;
    padding-right: 4px;
}
.guest-booking-help-in-stock-wrap {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.guest-booking-help-in-stock-heading {
    margin-top: 0.35rem;
}
.guest-booking-help-in-stock-list-scroll {
    max-height: min(30vh, 200px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.2rem;
    padding-right: 4px;
}
.guest-booking-help-in-stock-list {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}
.guest-booking-help-in-stock-item {
    margin: 0.15rem 0;
}
.guest-booking-help-in-stock-label {
    display: block;
    font-weight: 600;
    line-height: 1.25;
}
.guest-booking-help-in-stock-meta {
    display: block;
    font-size: 0.85em;
    line-height: 1.2;
    opacity: 0.82;
    margin-top: 0.08rem;
    padding-left: 0.05rem;
}
.guest-booking-help-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 1.25rem;
}
.guest-booking-help-actions .button.is-large {
    width: 100%;
}

@keyframes guest-tab-arrival-pulse {
    0%, 100% { box-shadow: none; }
    40% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45); }
}
.guest-tabs a.guest-tab-arrival-pulse {
    animation: guest-tab-arrival-pulse 0.95s ease-in-out 3;
    border-radius: 999px;
}

@keyframes guestWelcomePop {
    0%   { transform: scale(0.3) rotate(-12deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(4deg);  opacity: 1; }
    100% { transform: scale(1)    rotate(0);     opacity: 1; }
}
@keyframes guestWelcomeFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ---- Abschieds-Fenster (farewell-modal.blade.php): Aufbau und Einblenden wie das Willkommen-Fenster,
   dazu eine kleine Szene (Auto faehrt los) und Konfetti. ---- */
.guest-farewell-card { padding-top: 1.25rem !important; }
/* Wie das Willkommen-Fenster ohne Scrollbalken: Inhalt ist kurz, Szene und Abstaende schrumpfen bei wenig Hoehe. */
.guest-farewell-modal .modal-content { overflow: hidden; max-height: none; }
.guest-farewell-modal .guest-welcome-body { margin-bottom: 6px; }
.guest-farewell-modal .guest-welcome-body p { margin-bottom: .6rem; }
@media (max-height: 640px) {
    .guest-farewell-scene { height: 72px !important; margin-bottom: 8px; }
    .guest-farewell-card { padding: 1rem !important; }
    .guest-farewell-modal .guest-welcome-greeting { font-size: 1.4rem; }
    .guest-farewell-modal .guest-welcome-title { font-size: 1.05rem; margin-bottom: 8px; }
    .guest-farewell-modal .guest-welcome-actions { margin-top: 10px; }
}
.guest-farewell-scene {
    position: relative;
    height: 120px;
    margin: 0 auto 14px;
    max-width: 460px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 62%, #fef3c7 100%);
    animation: guestWelcomeFadeUp 0.55s ease 0.1s both;
}
.guest-farewell-scene__sun {
    position: absolute; right: 38px; top: 14px; width: 34px; height: 34px; border-radius: 50%;
    background: #fbbf24; box-shadow: 0 0 0 8px rgba(251, 191, 36, .25), 0 0 0 18px rgba(251, 191, 36, .12);
    animation: guestFarewellSun 3.2s ease-in-out infinite alternate;
}
.guest-farewell-scene__hill { position: absolute; bottom: 22px; border-radius: 50% 50% 0 0; }
.guest-farewell-scene__hill--back { left: -8%; width: 70%; height: 62px; background: #a7d7b8; }
.guest-farewell-scene__hill--front { right: -12%; width: 78%; height: 46px; background: #7cc49a; }
.guest-farewell-scene__road {
    position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: #475569;
}
.guest-farewell-scene__road::after {
    content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px;
    background: repeating-linear-gradient(90deg, #f8fafc 0 18px, transparent 18px 36px);
    animation: guestFarewellRoad 0.7s linear infinite;
}
.guest-farewell-scene__car {
    position: absolute; bottom: 6px; left: 0; line-height: 1;
    color: var(--brand-primary, #3273dc);
    animation: guestFarewellDrive 2.6s cubic-bezier(.3, .1, .3, 1) 0.35s both, guestFarewellBob 0.45s ease-in-out 3s infinite alternate;
}
.guest-farewell-scene__car-glyph { font-size: 2.9rem !important; display: block; }
.guest-farewell-check {
    display: flex; flex-direction: column; gap: .25rem; text-align: left;
    margin: 0 auto .7rem; padding: .55rem .9rem; max-width: 420px;
    border-radius: 12px; border: 1px solid #fcd34d; background: #fffbeb; color: #78350f;
}
.guest-farewell-check strong { color: #78350f; }
.guest-farewell-check span { font-size: .95rem; line-height: 1.45; }
.guest-farewell-wish { font-weight: 600; margin-bottom: 0 !important; }
.guest-farewell-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.guest-farewell-confetti span {
    position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; opacity: 0;
    animation: guestFarewellConfetti 2.6s cubic-bezier(.2, .6, .4, 1) both;
}
.guest-farewell-modal.is-active .guest-farewell-confetti span { animation-play-state: running; }
.guest-farewell-confetti span:nth-child(3n)   { background: #f59e0b; }
.guest-farewell-confetti span:nth-child(3n+1) { background: var(--brand-primary, #3273dc); }
.guest-farewell-confetti span:nth-child(3n+2) { background: #10b981; border-radius: 50%; height: 9px; }
.guest-farewell-confetti span:nth-child(1)  { left: 4%;  animation-delay: .30s; }
.guest-farewell-confetti span:nth-child(2)  { left: 10%; animation-delay: .55s; }
.guest-farewell-confetti span:nth-child(3)  { left: 16%; animation-delay: .38s; }
.guest-farewell-confetti span:nth-child(4)  { left: 22%; animation-delay: .72s; }
.guest-farewell-confetti span:nth-child(5)  { left: 28%; animation-delay: .45s; }
.guest-farewell-confetti span:nth-child(6)  { left: 34%; animation-delay: .90s; }
.guest-farewell-confetti span:nth-child(7)  { left: 40%; animation-delay: .33s; }
.guest-farewell-confetti span:nth-child(8)  { left: 46%; animation-delay: .66s; }
.guest-farewell-confetti span:nth-child(9)  { left: 52%; animation-delay: .50s; }
.guest-farewell-confetti span:nth-child(10) { left: 58%; animation-delay: .82s; }
.guest-farewell-confetti span:nth-child(11) { left: 64%; animation-delay: .36s; }
.guest-farewell-confetti span:nth-child(12) { left: 70%; animation-delay: .60s; }
.guest-farewell-confetti span:nth-child(13) { left: 76%; animation-delay: .42s; }
.guest-farewell-confetti span:nth-child(14) { left: 82%; animation-delay: .95s; }
.guest-farewell-confetti span:nth-child(15) { left: 88%; animation-delay: .52s; }
.guest-farewell-confetti span:nth-child(16) { left: 94%; animation-delay: .70s; }
.guest-farewell-confetti span:nth-child(17) { left: 37%; animation-delay: 1.05s; }
.guest-farewell-confetti span:nth-child(18) { left: 61%; animation-delay: 1.15s; }
@keyframes guestFarewellDrive {
    0%   { left: -18%; }
    70%  { left: 40%; }
    100% { left: 36%; }
}
@keyframes guestFarewellBob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes guestFarewellRoad { from { transform: translateX(0); } to { transform: translateX(-36px); } }
@keyframes guestFarewellSun { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes guestFarewellConfetti {
    0%   { opacity: 0; transform: translateY(0) rotate(0); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(460px) rotate(540deg); }
}
@media (max-width: 480px) {
    .guest-farewell-scene { height: 96px; }
    .guest-farewell-scene__car-glyph { font-size: 2.4rem !important; }
}
@media (prefers-reduced-motion: reduce) {
    .guest-farewell-scene, .guest-farewell-scene *, .guest-farewell-scene__road::after { animation: none !important; }
    .guest-farewell-scene__car { left: 36%; }
    .guest-farewell-confetti { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .guest-welcome-modal .modal-background,
    .guest-welcome-modal .modal-content,
    .guest-welcome-icon,
    .guest-welcome-greeting,
    .guest-welcome-title,
    .guest-welcome-body,
    .guest-welcome-actions {
        animation: none !important;
        transition: opacity 0.2s linear !important;
        transform: none !important;
    }
}

.guest-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 8px;
    margin-top: 2px;
    margin-bottom: 2px;
    min-height: 0;
}
.guest-header-titles {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.45rem;
    row-gap: 0;
}
.guest-header-titles h2 {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1.1;
    max-height: 1.15em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}
h3.guest-apartment-name {
    margin: 0;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    color: #5b6b7c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.guest-header-right {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 6px;
}
.guest-header-handy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}
.guest-header-handy .guest-qr-inline {
    margin-left: 0;
}
.guest-header-handy .ops-karma {
    justify-content: center;
    width: 100%;
    border: 0;
    cursor: pointer;
}
.guest-header-handy .ops-karma__value {
    display: inline;
}
@media (max-width: 600px) {
    .guest-header {
        grid-template-columns: 1fr auto;
        gap: 4px 8px;
    }
    .guest-header-titles {
        grid-column: 1 / 2;
        min-width: 0;
    }
    .guest-header-right {
        grid-column: 2 / 3;
    }
    .guest-date-box {
        grid-column: 1 / -1;
        order: -1;
    }
}

.guest-date-box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #ffffff;
    border: 1px solid #e6ebf1;
    border-radius: 8px;
    padding: 2px 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(3, 47, 90, 0.06);
    font-size: 0.8em;
    justify-self: center;
    width: fit-content;
    line-height: 1.25;
}

.guest-date-range {
    font-weight: 700;
    color: #032f5a;
}

.guest-date-time {
    margin-top: 0;
    color: #5b6b7c;
    font-size: 0.92em;
}

@media (max-width: 700px) {
    .guest-page .section {
        padding-top: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .guest-date-box {
        display: none;
    }
}


.guest-lang-flags {
    display: flex;
    align-items: center;
    gap: 4px;
}

.guest-chat-restore-btn {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #d0dae5;
    border-radius: 999px;
    background: #fff;
    color: #3f5f82;
    line-height: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.guest-chat-restore-btn:hover {
    background: #eef5fc;
    border-color: #b8cde2;
    color: #274d77;
}

.guest-chat-restore-btn .material-symbols-rounded {
    display: block;
    font-size: 15px;
    line-height: 1;
    transform: translateY(1px);
}

.guest-lang-flag {
    font-size: 1.15rem;
    text-decoration: none;
    line-height: 1;
    opacity: 0.4;
    transition: opacity 0.15s;
    cursor: pointer;
}

.guest-lang-flag:hover {
    opacity: 0.8;
}

.guest-lang-flag.active {
    opacity: 1;
    cursor: default;
}

.guest-page .section {
    padding-top: 0;
}

.guest-chat-card {
    margin: 8px 0 14px;
    padding: 12px;
}

.guest-chat-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.guest-chat-card-head h4 {
    margin: 0;
    font-size: 1rem;
}

.guest-chat-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #d8e0e9;
    border-radius: 999px;
    background: #fff;
    color: #6d7c8c;
    cursor: pointer;
}

.guest-chat-thread {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}

.guest-chat-item {
    width: 84%;
    max-width: 84%;
    min-width: 70%;
    position: relative;
}

.guest-chat-item--landlord {
    align-self: flex-start;
}

.guest-chat-item--guest {
    align-self: flex-end;
}

.guest-chat-item-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.guest-chat-item--guest .guest-chat-item-row {
    flex-direction: row-reverse;
}

.guest-chat-item-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    border: 1px solid #d8e2ec;
    background: #f4f7fb;
    color: #51677d;
}

.guest-chat-item--guest .guest-chat-item-avatar {
    border-color: #bfe3cb;
    background: #e8f7ec;
    color: #29533b;
}

.guest-chat-item-avatar .material-symbols-rounded {
    font-size: 16px;
    line-height: 1;
}

.guest-chat-item-bubble {
    border-radius: 16px;
    padding: 9px 12px;
    font-size: 1.0rem !important;
    line-height: 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: 0 6px 16px rgba(25, 45, 68, 0.08);
    min-width: 70%;
    margin: 5px;
    padding: 15px;
}

.guest-chat-item--landlord .guest-chat-item-bubble {
    background: linear-gradient(180deg, #eef4fb 0%, #e7eff8 100%);
    color: #23384d;
    border: 1px solid #d8e3ef;
    border-top-left-radius: 7px;
}

.guest-chat-item--guest .guest-chat-item-bubble {
    background: linear-gradient(180deg, #dff5e3 0%, #d2efdb 100%);
    color: #1f3a28;
    border: 1px solid #b9e1c7;
    border-top-right-radius: 7px;
}

.guest-chat-item-bubble-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
}

.guest-chat-item-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    opacity: 0.85;
}

.guest-chat-item-stamp {
    font-size: 0.67rem;
    color: #73879b;
    white-space: nowrap;
}

.guest-chat-item-text {
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 768px) {
    .guest-chat-item {
        width: 90%;
        min-width: 70%;
    }
}

.guest-chat-reply-actions {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    text-align: center;
}

.guest-chat-reply-actions .button.is-light {
    margin: 0 auto;
}

.guest-chat-input-label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #4c6178;
}

.guest-chat-input {
    font-size: 0.92rem;
}

.guest-chat-actions {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

#adminGuestChatThread .guest-chat-item-bubble {
    line-height: 0.5 !important;
    padding: 10px;
}

.guest-chat-actions .button.is-primary {
    min-height: 42px;
    padding: 0 22px;
    font-size: 0.98rem;
}

.guest-page .section .container {
    padding-top: 0;
}

.guest-page {
    background: #f7f9fb;
    color: #1b1b1b;
}

.guest-page .modal-card,
.guest-page .modal-card-head,
.guest-page .modal-card-body,
.guest-page .modal-card-foot,
.guest-page .table {
    background: #ffffff;
    color: #1b1b1b;
}

.guest-page .payment-method-modal-card {
    width: min(620px, calc(100vw - 32px));
}

.guest-page .payment-method-modal .modal-card-body {
    min-height: 430px;
}

.guest-page .payment-method-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid #d0e3f0;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(232, 244, 253, 0.92) 0%, rgba(240, 247, 255, 0.92) 100%);
}

.guest-page .payment-method-summary span {
    color: #52677f;
    font-size: 0.9rem;
    font-weight: 700;
}

.guest-page .payment-method-summary strong {
    color: #032f5a;
    font-size: 1.35rem;
}

.guest-page .payment-method-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.guest-page .payment-method-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 84px;
    padding: 14px 16px;
    border: 1px solid #d9e2ec;
    border-radius: 14px;
    background: #fff;
    color: #1a3a5c;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(3, 47, 90, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.guest-page .payment-method-option:hover,
.guest-page .payment-method-option.is-active {
    border-color: var(--brand-primary);
    box-shadow: 0 8px 18px rgba(3, 47, 90, 0.14);
}

.guest-page .payment-method-option.is-active {
    transform: translateY(-1px);
}

.guest-page .payment-method-option-title {
    font-weight: 800;
}

.guest-page .payment-method-option-meta {
    color: #667085;
    font-size: 0.84rem;
    line-height: 1.25;
}

.guest-page .payment-method-panel {
    min-height: 230px;
}

.guest-page .payment-method-panel[hidden] {
    display: none !important;
}

.guest-page .payment-method-panel[data-payment-panel="paypal"],
.guest-page .payment-method-panel--paypal {
    display: flex;
    justify-content: center;
    align-items: center;
}

.guest-page .payment-method-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px;
    border: 1px solid #d9e2ec;
    border-radius: 14px;
    background: #f8fafc;
    text-align: center;
    width: 100%;
}

.guest-page .payment-method-action-card p {
    margin: 0;
    color: #52677f;
    font-weight: 600;
}

.guest-page .payment-transfer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 18px;
    align-items: start;
}

.guest-page .payment-transfer-details dl {
    margin: 0;
}

.guest-page .payment-transfer-details div {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #eef2f6;
}

.guest-page .payment-transfer-details dt {
    color: #667085;
    font-size: 0.82rem;
    font-weight: 700;
}

.guest-page .payment-transfer-details dd {
    margin: 0;
    color: #1a3a5c;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.guest-page .payment-transfer-qr {
    padding: 10px;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    background: #fff;
    text-align: center;
}

.guest-page .payment-transfer-qr img,
.guest-page .guest-todo-wizard__pay img {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto;
}

.guest-page .payment-transfer-confirm {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

/* ── Vereinheitlichtes Erscheinungsbild für card-artige Container im Gäste-Portal ──
   Basisregeln für .card / .card.guest-card stehen im Unified-UI-Block am Anfang.
   Hier nur noch alte semantische Klassen, die noch nicht migriert sind. */
.guest-page .blue-card,
.guest-page .info-card,
.guest-page .pshop-category-card,
.guest-page .done-banner,
.guest-page .consumption-block-notice {
    border: 1px solid #e0e5ec;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    background: rgba(255, 255, 255, 0.92);
}

/* Blue-tinted cards keep their gradient with unified border/radius/shadow */
.guest-page .blue-card,
.guest-page .pshop-category-card,
.guest-page .done-banner.karma-portal-card,
.guest-page .weather-grid-card {
    background: linear-gradient(135deg, rgba(232, 244, 253, 0.92) 0%, rgba(240, 247, 255, 0.92) 100%);
    border-color: #d0e3f0;
}

/* Green done-banner keeps its color with unified border/radius/shadow */
.guest-page .done-banner {
    background: rgba(214, 242, 228, 0.92);
    border-color: #a8e0be;
}

.guest-page .guest-todo-inbox--alert {
    animation: guest-todo-banner-in 0.45s ease-out;
}

.guest-page .guest-todo-inbox--alert .done-banner-icon {
    animation: guest-todo-icon-pulse 1.8s ease-in-out infinite;
}

.guest-page .guest-todo-inbox--alert .done-banner-icon .material-symbols-rounded {
    font-size: 1.15rem;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.guest-page .guest-todo-inbox__why {
    font-weight: 400;
    line-height: 1.45;
    opacity: 0.92;
}

.guest-page .guest-todo-inbox__show {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto;
}

.guest-page .guest-todo-inbox__show:hover,
.guest-page .guest-todo-inbox__show:focus {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

@keyframes guest-todo-banner-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes guest-todo-icon-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .guest-page .guest-todo-inbox--alert,
    .guest-page .guest-todo-inbox--alert .done-banner-icon {
        animation: none;
    }
}

.guest-page #guest-todo-wizard.is-active {
    align-items: stretch;
    padding: 0.75rem;
}

.guest-page #guest-todo-wizard .guest-todo-wizard {
    position: relative;
    overflow: hidden;
    width: min(40rem, calc(100vw - 1.5rem));
    height: min(90dvh, calc(100dvh - 1.5rem));
    max-height: min(90dvh, calc(100dvh - 1.5rem));
    display: flex;
    flex-direction: column;
    margin: auto;
}

.guest-page #guest-todo-wizard .karma-action-modal-head {
    flex-shrink: 0;
    align-items: center;
    gap: 0.65rem;
    background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
    border-bottom-color: #fca5a5;
}

.guest-page #guest-todo-wizard .karma-action-modal-head .modal-card-title {
    flex: 1 1 auto;
    margin: 0;
    color: #7f1d1d;
    white-space: normal;
    line-height: 1.3;
}

.guest-page #guest-todo-wizard .karma-action-modal-head .guest-todo-wizard__count {
    margin-right: 0.15rem;
}

.guest-page .guest-todo-wizard__count {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a5281b;
    white-space: nowrap;
}

.guest-page #guest-todo-wizard .karma-action-modal-body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #fff7f7;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.guest-page #guest-todo-wizard .karma-action-modal-intro {
    color: #a5281b;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__foot .button.is-primary {
    background: #dc2626;
    border-color: #dc2626;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__foot .button.is-primary:hover,
.guest-page #guest-todo-wizard .guest-todo-wizard__foot .button.is-primary:focus {
    background: #b91c1c;
    border-color: #b91c1c;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__step p {
    margin: 0 0 0.75rem;
    line-height: 1.45;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__step {
    min-height: 0;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__step .ops-list,
.guest-page #guest-todo-wizard .guest-todo-wizard__step .guest-todo-wizard__pay,
.guest-page #guest-todo-wizard .guest-todo-wizard__step .guest-todo-wizard__form {
    width: 100%;
}

/* Ein "Alles erledigt" je Schritt, immer gleich: volle Breite, klebt unten im Schritt. Die kleinen
   "Alle erledigt"-Knoepfe je Kategorie (.ops-done-all) gibt es im Assistenten nicht – sie saehen anders aus und
   staenden mitten in der Liste. */
.guest-page #guest-todo-wizard .guest-todo-wizard__done-all {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 1rem;
    padding: .6rem 0 .2rem;
    background: linear-gradient(to bottom, rgba(255, 247, 247, 0), #fff7f7 35%);
}
.guest-page #guest-todo-wizard .ops-done-all { display: none; }

.guest-page #guest-todo-wizard .guest-todo-wizard__done-all .button {
    width: 100%;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__foot {
    flex-shrink: 0;
    justify-content: space-between;
    gap: 0.75rem;
    background: #fef2f2;
    border-top-color: #fca5a5;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__foot .button {
    min-width: 8rem;
    flex: 1 1 0;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__foot.is-close-only [data-todo-prev],
.guest-page #guest-todo-wizard .guest-todo-wizard__foot.is-close-only [data-todo-next] {
    display: none;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__foot:not(.is-close-only) [data-todo-close] {
    display: none;
}

.guest-page #guest-todo-wizard.is-step-done .karma-action-modal-head {
    background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
    border-bottom-color: #86efac;
}

.guest-page #guest-todo-wizard.is-step-done .karma-action-modal-head .modal-card-title {
    color: #14532d;
}

.guest-page #guest-todo-wizard.is-step-done .guest-todo-wizard__count {
    color: #15803d;
}

.guest-page #guest-todo-wizard.is-step-done .karma-action-modal-body {
    background: #f0fdf4;
}

.guest-page #guest-todo-wizard.is-step-overlay .guest-todo-wizard__scroll {
    overflow: hidden;
}

.guest-page #guest-todo-wizard.is-step-done .karma-action-modal-intro {
    color: #15803d;
}

.guest-page #guest-todo-wizard.is-step-done .guest-todo-wizard__foot {
    background: #ecfdf5;
    border-top-color: #86efac;
}

.guest-page #guest-todo-wizard.is-step-done .guest-todo-wizard__foot .button.is-primary {
    background: #16a34a;
    border-color: #16a34a;
}

.guest-page #guest-todo-wizard.is-step-done .guest-todo-wizard__foot .button.is-primary:hover,
.guest-page #guest-todo-wizard.is-step-done .guest-todo-wizard__foot .button.is-primary:focus {
    background: #15803d;
    border-color: #15803d;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__done {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.5rem;
    background: rgba(22, 163, 74, 0.78);
    color: #fff;
    text-align: center;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__done[hidden] {
    display: none;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__done-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.guest-page #guest-todo-wizard .guest-todo-wizard__done-badge .material-symbols-rounded {
    font-size: 4rem;
    color: #fff;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__done-points {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__done .button {
    margin-top: 0.35rem;
    background: #fff;
    border-color: #fff;
    color: #14532d;
    font-weight: 600;
}

.guest-page #guest-todo-wizard .guest-todo-wizard__done .button:hover,
.guest-page #guest-todo-wizard .guest-todo-wizard__done .button:focus {
    background: #ecfdf5;
    border-color: #ecfdf5;
    color: #14532d;
}

.guest-page .guest-todo-wizard__pay-line,
.guest-page .guest-todo-wizard__bank > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.guest-page .guest-todo-wizard__bank {
    margin: 0 0 0.75rem;
}

.guest-page .guest-todo-wizard__form .field {
    margin-bottom: 0.75rem;
}

@media (max-width: 700px) {
    .guest-page #guest-todo-wizard.is-active {
        padding: 0.5rem;
    }

    .guest-page #guest-todo-wizard .guest-todo-wizard {
        width: 100%;
        height: calc(100dvh - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .guest-page #guest-todo-wizard .guest-todo-wizard__foot {
        flex-direction: row;
        align-items: stretch;
    }

    .guest-page #guest-todo-wizard .guest-todo-wizard__foot .button {
        width: auto;
    }
}

.guest-page .guest-day-intro-modal.is-active {
    align-items: stretch;
    padding: 0.75rem;
}
.guest-page .guest-day-intro-modal .guest-todo-wizard {
    width: min(40rem, calc(100vw - 1.5rem));
    height: min(90dvh, calc(100dvh - 1.5rem));
    max-height: min(90dvh, calc(100dvh - 1.5rem));
    display: flex;
    flex-direction: column;
    margin: auto;
}
.guest-page .guest-day-intro-modal .karma-action-modal-head {
    flex-shrink: 0;
    background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
    border-bottom-color: #fca5a5;
}
.guest-page .guest-day-intro-modal .karma-action-modal-head .modal-card-title {
    color: #7f1d1d;
}
.guest-page .guest-day-intro-modal .karma-action-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff7f7;
}
.guest-page .guest-day-intro-modal .guest-todo-wizard__foot {
    flex-shrink: 0;
    justify-content: stretch;
    gap: 0.75rem;
    background: #fef2f2;
    border-top-color: #fca5a5;
}
.guest-page .guest-day-intro-modal .guest-todo-wizard__foot .button {
    flex: 1 1 auto;
    min-height: 3.25rem;
    font-size: 1.15rem;
    font-weight: 700;
}
.guest-page .guest-day-intro-modal .guest-todo-wizard__foot .button.is-primary {
    background: #dc2626;
    border-color: #dc2626;
}
.guest-page .guest-day-intro-modal .guest-todo-wizard__foot .button.is-primary:hover,
.guest-page .guest-day-intro-modal .guest-todo-wizard__foot .button.is-primary:focus {
    background: #b91c1c;
    border-color: #b91c1c;
}
/* Ein Fenster-Design, die Farbe zeigt den Stand: Rot = Pflicht offen, Gruen = erledigt, ruhiges Blaugrau = Info oder
   freiwillig ("Morgen geht es los", Zusatzoptionen, Mitbringen). Frueher war auch Freiwilliges alarmrot, und die
   Hinweis-Fenster vor An- und Abreise hatten ein eigenes blaues Vollbild-Design. */
.guest-page .guest-todo-tone-info .karma-action-modal-head,
.guest-page #guest-todo-wizard.is-step-optional:not(.is-step-done) .karma-action-modal-head {
    background: linear-gradient(135deg, #e0e7ef 0%, #f1f5f9 100%);
    border-bottom-color: #cbd5e1;
}
.guest-page .guest-todo-tone-info .karma-action-modal-head .modal-card-title,
.guest-page #guest-todo-wizard.is-step-optional:not(.is-step-done) .karma-action-modal-head .modal-card-title { color: #0f2a47; }
.guest-page #guest-todo-wizard.is-step-optional:not(.is-step-done) .guest-todo-wizard__count,
.guest-page #guest-todo-wizard.is-step-optional:not(.is-step-done) .karma-action-modal-intro { color: #334155; }
.guest-page .guest-todo-tone-info .karma-action-modal-body,
.guest-page #guest-todo-wizard.is-step-optional:not(.is-step-done) .karma-action-modal-body { background: #f8fafc; }
.guest-page .guest-todo-tone-info .guest-todo-wizard__foot,
.guest-page #guest-todo-wizard.is-step-optional:not(.is-step-done) .guest-todo-wizard__foot {
    background: #f1f5f9;
    border-top-color: #cbd5e1;
}
.guest-page .guest-todo-tone-info .guest-todo-wizard__foot .button.is-primary,
.guest-page #guest-todo-wizard.is-step-optional:not(.is-step-done) .guest-todo-wizard__foot .button.is-primary {
    background: var(--brand-primary, #032f5a);
    border-color: var(--brand-primary, #032f5a);
}
.guest-page .guest-day-intro-modal .delete { margin-left: auto; }
.guest-page .guest-day-intro-modal .guest-arrival-modal__lead,
.guest-page .guest-day-intro-modal .guest-departure-modal__lead { font-weight: 600; margin-bottom: .8rem; }
.guest-page .guest-day-intro p {
    margin: 0 0 0.85rem;
    line-height: 1.5;
    color: #7f1d1d;
}
.guest-page .guest-day-intro__sub {
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #7f1d1d;
}
.guest-page .guest-day-intro__benefits {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
}
.guest-page .guest-day-intro__benefits li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.4rem;
    line-height: 1.4;
    color: #7f1d1d;
}
.guest-page .guest-day-intro__benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: #dc2626;
}
@media (max-width: 700px) {
    .guest-page .guest-day-intro-modal.is-active {
        padding: 0.5rem;
    }
    .guest-page .guest-day-intro-modal .guest-todo-wizard {
        width: 100%;
        height: calc(100dvh - 1rem);
        max-height: calc(100dvh - 1rem);
    }
}

/* Blue variant for informational done-banner (e.g. departure day hint) */
.guest-page .done-banner.done-banner--info {
    background: rgba(232, 244, 253, 0.92);
    border-color: #b7d6ec;
    color: #1b4f7a;
}

.guest-page .done-banner.done-banner--info .done-banner-icon {
    background: #2b6fa3;
}

.guest-page .done-banner.done-banner--warning {
    background: rgba(255, 237, 213, 0.94);
    border-color: #fdba74;
    color: #9a3412;
}

.guest-page .done-banner.done-banner--warning .done-banner-icon {
    background: #c2410c;
}

.guest-page .payment-status-banner {
    align-items: flex-start;
}

.guest-page .payment-status-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.guest-page .payment-status-text span {
    font-size: 0.92rem;
    font-weight: 600;
}

.guest-page .done-banner.done-banner--warning .payment-status-text strong {
    color: #7c2d12;
}

.guest-page .payment-status-action {
    margin-left: auto;
}

/* Der Rueckgaengig-Knopf traegt ueberall dieselbe Faerbung - auch dort, wo er
   ohne eigenes Formular auskommen muss (innerhalb des Abreise-Formulars). */
.guest-page .done-banner.done-banner--warning .payment-status-action .button,
.guest-page .done-banner.done-banner--warning .payment-status-undo {
    background: #fff7ed;
    border-color: #fb923c;
    color: #9a3412;
    font-weight: 700;
}

.guest-page .done-banner.done-banner--warning .payment-status-action .button:hover:not(:disabled),
.guest-page .done-banner.done-banner--warning .payment-status-undo:hover:not(:disabled) {
    background: #fed7aa;
    border-color: #f97316;
    color: #7c2d12;
}

/* Die Meldung ist ein Hinweis, keine Ueberschrift - deshalb kleiner als die
   grossen Banner am Seitenkopf. */
.guest-page .payment-status-banner { font-size: 0.95rem; }
.guest-page .payment-status-banner .payment-status-text strong { font-size: 1rem; }
.guest-page .payment-status-banner .done-banner-icon { width: 26px; height: 26px; font-size: 0.95rem; }

/* Die gemeldete Ueberweisung ist eine Quittung: eine Zeile, klein, ohne
   Ausrufezeichen davor. Der Rueckgaengig-Knopf bleibt rechts daneben. */
.guest-page .payment-status-banner--slim {
    align-items: center;
    padding: 6px 12px;
    font-size: 0.85rem;
}

.guest-page .payment-status-banner--slim .payment-status-text {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.guest-page .payment-status-banner--slim .payment-status-text strong,
.guest-page .payment-status-banner--slim .payment-status-text span {
    font-size: 0.85rem;
    font-weight: 600;
}

.guest-page .payment-status-banner--slim .payment-status-text strong:not(:last-child)::after {
    content: ' \00b7';
}


.guest-page .done-banner.karma-portal-card {
    align-items: flex-start;
    color: #1a3a5c;
    padding: 6px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem !important;
}

.guest-page .karma-portal-content {
    flex: 1;
    min-width: 0;
}

.guest-page .done-banner.karma-portal-card .karma-scale-labels {
    color: currentColor;
    font-size: 0.82rem;
    font-weight: 600;
}

.guest-page .done-banner.karma-portal-card .karma-scale-labels span {
    color: currentColor;
}

.guest-page .done-banner.karma-portal-card .karma-scale-labels .karma-scale-label--bad {
    color: #8b1010;
}

.guest-page .done-banner.karma-portal-card .karma-scale-labels .karma-scale-label--good {
    color: #14853b !important;
}

.guest-page .done-banner.karma-portal-card .karma-meter-block .karma-scale-labels {
    font-size: 0.68rem;
}

.guest-page .done-banner.karma-portal-card .karma-portal-meter-ticks {
    color: inherit;
    opacity: 0.88;
}

.guest-page .done-banner .departure-today-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.guest-page .done-banner .departure-today-headline {
    display: block;
}

.guest-page .done-banner .departure-today-detail {
    display: block;
    font-size: 0.86em;
    font-weight: 500;
    opacity: 0.9;
}

/* Bitte oder Dank - immer nur eine der beiden Fassungen. Die display-Regeln
   oben wuerden das hidden-Attribut sonst ueberstimmen. */
.guest-page .done-banner .departure-today-headline[hidden],
.guest-page .done-banner .departure-today-detail[hidden] { display: none; }

/* Consumption block notice – unified radius/shadow, keeps left accent */
.guest-page .consumption-block-notice {
    background: rgba(240, 246, 251, 0.92);
    border-color: #d0e3f0;
    border-left: 3px solid #5a9fd4;
}

/* Inner weather sub-cards match the unified radius */
.guest-page .weather-card {
    border-radius: 14px;
}

@media (max-width: 700px) {
    .guest-page .payment-method-modal .modal-card-body {
        min-height: 480px;
    }

    .guest-page .payment-method-options,
    .guest-page .payment-transfer-layout {
        grid-template-columns: 1fr;
    }

    .guest-page .payment-method-action-card {
        align-items: center;
        flex-direction: column;
    }

    .guest-page .payment-transfer-qr {
        width: max-content;
        max-width: 100%;
        margin: 0 auto;
    }

    .guest-page .payment-status-banner {
        flex-wrap: wrap;
    }

    .guest-page .payment-status-action {
        width: 100%;
        margin-left: 42px;
    }

    .guest-page .guest-tabs {
        padding: 5px;
    }

    .guest-page .guest-tabs ul {
        width: max-content;
    }

    .guest-page .guest-tabs li {
        flex: 0 0 auto;
        min-width: 116px;
    }

    .guest-page .guest-tabs a.guest-tab-link {
        min-height: 36px;
        font-size: 0.86rem;
        padding: 7px 10px;
    }

    .apartment-tabs {
        overflow-x: auto;
        overflow-y: visible;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .apartment-tabs ul {
        flex-wrap: nowrap;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    .apartment-tabs li {
        flex: 0 0 auto;
        min-width: 128px;
    }

    .guest-page .table {
        display: block;
        overflow-x: auto;
        width: 100%;
    }

    .guest-page .table th,
    .guest-page .table td {
        color: #2e333d;
    }

    .guest-page .modal-card-body,
    .guest-page .modal-card-body *,
    .guest-page .modal-card-head,
    .guest-page .modal-card-head * {
        color: #1b1b1b;
    }

    /* Höhere Spezifität als .modal-card-body * — Primär-Buttons behalten helle Schrift auf farbigem Grund */
    .guest-page .modal-card-body a.button.is-primary,
    .guest-page .modal-card-body button.button.is-primary,
    .guest-page .modal-card-head a.button.is-primary,
    .guest-page .modal-card-head button.button.is-primary,
    .guest-page .modal-card-foot a.button.is-primary,
    .guest-page .modal-card-foot button.button.is-primary {
        color: #fff;
    }

    .guest-qr-inline {
        display: none !important;
    }
}

/* Force light mode globally via :root { color-scheme: light only } */

.guest-page .cost-total td {
    font-weight: 700;
    border-top: 2px solid #d6dde6;
}
.cost-open-badge {
    font-size: 0.82rem;
    font-weight: 700;
}
.guest-page .cost-row-negative td {
    color: #1a8a4a;
}
.cost-negative {
    color: #1a8a4a;
    font-weight: 600;
}

.guest-expired {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 50vh;
    padding: 40px 20px;
}

.guest-expired-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.guest-expired h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #032f5a;
    margin-bottom: 12px;
}

.guest-expired p {
    font-size: 1.1rem;
    color: #4a5568;
    line-height: 1.7;
}

.guest-actions-center {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Guest-Buttons nutzen jetzt reine Bulma-Klassen.
   Pille/Größenmodifier stehen im Unified-UI-Block am Anfang (.button.is-pill). */

.guest-page .button.is-primary {
    box-shadow: 0 8px 16px rgba(3, 47, 90, 0.2);
}

.done-banner .button.is-success {
    margin-left: auto;
}

.guest-qr-inline {
    margin-left: auto;
    height: auto !important;
    min-height: 0 !important;
    padding: 0.2rem 0.55rem !important;
    font-size: 0.78rem !important;
}

.guest-qr-inline .icon {
    width: 1rem !important;
    height: 1rem !important;
}

.guest-qr-inline .icon svg {
    width: 14px;
    height: 14px;
}

.payment-table {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.payment-table .table {
    font-size: 0.95rem;
    font-family: inherit;
    min-width: min(100%, 32rem);
}

/* Gruppen-Trenner mit Titel im Kachelraster. */
.guest-page .info-card-separator--titled {
    height: auto;
    background: none;
    margin: 18px 0 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.guest-page .info-card-separator--titled::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dfe4ea;
}
.guest-page .info-card-separator__title {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6f7a86;
}

/* Meldung ueber den Reitern (guest_todo_inbox_render): ein roter, freundlicher Satz statt einer Liste. Die Knoepfe
   stehen in den Karten "Vor deiner Anreise" / "Vor deiner Abreise"; nur wo keine dieser Karten zu sehen ist,
   zeigt die Meldung ihren eigenen Knopf zum Assistenten. */
.guest-page .guest-next {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 10px 14px;
    border: 1px solid #fca5a5;
    border-radius: 14px;
    background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
    color: #7f1d1d;
}
.guest-page .guest-next__icon { flex: 0 0 auto; font-size: 1.35rem; color: #dc2626; }
.guest-page .guest-next.guest-notice { flex-wrap: nowrap; max-width: none; }
.guest-page .guest-next__text { flex: 1 1 0; min-width: 0; line-height: 1.35; font-size: .95rem; }
.guest-page .guest-next__text strong { color: #7f1d1d; }
.guest-page .guest-next .guest-next__go { flex: 0 0 auto; width: auto; border-radius: 8px; font-weight: 700; background: #dc2626; border-color: #dc2626; color: #fff; }
.guest-page .guest-next__go:hover,
.guest-page .guest-next__go:focus { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.guest-page:has(.prearrival-card) .guest-next__go { display: none; }

/* Mitbringen: Haekchenliste mit fester Gutschrift je Artikel. */
.guest-page .bring-card { padding: 0.9rem 1rem 0.5rem; }
.guest-page .bring-card__intro { margin: 0 0 0.5rem; color: #4b5563; font-size: 0.92rem; }
.guest-page .bring-item { border-top: 1px solid #e5e9ee; margin: 0; }
.guest-page .bring-item:first-child { border-top: 0; }
.guest-page .bring-item__label { display: grid; grid-template-columns: 26px 1fr auto; gap: 0.6rem; align-items: center; padding: 0.55rem 0; cursor: pointer; }
.guest-page .bring-item__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.guest-page .bring-item__state { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; background: #eef1f4; color: #6f7a86; }
.guest-page .bring-item__state--knapp { background: #f6ecd6; color: #8a6a1f; }
.guest-page .bring-item__state--leer { background: #f9e7e2; color: #b3452b; }
.guest-page .bring-item__credit { font-variant-numeric: tabular-nums; font-weight: 700; color: #2f7a52; white-space: nowrap; }
.guest-page .bring-item input:disabled + .bring-item__text { opacity: 0.6; }

/* Auf dem Handy passt die Tabelle in die Breite, statt seitlich zu scrollen:
   schmale Abstaende, Status-Spalte darf umbrechen. */
@media screen and (max-width: 768px) {
    .payment-table .table {
        min-width: 0;
        width: 100%;
        font-size: 0.9rem;
    }

    .payment-table .table th,
    .payment-table .table td {
        padding: 0.45rem 0.35rem;
    }

    .payment-table .table th:first-child,
    .payment-table .table td:first-child {
        padding-left: 0;
    }

    .payment-table .table th:last-child,
    .payment-table .table td:last-child {
        padding-right: 0;
        text-align: right;
        white-space: normal;
    }
}

.payment-table .table th,
.payment-table .table td {
    padding: 0.5rem 0.65rem;
    vertical-align: middle;
    font-family: inherit;
}

.payment-table .table th {
    font-weight: 700;
    color: #1a3a5c;
}

.payment-table .table td {
    font-weight: 400;
    color: #1f2f40;
}

.payment-table .table td:nth-child(1) {
    font-weight: 400;
}

.payment-table .payment-item-main {
    font-weight: 400;
    line-height: 1.25;
}

.payment-table .payment-item-meta {
    margin-top: 0.1rem;
    color: #7a8796;
    font-size: 0.82rem;
    line-height: 1.2;
}

.payment-table .table th:nth-child(2),
.payment-table .table td:nth-child(2) {
    white-space: nowrap;
}

.payment-table .table td:nth-child(2) {
    font-weight: 700;
}

.payment-table .tag {
    font-size: 0.75rem;
    padding: 0.2rem 0.45rem;
    font-family: inherit;
}

.payment-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 2;
}

.payment-overlay-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    padding: 20px 22px;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 12px 24px rgba(3, 47, 90, 0.12);
}

.payment-overlay-card h4 {
    margin-bottom: 8px;
    color: #032f5a;
}

/* Booking tab AJAX transition */
#booking-tab-content {
    transition: opacity 0.15s ease;
}

/* Booking cards: unify spacing across Postenliste, Zusatzoptionen, Gast hilft mit */
.payment-card {
    padding: 0;
}

.payment-card .payment-table {
    padding: 16px 20px;
}

.guest-options-card .card-content,
.supply-help-card .card-content {
    padding: 16px 20px !important;
}

/* Open amount card */
.open-amount-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 14px 20px;
    margin-bottom: 16px;
    font-size: 1.05rem;
    text-align: center;
}
.open-amount-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2563eb;
}

/* Supply help card */
.supply-help-card {
    text-align: left;
}
.supply-help-card .supply-help-section-content {
    padding-top: 4px !important;
}
.supply-help-checkbox-form {
    margin-bottom: 8px;
}
.supply-help-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem;
}
.supply-help-checkbox-label > span {
    flex: 1;
}
.supply-help-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    margin-top: 3px;
    flex-shrink: 0;
}
.supply-help-info-tag {
    display: inline-flex;
    align-items: center;
    background: #fff3cd;
    color: #856404;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    width: max-content;
    max-width: 100%;
}
.supply-help-item-label > span > .supply-help-info-tag {
    grid-column: 1 / -1;
    margin-top: 2px;
    justify-self: start;
}
.supply-help-discount-tag {
    display: inline-block;
    background: #d4edda;
    color: #155724;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    margin-left: 6px;
    width: fit-content;
    justify-self: start;
}
.supply-help-check-desc {
    font-size: 0.85rem;
    color: #5a7a9a;
    margin: 4px 0 0 26px;
}
.supply-help-savings-hint {
    margin: 10px 0 0 26px;
    font-size: 0.9rem;
    color: #1b7f5a;
    font-weight: 600;
}
.supply-help-section-heading {
    font-weight: 700;
    font-size: 0.85rem;
    color: #032f5a;
    margin: 14px 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.supply-help-shopping-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.supply-help-item-form {
    margin-bottom: 4px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.5);
    border-radius: 8px;
}
.supply-help-item-label {
    font-size: 0.95rem !important;
}
.supply-help-item-label > span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: center;
}
.supply-help-item-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.supply-help-item-desc {
    display: block;
    font-size: 0.82rem;
    color: #6b7a8d;
    font-weight: 400;
    margin-top: 1px;
    line-height: 1.3;
    grid-column: 1 / -1;
}
.supply-help-item-label > span > .supply-help-discount-tag {
    margin-left: 0;
    justify-self: end;
}
.supply-help-item-hint {
    font-size: 0.75rem;
    color: #b0785a;
    margin: 2px 0 0 26px;
}
/* Departure supply inputs */
.departure-item-wrap {
    margin-bottom: 4px;
}
.departure-supply-sub {
    margin: 8px 0 4px 28px;
    padding: 10px 14px;
    background: #f0f6fb;
    border-radius: 10px;
    border-left: 3px solid #5a9fd4;
}
.departure-supply-sub-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
}
/* Desktop: eine Zeile wie zuvor — Wert links neben dem Slider */
.departure-supply-sub-item--with-slider {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
}
.departure-supply-sub-item--with-slider .departure-supply-sub-head {
    display: contents;
}
.departure-supply-sub-item--with-slider .departure-supply-sub-label {
    flex: 1;
    min-width: 0;
}

.departure-supply-sub-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: #1a3a5c;
    flex: 1;
    min-width: 0;
}
.departure-supply-sub-desc {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: #6b7a8d;
    line-height: 1.3;
    margin-top: 1px;
}
.departure-supply-sub-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.departure-supply-save {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.08);
    text-align: right;
}

/* Gaestedaten zweispaltig, sobald der Platz reicht - gemessen an der Breite des
   Formulars, nicht des Fensters: im Portal haengt die verfuegbare Breite an der
   Kachelspalte und am Vorschaumodus (Mobil/Desktop), nicht am Geraet. Adresse
   steht allein in der ersten Zeile, die kurzen Felder paarweise daneben. */
#guestForm { container-type: inline-size; }
#guestForm fieldset > input[type="hidden"] { display: none; }

@container (min-width: 340px) {
    #guestForm fieldset {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 18px;
        align-items: start;
    }
    #guestForm fieldset > .field { margin-bottom: 12px; }
    #guestForm fieldset > .field:first-of-type { grid-column: 1 / -1; }
}

/* Eine Flaeche, nicht drei: was in einer aufgeklappten Aufgabe steht, liegt
   direkt auf der weissen Karte. Ohne diese Regeln stapeln sich dort eigene
   Kartenhintergruende, Raender und Schatten - weiss auf blau auf weiss, an
   jeder der drei Aufstellungen anders. */
.guest-task__body .card,
.guest-task__body .payment-card,
.guest-task__body .guest-options-card,
.guest-task__body .guest-card {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
}
.guest-task__body .consumption-billing-section {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

/* Knopfleiste unter einer Postenaufstellung - dieselbe an allen drei Stellen:
   Buchung, Verbrauchsabrechnung, offene Rechnung. */
.guest-invoice-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.departure-supply-save button[name="action"][value="save_supply_data"] {
    position: relative;
    overflow: hidden;
}

.departure-supply-save button[name="action"][value="save_supply_data"].is-saved {
    box-shadow: 0 0 0 3px rgba(34, 139, 79, 0.14);
}

.departure-supply-save .departure-save-checkmark {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%) scale(0.6);
    opacity: 0;
    color: #1f8b4d;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.departure-supply-save .departure-save-checkmark.is-visible {
    transform: translateY(-50%) scale(1);
    opacity: 1;
}
.purchase-shop-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* --- Purchase shop item card --- */
.pshop-item {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    display: flex;
    align-items: stretch;
    gap: 12px;
}
.pshop-item:last-child { border-bottom: none; }
.pshop-item-main {
    flex: 1;
    min-width: 0;
}
.pshop-item-side {
    display: flex;
    align-items: center;
}

.pshop-item-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}
.pshop-item-label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 0.92rem;
    color: #1a3a5c;
}
.pshop-item-price {
    font-size: 0.72rem;
    font-weight: 600;
    color: #1a6fb5;
    background: #e8f4fd;
    padding: 1px 7px;
    border-radius: 8px;
}
.pshop-item-price--karma {
    margin-left: auto;
    white-space: nowrap;
}
.pshop-item-badge-refill {
    font-size: 0.68rem;
    font-weight: 600;
    color: #5a7a3a;
    background: #edf5e1;
    padding: 1px 7px;
    border-radius: 8px;
}
.pshop-item-desc {
    font-size: 0.78rem;
    color: #6b7a8d;
    margin-top: 2px;
    line-height: 1.3;
}

/* New vertical level control */
.pshop-level-ctrl {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.pshop-level-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    flex: 1;
}
.pshop-level-actions > .pshop-action-btn:only-child {
    grid-column: 1 / -1;
}
.karma-todo-row .pshop-level-actions > form,
.karma-todo-row .pshop-level-actions > [data-karma-row-action-open] {
    grid-column: 1 / -1;
}
.pshop-level-bar {
    position: relative;
    width: 22px;
    height: 72px;
    border-radius: 999px;
    background: #edf1f5;
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
}
.pshop-level-fill {
    width: 100%;
    background: #e76868;
}
.pshop-level-fill--empty {
    background: #e76868;
}
.pshop-level-fill--quarter {
    background: #f3c55a;
}
.pshop-level-fill--half {
    background: #f0d165;
}
.pshop-level-fill--mostly_full {
    background: #8cd07f;
}
.pshop-level-fill--full {
    background: linear-gradient(180deg, #52c26b 0%, #f3c55a 50%, #e76868 100%);
}

/* Vorrat: single stock counter */
.pshop-stock-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
    padding: 0;
}
.pshop-stock-ctrl form.inline {
    flex: 1;
}
.pshop-action-btn {
    position: relative;
    border: none;
    border-radius: 8px;
    padding: 6px 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
    width: 100%;
}
.pshop-action-btn:active:not(:disabled) { transform: scale(0.96); }
.pshop-action-btn:disabled { opacity: 0.3; cursor: default; }
.pshop-action-btn--take {
    background: #fce4d6;
    color: #b5451a;
}
.pshop-action-btn--take:hover:not(:disabled) { background: #f8d4bf; }
.pshop-action-btn--add {
    background: #d4edda;
    color: #1a6b2e;
}
.pshop-action-btn--add:hover:not(:disabled) { background: #c1e6ca; }
.pshop-action-btn--primary {
    background: #032f5a;
    color: #fff;
}
.pshop-action-btn--primary:hover:not(:disabled) { background: #043a6f; }
.pshop-action-btn--correct {
    background: #e8edf2;
    color: #4a5561;
}
.pshop-action-btn--correct:hover:not(:disabled) { background: #dce3ea; }

/* Purchase shop modal */
.pshop-modal .modal-card-body {
    font-size: 0.92rem;
}
.pshop-modal-info {
    font-weight: 600;
    margin-bottom: 10px;
}
.pshop-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.pshop-modal--single .pshop-modal-grid {
    grid-template-columns: 1fr;
}
.pshop-modal--single .pshop-modal-panel--current {
    grid-column: 1 / -1;
}
.pshop-modal-panel {
    background: #f6f8fb;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 12px;
}
.pshop-modal-panel-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #1a3a5c;
    margin-bottom: 8px;
}
.pshop-modal-question {
    font-weight: 600;
    margin-bottom: 8px;
}
.pshop-modal-qty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.pshop-qty-btn {
    border: none;
    background: #e7edf5;
    color: #14324a;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}
.pshop-qty-value {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
}
.pshop-modal-percent {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.pshop-percent-btn {
    border: none;
    background: #f2f2f2;
    color: #1a3a5c;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.pshop-percent-btn.is-active {
    background: #1a3a5c;
    color: #fff;
}
.pshop-modal-slider {
    margin: 6px 0 10px;
}
.pshop-range {
    width: 100%;
    appearance: none;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e76868 0%, #f3c55a 50%, #52c26b 100%);
    outline: none;
}
.pshop-range::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1a3a5c;
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.pshop-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1a3a5c;
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.pshop-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: #6b7a8d;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pshop-modal-stock {
    margin-top: 8px;
    font-size: 0.84rem;
    color: #24415c;
}
.shopping-reminder-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.shopping-reminder-action-wrap {
    margin-top: 8px;
}
.departure-supply-slider {
    margin-top: 0;
    min-width: 0;
    box-sizing: border-box;
}
.departure-supply-sub-item--with-slider > .departure-supply-slider {
    flex: 1;
    min-width: 0;
}
.departure-supply-sub-qty .departure-supply-slider {
    flex: 1;
    min-width: 0;
}
.departure-supply-sub-item--with-slider .pshop-range {
    display: block;
    width: 100%;
    max-width: 100%;
}
.departure-supply-current {
    display: inline-block;
    min-width: 28px;
    font-weight: 700;
    color: #1a3a5c;
    margin-left: 8px;
}
.departure-supply-current--head {
    margin: 0 8px 0 0;
    flex-shrink: 0;
    font-size: 0.92rem;
    line-height: 1.25;
    text-align: left;
    padding-top: 0;
}

@media (max-width: 700px) {
    .departure-supply-sub-item--with-slider {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .departure-supply-sub-item--with-slider .departure-supply-sub-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
    }
    .departure-supply-sub-item--with-slider .departure-supply-sub-head .departure-supply-sub-label {
        flex: 1;
        min-width: 0;
    }
    .departure-supply-sub-item--with-slider > .departure-supply-slider {
        width: 100%;
        max-width: 100%;
        flex: none;
    }
    .departure-supply-sub-item--with-slider .departure-supply-sub-qty {
        width: 100%;
        flex: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .departure-supply-sub-qty .departure-supply-slider {
        width: 100%;
        flex: none;
    }
    .departure-supply-current--head {
        margin: 0;
        text-align: right;
        padding-top: 1px;
    }
}
.departure-supply-current--left {
    margin-left: 0;
    margin-right: 8px;
}
.departure-supply-min-inline {
    margin-left: 6px;
    font-size: 0.75rem;
    color: #6b7a8d;
}
.shopping-reminder-action-btn {
    min-width: 110px;
}
.shopping-reminder-action-badge {
    font-size: 0.68rem;
    padding: 1px 7px;
}
.pshop-shopping-summary {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}
.pshop-shopping-item {
    padding: 8px 10px;
    background: #f6f8fb;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06);
}
.pshop-shopping-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 700;
    color: #1a3a5c;
}
.pshop-shopping-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: #1a6fb5;
    background: #e8f4fd;
    padding: 2px 6px;
    border-radius: 8px;
}
.pshop-shopping-desc {
    font-size: 0.78rem;
    color: #6b7a8d;
    margin-top: 4px;
}

@media (max-width: 640px) {
    .pshop-modal-grid {
        grid-template-columns: 1fr;
    }
}
.pshop-modal-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pshop-modal-foot .button.is-light.is-outlined {
    background: #eef2f6;
    color: #3d4a5c;
    border-color: #b8c2cf;
}
.pshop-modal-foot .button.is-light.is-outlined:hover,
.pshop-modal-foot .button.is-light.is-outlined:focus {
    background: #dde4ec;
    color: #1f2a3a;
    border-color: #94a3b5;
}

.pshop-stock-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
}
.pshop-stock-num {
    font-size: 1.3rem;
    font-weight: 800;
    color: #1a3a5c;
    line-height: 1;
}
.pshop-stock-label {
    font-size: 0.62rem;
    color: #6b7a8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}

/* Category card inside info-cards grid – spans 2 columns, rows set inline */
.pshop-category-card {
    grid-column: span 2;
    padding: 18px 16px;
    color: #1a3a5c;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.pshop-category-header {
    font-size: 1.02rem;
    font-weight: 700;
    color: #032f5a;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pshop-category-title {
    text-align: left;
}
.blue-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    font-size: 1.02rem;
    font-weight: 700;
    color: #032f5a;
    line-height: 1.2;
}
.blue-card-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35em;
    line-height: 1;
}
.blue-card-title-icon .mdi-hex,
.blue-card-title-icon .material-symbols-rounded {
    font-size: 1em;
    line-height: 1;
    vertical-align: middle;
}
.blue-card-title-text {
    color: #032f5a;
}
.pshop-category-balance {
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    padding: 2px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
.pshop-category-balance--debt {
    background: #dc3545;
}
.pshop-category-balance--credit {
    background: #28a745;
}
.pshop-category-icon {
    font-size: 1.35em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pshop-category-icon .pshop-category-icon-glyph {
    line-height: 1;
}
.pshop-category-icon .mdi-hex {
    font-size: 1em;
}
.pshop-category-icon .material-symbols-rounded {
    font-size: 1em;
    vertical-align: middle;
}
.pshop-category-card .purchase-shop-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}
.pshop-category-card--disabled {
    opacity: 0.72;
    filter: grayscale(0.2);
}

@media (max-width: 480px) {
    .pshop-category-card {
        grid-column: span 2;
        grid-row: span 1;
    }
}


@media (max-width: 400px) {
    .pshop-action-btn { padding: 4px 2px; font-size: 0.7rem; }
    .pshop-stock-num { font-size: 1.1rem; }
}

/* Consumption billing in departure checklist */
.departure-consumption-wrap {
    margin-bottom: 4px;
}
/* Frueher ein blau hinterlegter Einschub. Die Aufstellung steht heute in einer
   aufklappbaren Aufgabe auf weisser Karte - eine zweite Flaeche darin waere ein
   Kasten im Kasten. */
.consumption-billing-section {
    margin: 8px 0 4px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.consumption-table,
.consumption-table td,
.consumption-table tr,
.consumption-table tbody {
    background: transparent !important;
    background-color: transparent !important;
}
.consumption-table {
    font-size: 0.88rem;
    margin-bottom: 10px;
}
.consumption-table thead {
    display: none;
}
.consumption-table td {
    border: none;
    padding: 3px 0;
}
.consumption-table tr.cost-total td {
    border: none;
    padding-top: 3px;
}
.consumption-cash-hint {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.08);
    text-align: center;
    font-size: 0.88rem;
    color: #4a6a8a;
    line-height: 1.5;
    margin-bottom: 12px;
}
.consumption-cash-form {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 16px;
}
.consumption-block-notice {
    border-left: 3px solid #5a9fd4;
    padding: 12px 16px;
    text-align: center;
    font-size: 0.88rem;
    color: #1a3a5c;
    font-weight: 600;
}

/* Door code card inside info-cards grid – breite Kachel über zwei Spalten */
.doorcode-grid-card {
    position: relative;
    grid-column: span 2;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 20px;
    border-radius: 14px;
}
.guest-page .info-cards > .doorcode-grid-card {
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    aspect-ratio: 2.12 / 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: auto;
    overflow: hidden;
    align-self: start;
}
.guest-page .info-cards > .doorcode-grid-card .doorcode-card-header {
    margin-bottom: 10px;
    width: 100%;
}
.guest-page .info-cards > .doorcode-grid-card .blue-card-title {
    justify-content: flex-start;
    font-size: 1.02rem;
}
.guest-page .info-cards > .doorcode-grid-card .doorcode-card-body {
    margin-top: 4px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.guest-page .info-cards > .doorcode-grid-card .doorcode-value {
    font-size: clamp(1.1rem, 0.55rem + 2.2vw, 1.75rem);
    letter-spacing: 0.08em;
}
.guest-page .info-cards > .doorcode-grid-card .shopping-reminder-desc {
    font-size: 0.68rem;
    line-height: 1.25;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.doorcode-grid-card--admin-opener {
    cursor: pointer;
}

.doorcode-grid-card .tasmota-battery-indicator {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
    color: #2f4156;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    pointer-events: none;
}
.doorcode-grid-card .tasmota-battery-indicator[hidden] {
    display: none !important;
}
.doorcode-grid-card .tasmota-battery-indicator .material-symbols-rounded {
    font-size: 1rem;
    line-height: 1;
}
.doorcode-grid-card .tasmota-battery-indicator.is-low {
    color: #b91c1c;
    background: rgba(254, 226, 226, 0.95);
}

.doorcode-card-header {
    margin-bottom: 10px;
}

.doorcode-label {
    font-weight: 700;
    font-size: 0.95rem;
    color: #032f5a;
}

.doorcode-card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 0;
}

.doorcode-value {
    font-size: 2.8rem;
    font-weight: 700;
    color: #1a3a5c;
    letter-spacing: 0.15em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* Shopping list card inside info-cards grid – spans 2 columns, rows set inline */
.shopping-grid-card {
    grid-column: span 2;
    padding: 18px 16px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
}
.shopping-reminder-header {
    margin-bottom: 10px;
}
.shopping-reminder-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.shopping-reminder-list li {
    padding: 5px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid #d0e3f0;
}
.shopping-reminder-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.shopping-reminder-item--todo {
    display: block;
}
.shopping-reminder-item--done {
    opacity: 0.6;
}
.shopping-reminder-item--done .shopping-reminder-title-row strong {
    text-decoration: line-through;
    color: #999;
}
.shopping-reminder-item-text {
    flex: 1;
    min-width: 0;
}
.shopping-reminder-list li:last-child {
    border-bottom: none;
}
.shopping-reminder-desc {
    display: block;
    font-size: 0.8rem;
    color: #6b7a8d;
    line-height: 1.3;
    margin-top: 1px;
}
/* Karma-Modus: Mithelfen-Karte (nur Gäste-Grid) — Zeilen/Stretch siehe .guest-page .info-cards */
.karma-shopping-grid-card {
    min-height: 0;
}
.karma-shopping-grid-card .purchase-shop-items {
    flex: 1 1 auto;
    min-height: 0;
}
.karma-shopping-grid-card .pshop-category-header {
    align-items: flex-start;
}
.karma-mithelfen-tasks-card__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.karma-mithelfen-tasks-card__title-text {
    line-height: 1.2;
}
.karma-shopping-grid-card .pshop-category-icon {
    font-size: 1.75em;
}
/* Action rows reuse pshop-item structure; the muted item list lives in pshop-item-desc */
.karma-todo-row .pshop-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.karma-todo-row__head-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.88;
}

.karma-todo-row__head-icon-glyph {
  width: 1.25rem;
  height: 1.25rem;
}

.karma-todo-row__items {
    color: #8a98a8;
    font-weight: 400;
    font-style: normal;
    margin-top: 2px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Gäste-Portal: Kategorie-Karten = 2 Rasterzeilen (2y), Inhalt in .purchase-shop-items scrollt */
.guest-page .info-cards > .pshop-category-card {
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    --guest-infocard-cols: 2;
    --guest-infocard-gap: 16px;
    --guest-category-2-tile-height: calc(((100cqi - (var(--guest-infocard-cols) - 1) * var(--guest-infocard-gap)) / var(--guest-infocard-cols)) * 2 + var(--guest-infocard-gap));
    grid-row: span 2 !important;
    height: var(--guest-category-2-tile-height);
    max-height: var(--guest-category-2-tile-height);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.guest-page .info-cards > .pshop-category-card.karma-shopping-grid-card {
    grid-row: span 2;
    align-self: start;
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@container guest-infocards (min-width: 452px) {
    .guest-page .info-cards > .pshop-category-card {
        --guest-infocard-cols: 3;
    }
}

@container guest-infocards (min-width: 608px) {
    .guest-page .info-cards > .pshop-category-card {
        --guest-infocard-cols: 4;
    }
}

@container guest-infocards (min-width: 764px) {
    .guest-page .info-cards > .pshop-category-card {
        --guest-infocard-cols: 5;
    }
}

@container guest-infocards (min-width: 920px) {
    .guest-page .info-cards > .pshop-category-card {
        --guest-infocard-cols: 6;
    }
}

@container guest-infocards (min-width: 1076px) {
    .guest-page .info-cards > .pshop-category-card {
        --guest-infocard-cols: 7;
    }
}

@container guest-infocards (min-width: 1232px) {
    .guest-page .info-cards > .pshop-category-card {
        --guest-infocard-cols: 8;
    }
}

@container guest-infocards (min-width: 1388px) {
    .guest-page .info-cards > .pshop-category-card {
        --guest-infocard-cols: 9;
    }
}

@container guest-infocards (min-width: 1544px) {
    .guest-page .info-cards > .pshop-category-card {
        --guest-infocard-cols: 10;
    }
}

@container guest-infocards (min-width: 1700px) {
    .guest-page .info-cards > .pshop-category-card {
        --guest-infocard-cols: 11;
    }
}

@container guest-infocards (min-width: 1856px) {
    .guest-page .info-cards > .pshop-category-card {
        --guest-infocard-cols: 12;
    }
}

@media (max-width: 480px) {
    .guest-page .info-cards > .pshop-category-card {
        --guest-infocard-cols: 3;
        --guest-infocard-gap: 8px;
        grid-row: span 2 !important;
        --guest-category-2-tile-height: calc(((100cqi - (var(--guest-infocard-cols) - 1) * var(--guest-infocard-gap)) / var(--guest-infocard-cols)) * 2 + var(--guest-infocard-gap));
        --mithelfen-2-tile-height: calc(((100cqi - (var(--guest-infocard-cols) - 1) * var(--guest-infocard-gap)) / var(--guest-infocard-cols)) * 2 + var(--guest-infocard-gap));
    }
}

.guest-page[data-guest-card-order-layout="mobile"] .info-cards > .pshop-category-card {
    --guest-infocard-cols: 3;
    --guest-infocard-gap: 8px;
    grid-row: span 2 !important;
    --guest-category-2-tile-height: calc(((100cqi - (var(--guest-infocard-cols) - 1) * var(--guest-infocard-gap)) / var(--guest-infocard-cols)) * 2 + var(--guest-infocard-gap));
    --mithelfen-2-tile-height: calc(((100cqi - (var(--guest-infocard-cols) - 1) * var(--guest-infocard-gap)) / var(--guest-infocard-cols)) * 2 + var(--guest-infocard-gap));
}
.guest-page .info-cards > .pshop-category-card > .pshop-category-header,
.guest-page .info-cards > .pshop-category-card > .blue-card-title {
    flex-shrink: 0;
}
.guest-page .info-cards > .pshop-category-card .purchase-shop-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
}

/*
 * Wetter im Infokarten-Raster: wie Kategorie-Karten die volle Höhe der 2-Zeilen-Zelle
 * nutzen (Parent hat align-items: start → ohne align-self: stretch bleiben Wetterkarten flach).
 */
.guest-page .info-cards > .weather-grid-card,
.guest-page .info-cards > .weather-mountain-valley-wrapper,
.guest-page .info-cards > .weather-card-grid.blue-card {
    align-self: stretch;
    min-height: 0;
}
.guest-page .info-cards > .weather-mountain-valley-wrapper .weather-card-grid,
.guest-page .info-cards > .weather-card-grid.blue-card {
    height: 100%;
    box-sizing: border-box;
}
.guest-page .info-cards .weather-card-grid.blue-card .weather-details {
    margin-top: auto;
}
.guest-page .info-cards > .weather-card-grid--combined {
    align-self: stretch;
    height: 100%;
}

.guest-page .info-cards .weather-card-grid--combined .weather-combined-cols {
    margin-top: 0;
}

/* Todo entries inside the (non-karma) Mithelfen - Deine Aufgaben card: subtle done-state styling */
.shopping-todo-item--done {
    opacity: 0.6;
}
.shopping-todo-item--done .pshop-item-label {
    text-decoration: line-through;
    color: #888;
}
.karma-todo-row.shopping-todo-item--done {
    background: #f0f3f7;
    border-color: #d8dee8;
}
.karma-todo-row .pshop-action-btn--done-link {
    background: transparent;
    color: #4a6a8a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =========================================================================
   Unified karma-action modals (Einkäufe erledigen / Vorräte überprüfen / Etwas putzen)
   ========================================================================= */
.karma-action-modal-card {
    width: min(580px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: 90vh;
    box-sizing: border-box;
}
.karma-action-modal-head {
    background: linear-gradient(135deg, #e8f4fd 0%, #f0f7ff 100%);
    border-bottom: 1px solid #d0e3f0;
    gap: 10px;
    align-items: center;
}
.karma-action-modal-head .modal-card-title {
    color: #032f5a;
    font-weight: 700;
    font-size: 1.05rem;
    flex: 1;
    min-width: 0;
}
.karma-action-modal-body {
    background: #f8fbff;
    font-size: 0.92rem;
    overflow-x: hidden;
}
.karma-action-modal-intro {
    font-size: 0.88rem;
    color: #4a5a6a;
    margin: 0 0 12px 0;
    line-height: 1.5;
}
.karma-action-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
/* Common item card: vertical layout — title/meta/desc on top, action below (right-aligned).
   Keeping a single column makes room for the absolutely-positioned points badge in the
   top-right corner without overlapping action buttons or sliders. */
.karma-action-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #d0e3f0;
    border-radius: 10px;
    overflow-wrap: anywhere;
}
.karma-action-item--done {
    opacity: 0.65;
    background: #f0f3f7;
}
.karma-action-item--done .karma-action-item__title {
    text-decoration: line-through;
    color: #888;
}
.karma-action-item--done .pshop-modal-slider,
.karma-action-item--done .pshop-range,
.karma-action-item--done .pshop-slider-labels {
    filter: grayscale(1);
    opacity: 0.55;
    cursor: not-allowed;
}
.karma-action-item--done .pshop-modal-slider {
    pointer-events: none;
}
.karma-action-item__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.karma-action-item__title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.karma-action-item__title {
    font-weight: 700;
    font-size: 0.92rem;
    color: #1a3a5c;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
}
.karma-action-item__source-tag {
    font-size: 0.68rem;
    font-weight: 600;
    color: #6b7a8d;
    background: #eef2f6;
    padding: 1px 7px;
    border-radius: 6px;
    flex-shrink: 0;
}
.karma-action-item__meta {
    font-size: 0.76rem;
    color: #5a6b7a;
    line-height: 1.35;
}
.karma-action-item__meta-min {
    color: #8a96a3;
    font-weight: 500;
}
.karma-action-item__desc {
    font-size: 0.78rem;
    color: #6b7a8d;
    line-height: 1.35;
}
.karma-action-item__action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.karma-action-item__action--verify {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
}
.karma-verify-hint-textarea {
    min-height: 5rem;
}
.karma-action-item__btn {
    width: auto;
    min-width: 140px;
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* Supplies modal: slider sits inside __main and uses full width */
.karma-action-item--supplies .guest-admin-supply-row__slider {
    margin-top: 6px;
    max-width: 100%;
}

/* Points badges — same shape/typography as .pshop-item-price (category cards).
   Two color variants: green for actions that ADD points, red for actions
   that COST points. Both live inline in the title row of any item. */
.karma-item-points-badge,
.karma-item-cost-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 8px;
    margin-left: auto;
    white-space: nowrap;
    line-height: 1.35;
    flex-shrink: 0;
}
/* Green: action ADDS points */
.karma-item-points-badge {
    color: #1a6b2e;
    background: #d4edda;
}
/* Red: action COSTS points */
.karma-item-cost-badge {
    color: #b03a2e;
    background: #fde8e8;
}
.karma-item-points-badge--neutral,
.karma-suggestion-modal .karma-item-points-badge,
.karma-action-modal .karma-item-points-badge,
.karma-action-modal .karma-item-cost-badge {
    color: #032f5a;
    background: #fff;
    border: 1px solid rgba(3, 47, 90, 0.18);
    box-shadow: 0 1px 3px rgba(3, 47, 90, 0.08);
}

/* =========================================================================
   Karma hint modal: 4 category radio cards + free-text description
   ========================================================================= */
.karma-hint-category-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
@media (max-width: 480px) {
    .karma-hint-category-list {
        grid-template-columns: 1fr;
    }
}
.karma-hint-category-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1.5px solid #e0e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.karma-hint-category-card:hover {
    border-color: #5a9fd4;
    background: #f4faff;
}
.karma-hint-category-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.karma-hint-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #eef2f6;
    color: #032f5a;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.karma-hint-category-icon .karma-hint-category-icon-glyph,
.karma-hint-category-icon .material-symbols-rounded {
    font-size: 1.05rem;
    line-height: 1;
}
.karma-hint-category-label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1a3a5c;
    line-height: 1.25;
}
.karma-hint-category-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #b0c4d8;
    border-radius: 50%;
    background: #fff;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
}
.karma-hint-category-check::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.12s;
}
.karma-hint-category-input:checked ~ .karma-hint-category-check {
    background: #032f5a;
    border-color: #032f5a;
}
.karma-hint-category-input:checked ~ .karma-hint-category-check::after {
    transform: translate(-50%, -50%) scale(1);
}
.karma-hint-category-card:has(.karma-hint-category-input:checked) {
    border-color: #032f5a;
    background: #eaf3fc;
    box-shadow: 0 1px 4px rgba(3, 47, 90, 0.12);
}
.karma-hint-category-card:has(.karma-hint-category-input:checked) .karma-hint-category-icon {
    background: #032f5a;
    color: #fff;
}
.karma-hint-category-input:focus-visible ~ .karma-hint-category-check {
    outline: 2px solid #5a9fd4;
    outline-offset: 2px;
}
.karma-hint-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.karma-hint-text-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1a3a5c;
}
.karma-hint-textarea {
    width: 100%;
    min-height: 110px;
    border: 1.5px solid #d0e3f0;
    border-radius: 10px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    background: #fff;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.karma-hint-textarea:focus {
    outline: none;
    border-color: #5a9fd4;
    box-shadow: 0 0 0 3px rgba(90, 159, 212, 0.18);
}

/* Section header above the hint category radio cards: label on the left, points reward on the right */
.karma-hint-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
}
.karma-hint-category-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #032f5a;
    line-height: 1.25;
}
.karma-hint-category-header .karma-item-points-badge {
    margin-left: auto;
}

/* =========================================================================
   Urgency badges (5 tiers) — KI-/Heuristik-bewertete Dringlichkeit jeder Aufgabe.
   Sitzen rechts in Title-Rows, ähnlich der Punkte-Badges, aber farblich kodiert.
   ========================================================================= */
.karma-urgency-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 8px;
    margin-left: auto;
    white-space: nowrap;
    line-height: 1.35;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
/* When sitting next to a points badge in the same head, shift the urgency to its left */
.karma-suggestion-card-head .karma-urgency-badge,
.pshop-item-head .karma-urgency-badge,
.karma-mithelfen-card .karma-urgency-badge,
.karma-todo-row .karma-urgency-badge {
    margin-left: auto;
    margin-right: 6px;
}
.karma-suggestion-card-head .karma-urgency-badge + .karma-item-points-badge,
.pshop-item-head .karma-urgency-badge + .karma-item-points-badge,
.karma-mithelfen-card .karma-urgency-badge + .karma-item-points-badge,
.karma-todo-row .karma-urgency-badge + .karma-item-points-badge {
    margin-left: 0;
}
/* Mithelfen-Aktions-Modals (Einkauf / Vorräte / …): Dringlichkeit vor Punkte-Badge */
.karma-action-item__title-row .karma-urgency-badge {
    margin-left: auto;
    margin-right: 6px;
}
.karma-action-item__title-row .karma-urgency-badge + .karma-item-points-badge,
.karma-action-item__title-row .karma-urgency-badge + .karma-action-item__source-tag {
    margin-left: 0;
}
.karma-action-item__title-row .karma-action-item__source-tag + .karma-item-points-badge {
    margin-left: 0;
}
.karma-urgency-badge--u1 { background: #e3edf7; color: #4a607a; }
.karma-urgency-badge--u2 { background: #d8eaf6; color: #1f4d75; }
.karma-urgency-badge--u3 { background: #fff3c2; color: #8a6d00; }
.karma-urgency-badge--u4 { background: #fde0c2; color: #a44d05; }
.karma-urgency-badge--u5 {
    background: #fde2e2;
    color: #a3170d;
    animation: karmaUrgencyPulse 1.6s ease-in-out infinite;
}
@keyframes karmaUrgencyPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(216, 50, 50, 0.0); }
    50% { box-shadow: 0 0 0 4px rgba(216, 50, 50, 0.18); }
}

/* =========================================================================
   Urgency-Tooltip: zeigt auf Hover/Focus der Urgency-Pille die KI-Begründung
   sowie (bei Todos) letzte Ausführung & Turnus. Dunkle Sprechblase über der
   Pille, multi-line, mit Pfeil nach unten.
   ========================================================================= */
.karma-urgency-badge--with-tooltip {
    position: relative;
    cursor: help;
}
.karma-urgency-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 180px;
    max-width: 260px;
    padding: 8px 10px;
    background: #0d1f2d;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 40;
}
.karma-urgency-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0d1f2d;
}
.karma-urgency-tooltip__line {
    display: block;
}
.karma-urgency-tooltip__line:first-child {
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.68rem;
    color: #ffd6a1;
}
.karma-urgency-badge--with-tooltip:hover .karma-urgency-tooltip,
.karma-urgency-badge--with-tooltip:focus .karma-urgency-tooltip,
.karma-urgency-badge--with-tooltip:focus-visible .karma-urgency-tooltip,
.karma-urgency-badge--with-tooltip:focus-within .karma-urgency-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.karma-action-modal .karma-urgency-tooltip,
.karma-action-modal .karma-item-points-badge--with-tooltip .karma-urgency-tooltip {
    top: calc(100% + 8px);
    bottom: auto;
    z-index: 120;
}

.karma-action-modal .karma-urgency-tooltip::after,
.karma-action-modal .karma-item-points-badge--with-tooltip .karma-urgency-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #0d1f2d;
}

.karma-action-modal .karma-urgency-badge--with-tooltip .karma-urgency-tooltip,
.karma-action-modal .karma-item-points-badge--with-tooltip .karma-urgency-tooltip {
    transform: translateX(-50%) translateY(-4px);
}

.karma-action-modal .karma-urgency-badge--with-tooltip:hover .karma-urgency-tooltip,
.karma-action-modal .karma-urgency-badge--with-tooltip:focus .karma-urgency-tooltip,
.karma-action-modal .karma-urgency-badge--with-tooltip:focus-visible .karma-urgency-tooltip,
.karma-action-modal .karma-urgency-badge--with-tooltip:focus-within .karma-urgency-tooltip,
.karma-action-modal .karma-item-points-badge--with-tooltip:hover .karma-urgency-tooltip,
.karma-action-modal .karma-item-points-badge--with-tooltip:focus .karma-urgency-tooltip,
.karma-action-modal .karma-item-points-badge--with-tooltip:focus-visible .karma-urgency-tooltip,
.karma-action-modal .karma-item-points-badge--with-tooltip:focus-within .karma-urgency-tooltip {
    transform: translateX(-50%) translateY(0);
}
/* Tooltip trigger fürs Punkte-Badge im Mithelfen-Modal: nutzt dieselbe dunkle
   Sprechblase wie das Urgency-Badge, sitzt aber am Punktestand. */
.karma-item-points-badge--with-tooltip {
    position: relative;
    cursor: help;
}
/* Punkte-Badge: Tooltip links neben dem Badge (nicht zentriert darüber). */
.karma-item-points-badge--with-tooltip .karma-urgency-tooltip {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 10px);
    transform: translateY(-50%) translateX(8px);
    max-width: min(280px, 70vw);
}
.karma-item-points-badge--with-tooltip:hover .karma-urgency-tooltip,
.karma-item-points-badge--with-tooltip:focus .karma-urgency-tooltip,
.karma-item-points-badge--with-tooltip:focus-visible .karma-urgency-tooltip,
.karma-item-points-badge--with-tooltip:focus-within .karma-urgency-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.karma-item-points-badge--with-tooltip .karma-urgency-tooltip::after {
    top: 50%;
    left: 100%;
    right: auto;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-top-color: transparent;
    border-left-color: #0d1f2d;
}
/* Make sure the tooltip stays inside the modal on narrow screens: flip horizontally
   when the badge sits near the right edge by letting CSS clamp the transform. */
@media (max-width: 480px) {
    .karma-urgency-tooltip {
        min-width: 160px;
        max-width: 220px;
    }
    .karma-item-points-badge--with-tooltip .karma-urgency-tooltip {
        max-width: min(240px, 65vw);
        right: calc(100% + 6px);
    }
}
.karma-urgency-badge--inline {
    margin-left: 8px;
}

/* =========================================================================
   "Mithelfen" Modal: vereinheitlichte Liste aller offenen Aufgaben
   sortiert nach KI-Dringlichkeit
   ========================================================================= */
.karma-mithelfen-modal-card {
    width: min(640px, 96vw);
}
.karma-mithelfen-modal-card .modal-card-body {
    /* Nur vertikal scrollen. overflow-x:visible wuerde zusammen mit dem
       vertikalen auto-Scrollen vom Browser zu auto und damit zu einer
       horizontalen Scrollleiste, sobald ein Tooltip ueber den Rand ragt. */
    overflow-x: hidden;
}
/* Da der Body horizontal clippt und vertikal scrollt, wird der Dringlichkeits-
   Tooltip nach UNTEN und RECHTSBUENDIG geoeffnet: so wird er weder bei der
   obersten (wichtigsten) Zeile oben abgeschnitten noch ragt er rechts aus dem
   Modal heraus. */
.karma-mithelfen-modal .karma-urgency-badge--with-tooltip .karma-urgency-tooltip {
    top: calc(100% + 8px);
    bottom: auto;
    left: auto;
    right: 0;
    transform: translateY(-4px);
    max-width: min(260px, 72vw);
}
.karma-mithelfen-modal .karma-urgency-badge--with-tooltip:hover .karma-urgency-tooltip,
.karma-mithelfen-modal .karma-urgency-badge--with-tooltip:focus .karma-urgency-tooltip,
.karma-mithelfen-modal .karma-urgency-badge--with-tooltip:focus-visible .karma-urgency-tooltip,
.karma-mithelfen-modal .karma-urgency-badge--with-tooltip:focus-within .karma-urgency-tooltip {
    transform: translateY(0);
}
.karma-mithelfen-modal .karma-urgency-badge--with-tooltip .karma-urgency-tooltip::after {
    top: auto;
    bottom: 100%;
    left: auto;
    right: 14px;
    transform: none;
    border-top-color: transparent;
    border-bottom-color: #0d1f2d;
}
.karma-mithelfen-ai-debug-pre {
    max-height: min(70vh, 560px);
}
.karma-mithelfen-headline {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff5f5;
    border: 1px solid #f5b1b1;
    color: #a3170d;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.85rem;
    line-height: 1.35;
    margin-bottom: 10px;
    font-weight: 600;
}
.karma-mithelfen-headline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.karma-mithelfen-headline-icon-glyph {
    font-size: 1.15rem;
    line-height: 1;
}
.karma-mithelfen-list .karma-suggestion-card {
    margin-bottom: 6px;
}
/* Gast-Hinweis-Zeilen (Defekt / Verbesserung): Checkbox wie andere Todos,
   optionaler Button für Freitext außerhalb des Label-Klickbereichs. */
.karma-mithelfen-list .karma-mithelfen-guest-hint-card.karma-suggestion-card {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    cursor: default;
}
.karma-mithelfen-list .karma-mithelfen-guest-hint-card.karma-suggestion-card:hover {
    border-color: #e0e8f0;
    background: #fff;
}
.karma-mithelfen-list .karma-mithelfen-guest-hint-card.karma-suggestion-card:has(.karma-suggestion-card-input:checked) {
    border-color: #032f5a;
    background: #eaf3fc;
    box-shadow: 0 1px 4px rgba(3, 47, 90, 0.12);
}
.karma-mithelfen-guest-hint-card__row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    cursor: pointer;
    flex: 1;
}
.karma-mithelfen-guest-hint-card__extra {
    border-top: 1px solid #eef2f6;
}
/* Typ-Icons ohne farbige Kachel — wirkt ruhiger als die globale .karma-suggestion-card-type-icon-Box. */
.karma-mithelfen-modal .karma-mithelfen-list .karma-suggestion-card-type-icon,
.karma-mithelfen-modal .karma-mithelfen-list .karma-mithelfen-guest-hint-card .karma-suggestion-card-type-icon,
.karma-mithelfen-modal .karma-mithelfen-hint-trigger .karma-suggestion-card-type-icon {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    width: auto;
    /* Icon-Box auf die Hoehe der ersten Titelzeile begrenzen und das (groessere)
       Glyph darin vertikal zentrieren, damit Icon und Ueberschrift auf einer
       Linie sitzen – analog zur Tuerschlosscode-Card (.blue-card-title). */
    height: 1.4rem;
    padding: 0 6px 0 0;
    align-self: flex-start;
    color: #627589;
}
.karma-mithelfen-modal .karma-mithelfen-list .karma-suggestion-card-type-icon__glyph,
.karma-mithelfen-modal .karma-mithelfen-list .karma-suggestion-card-type-icon svg,
.karma-mithelfen-modal .karma-mithelfen-list .karma-mithelfen-guest-hint-card .karma-suggestion-card-type-icon__glyph,
.karma-mithelfen-modal .karma-mithelfen-list .karma-mithelfen-guest-hint-card .karma-suggestion-card-type-icon svg,
.karma-mithelfen-modal .karma-mithelfen-hint-trigger .karma-suggestion-card-type-icon__glyph,
.karma-mithelfen-modal .karma-mithelfen-hint-trigger .karma-suggestion-card-type-icon svg {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 1.35rem;
}
.karma-mithelfen-card[data-karma-topic="shop"] {
    --karma-topic-color: #0f766e;
}
.karma-mithelfen-card[data-karma-topic="clean"] {
    --karma-topic-color: #6d5bd0;
}
.karma-mithelfen-card[data-karma-topic="supplies"] {
    --karma-topic-color: #2563eb;
}
.karma-mithelfen-card[data-karma-topic="hint"] {
    --karma-topic-color: #c2410c;
}
.karma-mithelfen-card[hidden],
.karma-mithelfen-more[hidden] {
    display: none !important;
}
.karma-mithelfen-modal .karma-mithelfen-list .karma-mithelfen-card .karma-suggestion-card-type-icon {
    color: var(--karma-topic-color, #627589);
}
.karma-mithelfen-empty {
    color: #6b7a8d;
    font-size: 0.85rem;
    text-align: center;
    padding: 24px 8px;
}
.karma-mithelfen-more {
    display: flex;
    justify-content: center;
    padding: 4px 0 2px;
}
.karma-mithelfen-tabs {
    margin-bottom: 12px;
}
.karma-mithelfen-tabs ul {
    margin: 0;
}
.karma-mithelfen-tabs[hidden] {
    display: none !important;
}
.karma-mithelfen-more-btn.button.is-text {
    height: auto;
    padding: 4px 8px;
    color: #1c4d8f;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.karma-mithelfen-more-btn.button.is-text:hover,
.karma-mithelfen-more-btn.button.is-text:focus-visible {
    background: transparent;
    color: #032f5a;
}
.karma-mithelfen-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Kategorie-Filter am Kopf des Mithelfen-Modals (Einkaufen / Putzen / Überprüfen). */
.karma-mithelfen-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.karma-mithelfen-filter {
    position: relative;
    flex: 1 1 0;
    min-width: 110px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #d4d9e3;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-size: 0.85rem;
    font-weight: 600;
    color: #5a6b80;
    justify-content: center;
}
.karma-mithelfen-filter-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.karma-mithelfen-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.karma-mithelfen-filter-icon-glyph,
.karma-mithelfen-filter-icon svg {
    width: 1.1em;
    height: 1.1em;
    font-size: 1.1em;
    line-height: 1;
}
.karma-mithelfen-filter:hover {
    border-color: #b0b9c9;
    color: #2c3e50;
}
.karma-mithelfen-filter:has(.karma-mithelfen-filter-input:checked) {
    background: #eef4ff;
    border-color: #4a90e2;
    color: #1c4d8f;
}
.karma-mithelfen-filter:has(.karma-mithelfen-filter-input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
}

/* Hint-Trigger-Karten (Defekt / Verbesserungsvorschlag). Gleiche visuelle
   Sprache wie die Aufgaben-Karten, aber ohne Checkbox – komplett klickbar. */
.karma-mithelfen-hint-trigger {
    all: unset;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px dashed #b8c4d4;
    background: #f7f9fc;
    border-radius: 12px;
    cursor: pointer;
    color: #2c3e50;
    margin-bottom: 6px;
    transition: background 0.15s ease, border-color 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}
.karma-mithelfen-hint-trigger:hover,
.karma-mithelfen-hint-trigger:focus-visible {
    background: #eef4ff;
    border-color: #4a90e2;
}
.karma-mithelfen-hint-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
}
.karma-mithelfen-hint-trigger .karma-suggestion-card-type-icon {
    position: static;
    flex-shrink: 0;
}
.karma-mithelfen-hint-trigger .karma-suggestion-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.karma-mithelfen-hint-trigger .karma-suggestion-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.karma-mithelfen-hint-trigger .karma-suggestion-card-label {
    font-weight: 600;
}

.karma-supply-aggregate-count {
    font-weight: 400;
    color: #6b7b90;
    font-size: 0.9em;
}

/* Kategorie-Card im Mithelfen-Modal: leicht eingefärbt, damit klar ist
   "hier steckt eine Sammelaktion für eine ganze Vorratskategorie drin".
   Die versteckten Item-Checkboxen darunter bleiben per display:none
   aus dem Layout. */
.karma-supply-category-card {
    background: #f0f6ff;
}
.karma-supply-category-items {
    display: none;
}
.karma-supply-category-items[hidden] {
    display: none !important;
}

/* Kategorie-Überschriften im Gäste-"Vorräte überprüfen"-Modal. */
.karma-supplies-category-heading {
    margin: 14px 0 6px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #486081;
    border-bottom: 1px solid #e6eaf1;
    padding-bottom: 4px;
}
.karma-supplies-category-heading:first-child {
    margin-top: 0;
}

/* Inline-Hint-Formular (ersetzt das frühere karma-hint-modal). */
.karma-mithelfen-hint-form {
    border: 1px solid #d4d9e3;
    border-radius: 12px;
    padding: 14px;
    background: #fafbfd;
    margin-top: 4px;
}
.karma-mithelfen-hint-form__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.karma-mithelfen-hint-form__title {
    font-weight: 600;
    color: #2c3e50;
}
.karma-mithelfen-hint-textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
}
.karma-mithelfen-hint-form__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.karma-mithelfen-hint-form__actions .karma-item-points-badge {
    margin-left: 8px;
}
.karma-mithelfen-hint-form[hidden] {
    display: none !important;
}
.karma-mithelfen-filters[hidden],
.karma-mithelfen-list[hidden],
.karma-mithelfen-list [data-karma-cat][hidden] {
    display: none !important;
}

/* "Mithelfen" Trigger-Button (Karma-Portal-Card), z. B. is-primary */
.karma-mithelfen-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    position: relative;
}
.karma-mithelfen-trigger__label {
    display: inline-flex;
    align-items: center;
}

/* =========================================================================
   Urgent-Popup: erscheint automatisch bei urgency >= 4 (sessionStorage-aware)
   ========================================================================= */
.karma-urgent-popup .modal-background {
    background: rgba(20, 0, 0, 0.55);
}
.karma-urgent-popup-content {
    width: min(420px, 92vw);
}
.karma-urgent-popup-card {
    border: 2px solid #e76868;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(216, 50, 50, 0.25);
}
.karma-urgent-popup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fde2e2;
    color: #a3170d;
    margin: 0 auto 12px;
    animation: karmaUrgencyPulse 1.6s ease-in-out infinite;
}
.karma-urgent-popup-icon-glyph {
    font-size: 2rem;
    line-height: 1;
}
.karma-urgent-popup-title {
    color: #a3170d;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 0 6px;
}
.karma-urgent-popup-intro {
    color: #2d3a4a;
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0 0 4px;
}
.karma-urgent-popup-meta {
    color: #a3170d;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 14px;
}
.karma-urgent-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    margin-top: 14px;
}
.karma-urgent-popup-actions .button.is-large {
    width: 100%;
}
.karma-urgent-popup-dismiss {
    color: #6b7a8d !important;
    text-decoration: underline;
}

/* Toast shown after a hint is submitted */
.karma-hint-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a6b2e;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    max-width: min(420px, 92vw);
    text-align: center;
    pointer-events: none;
}
.karma-hint-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.karma-hint-toast--error {
    background: #b03a2e;
}

@media (max-width: 540px) {
    .karma-action-item {
        padding: 12px;
    }
    .karma-action-item__btn {
        width: 100%;
        min-width: 0;
    }
    .karma-action-item__action {
        justify-content: stretch;
    }
}
/* Weather widget */
.weather-widget {
    margin-bottom: 20px;
}
/* Weather cards in info-cards grid */
.weather-grid-card,
.weather-card-grid {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    border-radius: 14px;
}

/* Berg/Tal: früher zwei Kacheln; jetzt eine kombinierte Kachel */
.weather-mountain-valley-wrapper {
    grid-column: span 2;
    grid-row: span 2;
    display: block;
    min-width: 0;
}

.weather-card-grid--combined {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 10px;
    gap: 8px;
    overflow: hidden;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
}

.weather-card-grid--combined:hover {
    filter: brightness(1.02);
}

.weather-card-grid--combined > .blue-card-title {
    margin-bottom: 0;
    flex: 0 0 auto;
}

.weather-combined-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
}

.weather-combined-col {
    min-width: 0;
    min-height: 0;
    display: flex;
    padding: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.45);
    overflow: hidden;
}

.weather-mini {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 10px 8px 8px;
    box-sizing: border-box;
}

.weather-mini__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
    flex: 0 0 auto;
}

.weather-mini__label {
    font-weight: 700;
    font-size: 0.82rem;
    color: #1a3a5c;
    white-space: nowrap;
}

.weather-mini__alt {
    font-size: 0.68rem;
    color: #6b7b8d;
    white-space: nowrap;
}

.weather-mini__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 0;
}

.weather-mini__icon {
    width: clamp(72px, 48%, 104px);
    height: clamp(72px, 48%, 104px);
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}

.weather-mini__temp {
    font-size: clamp(1.5rem, 4.2vw, 2.1rem);
    font-weight: 700;
    color: #1a3a5c;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.weather-mini__desc {
    font-size: 0.72rem;
    color: #4a6a8a;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}

.weather-mini__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
    font-size: 0.72rem;
    color: #4a6a8a;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 4px;
}

.weather-mini__meta span {
    white-space: nowrap;
}
/* Weather placeholder in info-cards grid (replaced by JS) – 2×2 */
.weather-grid-card {
    padding: 24px 12px;
    color: #032f5a;
    font-size: 0.95rem;
}
/* Individual weather card as grid item – 2×2 */
.weather-card-grid {
    flex-direction: column;
    padding: 20px 16px;
}

.weather-card-grid.weather-card-grid--combined {
    padding: 12px 12px 10px;
}

.weather-widget-loading {
    text-align: left;
    padding: 12px 2px 2px;
    color: #6b7b8d;
    font-size: 0.9rem;
}

.weather-error {
    text-align: center;
    padding: 16px;
    color: #999;
    font-size: 0.85rem;
}

.weather-card {
    padding: 12px;
    text-align: center;
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
}

.weather-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.weather-location {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1a3a5c;
}

.weather-altitude {
    font-size: 0.75rem;
    color: #6b7b8d;
    background: rgba(255, 255, 255, 0.7);
    padding: 2px 8px;
    border-radius: 10px;
}

.weather-card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0 4px;
}

.weather-icon-big {
    font-size: 2.5rem;
    line-height: 1;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(30, 60, 90, 0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.weather-icon-big img {
    width: 92px;
    height: 92px;
}

.weather-temp {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a3a5c;
    line-height: 1;
}

.weather-desc {
    font-size: 0.9rem;
    color: #4a6a8a;
    margin-bottom: 10px;
}

.weather-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.weather-detail {
    font-size: 0.85rem;
    color: #4a6a8a;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.weather-detail-icon {
    font-size: 0.95rem;
}

@media (max-width: 480px) {
    .weather-card-grid {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (max-width: 600px) {
    .weather-card-grid--combined {
        padding: 10px 8px 8px;
        gap: 6px;
    }

    .weather-combined-cols {
        gap: 6px;
    }

    .weather-mini {
        padding: 8px 6px 6px;
    }

    .weather-mini__main {
        gap: 4px;
    }

    .weather-mini__icon {
        width: clamp(36px, 26%, 52px);
        height: clamp(36px, 26%, 52px);
    }

    .weather-mini__temp {
        font-size: clamp(1.35rem, 5vw, 1.75rem);
    }

    .weather-mini__meta {
        font-size: 0.68rem;
        gap: 3px 8px;
    }
}

/* ── Extras widget ── */
.extras-widget {
    margin: 1.2rem 0;
}
.extras-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-inline-start: 0em !important;
}
.extras-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.8rem;
    padding: 0.55rem 0.8rem;
    background: #f7f9fb;
    border-radius: 6px;
    border: 1px solid #e8ecf0;
}
.extras-name {
    font-weight: 600;
    color: #2c3e50;
}
.extras-price {
    color: #3273dc;
    font-weight: 500;
    white-space: nowrap;
}
.extras-price small {
    font-weight: 400;
    color: #7a8a9a;
    font-size: 0.82em;
}
.extras-desc {
    width: 100%;
    font-size: 0.85rem;
    color: #6b7c8d;
}

/* --- Admin-Buttons: nutzen ausschließlich Bulma-Klassen + .button.is-icon --- */
/* Basis-Regeln und .button.is-icon stehen im Unified-UI-Block am Anfang.
   Hier nur noch admin-spezifische Feinheiten. */

.admin .button[disabled] {
    opacity: 0.72;
    cursor: not-allowed;
    filter: grayscale(0.15);
}

.admin .modal-card-head .delete {
    width: 2rem;
    max-width: 2rem;
    height: 2rem;
    max-height: 2rem;
}

.admin .modal-card-foot .button {
    min-height: 2.5rem;
}

/* Admin-Tabellen: sichtbare Action-Buttons kompakt, Rest im Drei-Punkte-Menü. */
.admin .admin-table td.actions-cell .button.is-icon,
.admin .admin-table td.admin-actions-cell .button.is-icon,
.admin .admin-table td[data-label="Aktionen"] .button.is-icon,
.admin .admin-table td[data-label="Actions"] .button.is-icon {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    font-size: 0.82rem !important;
    border-radius: 6px;
    line-height: 1;
    box-sizing: border-box;
}

.admin .admin-table td.actions-cell .button:not(.is-icon),
.admin .admin-table td.admin-actions-cell .button:not(.is-icon),
.admin .admin-table td[data-label="Aktionen"] .button:not(.is-icon),
.admin .admin-table td[data-label="Actions"] .button:not(.is-icon) {
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 8px;
}

.admin .admin-table td.actions-cell .button.is-small,
.admin .admin-table td.admin-actions-cell .button.is-small,
.admin .admin-table td[data-label="Aktionen"] .button.is-small,
.admin .admin-table td[data-label="Actions"] .button.is-small {
    min-width: 32px !important;
    min-height: 32px !important;
}

.admin .calendar-nav .button {
    min-height: 40px !important;
    height: 40px;
    min-width: 40px;
    border-radius: 8px !important;
}

.admin .js-add-row.button,
.admin .block-editor-toolbar .button,
.admin .editor-toolbar .button,
.admin .editor-toolbar button,
.admin .admin-editor-toolbar .button,
.admin [data-editor-command].button {
    min-height: 32px !important;
    border-radius: 8px !important;
}

.admin .table td .buttons {
    gap: 5px !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}

.admin .invoice-correction-table {
    table-layout: fixed;
}

.admin .invoice-correction-table th,
.admin .invoice-correction-table td {
    vertical-align: middle;
}

.admin .invoice-correction-table .invoice-line-label {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.admin .invoice-correction-table .invoice-line-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.admin .invoice-correction-table .js-line-tax-rate {
    min-width: 5ch;
}

.admin .invoice-correction-table .js-remove-correction-line {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 6px;
}

.admin .js-add-correction-line {
    min-height: 40px !important;
    border-radius: 8px !important;
}

.admin .invoice-correction-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.admin .invoice-correction-actions__main,
.admin .invoice-correction-actions__danger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin .invoice-correction-actions__danger {
    margin-left: auto;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(220, 38, 38, 0.18);
}

@media (max-width: 700px) {
    .admin .invoice-correction-actions__danger {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        padding-top: 0.75rem;
        border-left: 0;
        border-top: 1px solid rgba(220, 38, 38, 0.18);
    }
}

.admin .table th.option-description-col,
.admin .table td.option-description-col {
    width: 150px;
    max-width: 150px;
}

.admin .table td.option-description-col .option-description-text {
    display: inline-block;
    font-size: 0.76rem;
    color: #8792a0;
    line-height: 1.35;
    max-height: 2.7em;
    overflow: hidden;
}

/* .admin-left-menu-box durch .card.admin-card.admin-card--menu ersetzt;
   Padding-Regel steht im Unified-UI-Block am Anfang. */

.admin .admin-left-menu-content {
    padding: 12px;
}

.admin .admin-left-menu-list {
    max-height: 58vh;
    overflow-y: auto;
    margin-right: -4px;
    padding-right: 4px;
}

.admin .admin-left-menu-list li + li {
    margin-top: 4px;
}

.admin .admin-left-menu-list a.admin-left-menu-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    border-radius: 6px;
    padding: 7px 9px;
    line-height: 1.2;
}

.admin .admin-left-menu-list a.admin-left-menu-link .admin-left-menu-name {
    font-weight: 600;
    color: #2f3b48;
    min-width: 0;
    flex: 1 0 100%;
    word-break: break-word;
}

.admin .admin-left-menu-list a.admin-left-menu-link .tag {
    font-size: 0.62rem;
}

.admin .admin-left-menu-list a.admin-left-menu-link.is-active .admin-left-menu-name {
    color: #fff;
}

@media (max-width: 700px) {
    .admin .admin-table td.actions-cell,
    .admin .admin-table td.admin-actions-cell,
    .admin .admin-table td[data-label="Aktionen"],
    .admin .admin-table td[data-label="Actions"] {
        display: block;
        padding-top: 8px;
    }

    .admin .admin-table td.actions-cell::before,
    .admin .admin-table td.admin-actions-cell::before,
    .admin .admin-table td[data-label="Aktionen"]::before,
    .admin .admin-table td[data-label="Actions"]::before {
        display: block;
        margin-bottom: 6px;
    }

    .admin .admin-table td.actions-cell .buttons,
    .admin .admin-table td.admin-actions-cell .buttons,
    .admin .admin-table td[data-label="Aktionen"] .buttons,
    .admin .admin-table td[data-label="Actions"] .buttons,
    .admin .admin-table td.actions-cell .admin-row-actions,
    .admin .admin-table td.admin-actions-cell .admin-row-actions {
        justify-content: flex-start;
        gap: 8px;
    }

}

.money {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.money-main {
    font-size: 1em;
}

.money-cents {
    font-size: 0.78em;
}

.money-currency {
    font-size: 0.92em;
}

.summary-card {
    margin: 0 0 0.6rem;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.summary-card-image {
    margin: 0;
    flex: 0 0 196px;
    width: 196px;
    aspect-ratio: 4 / 3;
    background: #eef3f8;
}

.summary-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.summary-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.66rem 0.78rem 0.72rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Ausstattungs-Badges: unten rechts (im Summary-Kärtchen und bei {{FEATURE_BADGES}}) */
.feature-badges-widget {
    box-sizing: border-box;
}

.summary-card-body .feature-badges-widget {
    margin-top: auto;
    align-self: flex-end;
}

.feature-badges-widget .summary-card-features {
    justify-content: flex-start;
}

.feature-badges-widget .summary-card-more-details {
    width: 100%;
    max-width: 100%;
    text-align: left;
}

.summary-card-title {
    margin: 0 0 0.35rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #12314f;
}

.summary-card-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem 0.36rem;
}

.summary-card-feature {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    border: 1px solid #dbe5f0;
    border-radius: 999px;
    background: #f7fafd;
    padding: 0.14rem 0.44rem;
    font-size: 0.82rem;
    line-height: 1.15;
    color: #2d4a67;
    text-shadow: none !important;
}

.summary-card-feature-icon {
    font-size: 0.95rem;
    line-height: 1;
    text-shadow: none !important;
}

.summary-card-feature-label {
    text-shadow: none !important;
}

.summary-card-feature--dimmed {
    color: #8f9aa7;
    border-color: #e3e7ed;
    background: #f5f7fa;
}

.summary-card-feature--dimmed .summary-card-feature-icon,
.summary-card-feature--dimmed .summary-card-feature-label,
.apartment-tab-tooltip-feature--dimmed .apartment-tab-tooltip-feature-icon,
.apartment-tab-tooltip-feature--dimmed .apartment-tab-tooltip-feature-label {
    color: inherit;
    opacity: 0.9;
}

.summary-card-more-details {
    margin-top: 0.25rem;
}

.summary-card-more-summary {
    display: inline-block;
    font-size: 0.72rem;
    color: #8b96a4;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    letter-spacing: 0.01em;
}

.summary-card-more-summary::marker {
    content: '';
}

.summary-card-more-summary::-webkit-details-marker {
    display: none;
}

.summary-card-features--more {
    margin-top: 0.32rem;
}

/* Home seasons uses the same badge size as {{FEATURE_BADGES}}. */

@media (max-width: 700px) {
    .summary-card {
        display: block;
    }

    .summary-card-image {
        width: 100%;
        aspect-ratio: 4 / 3;
    }
}

.admin .apartment-admin-teaser {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #f4f7fb;
}

.admin .apartment-admin-teaser img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.admin .apartment-admin-teaser--modal img {
    max-height: 190px;
}

@media (max-width: 900px) {
    .apartment-tab-tooltip {
        display: none;
    }
}

/* Guest portal: QR deep-link highlight */
.guest-qr-flash {
    outline: 3px solid #3273dc;
    outline-offset: 4px;
    border-radius: 10px;
    transition: outline-color 0.3s ease;
}

.guest-qr-inventory-item-highlight {
    box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.24), 0 8px 24px rgba(50, 115, 220, 0.16);
}

.pshop-action-btn .pshop-action-karma-badge {
    position: absolute;
    top: -0.55rem;
    right: -0.45rem;
    min-width: 1.35rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(3, 47, 90, 0.18);
    color: #032f5a;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 0;
    box-shadow: 0 2px 6px rgba(3, 47, 90, 0.16);
    pointer-events: none;
}

/* Admin: small QR sticker print */
.admin-qr-sticker-card {
    max-width: 420px;
}
.admin-qr-print-area {
    text-align: center;
    padding: 12px 8px;
}
.admin-qr-print-area img {
    image-rendering: pixelated;
    width: 112px;
    height: 112px;
}
.admin-qr-sticker-name {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 8px 0 4px;
    word-break: break-word;
}
.admin-qr-sticker-hint {
    font-size: 0.78rem;
    color: #666;
    margin: 0;
}
@media print {
    @page {
        margin: 10mm;
    }
    body * {
        visibility: hidden !important;
    }
    /* Nur Etikett: QR + Bezeichnung + Hinweistext (Kette bis .admin-qr-print-area sichtbar) */
    #admin-qr-sticker-modal,
    #admin-qr-sticker-modal .modal-card,
    #admin-qr-sticker-modal .modal-card-body,
    #admin-qr-sticker-modal .admin-qr-print-area,
    #admin-qr-sticker-modal .admin-qr-print-area * {
        visibility: visible !important;
    }
    #admin-qr-sticker-modal {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        z-index: 0 !important;
    }
    #admin-qr-sticker-modal .modal-background,
    #admin-qr-sticker-modal .admin-no-print {
        display: none !important;
    }
    #admin-qr-sticker-modal .modal-card {
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        width: 48mm !important;
        max-width: 48mm !important;
        margin: 0 !important;
    }
    #admin-qr-sticker-modal .modal-card-body {
        padding: 0 !important;
        display: block !important;
    }
    .admin-qr-print-area {
        padding: 0 !important;
        text-align: center;
    }
    .admin-qr-print-area img {
        width: 22mm !important;
        height: 22mm !important;
    }
    .admin-qr-sticker-name {
        font-size: 8pt !important;
        margin: 2mm 0 1mm !important;
    }
    .admin-qr-sticker-hint {
        font-size: 7pt !important;
        color: #000 !important;
    }
}

/* ============================================================
 * Tasmota-Steuerungs-Karten (Gastportal)
 * ============================================================ */
.tasmota-grid-card {
    position: relative;
}
/* Gäste außerhalb des LAN: keine Steuerung, kein Modal */
.tasmota-grid-card.tasmota-card-unavailable {
    opacity: 0.52;
    filter: grayscale(0.4);
    cursor: not-allowed;
}
/* Klima-Werte unten in der Karte: Feuchtigkeit unten links,
   Temperatur unten rechts. Container ist absolut positioniert,
   die beiden Werte stehen in den Ecken. Die Karte hat zusätzlich
   etwas Bottom-Padding, damit der Label nicht überlappt. */
.tasmota-grid-card.has-climate,
.tasmota-grid-card.has-thermostat-map {
    padding-bottom: 0;
}
.tasmota-grid-card.has-tasmota-tile-metrics {
    padding-bottom: 38px;
}
.tasmota-grid-card.has-thermostat-map.has-climate.has-tasmota-tile-metrics {
    padding-bottom: 58px;
}
.tasmota-grid-card .tasmota-tile-bottom-stack {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}
.tasmota-grid-card .tasmota-tile-bottom-stack .tasmota-climate {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
}
.tasmota-grid-card .tasmota-therm-map {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #1e3a4f;
    line-height: 1.15;
}
.tasmota-grid-card .tasmota-therm-map-row {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    font-variant-numeric: tabular-nums;
}
.tasmota-grid-card .tasmota-therm-map-row--ist { align-items: flex-start; }
.tasmota-grid-card .tasmota-therm-map-row--ist .tasmota-climate-value { color: #0f766e; }
.tasmota-grid-card .tasmota-therm-map-row--soll .tasmota-climate-value { color: #c2410c; }
.tasmota-grid-card .tasmota-climate {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #1f3a55;
    line-height: 1.1;
    pointer-events: none;
}
.tasmota-grid-card .tasmota-climate-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.tasmota-grid-card .tasmota-climate-row--humidity .material-symbols-rounded {
    font-size: 1rem;
    color: #2563eb;
}
.tasmota-grid-card .tasmota-climate-row--temperature .material-symbols-rounded {
    font-size: 1rem;
    color: #f97316;
}
.tasmota-grid-card .tasmota-climate-value {
    font-weight: 600;
}

/* Batterie-Indikator oben rechts in der Karte. Wird vom JS sichtbar
   geschaltet, sobald für den Klima-Sensor ein Battery-Wert vorliegt. */
.tasmota-grid-card .tasmota-battery-indicator {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
    color: #2f4156;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    pointer-events: none;
}
.tasmota-grid-card .tasmota-battery-indicator[hidden] {
    display: none !important;
}
.tasmota-grid-card .tasmota-battery-indicator .material-symbols-rounded {
    font-size: 1rem;
    line-height: 1;
}
.tasmota-grid-card .tasmota-battery-indicator.is-low {
    color: #b91c1c;
    background: rgba(254, 226, 226, 0.95);
}
/* Admin: Akku oben rechts; Frische-Häkchen oben links (s. tasmota-cache-freshness-badge) */
.tasmota-grid-card.is-admin-view .tasmota-battery-indicator {
    right: 6px;
    top: 6px;
}

/* Server-Cache-Frische (nur Admin): oben links */
.tasmota-grid-card .tasmota-cache-freshness-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: auto;
    cursor: default;
}
.tasmota-grid-card .tasmota-card-avail-banner {
    position: absolute;
    bottom: 6px;
    /* Platz für Freshness-Badge (links, Admin) und Offline-Dot (rechts, Gast) lassen */
    left: 30px;
    right: 30px;
    z-index: 2;
    display: block;
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.15;
    padding: 2px 6px;
    border-radius: 8px;
    pointer-events: none;
    background: rgba(255,255,255,0.85);
    color: #555;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Karte etwas vergrößern, damit Icon/Label/Inhalt nicht ans Banner stoßen. */
.tasmota-grid-card.has-tasmota-card-avail {
    padding-bottom: 26px;
}
/* Geräte ohne Dauerstrom bzw. zeitlich begrenzt (data-tasmota-limited-ids) lösen
   kein Warndreieck aus - das JS lässt sie bei der Offline-Prüfung weg, das
   Verfügbarkeits-Banner zeigt den erwarteten Zustand. Das Warndreieck sitzt
   oben, das Banner darf deshalb die volle Breite nutzen. */
.tasmota-grid-card[data-tasmota-card-avail] .tasmota-card-avail-banner {
    left: 8px;
    right: 8px;
}
.tasmota-grid-card .tasmota-card-avail-banner.is-active {
    color: #1b5e20;
    background: rgba(232,245,233,0.92);
}
.tasmota-grid-card .tasmota-card-avail-banner.is-inactive {
    color: #b71c1c;
    background: rgba(255,235,238,0.92);
}
.tasmota-thermo-control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.tasmota-thermo-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tasmota-thermo-control-target {
    flex: 1 1 auto;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
}
.tasmota-thermo-control-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8rem;
    color: #555;
}

/* Thermo-Tile-Modus: der eigene Header (Icon + Titel oben links) und das
   Verfügbarkeits-Banner (Zeile 2) ersetzen das Standard-Icon und -Label
   der Info-Karte. Beides bleibt im DOM für die Tasmota-Karte selbst, wird
   hier aber ausgeblendet, falls vorhanden. */
.tasmota-grid-card.is-tasmota-thermo-tile > .info-card-icon,
.tasmota-grid-card.is-tasmota-thermo-tile > .info-card-label {
    display: none;
}

/* Temperatursteuerungs-Karte im Blue-Card-Stil (analog Türcode-Karte):
   - Karte belegt zwei Spalten im Info-Cards-Grid und nutzt ein flacheres
     2.12:1-Seitenverhältnis.
   - Inhalt wird in ein CSS-Grid umsortiert:
       Zeile 1: Titel links | Ist-Temp./Feuchte rechts (auf Höhe der Überschrift)
       Zeile 2: (Titel läuft weiter) | Akku-Indikator
       Zeile 3: Auto/Manuell über der Solltemperatur, beides senkrecht mittig
     Der Heiz-Ein/Aus-Status liegt absolut rechts auf halber Kartenhöhe.
   - Das Verfügbarkeits-Banner („kein Strom“) liegt – exakt wie bei den
     Lampen-/Dimmer-Karten – absolut am unteren Kartenrand; die Klimawerte
     sind deshalb nach rechts oben gewandert und werden nicht verdeckt.
   - Gleiches Layout auch für die Modal-Dashboard-Kopie
     (.tasmota-modal-thermo-card-copy). */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy {
    grid-column: span 2;
    aspect-ratio: 2.12 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
        "header  battery"
        "header  side"
        "hero    hero";
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
    justify-items: stretch;
    padding: 14px 16px;
    text-align: left;
    /* Gleicher Blue-Card-Hintergrund wie .doorcode-grid-card: das generische
       .blue-card-Gradient wird hier mit höherer Spezifität festgenagelt,
       damit kein later geladener .info-card-Style es überschreibt. */
    background: linear-gradient(135deg, rgba(232, 244, 253, 0.92) 0%, rgba(240, 247, 255, 0.92) 100%);
    border-color: #d0e3f0;
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-thermo-header,
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-thermo-tile,
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-tile-bottom-stack,
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-battery-indicator,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-thermo-header,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-thermo-tile,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-tile-bottom-stack,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-battery-indicator {
    position: relative;
    z-index: 1;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.has-tasmota-card-avail,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy.has-tasmota-card-avail {
    /* Platz für das absolut am unteren Rand liegende Verfügbarkeits-Banner
       reservieren – gleicher Wert wie bei den Lampen-Karten (26px). Die
       padding-Kurzschreibweise oben hat höhere Spezifität als die generische
       .has-tasmota-card-avail-Regel, deshalb hier noch einmal explizit. */
    padding-bottom: 26px;
}
/* Header (Zeilen 1–2 links): Icon links + Titel daneben (linksbündig). */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-thermo-header,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-thermo-header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: start;
    gap: 5px;
    width: 100%;
    min-width: 0;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-thermo-header .blue-card-title,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-thermo-header .blue-card-title {
    min-width: 0;
    width: 100%;
    /* Akku/Klimawerte liegen jetzt in der eigenen rechten Grid-Spalte,
       der Titel braucht rechts keinen Freiraum mehr. */
    padding-right: 0;
}
/* Auto/Manuell steht im Hero-Block direkt über der Solltemperatur. Der Hero
   zentriert senkrecht, damit sitzt das Paar aus Umschalter und Reglern
   zusammen auf halber Kartenhöhe. */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-tile--hero > .tasmota-thermo-tile__mode,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .tasmota-thermo-tile--hero > .tasmota-thermo-tile__mode {
    align-self: center;
    width: auto;
    margin: 0;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-thermo-header .blue-card-title,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-thermo-header .blue-card-title {
    justify-content: flex-start;
    font-size: 1.02rem;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-thermo-header .blue-card-title-icon,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-thermo-header .blue-card-title-icon {
    /* Icon-Farbe = Titel-Farbe (dunkelblau), identisch zur Türcode-Karte. */
    color: inherit;
}
/* Hero (Zeile 3, volle Breite): Auto/Manuell, Sollwert und +/− als Block.
   Er sitzt etwas oberhalb der Zellenmitte: das untere Padding verkleinert den
   Bereich, in dem zentriert wird, und hebt den Block dadurch um die Hälfte
   dieses Werts an. Grösserer Wert = weiter oben. Unten bleibt der Platz frei,
   den bei „kein Strom“ ohnehin das Verfügbarkeits-Banner braucht. */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-thermo-tile--hero,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-thermo-tile--hero {
    grid-area: hero;
    order: unset;
    height: 100%;
    justify-content: center;
    padding-bottom: 22px;
    gap: 6px;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-thermo-tile--hero .tasmota-thermo-tile__controls,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-thermo-tile--hero .tasmota-thermo-tile__controls {
    column-gap: 12px;
    align-items: center;
    justify-content: center;
}
/* Bedienelemente: deutlich, aber nicht so groß, dass die mittlere Spalte
   gegen die +/− Buttons drückt. Auf 2x-breiter Card-Hero-Spalte bleibt links
   und rechts vom Sollwert genug Luft, sodass die „0“ von z. B. 20,0 °C nicht
   mehr unter dem + Button verschwindet. */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-tile__btn,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .tasmota-thermo-tile__btn {
    width: 34px;
    height: 34px;
    font-size: 1.25rem;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-tile__target,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .tasmota-thermo-tile__target {
    font-size: 1.45rem;
}
/* Der Target-Wrap soll nicht unter seine eigene Inhaltsbreite schrumpfen,
   sonst überlappt der gefettete Sollwert die Nachbar-Buttons. */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-tile__target-wrap,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .tasmota-thermo-tile__target-wrap {
    min-width: max-content;
    flex-shrink: 0;
}
/* Sensor-Stack (Zeile 2 rechts): Ist-Temperatur/Feuchte klein rechts unter
   dem Akku. Der untere Kartenrand bleibt dadurch komplett frei für das
   Verfügbarkeits-Banner. */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-tile-bottom-stack,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-tile-bottom-stack {
    grid-area: side;
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    align-self: start;
    justify-self: end;
    width: auto;
    gap: 2px;
    text-align: right;
    pointer-events: none;
}
/* Akku-Indikator (Zeile 1 rechts): läuft im Grid mit, statt absolut in der
   Ecke zu kleben – so kann er nicht über den Klimawerten liegen. Er steht
   zuoberst in der Ecke; die Ist-Werte rücken darunter. Ist er ausgeblendet
   (kein Battery-Wert), kollabiert die Zeile. */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-battery-indicator,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-battery-indicator {
    grid-area: battery;
    position: static;
    top: auto;
    right: auto;
    align-self: start;
    justify-self: end;
}
/* Klima-Werte oben rechts: kompakt gestapelt (Temperatur über Feuchte),
   rechtsbündig und kleiner als die Bedienelemente. */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-climate,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .tasmota-climate {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0;
    font-size: 0.78rem;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-climate-row,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .tasmota-climate-row {
    grid-column: 1;
    justify-content: flex-end;
    gap: 4px;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-climate-row .material-symbols-rounded,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .tasmota-climate-row .material-symbols-rounded {
    font-size: 1rem;
}
/* Therm-Map (Ist/Soll) oben rechts gestapelt, gleiche Schriftgröße wie die
   Klimawerte darunter. */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-therm-map,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .tasmota-therm-map {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    font-size: 0.78rem;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-therm-map-row,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .tasmota-therm-map-row {
    align-items: flex-end;
}
.tasmota-thermo-tile--hero {
    order: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
}
.tasmota-thermo-tile__mode.thermo-mode-tabs ul {
    margin-bottom: 0;
    justify-content: center;
}
/* Bulma macht aus .tabs eine Bildlauf-Flaeche (overflow-x:auto,
   overflow-y:hidden). In der senkrechten Flex-Spalte der Kachel faellt damit
   der Mindesthoehen-Schutz weg: die Leiste wurde auf halbe Hoehe gequetscht
   und schnitt Auto/Manuell oben und unten ab. Zwei kurze Knoepfe brauchen
   keinen Bildlauf - also sichtbar lassen und nicht schrumpfen. */
.tasmota-thermo-tile__mode.thermo-mode-tabs {
    flex: 0 0 auto;
    overflow: visible;
}
.thermo-mode-tabs {
    pointer-events: auto;
}
.thermo-mode-tabs li button,
.thermo-mode-tabs li > span[role="button"] {
    appearance: none;
    border: 1px solid #dbdbdb;
    background: #fff;
    color: var(--brand-primary, #032f5a);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    line-height: 1.5;
    margin: 0;
    padding: 0.25em 0.65em;
    text-align: center;
    white-space: nowrap;
}
.thermo-mode-tabs.is-toggle li:first-child button,
.thermo-mode-tabs.is-toggle li:first-child > span[role="button"] {
    border-radius: 4px 0 0 4px;
}
.thermo-mode-tabs.is-toggle li:last-child button,
.thermo-mode-tabs.is-toggle li:last-child > span[role="button"] {
    border-radius: 0 4px 4px 0;
}
.thermo-mode-tabs.is-toggle li + li {
    margin-left: -1px;
}
.thermo-mode-tabs.is-toggle li.is-active button,
.thermo-mode-tabs.is-toggle li.is-active > span[role="button"] {
    background-color: var(--brand-primary, #032f5a);
    border-color: var(--brand-primary, #032f5a);
    color: #fff;
    z-index: 1;
    position: relative;
}
.thermo-mode-tabs.is-toggle li button:hover:not(:disabled),
.thermo-mode-tabs.is-toggle li > span[role="button"]:hover {
    background-color: rgba(3, 47, 90, 0.06);
    color: var(--brand-primary, #032f5a);
}
.thermo-mode-tabs.is-toggle li.is-active button:hover:not(:disabled),
.thermo-mode-tabs.is-toggle li.is-active > span[role="button"]:hover {
    background-color: var(--brand-primary, #032f5a);
    color: #fff;
}
.tasmota-thermo-tile__mode.thermo-mode-tabs.is-small li button,
.tasmota-thermo-tile__mode.thermo-mode-tabs.is-small li > span[role="button"] {
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
}
.tasmota-thermo-control .thermo-mode-tabs {
    margin-bottom: 0.65rem;
}
.tasmota-thermo-control .thermo-mode-tabs ul {
    justify-content: center;
}
.tasmota-thermo-tile__btn:disabled,
.tasmota-thermo-tile__btn.is-disabled,
.tasmota-thermo-control-row .button:disabled,
.tasmota-thermo-control-row .button.is-disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}
/* +/− sind in BEIDEN Betriebsarten sichtbar und bedienbar. Früher blendete die
   Automatik sie aus: die Karte zeigte dann nur noch eine Zahl, und wer sie
   ändern wollte, musste erst erraten, dass dafür oben der Umschalter zuständig
   ist. Jetzt schaltet ein Druck auf +/− selbst auf Manuell um (siehe
   tasmotaThermoTileChange im Tasmota-Fragment). */
.tasmota-thermo-tile [data-thermo-dec],
.tasmota-thermo-tile [data-thermo-inc],
.tasmota-device--thermo_control [data-tasmota-thermo-dec],
.tasmota-device--thermo_control [data-tasmota-thermo-inc] {
    display: inline-flex;
}
.tasmota-thermo-tile__controls {
    width: 100%;
    /* Jede Zelle nimmt ihre eigene Inhaltsbreite. Mit justify-content: center
       sitzt der Block [−] [20,0 °C] [+] sauber mittig, ohne dass die +/–
       Buttons den Sollwert überlagern (das passierte beim alten 1fr-Layout,
       wenn die Tile-Zelle schmal wurde und die mittlere Spalte zu klein
       blieb, sodass das „nowrap“-Target sichtbar über die Spaltengrenze
       hinausragte). */
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 10px;
    align-items: center;
    justify-content: center;
}
/* +/− dezent als Pille wie der Kippschalter, immer im Blau des eingeschalteten
   Schalters (Akzent „blue“ #2b5b8f, Flaeche #e7eef8) - auch auf der Heizungskarte (15.09.2026).
   Das Textzeichen bleibt im Markup (Screenreader lesen aria-label), gezeichnet
   werden zwei Balken - so sitzt das Zeichen unabhaengig von der Schrift mittig. */
.tasmota-thermo-tile__btn {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 48px;
    height: 30px;
    border-radius: 999px;
    border: 0;
    background: #e7eef8;
    font-size: 0;
    line-height: 1;
    color: #2b5b8f;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color .18s ease, transform .08s ease;
    box-shadow: inset 0 0 0 1px rgba(43, 91, 143, 0.14);
}
.tasmota-thermo-tile__btn::before,
.tasmota-thermo-tile__btn[data-thermo-inc]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
}
.tasmota-thermo-tile__btn[data-thermo-inc]::after {
    width: 2px;
    height: 13px;
}
.tasmota-thermo-tile__btn:hover { background: #dbe5f2; }
.tasmota-thermo-tile__btn:active { transform: scale(0.94); background: #d0ddef; }
.tasmota-thermo-tile__btn:focus-visible {
    outline: 2px solid #2b5b8f;
    outline-offset: 2px;
}
.tasmota-thermo-tile__target-wrap {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.tasmota-thermo-tile__target {
    min-width: 0;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.05;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tasmota-thermo-tile__target small {
    font-size: 0.65em;
    font-weight: 500;
    margin-left: 1px;
    color: #6b7280;
}
.tasmota-thermo-tile__hero-meta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.7rem;
    color: #4b5563;
    line-height: 1.05;
}
.tasmota-thermo-tile__hero-meta > span:empty { display: none; }
.tasmota-thermo-tile__current { font-variant-numeric: tabular-nums; }

/* Legacy-Status-Icon neben dem Sollwert; bleibt für alte Markups harmlos. */
.tasmota-thermo-tile__state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    color: #9ca3af;
    transition: color .15s ease;
}
.tasmota-thermo-tile__state-icon:empty { display: none; }
.tasmota-thermo-tile__state-icon.is-on {
    color: #ea580c;
    text-shadow: 0 0 6px rgba(234,88,12,0.35);
}
.tasmota-thermo-tile__state-icon.is-off {
    color: #6b7280;
}
.tasmota-thermo-tile__state-icon.is-unknown { color: #d1d5db; }
.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-card-unavailable .tasmota-thermo-tile__btn {
    opacity: .45;
    pointer-events: none;
}

/* Hintergrund-Ambiente der Thermostat-Kachel: eine Flamme pro
   virtuellem Schalter (mit dezentem Watt). */
.tasmota-thermo-ambiance {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}
.tasmota-thermo-ambiance::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    opacity: 0;
    transition: opacity 0.5s ease, background 0.5s ease;
    background: linear-gradient(to top, rgba(255, 132, 50, 0.16), rgba(255, 180, 80, 0.05) 46%, transparent);
}
.is-thermo-heating-on > .tasmota-thermo-ambiance::before {
    opacity: 1;
}
.is-thermo-heating-off > .tasmota-thermo-ambiance::before {
    opacity: 1;
    background: linear-gradient(to top, rgba(148, 197, 228, 0.14), transparent 70%);
}
.tasmota-thermo-ambiance__flames {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 6px;
    height: 52%;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.is-thermo-heating-on > .tasmota-thermo-ambiance .tasmota-thermo-ambiance__flames {
    opacity: 0.9;
}
.tasmota-thermo-flame {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.tasmota-thermo-flame.is-on {
    display: flex;
}
.tasmota-thermo-flame__label {
    max-width: 5.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1.1;
    color: rgba(154, 52, 18, 0.62);
}
.tasmota-thermo-flame__watt {
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(154, 52, 18, 0.48);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tasmota-thermo-flame__watt[hidden] {
    display: none;
}
.tasmota-thermo-flame__svg {
    display: block;
    width: 28px;
    height: 42px;
    flex: 0 0 auto;
    overflow: visible;
    filter: drop-shadow(0 0 6px rgba(234, 88, 12, 0.35));
    transform-origin: 50% 90%;
    animation: thermo-flame-flicker 0.85s ease-in-out infinite;
    animation-delay: calc(var(--flame-i, 0) * -0.37s);
}
.tasmota-thermo-flame:not(.is-on) .tasmota-thermo-flame__svg {
    animation: none;
    filter: none;
}
.tasmota-thermo-flame__outer { fill: #ea580c; }
.tasmota-thermo-flame__mid { fill: #fbbf24; }
.tasmota-thermo-flame__inner { fill: #fff6d0; }
@keyframes thermo-flame-flicker {
    0%, 100% { transform: rotate(0deg) scale(1, 1); opacity: 0.88; }
    40% { transform: rotate(-4deg) scale(0.94, 1.1); opacity: 1; }
    72% { transform: rotate(4deg) scale(1.06, 0.92); opacity: 0.78; }
}
@media (prefers-reduced-motion: reduce) {
    .tasmota-thermo-flame__svg {
        animation: none;
    }
}

.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-dimmer-tile {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 14px 12px;
    background: linear-gradient(135deg, rgba(232, 244, 253, 0.92) 0%, rgba(240, 247, 255, 0.92) 100%);
    border-color: #d0e3f0;
    text-align: left;
}
.tasmota-dimmer-tile {
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    align-items: center;
}
.tasmota-dimmer-tile__header {
    display: flex;
    align-items: center;
    min-width: 0;
}
.tasmota-dimmer-tile__header .blue-card-title {
    justify-content: flex-start;
    font-size: 0.92rem;
}
.tasmota-dimmer-tile__value {
    justify-self: center;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    color: #032f5a;
    font-variant-numeric: tabular-nums;
}
.tasmota-dimmer-tile__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(3, 47, 90, 0.18);
    outline: none;
    touch-action: pan-y;
    cursor: pointer;
    -webkit-user-drag: none;
}
.tasmota-dimmer-tile__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #032f5a;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(3, 47, 90, 0.28);
    cursor: grab;
}
.tasmota-dimmer-tile__slider::-webkit-slider-thumb:active {
    cursor: grabbing;
}
.tasmota-dimmer-tile__slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #032f5a;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(3, 47, 90, 0.28);
    cursor: grab;
}
.tasmota-grid-card.is-tasmota-dimmer-tile.tasmota-card-unavailable .tasmota-dimmer-tile__slider {
    opacity: .45;
    pointer-events: none;
}

/* Verbrauchsanzeige je Switch im Modal */
.tasmota-switch-power {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #4b5563;
    font-variant-numeric: tabular-nums;
}
.tasmota-switch-power[hidden] { display: none !important; }
.tasmota-switch-power .material-symbols-rounded {
    font-size: 1rem;
    color: #f59e0b;
}
.tasmota-switch-power-separator {
    color: #94a3b8;
}
.tasmota-grid-card .tasmota-cache-freshness-badge[hidden] {
    display: none !important;
}

/* Warndreieck (Admin/Wandtablet und Gast gleich, oben links am Karten-Symbol):
   nur sichtbar, wenn ein Gerät der Karte offline oder nicht erreichbar ist.
   Einen „online“-Zustand zeigt die Karte nicht mehr an (15.09.2026). */
.tasmota-grid-card .tasmota-card-warning,
.tasmota-grid-card:not(.is-admin-view) .tasmota-guest-offline-dot.tasmota-card-warning {
    position: absolute;
    top: 5px;
    left: 5px;
    right: auto;
    z-index: 3;
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    pointer-events: auto;
    cursor: default;
}
.tasmota-card-warning__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.25));
}
.tasmota-grid-card:not(.is-admin-view) .tasmota-guest-offline-dot[hidden] {
    display: none !important;
}
.tasmota-guest-device-offline-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: #b91c1c;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}
.tasmota-guest-device-offline-dot[hidden] {
    display: none !important;
}

/* Admin → SmartHome: Tasmota-Cache / Funkfrische (grün / rot) */
.smarthome-device-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.smarthome-device-detail {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}

.smarthome-device-thumb {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    z-index: 1;
}

.smarthome-device-detail__img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e8edf3;
    display: block;
    transition: box-shadow 0.15s ease;
}

/* Hover-Zoom darf nicht von table-wrapper overflow abgeschnitten werden. */
.admin .table-wrapper:has(.smarthome-device-thumb:hover),
.admin .table-wrapper:has(.smarthome-device-thumb:focus-within) {
    overflow: visible;
}

.smarthome-device-thumb:hover,
.smarthome-device-thumb:focus-within {
    z-index: 40;
}

.smarthome-device-thumb:hover .smarthome-device-detail__img,
.smarthome-device-thumb:focus-within .smarthome-device-detail__img {
    position: absolute;
    left: 0;
    top: 50%;
    width: 160px;
    height: 160px;
    margin-top: -80px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    border-color: #cbd5e1;
}

.smarthome-device-detail__text {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Details-Spalte: nicht zur flexiblen Wrap-Spalte machen, sonst wird sie
   auf schmalen Viewports extrem schmal und stapelt IDs/Namen in die Hoehe. */
.admin .admin-table td.smarthome-detail-cell {
    min-width: 14rem;
}

@media (min-width: 1024px) {
    .admin .admin-table td.smarthome-detail-cell {
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }
}

@media (max-width: 700px) {
    .admin .admin-table td.smarthome-detail-cell {
        display: block;
        min-width: 0;
        padding-top: 8px;
    }

    .admin .admin-table td.smarthome-detail-cell::before {
        display: block;
        flex: none;
        width: auto;
        margin-bottom: 6px;
    }

    .admin .smarthome-device-detail {
        align-items: center;
    }

    .admin .smarthome-device-detail__text .has-text-grey {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.smarthome-device-detail__role {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.05rem;
}

.smarthome-device-detail__name {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.1rem;
}

.smarthome-groups-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.smarthome-groups-list__item {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e8edf3;
}

.smarthome-groups-list__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Geräte, die nur als Mitglied einer Gruppe / eines virtuellen Thermostats
   auftauchen – visuell zurückgenommen, aber weiter bedienbar. */
.admin tr.smarthome-row--member {
    opacity: 0.48;
    color: #64748b;
    background: #f8fafc;
}

.admin tr.smarthome-row--member:hover {
    opacity: 0.72;
}

.admin tr.smarthome-row--member .smarthome-device-detail__img {
    filter: grayscale(0.55);
}

.admin .smarthome-member-badge {
    margin-top: 0.2rem;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: normal;
    height: auto;
    min-height: 1.5em;
    line-height: 1.25;
    padding: 0.15rem 0.5rem;
}

th.smarthome-cache-col,
td.smarthome-cache-col {
    width: 3.25rem;
    vertical-align: middle;
}
.smarthome-cache-signal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}
.smarthome-cache-signal .material-symbols-rounded {
    font-size: 1.35rem;
    line-height: 1;
}
.smarthome-cache-signal--fresh {
    color: #15803d;
}
.smarthome-cache-signal--stale {
    color: #b91c1c;
}

.tasmota-device-freshness {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 2px;
}
.tasmota-device-freshness[hidden] {
    display: none !important;
}
.tasmota-device-freshness .material-symbols-rounded {
    font-size: 1.2rem;
    line-height: 1;
}
.tasmota-device-freshness--ok {
    color: #15803d;
}
.tasmota-device-freshness--stale {
    color: #b91c1c;
}

/* Modal mit Geräte-Steuerung */
.tasmota-modal-card {
    /* Override the global infocard-* "80vw / 80vh" rule for tasmota controls */
    width: min(540px, 92vw) !important;
    max-width: 540px !important;
    height: auto !important;
    max-height: 86vh;
}
.tasmota-modal-card .modal-card-body {
    overflow-y: auto;
}
.tasmota-modal-card--thermo,
.tasmota-modal-card:has([data-tasmota-booking-schedule-card]) {
    width: min(720px, 94vw) !important;
    max-width: 720px !important;
}
.tasmota-modal-card--thermo .modal-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8fafc;
    padding: 16px;
}
.tasmota-modal-thermo-dashboard {
    margin: 0;
}
.tasmota-modal-thermo-card-copy {
    width: 100%;
    max-width: none;
    margin: 0;
    text-decoration: none;
}
.guest-page .tasmota-modal-thermo-card-copy.info-card.tasmota-grid-card.is-tasmota-thermo-tile {
    grid-column: auto;
    aspect-ratio: auto;
    min-height: 172px;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    /* Explizit Grid beibehalten (überschreibt ggf. .info-card Flex), damit
       Banner-Zeile und Klima-Side-Spalte auch im Modal-Dashboard greifen. */
    display: grid;
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.tasmota-modal-thermo-card-copy .tasmota-cache-freshness-badge,
.tasmota-modal-thermo-card-copy .tasmota-guest-offline-dot {
    display: none;
}
.tasmota-modal-section {
    width: 100%;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    padding: 14px;
}
.tasmota-modal-thermo-schedule {
    margin: 0;
}
.tasmota-modal-thermo-schedule[hidden] {
    display: none !important;
}
.tasmota-modal-thermo-schedule-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.tasmota-modal-thermo-schedule-head h3 {
    margin: 0 0 3px;
    font-size: 1rem;
    line-height: 1.2;
    color: #0f172a;
}
.tasmota-modal-thermo-schedule-head p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.35;
    color: #475569;
}
.tasmota-modal-card--thermo .tasmota-schedule-day {
    border-radius: 8px;
    background: #fbfdff;
}
.tasmota-modal-card--thermo .tasmota-schedule-svg {
    max-width: 100%;
}

.tasmota-device-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tasmota-modal-card--thermo .tasmota-device-controls {
    gap: 12px;
}
.tasmota-device {
    border: 1px solid #e0e5ec;
    border-radius: 8px;
    padding: 14px 14px 12px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.tasmota-modal-card--thermo .tasmota-device {
    border-color: #dbe3ef;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.tasmota-device.is-loading {
    opacity: 0.6;
}
.tasmota-device.is-error {
    border-color: #f5b7b1;
    background: #fff4f3;
}
.tasmota-device-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
/* Gästeportal-Modal: Frische (check_circle) + Geräte-Icon + Name; rechts Local/Remote-Punkt */
.tasmota-device-header.tasmota-device-header--guestportal .tasmota-device-name {
    flex: 1;
    min-width: 0;
}
.tasmota-device-header--guestportal .tasmota-device-freshness--guest-modal {
    margin-right: 0;
}
.tasmota-device-header--guestportal .tasmota-device-freshness--guest-modal .material-symbols-rounded {
    font-size: 1.28rem;
}
.tasmota-device-header--guestportal .tasmota-device-id-wrap--guest-modal {
    flex-shrink: 0;
    margin-left: auto;
}
/* Local = grün, Remote = grau (Admin-Modal bleibt orange für Remote) */
.tasmota-device-header--guestportal .tasmota-link-dot--remote {
    background: #94a3b8;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.45);
}
.tasmota-device-name {
    font-weight: 600;
    color: #032f5a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tasmota-device-name .material-symbols-rounded {
    font-size: 1.25rem;
    color: #475569;
}
/* Frische-Icon: Farbe kommt von .tasmota-device-freshness--ok / --stale, nicht vom grauen Geräte-Icon */
.tasmota-device-name > .tasmota-device-freshness .material-symbols-rounded {
    color: inherit;
}
.tasmota-device-id-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.tasmota-device-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: #94a3b8;
}
.tasmota-link-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}
.tasmota-link-dot--local {
    background: #22c55e;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
}
.tasmota-link-dot--remote {
    background: #f97316;
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.35);
}
.tasmota-link-dot--error {
    background: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
}

/* Switch-Buttons (an / aus) */
.tasmota-switch-buttons {
    display: flex;
    gap: 8px;
}
.tasmota-switch-btn {
    flex: 1;
    border: 1px solid #d3dae2;
    background: #fff;
    color: #475569;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tasmota-switch-btn:hover {
    border-color: #475569;
}
.tasmota-switch-btn.is-active[data-state="on"] {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25);
}
.tasmota-switch-btn.is-active[data-state="off"] {
    background: #475569;
    border-color: #475569;
    color: #fff;
    box-shadow: 0 4px 14px rgba(71, 85, 105, 0.25);
}
.tasmota-switch-btn[disabled] {
    opacity: 0.6;
    cursor: progress;
}
.tasmota-device--heater {
    position: relative;
}
.tasmota-device--heater.is-heating {
    background: linear-gradient(135deg, rgba(255, 237, 213, 0.96), #fff);
    border-color: #fb923c;
    box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.22), 0 1px 3px rgba(15, 23, 42, 0.06);
}
.tasmota-device--heater.is-heating .tasmota-device-name .material-symbols-rounded {
    color: #c2410c;
}
.tasmota-heater-state {
    display: inline-flex;
    align-items: center;
    margin: 0 0 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(107, 114, 128, 0.12);
    color: #4b5563;
}
.tasmota-heater-state.is-on {
    background: rgba(234, 88, 12, 0.14);
    color: #c2410c;
}
.tasmota-heater-state.is-off {
    background: rgba(75, 85, 99, 0.12);
    color: #4b5563;
}
.tasmota-heater-state[hidden] {
    display: none;
}

/* Dimmer + Temperatur Slider */
.tasmota-slider-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.tasmota-slider-row label {
    font-size: 0.85rem;
    color: #475569;
    display: flex;
    justify-content: space-between;
}
.tasmota-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: #d3dae2;
    outline: none;
}
.tasmota-slider:disabled {
    opacity: 0.5;
}
.tasmota-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #032f5a;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.tasmota-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #032f5a;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.tasmota-thermostat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}
.tasmota-thermostat-grid .tasmota-thermostat-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    border: 1px solid #e0e5ec;
    border-radius: 8px;
    padding: 6px 10px;
}
.tasmota-thermostat-grid .tasmota-thermostat-cell .label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
.tasmota-thermostat-grid .tasmota-thermostat-cell .value {
    font-weight: 600;
    color: #1f3a55;
    font-variant-numeric: tabular-nums;
}

.tasmota-auto-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}
.tasmota-auto-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.tasmota-thermostat-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.tasmota-schedule-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tasmota-schedule-btn:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}
.tasmota-schedule-btn .material-symbols-rounded {
    font-size: 22px;
}
.tasmota-device.is-readonly .tasmota-schedule-btn {
    opacity: 0.5;
    pointer-events: none;
}

/* Wochenplan-Modal */
.tasmota-schedule-modal .modal-card {
    max-width: 720px;
    width: calc(100% - 32px);
}
.tasmota-schedule-modal .modal-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tasmota-schedule-modal .modal-card-body {
    background: #f8fafc;
}
.tasmota-schedule-hint {
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 12px;
    line-height: 1.4;
}
.tasmota-schedule-day-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tasmota-schedule-day {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px 12px;
    background: #ffffff;
    margin: 0;
}
.tasmota-schedule-day legend {
    font-weight: 600;
    color: #1e293b;
    padding: 0 6px;
    font-size: 0.95rem;
}
.tasmota-schedule-chart-wrap {
    width: 100%;
    max-width: 100%;
    margin-top: 2px;
}
.tasmota-schedule-svg {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 0 auto;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.tasmota-schedule-point-knob {
    cursor: grab;
}
.tasmota-schedule-point-knob:active {
    cursor: grabbing;
}
.tasmota-schedule-modal--readonly .tasmota-schedule-svg {
    pointer-events: none;
    opacity: 0.9;
}
.tasmota-schedule-modal--readonly .tasmota-schedule-point-knob {
    cursor: not-allowed;
}
.tasmota-schedule-slots {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tasmota-schedule-slot {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 4px 2px;
    border-bottom: 1px dashed #e2e8f0;
}
.tasmota-schedule-slot:last-child {
    border-bottom: none;
}
.tasmota-schedule-slot-label {
    color: #64748b;
    font-size: 0.85rem;
}
.tasmota-schedule-slot-time,
.tasmota-schedule-slot-temp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tasmota-schedule-slot input[type="number"] {
    width: 64px;
    padding: 4px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    background: #ffffff;
    color: #0f172a;
}
/* Sollwert °C: zwei Stellen + optional .5 — breiter als Uhrzeit-Felder */
.tasmota-schedule-slot-temp input[type="number"] {
    width: 4.75rem;
    min-width: 4.75rem;
    max-width: 6rem;
}
.tasmota-schedule-slot input[type="number"]:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}
.tasmota-schedule-status {
    margin-top: 12px;
    min-height: 1.2em;
    font-size: 0.85rem;
    color: #16a34a;
}
.tasmota-schedule-status.is-error {
    color: #b91c1c;
}

@media (max-width: 480px) {
    .tasmota-schedule-slot {
        grid-template-columns: 56px 1fr auto;
        gap: 8px;
    }
    .tasmota-schedule-slot input[type="number"] {
        width: 52px;
        font-size: 0.9rem;
    }
    .tasmota-schedule-slot-temp input[type="number"] {
        width: 4.5rem;
        min-width: 4.5rem;
        max-width: none;
    }
}

/* =========================================================
 * Rauchmelder-Karte (Gastportal: Admins = Voll, Gäste = Dichte)
 * ========================================================= */
.smoke-grid-card {
    position: relative;
    padding-bottom: 28px;
}
/* Wie Tasmota-Steuerkarten: Gäste remote = ausgegraut (Werte ggf. nur aus Cache) */
.smoke-grid-card.tasmota-card-unavailable {
    opacity: 0.52;
    filter: grayscale(0.4);
    cursor: not-allowed;
}
.smoke-grid-card--guest {
    cursor: pointer;
}
.smoke-grid-card--guest .info-card-label {
    padding-right: 2px;
}
.smoke-tile-marks {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    pointer-events: none;
}
.smoke-tile-density {
    position: absolute;
    right: 8px;
    bottom: 6px;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    max-width: 58%;
    font-size: 0.72rem;
    color: #1e3a4f;
    line-height: 1.15;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.smoke-tile-density .material-symbols-rounded {
    font-size: 0.95rem;
    color: #64748b;
    flex: 0 0 auto;
}
.smoke-card-indicators--guest {
    top: 6px;
    right: 8px;
    left: auto;
    max-width: calc(100% - 16px);
}
.smoke-guest-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.smoke-guest-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
}
.smoke-guest-item-label {
    font-weight: 600;
    margin-bottom: 6px;
    color: #0f172a;
}
.smoke-guest-pairs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9rem;
    color: #334155;
}
.smoke-modal-hint--guest {
    font-size: 0.88rem;
}
/* Oben rechts: Batterie (wie Tasmota-Klima), Platz für Admin-Badge */
.smoke-card-indicators {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 52px);
    pointer-events: none;
}
.smoke-grid-card.is-admin-view .smoke-card-indicators {
    right: 8px;
    max-width: calc(100% - 16px);
}
.smoke-grid-card .tasmota-battery-indicator {
    position: static;
    top: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
    color: #2f4156;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    pointer-events: none;
}
.smoke-grid-card .tasmota-battery-indicator[hidden] {
    display: none !important;
}
.smoke-grid-card .tasmota-battery-indicator .material-symbols-rounded {
    font-size: 1rem;
    line-height: 1;
}
.smoke-grid-card .tasmota-battery-indicator.is-low {
    color: #b91c1c;
    background: rgba(254, 226, 226, 0.95);
}
.smoke-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #94a3b8;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}
.smoke-dot--ok      { background: #16a34a; }
.smoke-dot--warn    { background: #f59e0b; }
.smoke-dot--alarm   { background: #dc2626; animation: smoke-pulse 1s ease-in-out infinite; }
.smoke-dot--test    { background: #2563eb; animation: smoke-pulse 1.4s ease-in-out infinite; }
.smoke-dot--offline { background: #6b7280; }
.smoke-dot--unknown { background: #cbd5e1; }

@keyframes smoke-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.6; }
}

.smoke-modal .modal-card {
    max-width: 640px;
    width: calc(100% - 32px);
}
.smoke-modal-card .modal-card-body {
    background: #f8fafc;
}
.smoke-modal-hint {
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 12px;
    line-height: 1.4;
}
.smoke-device-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Android-TV-Dialog – einheitliches SmartHome-Modal-Design
   (kompakte Breite, heller Body, Aktionen im Footer). */
.androidtv-modal .modal-card {
    width: min(540px, 92vw) !important;
    max-width: 540px !important;
    height: auto !important;
    max-height: 86vh;
}
.androidtv-modal-card .modal-card-body {
    background: #f8fafc;
    overflow-y: auto;
}
.androidtv-modal-hint {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.45;
    margin-bottom: 4px;
}
.androidtv-status:empty {
    display: none;
}
.androidtv-status {
    margin-top: 10px;
}
.smoke-device {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left-width: 4px;
    border-radius: 8px;
    padding: 10px 12px;
}
.smoke-device--ok      { border-left-color: #16a34a; }
.smoke-device--warn    { border-left-color: #f59e0b; }
.smoke-device--alarm   { border-left-color: #dc2626; background: #fef2f2; }
.smoke-device--test    { border-left-color: #2563eb; background: #eff6ff; }
.smoke-device--offline { border-left-color: #6b7280; background: #f1f5f9; }
.smoke-device--unknown { border-left-color: #cbd5e1; }

.smoke-device-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.smoke-device-label {
    font-weight: 600;
    color: #0f172a;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.smoke-device-status {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
}
.smoke-device--ok      .smoke-device-status { background: #dcfce7; color: #166534; }
.smoke-device--warn    .smoke-device-status { background: #fef3c7; color: #92400e; }
.smoke-device--alarm   .smoke-device-status { background: #dc2626; color: #ffffff; }
.smoke-device--test    .smoke-device-status { background: #dbeafe; color: #1e40af; }
.smoke-device--offline .smoke-device-status { background: #cbd5e1; color: #1f2937; }
.smoke-device-actions {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.smoke-device-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 0.82rem;
    color: #475569;
}
.smoke-device-meta--detail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 12px;
    align-items: start;
}
.smoke-meta-pair {
    min-width: 0;
}
.smoke-fcc0 {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    font-size: 0.8rem;
    color: #475569;
}
.smoke-fcc0-list {
    margin: 6px 0 0 0;
    padding-left: 1.1rem;
    line-height: 1.35;
}
.smoke-fcc0-list li {
    margin-bottom: 2px;
    word-break: break-word;
}
.smoke-device-meta code {
    background: rgba(0, 0, 0, 0.04);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.78rem;
}

.tasmota-status-msg {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 4px;
    min-height: 1em;
}
.tasmota-status-msg.is-error {
    color: #b91c1c;
}

/* Read-only Geräte-Karten (Remote-Mode für Gäste) */
.tasmota-device.is-readonly {
    opacity: 0.85;
}
.tasmota-device.is-readonly .tasmota-switch-btn,
.tasmota-device.is-readonly .tasmota-slider,
.tasmota-device.is-readonly input[type="checkbox"] {
    cursor: not-allowed;
}

/* Modus-Banner im Modal (LOCAL / REMOTE-Admin / REMOTE-Gast) */
.tasmota-mode-banner {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.35;
    border: 1px solid transparent;
}
.tasmota-mode-banner.is-local {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}
.tasmota-mode-banner.is-remote-admin {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #78350f;
}
.tasmota-mode-banner.is-remote-guest {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}
.tasmota-mode-banner.is-error {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

/* ============================================================
 * Admin-Hervorhebung für Cards mit privilegierten Inhalten
 * (Türschlosscode auch außerhalb des Buchungszeitraums sichtbar,
 *  Tasmota-Steuerung als Admin)
 * ============================================================ */
.is-admin-view {
    position: relative;
    box-shadow: 0 0 0 2px #dc2626 inset, 0 4px 14px rgba(220, 38, 38, 0.18);
    border-radius: 12px;
}
a.info-card.is-admin-view,
.doorcode-grid-card.is-admin-view {
    outline: 2px solid #dc2626;
    outline-offset: -2px;
}
.modal-card.is-admin-view {
    box-shadow: 0 0 0 2px #dc2626 inset;
}
/* Wandtablet: Remote-Steuerung bleibt, der rote Admin-Rahmen nicht. */
.guest-page.is-tablet-guest .is-admin-view {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}
.guest-page.is-tablet-guest a.info-card.is-admin-view,
.guest-page.is-tablet-guest .doorcode-grid-card.is-admin-view {
    outline: none;
}
.guest-page.is-tablet-guest .modal-card.is-admin-view {
    box-shadow: none;
}

.admin-only-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dc2626;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.4;
}
.admin-only-badge--corner {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    pointer-events: none;
}

/* Booking lock notice (shown on home/seasons widget and above calendar when
   the landlord has activated the "Buchungssperre" and the viewer is not an
   admin). The .is-admin-preview variant is only visible to admins while the
   lock is active for public visitors. */
.booking-lock-notice {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #fff4d6;
    border: 1px solid #e5b656;
    border-left: 4px solid #c88c16;
    color: #5d3f02;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.97rem;
    box-shadow: 0 2px 6px rgba(200, 140, 22, 0.12);
}
.booking-lock-notice .material-symbols-rounded {
    font-size: 22px;
    color: #c88c16;
}
.booking-lock-notice a {
    color: inherit;
    text-decoration: underline;
}
.booking-lock-notice.is-admin-preview {
    background: #e8f0fb;
    border-color: #a4beea;
    border-left-color: #325ea2;
    color: #1c3c77;
    font-weight: 500;
}
.booking-lock-notice.is-admin-preview .material-symbols-rounded {
    color: #325ea2;
}
.booking-lock-notice.is-above-calendar {
    margin-bottom: 18px;
}

.calendar-wrap.is-booking-locked {
    opacity: 0.72;
    pointer-events: none;
    filter: saturate(0.6);
}
.calendar-wrap.is-booking-locked .calendar-day {
    cursor: not-allowed;
}

.request-submit-locked-hint {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: #7a5a0f;
    font-style: italic;
}

/* Karma portal: keep the same visual language as the Zubehör cards. */
.guest-page .card.guest-card.karma-portal-card,
.card.guest-card.karma-portal-card {
    background: linear-gradient(135deg, rgba(232, 244, 253, 0.92) 0%, rgba(240, 247, 255, 0.92) 100%);
    border: 1px solid #d0e3f0;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    color: #1a3a5c;
}

.guest-page .card.guest-card.karma-portal-card .card-content,
.card.guest-card.karma-portal-card .card-content {
    color: #1a3a5c;
}

.guest-page .karma-portal-card .karma-scale-labels,
.guest-page .karma-portal-card .karma-scale-labels span {
    color: currentColor;
}

.guest-page .karma-group-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.guest-page .karma-group-buttons-col {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.guest-page .karma-group-buttons-col--negative {
    justify-content: flex-start;
}

.guest-page .karma-group-buttons-col--positive {
    justify-content: flex-end;
}

.guest-page .karma-group-button.pshop-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 6px 10px;
    font-size: 0.75rem;
    line-height: 1.15;
}

.karma-shopping-title.blue-card-title {
    color: #032f5a;
    margin: 0 0 0.65rem;
}

.karma-booking-shopping-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.karma-booking-shopping-head .karma-shopping-title {
    margin-bottom: 0;
}

.karma-shopping-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.8fr) minmax(78px, 0.45fr) auto;
    gap: 0.75rem;
    padding: 0 0.85rem 0.15rem;
    color: #032f5a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.karma-shopping-list-head span:last-child {
    text-align: right;
}

.karma-shopping-list-needed {
    color: #1a3a5c;
    font-size: 0.86rem;
    font-weight: 700;
}

.karma-shopping-list-item .karma-shopping-points,
.shopping-reminder-title-row .shopping-reminder-action-badge {
    justify-self: end;
    margin-left: auto;
    text-align: right;
}

.karma-shopping-reminder-list .karma-fill-meter {
    margin-top: 0.45rem;
}

.karma-notice-shopping-card {
    margin-top: 0.75rem;
}

.karma-notice-shopping-card .karma-shopping-appeal {
    margin-top: 0;
}

.karma-shopping-list .karma-shopping-list-item {
    border-color: #d0e3f0;
    background: linear-gradient(135deg, rgba(232, 244, 253, 0.92) 0%, rgba(240, 247, 255, 0.92) 100%);
    color: #1a3a5c;
}

.karma-shopping-list-main strong {
    color: #1a3a5c;
    font-size: 0.92rem;
}

.karma-shopping-list-main small,
.karma-shopping-list-fill small {
    color: #6b7a8d;
}

@media (max-width: 760px) {
    .guest-page .karma-group-buttons {
        grid-template-columns: 1fr;
    }

    .guest-page .karma-group-buttons-col,
    .guest-page .karma-group-buttons-col--positive {
        justify-content: flex-start;
    }

    .karma-shopping-list-head {
        display: none;
    }

    .karma-booking-shopping-head {
        flex-direction: column;
    }

    .karma-shopping-list-item .karma-shopping-points {
        justify-self: end;
    }
}

/* Gastportal mobil: Dialoge nutzen die komplette verfügbare Viewport-Fläche. */
@media (max-width: 700px),
       (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
    .guest-page .modal.is-active {
        align-items: stretch;
        justify-content: stretch;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0 !important;
    }

    .guest-page .guest-card-editor-modal.is-active > .modal-card > form {
        height: 100%;
        max-height: 100%;
    }

    .guest-page .modal.is-active > .modal-card {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .guest-page .modal.is-active > .modal-content {
        align-self: stretch;
        display: flex;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: hidden;
    }

    .guest-page .modal.is-active > .modal-content > .card {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        border-radius: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .guest-page .modal-card-head,
    .guest-page .modal-card-foot {
        flex: 0 0 auto;
    }

    .guest-page .modal-card-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .guest-page .modal-card-body.infocard-modal-body--split {
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }

    .guest-page .modal-card-head {
        padding-top: max(12px, env(safe-area-inset-top, 0));
    }

    .guest-page .modal-card-foot {
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0));
    }

    .guest-page .guest-welcome-modal .guest-welcome-card {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        border-radius: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* "Was ist gerade zu tun?" - der Einstieg des Gastes. Steht vor der
   Punkteskala: erst die Handlung, dann die Rueckmeldung.

   Eine Karte im Muster der Vorrats-/Kategorienkarten, darin eine schmale
   Reiterzeile. Kein Speichern- und kein Erledigt-Knopf: das Haekchen links ist
   das Bedienelement, gespeichert wird im Hintergrund. */
/* Dringlichkeitshinweis: sitzt in der Karte, direkt unter der Überschrift. */
.ops-todo-intro {
    margin-bottom: 16px;
}

/* Reiterzeile: so schmal wie moeglich - Symbol, kurzes Wort, Zahl. */
/* Spezifitaet bewusst erhoeht: die Reiter-Regeln von Bulma und des Portals
   (.guest-tabs) setzen sonst flex: 0 0 auto und waagrechtes Scrollen durch. */
.ops-todo-tabs.tabs {
    margin: 0 -12px;
    padding: 0 12px;
    overflow: visible;
    background: none;
}
.ops-todo-tabs.tabs > ul {
    border-bottom: 1px solid #e0e5ec;
    flex-wrap: nowrap;
}
/* Muss auch die Mobil-Variante der Portal-Reiter uebertreffen, die per
   Attribut-Selektor flex: 0 0 auto setzt und sonst gewinnt. */
.guest-page .ops-todo-tabs.tabs > ul > li,
.guest-page[data-guest-card-order-layout="mobile"] .ops-todo-tabs.tabs > ul > li {
    flex: 1 1 0;
    min-width: 0;
}
.guest-page[data-guest-card-order-layout="mobile"] .ops-todo-tabs.tabs > ul > li > a,
.ops-todo-tabs.tabs > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 4px;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.1;
    min-width: 0;
    /* Dezent: kein gefuelltes Pillen-Design, nur Text mit Unterstrich. Der
       Block ist ein Einstieg, kein Hauptschalter der Seite. */
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #7a8794;
}
.ops-todo-tabs.tabs > ul > li > a:hover {
    background: none;
    color: #33404d;
}
.ops-todo-tabs.tabs > ul > li.is-active > a,
.guest-page .ops-todo-tabs.tabs > ul > li.is-active > a {
    background: none;
    color: var(--brand-primary, #1b7f5a);
    border-bottom-color: var(--brand-primary, #1b7f5a);
    font-weight: 700;
}
.ops-todo-tab__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ops-todo-tab__icon {
    font-size: 17px;
}
.ops-todo-tab__count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e4e9ef;
    color: #33404d;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.ops-todo-tab__count.is-overdue {
    background: #c0392b;
    color: #fff;
}
.ops-todo-tabs.tabs > ul > li.is-active > a .ops-todo-tab__count {
    background: var(--brand-primary, #1b7f5a);
    color: #fff;
}
/* Auf schmalen Schirmen ist das Wort wichtiger als das Symbol - sonst muessten
   die Beschriftungen abgeschnitten werden. */
@media (max-width: 430px) {
    .ops-todo-tab__icon { display: none; }
    .ops-todo-tabs.tabs > ul > li > a { padding: 6px 4px; }
    .ops-todo-tab__label { font-size: 0.78rem; }
}

/* Panel sitzt in der Karte, daher ohne eigenen Rahmen. */
/* Reiter und Liste teilen sich EINE weisse Flaeche: auf dem hellblauen
   Kartengrund verschwammen Zeilentrenner und Haekchen, und zwei getrennte
   Kaesten liessen den Block zerfallen. */
.ops-todo-box {
    margin-top: 10px;
    padding: 0 12px 6px;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    background: #fff;
}
.ops-todo-intro .ops-panel {
    margin: 0;
    padding: 4px 0 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
}
.ops-todo-intro .ops-panel__hint {
    font-size: 0.8rem;
    color: #7a8794;
    margin: 0 0 6px;
}

/* Zeilen: Haekchen links, Text, rechts der Regler bzw. die Foto-Knoepfe. */
.ops-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ops-item {
    display: flex;
    align-items: center;
    /* Ausdruecklich: eine aeltere Regel im Portal setzt wrap, wodurch der Text
       bei laengeren Beschreibungen unter das Haekchen rutschte. */
    flex-wrap: nowrap;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #edf0f3;
    position: relative;
}
.ops-item:last-child { border-bottom: 0; }
/* Kategorie-Ueberschrift in Fuellstandslisten (ops_supply_groups): gliedert
   lange Listen nach Bereich, z. B. Kueche, Bad. */
.ops-supply-group,
.guest-admin-supply-group {
    padding: 14px 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7c8c;
    border-bottom: 1px solid #dfe5ea;
}
.ops-supply-group:first-child,
.guest-admin-supply-group:first-child { padding-top: 2px; }
.ops-done-all {
    list-style: none;
    padding: 2px 0 10px;
    display: flex;
    justify-content: flex-start;
}
.ops-done-all .button {
    font-size: 0.72rem;
    height: auto;
    padding: 0.2rem 0.55rem;
}
/* "Erledigt" gilt nur fuer die eigene Zeile. Ohne die direkten Kind-Selektoren
   faerbte ein abgehakter "aus Vorrat"-Artikel den eingerueckten Vorratsartikel
   mit ein - der hat aber seinen eigenen Stand und ist gerade NICHT erledigt.
   opacity wirkt auf den ganzen Teilbaum und laesst sich von innen nicht
   zuruecknehmen, deshalb liegt sie bei Zeilen mit Unterliste auf den
   Geschwistern statt auf dem Element selbst. */
.ops-item.is-done > .ops-item__text > .ops-item__label { text-decoration: line-through; }
.ops-item.is-done { opacity: 0.6; }

.ops-item--has-sub.is-done { opacity: 1; }
.ops-item--has-sub.is-done > .ops-item__text,
.ops-item--has-sub.is-done > .ops-item__actions,
.ops-item--has-sub.is-done > [data-ops-check] { opacity: 0.6; }
.ops-item.is-uploading { opacity: 0.5; }
.ops-item__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}
.ops-item__label { font-weight: 600; color: #26313c; font-size: 0.95rem; }
/* Preis eines kaufbaren Vorrats - direkt unter dem Namen, damit vor dem
   Entnehmen klar ist, was es kostet. */
.ops-item__price { font-size: 0.78rem; color: #7a8794; }
/* Gemeldete Verbrauchsabrechnung: die Liste ist nur noch zum Nachsehen da. */

/* Posten bearbeiten (nur Adminansicht im Gastportal): kleines Zeichen oben
   rechts an der Aufstellung, dahinter ein Fenster mit Status, Entfernen und
   einer Zeile zum Anlegen. */
.guest-admin-items-bar { display: flex; justify-content: flex-end; margin-bottom: -8px; }
.guest-admin-items-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #d6dde5;
    border-radius: 8px;
    background: #fff;
    color: #5b6774;
    cursor: pointer;
}
.guest-admin-items-edit:hover { border-color: #2b6fa3; color: #2b6fa3; }
.guest-admin-items-edit .material-symbols-rounded { font-size: 17px; }
.guest-admin-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #eef1f5;
}
.guest-admin-item-label { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; color: #26313c; }
.guest-admin-item-amount { color: #5b6774; }
.guest-admin-item-actions { flex: 0 0 auto; display: flex; }
.guest-admin-item-delete { color: #a5281b; }
.guest-admin-item-add { display: flex; gap: 6px; margin-top: 12px; }
.guest-admin-item-add .input { flex: 1 1 auto; }
.guest-admin-item-add .guest-admin-item-price { flex: 0 0 110px; }
.ops-item__price .money { font-weight: 600; color: #5b6774; }
.ops-item__desc {
    font-size: 0.8rem;
    color: #7a8794;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ops-item__meta { font-size: 0.75rem; color: #94a1ad; }
.ops-item__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.ops-item__flash {
    position: absolute;
    right: 0;
    bottom: -2px;
    font-size: 0.72rem;
    color: #c0392b;
}
/* Der Nachweis ist das Ergebnis der Aufgabe und darf nicht wie ein Symbol
   aussehen - gross genug, um zu erkennen, was fotografiert wurde. */
.ops-item__photo img {
    width: 52px; height: 52px; object-fit: cover; border-radius: 8px; display: block;
    border: 2px solid #dfe5ec;
    background: #f2f5f8;
}
.ops-item__photo:hover img { border-color: #3f8f5f; }
.ops-empty { color: #7a8794; font-style: italic; margin: 6px 0; }

/* Das Haekchen-Feld ist der einzige Knopf der Zeile. */
.ops-check {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 2px solid #c7d0da;
    /* Rechteckig, nicht rund: dasselbe Kaestchen wie bei Buchung, Check-in und
       in der Check-out-Liste - eine Aufgabe sieht ueberall gleich aus. */
    border-radius: 6px;
    background: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ops-check .material-symbols-rounded { font-size: 17px; }
/* Leeres Kaestchen bleibt leer - ueberall. Im Aufgaben-Assistenten faerbte eine Icon-Regel den Haken grau ein, offene
   Aufgaben sahen dadurch schon abgehakt aus (bei der Putzkraft war das Kaestchen leer). */
.guest-page .ops-check:not(.is-done):not(.ops-check--photo):not(.ops-check--info) .material-symbols-rounded,
.guest-page #guest-todo-wizard .ops-check:not(.is-done):not(.ops-check--photo):not(.ops-check--info) .material-symbols-rounded { color: transparent !important; }
.ops-check:hover { border-color: var(--brand-primary, #1b7f5a); }
.ops-check.is-done {
    background: #1b7f5a;
    border-color: #1b7f5a;
    color: #fff;
}
/* Foto-Pflicht bzw. reine Merkliste: kein Antippen, deshalb anderes Symbol. */
.ops-check--photo { border-color: #e0b062; color: #b06c00; cursor: default; }
.ops-check--info { border-color: #d6dde5; color: #94a1ad; cursor: default; }

/* Regler: Anzeige rechts daneben, feste Spalte damit die Zeilen fluchten. */
.ops-item--supply .ops-item__actions { width: 168px; justify-content: flex-end; }
/* Umbruch erlaubt: In der schmalen Aktionsspalte der Aufgabenliste soll die
   Verstellt-Anzeige in die zweite Zeile rutschen dürfen, statt den Regler
   zusammenzudrücken. */
.ops-fill { display: flex; align-items: center; gap: 8px; width: 100%; flex-wrap: wrap; row-gap: 4px; }
.ops-fill__range { flex: 1 1 auto; min-width: 0; }
.ops-fill__label {
    flex: 0 0 auto;
    min-width: 48px;
    font-size: 0.78rem;
    color: #5b6774;
    text-align: right;
}
.ops-fill__min { color: #94a1ad; font-weight: 400; }
.ops-fill__label.is-low { color: #c0392b; font-weight: 700; }
/* "Wie viel habe ich gerade verstellt?" – erscheint erst, wenn der Stand vom
   Ausgangswert abweicht, und verschwindet wieder, sobald er zurückgedreht ist.
   Die Farbe trennt die beiden Richtungen: Entnahme kostet, Auffüllen bringt. */
.ops-fill__delta {
    flex: 0 0 auto;
    min-width: 0;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
.ops-fill__delta.is-added { color: #1b7a43; background: rgba(27, 122, 67, 0.12); }
.ops-fill__delta.is-taken { color: #c0392b; background: rgba(192, 57, 43, 0.12); }
/* Auf den Kategorienkarten steht der Regler über den Knöpfen und nutzt die
   volle Kartenbreite – dort gibt es keine feste Aktionsspalte wie in der
   Aufgabenliste. */
.ops-fill--pshop {
    margin-bottom: 8px;
    flex-wrap: wrap;
    row-gap: 4px;
}
@media (max-width: 420px) {
    .ops-item--supply .ops-item__actions { width: 146px; }
    .ops-fill__label { min-width: 38px; font-size: 0.74rem; }
}

/* Arbeitslisten (Putzkraft, Admin): dort sind die Eimer das Hauptelement. */
.ops-buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* Abgewaehlte Zustaendigkeiten (z. B. Einkaufen nicht durch die Putzkraft):
   weniger Karten, aber weiterhin volle Reihenbreite. */
.ops-buckets--n2 { grid-template-columns: repeat(2, 1fr); }
.ops-buckets--n1 { grid-template-columns: 1fr; }
.ops-bucket {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 16px 8px; min-height: 128px; border: 2px solid transparent; border-radius: 14px;
    background: var(--surface-card, #fff); box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,.07));
    cursor: pointer; text-align: center; font: inherit; color: inherit;
}
.ops-bucket.is-open { border-color: var(--brand-primary, #1b7f5a); }
.ops-bucket:disabled, .ops-bucket.is-empty { opacity: .5; cursor: default; box-shadow: none; }
.ops-bucket__icon { font-size: 30px; color: var(--brand-primary, #1b7f5a); }
.ops-bucket__count { font-size: 1.9rem; font-weight: 800; line-height: 1.05; color: #26313c; }
.ops-bucket.is-active .ops-bucket__count { color: #c0392b; }
.ops-bucket__title { font-size: .92rem; font-weight: 700; color: #33404d; }
.ops-bucket__help { font-size: .76rem; color: #7a8794; line-height: 1.25; }
.ops-panel {
    margin-top: 12px; padding: 16px; border-radius: 14px;
    background: var(--surface-card, #fff); box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,.07));
}
.ops-panel h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.ops-panel__hint { font-size: .85rem; color: #7a8794; margin: 0 0 12px; }
.ops-page { margin: 0; background: #f5f7fa; }
.ops-topbar {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 16px 20px; background: var(--brand-primary, #1b7f5a); color: #fff;
}
.ops-topbar h1 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.ops-topbar__date { margin: 0; opacity: .85; font-size: .95rem; }
.ops-shell { max-width: 820px; margin: 0 auto; padding: 16px 16px 64px; }
.ops-group { margin-bottom: 28px; }
.ops-group__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; color: #33404d; }
.ops-allclear { text-align: center; padding: 48px 16px; color: #5b6774; }
.ops-allclear .material-symbols-rounded { font-size: 56px; color: #1b7f5a; }
.ops-allclear h2 { font-size: 1.2rem; font-weight: 700; margin: 8px 0 4px; }

/* Tuercode der Putzkraft: gross und ablesbar, direkt darunter der Abschluss-
   Knopf, der ihn wieder ungueltig macht. */
.ops-doorcode {
    margin-top: 14px; padding: 20px 16px; text-align: center;
    background: var(--surface-card, #fff); border-radius: 14px;
    box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,.07));
}
.ops-doorcode__label {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 0 0 6px; font-size: .85rem; font-weight: 700;
    color: #7a8794; text-transform: uppercase; letter-spacing: .04em;
}
.ops-doorcode__label .material-symbols-rounded { font-size: 18px; }
.ops-doorcode__code {
    font-size: 2.4rem; font-weight: 800; letter-spacing: .12em;
    font-variant-numeric: tabular-nums; color: #1f2d3d; line-height: 1.2;
}
.ops-doorcode__hint { margin: 6px 0 14px; font-size: .85rem; color: #7a8794; }
.ops-doorcode__done {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 56px; padding: 12px 18px;
    border: 0; border-radius: 12px; cursor: pointer;
    background: var(--brand-primary, #1b7f5a); color: #fff;
    font-size: 1.1rem; font-weight: 700;
    box-shadow: 0 3px 10px rgba(27, 127, 90, .3);
}
.ops-doorcode__done:hover:not(:disabled) { filter: brightness(1.05); }
.ops-doorcode__done .material-symbols-rounded { font-size: 24px; }
.ops-doorcode__done:disabled {
    background: #c7d0da; color: #f4f6f8; box-shadow: none; cursor: not-allowed;
}
.ops-doorcode__locked { margin: 10px 0 0; font-size: .85rem; color: #7a8794; }

/* Anonymisierte Eckdaten der Belegung (wie auf der Endreinigungs-Checkliste):
   letzte Abreise und naechste Anreise, Gast nur als Initialen. */
.ops-bookinginfo {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    margin: 0 0 12px; padding: 10px 14px;
    background: var(--surface-card, #fff); border-radius: 12px;
    box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,.07));
    font-size: .9rem; color: #5b6774;
}
.ops-bookinginfo__item { display: inline-flex; align-items: center; gap: 6px; }
.ops-bookinginfo__item .material-symbols-rounded { font-size: 18px; color: #7a8794; }
.ops-bookinginfo__item strong { color: #1f2d3d; }

/* Foto-Seite am Handy: eine Aufgabe, ein Knopf. */
.ops-photo-page { margin: 0; background: #f5f7fa; }
.ops-photo-shell {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px 20px;
}
.ops-photo-task, .ops-photo-state {
    width: 100%; max-width: 460px; text-align: center;
    background: #fff; border-radius: 16px; padding: 28px 22px;
    box-shadow: 0 4px 18px rgba(0,0,0,.09);
}
.ops-photo-state .material-symbols-rounded { font-size: 64px; }
.ops-photo-state--done .material-symbols-rounded { color: #1b7f5a; }
.ops-photo-state--error .material-symbols-rounded { color: #c0392b; }
.ops-photo-state h1, .ops-photo-task h1 { font-size: 1.35rem; font-weight: 700; margin: 10px 0; }
.ops-photo-apartment { font-size: .85rem; color: #7a8794; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.ops-photo-desc { color: #5b6774; margin: 0 0 10px; }
.ops-photo-intro { color: #5b6774; margin: 0 0 22px; }
.ops-photo-button { min-height: 64px; font-size: 1.1rem; gap: 10px; }
.ops-photo-note { font-size: .8rem; color: #94a1ad; margin-top: 14px; }
.ops-qr-status { font-weight: 600; color: #5b6774; }

@media (max-width: 480px) {
    .ops-buckets { gap: 8px; }
    .ops-bucket { min-height: 112px; padding: 12px 4px; }
    .ops-bucket__count { font-size: 1.6rem; }
    .ops-bucket__help { display: none; }
}

/* Punktestand oben rechts in der Aufgaben-Karte, mit Daumen-Symbol als
   sofortiger Einordnung. Steht bewusst beim Tun, nicht in einer eigenen Leiste. */
.ops-todo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* Nicht umbrechen: die Marke gehoert in dieselbe Zeile wie der Titel. */
    flex-wrap: nowrap;
}
.ops-todo-head .pshop-category-title {
    flex: 1 1 auto;
    min-width: 0;
}
.ops-karma__short { display: none; }
@media (max-width: 430px) {
    .ops-karma__value { display: none; }
    .ops-karma__short { display: inline; }
}
.ops-karma {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef1f5;
    font-size: 0.78rem;
    font-weight: 600;
    color: #33404d;
    white-space: nowrap;
}
.ops-karma__icon { font-size: 17px; }
.ops-karma.is-positive { background: #e3f3ea; color: #1b7f5a; }
.ops-karma.is-negative { background: #fdeaea; color: #a5281b; }
.ops-karma.is-neutral  { background: #eef1f5; color: #5b6774; }

/* Aufschlüsselung des Punktestands. Erst die grosse Zahl, darunter die
   Ursachen - in dieser Reihenfolge liest sie sich von selbst. */
.karma-breakdown-card { max-width: 520px; }
.karma-breakdown-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 0 18px;
    border-radius: 12px;
    margin-bottom: 16px;
}
.karma-breakdown-total.is-positive { background: #e3f3ea; color: #1b7f5a; }
.karma-breakdown-total.is-negative { background: #fdeaea; color: #a5281b; }
.karma-breakdown-total.is-neutral  { background: #eef1f5; color: #5b6774; }
.karma-breakdown-total__value { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.karma-breakdown-total__label { font-size: 0.85rem; opacity: 0.8; }

.karma-breakdown-groups { list-style: none; margin: 0; padding: 0; }
.karma-breakdown-group {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid #eef1f5;
}
.karma-breakdown-group__label { flex: 1 1 auto; font-weight: 600; color: #26313c; }
.karma-breakdown-group__count { flex: 0 0 auto; font-size: 0.78rem; color: #8a95a1; }
.karma-breakdown-group__points,
.karma-breakdown-entry__points {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    min-width: 3.2em;
    text-align: right;
}
.karma-breakdown-group__points.is-positive,
.karma-breakdown-entry__points.is-positive { color: #1b7f5a; }
.karma-breakdown-group__points.is-negative,
.karma-breakdown-entry__points.is-negative { color: #a5281b; }

.karma-breakdown-details { margin-top: 14px; }
.karma-breakdown-details summary { cursor: pointer; color: #3f6ea8; font-size: 0.9rem; }
.karma-breakdown-entries { list-style: none; margin: 10px 0 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.karma-breakdown-entries li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 2px;
    border-bottom: 1px solid #f3f5f8;
    font-size: 0.85rem;
}
.karma-breakdown-entry__label { flex: 1 1 auto; color: #4a5561; }
.karma-breakdown-entry__date { flex: 0 0 auto; color: #9aa4b0; font-size: 0.78rem; }
@media (max-width: 380px) {
    .ops-karma { font-size: 0.76rem; padding: 3px 8px; }
}

/* Der Punktestand ist zugleich der Einstieg in die ausfuehrliche
   Mithelfen-Liste - deshalb als Schaltflaeche, aber unaufdringlich. */
.ops-head-right { display: inline-flex; align-items: center; gap: 8px; }

/* Die Meldung ueber den Aufgaben - derselbe Ton und dieselbe Groesse wie der
   Abreise-Hinweis im Check-out. Punktestand und KI-Knopf sitzen rechts
   darin; auf schmalen Schirmen rutschen sie unter den Text. */
/* Meldung und Aufgabenbox als eine Einheit - nur zum Ein- und Ausklappen,
   ohne eigenen Rahmen. Zugeklappt bleibt allein der Knopf stehen. */
.ops-todo-group.is-collapsed > *:not(.ops-collapse) { display: none; }

.ops-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin: 0 0 16px;
    padding: 6px;
    border: none;
    border-top: 1px solid #eef1f5;
    background: transparent;
    color: #7a8794;
    font-size: 0.8rem;
    cursor: pointer;
}
.ops-collapse:hover { color: #3f6ea8; }
.ops-todo-group.is-collapsed .ops-collapse {
    border-top: none;
    font-weight: 600;
    color: #3f6ea8;
}

.guest-notice {
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 1.05rem;
    margin-bottom: 12px;
}
.guest-notice .departure-today-text { flex: 1 1 240px; min-width: 0; }
/* Zwei Belege stehen im Check-out nebeneinander - auf schmalen Schirmen
   untereinander, statt aus der Meldung herauszulaufen. */
.guest-notice .ops-head-right { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
/* Der Text traegt das Blau der Meldung - ausgeschrieben, damit ihn keine
   Vererbung von aussen einfaerbt. */
.guest-notice .departure-today-headline,
.guest-notice .departure-today-detail { color: #1b4f7a; }
/* Zusatzoptionen-Karte: dieselbe blaue Kategorien-Huelle, rechts die Knoepfe. */
.extra-options-item { display: flex; align-items: center; gap: 10px; }
.extra-options-item .pshop-item-main { flex: 1 1 auto; min-width: 0; }
.extra-options-actions { flex: 0 0 auto; display: flex; gap: 6px; }

/* Rote Fassung: es steht etwas an. Ausrufezeichen statt Haken, damit die
   Meldung nicht wie eine Bestaetigung aussieht. */
.guest-page .done-banner.done-banner--alert {
    background: rgba(254, 226, 226, 0.92);
    border-color: #fca5a5;
    color: #a5281b;
}
.guest-page .done-banner.done-banner--alert .done-banner-icon { background: #dc2626; }
.guest-page .done-banner.guest-notice.done-banner--alert .departure-today-headline { color: #7f1d1d; }
.guest-page .done-banner.guest-notice.done-banner--alert .departure-today-detail { color: #a5281b; }

/* Die orange Fassung (Zahlung in Pruefung) behaelt ihre Warnfarben. */
.guest-notice.done-banner--warning .departure-today-headline { color: #7c2d12; }
.guest-notice.done-banner--warning .departure-today-detail { color: #9a3412; }
/* Knopf in derselben Farbe wie das Haken-Zeichen der Meldung, nicht grau. */
.guest-notice__action {
    background: #2b6fa3;
    border-color: #2b6fa3;
    color: #fff;
}
.guest-notice__action:hover,
.guest-notice__action:focus { background: #245e8b; border-color: #245e8b; color: #fff; }

/* Gruene Fassung derselben Meldung - "alles vorbereitet" im Check-in, "nichts
   zu tun" unter Unterkunft. Ohne diese Regeln stuende dort blauer Text und ein
   blauer Knopf auf gruenem Grund. */
.guest-page .done-banner.guest-notice:not(.done-banner--info):not(.done-banner--warning):not(.done-banner--alert) .departure-today-headline,
.guest-page .done-banner.guest-notice:not(.done-banner--info):not(.done-banner--warning):not(.done-banner--alert) .departure-today-detail {
    color: #1b6f44;
}
.guest-page .done-banner.guest-notice:not(.done-banner--info):not(.done-banner--warning):not(.done-banner--alert) .guest-notice__action {
    background: #1b7f5a;
    border-color: #1b7f5a;
    color: #fff;
}
.guest-page .done-banner.guest-notice:not(.done-banner--info):not(.done-banner--warning):not(.done-banner--alert) .guest-notice__action:hover,
.guest-page .done-banner.guest-notice:not(.done-banner--info):not(.done-banner--warning):not(.done-banner--alert) .guest-notice__action:focus {
    background: #166b4c;
    border-color: #166b4c;
    color: #fff;
}

/* Eine grosse weisse Flaeche fuer alles Anstehende - dieselbe Anmutung wie die
   Checkliste im Check-out-Reiter. Kein Kasten drumherum: die Meldung darueber
   steht fuer sich, die Aufgaben stehen fuer sich. */
.guest-task-card {
    padding: 6px 14px 10px;
    margin: 10px 0 16px;
}

/* Aufklappbare Aufgabe: Kaestchen, Titel, Pfeil - und darunter das, was
   dazugehoert. Offenes steht offen, Erledigtes zugeklappt. */
.guest-task { border-bottom: 1px solid #eef1f5; }
.guest-task:first-child .guest-task__head { padding-top: 14px; }
.guest-task:last-child { border-bottom: 0; }
.guest-task__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
}
.guest-task__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
/* Kaestchen als Knopf: es schreibt denselben Haken wie die Zeile im Check-out. */
.guest-task__box-form { display: flex; flex: 0 0 auto; }
button.guest-task__box { padding: 0; background: none; cursor: pointer; }
/* Das rechteckige Kaestchen - dasselbe Zeichen wie bei jeder anderen Aufgabe. */
.guest-task__box {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 2px solid #c7d0da;
    border-radius: 6px;
    color: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.guest-task__box .material-symbols-rounded { font-size: 17px; }
/* Erledigt ist gruen - das ist in dieser Oberflaeche durchgaengig die Farbe
   fuer "abgehakt". Vorgemerkt ist orange: der Haken steht, die Sache ist aber
   noch in Pruefung (etwa eine gemeldete, unbestaetigte Zahlung). */
.guest-task.is-done .guest-task__box {
    background: #1b7f5a;
    border-color: #1b7f5a;
    color: #fff;
}
.guest-task.is-done.is-pending .guest-task__box {
    background: #d97706;
    border-color: #d97706;
}
.guest-task__text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.guest-task__title { font-weight: 600; color: #26313c; font-size: 0.98rem; }
.guest-task.is-done .guest-task__title { color: #5b6774; }
.guest-task__desc { font-size: 0.82rem; color: #7a8794; line-height: 1.4; }
.guest-task__badge {
    flex: 0 0 auto;
    min-width: 1.7em;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fdeaea;
    color: #a5281b;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}
.guest-task__chevron { flex: 0 0 auto; color: #94a1ad; transition: transform 0.15s ease; }
.guest-task__head[aria-expanded="true"] .guest-task__chevron { transform: rotate(180deg); }
.guest-task__body { padding: 0 0 12px; }
.guest-task__body[hidden] { display: none; }

/* Aufgeklappt bekommt der Unterbereich eine leicht blaue Flaeche: so sieht man
   auf einen Blick, wo eine Aufgabe anfaengt und aufhoert. Vorher lief ihr
   Inhalt ohne Grenze in die weisse Karte, und bei zwei offenen Aufgaben war
   nicht zu erkennen, was zu welcher gehoert. */
.guest-task__body:not([hidden]) {
    margin: 2px 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(240, 247, 255, 0.85);
    box-shadow: inset 0 0 0 1px rgba(208, 227, 240, 0.55);
}

/* Die Einrueckung der Posten kommt jetzt zum Teil aus der Flaeche selbst -
   sonst stuenden sie doppelt so weit rechts wie zugeklappt. */
.guest-task__body:not([hidden]) > .ops-list {
    margin-left: 24px;
    border-left-color: rgba(208, 227, 240, 0.7);
}
.guest-task__body:not([hidden]) > .ops-empty { margin-left: 24px; }

/* Was in einer Aufgabe steckt, gehoert sichtbar zu ihr: eingerueckt unter dem
   Kaestchen der Aufgabe, damit man sieht, wozu es zaehlt. Die inneren Posten
   tragen wieder das runde Haekchen - sie sind keine eigene Aufgabe, sondern
   Teil dieser einen. */
.guest-task__body > .ops-list {
    margin-left: 36px;
    padding-left: 12px;
    border-left: 2px solid #eef1f5;
}
.guest-task__body > .ops-empty { margin-left: 36px; }

/* Die Aufgaben selbst brauchen keinen eigenen Kasten - sie stehen schon in der
   weissen Flaeche. */
.guest-task-card__tasks { padding-top: 6px; }

/* Einstieg in den KI-Assistenten, neben dem Punktestand. */
.ops-ai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--brand-primary, #1b7f5a);
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
}
.ops-ai-btn .material-symbols-rounded { font-size: 19px; }
.ops-ai-btn:hover { filter: brightness(1.08); }

/* Die Kategorienkarten zeigen keine Punktewerte mehr an den Aktionsknoepfen:
   auf der Uebersicht steht das Tun im Vordergrund, die Bewertung gehoert in die
   Aufgaben-Karte bzw. ins Mithelfen-Modal. */
.pshop-category-card:not(.ops-todo-intro) .pshop-action-karma-badge {
    display: none;
}

/* Lange Vorratsnamen liefen in den Regler hinein. */
.ops-item--supply .ops-item__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nachweis-Fenster: beide Wege nebeneinander, Kamera zuerst. */
.ops-photo-modal { max-width: 380px; margin: 0 auto; }
.ops-photo-modal__task { font-weight: 700; color: #26313c; margin-bottom: 14px; }
.ops-photo-modal__take { gap: 8px; margin-bottom: 14px; }
.ops-photo-modal__qr {
    display: block;
    margin: 0 auto 8px;
    background: #fff;
    border-radius: 8px;
    min-height: 200px;
}
/* Vorhandener bzw. gerade aufgenommener Nachweis im Foto-Fenster.
   Die [hidden]-Regeln müssen hier stehen: sowohl `display: block` als auch
   Bulmas `.button { display: inline-flex }` schlagen sonst das Standard-
   Verhalten von [hidden], und es stünde eine leere grüne Box im Fenster. */
.ops-photo-modal__current { display: block; margin: 0 auto 14px; }
.ops-photo-modal__current[hidden],
.ops-photo-modal__delete[hidden],
.ops-photo-modal__desc[hidden] { display: none !important; }
.ops-photo-modal__current img {
    display: block;
    width: 100%;
    max-width: 320px;
    max-height: 300px;
    margin: 0 auto;
    object-fit: cover;
    border-radius: 10px;
    border: 3px solid #3f8f5f;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.ops-photo-modal__delete { gap: 8px; margin-bottom: 14px; }
.ops-photo-modal__desc {
    color: #5b6774;
    font-size: 0.88rem;
    line-height: 1.45;
    margin: -8px 0 10px;
}
/* Sitzt unter dem QR-Code, nicht unter der Aufgabe - dort wirkte der Satz wie
   ein Teil der Aufgabenbeschreibung. */
.ops-photo-modal__why {
    color: #7a8794;
    font-size: 0.82rem;
    line-height: 1.45;
    margin: 4px 0 0;
}

/* Handy-Seite: Angebot, gleich zur nächsten Foto-Aufgabe zu gehen. */
.ops-photo-next {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.ops-photo-next__ask { font-weight: 600; margin-bottom: 4px; }
.ops-photo-next__label { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; }
.ops-photo-next__stop { font-size: 0.8rem; opacity: 0.75; margin-top: 10px; }

/* Marken in der Aufgabenzeile: Art, Foto-Pflicht, Vermieter. */
.ops-item__meta { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ops-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #eef1f5;
    color: #5b6774;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
}
.ops-tag .material-symbols-rounded { font-size: 14px; }
.ops-tag--photo { background: #fdf1dd; color: #a86b00; padding: 1px 5px; }
.ops-tag--admin { background: #e6edf7; color: #2a4d7e; }
.ops-tag--category { background: #eef1f5; color: #5b6774; }

/* Zuständigkeitsmarke in der Vermieter-Übersicht. */
.ops-tag--who-guest { background: #e6f0fb; color: #23557f; }
.ops-tag--who-cleaning { background: #f0e9fa; color: #57358c; }
.ops-tag--who-landlord { background: #e6edf7; color: #2a4d7e; }

/* Reiter nach Erledigungszeitraum. Sitzen innerhalb des Aufgaben-Reiters und
   dürfen deshalb nicht so laut sein wie die Eimer darüber. */
.ops-window-tabs { margin-bottom: 10px; }
.ops-window-tabs ul { border-bottom: none; }
.ops-window-tabs a { padding: 3px 12px; }

.ops-tag--restock { background: #fdeaea; color: #a5281b; font-weight: 700; }

/* Anlegen-Zeile unter den Listen der Vermieter-Übersicht. */
.ops-quick-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #dfe5ec;
}
.ops-quick-add .input { width: auto; min-width: 7rem; }
.ops-quick-add input[type="text"] { flex: 1 1 12rem; }

/* Bericht "Was dieser Gast erledigt hat" bei abgeschlossenen Buchungen. */
.ops-report { list-style: none; margin: 0; padding: 0; }
.ops-report__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid #f0f3f6;
}
.ops-report__photo img {
    width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block;
    border: 2px solid #dfe5ec;
}
.ops-report__icon { color: #3f8f5f; font-size: 28px; width: 56px; text-align: center; }
.ops-report__text { display: flex; flex-direction: column; min-width: 0; }
.ops-report__label { font-weight: 600; color: #26313c; }
.ops-report__meta { font-size: 0.78rem; color: #8a95a1; }
/* Bei den Einkaeufen die besorgten Sachen - eine Zeile, keine Liste. */
.ops-report__detail { font-size: 0.82rem; color: #5b6774; }

/* Einkaufszeile abgehakt: der Füllstand fehlt noch. Der Hinweis blinkt kurz
   auf und der Regler wird hervorgehoben, damit der Schritt nicht untergeht. */
.ops-adjust-hint {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #a86b00;
    animation: ops-hint-in 0.35s ease-out;
}
@keyframes ops-hint-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.ops-needs-level .ops-fill {
    animation: ops-nudge 1.1s ease-in-out 3;
    border-radius: 8px;
}
/* Abgehakt, aber noch nicht fertig: das Häkchen sitzt, ausgegraut wird die
   Zeile erst, wenn auch der Füllstand eingetragen ist. Sonst sähe der Regler
   erledigt aus, obwohl er noch bedient werden muss. */
.ops-item.is-done.ops-needs-level { opacity: 1; }

/* Marke der Kategorienkarte, die das Skript ausgeblendet hat. */
.ops-badge-hidden { display: none !important; }
@keyframes ops-nudge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168, 107, 0, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(168, 107, 0, 0.22); }
}
@media (prefers-reduced-motion: reduce) {
    .ops-adjust-hint, .ops-needs-level .ops-fill { animation: none; }
}

/* Einkauf-Marke auf der Kategorienkarte ist anklickbar. */
button.ops-jump-badge { border: 0; cursor: pointer; font: inherit; font-size: 0.7rem; }
button.ops-jump-badge:hover { filter: brightness(0.95); }

/* Kurze Hervorhebung der angesprungenen Zeile. */
.ops-highlight { animation: ops-highlight 2.6s ease-out; border-radius: 8px; }
@keyframes ops-highlight {
    0%, 60% { background: rgba(27, 127, 90, 0.14); }
    100%    { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .ops-highlight { animation: none; background: rgba(27, 127, 90, 0.14); }
}

/* Nicht buchbare Option (z. B. Endreinigung ohne verfügbare Putzkraft).
   Ausgegraut statt versteckt: der Gast soll sehen, dass es die Leistung gibt
   und warum sie gerade nicht geht. */
.request-option-item.is-unavailable { opacity: 0.55; }
.request-option-item.is-unavailable strong { text-decoration: line-through; }
.request-option-unavailable {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #a5281b;
}
.request-option-unavailable[hidden] { display: none; }

/* Admin-KI: Foto-Uebergabe ans Handy. Kleiner QR-Block im Modal, mittig,
   mit weissem Grund hinter dem Code (Kontrast fuers Scannen). */
.guest-admin-ai-qr {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--border-soft, #e6ebf1);
    border-radius: 10px;
    text-align: center;
}
.guest-admin-ai-qr img {
    display: inline-block;
    width: 200px;
    height: 200px;
    background: #fff;
    padding: 6px;
    border-radius: 8px;
}

/* Gäste-Portal, Bezahl-Tab: Option haengt an der Putzkraft und ist fuer den
   Abreisetag der Buchung gesperrt. Kein Rot und kein Durchstreichen - die
   Lage ist erklaert, kein Fehler (vgl. Mitanpack-Prinzip auf der Website). */
.guest-option-item.is-unavailable { opacity: 0.6; }
.guest-option-cleaning-note {
    font-weight: 600;
    color: #6b5a17;
}

/* ── Regler auf Touch-Geräten ───────────────────────────────────────────────
   Am Tablet wird mit dem Finger gezogen, nicht mit dem Mauszeiger: ein 8 px
   hohes Band mit 18-px-Griff ist dafür zu schmal, man rutscht ab. Gesteuert
   über (pointer: coarse) statt über die Bildschirmbreite - maßgeblich ist das
   Eingabegerät, nicht die Größe. Ein Tablet mit Maus behält den feinen Regler,
   ein schmales Touch-Gerät bekommt den großen. */
@media (pointer: coarse) {
    .pshop-range {
        height: 16px;
        border-radius: 999px;
    }
    .pshop-range::-webkit-slider-thumb {
        width: 34px;
        height: 34px;
        border-width: 3px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    }
    .pshop-range::-moz-range-thumb {
        width: 34px;
        height: 34px;
        border-width: 3px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    }
    /* Der Griff ragt über das Band hinaus - ohne etwas Luft stößt er an die
       Nachbarzeile und wird schwer zu treffen. */
    .ops-fill { padding: 6px 0; gap: 12px; }
}

/* Reine Bildansicht für Nachweisfotos. Kein neuer Tab: der reißt aus der Seite
   heraus, und zurück kommt man nur über den Verlauf. */
.ops-image-modal__content { text-align: center; }
.ops-image-modal__content img {
    max-width: 100%;
    max-height: 78vh;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.ops-image-modal__caption {
    margin-top: 10px;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Rückfrage nach einer Reglerbewegung. Sitzt unter der Zeile, damit klar ist,
   worauf sie sich bezieht - ein Fenster hätte den Zusammenhang zerrissen. */
/* Rueckfrage als Popover: haengt am Regler statt in der Zeile, damit die Liste
   nicht springt. Am Handy wird daraus eine Leiste am unteren Rand - dort ist
   sie mit dem Daumen erreichbar und laeuft nicht aus dem Bild. */
.ops-ask {
    position: absolute;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: min(320px, calc(100vw - 16px));
    padding: 10px 34px 10px 12px;
    background: #fff;
    border: 1px solid #d7dee6;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 32, 48, 0.16);
    animation: ops-hint-in 0.25s ease-out;
}

.ops-ask__options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.ops-ask__close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    color: #8d98a5;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}

.ops-ask__close:hover { background: #f0f3f7; color: #4a5561; }

.ops-ask--sheet {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    top: auto !important;
    max-width: none;
    padding: 14px 40px 14px 14px;
    border-radius: 14px;
    box-shadow: 0 -6px 28px rgba(16, 32, 48, 0.22);
}

/* Am Handy grosszuegige Tippflaechen - die Leiste wird mit dem Daumen bedient. */
.ops-ask--sheet .ops-ask__btn,
.ops-ask--sheet .ops-ask__options .pshop-action-btn {
    flex: 1 1 100%;
    min-height: 44px;
    font-size: 0.9rem;
}

.ops-ask--sheet .ops-ask__close {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
}

/* Nach "Ja, Vorrat anpassen": alles ausser dem gesuchten Vorrat abdunkeln.
   Eine blosse Hervorhebung geht in einer langen Liste unter. Vorfahren der
   Zielzeile bleiben hell - sonst laege das Ziel in einem abgedunkelten Block. */
.ops-focus-active .ops-item--supply:not(.ops-item--focus):not(.ops-item--focus-parent) {
    opacity: 0.25;
    filter: saturate(0.4);
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.ops-focus-active .ops-item--focus-parent > .ops-item__text,
.ops-focus-active .ops-item--focus-parent > .ops-item__actions,
.ops-focus-active .ops-item--focus-parent > [data-ops-check] {
    opacity: 0.25;
    filter: saturate(0.4);
}

.ops-item--focus {
    position: relative;
    border-radius: 10px;
    box-shadow: 0 0 0 2px #1b7f5a, 0 6px 18px rgba(27, 127, 90, 0.18);
    background: rgba(27, 127, 90, 0.06);
    animation: ops-focus-in 0.3s ease-out;
}

@keyframes ops-focus-in {
    from { box-shadow: 0 0 0 8px rgba(27, 127, 90, 0); }
    to { box-shadow: 0 0 0 2px #1b7f5a, 0 6px 18px rgba(27, 127, 90, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
    .ops-item--focus { animation: none; }
    .ops-focus-active .ops-item--supply { transition: none; }
}

/* Eingerueckter Vorratsartikel unter einem "aus Vorrat"-Artikel.
   .ops-item ist eine nicht umbrechende Flex-Zeile - ohne diese beiden Regeln
   stuende die Unterliste neben dem Regler statt darunter. Der Umbruch gilt nur
   fuer Zeilen, die wirklich eine Unterliste haben. */
.ops-item--has-sub {
    flex-wrap: wrap;
}

.ops-sublist {
    flex: 0 0 100%;
    width: 100%;
    margin: 8px 0 0 0;
    padding-left: 18px;
    border-left: 2px solid #e3e9ef;
}

.ops-item--nested {
    background: transparent;
    padding-left: 0;
}

.ops-item__refill-note {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    flex: 0 0 auto;
    max-width: 100%;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.74rem;
    line-height: 1.25;
    color: #7a8794;
}

.ops-item__refill-note .material-symbols-rounded {
    font-size: 0.95rem;
    line-height: 1;
}

/* Der Hinweis als Griff: zugeklappt zeigt der Pfeil nach unten, aufgeklappt
   nach oben. Zugeklappt verschwindet die Unterliste ganz - eine nur optisch
   verkleinerte Zeile wuerde am Handy trotzdem Platz kosten. */
.ops-item__refill-toggle {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.ops-item__refill-toggle:hover { color: #4a5561; }
.ops-item__refill-chevron {
    transition: transform 0.15s ease;
}
.ops-item--has-sub:not(.is-collapsed) > .ops-item__text .ops-item__refill-chevron {
    transform: rotate(180deg);
}
.ops-item--has-sub.is-collapsed > .ops-sublist { display: none; }
.ops-ask.is-busy { opacity: 0.5; pointer-events: none; }
/* Die Richtungs-Knoepfe im Popover sind dieselben wie auf der Kategorienkarte -
   nur die Auswahl-Markierung kommt vom Popover. */
.ops-ask__options .pshop-action-btn { flex: 0 0 auto; }
/* Mengen-Schritt: Minus, Zahl, Plus, Bestaetigen in einer Reihe. */
.ops-ask__amount { align-items: center; }
.ops-ask__amount-value {
    min-width: 4.5em;
    text-align: center;
    font-weight: 700;
    color: #26313c;
    font-variant-numeric: tabular-nums;
}
.ops-ask__options .pshop-action-btn.is-selected {
    box-shadow: 0 0 0 2px #23557f;
    font-weight: 700;
}
.ops-ask__title { font-size: 0.78rem; font-weight: 700; color: #4a5561; }
.ops-ask__btn {
    border: 1px solid #c7d0da;
    background: #fff;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    color: #26313c;
}
.ops-ask__btn:hover { border-color: #3f8f5f; color: #1b7f5a; }
/* Blau, nicht grün: die Vorauswahl sagt "so ist es erfasst", nicht "erledigt".
   Grün ist in dieser Oberfläche durchgängig die Farbe für Erledigtes. */
.ops-ask__btn.is-selected {
    background: #e6f0fb;
    border-color: #3f6ea8;
    color: #23557f;
    font-weight: 700;
}
.ops-ask__btn.is-selected:hover { border-color: #23557f; color: #23557f; }

/* Einmalige Einkaufsposten: Häkchen, Text, Entfernen - kein Regler. */
.ops-custom-list .ops-item { align-items: center; }
.ops-custom__form { display: flex; flex: 0 0 auto; }
.ops-custom__del {
    border: none;
    background: transparent;
    color: #b3bcc6;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}
.ops-custom__del:hover { color: #a5281b; }

/* Gemeinsame-Vorraete-Popup: grafischer Fuellstand neben dem Status.
   Der Prozentwert steht als Text daneben, damit die Anzeige auch ohne
   Farbwahrnehmung eindeutig bleibt. */
.guest-supply-meter-cell {
    white-space: nowrap;
}

.guest-supply-meter-cell__value {
    margin-left: 6px;
    font-size: 0.72rem;
    color: #7a8794;
    font-variant-numeric: tabular-nums;
}

.guest-supply-meter {
    display: inline-block;
    vertical-align: middle;
    width: 64px;
    height: 8px;
    border-radius: 999px;
    background: #e8ecf0;
    overflow: hidden;
}

.guest-supply-meter--none {
    background: repeating-linear-gradient(
        135deg,
        #edf0f3 0 4px,
        #e2e7ec 4px 8px
    );
}

.guest-supply-meter__bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #1b7f5a;
}

.guest-supply-meter.is-mid .guest-supply-meter__bar {
    background: #d68910;
}

.guest-supply-meter.is-low .guest-supply-meter__bar {
    background: #c0392b;
}

@media (max-width: 480px) {
    .guest-supply-meter {
        width: 44px;
    }

    .guest-supply-meter-cell__value {
        margin-left: 4px;
        font-size: 0.68rem;
    }
}

/* Punktestand-Korrektur in der Buchungsbearbeitung: eine Zeile wie die
   Status-Umschalter daneben, damit sie sich nicht als Fremdkoerper anfuehlt. */
.admin-karma-adjust {
    flex-wrap: wrap;
    gap: 6px;
}

.admin-karma-adjust__points {
    max-width: 5.5rem;
}

.admin-karma-adjust__reason {
    max-width: 12rem;
}

/* ==== Gastportal auf dem Tablet: groessere Kacheln, ruhigeres Raster ====
   Ab 900px waeren es mit 140px-Kacheln sieben oder acht Spalten. Breitere
   Mindestbreite ergibt fuenf bis sechs, die Beschriftung darf groesser sein. */
@media (min-width: 900px) {
    .guest-page .info-cards {
        grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
        gap: 18px;
    }
    .guest-page .info-cards > a.info-card .info-card-label {
        font-size: 0.98rem;
    }
    .guest-page .info-cards > a.info-card .info-card-icon .material-symbols-rounded {
        font-size: 2.4rem;
    }
    .guest-page .guest-tabs a.guest-tab-link {
        min-height: 44px;
        font-size: 0.95rem;
    }
    .guest-page .guest-next,
    .guest-page .bring-card {
        max-width: 720px;
    }
}
@media (min-width: 1200px) {
    .guest-page .section .container {
        max-width: 1120px;
    }
}

/* ==== Thermostat-Kachel: aufgeraeumt, Layout wie gehabt (Titel links oben,
   Ist-Werte rechts, Sollwert mit +/- unten). Ausgeblendet werden nur Zusatz-
   elemente: Auto/Manuell, Feuchte, Akku, Flammen-Animation, Strom-Banner. Die
   stehen im Modal. Keine modernen Selektoren, damit auch aeltere Tablet-
   Browser die Regeln verstehen. ==== */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-battery-indicator,
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-climate-row--humidity {
    display: none !important;
}
/* Betriebsart auf der Kachel: Auto, Manuell, Ein, Aus. Bei Ein/Aus verschwinden
   Sollwert und +/-, stattdessen steht der Hinweis "an/aus bis zur Abreise". */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-tile__mode {
    margin-bottom: 4px;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .thermo-mode-tabs li > span[role="button"] {
    padding: 2px 8px;
    font-size: 0.72rem;
}
.tasmota-thermo-tile__forced {
    display: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e3556;
    text-align: center;
}
.is-thermo-forced .tasmota-thermo-tile__forced { display: block; }
.is-thermo-forced .tasmota-thermo-tile__controls { display: none !important; }
.is-thermo-forced-off .tasmota-thermo-tile__forced { color: #4b6a8a; }
.is-thermo-forced-on .tasmota-thermo-tile__forced { color: #b3452b; }
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-climate {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e3556;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-thermo-tile--hero {
    padding-bottom: 96px; /* Platz fuer Flammenreihe (unten) und Strom-Banner */
    gap: 2px;
    justify-content: flex-start;
}
.tasmota-thermo-tile__soll-label {
    display: none;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6f7a86;
    line-height: 1.1;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-tile__soll-label {
    display: block;
}
.is-thermo-forced .tasmota-thermo-tile__soll-label { display: none !important; }
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-tile__controls {
    flex-wrap: nowrap;
    justify-content: center;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-tile__btn {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
}

/* Reihenfolge wie im Block definiert: keine dichte Packung, sonst rutschen
   doppelt breite Karten (Tuercode, Thermostat) unter eine fremde Ueberschrift. */
.guest-page .info-cards {
    grid-auto-flow: row;
}

/* ==== Kacheln wie im Entwurf: links ausgerichtet, Icon oben, Titel, kurze
   Unterzeile. Weiss mit duennem Rand, kein Schatten, keine Quadrate mehr.
   Status-Karten (Tuercode, Thermostat, Lampe) behalten ihren blauen Stil. ==== */
.guest-page .info-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (min-width: 600px) {
    .guest-page .info-cards {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }
}
@media (min-width: 900px) {
    .guest-page .info-cards {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 14px;
    }
}
.guest-page .info-cards > a.info-card {
    aspect-ratio: auto;
    min-height: 96px;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 6px;
    padding: 14px 12px 12px;
    background: #fff;
    border: 1px solid #e1e6ec;
    border-radius: 14px;
    box-shadow: none;
}
.guest-page .info-cards > a.info-card:hover {
    transform: none;
    box-shadow: none;
    border-color: #1e3556;
}
.guest-page .info-cards > a.info-card > .info-card-icon {
    font-size: 1.7rem;
    color: #1e3556;
}
.guest-page .info-cards > a.info-card > .info-card-icon .material-symbols-rounded {
    font-size: 26px;
}
.guest-page .info-cards > a.info-card > .info-card-label {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    -webkit-line-clamp: 2;
}
.guest-page .info-cards > a.info-card > .info-card-sub {
    font-size: 0.78rem;
    line-height: 1.2;
    color: #6f7a86;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
/* Blaue Status-Karten (Tuercode, Thermostat, Dimmer) laufen ueber die volle
   Breite auf dem Handy und zwei Spalten darueber. */
.guest-page .info-cards > .doorcode-grid-card,
.guest-page .info-cards > a.info-card.is-tasmota-thermo-tile,
.guest-page .info-cards > a.info-card.is-tasmota-dimmer-tile {
    grid-column: span 2;
}
.guest-page .info-cards > a.info-card.is-tasmota-thermo-tile,
.guest-page .info-cards > a.info-card.is-tasmota-dimmer-tile {
    aspect-ratio: auto;
    min-height: 120px;
}
.guest-page .info-cards > .info-card-separator--titled {
    margin: 14px 0 0;
}

/* Tab-Leiste: vier gleich breite Reiter, kein seitliches Scrollen. */
.guest-page .guest-tabs {
    overflow-x: hidden;
}
.guest-page .guest-tabs ul {
    width: 100%;
    min-width: 0;
}
.guest-page .guest-tabs li {
    flex: 1 1 0;
    min-width: 0;
}
.guest-page .guest-tabs a.guest-tab-link {
    padding-left: 4px;
    padding-right: 4px;
    min-width: 0;
}
@media (max-width: 600px) {
    .guest-page .guest-tabs .guest-tab-text {
        font-size: 0.64rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* Tuercode-Karte: flache Statuskarte, Titel links, Code rechts gross. */
.guest-page .info-cards > .doorcode-grid-card {
    aspect-ratio: auto;
    min-height: 96px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    text-align: left;
}
.guest-page .info-cards > .doorcode-grid-card .doorcode-card-header {
    margin: 0;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}
.guest-page .info-cards > .doorcode-grid-card .doorcode-card-body {
    margin: 0;
    flex: 0 0 auto;
    align-items: flex-end;
}
.guest-page .info-cards > .doorcode-grid-card .doorcode-value {
    font-size: 1.9rem;
    letter-spacing: 0.12em;
    line-height: 1;
}
/* Thermostat-Karte auf dem Tablet nicht hoeher als noetig. */
.guest-page .info-cards > a.info-card.is-tasmota-thermo-tile {
    aspect-ratio: auto;
    min-height: 236px;
    max-height: none;
}

/* Flammenreihe: eine Flamme je angeschlossenem Heizkoerper, immer sichtbar.
   Aktive brennen farbig mit Wattzahl, inaktive stehen grau daneben. Die Reihe
   liegt in einem eigenen Band ueber dem Strom-Banner, nichts ueberlappt. */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-ambiance__flames {
    left: 10px;
    right: 10px;
    bottom: 30px;
    height: 62px;
    opacity: 1;
    align-items: flex-end;
    justify-content: space-evenly;
    gap: 6px;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-flame {
    display: flex;
    min-width: 0;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-flame:not(.is-on) {
    opacity: 0.45;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-flame:not(.is-on) .tasmota-thermo-flame__svg {
    filter: grayscale(1);
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-flame__svg {
    width: 22px;
    height: 32px;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-flame__label {
    max-width: 7rem;
    font-size: 0.6rem;
    color: #4b5563;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-flame__watt {
    font-size: 0.62rem;
    font-weight: 700;
    color: #b3452b;
}

/* Der Karten-Editor markiert Gastseiten mit dem gespeicherten Handy-Layout.
   Dessen alte Optik (drei Spalten, Icon-Tabs, Mini-Beschriftung) wird hier auf
   den Entwurf zurueckgesetzt; die gespeicherte Reihenfolge bleibt wirksam. */
.guest-page[data-guest-card-order-layout="mobile"] .info-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.guest-page[data-guest-card-order-layout="mobile"] .guest-tabs .guest-tab-text {
    display: block;
}
.guest-page[data-guest-card-order-layout="mobile"] .guest-tabs a.guest-tab-link {
    flex-direction: column;
    gap: 2px;
    min-height: 46px;
    padding: 6px 2px 5px;
    font-size: 0.64rem;
}
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card {
    aspect-ratio: auto;
    min-height: 96px;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 6px;
    padding: 14px 12px 12px;
}
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card .info-card-label {
    font-size: 0.95rem;
    line-height: 1.2;
    -webkit-line-clamp: 2;
}
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card > .info-card-icon .material-symbols-rounded {
    font-size: 26px;
}
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > .doorcode-grid-card,
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card.is-tasmota-thermo-tile,
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card.is-tasmota-dimmer-tile {
    grid-column: span 2;
}
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card.is-tasmota-thermo-tile {
    min-height: 236px;
}

/* Dimmer-Kachel (Tischlampe) bleibt eine quadratische Einzelkachel. */
.guest-page .info-cards > a.info-card.is-tasmota-dimmer-tile,
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card.is-tasmota-dimmer-tile {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
    min-height: 0;
    max-height: none;
}

/* Wiedergabe-Karte: Play/Pause und Lautstaerke ohne Modal. */
.guest-page .info-cards > .media-card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 12px 12px;
    background: #fff;
    border: 1px solid #e1e6ec;
    border-radius: 14px;
    cursor: default;
    min-height: 0;
}
.guest-page .info-cards > .media-card.is-disabled { opacity: 0.55; }
.guest-page .info-cards > .media-card .media-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.guest-page .info-cards > .media-card .media-card__head .info-card-icon { font-size: 1.7rem; color: #1e3556; }
.guest-page .info-cards > .media-card .media-card__head .info-card-icon .material-symbols-rounded { font-size: 28px; }
.guest-page .info-cards > .media-card .media-card__text { min-width: 0; }
.guest-page .info-cards > .media-card .media-card__text .info-card-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guest-page .info-cards > .media-card .media-card__controls {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
}
.guest-page .info-cards > .media-card .media-card__toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: #1e3556;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.guest-page .info-cards > .media-card .media-card__toggle:disabled { background: #c9d1da; cursor: default; }
.guest-page .info-cards > .media-card .media-card__toggle .material-symbols-rounded { font-size: 26px; }
.guest-page .info-cards > .media-card .media-card__volume {
    width: 100%;
    accent-color: #1e3556;
    margin: 0;
}
.guest-page .info-cards > .media-card .media-card__volume-value {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: #6f7a86;
    text-align: right;
}
.guest-page .info-cards > .media-card .media-card__text .info-card-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1c2431;
    line-height: 1.2;
}
.guest-page .info-cards > .media-card .media-card__text .info-card-sub {
    font-size: 0.8rem;
    color: #6f7a86;
    line-height: 1.2;
}

/* ==== Verteilung im Raster: dicht gepackt je Gruppe, feste Zeilenhoehe ====
   Jede Gruppe (Trenner) ist ein eigenes Raster, deshalb darf hier dicht
   gepackt werden. Hohe Karten belegen zwei Zeilen, kleine ruecken daneben. */
.guest-page .info-cards {
    grid-auto-flow: row dense;
    grid-auto-rows: minmax(96px, auto);
    align-items: stretch;
}
.guest-page .info-cards > a.info-card,
.guest-page .info-cards > .info-card {
    align-self: stretch;
    height: auto;
}
.guest-page .info-cards > a.info-card.is-tasmota-thermo-tile,
.guest-page .info-cards > a.info-card.is-tasmota-dimmer-tile,
.guest-page .info-cards > .weather-grid-card,
.guest-page .info-cards > .pshop-category-card {
    grid-row: span 2;
    align-self: stretch;
}
.guest-page .info-cards > a.info-card.is-tasmota-dimmer-tile {
    aspect-ratio: auto;
    min-height: 0;
}
.guest-page .info-cards > .weather-grid-card,
.guest-page .info-cards > .pshop-category-card {
    grid-column: span 2;
    min-height: 0;
    height: auto;
}
.guest-page .info-card-separator--titled {
    grid-column: auto;
    margin: 18px 0 8px;
}
.guest-page .info-cards + .info-cards { margin-top: 10px; }
/* Feste Spalten je Umbruchpunkt. guestPortalFillGrids (main.js) gibt freie Spalten am Zeilenende nur einer
   Karte, die als einzige ihrer Groesse in der Gruppe steht (hoechstens doppelte Grundbreite, die einzige Karte
   einer Gruppe ganze Zeile); gleich grosse Karten bleiben gleich breit, sonst bleibt die Luecke frei. */
@media (min-width: 600px) {
    .guest-page .info-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (min-width: 900px) {
    .guest-page .info-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: minmax(104px, auto); }
}

/* Tablet quer: sechs Spalten, damit Tuercode plus vier Kacheln in eine Reihe passen. */
@media (min-width: 1100px) {
    .guest-page .info-cards { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }
}
/* Haken/Ausrufezeichen am Reiter oben rechts statt als dritte Zeile. */
.guest-page .guest-tabs a.guest-tab-link { position: relative; }
@media (max-width: 600px) {
    .guest-page .guest-tabs .guest-tab-mark {
        position: absolute;
        top: 3px;
        right: 4px;
        margin: 0;
    }
}
@media (min-width: 1100px) {
    .guest-page .info-cards { grid-template-columns: repeat(auto-fill, minmax(166px, 1fr)); gap: 12px; }
}
@media (min-width: 1100px) {
    .guest-page .info-cards > .media-card { grid-column: span 3; }
}
/* Dimmer-Kachel: Hoehe kommt aus den zwei Rasterzeilen, nicht aus dem
   Seitenverhaeltnis (sonst wird sie in kleinen Gruppen zum Riesenquadrat). */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-dimmer-tile,
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card.tasmota-grid-card.is-tasmota-dimmer-tile {
    aspect-ratio: auto;
    min-height: 200px;
    max-height: 260px;
}
/* Tischlampe ab Tablet: eine Zeile, zwei Spalten breit (kein leerer Block unter dem Regler). */
@media (min-width: 600px) {
    .guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-dimmer-tile,
    .guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card.tasmota-grid-card.is-tasmota-dimmer-tile {
        grid-row: span 1;
        grid-column: span 2;
        min-height: 128px;
        max-height: none;
    }
    .guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-dimmer-tile .tasmota-dimmer-tile {
        gap: 6px;
    }
}
/* Thermostat-Kopie im Modal: gleiche Kachel wie im Portal, zentriert. */
.tasmota-modal-thermo-dashboard .guest-page .tasmota-modal-thermo-grid,
.tasmota-modal-thermo-dashboard .guest-page .info-cards.tasmota-modal-thermo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 0;
    margin: 0 0 14px;
    padding: 0;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    min-height: 236px;
    aspect-ratio: auto;
    cursor: default;
}
.tasmota-modal-thermo-dashboard > .guest-page {
    background: transparent;
    padding: 0;
    margin: 0;
    min-height: 0;
}

/* ==== Gleich breite Karten (15.09.2026) ====
   Wunsch Vermieter: gleiche Karten nebeneinander gleich breit. Die Breite
   bestimmt allein das Raster (Spalten oben, Zeilenfuellung in main.js),
   nie der Inhalt. Lange Unterzeilen ohne Leerzeichen (WLAN-Name, Adresse)
   enden deshalb mit "…" in der Karte statt hart am Kartenrand, ein langer
   Titel der Wiedergabe-Karte bricht innerhalb der Karte um. */
.guest-page .info-cards > * {
    min-width: 0;
}
.guest-page .info-cards > a.info-card > .info-card-sub,
.guest-page .info-cards > .media-card .media-card__text .info-card-label {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.guest-page .info-cards > .media-card .media-card__head {
    max-width: 100%;
}
/* Handy-Reihenfolge (data-guest-card-order-layout="mobile") in einem breiten Fenster:
   zwei Spalten wie am Handy. Die Wiedergabe-Karte darf dort nicht die Desktop-
   Spannweite 3 behalten, sonst entsteht eine dritte, schmale Spalte und gleiche
   Karten werden ungleich breit. */
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > .media-card {
    grid-column: span 2;
}
/* Lange Raum- und Geraetenamen ohne Leerzeichen in Thermostat- und Dimmer-Kacheln
   (auch in der Thermostat-Kopie im Modal): hoechstens zwei Zeilen, dann "…", nie
   ueber den Kartenrand, unter die Temperatur oder unter den Schalter. */
.guest-page .info-cards > a.info-card.is-tasmota-thermo-tile .blue-card-title,
.guest-page .info-cards > a.info-card.is-tasmota-dimmer-tile .blue-card-title {
    min-width: 0;
}
.guest-page .info-cards > a.info-card.is-tasmota-dimmer-tile .tasmota-dimmer-tile__header .blue-card-title {
    flex: 1 1 auto;
}
.guest-page .info-cards > a.info-card.is-tasmota-thermo-tile .blue-card-title-text,
.guest-page .info-cards > a.info-card.is-tasmota-dimmer-tile .blue-card-title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* Nur eine Titelzeile, wo die Kachel keine Hoehe fuer eine zweite hat (gemessen):
   Dimmer ab 600 px ist eine Rasterzeile hoch, der Schieber rutschte sonst aus der
   Karte; beim Thermostat unter 600 px rutschten die Regler in die Heizkoerper-Zeile. */
@media (min-width: 600px) {
    .guest-page .info-cards > a.info-card.is-tasmota-dimmer-tile .blue-card-title-text {
        -webkit-line-clamp: 1;
    }
}
@media (max-width: 599px) {
    .guest-page .info-cards > a.info-card.is-tasmota-thermo-tile .blue-card-title-text {
        -webkit-line-clamp: 1;
    }
}
/* Kacheltitel nur an sinnvollen Stellen trennen: "Staub-sauger" statt "Staubsau-ger"
   (vor dem Trennstrich mind. 4, danach mind. 5 Zeichen, Woerter unter 8 Zeichen nie).
   Browser ohne diese Angabe trennen wie bisher. */
.guest-page .info-cards > a.info-card > .info-card-label {
    hyphenate-limit-chars: 8 4 5;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 5;
}
/* Bearbeiten-Modus: Die Editor-Griffe liegen oben rechts (6 px Abstand, zusammen 68 px
   breit; bis 768 px 4 px und 56 px). Akku-Anzeigen und der Dimmer-Schalter weichen aus,
   die Zusatzoptionen zeigen alle Eintraege statt einer abgeschnittenen Liste. Die Griffe
   selbst bleiben unveraendert bedienbar. */
.guest-page[data-guest-card-order-editing="1"] .info-cards > .doorcode-grid-card .tasmota-battery-indicator,
.guest-page[data-guest-card-order-editing="1"] .info-cards > a.info-card.tasmota-grid-card:not(.is-tasmota-thermo-tile) > .tasmota-battery-indicator {
    right: 74px;
}
.guest-page[data-guest-card-order-editing="1"] .info-cards > .smoke-grid-card .smoke-card-indicators--guest,
.guest-page[data-guest-card-order-editing="1"] .info-cards > a.info-card > .admin-only-badge--corner {
    top: 38px;
}
@media (min-width: 600px) {
    .guest-page[data-guest-card-order-editing="1"] .info-cards > a.info-card.is-tasmota-dimmer-tile .tasmota-dimmer-tile__header {
        padding-right: 64px;
    }
}
.guest-page[data-guest-card-order-editing="1"] .info-cards > .pshop-category-card.extra-options-card {
    height: auto;
    max-height: none;
}
.guest-page[data-guest-card-order-editing="1"] .info-cards > .pshop-category-card.extra-options-card .purchase-shop-items {
    overflow: visible;
}
/* ==== Ende Gleich breite Karten ==== */

/* ==== Kartenstil "Farbe je Gruppe" (2026-09-13) ====
   Karten ohne Rand mit weichem Schatten, Symbol im getoenten Kreis, Farbton
   je Gruppe ueber den Trenner (info-cards--accent-*). ==== */
.guest-page {
    --card-shadow: 0 1px 2px rgba(15, 42, 74, 0.06), 0 6px 16px rgba(15, 42, 74, 0.05);
    --card-shadow-hover: 0 2px 4px rgba(15, 42, 74, 0.08), 0 12px 28px rgba(15, 42, 74, 0.10);
    --accent-bg: #e8f1fb;
    --accent-ink: #0b3b6d;
}
.guest-page .info-cards.info-cards--accent-heat   { --accent-bg: #fbede3; --accent-ink: #b5552a; }
.guest-page .info-cards.info-cards--accent-blue   { --accent-bg: #e7eef8; --accent-ink: #2b5b8f; }
.guest-page .info-cards.info-cards--accent-violet { --accent-bg: #ece9f6; --accent-ink: #5b4a9a; }
.guest-page .info-cards.info-cards--accent-green  { --accent-bg: #e4f2ea; --accent-ink: #2f7a52; }
.guest-page .info-card-separator--accent-heat   { --accent-bg: #fbede3; --accent-ink: #b5552a; }
.guest-page .info-card-separator--accent-blue   { --accent-bg: #e7eef8; --accent-ink: #2b5b8f; }
.guest-page .info-card-separator--accent-violet { --accent-bg: #ece9f6; --accent-ink: #5b4a9a; }
.guest-page .info-card-separator--accent-green  { --accent-bg: #e4f2ea; --accent-ink: #2f7a52; }

.guest-page .info-cards > a.info-card,
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card,
.guest-page .info-cards > .media-card,
.guest-page .info-cards > .weather-grid-card,
.guest-page .info-cards > .pshop-category-card,
.guest-page .info-cards > .doorcode-grid-card,
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile,
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-dimmer-tile {
    border: 1px solid transparent;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.guest-page .info-cards > a.info-card:hover,
.guest-page .info-cards > .doorcode-grid-card:hover,
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile:hover,
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-dimmer-tile:hover {
    transform: translateY(-1px);
    box-shadow: var(--card-shadow-hover);
    border-color: transparent;
}
.guest-page .info-cards > a.info-card:active {
    transform: translateY(0);
    box-shadow: var(--card-shadow);
}
@media (prefers-reduced-motion: reduce) {
    .guest-page .info-cards > a.info-card,
    .guest-page .info-cards > .doorcode-grid-card { transition: none; }
    .guest-page .info-cards > a.info-card:hover { transform: none; }
}
/* Symbol im getoenten Kreis, gleicher Anker oben links auf jeder Karte. */
.guest-page .info-cards > a.info-card > .info-card-icon,
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card > .info-card-icon,
.guest-page .info-cards > .media-card .media-card__head .info-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-bg);
    color: var(--accent-ink);
    font-size: 22px;
    margin-bottom: 2px;
    flex: 0 0 auto;
}
.guest-page .info-cards > a.info-card > .info-card-icon .material-symbols-rounded,
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card > .info-card-icon .material-symbols-rounded,
.guest-page .info-cards > .media-card .media-card__head .info-card-icon .material-symbols-rounded {
    font-size: 22px;
}
.guest-page .info-cards > a.info-card > .info-card-label {
    font-weight: 700;
    color: #12294a;
}
.guest-page .info-cards > a.info-card > .info-card-sub {
    font-size: 0.77rem;
    color: #75808d;
}
/* Gruppen-Trenner: Chip mit Symbol im Gruppenton, mehr Luft zwischen den Gruppen. */
.guest-page .info-card-separator--titled {
    gap: 8px;
    margin: 22px 0 10px;
}
.guest-page .info-card-separator__chip {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-bg);
    color: var(--accent-ink);
    flex: 0 0 auto;
}
.guest-page .info-card-separator__chip .material-symbols-rounded,
.guest-page .info-card-separator__glyph {
    font-size: 15px;
    line-height: 1;
}
.guest-page .info-card-separator--titled .info-card-separator__title {
    color: #5f6b79;
}
.guest-page .info-cards + .info-cards { margin-top: 14px; }

/* ==== Schalter und Dimmer direkt auf der Karte ==== */
.guest-page .info-cards > a.info-card.is-tasmota-switch-tile {
    padding-right: 84px;
}
.tasmota-switch-tile {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    z-index: 2;
}
.tasmota-switch-tile__toggle {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 28px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: #cbd3dd;
    position: relative;
    cursor: pointer;
    transition: background 0.18s ease;
    box-shadow: inset 0 1px 2px rgba(15, 42, 74, 0.15);
}
.tasmota-switch-tile__toggle:focus-visible {
    outline: 2px solid var(--accent-ink, #0b3b6d);
    outline-offset: 2px;
}
.tasmota-switch-tile__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 42, 74, 0.3);
    transition: transform 0.18s ease;
}
.tasmota-switch-tile__toggle.is-on {
    background: var(--accent-ink, #0b3b6d);
}
.tasmota-switch-tile__toggle.is-on .tasmota-switch-tile__knob {
    transform: translateX(22px);
}
.tasmota-switch-tile__state {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6f7a86;
    letter-spacing: 0.02em;
}
.tasmota-switch-tile__toggle.is-on + .tasmota-switch-tile__state {
    color: var(--accent-ink, #0b3b6d);
}
/* Dimmer: Ein/Aus rechts im Kopf. */
.tasmota-dimmer-tile__header {
    justify-content: space-between;
    gap: 8px;
}
.tasmota-dimmer-tile__power {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    display: grid;
    place-items: center;
    background: #dfe6ee;
    color: #5f6b79;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.tasmota-dimmer-tile__power .material-symbols-rounded { font-size: 20px; }
.tasmota-dimmer-tile__power.is-on {
    background: var(--accent-ink, #0b3b6d);
    color: #fff;
}
.tasmota-dimmer-tile__power:focus-visible {
    outline: 2px solid var(--accent-ink, #0b3b6d);
    outline-offset: 2px;
}
/* Ohne Strom oder ausserhalb des lokalen Netzes: Bedienung gesperrt. */
.tasmota-grid-card.is-tasmota-nopower .tasmota-switch-tile__toggle,
.tasmota-grid-card.tasmota-card-unavailable .tasmota-switch-tile__toggle,
.tasmota-grid-card.is-tasmota-nopower .tasmota-dimmer-tile__power,
.tasmota-grid-card.tasmota-card-unavailable .tasmota-dimmer-tile__power,
.tasmota-grid-card.is-tasmota-nopower .tasmota-dimmer-tile__slider {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
    .tasmota-switch-tile__toggle, .tasmota-switch-tile__knob, .tasmota-dimmer-tile__power { transition: none; }
}

/* ==== Karten-Editor (Admin): eigene Wegpunkte, Korrekturen ==== */
.map-admin-add-control .map-admin-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #1e3556;
    background: #fff;
}
.map-admin-add-control .map-admin-add-btn .material-symbols-rounded { font-size: 20px; }
.map-admin-add-control .map-admin-add-btn.is-active {
    background: #1e3556;
    color: #fff;
}
.map-canvas.map-admin-add-mode { cursor: crosshair; }
.map-canvas.map-admin-add-mode .leaflet-interactive { cursor: crosshair; }
.map-admin-hint {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(30, 53, 86, 0.92);
    color: #fff;
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 999px;
    pointer-events: none;
    white-space: nowrap;
}
.map-poi-marker--custom .map-poi-icon-wrap { box-shadow: 0 0 0 2px #1e3556, 0 1px 4px rgba(0, 0, 0, 0.35) !important; }
.map-poi-marker--overridden .map-poi-icon-wrap { box-shadow: 0 0 0 2px #b5552a, 0 1px 4px rgba(0, 0, 0, 0.35) !important; }
.map-poi-marker--hidden { opacity: 0.45; }
.map-poi-admin-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e3e8ef;
}
.map-poi-admin-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1e3556;
    background: #e8f1fb;
    border-radius: 999px;
    padding: 2px 8px;
    flex: 1 1 100%;
}
.map-poi-admin-badge--hidden { color: #7a4a1c; background: #fbede3; }
.map-poi-admin-btn {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #c9d3df;
    background: #fff;
    color: #1e3556;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.map-poi-admin-btn--primary { background: #1e3556; border-color: #1e3556; color: #fff; }
.map-poi-admin-btn--danger { color: #b3452b; border-color: #e6b8ad; }
.map-poi-form { font-size: 0.85rem; width: min(78vw, 300px); }
.map-poi-form-title { font-weight: 700; color: #27364a; margin-bottom: 4px; }
.map-poi-form-hint { color: #667085; font-size: 0.76rem; margin: 0 0 6px; }
.map-poi-form-field { display: block; margin-bottom: 6px; }
.map-poi-form-field > span { display: block; font-size: 0.72rem; font-weight: 700; color: #5f6b79; margin-bottom: 2px; letter-spacing: 0.02em; }
.map-poi-form-field input,
.map-poi-form-field select,
.map-poi-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c9d3df;
    border-radius: 8px;
    padding: 5px 8px;
    font: inherit;
    font-size: 0.85rem;
    background: #fff;
    color: #1f2937;
}
.map-poi-form-field textarea { resize: vertical; }
.map-poi-form-check { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-weight: 600; color: #27364a; }
.map-poi-form-actions { display: flex; gap: 6px; margin-top: 6px; }
.map-poi-form-error { color: #b3452b; font-size: 0.78rem; margin: 6px 0 0; }

/* ==== Blaue Karten im Gastportal auf den weissen Kartenstil gezogen (2026-09-14)
   Tuerschlosscode, Wetter, Zusatzoptionen, Heizung und Dimmer hatten noch den
   blauen Verlauf; jetzt weisse Flaeche, gleicher Schatten, Symbol im
   getoenten Kreis oben links wie bei den uebrigen Karten. ==== */
.guest-page .info-cards > .blue-card,
.guest-page .info-cards > .doorcode-grid-card,
.guest-page .info-cards > .pshop-category-card,
.guest-page .info-cards > .weather-card-grid,
.guest-page .info-cards > .weather-grid-card,
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile,
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-dimmer-tile,
.guest-page .info-cards > a.info-card.tasmota-grid-card {
    background: #fff !important;
    border-color: transparent !important;
    box-shadow: var(--card-shadow);
    border-radius: 16px;
    color: #12294a;
}
.guest-page .info-cards > .blue-card:hover,
.guest-page .info-cards > .pshop-category-card:hover,
.guest-page .info-cards > .weather-card-grid:hover {
    background: #fff !important;
    border-color: transparent !important;
}
/* Titelzeile: Symbol im Kreis, Titel darunter – derselbe Anker wie .info-card-icon. */
.guest-page .info-cards .blue-card-title {
    flex-wrap: wrap;
    gap: 6px 8px;
    color: #12294a;
}
.guest-page .info-cards .blue-card-title-icon {
    flex: 0 0 100%;
    width: 38px;
    height: 38px;
    max-width: 38px;
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--accent-ink);
    font-size: 22px;
    margin-bottom: 2px;
}
.guest-page .info-cards .blue-card-title-icon .material-symbols-rounded,
.guest-page .info-cards .blue-card-title-icon .mdi-hex {
    font-size: 22px;
    color: var(--accent-ink);
}
.guest-page .info-cards .blue-card-title-text {
    color: #12294a;
    font-weight: 700;
}
/* Wetterkarte: Tal/Berg-Spalten waren halbtransparent weiss auf Blau – auf
   der weissen Karte brauchen sie einen eigenen, leichten Ton. */
.guest-page .info-cards .weather-card-grid .weather-combined-col {
    background: #f4f7fb;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
}
/* Tuerschlosscode: Titel bleibt einzeilig (Symbolkreis neben dem Text), sonst
   rutscht der Titel auf der kompakten Karte in den Hinweistext. */
.guest-page .info-cards > .doorcode-grid-card .blue-card-title {
    flex-wrap: nowrap;
    align-items: center;
}
.guest-page .info-cards > .doorcode-grid-card .blue-card-title-icon {
    flex: 0 0 38px;
    margin-bottom: 0;
}
/* Zusatzoptionen: eigenes Titel-Markup, gleicher Symbolkreis. */
.guest-page .info-cards > .pshop-category-card .pshop-category-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #12294a;
    font-weight: 700;
}
.guest-page .info-cards > .pshop-category-card .pshop-category-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--accent-ink);
    flex: 0 0 38px;
}
.guest-page .info-cards > .pshop-category-card .pshop-category-icon-glyph {
    font-size: 22px;
    color: var(--accent-ink);
}

/* ==== "Aus Vorrat nachfuellen" (2026-09-14): der Hinweis ist ein sichtbarer
   Griff (Chip mit Symbol und Pfeil), der Vorrat darunter steht standardmaessig
   offen in einer leicht getoenten Box, damit klar ist, dass er zum Artikel
   gehoert. ==== */
.ops-item__refill-note {
    margin-top: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    background: #e8f1fb;
    color: #0b3b6d;
    font-weight: 600;
    font-size: 0.76rem;
    gap: 5px;
}
.ops-item__refill-note .material-symbols-rounded { font-size: 1.05rem; }
.ops-item__refill-toggle:hover { color: #0b3b6d; background: #dbe8f7; }
.ops-item__refill-toggle:focus-visible { outline: 2px solid #0b3b6d; outline-offset: 1px; }
.ops-item__refill-chevron { margin-left: 2px; opacity: 0.8; }
.ops-sublist {
    margin: 8px 0 2px;
    padding: 4px 10px 4px 12px;
    border-left: 3px solid #b9d0ea;
    background: #f4f7fb;
    border-radius: 0 10px 10px 0;
}
.ops-sublist > .ops-item--nested { border-bottom: 0; }
/* Schmale Schirme: Chip kompakter, Textblock darf schrumpfen, damit der
   Regler in der Zeile bleibt statt darunter zu rutschen. */
.ops-item--has-sub > .ops-item__text { min-width: 0; flex: 1 1 120px; }
@media (max-width: 600px) {
    .ops-item__refill-note { font-size: 0.7rem; padding: 2px 7px 2px 6px; gap: 4px; }
    .ops-item__refill-note .material-symbols-rounded { font-size: 0.95rem; }
}

/* ==== Kacheln im Gastportal: einfache oder doppelte Hoehe (seit 14.09.2026) ====
   Jede kleine Karte ist genau eine Rasterzeile hoch, hohe Karten (Thermostat,
   Wetter, auf dem Handy auch der Dimmer) genau zwei Zeilen plus Luecke. Vorher
   gab die hoechste Karte einer Zeile die Hoehe vor - je Gruppe anders, also
   ungleich. Listenkarten (Zusatzoptionen, Einkauf) sind keine Kacheln und
   duerfen weiter mit dem Inhalt wachsen; nur in ihrer Zeile wird das Raster
   hoeher. */
.guest-page .info-cards {
    /* 128: Symbol 38 + zweizeiliger Titel + Untertitel + Innenabstand passen hinein */
    --guest-tile-unit: 128px;
    --guest-tile-gap: 10px;
    gap: var(--guest-tile-gap);
    grid-auto-rows: minmax(var(--guest-tile-unit), auto);
}
.guest-page[data-guest-card-order-layout="mobile"] .info-cards {
    --guest-tile-gap: 8px;
    gap: var(--guest-tile-gap);
}
@media (min-width: 600px) {
    .guest-page .info-cards {
        /* 2 x 129 + 12 = 270: die kombinierte Wetterkarte (269px) passt in zwei Zeilen */
        --guest-tile-unit: 129px;
        --guest-tile-gap: 12px;
    }
}
@media (min-width: 900px) {
    .guest-page .info-cards {
        --guest-tile-unit: 128px;
        --guest-tile-gap: 14px;
        grid-auto-rows: minmax(var(--guest-tile-unit), auto);
    }
}
/* Einfache Hoehe: Info-Karten, Schalter, Rauchmelder, Tuercode, Wiedergabe. */
.guest-page .info-cards > a.info-card,
.guest-page .info-cards > .info-card,
.guest-page .info-cards > .doorcode-grid-card,
.guest-page .info-cards > .media-card,
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card,
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > .doorcode-grid-card {
    box-sizing: border-box;
    height: var(--guest-tile-unit);
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    align-self: start;
    overflow: hidden;
}
/* Bei fester Hoehe darf nicht der Titel schrumpfen, sondern hoechstens der Untertitel. */
.guest-page .info-cards > a.info-card > .info-card-icon,
.guest-page .info-cards > a.info-card > .info-card-label {
    flex-shrink: 0;
}
/* Doppelte Hoehe: Thermostat immer, Dimmer nur solange er zwei Zeilen belegt. */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile,
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile,
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-dimmer-tile,
.guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card.tasmota-grid-card.is-tasmota-dimmer-tile {
    height: calc(var(--guest-tile-unit) * 2 + var(--guest-tile-gap));
    min-height: 0;
    max-height: none;
}
@media (min-width: 600px) {
    .guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-dimmer-tile,
    .guest-page[data-guest-card-order-layout="mobile"] .info-cards > a.info-card.tasmota-grid-card.is-tasmota-dimmer-tile {
        height: var(--guest-tile-unit);
    }
}
/* Wetterkarten: mindestens doppelt, bei mehr Inhalt waechst die Zeile mit. */
.guest-page .info-cards > .weather-grid-card,
.guest-page .info-cards > .weather-card-grid,
.guest-page .info-cards > .weather-mountain-valley-wrapper {
    min-height: calc(var(--guest-tile-unit) * 2 + var(--guest-tile-gap));
    align-self: stretch;
}
/* Thermostat-Kopie im Modal steht allein, dort gilt keine Rasterzeile. */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy {
    height: auto;
    min-height: 236px;
}

/* ==== Ein/Aus ueberall gleich: Kippschalter (Pille mit Knopf) (14.09.2026) ====
   Der runde Power-Knopf der Dimmer-Kachel wird derselbe Kippschalter wie bei
   den Schalter-Kacheln; das Symbol bleibt im Markup (JS haengt daran), wird
   aber nicht gezeichnet. */
.tasmota-dimmer-tile__power {
    width: 50px;
    height: 28px;
    border-radius: 999px;
    display: block;
    background: #cbd3dd;
    color: transparent;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(15, 42, 74, 0.15);
    transition: background 0.18s ease;
}
.tasmota-dimmer-tile__power .material-symbols-rounded { display: none; }
.tasmota-dimmer-tile__power::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 42, 74, 0.3);
    transition: transform 0.18s ease;
}
.tasmota-dimmer-tile__power.is-on {
    background: var(--accent-ink, #0b3b6d);
    color: transparent;
}
.tasmota-dimmer-tile__power.is-on::before { transform: translateX(22px); }
@media (prefers-reduced-motion: reduce) {
    .tasmota-dimmer-tile__power, .tasmota-dimmer-tile__power::before { transition: none; }
}
/* Ein/Aus im Geraete-Modal: gleiche Farben wie der Kippschalter (Ein = Akzent, Aus = grau). */
.tasmota-switch-btn.is-active[data-state="on"] {
    background: var(--accent-ink, #0b3b6d);
    border-color: var(--accent-ink, #0b3b6d);
    box-shadow: none;
}
.tasmota-switch-btn.is-active[data-state="off"] {
    background: #cbd3dd;
    border-color: #cbd3dd;
    color: #34404d;
    box-shadow: none;
}

/* Schalter-/Dimmer-Kacheln ohne Modal: die Karte selbst ist kein Knopf mehr. */
.guest-page .info-cards > a.info-card.is-tasmota-tile-only {
    cursor: default;
}
.guest-page .info-cards > a.info-card.is-tasmota-tile-only:hover {
    border-color: #e1e6ec;
}

/* Karten, die ein Fenster oeffnen, tragen rechts unten ein dezentes Zeichen. */
.guest-page .info-cards > a.info-card {
    position: relative;
}
.guest-page .info-cards > a.info-card[data-info-modal]::after {
    content: 'open_in_full';
    font-family: 'Material Symbols Rounded';
    font-feature-settings: 'liga';
    font-weight: normal;
    font-size: 13px;
    line-height: 1;
    position: absolute;
    right: 9px;
    bottom: 8px;
    color: #c3ccd6;
    pointer-events: none;
    z-index: 3;
}
.guest-page .info-cards > a.info-card[data-info-modal]:hover::after {
    color: #1e3556;
}

/* Verfuegbarkeits-Banner („Strom ab 18:00", „ausgeschaltet"): so breit wie der
   Text, mittig - nicht ueber die ganze Karte. */
.tasmota-grid-card .tasmota-card-avail-banner,
.tasmota-grid-card[data-tasmota-card-avail] .tasmota-card-avail-banner {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 56px);
    padding: 2px 10px;
}

/* ==== Thermostat-Kachel: mehr Luft, groessere Bedienelemente (14.09.2026) ====
   Vorher: Umschalter 23px hoch mit 11px Schrift, +/- 32px, alles mit 2px
   Abstand gestapelt, waehrend unter den Reglern Leerraum blieb. Jetzt fuellt
   der Block den Platz bis zur Flammenreihe. */
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-thermo-tile--hero,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-thermo-tile--hero {
    gap: 8px;
    justify-content: flex-start;
    padding-bottom: 84px;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-tile__mode,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .tasmota-thermo-tile__mode {
    margin-bottom: 0;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .thermo-mode-tabs li > span[role="button"],
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .thermo-mode-tabs li > span[role="button"] {
    padding: 4px 12px;
    font-size: 0.82rem;
    min-height: 28px;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-tile__soll-label,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .tasmota-thermo-tile__soll-label {
    font-size: 0.72rem;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile > .tasmota-thermo-tile--hero .tasmota-thermo-tile__controls,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy > .tasmota-thermo-tile--hero .tasmota-thermo-tile__controls {
    column-gap: 18px;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-tile__btn,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .tasmota-thermo-tile__btn {
    width: 50px;
    height: 32px;
    font-size: 0;
}
.guest-page .info-cards > a.info-card.tasmota-grid-card.is-tasmota-thermo-tile .tasmota-thermo-tile__target,
.guest-page a.info-card.tasmota-grid-card.is-tasmota-thermo-tile.tasmota-modal-thermo-card-copy .tasmota-thermo-tile__target {
    font-size: 1.75rem;
}

/* ==== Karten-Editor: Bereiche und Geraete-Vorschau (15.09.2026) ====
   Bereichs-Ueberschriften (Trenner) stehen zwischen den Rastern, jeder Bereich hat
   ein eigenes Raster. Im Bearbeiten-Modus: Stift an der Ueberschrift, leere Bereiche
   als Ablageflaeche. Die Geraete-Icons oeffnen das Portal in Geraetegroesse. */
.guest-page[data-guest-card-order-editing="1"] .info-card-separator[data-guest-card-key] {
    position: relative;
    padding-right: 40px;
}
.guest-page .info-card-separator[data-guest-card-key] > .guest-card-edit-handle {
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
}
.guest-page[data-guest-card-order-editing="1"] .info-cards[data-guest-card-sortable="1"]:not(:has(> [data-guest-card-key])) {
    min-height: 84px;
    border: 2px dashed rgba(43, 91, 143, 0.28);
    border-radius: 12px;
    background: rgba(43, 91, 143, 0.04);
}
.guest-page[data-guest-card-order-editing="1"] .info-cards[data-guest-card-sortable="1"]:not(:has(> [data-guest-card-key]))::before {
    content: "Karten mit dem Griff hierher ziehen";
    grid-column: 1 / -1;
    align-self: center;
    justify-self: center;
    color: #607086;
    font-size: 0.82rem;
    pointer-events: none;
}

.guest-page .guest-card-device-picker {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid #d8e2ee;
    border-radius: 999px;
    background: #f5f8fb;
}
.guest-page .guest-card-device-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #4b6584;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.guest-page .guest-card-device-btn .material-symbols-rounded {
    font-size: 1.15rem;
    line-height: 1;
}
.guest-page .guest-card-device-btn .material-symbols-rounded.is-rotated {
    transform: rotate(90deg);
}
.guest-page .guest-card-device-btn:hover {
    background: #e7eef8;
    color: #2b5b8f;
}
.guest-page .guest-card-device-btn:focus-visible {
    outline: 2px solid #2b5b8f;
    outline-offset: 1px;
}
.guest-page .guest-card-device-btn.is-active {
    background: #2b5b8f;
    color: #fff;
}
/* Im Geraeterahmen steht nur, was auch der Gast sieht: Admin-Leiste und Simulationsbalken
   stehen solange ueber dem Rahmen (card_editor.php, openPreview). */
.guest-page[data-guest-preview="1"] .guest-card-order-toolbar,
.guest-page[data-guest-preview="1"] .guest-sim__flash,
.guest-page[data-guest-preview="1"] .guest-sim__banner {
    display: none;
}

/* Geraete-Vorschau im Bearbeiten-Modus: heller Hintergrund statt dunklem Schleier - der wirkte, als
   waere die Seite gesperrt. Die Vorschau steht in einem hellen Rahmen, damit trotzdem klar ist, dass
   man die Seite des Gastes in einem Fenster sieht. */
.gp-device-preview {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    background: #eef2f7;
}
html.gp-device-preview-open,
html.gp-device-preview-open body {
    overflow: hidden;
}
.gp-device-preview__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 56px 8px;
    color: #1f2937;
}
.gp-device-preview__admin {
    flex: 0 0 auto;
    max-height: 45vh;
    overflow-y: auto;
    padding: 0 16px 6px;
}
.guest-page .gp-device-preview__admin .guest-card-order-toolbar,
.guest-page .gp-device-preview__admin .guest-sim__flash,
.guest-page .gp-device-preview__admin .guest-sim__banner {
    margin: 0 0 6px;
}
.gp-device-preview__size {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}
.gp-device-preview__close {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 50%;
    right: 12px;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: #1f2937;
    cursor: pointer;
    transform: translateY(-50%);
}
.gp-device-preview__close:hover {
    background: rgba(15, 23, 42, 0.16);
}
.gp-device-preview__stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 4px 16px 16px;
}
.gp-device-preview__viewport {
    position: relative;
    overflow: hidden;
    /* Rahmen immer, aber hell: er zeigt die Geraetekante, ohne wie ein schwarzer Kasten zu wirken. */
    border: 8px solid #cbd5e1;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
    box-sizing: content-box;
}
.gp-device-preview__frame {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    background: #fff;
    transform-origin: 0 0;
}

/* Sprung aus "Deine naechsten Schritte" (Bezahlen, Ausfuellen): die betreffenden Karten werden blau –
   dieselbe Optik wie .blue-card im Reiter Wohnung. Mit #id wegen der spaeteren Inline-Regeln des Layouts. */
.guest-page #booking-tab-content .guest-focus-blue,
.guest-page #booking-tab-content .card.guest-focus-blue {
    background: linear-gradient(135deg, rgba(232, 244, 253, 0.96) 0%, rgba(240, 247, 255, 0.96) 100%);
    /* !important: die Karten setzen ihre Rahmenfarbe teils an spaeterer Stelle erneut. */
    border: 1px solid #b9d7ee !important;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(3, 47, 90, 0.10);
}
.guest-page #booking-tab-content .guest-invoice-actions.guest-focus-blue { padding: .6rem .8rem; }
.guest-page #booking-tab-content .guest-focus-blue .card-content,
.guest-page #booking-tab-content .guest-focus-blue .table,
.guest-page #booking-tab-content .guest-focus-blue fieldset { background: transparent; }

/* Endreinigung ohne Putzkraft: rotes Hinweisfenster im Gastportal. Mit #id, weil das Layout die Modal-Farben
   in einem spaeteren Inline-Stylesheet mit gleicher Spezifitaet auf Weiss setzt. */
.guest-page #no-cleaner-modal { z-index: 10050; }
.guest-page #no-cleaner-modal .modal-background { background: rgba(127, 29, 29, .55); }
.guest-page #no-cleaner-modal .no-cleaner-modal__card { width: min(34rem, calc(100vw - 2rem)); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(127, 29, 29, .45); }
.guest-page #no-cleaner-modal .no-cleaner-modal__head { background: #b91c1c; border-bottom: 0; border-radius: 0; }
.guest-page #no-cleaner-modal .no-cleaner-modal__head .modal-card-title { color: #fff; font-weight: 700; white-space: normal; line-height: 1.25; flex-shrink: 1; }
.guest-page #no-cleaner-modal .modal-card-body { background: #fef2f2; color: #7f1d1d; }
.guest-page #no-cleaner-modal .no-cleaner-modal__sorry { font-weight: 700; font-size: 1.05rem; margin-bottom: .6rem; }
.guest-page #no-cleaner-modal .no-cleaner-modal__foot { background: #fee2e2; border-top: 1px solid #fecaca; border-radius: 0; gap: .5rem; flex-wrap: wrap; }
.guest-page #no-cleaner-modal .no-cleaner-modal__foot .button { white-space: normal; height: auto; }
.guest-page #no-cleaner-modal .modal-card-body,
.guest-page #no-cleaner-modal .modal-card-body * { color: #7f1d1d; }
.guest-page #no-cleaner-modal .no-cleaner-modal__head .modal-card-title { color: #fff; }
.guest-page #no-cleaner-modal .button.is-danger,
.guest-page .button.is-danger[data-no-cleaner-open] { background-color: #b91c1c; border-color: #b91c1c; color: #fff; }
.guest-page #no-cleaner-modal .button.is-danger:hover,
.guest-page .button.is-danger[data-no-cleaner-open]:hover { background-color: #991b1b; }

/* Admin-Leiste im Gastportal: Simulationsmodus (App\Guest2\Portal\GuestSimulation) */
.guest-page .guest-sim .select select { font-size: .8125rem; }
.guest-page .guest-sim__banner { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .5rem 0 0; padding: .55rem .8rem; border-radius: 10px; background: #fef3c7; border: 1px solid #f59e0b; color: #78350f; font-size: .875rem; }
.guest-page .guest-sim__banner > span:nth-child(2) { flex: 1 1 18rem; }
.guest-page .guest-sim__banner strong { color: #78350f; }

/* Endreinigung ohne Putzkraft: rote Karte im Reiter Buchung (tab-booking.blade.php) */
.guest-page .card.no-cleaner-card { background: #fef2f2; border-color: #fca5a5; }
.guest-page .no-cleaner-card .guest-section-title,
.guest-page .no-cleaner-card p { color: #7f1d1d; }
.guest-page .no-cleaner-card .guest-section-title::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; margin-right: .45em; border-radius: 50%; background: #b91c1c; color: #fff; font-size: .8em; font-weight: 800; vertical-align: .1em; }
/* gesperrte Endreinigungs-Option darunter: deutlich ausgegraut */
.guest-page .guest-option-item.is-unavailable { opacity: .55; }
.guest-page .guest-option-item.is-unavailable .guest-option-label { cursor: not-allowed; }
.guest-page .guest-option-item.is-unavailable .guest-option-cleaning-note { color: #b91c1c; font-weight: 600; opacity: 1; }
.guest-page .guest-sim__blocked { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .5rem 0 0; padding: .55rem .8rem; border-radius: 10px; background: #fee2e2; border: 1px solid #ef4444; color: #7f1d1d; font-size: .875rem; }
.guest-page .guest-sim__blocked > span:nth-child(2) { flex: 1 1 18rem; }
.guest-page .guest-sim__blocked strong { color: #7f1d1d; }
/* Hinweisbalken der Simulation: eigene Zeile unter der Werkzeugleiste, damit nichts abgeschnitten wird */
.guest-page .guest-sim__banner,
.guest-page .guest-sim__blocked { white-space: normal; max-width: 100%; box-sizing: border-box; }

/* Reiter Buchung: "Vor deiner Anreise" – vier Zeilen mit Stand und hoechstens einem Knopf (tab-booking.blade.php). */
.guest-page .prearrival-card { padding: .35rem 1rem; }
.guest-page .consumption-credit-note { margin: .6rem 0 0; padding: .55rem .75rem; border-radius: 10px; background: #ecfdf3; border: 1px solid #bbf7d0; color: #166534; font-size: .92rem; font-weight: 600; }
.guest-page .departure-rating-stars { color: #f59e0b; letter-spacing: .08em; font-size: 1.1rem; }
.guest-page .departure-rating-stars span { color: #d1d5db; }
.guest-page .prearrival-card__lead { margin: .55rem 0 .15rem; color: #4b5563; font-size: .92rem; font-weight: 600; }
.guest-page .prearrival-row { display: flex; align-items: center; gap: .7rem; padding: .65rem 0; }
.guest-page .prearrival-row + .prearrival-row { border-top: 1px solid #e8eef5; }
.guest-page .prearrival-row__mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: .8rem; font-weight: 800; background: #e2e8f0; color: #475569; }
.guest-page .prearrival-row.is-open .prearrival-row__mark { background: #fee2e2; color: #b91c1c; }
.guest-page .prearrival-row.is-done .prearrival-row__mark { background: #dcfce7; color: #15803d; }
.guest-page .prearrival-row.is-pending .prearrival-row__mark { background: #fef3c7; color: #92400e; }
.guest-page .prearrival-row__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.guest-page .prearrival-row__value { color: #4b5563; font-size: .92rem; overflow-wrap: anywhere; }
.guest-page .prearrival-row__value small { color: #64748b; white-space: nowrap; }
.guest-page .prearrival-row__value small::before { content: "· "; }
.guest-page .prearrival-row__form { flex: 0 0 auto; margin: 0; }
/* width: auto gegen die Handy-Regel ".guest-page .button { width: 100% }" – der Knopf bleibt rechts in seiner Zeile. */
.guest-page .prearrival-card .prearrival-row__act { flex: 0 0 auto; width: auto; min-width: 6rem; min-height: 2.25rem; border-radius: 8px; font-weight: 700; }
@media (max-width: 600px) {
    .guest-page .prearrival-card { padding: .2rem .8rem; }
    .guest-page .prearrival-row { gap: .55rem; padding: .7rem 0; }
    .guest-page .prearrival-card .prearrival-row__act { min-width: 5.25rem; min-height: 2.5rem; padding-inline: .7rem; }
    /* Frist bzw. "freiwillig" mobil in eigener Zeile statt mitten im Umbruch */
    .guest-page .prearrival-row__value small { display: block; }
    .guest-page .prearrival-row__value small::before { content: none; }
    .guest-page .guest-next { align-items: flex-start; padding: 9px 12px; }
    .guest-page .guest-next__text { font-size: .9rem; }
}
/* Freiwillige Schritte im Aufgaben-Assistenten: die Haekchenlisten ohne eigene Kartenoptik. */
.guest-page #guest-todo-wizard .guest-options-card { margin: 0; border: 0; background: transparent; box-shadow: none; }
.guest-page #guest-todo-wizard .guest-options-card .card-content { padding: 0; background: transparent; }
.guest-page #guest-todo-wizard .bring-card { padding: 0; }

/* Abreisetag: Meldung mit den Abreiseaufgaben (#guest-departure-modal) */
.guest-page #guest-departure-modal { z-index: 10040; }
.guest-page #guest-departure-modal .guest-departure-modal__lead { font-weight: 600; margin-bottom: .7rem; }
.guest-page #guest-departure-modal .guest-departure-modal__tasks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.guest-page #guest-departure-modal .guest-departure-modal__tasks li { display: flex; align-items: flex-start; gap: .55rem; padding: .45rem .6rem; border-radius: 8px; background: #fff; border: 1px solid #d6e5f2; }
.guest-page #guest-departure-modal .guest-departure-modal__tasks li.is-done { opacity: .6; }
.guest-page #guest-departure-modal .guest-departure-modal__mark { display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; flex: 0 0 auto; border-radius: 50%; background: #0f4c81; color: #fff; font-size: .8em; font-weight: 800; }
.guest-page #guest-departure-modal .is-done .guest-departure-modal__mark { background: #15803d; }

/* Kurz vor der Anreise: Meldung mit Tuerschloss- und Parkhinweis (#guest-arrival-modal) */
.guest-page #guest-arrival-modal { z-index: 10040; }
.guest-page #guest-arrival-modal .guest-arrival-modal__lead { font-weight: 600; margin-bottom: .8rem; }
.guest-page #guest-arrival-modal .guest-arrival-modal__points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.guest-page #guest-arrival-modal .guest-arrival-modal__points li { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .7rem; border-radius: 8px; background: #fff; border: 1px solid #d6e5f2; }
.guest-page #guest-arrival-modal .guest-arrival-modal__icon { color: #0f4c81; font-size: 1.35rem; line-height: 1.2; flex: 0 0 auto; }

/* Putzkraft doch noch gefunden (Gast hatte schon selbst zugesagt): Entwarnung in Gruen */
.guest-page .card.cleaner-found-card { background: #f0fdf4; border-color: #86efac; }
.guest-page .cleaner-found-card .guest-section-title,
.guest-page .cleaner-found-card p { color: #14532d; }
.guest-page .cleaner-found-card .guest-section-title::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; margin-right: .45em; border-radius: 50%; background: #15803d; color: #fff; font-size: .8em; font-weight: 800; vertical-align: .1em; }

/* Reiter Buchung: Posten, Zusatzoptionen und Knopfzeile stehen in einer Karte (#guest-payment-card) */
.guest-page #guest-payment-card .guest-booking-part { padding: 0 20px 4px; }
.guest-page #guest-payment-card .guest-booking-part > .card-content { padding: 0; }
.guest-page #guest-payment-card > .guest-invoice-actions,
.guest-page #guest-consumption-card > .guest-invoice-actions,
.guest-page #guest-payment-card > .fine-print { padding: 0 20px 16px; margin: 0; }
.guest-page #guest-payment-card > .guest-invoice-actions,
.guest-page #guest-consumption-card > .guest-invoice-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
/* Knopfleisten in Karten (Gaeste-Daten: Speichern) */
.guest-page .guest-card-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.guest-page .guest-card-actions--outside { margin-top: .5rem; }

/* Zusatzoptionen in der Buchungskarte: Abschnitt statt zweiter Karte */
.guest-page #guest-payment-card .guest-options-card.guest-booking-part { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.guest-page #guest-payment-card .guest-options-card .card-content { padding: 0 !important; }
/* Knopfzeile der Buchungskarte: deutlich sichtbar, mit Trennlinie darueber */
.guest-page #guest-payment-card > .guest-invoice-actions,
.guest-page #guest-consumption-card > .guest-invoice-actions { padding: 14px 20px 18px; border-top: 1px solid rgba(3, 47, 90, .10); }
.guest-page #guest-payment-card > .guest-invoice-actions .button,
.guest-page #guest-consumption-card > .guest-invoice-actions .button { min-height: 2.6rem; padding-inline: 1.1rem; font-size: .95rem; font-weight: 600; }
.guest-page #guest-payment-card > .guest-invoice-actions .button.is-primary,
.guest-page #guest-consumption-card > .guest-invoice-actions .button.is-primary { box-shadow: 0 2px 8px rgba(3, 47, 90, .22); }
/* Speichern der Gaeste-Daten: gleiche Groesse wie in der Buchungskarte */
.guest-page .guest-card-actions .button { min-height: 2.6rem; padding-inline: 1.1rem; font-size: .95rem; font-weight: 600; }
/* Abstand vor "Mitbringen? Freiwillig." */
.guest-page #booking-tab-content > #guest-bring-title { margin-top: 2.5rem; }

/* Bedienhinweis unter dem Tuerschlosscode (Einstellungen -> Anreise -> Bedienhinweis) */
/* Schrift und Farbe wie die Unterzeile der anderen Karten (.info-card-sub); eingerueckt bis unter den Titeltext
   (Symbolbreite 38px + 8px Abstand der Titelzeile). */
.guest-page .doorcode-hint { display: grid; grid-template-columns: max-content 1fr; column-gap: .6rem; row-gap: .25rem; align-items: center; justify-items: start; margin-top: .35rem; padding-left: 46px; font-size: .77rem; line-height: 1.2; color: #75808d; text-align: left; }
/* Die Zeile loest sich ins Raster auf: alle Vorsaetze gleich breit, die Schritte beginnen buendig. */
.guest-page .doorcode-hint__row { display: contents; }
.guest-page .doorcode-hint__label { font-weight: 600; color: #75808d; white-space: nowrap; }
.guest-page .doorcode-hint__steps { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.guest-page .doorcode-hint__sep { color: #aab3bd; }
.guest-page .doorcode-hint__symbol { display: inline-flex; align-items: center; justify-content: center; }
.guest-page .doorcode-hint__symbol .material-symbols-rounded { font-size: 1.25em; line-height: 1; font-variation-settings: 'wght' 600; }

/* Tuerschlosscode ohne Code: Hinweis statt Ziffern (Spezifitaet wie die Ziffern-Regel der Karte) */
.guest-page .info-cards > .doorcode-grid-card .doorcode-value--empty,
.guest-page .doorcode-value--empty { font-size: .9rem; font-weight: 600; color: #75808d; letter-spacing: normal; text-align: right; }

/* Türschlosscode-Karte: immer zwei Spalten breit, Höhe nach Inhalt (der Bedienhinweis passte nicht in die
   feste Kachelhöhe und wurde abgeschnitten). Auf schmalen Breiten rutscht der Code unter den Titel.
   Zweiter Selektor wegen der Kachelhöhe, die mit [data-guest-card-order-layout] gesetzt wird. */
.guest-page .info-cards > .doorcode-grid-card,
.guest-page[data-guest-card-order-layout] .info-cards > .doorcode-grid-card {
    grid-column: span 2;
    aspect-ratio: auto;
    height: auto;
    min-height: 7.5rem;
    overflow: visible;
    flex-wrap: wrap;
    row-gap: .4rem;
    padding: 14px 16px;
}
.guest-page .info-cards > .doorcode-grid-card .doorcode-card-header { flex: 1 1 12rem; }
.guest-page .info-cards > .doorcode-grid-card .doorcode-card-body { flex: 0 1 auto; margin-left: auto; }
@container guest-infocards (max-width: 26rem) {
    .guest-page .info-cards > .doorcode-grid-card .doorcode-card-body { margin-left: 0; align-items: flex-start; }
    .guest-page .info-cards > .doorcode-grid-card .doorcode-value--empty { text-align: left; }
}

/* Endreinigungs-Hinweis ueber den Reitern: gleicher Aufbau wie "Fast geschafft!", nur in Rot bzw. Gruen */
.guest-page .guest-notice--auction.guest-notice--none { background: rgba(254, 242, 242, .95); border-color: #fca5a5; }
.guest-page .guest-notice--auction.guest-notice--none .done-banner-icon { background: #b91c1c; color: #fff; }
.guest-page .guest-notice--auction.guest-notice--none .departure-today-headline,
.guest-page .guest-notice--auction.guest-notice--none .departure-today-detail { color: #7f1d1d; }
.guest-page .guest-notice--auction.guest-notice--none .guest-notice__action { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.guest-page .guest-notice--auction.guest-notice--found { background: rgba(240, 253, 244, .95); border-color: #86efac; }
.guest-page .guest-notice--auction.guest-notice--found .done-banner-icon { background: #15803d; color: #fff; }
.guest-page .guest-notice--auction.guest-notice--found .departure-today-headline,
.guest-page .guest-notice--auction.guest-notice--found .departure-today-detail { color: #14532d; }
.guest-page .guest-notice__rated { margin: .3rem 0 .6rem; font-size: .85rem; color: #14532d; }
/* Endreinigung: ✕ zum Ausblenden (auction-notice.blade.php), oben rechts, genug Flaeche zum Antippen. */
.guest-page .guest-notice__close { flex: 0 0 auto; align-self: flex-start; margin-left: auto; width: 32px; height: 32px; max-width: 32px; max-height: 32px; min-width: 32px; min-height: 32px; background: rgba(20, 83, 45, .3); }
.guest-page .guest-notice__close:hover, .guest-page .guest-notice__close:focus { background: rgba(20, 83, 45, .45); }
/* "Überweisung gemeldet" sitzt in der Buchungskarte über der Aufstellung */
.guest-page #guest-payment-card > .payment-status-banner { margin: 14px 20px 0; }

/* Reiter Buchung: Stand als Zeichen vor der Ueberschrift statt ausgegrauter Karte.
   Erledigte Karten und gesperrte Formulare bleiben voll lesbar - halbdurchsichtig sah nach
   "kaputt" aus, und ob noch etwas zu tun ist, stand nirgends. */
.guest-page #booking-tab-content fieldset[disabled],
.guest-page #booking-tab-content .card.is-done,
/* Verbrauch / Nachzahlung steht auch im Reiter Abreise - der Haken vor der Ueberschrift zeigt den Stand. */
.guest-page #guest-consumption-card.is-done { opacity: 1; }
.guest-page .guest-head-with-status { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
/* Stand rechtsbuendig, nicht links vor der Ueberschrift (Wunsch Vermieter 19.09.2026). */
.guest-page .guest-head-with-status .guest-head-status { order: 2; margin-left: auto; }
.guest-head-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    /* Die Ueberschriften stehen in der Handschrift des Portals - der Stand soll nuechtern lesbar sein. */
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    padding: .18rem .55rem .18rem .3rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.guest-head-status__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    color: #fff;
    font-size: .72rem;
    flex-shrink: 0;
}
.guest-head-status.is-done { color: #1b6f44; background: #e6f5ec; }
.guest-head-status.is-done .guest-head-status__icon { background: #1b6f44; }

/* Zeitstrahl der Simulation (GuestSimulation::timelineHtml): Regler, genaues Feld und der Punkt,
   an dem das Portal gerade rechnet. */
.guest-sim-time { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; flex: 1 0 100%; padding-top: .45rem; border-top: 1px solid rgba(120, 53, 15, .2); }
.guest-sim-time__field { width: 12.5rem; }
.guest-sim-time__reset-form { margin: 0 0 0 auto; }
.guest-sim-time__reload .material-symbols-rounded { font-size: 1.05rem; }
.guest-sim-time__now { font-size: .82rem; color: #334155; font-weight: 600; white-space: nowrap; }
.guest-sim-time__reset[disabled] { opacity: .5; }
@media (max-width: 640px) {
    .guest-sim-time { width: 100%; }
    .guest-sim-time__now { white-space: normal; }
    .guest-sim-time__reset-form { margin-left: 0; }
}

/* Wartezustand (z. B. gemeldete Ueberweisung wird geprueft): Info, keine Warnung. */
.done-banner.done-banner--waiting { background: #f1f5f9; border-color: #cbd5e1; color: #0f2a47; }
.done-banner.done-banner--waiting .done-banner-icon { background: #475569; color: #fff; font-size: 1.15rem; }

/* Knappe/leere Vorraete bleiben sichtbar, auch wenn sie schon "geprueft" sind (Putzkraft, Tagesansicht, Gastportal). */
.ops-item--low .ops-item__label { text-decoration: none !important; color: #9a3412 !important; opacity: 1 !important; }
.ops-item--low.is-done { opacity: 1 !important; }
.ops-item__low { display: inline-flex; align-items: center; margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px;
    background: #ffedd5; color: #9a3412; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.ops-supply-lowhint { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; padding: .55rem .75rem; border-radius: 10px;
    background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; font-weight: 600; font-size: .92rem; }

/* Gaeste-Daten im Assistenten: Mitreisende */
#guest-todo-wizard .guest-todo-wizard__subhead { margin: 1.1rem 0 .2rem; font-size: 1.05rem; font-weight: 700; }
#guest-todo-wizard .guest-todo-wizard__person { border: 1px solid #e2e8f0; border-radius: 10px; padding: .6rem .8rem .2rem; margin: .6rem 0; }
#guest-todo-wizard .guest-todo-wizard__person legend { padding: 0 .4rem; font-weight: 700; font-size: .9rem; color: #334155; }

/* ==== Gastportal-Feinschliff (22.09.2026) ================================= */
/* Reiter-Leiste: kleine zweite Zeile am geschlossenen Reiter ("ab 23.09."). */
.guest-page .guest-tabs .guest-tab-sub {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.72em;
    font-weight: 600;
    opacity: 0.9;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .guest-page .guest-tabs .guest-tab-sub {
        display: block;
        margin-left: 0;
        font-size: 0.58rem;
        line-height: 1;
    }
}
.guest-page[data-guest-card-order-layout="mobile"] .guest-tabs .guest-tab-sub {
    display: block;
    margin-left: 0;
    font-size: 0.58rem;
    line-height: 1;
}

/* Smarthome-Karte ohne Strom / nicht erreichbar: keine leeren Messwerte ("–.– °C", "– %")
   und kein rotes Alarmschild - nur ein ruhiger Hinweis. Platz bleibt reserviert (kein Springen). */
.guest-page .tasmota-grid-card.is-tasmota-nopower .tasmota-tile-bottom-stack,
.guest-page .tasmota-grid-card.is-tasmota-nopower .tasmota-thermo-tile__hero-meta,
.guest-page .tasmota-grid-card.is-tasmota-nopower .tasmota-battery-indicator,
.guest-page .tasmota-grid-card.is-tasmota-nopower .tasmota-dimmer-tile__value {
    visibility: hidden;
}
.guest-page .tasmota-grid-card .tasmota-card-avail-banner.is-inactive {
    color: #52626f;
    background: rgba(241, 245, 249, 0.95);
}

/* Wetter: Platzhalter hat Aufbau und Hoehe der fertigen Kachel (Titel oben, zwei Spalten) -
   beim Nachladen springt nichts. */
.guest-page .info-cards > .weather-grid-card {
    flex-direction: column;
    padding: 12px 12px 10px;
}
.weather-widget-loading.weather-skeleton {
    display: flex;
    gap: 12px;
    flex: 1 1 auto;
    padding: 12px 0 0;
}
.weather-skeleton__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.weather-skeleton__col i,
.weather-skeleton__col b {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #e8eef5 0%, #f4f7fb 50%, #e8eef5 100%);
    background-size: 200% 100%;
    animation: weather-skeleton-shimmer 1.4s ease-in-out infinite;
}
.weather-skeleton__col i { height: 12px; width: 70%; }
.weather-skeleton__col b { height: 104px; width: 100%; }
@keyframes weather-skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .weather-skeleton__col i,
    .weather-skeleton__col b { animation: none; }
}

/* Reiter Buchung: "Bezahlen" springt zur Nachzahlung - nicht unter der klebenden Kopfzeile verschwinden. */
.guest-page #guest-consumption-card { scroll-margin-top: 140px; }
/* Nachzahlung ohne PayPal: Bankdaten zum Aufklappen. */
.guest-page .consumption-transfer {
    margin: 0 16px 16px;
}
.guest-page .consumption-transfer > summary {
    list-style: none;
    cursor: pointer;
}
.guest-page .consumption-transfer > summary::-webkit-details-marker { display: none; }
.guest-page .consumption-transfer__details {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    margin-top: 12px;
    font-size: 0.92rem;
}
.guest-page .consumption-transfer__details dt { color: #52626f; }
.guest-page .consumption-transfer__details dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Handy (375 px): nichts darf die Seite seitlich verschieben. */
@media (max-width: 600px) {
    .guest-page .payment-table .table { table-layout: auto; }
    .guest-page .payment-item-main,
    .guest-page .payment-item-meta,
    .guest-page .prearrival-row__value { overflow-wrap: anywhere; }
}
/* "90,00 € noch offen": Bulma-Tag ist inline-flex und schluckt das Leerzeichen. */
.guest-page .cost-open-badge { gap: 0.3em; }
/* Gast: Geraet nicht erreichbar (kein frischer Stand) - kein Warndreieck, keine leeren Messwerte,
   stattdessen ein ruhiger Hinweis unten auf der Karte (Text aus data-guest-unreachable, i18n). */
.guest-page .tasmota-grid-card.is-guest-unreachable:not(.is-admin-view) .tasmota-guest-offline-dot {
    display: none !important;
}
.guest-page .tasmota-grid-card.is-guest-unreachable .tasmota-tile-bottom-stack,
.guest-page .tasmota-grid-card.is-guest-unreachable .tasmota-thermo-tile__hero-meta,
.guest-page .tasmota-grid-card.is-guest-unreachable .tasmota-battery-indicator,
.guest-page .tasmota-grid-card.is-guest-unreachable .tasmota-dimmer-tile__value,
.guest-page .tasmota-grid-card.is-guest-unreachable .tasmota-switch-tile__state {
    visibility: hidden;
}
.guest-page .tasmota-grid-card.is-guest-unreachable:not(.has-tasmota-card-avail)::before {
    content: attr(data-guest-unreachable);
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    z-index: 2;
    max-width: calc(100% - 16px);
    padding: 2px 10px;
    border-radius: 8px;
    background: rgba(241, 245, 249, 0.95);
    color: #52626f;
    font-size: 0.72rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
/* Der Hinweis steht dort, wo sonst die Unterzeile ("Ein / Aus") steht. */
.guest-page .tasmota-grid-card.is-guest-unreachable:not(.has-tasmota-card-avail) .info-card-sub {
    visibility: hidden;
}