/* ── Legacy-Iframe ─────────────────────────────────────────────────────────── */
.page-legacy .main-content { padding: 0; max-width: none; width: 100%; display: flex; flex-direction: column; }
.legacy-iframe { flex: 1; width: 100%; border: none; min-height: calc(100vh - 65px); }
.page-legacy-fixed .main-wrap          { display: flex; flex-direction: column; overflow: hidden; }
.page-legacy-fixed .main-wrap > main   { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.page-legacy-fixed .legacy-iframe      { flex: 1; min-height: 0; height: 0; }
.mapping-iframe { width: 100%; height: 600px; display: block; border: none; }

/* ── Live-Indicator ────────────────────────────────────────────────────────── */
.live-indicator--right { margin-left: auto; }
.live-indicator { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700; color: #16a34a; letter-spacing: .08em; margin-right: .5rem; padding-left: .35rem; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: live-pulse 1.8s ease-in-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 60% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* ── Mailserver ────────────────────────────────────────────────────────────── */
.ms-card { display: flex; align-items: flex-start; gap: .9rem; padding: .9rem 1rem; border: 2px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s; }
.ms-card input[type=radio] { margin-top: .25rem; flex-shrink: 0; accent-color: var(--accent); width: 16px; height: 16px; }
.ms-card--active { border-color: var(--accent-yellow); background: #fff; }
.ms-card--recommended { position: relative; }
.ms-card-title { font-weight: 600; font-size: .95rem; margin-bottom: .2rem; }
.ms-card-desc { font-size: .85rem; color: var(--muted); line-height: 1.45; font-weight: 400; }
.ms-card--active .ms-card-desc { color: inherit; }
.ms-card-fields { margin-top: 1rem; padding-top: .2rem; border-top: 1px solid var(--border); }
.ms-card-fields .form-row { padding: 0; }
.ms-card-fields-header { display: flex; align-items: center; justify-content: space-between; }
.ms-card-desc code { font-size: .82rem; background: var(--body-bg); padding: 1px 4px; border-radius: 4px; }
.ms-badge { display: inline-block; font-size: .72rem; font-weight: 600; background: var(--accent-yellow); color: #fff; border-radius: 20px; padding: 2px 10px; margin-left: 20px; vertical-align: middle; margin-top: -4px; }
.ms-choice-list { display: flex; flex-direction: column; gap: 1rem; }
.ms-logo-preview { margin-bottom: 1rem; padding: .75rem; background: var(--body-bg); border-radius: 8px; display: inline-flex; align-items: center; gap: 1rem; }
.ms-logo-img { max-height: 60px; max-width: 260px; object-fit: contain; }
.ms-upload-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.ms-upload-row .form-input { max-width: 320px; }

/* ── Reinigungsplan ────────────────────────────────────────────────────────── */
.reinigung-pin-row { display: flex; align-items: center; gap: 1rem; }
.reinigung-pin { font-size: 1.2rem; font-weight: 700; letter-spacing: .05em; }
.reinigung-link-input { font-size: .85rem; }
.reinigung-qr-row { display: flex; align-items: center; gap: 1rem; margin-top: .75rem; }
.reinigung-qr-img { width: 70px; height: 70px; border-radius: 6px; border: 1px solid var(--border); }
.reinigung-preview-aside { position: sticky; top: 2rem; }
.reinigung-preview-box { border-radius: 24px; border: 1px solid var(--border); box-shadow: 0 5px 15px rgba(0,0,0,.08); overflow: hidden; background: var(--bg-white); padding: 16px; }
.reinigung-preview-frame { width: 100%; aspect-ratio: 9 / 17; border: 0; border-radius: 16px; }

/* ── Buchungslink ──────────────────────────────────────────────────────────── */
.buchungslink-preview-row { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.buchungslink-einheit-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.buchungslink-einheit-row:last-child { border-bottom: 0; }

/* ── AVS ───────────────────────────────────────────────────────────────────── */
.avs-firma-id { font-size: 1.1rem; font-weight: 700; letter-spacing: .03em; }
.avs-typ-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.avs-typ-row:last-child { border-bottom: 0; }

/* ── Buchungscode ──────────────────────────────────────────────────────────── */
.buchungscode-submit-group { display: flex; align-items: flex-end; }
.buchungscode-row { display: grid; grid-template-columns: 110px 1fr 70px 160px auto; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.buchungscode-row:last-child { border-bottom: 0; }
.buchungscode-code { font-weight: 700; letter-spacing: .05em; font-family: monospace; font-size: 1rem; }
.buchungscode-rabatt { font-weight: 600; color: var(--accent); }

/* ── Channel-Test ──────────────────────────────────────────────────────────── */
.ch-test-result { padding: .5rem 1rem 1rem; }
.ch-test-tree { background: var(--body-bg); border: 1px solid var(--border); border-radius: 6px; padding: .75rem 1rem; font-size: .82rem; font-family: 'Courier New', monospace; max-height: 500px; overflow-y: auto; }
.jt-str { color: #16a34a; }
.jt-null { color: var(--muted); }
.mapping-block-id { font-size: .75rem; color: var(--muted); font-family: 'Courier New', monospace; }

/* ── Steps ─────────────────────────────────────────────────────────────────── */
.steps-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 2rem; list-style: none; padding: 0; }
.step { display: flex; gap: 1.25rem; padding: 1.5rem 0; border-top: 1px solid var(--border); opacity: .45; }
.step--active { opacity: 1; }
.step-number { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; color: var(--text-muted, #888); }
.step--active .step-number { background: var(--accent-yellow); border-color: var(--accent-yellow); color: var(--body-text); }
.step-number--done { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.step-number--done .ti { font-size: .9rem; }
.step-body { flex: 1; min-width: 0; }
.step-title { font-weight: 700; font-size: 1rem; margin-bottom: .5rem; }

/* ── Mapping ───────────────────────────────────────────────────────────────── */
.mapping-card { margin-top: 1.5rem; margin-bottom: 1.5rem; max-width: 800px; }
.mapping-card .li-box-card-header { display: flex; justify-content: space-between; }
.mapping-card .select2-container--default .select2-selection--single { border-left: 5px solid var(--accent-yellow); }
.mapping-card .list-box li { padding: 8px 0; }
.mapping-card .li-item { background: transparent; border-radius: 0; border: none; border-top: 1px solid var(--border); }
.mapping-dropdown { border: 2px solid var(--accent-yellow); }
.mapping-col-bdc { font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; }
.mapping-col-fw  { font-weight: 600; letter-spacing: .04em; }
.mapping-col-arrow { display: flex; align-items: center; color: var(--muted); font-size: 1.4rem; flex-shrink: 0; padding-top: 8px; }
.mapping-row-room { flex-direction: row; align-items: flex-start; gap: 1rem; }
.mapping-col-left, .mapping-col-right { flex: 1; min-width: 0; align-self: flex-start; }
.mapping-col-right .mapping-room-rate-select { width: 100%; }
.form-inline-label { display: flex; align-items: center; gap: 1rem; }
.hotel-id-wrap { width: 220px; flex-shrink: 0; }
.meta--top { position: relative; top: 12px; }
.mapping-room-title { display: block; font-weight: 600; }
.mapping-meta { display: block; font-size: .78rem; color: var(--muted); margin-top: .1rem; }
.mapping-unmatched { font-size: .85rem; color: var(--muted); }
.mapping-rate-select { width: 100%; max-width: 420px; }

/* ── Portal-Karten ─────────────────────────────────────────────────────────── */
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.portal-card { border-radius: 12px; padding: 2em 1rem 1rem 1rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; background: var(--bg-white); border: 1px solid var(--border); position: relative; }
.portal-card .live-indicator { position: absolute; top: -1px; right: 20px; background: #fff; border-radius: 0 0 6px 6px; padding: 1px 8px 3px; margin: 0; font-weight: 400; font-size: .8rem; color: var(--body-text); letter-spacing: 0; }
.portal-card-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; }
.portal-card-head { display: flex; align-items: center; gap: .75rem; }
.portal-card-name { font-size: 1.1rem; font-weight: 600; }
.portal-card--booking  { background: #0c3b7c; color: #fff; border-color: transparent; }
.portal-card--booking .btn { background: #fff; color: #003580; border-color: transparent; }
.portal-card--airbnb   { background: #FF5A5F; color: #fff; border-color: transparent; }
.portal-card--airbnb .btn  { background: #fff; color: #FF5A5F; border-color: transparent; }
.portal-card--vrbo     { background: #143A74; color: #fff; border-color: transparent; }
.portal-card--vrbo .btn    { background: #fff; color: #143A74; border-color: transparent; }
.portal-card--expedia  { background: #ffc60b; color: #000; border-color: transparent; }
.portal-card--expedia .btn { background: #fff; color: #000; border-color: transparent; }

/* ── Sync-Log ──────────────────────────────────────────────────────────────── */
.log-json-row td { padding: 0 1rem .75rem; background: var(--body-bg); }
.log-json-pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: .75rem 1rem; font-size: .82rem; font-family: 'Courier New', monospace; white-space: pre-wrap; word-break: break-all; margin: 0; color: var(--body-text); width: 100%; }

/* ── Platzhalter-Seite ─────────────────────────────────────────────────────── */
.bank-input-group.form-group,
.input-addon.form-group { flex-direction: row; max-width: 500px; gap: 0; }
.input-addon.form-group .input-addon-text { min-width: 100px; }
.bank-input-group.form-group { max-width: 480px; }
.form-box--mt { margin-top: 1.5rem; }
.form-actions--mt { margin-top: 1.5rem; }

/* ── Vorlagen-Index ────────────────────────────────────────────────────────── */
.vorlagen-list .li-item--row { grid-template-columns: auto 1fr auto auto; gap: 1rem; }
.vorlagen-list .li-box-name { flex-direction: column; align-items: flex-start; gap: 0; }
.vorlagen-list .li-box-icon { display: flex; align-items: center; color: var(--muted); font-size: 1rem; }
.vorlagen-list .li-box-badge { display: flex; align-items: center; justify-content: flex-end; min-width: 70px; }
.li-box-name-sub { display: block; font-size: .8rem; font-weight: 400; margin-top: .1rem; }
.vorlagen-info .form-box > p { margin-top: 0; }
.vorlagen-info code { font-size: .8rem; background: var(--body-bg); padding: 1px 4px; border-radius: 4px; }

/* ── Vorlagen ──────────────────────────────────────────────────────────────── */
.plh-hilfe-hinweis { margin-top: 1rem; }
.anfrage-textarea { max-width: 700px; }
.anfrage-prefix { padding: .6rem .75rem; background: var(--body-bg); border: 1px solid var(--border); border-bottom: none; border-radius: 6px 6px 0 0; line-height: 1.6; }
.anfrage-prefix + .form-input { border-radius: 0 0 6px 6px; }
.vorlage-editor { display: grid; grid-template-columns: 1fr 180px; gap: 1rem; align-items: start; }
.vorlage-signatur { padding: .4rem .5rem; border-top: 1px dashed var(--border); margin-top: .25rem; }
.vorlage-editor-left { display: flex; flex-direction: column; }
.vorlage-editor-left .form-input { width: 100%; }
.trumbowyg-box, .trumbowyg-editor { background: var(--bg-white); }
.trumbowyg-button-pane { background: color-mix(in srgb, var(--body-bg) 35%, transparent) !important; border-bottom: 1px solid var(--border) !important; }
.trumbowyg-box { border: 1px solid var(--border) !important; border-radius: 6px 6px 0 6px; }
.trumbowyg-box .trumbowyg-editor { min-height: 400px !important; }
.li-box-icon .ti-file-type-pdf, .li-box-icon .ti-message { font-size: 1.5rem; }
.ti-file-type-pdf { font-size: 1.3rem; }
.vorlage-platzhalter { display: flex; flex-direction: column; gap: .75rem; }
.vorlage-platzhalter-gruppe { display: flex; flex-direction: column; gap: .3rem; }
.vorlage-platzhalter-label { font-size: .75rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.vorlage-platzhalter-btn { font-size: .75rem; padding: .2rem .45rem; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-white); color: var(--body-text); cursor: pointer; font-family: monospace; text-align: left; white-space: normal; word-break: break-all; }
.vorlage-platzhalter-btn:hover { background: var(--sidebar-hover); }

/* ── iCal-Kalendersynchronisation ─────────────────────────────────────────── */
.ical-filter-row { gap: .75rem; margin-top: -1.5rem; margin-bottom: 1.25rem; }
.ical-typ-name { display: inline-block; min-width: 160px; }
.ical-obj-sub { font-weight: 400; font-size: .85rem; margin-left: .5rem; }

.ical-item { display: grid; grid-template-columns: 50px 1fr 170px 120px 1fr; gap: .75rem; align-items: center; }
.ical-col-logo { position: relative; }
.ical-col-logo img { width: 30px; height: 30px; border-radius: 7px; vertical-align: middle; }
.ical-dot-neu { position: absolute; top: 0; right: -7px; width: 10px; height: 10px; border-radius: 50%; background: #55c0ea; border: 1.5px solid var(--bg-white); animation: ical-dot-blink 2s ease-in-out infinite; }
@keyframes ical-dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.ical-col-import { font-size: .9rem; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; }
.ical-col-status { text-align: center; }
.ical-col-export { font-size: .9rem; line-height: 1.5; }

.ical-paused { color: #ff9345; }
.ical-err-badge { background: #dc3338; color: #fff; padding: 0 5px; font-size: .75rem; line-height: 1.4; border-radius: 4px; }
.ical-no-import { display: block; margin-top: 4px; background: #ffe6d4; width: 115px; height: 10px; border-radius: 8px; }

.ical-ok { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #98cf6c; color: #fff; animation: ical-blink 3s infinite; }
.ical-ok .ti { font-size: .8rem; }
.ical-ok--error { background: #f1b448; animation: none; }
@keyframes ical-blink { 25% { background: #98cf6c; } 50% { background: #9bc383; } 75% { background: #9bc383; } }
.ical-warn { display: inline-block; padding: 0 9px; font-size: .8rem; font-weight: 700; background: #ea9d25; color: #fff; border-radius: 11px; cursor: help; }

.ical-import-preview { padding: .5rem 1rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.ical-chip { background: #dce4ee; color: #333; padding: 4px 10px; font-size: .85rem; border-top-left-radius: 20px; border-bottom-right-radius: 20px; white-space: nowrap; }
.ical-chip em { font-style: normal; color: var(--muted); margin-left: .4rem; }
.ical-chip .ti { font-size: .75rem; }
[data-theme="dark"] .ical-chip { background: var(--surface-2); color: var(--body-text); }

/* Kanal-Auswahl */
.ical-kanal-grid { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1rem; }
.ical-kanal-sep { flex-basis: 100%; padding-top: .75rem; font-size: .85rem; color: var(--muted); }
.ical-kanal-box { min-width: 200px; }
.ical-kanal-box button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-white); color: var(--body-text); cursor: pointer; font-size: .9rem; transition: opacity .2s ease; }
.ical-kanal-box button:hover { opacity: .6; }
.ical-kanal-box img { width: 22px; height: 22px; border-radius: 4px; }
.ical-kanal-box--benutzt { display: flex; align-items: center; gap: .6rem; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; opacity: .3; font-size: .9rem; }

/* Verbindungs-Detail */
.ical-h-logo { width: 24px; height: 24px; border-radius: 6px; vertical-align: middle; margin-right: .5rem; }
.ical-hinweis-orange { color: #ea9d25; font-size: .9rem; }
.ical-hinweis-rot { color: #ff2828; }
.ical-link-anzeige { background: var(--surface-2); font-size: .9rem; padding: 7px 12px; border-radius: 5px; width: max-content; max-width: 100%; word-wrap: break-word; }
.ical-import-form input { max-width: 600px; }
.ical-export-row input { max-width: 600px; }

/* Mailserver: SMTP-Debug */
.ms-debug { border: 1px dashed var(--border); border-radius: 8px; overflow: hidden; }
.ms-debug summary { padding: .5rem .85rem; font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; }
.ms-debug pre { margin: 0; padding: .75rem 1rem; background: var(--body-bg); font-size: .75rem; line-height: 1.5; overflow-x: auto; max-height: 380px; white-space: pre-wrap; }