/* views.css — Login, Kacheln, Vertrag, Unterlagen, Konto */

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-wrap { max-width: 460px; margin: 0 auto; padding-top: var(--space-4); }
.login-hero { text-align: center; margin-bottom: var(--space-5); }
.login-hero h1 { font-size: 26px; margin-top: var(--space-3); }
.login-hero p { color: var(--text-muted); margin-top: var(--space-2); }
.login-card { padding: 28px 24px; }
.login-card .explain { font-size: 14px; color: var(--text-muted); margin: 0 0 var(--space-4); }
.login-foot { text-align: center; color: var(--text-muted); font-size: 14px; margin-top: var(--space-5); padding: 0 var(--space-2); }
@media (max-width: 479px) { .login-card { padding: 22px 18px; } }

/* Magic-Link ungültig */
.magic-invalid { max-width: 460px; margin: var(--space-6) auto; text-align: center; }
.magic-invalid h1 { font-size: 22px; margin-bottom: var(--space-3); }
.magic-invalid p { color: var(--text-muted); margin-bottom: var(--space-5); }
/* E-Mail bestätigt + Passwort direkt setzen (views/email.js, v1.11.0): Formular linksbündig in der zentrierten Karte */
.magic-invalid.email-ok { max-width: 520px; }
.magic-invalid.email-ok .banner { text-align: left; }
.email-pw { text-align: left; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.email-pw h2 { font-size: 18px; margin: 0 0 var(--space-2); }
.email-pw p { margin-bottom: var(--space-3); }
.email-pw .btn-block { margin-top: var(--space-3); }

/* ── Vertragskacheln ───────────────────────────────────────────────────── */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 767px) { .kacheln { grid-template-columns: 1fr; } }

.kachel {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(50,65,88,0.05);
  padding: 18px 18px 16px;
  min-width: 0;
}
.kachel.is-prio { border-color: rgba(184,134,11,0.45); box-shadow: 0 0 0 1px rgba(184,134,11,0.25), var(--shadow-card); }
.kachel.is-danger { border-color: rgba(192,57,43,0.45); box-shadow: 0 0 0 1px rgba(192,57,43,0.25), var(--shadow-card); }
.kachel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; }
.kachel-top .eyebrow { font-size: 10px; }
.kachel h2 { font-size: 18px; line-height: 1.3; word-break: break-word; }
.kachel .apartments { color: var(--navy-700); font-size: 14px; }
.kachel .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.kachel .fact { min-width: 0; }
.kachel .fact .k { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.kachel .fact .v { display: block; font-size: 15px; font-weight: 600; word-break: break-word; }
.kachel .fact.wide { grid-column: span 2; }
.kachel-foot { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: auto; padding-top: var(--space-2); }
.kachel-foot .btn { flex: 1 1 140px; }
.kachel .saldo { color: var(--danger); font-weight: 700; }

/* ── Vertrag ───────────────────────────────────────────────────────────── */
.vertrag-kopf { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.vertrag-kopf .zeile { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.vertrag-kopf h1 { font-size: var(--fs-title); }
.vertrag-kopf .zeitraum { font-size: 16px; color: var(--navy-700); }
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--navy-600); font-weight: 600; font-size: 14px; }
.back-link svg { width: 18px; height: 18px; }

.apartment-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.apartment-row:last-child { border-bottom: 0; }
.apartment-row .l { min-width: 0; }
.apartment-row .l small { display: block; color: var(--text-muted); font-size: 13px; }
.apartment-row .r { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
.total-row { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); margin-top: var(--space-2); border-top: 2px solid var(--navy-900); font-weight: 700; font-size: 17px; }

/* Vertragstext vom Server — eigener Scope, nur hier horizontal scrollbar. */
.vertrag-html {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy-900);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  max-width: 100%;
}
.vertrag-html * { max-width: 100%; box-sizing: border-box; }
/* ── F1 ── Vertragstext als Dokument im sandbox-iframe (srcdoc, PDF-Optik) */
.vertrag-frame { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); overflow: hidden; max-width: 100%; }
.vertrag-iframe { width: 100%; border: 0; display: block; }
.apartment-row .r small { display: block; color: var(--text-muted); font-size: 12px; font-weight: 400; }
.kachel .fact .zusatz { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.login-logo { height: 28px; width: auto; display: block; margin: 0 auto var(--space-3); }
.brand-text { font-weight: 700; font-size: 16px; color: var(--navy-900); }
.vertrag-html img { height: auto; }
.vertrag-html table { width: 100% !important; border-collapse: collapse; }
.vertrag-html td, .vertrag-html th { vertical-align: top; word-break: break-word; }
.vertrag-html p { margin: 0 0 0.6em; }
.vertrag-html h1, .vertrag-html h2, .vertrag-html h3 { margin: 1em 0 0.4em; line-height: 1.3; }
.vertrag-html h1 { font-size: 20px; }
.vertrag-html h2 { font-size: 17px; }
.vertrag-html h3 { font-size: 15px; }
.vertrag-html ul, .vertrag-html ol { list-style: initial; padding-left: 1.4em; margin: 0 0 0.6em; }
.vertrag-html ol { list-style: decimal; }
.vertrag-html a { color: var(--navy-600); text-decoration: underline; }
@media (max-width: 479px) { .vertrag-html { padding: var(--space-3); font-size: 13px; } }

.bestaetigen-box { border: 2px solid var(--akzent-500); }
.bestaetigen-box .check-row { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: var(--space-3) 0; }
.erfolg { text-align: center; padding: 40px 16px; }
.erfolg .mark { width: 72px; height: 72px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 0 auto var(--space-4); }
.erfolg .mark svg { width: 36px; height: 36px; }
.erfolg h1 { font-size: 22px; margin-bottom: var(--space-2); }
.erfolg p { color: var(--text-muted); margin-bottom: var(--space-5); }
.erfolg .btn { margin: 4px; }

/* ── Rechnungen (P2) ───────────────────────────────────────────────────── */
.saldo-card { display: flex; flex-direction: column; gap: 6px; border-left: 4px solid var(--navy-600); }
.saldo-card.is-danger { border-left-color: var(--danger); background: var(--danger-bg); }
.saldo-card.is-danger .saldo-wert, .saldo-card.is-danger .saldo-label { color: var(--danger); }
.saldo-card.is-ok { border-left-color: var(--ok); }
.saldo-card.is-ok .saldo-label { color: var(--ok); }
.saldo-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--navy-700); }
.saldo-label svg { width: 18px; height: 18px; }
.saldo-wert { font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; word-break: break-word; }
@media (max-width: 479px) { .saldo-wert { font-size: 24px; } }

.rechnungen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 767px) { .rechnungen { grid-template-columns: 1fr; } }
.rechnungen.kompakt { grid-template-columns: 1fr; gap: var(--space-3); }
.rechnung {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card);
  border: 1px solid rgba(50,65,88,0.05); padding: 18px 18px 16px; min-width: 0;
}
.rechnungen.kompakt .rechnung { box-shadow: none; border: 1px solid var(--border); padding: 14px; }
.rechnung.is-danger { border-color: rgba(192,57,43,0.45); box-shadow: 0 0 0 1px rgba(192,57,43,0.25), var(--shadow-card); }
.rechnung.is-paid { opacity: 0.85; }
.rechnung-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; }
.rechnung-top .eyebrow { font-size: 11px; letter-spacing: 0.12em; }
.rechnung h2 { font-size: 16px; line-height: 1.35; word-break: break-word; margin: 0; }
.rechnung-betrag { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rechnung-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-small); color: var(--text-muted); }
.rechnung-meta .danger { color: var(--danger); font-weight: 700; }
.rechnung-meta .bezug { color: var(--navy-600); text-decoration: underline; text-underline-offset: 2px; min-height: 24px; display: inline-flex; align-items: center; }
.rechnung-foot { display: flex; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-2); }
.rechnung-foot .btn { flex: 1 1 120px; }
.rechnung-foot .btn.active { border-color: var(--navy-800); background: rgba(50,65,88,0.06); }

.badge-r-offen        { background: var(--info-bg);    color: var(--info); }
.badge-r-ueberfaellig { background: var(--danger-bg);  color: var(--danger); }
.badge-r-bezahlt      { background: var(--ok-bg);      color: var(--ok); }
.badge-r-storniert    { background: #d9dbe0;           color: #3a4150; }
.badge-r-entwurf      { background: var(--neutral-bg); color: var(--neutral); }
.badge-r-unbekannt    { background: var(--neutral-bg); color: var(--neutral); }

/* Überweisungsdaten (aufklappbar) */
.bank-panel { border-top: 1px solid var(--border); padding-top: var(--space-3); margin-top: var(--space-1); }
.copy-rows { display: flex; flex-direction: column; }
.copy-row { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.copy-row:last-child { border-bottom: 0; }
.copy-body { flex: 1 1 auto; min-width: 0; }
.copy-body .k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.copy-body .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-all; }
.btn-copy { flex: 0 0 auto; padding: 8px 12px; min-width: var(--tap); }
@media (max-width: 479px) { .btn-copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) 0 0; text-align: center; }
.qr-wrap { width: 200px; max-width: 100%; aspect-ratio: 1; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; }
.qr-wrap svg, .qr-wrap img { width: 100%; height: 100%; display: block; }

/* Vermerk / Projekt */
.vermerk { border-top: 1px solid var(--border); padding-top: var(--space-3); margin-top: var(--space-1); display: flex; flex-direction: column; gap: 6px; }
.vermerk .k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.vermerk .v { font-size: 15px; word-break: break-word; }
.vermerk-row { display: flex; gap: var(--space-2); }
.vermerk-row .input { flex: 1 1 auto; min-width: 0; }
.vermerk-row .btn { flex: 0 0 auto; }
@media (max-width: 479px) { .vermerk-row { flex-direction: column; } .vermerk-row .btn { width: 100%; } }

/* ── Konto ─────────────────────────────────────────────────────────────── */
.konto-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.konto-head .avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--akzent-500); color: var(--navy-900); display: grid; place-items: center; font-weight: 700; font-size: 20px; flex: 0 0 auto; }
.konto-head .name { font-weight: 600; font-size: 18px; word-break: break-word; }
.konto-head .mail { color: var(--text-muted); font-size: 14px; word-break: break-all; }

/* ── P5 Konto: Anmeldung (E-Mail/Passwort), Login-Umschalter, Passwort-Stärke ── */
.login-switch { margin-bottom: var(--space-4); }
.login-links { display: flex; justify-content: center; margin-top: var(--space-2); }
.login-links .btn-link { min-height: var(--tap); }
.konto-block { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.konto-block:first-of-type { border-top: 0; padding-top: 0; }
.konto-block h3 { font-size: 15px; margin: 0 0 var(--space-2); }
.konto-line { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-height: 28px; }
.konto-value { font-weight: 600; word-break: break-all; }
.konto-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.konto-actions .btn { min-height: var(--tap); }
.konto-block form { margin-top: var(--space-2); }
.konto-block .banner { margin: var(--space-2) 0; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }
.pw-meter span { height: 6px; border-radius: 3px; background: var(--sand-100); transition: background 0.2s; }
.pw-meter.is-1 span:nth-child(-n+1) { background: var(--danger); }
.pw-meter.is-2 span:nth-child(-n+2) { background: var(--warn); }
.pw-meter.is-3 span:nth-child(-n+3) { background: var(--ok); }
.pw-meter.is-4 span { background: var(--ok); }
@media (max-width: 479px) {
  .card-head .konto-actions { width: 100%; }
  .card-head .konto-actions .btn { flex: 1 1 100%; }
}

/* ── P4 Gast: Check-in-Button + Gästeseite ─────────────────────────────── */
.btn-checkin { color: #fff; border-color: transparent; font-weight: 700; }
.btn-checkin.is-gruen { background: var(--ok); animation: kp-pulse-gruen 1.8s ease-in-out infinite; }
.btn-checkin.is-gruen:hover { background: #27784b; }
.btn-checkin.is-rot { background: var(--danger); animation: kp-pulse-rot 1.3s ease-in-out infinite; }
.btn-checkin.is-rot:hover { background: #a93226; }
.btn-checkin[disabled] { animation: none; }
@keyframes kp-pulse-gruen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,139,87,0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(46,139,87,0); }
}
@keyframes kp-pulse-rot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.6); transform: scale(1); }
  50%      { box-shadow: 0 0 0 10px rgba(192,57,43,0); transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-checkin, .btn-checkin.is-gruen, .btn-checkin.is-rot { animation: none; transform: none; }
  .btn-checkin.is-gruen { box-shadow: 0 0 0 3px rgba(46,139,87,0.35); }
  .btn-checkin.is-rot   { box-shadow: 0 0 0 3px rgba(192,57,43,0.4); }
}
.checkin-done { flex: 1 1 100%; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--ok); font-weight: 600; }
.checkin-done svg { width: 14px; height: 14px; }
.gast-block .kachel-foot { margin-top: 0; }

.gast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 767px) { .gast-grid { grid-template-columns: 1fr; } }
.gast-card { min-width: 0; }
.gast-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); color: var(--navy-700); }
.gast-card-head h2 { margin-bottom: 0; }
.gast-card-head svg { width: 20px; height: 20px; flex: 0 0 auto; }
.gast-card .prose p { margin: 0 0 0.6em; word-break: break-word; }
.gast-card .prose p:last-child { margin-bottom: 0; }
.gast-card .btn { margin-top: var(--space-3); }
.gast-card .copy-rows .btn, .gast-card .banner { margin-top: 0; }
.gast-card .banner { margin-top: var(--space-3); margin-bottom: 0; }
.gast-card .dl { font-size: 17px; font-weight: 600; }
.code-big {
  margin-top: var(--space-3);
  font-size: 34px; font-weight: 700; letter-spacing: 0.14em; font-variant-numeric: tabular-nums;
  text-align: center; padding: 14px 12px; background: var(--sand-100); border-radius: var(--radius-sm);
  word-break: break-all; color: var(--navy-900);
}
@media (max-width: 479px) { .code-big { font-size: 28px; } }

/* ── P3 Verlängerung: Anfrage-Formular, Preisvorschau, Status auf Kachel/Detail ── */
.verl-status { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info); flex-wrap: wrap; }
.verl-status svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.verl-status.is-angenommen { background: var(--ok-bg); color: var(--ok); }
.verl-status.is-abgelehnt { background: var(--danger-bg); color: var(--danger); }
.verl-status .begruendung { flex-basis: 100%; font-weight: 400; font-size: 13px; color: var(--text); white-space: pre-wrap; }
.verl-vorschau { min-height: 44px; }
.verl-vorschau-box { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--white); display: flex; flex-direction: column; gap: 6px; }
.verl-vorschau-box .row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 15px; }
.verl-vorschau-box .row .k { color: var(--text-muted); }
.verl-vorschau-box .row .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.verl-vorschau-box .row.total { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; font-size: 17px; }
.verl-vorschau-box .row.total .v { font-weight: 700; }
.verl-vorschau-box .row.small { font-size: 13px; }
.verl-vorschau-box .hinweis { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 479px) { .verl-vorschau-box .row { flex-direction: column; gap: 2px; } .verl-vorschau-box .row .v { text-align: left; } }

/* ── J Vertragstext nativ ── Parteien-Karte + Vertragsbausteine als Portal-Abschnitte */
.vt-parteien-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 767px) { .vt-parteien-grid { grid-template-columns: 1fr; } }
.vt-partei { min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--sand-50); }
.vt-partei-k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-700); font-weight: 700; margin-bottom: 8px; }
.vt-partei-z { font-size: 15px; line-height: 1.5; word-break: break-word; }
.vt-partei-z:first-of-type .v { font-weight: 600; }
.vt-partei-z .k { color: var(--text-muted); margin-right: 6px; }
.vt-partei-z .k::after { content: ':'; }

.vt-text .vt-abschnitt { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.vt-text .vt-abschnitt:first-of-type { border-top: 0; padding-top: var(--space-2); }
.vt-text .vt-abschnitt:last-child { padding-bottom: 0; }
.vt-text .vt-h { font-size: 16px; font-weight: 600; color: var(--navy-900); letter-spacing: 0; text-transform: none; margin: 0 0 var(--space-2); line-height: 1.35; }
.vt-block { font-size: 15px; line-height: 1.6; color: var(--text); max-width: 100%; word-break: break-word; }
.vt-block > :first-child { margin-top: 0; }
.vt-block > :last-child { margin-bottom: 0; }
.vt-block p { margin: 0 0 0.7em; }
.vt-block h1, .vt-block h2, .vt-block h3, .vt-block h4 { font-size: 15px; font-weight: 600; margin: 1em 0 0.4em; line-height: 1.35; }
.vt-block ul, .vt-block ol { margin: 0 0 0.7em; padding-left: 1.4em; list-style: disc; }
.vt-block ol { list-style: decimal; }
.vt-block li { margin: 0.25em 0; }
.vt-block a { color: var(--navy-600); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.vt-block strong, .vt-block b { font-weight: 600; }
.vt-block hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-3) 0; }
.vt-block sup { font-size: 0.75em; }
.vt-block .contract-subtitle { color: var(--text-muted); }
.vt-block .fn { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 0.3em; }
.vt-block .bank-box { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--sand-50); margin: 0.6em 0; }
.vt-table { max-width: 100%; margin: 0.4em 0 0.8em; }
.vt-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vt-table th, .vt-table td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.vt-table th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy-700); background: var(--sand-100); }
.vt-table td:not(:first-child) { font-variant-numeric: tabular-nums; }
.vt-table .payment-table th:not(:first-child), .vt-table .payment-table td:not(:first-child),
.vt-table .apt-list-table td:not(:first-child) { text-align: right; white-space: nowrap; }
.vt-table .total-row td { font-weight: 700; border-top: 2px solid var(--navy-900); border-bottom: 0; }
.vt-table .party-table td:first-child { color: var(--text-muted); width: 40%; }
.vt-table .party-table td { border-bottom: 0; padding: 4px 0; }
.vt-sig-hinweis { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--space-3); padding: 10px 12px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info); font-size: var(--fs-small); line-height: 1.5; }
.vt-sig-hinweis svg { flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 767px) {
  .vt-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vt-table .party-table td:first-child { width: auto; }
}
@media (max-width: 479px) {
  .vt-block { font-size: 15px; }
  /* Mehrspaltige Tabellen (Zahlungsplan, Objekte) bleiben scrollbar; Label/Wert-Tabellen stapeln */
  .vt-table .party-table, .vt-table .party-table tbody, .vt-table .party-table tr, .vt-table .party-table td { display: block; width: 100%; }
  .vt-table .party-table tr { padding: 6px 0; border-bottom: 1px solid var(--border); }
  .vt-table .party-table tr:last-child { border-bottom: 0; }
  .vt-table .party-table td { padding: 0; }
  .vt-table .party-table td:first-child { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
}

/* ── G ── Exposé als Listing (#/expose/<objekt_id>, views/expose.js) ─────── */
.x-page { max-width: var(--content-max); margin: 0 auto; }
.x-galerie { margin-bottom: var(--space-4); }
.x-galerie-main {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden; background: var(--sand-100);
  aspect-ratio: 16 / 9; max-height: 560px;
}
.x-galerie-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-galerie-count {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(26,35,52,0.78); color: var(--sand-50); font-size: 13px; font-weight: 600;
}
.x-galerie-leer {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 16 / 9; max-height: 320px; border-radius: var(--radius); background: var(--sand-100);
  color: var(--text-muted); font-size: 14px; text-align: center; padding: var(--space-4);
}
.x-galerie-strip {
  display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: thin;
}
.x-thumb {
  flex: 0 0 auto; width: 96px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--sand-100); cursor: pointer; scroll-snap-align: start; opacity: 0.8; transition: opacity .15s, border-color .15s;
}
.x-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-thumb.active, .x-thumb:hover { opacity: 1; border-color: var(--akzent-500); }
.x-thumb:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; }
@media (max-width: 479px) { .x-galerie-main { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); } .x-thumb { width: 72px; height: 56px; } }

.x-head { margin-bottom: var(--space-5); }
.x-head h1 { font-size: var(--fs-title); margin: 4px 0 6px; }
.x-ort { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 14px; margin-bottom: var(--space-3); }
.x-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--navy-800); }
.x-fact { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; }
.x-fact svg { color: var(--navy-600); flex: 0 0 auto; }

.x-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--space-4); align-items: start; }
.x-col-text { min-width: 0; }
.x-ausstattung { position: sticky; top: calc(var(--topnav-h) + var(--safe-t) + 12px); }
@media (max-width: 767px) { .x-grid { grid-template-columns: 1fr; } .x-ausstattung { position: static; } }

.x-page .card h2 { display: flex; align-items: center; gap: 8px; }
.x-page .card h2 svg { color: var(--navy-600); flex: 0 0 auto; }
.x-page .prose p { margin: 0 0 0.7em; line-height: 1.6; word-break: break-word; }
.x-page .prose p:last-child { margin-bottom: 0; }
.x-service p { color: var(--text-muted); font-size: 14px; margin-bottom: var(--space-3); line-height: 1.55; }
.x-service-liste, .x-aus-liste, .x-betten { list-style: none; margin: 0; padding: 0; }
.x-service-liste li, .x-aus-liste li { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: 14px; line-height: 1.45; }
.x-service-liste svg, .x-aus-liste svg { color: var(--ok); flex: 0 0 auto; margin-top: 2px; }
.x-aus-gruppe { margin-top: var(--space-3); }
.x-aus-gruppe:first-of-type { margin-top: 0; }
.x-aus-liste li small { display: block; width: 100%; color: var(--text-muted); font-size: 12px; margin-left: 24px; }
.x-aus-liste li { flex-wrap: wrap; }
.x-ausstattung .btn-block { margin-top: var(--space-3); }

.x-raeume { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.x-raum { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--sand-50); }
.x-raum-name { font-weight: 600; font-size: 15px; }
.x-raum-typ { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.x-betten { margin-top: 8px; }
.x-betten li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--navy-800); padding: 2px 0; }
.x-betten svg { color: var(--navy-600); }

.x-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); align-items: start; }
.x-info-grid .card { margin-bottom: 0; }
.x-info-grid .card .btn { margin-top: var(--space-3); }
.x-info-grid + .card { margin-top: var(--space-4); }
.x-kontakt-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
@media (max-width: 479px) { .x-kontakt-aktionen .btn { width: 100%; } }

/* Lightbox */
.x-noscroll { overflow: hidden; }
.x-lightbox {
  position: fixed; inset: 0; z-index: calc(var(--z-toast) - 1); background: rgba(10,14,22,0.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--safe-t) + 56px) 12px calc(var(--safe-b) + 48px);
}
.x-lightbox-stage { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.x-lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-xs); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.x-lightbox-cap { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 12px); text-align: center; color: var(--slate-100); font-size: 13px; padding: 0 16px; }
.x-lb-btn {
  position: absolute; width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; cursor: pointer;
}
.x-lb-btn:hover, .x-lb-btn:focus-visible { background: rgba(255,255,255,0.28); outline: none; }
.x-lb-close { top: calc(var(--safe-t) + 12px); right: 12px; }
.x-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.x-lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) { .x-lb-prev, .x-lb-next { top: auto; bottom: calc(var(--safe-b) + 40px); transform: none; } }

/* ── Betreiber 10.10.2026 ── Gästeseite: Schlüsselbox-Karte ganz oben (Code + Anleitung + Video) ── */
.gast-hero { max-width: 720px; margin: 0 auto var(--space-4); border: 2px solid var(--akzent-500); box-shadow: 0 0 0 1px rgba(127,155,214,0.25), var(--shadow-card); }
.gast-hero .gast-card-head { justify-content: center; }
.gast-hero .gast-card-head h2 { font-size: 20px; }
.gast-hero-sub { text-align: center; margin: -6px 0 var(--space-3); }
.gast-hero-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; text-align: center; margin-top: var(--space-2); }
.gast-hero .code-big { margin-top: 6px; font-size: 44px; letter-spacing: 0.18em; padding: 18px 12px; background: var(--navy-900); color: var(--sand-50); }
.gast-hero .copy-row { min-height: var(--tap); }
.gast-hero .copy-row .btn { margin-top: 0; }
.gast-hero-bis { text-align: center; margin-top: var(--space-2); }
.gast-hero .banner { margin-top: var(--space-2); margin-bottom: 0; }
.gast-hero-h3 { margin-top: var(--space-4); }
.gast-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: var(--space-3); border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.gast-video iframe, .gast-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 767px) { .gast-hero { max-width: none; } }
@media (max-width: 479px) {
  .gast-hero .code-big { font-size: 34px; letter-spacing: 0.14em; padding: 14px 10px; }
  .gast-video { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); width: auto; border-radius: 0; }
}

/* ── Betreiber 10.10.2026 ── „Meine Buchungen": abgeschlossene Aufenthalte klein + grau am Ende ── */
.kacheln-done-titel { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin: var(--space-6) 0 var(--space-3); }
.kacheln.kacheln-done { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 1023px) { .kacheln.kacheln-done { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .kacheln.kacheln-done { grid-template-columns: 1fr; } }
.kachel.is-done { background: var(--sand-100); box-shadow: none; border-color: var(--border); padding: 12px 14px 12px; gap: 8px; color: var(--text-muted); }
.kachel.is-done h2 { font-size: 15px; color: var(--navy-700); }
.kachel.is-done .kachel-top .eyebrow { color: var(--text-muted); }
.kachel.is-done .apartments, .kachel.is-done .kachel-sub { font-size: 13px; color: var(--text-muted); }
.kachel.is-done .facts { gap: 4px 10px; }
.kachel.is-done .fact .k { font-size: 10px; }
.kachel.is-done .fact .v { font-size: 13px; color: var(--navy-700); }
.kachel.is-done .badge { background: var(--neutral-bg); color: var(--neutral); }
.kachel.is-done .btn { font-size: 12px; padding: 6px 12px; letter-spacing: 0.04em; }
.kachel.is-done .btn-primary { background: transparent; color: var(--navy-800); border-color: rgba(50,65,88,0.3); }
.kachel.is-done .checkin-done { color: var(--text-muted); }

/* ── Betreiber 10.10.2026 ── Rechnungen als Liste (eine Zeile je Rechnung, wie im Intranet) ── */
.btn-sm { padding: 6px 12px; font-size: 12px; letter-spacing: 0.04em; }
.btn.active { border-color: var(--navy-800); background: rgba(50,65,88,0.06); }
.rl-card { padding: 0; overflow: hidden; }
.rl-row {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) 125px 120px 120px auto;
  gap: 6px 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); min-width: 0;
}
.rl-row:last-child { border-bottom: 0; }
.rl-row.rl-head { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; background: var(--sand-50); padding: 10px 18px; }
.rl-row.is-danger { background: rgba(192,57,43,0.05); box-shadow: inset 3px 0 0 var(--danger); }
.rl-row.is-done .rl-nr, .rl-row.is-done .rl-titel, .rl-row.is-done .rl-betrag-haupt, .rl-row.is-done .rl-datum-haupt { color: var(--text-muted); font-weight: 500; }
.rl-nr { font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-all; min-width: 0; }
.rl-bez { min-width: 0; }
.rl-titel { font-weight: 600; word-break: break-word; line-height: 1.35; }
.rl-sub { font-size: var(--fs-small); color: var(--text-muted); word-break: break-word; }
.rl-sub .bezug { color: var(--navy-600); text-decoration: underline; text-underline-offset: 2px; }
.rl-datum-haupt, .rl-betrag-haupt { font-variant-numeric: tabular-nums; }
.rl-betrag { text-align: right; }
.rl-betrag-haupt { font-weight: 700; font-size: 15px; }
.rl-datum-sub { font-size: 12px; color: var(--text-muted); }
.rl-datum-sub.danger { color: var(--danger); font-weight: 600; }
.rl-status { min-width: 0; }
.rl-aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rl-extra { grid-column: 1 / -1; min-width: 0; }
.rl-extra .bank-panel, .rl-extra .vermerk { margin-top: 0; }
.rl-nr, .rl-bez, .rl-datum, .rl-betrag, .rl-status, .rl-aktionen { grid-area: auto; }
@media (max-width: 1023px) {
  .rl-row.rl-head { display: none; }
  .rl-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "nr status betrag" "bez bez bez" "datum datum akt" "extra extra extra";
    gap: 4px 12px; padding: 12px 16px;
  }
  .rl-nr { grid-area: nr; } .rl-status { grid-area: status; } .rl-betrag { grid-area: betrag; }
  .rl-bez { grid-area: bez; } .rl-datum { grid-area: datum; } .rl-aktionen { grid-area: akt; } .rl-extra { grid-area: extra; }
  .rl-datum { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
}
@media (max-width: 767px) {
  .rl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nr status" "bez bez" "datum betrag" "akt akt" "extra extra"; }
  .rl-datum { flex-direction: column; gap: 0; }
  .rl-aktionen { justify-content: flex-start; margin-top: 4px; }
  .rl-aktionen .btn { flex: 1 1 120px; }
  .rl-betrag-haupt { font-size: 16px; }
}

/* Hero-Karte: Kopieren-Knopf unter dem großen Code (kein zweiter Code-Text) */
.gast-hero-copyrow { display: flex; justify-content: center; margin: var(--space-2) 0 var(--space-1); }
.gast-hero-copyrow .btn { min-height: 44px; }

/* ── Schlüsselverlust (schluessel.js) ── Zahlungs-Overlay, Bestätigungsdialog, Ersatz-Schlüsselbox ── */
.sv-noscroll { overflow: hidden; }
.sv-overlay {
  position: fixed; inset: 0; z-index: calc(var(--z-toast) - 1);
  height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: rgba(26,35,52,0.78); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(var(--safe-t) + 24px) 16px calc(var(--safe-b) + 24px);
}
.sv-card {
  width: 100%; max-width: 560px; margin: auto;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lift);
  border: 2px solid var(--akzent-500); padding: 24px; min-width: 0;
}
.sv-card-confirm { max-width: 460px; }
.sv-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-3); }
.sv-head-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--danger-bg); color: var(--danger); display: grid; place-items: center; flex: 0 0 auto; }
.sv-head-ico.is-info { background: var(--info-bg); color: var(--info); }
.sv-head h2 { font-size: 20px; margin: 0; line-height: 1.25; }
.sv-head h2:focus { outline: none; }
.sv-text { font-size: 14px; color: var(--text-muted); margin-bottom: var(--space-4); line-height: 1.55; }
.sv-facts { margin-bottom: var(--space-4); font-size: 15px; }
.sv-betrag { text-align: center; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--sand-50); margin-bottom: var(--space-4); }
.sv-betrag-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.sv-betrag-wert { font-size: 30px; font-weight: 700; color: var(--navy-900); font-variant-numeric: tabular-nums; line-height: 1.2; margin: 4px 0 2px; }
.sv-pay { margin-bottom: var(--space-3); }
.sv-pe { width: 100%; margin-bottom: var(--space-3); }
.sv-pe:empty { display: none; margin: 0; }
.sv-status .loading { padding: 20px 0; }
.sv-status .banner { margin-bottom: var(--space-3); }
.sv-status .banner .btn { display: flex; width: 100%; }
.sv-error { color: var(--danger); font-size: 14px; background: var(--danger-bg); padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); word-break: break-word; }
.sv-alt { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.sv-foot { margin-top: var(--space-3); text-align: center; }
.sv-confirm { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.sv-confirm-titel { font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--navy-900); margin-bottom: var(--space-2); }
.sv-confirm-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.sv-confirm-actions .btn { flex: 1 1 160px; }
.sv-erfolg { text-align: center; }
.sv-erfolg h2 { font-size: 20px; margin-bottom: var(--space-2); }
.sv-erfolg .sv-text { margin-bottom: var(--space-3); }
.sv-erfolg-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 0 auto var(--space-3); }
.sv-erfolg .code-big.sv-code { margin: 6px 0 var(--space-3); font-size: 40px; letter-spacing: 0.18em; padding: 16px 12px; background: var(--navy-600); color: var(--sand-50); }
.sv-overlay .btn { min-height: var(--tap); }
@media (max-width: 479px) {
  .sv-overlay { padding: 0; align-items: stretch; }
  .sv-card { max-width: none; min-height: 100dvh; border-radius: 0; border-width: 4px 0 0; margin: 0; padding: calc(var(--safe-t) + 20px) 16px calc(var(--safe-b) + 28px); }
  .sv-card-confirm { min-height: 0; margin-top: auto; border-radius: var(--radius) var(--radius) 0 0; border-width: 2px 0 0; }
  .sv-betrag-wert { font-size: 26px; }
  .sv-erfolg .code-big.sv-code { font-size: 32px; letter-spacing: 0.14em; }
}

/* Ersatz-Schlüsselbox: zweite Hero-Karte unter der Schlüsselbox (gast.js) */
.gast-hero.gast-hero-ersatz { border-color: var(--navy-600); box-shadow: 0 0 0 1px rgba(63,111,136,0.25), var(--shadow-card); }
.gast-hero-ersatz .code-big { background: var(--navy-600); }
.gast-hero-badge { background: var(--info-bg); color: var(--info); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Schlüsselverlust-Zeile / Banner auf der Gästeseite */
.sv-row { max-width: 720px; margin: 0 auto var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.sv-row .btn { flex: 1 1 auto; max-width: 100%; text-align: center; white-space: normal; line-height: 1.3; }
.sv-banner { max-width: 720px; margin: 0 auto var(--space-4); }
.sv-banner .btn { display: inline-flex; }
@media (max-width: 767px) { .sv-row, .sv-banner { max-width: none; } .sv-banner .btn { width: 100%; } }

/* ── Betreiber 10.10.2026 ── Gästeseite: Karte „Online-Check-in erforderlich" (statt Banner), Check-in-erledigt-Zeile,
   Schlüsselverlust-Zeile im Fuß der Schlüsselbox-Hero-Karte (gast.js) ── */
.gast-hero.gast-hero-checkin { border-color: var(--warn); box-shadow: 0 0 0 1px rgba(184,134,11,0.22), var(--shadow-card); }
.gast-hero-checkin .gast-card-head { color: var(--warn); }
.gast-hero-checkin .gast-card-head h2 { color: var(--navy-900); }
.gast-hero-text { text-align: center; color: var(--navy-900); font-size: 15px; line-height: 1.55; max-width: 560px; margin: 0 auto; }
.gast-hero-text p { margin: 0 0 0.7em; word-break: break-word; }
.gast-hero-text p:last-child { margin-bottom: 0; }
.gast-hero-cta { display: flex; justify-content: center; margin-top: var(--space-4); }
.gast-hero-cta .btn-checkin { margin-top: 0; min-height: 52px; min-width: 240px; padding: 12px 28px; font-size: 16px; }
.gast-hero-done { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ok); font-weight: 600; margin: -4px 0 var(--space-3); }
.gast-hero-done svg { width: 14px; height: 14px; flex: 0 0 auto; }
.gast-done-row { max-width: 720px; margin: 0 auto var(--space-4); }
.gast-done-row .gast-hero-done { margin: 0; }
.gast-hero-foot { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.gast-hero-foot .sv-banner, .gast-hero .gast-hero-foot .banner { margin: 0; max-width: none; }
.gast-hero-foot .sv-banner .btn { margin-top: var(--space-3); }
.gast-hero-linkrow { display: flex; justify-content: center; }
.gast-hero-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 8px 12px;
  margin: 0; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 14px;
  color: var(--navy-600); text-decoration: underline; text-underline-offset: 3px; white-space: normal; text-align: center; line-height: 1.3;
}
.gast-hero-link svg { width: 16px; height: 16px; flex: 0 0 auto; }
.gast-hero-link:hover, .gast-hero-link:focus-visible { color: var(--navy-900); background: var(--sand-100); outline: none; }
.gast-hero-link[disabled] { opacity: 0.6; cursor: default; }
@media (max-width: 767px) { .gast-done-row { max-width: none; } .gast-hero-cta .btn-checkin { width: 100%; min-width: 0; } .gast-hero-link { width: 100%; } }
@media (max-width: 479px) { .gast-hero-text { font-size: 14px; } }

/* Rechnungen: Schlüsselverlust zurückgestellt (nicht fällig) */
.badge-r-zurueckgestellt { background: var(--warn-bg); color: var(--warn); }

/* ── T ── Telefon-Abfrage Booking.com (telefon.js) — nutzt das Overlay-Grundgerüst .sv-overlay/.sv-card ── */
.tf-noscroll { overflow: hidden; }
.tf-card { border-color: var(--navy-600); }
.tf-form .field { margin-bottom: var(--space-3); }
.tf-input { font-size: 16px; min-height: var(--tap); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tf-error { background: var(--danger-bg); padding: 8px 10px; border-radius: var(--radius-sm); }
.tf-skip-wrap { margin-top: var(--space-2); }
.tf-skip { min-height: var(--tap); border-color: transparent; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.tf-skip:hover { border-color: transparent; color: var(--navy-800); }

/* GH1: Karte „Gästedaten" */
.gast-md-liste { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gast-md-liste li { word-break: break-word; }
.gast-md-status { margin: 0 0 var(--space-3); color: var(--warn); display: flex; align-items: center; gap: 6px; }
.gast-md-status.is-ok { color: var(--ok); }
.gast-md-status svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* GH2: Gästedaten-Formular direkt in der Karte „Gästedaten" (views/gaeste.js) */
.gast-card-voll { grid-column: 1 / -1; }
.gast-md-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.gast-md-aktionen[hidden], .gast-md-form[hidden] { display: none; }
.gast-md-aktionen .btn { margin-top: 0; }
.gast-md-extern { font-size: 14px; }
.gf-form { min-width: 0; }
.gf-form .gf-fehler ul { margin: 6px 0 0; padding-left: 20px; }
.gf-person { position: relative; min-width: 0; border: 1px solid rgba(50,65,88,0.18); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4) var(--space-1); margin: 0 0 var(--space-4); }
.gf-person legend { font-weight: 700; padding: 0 6px; color: var(--navy-800); }
.gf-person .form-grid > * { min-width: 0; }
.gf-weg { position: absolute; top: 2px; right: 8px; margin-top: 0 !important; color: var(--danger); border-color: transparent; padding: 0 12px; }
.gf-sub { margin: var(--space-4) 0 var(--space-1); font-size: 16px; }
.gf-dazu { margin: 0 0 var(--space-3); }
.gf-stern { color: var(--danger); }
.gf-ausweis { border-top: 1px dashed rgba(50,65,88,0.25); padding-top: var(--space-3); margin-bottom: var(--space-2); }
.gf-ausweis[hidden] { display: none; }
.gf-ausweis-kopf { margin: 0 0 var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.gf-ok.has-error span { color: var(--danger); }
.gast-card .gf-form .btn { margin-top: 0; }
@media (max-width: 767px) {
  .gf-person { padding: var(--space-3) var(--space-3) var(--space-1); }
}
@media (max-width: 479px) {
  .gf-weg { position: static; display: flex; margin: 0 0 var(--space-2) auto !important; }
  .gf-person { padding: var(--space-2) var(--space-2) 0; }
}

/* ── E2 (21.10.2026): Wohnungswechsel bei Verlängerung bestätigen (views/umzug.js) ── */
.umzug-liste { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.umzug-karte .banner { margin-bottom: var(--space-3); }
.umzug-karte .umzug-hinweis { margin-top: 6px; font-weight: 600; }
.umzug-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.umzug-aktionen .btn { min-height: 44px; }
.umzug-meldung { margin-top: var(--space-2); color: var(--danger); font-size: 14px; }
@media (max-width: 479px) { .umzug-aktionen .btn { flex: 1 1 100%; justify-content: center; } }

/* Fix 21.10.2026: „✕ Daten stimmen nicht mit dieser Buchung überein" */
.kd-verwerfen-zeile { margin: 0 0 12px; }
.kd-verwerfen { min-height: 44px; padding-left: 0; text-align: left; white-space: normal; }

/* ── Betreiber 21.10.2026 ── Aufenthalte als Tabelle (views/vertraege.js) — wie .rl-row der Rechnungsliste ── */
.bl-card { padding: 0; overflow: hidden; }
.bl-card + .bl-card, .bl-toggle-row + .bl-card { margin-top: var(--space-3); }
.bl-row {
  display: grid; grid-template-columns: 112px minmax(150px, 1fr) 60px 70px 150px 160px 196px;
  gap: 6px 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); min-width: 0;
}
.bl-row:last-child { border-bottom: 0; }
.bl-row.bl-head { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; background: var(--sand-50); padding: 10px 18px; }
.bl-row.is-danger { background: rgba(192,57,43,0.05); box-shadow: inset 3px 0 0 var(--danger); }
.bl-row.is-prio { background: rgba(184,134,11,0.06); box-shadow: inset 3px 0 0 rgba(184,134,11,0.7); }
.bl-row > * { min-width: 0; }
.bl-haupt { font-weight: 600; font-variant-numeric: tabular-nums; }
.bl-titel { font-weight: 600; word-break: break-word; line-height: 1.35; }
.bl-sub { font-size: var(--fs-small); color: var(--text-muted); word-break: break-word; }
.bl-klein { font-size: 12px; }
.bl-sub.danger { color: var(--danger); font-weight: 600; }
.bl-n, .bl-p { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-n .bl-txt, .bl-p .bl-txt { display: none; }
.bl-betrag .bl-sub { word-break: normal; overflow-wrap: break-word; }
.bl-betrag { text-align: right; }
.bl-aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.bl-mehr { min-width: var(--tap); padding-left: 10px; padding-right: 10px; font-size: 18px; letter-spacing: 0; }
.bl-info, .bl-extra { grid-column: 1 / -1; min-width: 0; }
.bl-extra .kachel-foot { margin-top: 0; padding-top: 4px; }
.bl-card.is-done .bl-titel, .bl-card.is-done .bl-haupt { color: var(--navy-700); font-weight: 500; }
.bl-card.is-done .badge { background: var(--neutral-bg); color: var(--neutral); }
.bl-toggle-row { margin-top: var(--space-4); }
.bl-toggle-row .btn { width: auto; }
@media (max-width: 1023px) {
  .bl-row.bl-head { display: none; }
  .bl-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "zeit status" "apt apt" "n betrag" "p betrag" "akt akt" "info info" "extra extra";
    gap: 4px 12px; padding: 14px 16px;
  }
  .bl-zeit { grid-area: zeit; } .bl-status { grid-area: status; justify-self: end; } .bl-apt { grid-area: apt; }
  .bl-n { grid-area: n; } .bl-p { grid-area: p; } .bl-betrag { grid-area: betrag; align-self: end; }
  .bl-aktionen { grid-area: akt; justify-content: flex-start; margin-top: 6px; }
  .bl-info { grid-area: info; } .bl-extra { grid-area: extra; }
  .bl-n .bl-num, .bl-p .bl-num { display: none; }
  .bl-n .bl-txt, .bl-p .bl-txt { display: inline; }
  .bl-betrag[data-label]::before {
    content: attr(data-label); display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  }
  .bl-row .btn-sm { min-height: var(--tap); }
}
@media (max-width: 479px) {
  .bl-row { grid-template-areas: "zeit zeit" "status status" "apt apt" "n betrag" "p betrag" "akt akt" "info info" "extra extra"; }
  .bl-status { justify-self: start; }
  .bl-zeit .bl-haupt { white-space: nowrap; }
  .bl-aktionen .btn:not(.bl-mehr) { flex: 1 1 120px; }
  .bl-extra .kachel-foot .btn { flex: 1 1 100%; }
  .bl-toggle-row .btn { width: 100%; }
}

/* ── Z2 ── Zahlungsplan je Vertrag als eine Kachel (views/rechnungen.js planKachel) ── */
.plan-kachel { display: flex; flex-direction: column; gap: var(--space-3); border-left: 4px solid var(--navy-600); }
.plan-kachel.is-danger { border-left-color: var(--danger); }
.plan-kachel.is-ok { border-left-color: var(--ok); }
.plan-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-kopf .bezug { font-weight: 600; color: var(--navy-800); text-decoration: underline; text-underline-offset: 2px; }
.plan-kz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.plan-fakt { background: var(--sand-50); border-radius: 8px; padding: 8px 12px; min-width: 0; }
.plan-fakt .k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.plan-fakt .v { font-weight: 700; font-variant-numeric: tabular-nums; word-break: break-word; }
.plan-fakt.danger .v { color: var(--danger); }
.plan-akt { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-akt .btn { min-height: var(--tap); }
.plan-liste { border-top: 1px solid var(--border); margin: 0 -20px -20px; }
.plan-kachel { overflow: hidden; }
@media (max-width: 767px) {
  .plan-kz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-akt .btn { flex: 1 1 140px; }
}
@media (min-width: 1024px) {
  /* Drei Aktionen (Bezahlen/PDF/XRechnung) dürfen die Bezeichnung nicht zusammendrücken */
  .plan-liste .rl-row { grid-template-columns: 110px minmax(180px, 1fr) 120px 105px 95px minmax(0, 290px); }
  .plan-liste .rl-aktionen { flex-wrap: wrap; }
}

/* F-ZT-05: Touch-Ziele ≥ 44px am Handy — „Exposé ansehen“ und Bezug-Link „Direktbuchung · Vertrag #…“ */
@media (max-width: 767px) {
  .btn.x-link { min-height: 44px; }
  .rechnung-meta .bezug,
  .rl-sub .bezug { min-height: 44px; display: inline-flex; align-items: center; }
}
/* B-5 (RZ): Text-Links „Exposé ansehen“ (Vertragsdetail) und „Direktbuchung · Vertrag #…“
   (Zahlungsplan-Kopf) auf allen Breiten ≥ 44px — auch Tablets ab 768px sind Touch-Geräte. */
a.x-link-text { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; font-weight: 600; }
.plan-kopf .bezug,
.rechnung-meta .bezug,
.rl-sub .bezug { min-height: 44px; display: inline-flex; align-items: center; }