@import url("https://fonts.googleapis.com/css2?family=Italiana&family=Marcellus&family=Cormorant+Garamond:wght@400;500;600&family=Dancing+Script:wght@600;700&family=Montserrat:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap");

/*
  Swiss Baan Chiang — Villa Concierge design system.
  Tokens sourced verbatim from the client's Claude Design handoff
  (design_handoff_villa_concierge/design_system/colors_and_type.css).
  Flat, hairline-bordered, no shadows — depth comes from the
  --sbc-wattblau-soft fill and the gold hairlines only.
*/
:root {
  --sbc-wattblau-deep: #172d3b;
  --sbc-wattblau: #2d4250;
  --sbc-wattblau-soft: #38505f;
  --sbc-gold: #c9a972;
  --sbc-gold-bright: #d9bd86;
  --sbc-sand: #e9dfd1;
  --sbc-sand-deep: #ddd0bc;
  --sbc-copper: #a98c68;
  --sbc-clay: #8b6852;
  --sbc-ink: #1c1c1c;
  --sbc-stone: #6b6b6b;
  --line: rgba(201, 169, 114, 0.3);
  --error: #a34a3a;

  /* Fiona/Corporative is now reserved for the greeting ("Hallo <Name>") — everything else is Montserrat. */
  --font-display: "Corporative", "Italiana", "Marcellus", "Cormorant Garamond", serif;
  --font-sub: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --tracking-wide: 0.18em;
  --tracking-display: 0.04em;

  --radius-xs: 2px;
  --radius-md: 8px;
  --radius-pill: 999px;

  --gutter: 24px;
}
@media (min-width: 744px) {
  :root { --gutter: 40px; }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--sbc-wattblau-deep);
  color: var(--sbc-sand);
  -webkit-font-smoothing: antialiased;
}
[lang="th"], .lang-th { font-family: "Noto Sans Thai", "Montserrat", sans-serif; }
.icon { flex-shrink: 0; vertical-align: middle; }
button { font-family: inherit; }
p { margin: 0; }

h1, h2, h3, .display {
  font-family: var(--font-body);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.rule { display: block; height: 1px; width: 64px; background: var(--sbc-gold); }

.section-label {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sbc-gold);
}

.app-shell {
  max-width: 1133px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--sbc-wattblau);
  position: relative;
}

/* ---------- Header / brand ---------- */
.topbar { border-bottom: 1px solid var(--line); }
.topbar-row {
  padding: 22px var(--gutter) 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.brand-mark { color: var(--sbc-gold); display: flex; }
.brand-name { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.brand-kicker { font-family: var(--font-sub); font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-wide); color: var(--sbc-gold); }
.brand-word { font-family: var(--font-body); font-weight: 500; font-size: 22px; color: var(--sbc-gold-bright); letter-spacing: var(--tracking-display); }
.brand-tagline { font-size: 12px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sbc-copper); }

.chip-row { display: flex; gap: 8px; align-items: center; justify-content: center; }
.chip {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--sbc-sand);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.lang-switch { display: flex; gap: 4px; }
.lang-btn {
  border: 1px solid var(--line); background: transparent; color: var(--sbc-sand);
  border-radius: var(--radius-pill); padding: 6px 10px; font-size: 11px; font-weight: 600;
  cursor: pointer; opacity: 0.75;
}
.lang-btn.active { background: var(--sbc-gold); color: var(--sbc-wattblau-deep); border-color: var(--sbc-gold); opacity: 1; }

/* Tablet header: brand left, label + basket right */
@media (min-width: 744px) {
  .topbar-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    text-align: left;
    padding: 24px var(--gutter) 22px;
  }
  .brand-name { flex-direction: row; align-items: center; justify-self: start; }
  .chip-row { justify-content: flex-end; }
}

/* "Meine Anfragen" — centred in every header; gold + pulse when a status changed */
.hdr-center { display: flex; justify-content: center; }
.requests-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; color: var(--sbc-sand); font-family: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 16px; white-space: nowrap;
}
.requests-btn .icon { color: var(--sbc-gold); }
.requests-btn-count {
  background: var(--sbc-gold); color: var(--sbc-wattblau-deep); border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.requests-btn-tag {
  font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  background: var(--sbc-wattblau-deep); color: var(--sbc-gold-bright); border-radius: var(--radius-pill); padding: 3px 8px;
}
.requests-btn.changed {
  background: var(--sbc-gold); border-color: var(--sbc-gold); color: var(--sbc-wattblau-deep);
  animation: requests-pulse 2.4s ease-in-out infinite;
}
.requests-btn.changed .icon { color: var(--sbc-wattblau-deep); }
@keyframes requests-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 114, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(201, 169, 114, 0); }
}
@media (prefers-reduced-motion: reduce) { .requests-btn.changed { animation: none; } }

.basket-link {
  display: flex; align-items: center; gap: 8px;
  color: var(--sbc-gold-bright); font-size: 14px; text-decoration: none; cursor: pointer;
  background: none; border: none; font-family: inherit; padding: 0;
}
.basket-link .icon { color: var(--sbc-gold); }

.page-title { padding: 0 var(--gutter); margin-top: 10px; }
.page-title h1 { font-size: 22px; color: var(--sbc-gold-bright); }
.page-title .sub { color: var(--sbc-copper); font-size: 13px; margin-top: 4px; }

/* Back header (all screens except Start) */
.back-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.back-btn {
  border: none; background: none; color: var(--sbc-gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.hdr-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
/* Arrow and section title together are the back button (one big tap target). */
.back-area { background: none; border: none; padding: 12px 0; margin: -12px 0; font-family: inherit; text-align: left; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
.back-area .back-btn { pointer-events: none; }
.back-area:hover .section-label, .back-area:active .section-label { color: var(--sbc-gold-bright); }
.hdr-right { display: flex; align-items: center; gap: 16px; flex: 1; justify-content: flex-end; }
/* phones: icon-only button so back arrow, button and language switch fit */
@media (max-width: 743px) {
  .back-header .requests-btn-label, .back-header .requests-btn-tag { display: none; }
  .back-header .requests-btn { padding: 8px 10px; }
}

/* ---------- Main content ---------- */
main { flex: 1; padding: 0 0 40px; }

/* ---------- Start / Dashboard ---------- */
.greeting { padding: 32px var(--gutter) 0; display: flex; flex-direction: column; gap: 10px; }
.greeting h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-display); line-height: 1.08; font-size: 34px; color: var(--sbc-gold-bright); }
.greeting p { color: var(--sbc-sand); font-size: 15px; line-height: 1.7; }

.booking-card {
  margin: 24px var(--gutter) 0;
  padding: 0;
  background: var(--sbc-wattblau-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* The two halves of the card are each one big tap target:
   top -> booking details, bottom -> weather. */
.booking-zone {
  display: flex; width: 100%; text-align: left; font-family: inherit; color: inherit;
  background: none; border: none; cursor: pointer; padding: 20px;
  -webkit-tap-highlight-color: transparent;
}
.booking-zone:hover, .booking-zone:active { background: rgba(255, 255, 255, 0.045); }
.booking-top { flex-direction: column; gap: 12px; }
.booking-weather { align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; }
.booking-weather .icon { color: var(--sbc-gold); }
.booking-card .row-between .section-label { margin: 0; }
.booking-card a, .booking-card .link { color: var(--sbc-gold); font-size: 13px; text-decoration: none; cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; }
.booking-card .villa-name { font-family: var(--font-body); font-weight: 500; font-size: 22px; color: var(--sbc-gold-bright); }
.booking-card .meta { font-size: 14px; color: var(--sbc-sand); }
.booking-card hr { border: none; border-top: 1px solid var(--line); margin: 0; width: 100%; }
.booking-card .weather { font-size: 14px; color: var(--sbc-copper); }

.services-header { padding: 30px var(--gutter) 10px; display: flex; align-items: baseline; justify-content: space-between; }
.services-header .unit { font-size: 12px; color: var(--sbc-copper); }

.service-grid { padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.service-tile {
  background: var(--sbc-wattblau-soft); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 16px; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  text-align: left; cursor: pointer; color: inherit;
}
.service-tile .title { font-size: 15px; line-height: 1.35; color: var(--sbc-sand); }
.service-tile .price { font-size: 13px; color: var(--sbc-gold); }
.service-tile.wide {
  grid-column: 1 / -1; min-height: 56px; background: transparent; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
}
.service-tile.wide .price { color: var(--sbc-copper); }

.secondary-nav { padding: 28px var(--gutter) 0; border-top: 1px solid var(--line); margin-top: 28px; }
.nav-row {
  min-height: 56px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); cursor: pointer; color: inherit; background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left; font-family: inherit; font-size: 15px; padding: 0;
}
.secondary-nav .nav-row:last-child { border-bottom: none; }
.nav-row .badge-gold { color: var(--sbc-gold); font-size: 13px; }
.nav-row .icon { color: var(--sbc-gold); }

.contact-card {
  margin: 24px var(--gutter) 32px; padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--sbc-gold);
  display: flex; flex-direction: column; gap: 6px;
}
.contact-card .title { font-size: 15px; color: var(--sbc-gold-bright); }
.contact-card .body { font-size: 14px; color: var(--sbc-sand); line-height: 1.6; }

/* ---------- Title block (service detail, confirmation, etc.) ---------- */
.title-block { padding: 32px var(--gutter) 0; display: flex; flex-direction: column; gap: 12px; }
.title-block h1 { font-size: 28px; color: var(--sbc-gold-bright); line-height: 1.15; }
.title-block .desc { font-size: 15px; line-height: 1.7; color: var(--sbc-sand); }

.pill-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pill {
  padding: 8px 14px; border-radius: var(--radius-pill); font-size: 13px; border: 1px solid var(--line); color: var(--sbc-sand);
}
.pill.gold { border-color: var(--sbc-gold); color: var(--sbc-gold); }

/* ---------- Form stack (generic option groups) ---------- */
.form-stack { padding: 24px var(--gutter) 0; display: flex; flex-direction: column; gap: 24px; }
.form-group { display: flex; flex-direction: column; gap: 10px; }
.form-group .helper { font-size: 12px; color: var(--sbc-copper); }
.required-mark { color: var(--error); }
.form-group.invalid .section-label { color: var(--error); }
.form-group.invalid .field-input { border-color: var(--error); }

.segmented { display: flex; gap: 8px; }
.segmented button {
  flex: 1; min-height: 48px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: transparent;
  color: var(--sbc-sand); font-size: 14px; cursor: pointer;
}
.segmented button.selected { background: var(--sbc-gold); border-color: var(--sbc-gold); color: var(--sbc-wattblau-deep); font-weight: 600; }

.field-input, input[type="text"].field-input, textarea.field-input, select.field-input, input[type="date"].field-input, input[type="time"].field-input {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: var(--radius-md);
  background: var(--sbc-wattblau-soft); border: 1px solid var(--line); color: var(--sbc-sand);
  font-size: 16px; font-family: inherit;
}
textarea.field-input { min-height: 88px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.field-input::placeholder { color: var(--sbc-copper); opacity: 0.9; }
.field-row-2 { display: grid; grid-template-columns: 1fr 118px; gap: 10px; }

.choice-row {
  min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-md); background: var(--sbc-wattblau-soft); border: 1px solid var(--line); cursor: pointer;
}
.choice-row.selected { border-color: var(--sbc-gold); }
.choice-row .label { font-size: 15px; color: var(--sbc-sand); display: flex; align-items: center; gap: 10px; }
.choice-row .label .icon { color: var(--sbc-copper); }
.choice-row.selected .label .icon { color: var(--sbc-gold); }
.choice-row .price { font-size: 14px; color: var(--sbc-copper); }
.choice-row.selected .price { color: var(--sbc-gold); }
.choice-row .check-circle {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--sbc-wattblau-deep);
}
.choice-row.selected .check-circle { background: var(--sbc-gold); border-color: var(--sbc-gold); }

.chip-filter-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 var(--gutter); }
.chip-filter {
  padding: 9px 15px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: transparent;
  color: var(--sbc-sand); font-size: 13px; cursor: pointer;
}
.chip-filter.active { background: var(--sbc-gold); border-color: var(--sbc-gold); color: var(--sbc-wattblau-deep); font-weight: 600; }

.stepper-row { display: flex; align-items: center; gap: 16px; }
.stepper-row .value { min-width: 24px; text-align: center; font-size: 16px; color: var(--sbc-sand); }
.stepper-row button {
  width: 44px; height: 44px; border-radius: var(--radius-xs); cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); color: var(--sbc-sand);
}
.stepper-row button.plus { background: var(--sbc-gold); border-color: var(--sbc-gold); color: var(--sbc-wattblau-deep); }

/* ---------- Buttons / footer ---------- */
.btn-primary {
  width: 100%; min-height: 56px; border: none; border-radius: var(--radius-xs); background: var(--sbc-gold); color: var(--sbc-wattblau-deep);
  font-family: var(--font-sub); font-weight: 500; font-size: 14px; letter-spacing: var(--tracking-wide); text-transform: uppercase; cursor: pointer;
}
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-secondary {
  width: 100%; min-height: 52px; border-radius: var(--radius-xs); background: transparent; border: 1px solid var(--line); color: var(--sbc-sand);
  font-size: 15px; cursor: pointer;
}
.btn-inline-gold {
  min-height: 48px; border-radius: var(--radius-xs); background: transparent; border: 1px solid var(--sbc-gold); color: var(--sbc-gold);
  font-family: var(--font-sub); font-weight: 500; font-size: 13px; letter-spacing: var(--tracking-wide); text-transform: uppercase; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px;
}
.form-footer { padding: 32px var(--gutter); display: flex; flex-direction: column; gap: 12px; }
.form-footer .fine-print { text-align: center; font-size: 12px; color: var(--sbc-copper); }

/* ---------- Basket (Anfragekorb) ---------- */
.basket-list { padding: 24px var(--gutter) 0; display: flex; flex-direction: column; gap: 14px; }
.basket-item { padding: 18px; background: var(--sbc-wattblau-soft); border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 10px; }
.basket-item .row-between .title { font-size: 16px; color: var(--sbc-sand); }
.basket-item .row-between .price { font-size: 14px; color: var(--sbc-gold); }
.basket-item .summary { font-size: 14px; line-height: 1.6; color: var(--sbc-copper); }
.basket-item .actions { display: flex; gap: 18px; }
.basket-item .actions button { background: none; border: none; padding: 0; color: var(--sbc-sand); font-size: 14px; text-decoration: underline; cursor: pointer; font-family: inherit; }

.add-service-row {
  margin: 14px var(--gutter) 0; min-height: 52px; border: 1px solid var(--line); border-radius: var(--radius-md); background: none;
  display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--sbc-copper); cursor: pointer; font-family: inherit; font-size: 14px; width: calc(100% - 2 * var(--gutter));
}

.total-card {
  margin: 24px var(--gutter) 0; padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--sbc-gold);
  display: flex; flex-direction: column; gap: 8px;
}
.total-card .row-between { font-size: 15px; color: var(--sbc-sand); }
.total-card .row-between b { color: var(--sbc-gold); font-family: var(--font-body); font-size: 20px; font-weight: 500; }
.total-card .fine-print { font-size: 12px; color: var(--sbc-copper); line-height: 1.6; }

/* ---------- Confirmation ---------- */
.confirm-wrap { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 32px; gap: 22px; }
.confirm-wrap .check-mark { color: var(--sbc-gold); }
.confirm-wrap h1 { font-size: 30px; color: var(--sbc-gold-bright); }
.confirm-wrap .body { font-size: 15px; line-height: 1.7; color: var(--sbc-sand); max-width: 46ch; }
.confirm-summary { text-align: left; width: 100%; max-width: 340px; padding: 18px; background: var(--sbc-wattblau-soft); border: 1px solid var(--line); border-radius: var(--radius-md); }
.confirm-summary .section-label { display: block; margin-bottom: 6px; }
.confirm-summary .body-line { font-size: 14px; color: var(--sbc-sand); }
.confirm-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }

/* ---------- Meine Anfragen (status) ---------- */
.request-card { padding: 18px; border-radius: var(--radius-md); margin-bottom: 14px; background: var(--sbc-wattblau-soft); border: 1px solid var(--line); }
.request-card.done { background: transparent; }
.request-card.changed { border-color: var(--sbc-gold); box-shadow: inset 3px 0 0 var(--sbc-gold); }
.request-card .row-between .title { font-size: 16px; color: var(--sbc-sand); }
.request-card .summary { font-size: 14px; line-height: 1.6; color: var(--sbc-copper); margin-top: 6px; }
.request-card .extra { font-size: 14px; color: var(--sbc-copper); margin-top: 4px; }
.status-plaque { font-family: var(--font-sub); font-weight: 500; font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.status-plaque.bestaetigt { background: var(--sbc-gold); color: var(--sbc-wattblau-deep); }
.status-plaque.in_pruefung { border: 1px solid var(--sbc-gold); color: var(--sbc-gold); }
.status-plaque.erledigt { color: var(--sbc-copper); }
.closing-note { padding: 20px var(--gutter) 0; font-size: 14px; line-height: 1.7; color: var(--sbc-copper); }

/* ---------- Buchungsdetails ---------- */
.def-list { padding: 0 var(--gutter); }
.def-row { padding: 16px 0; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.def-row:last-child { border-bottom: none; }
.def-row .label { font-size: 15px; color: var(--sbc-copper); }
.def-row .value { font-size: 15px; color: var(--sbc-sand); text-align: right; }
.address-card { margin: 20px var(--gutter) 0; padding: 18px; background: var(--sbc-wattblau-soft); border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 8px; }
.address-card .links { display: flex; gap: 18px; margin-top: 6px; }
.address-card .links button { background: none; border: none; padding: 0; color: var(--sbc-gold); font-size: 14px; cursor: pointer; font-family: inherit; }

/* ---------- Hausregeln & WLAN ---------- */
.wlan-card { margin: 0 var(--gutter); padding: 20px; border: 1px solid var(--sbc-gold); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 14px; }
.wlan-kv .label { font-size: 14px; color: var(--sbc-copper); }
.wlan-kv .value { font-size: 19px; color: var(--sbc-sand); margin-top: 2px; }
.rule-block { padding: 18px var(--gutter); border-bottom: 1px solid var(--line); }
.rule-block:last-of-type { border-bottom: none; }
.rule-block .title { font-size: 16px; color: var(--sbc-sand); margin-bottom: 6px; }
.rule-block .body { font-size: 15px; line-height: 1.7; color: var(--sbc-copper); }
.emergency-card { margin: 20px var(--gutter) 24px; padding: 18px; background: var(--sbc-wattblau-soft); border-radius: var(--radius-md); }
.emergency-card .section-label { display: block; margin-bottom: 6px; }
.emergency-card .body { font-size: 14px; line-height: 1.7; color: var(--sbc-sand); }

/* ---------- Umgebung ---------- */
.place-card { margin: 0 var(--gutter) 14px; padding: 18px; background: var(--sbc-wattblau-soft); border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 8px; }
.place-card .row-between .name { font-family: var(--font-body); font-weight: 500; font-size: 20px; color: var(--sbc-gold-bright); }
.place-card .row-between .time { font-size: 13px; color: var(--sbc-gold); }
.place-card .desc { font-size: 15px; line-height: 1.7; color: var(--sbc-sand); }
.place-card .action { align-self: flex-start; background: none; border: none; padding: 0; color: var(--sbc-gold); font-size: 14px; text-decoration: underline; cursor: pointer; font-family: inherit; }

/* ---------- Generic helpers ---------- */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.muted { color: var(--sbc-copper); font-size: 13px; }
.section-pad { padding: 0 var(--gutter); }
hr.sep { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
:focus-visible { outline: 2px solid var(--sbc-gold); outline-offset: 2px; }

/* Rechnung */
.invoice { margin: 20px var(--gutter) 0; max-width: 760px; }
.invoice-head { display: flex; justify-content: space-between; padding: 0 0 10px; border-bottom: 1px solid var(--sbc-gold); font-family: var(--font-sub); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sbc-gold); }
.invoice-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.invoice-desc { flex: 1; min-width: 0; }
.invoice-title { font-size: 15px; color: var(--sbc-sand); line-height: 1.4; }
.invoice-review { color: var(--sbc-copper); font-size: 12px; }
.invoice-sub { font-size: 13px; color: var(--sbc-copper); margin-top: 3px; line-height: 1.5; }
.invoice-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
.invoice-amount-num { font-size: 15px; color: var(--sbc-sand); font-variant-numeric: tabular-nums; }
.invoice-line.is-paid .invoice-title, .invoice-line.is-paid .invoice-amount-num { color: var(--sbc-copper); }
.invoice-tag { font-family: var(--font-sub); font-weight: 500; font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); }
.invoice-tag.paid { color: var(--sbc-copper); border: 1px solid var(--line); }
.invoice-tag.open { border: 1px solid var(--sbc-gold); color: var(--sbc-gold); }
.invoice-tag.pending { color: var(--sbc-copper); font-style: italic; text-transform: none; letter-spacing: 0; padding: 3px 0; }
.invoice-sums { margin-top: 18px; }
.invoice-sum { display: flex; justify-content: space-between; padding: 8px 0; font-size: 15px; color: var(--sbc-sand); font-variant-numeric: tabular-nums; }
.invoice-sum.open { margin-top: 8px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--sbc-wattblau-soft); border: 1px solid var(--sbc-gold); font-family: var(--font-body); font-weight: 500; font-size: 20px; color: var(--sbc-gold-bright); }
.invoice-sum.open.settled { border-color: var(--line); color: var(--sbc-copper); }
.invoice-note { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--sbc-copper); }
.empty-state { text-align: center; padding: 60px 24px; color: var(--sbc-copper); }
.empty-state .big { color: var(--sbc-gold); margin-bottom: 12px; display: flex; justify-content: center; }

.toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--sbc-wattblau-deep); color: var(--sbc-sand); padding: 13px 20px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500; border: 1px solid var(--sbc-gold); display: flex; align-items: center; gap: 8px;
  max-width: 90vw; text-align: center;
}

.error-text { color: var(--error); font-size: 13px; }

/* Floating basket bar (mobile draft-basket entry point — not in the mockups,
   filled in for a real access point mirroring the existing cart-bar pattern) */
.basket-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center; pointer-events: none; }
.basket-bar-inner {
  pointer-events: auto; max-width: 1133px; width: calc(100% - 2 * var(--gutter)); margin-bottom: 16px;
  background: var(--sbc-gold); color: var(--sbc-wattblau-deep); border-radius: var(--radius-pill);
  padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  font-family: var(--font-sub); font-weight: 500; font-size: 13px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.basket-bar-inner .left { display: flex; align-items: center; gap: 10px; }
.basket-badge { background: var(--sbc-wattblau-deep); color: var(--sbc-gold); border-radius: 999px; padding: 2px 9px; font-size: 12px; }

/* ---------- Tablet portrait, >=744px ---------- */
@media (min-width: 744px) {
  .hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: start; padding: 44px var(--gutter) 0; }
  .hero-grid .greeting { padding: 0; }
  .hero-grid .greeting h2 { font-size: 52px; }
  .hero-grid .greeting p { max-width: 44ch; }
  .hero-grid .booking-card { margin: 0; }
  .service-grid { grid-template-columns: repeat(3, 1fr); padding: 0 var(--gutter); gap: 16px; }
  .service-tile { min-height: 132px; padding: 20px; }
  .service-tile .title { font-size: 17px; }
  .secondary-nav.footer-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: none; margin-top: 0; padding: 24px var(--gutter) 0; }
  .secondary-nav.footer-cards .nav-row { min-height: 64px; padding: 0 20px; border: 1px solid var(--line); border-radius: var(--radius-md); }

  .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 44px var(--gutter) 0; align-items: start; }
  .detail-grid .title-block, .detail-grid .form-stack { padding: 0; }
  .detail-grid .title-block h1 { font-size: 38px; }
  .form-footer.bar { border-top: 1px solid var(--line); padding-top: 28px; flex-direction: row; align-items: center; justify-content: space-between; }
  .form-footer.bar .fine-print { text-align: left; max-width: 38ch; margin: 0; order: 1; }
  .form-footer.bar .btn-primary, .form-footer.bar .btn-secondary { width: auto; padding: 0 32px; order: 2; }

  .basket-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; padding: 24px var(--gutter) 0; }
  .basket-grid .basket-list { padding: 0; }
  .basket-grid .total-card, .basket-grid .add-service-row { margin: 0; width: 100%; }
  .basket-grid .basket-right { display: flex; flex-direction: column; gap: 16px; }
}

/* ---------- Tablet landscape split view, >=1133px ---------- */
@media (min-width: 1133px) {
  body { background: var(--sbc-wattblau-deep); }
  .split-view { display: grid; grid-template-columns: 394px 1fr; min-height: 744px; }
  .split-left { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
  .split-left .brand-block { padding: 24px; border-bottom: 1px solid var(--line); }
  .split-left .booking-block { padding: 20px 24px; border-bottom: 1px solid var(--line); }
  .split-left .booking-block .villa-name { font-size: 22px; }
  .split-left .service-list { flex: 1; overflow-y: auto; padding: 0 24px; }
  .split-row {
    min-height: 54px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line);
    cursor: pointer; background: none; border-left: none; border-right: none; border-top: none; width: 100%; font-family: inherit; font-size: 16px; color: var(--sbc-sand); padding: 0;
  }
  .split-row .price { font-size: 14px; color: var(--sbc-copper); }
  .split-row.active { border-left: 2px solid var(--sbc-gold); padding-left: 14px; margin-left: -14px; color: var(--sbc-gold-bright); }
  .split-row.active .price { color: var(--sbc-gold); }
  .split-left .split-footer { border-top: 1px solid var(--line); padding: 16px 24px; display: flex; justify-content: space-between; }
  .split-left .split-footer a, .split-left .split-footer button { background: none; border: none; color: var(--sbc-sand); font-size: 14px; cursor: pointer; font-family: inherit; padding: 0; }
  .split-right { padding: 40px 36px; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
  .split-right .title-block { padding: 0; }
  .split-right .title-block h1 { font-size: 34px; }
  .split-right .title-block .desc { max-width: 60ch; }
  .split-right .detail-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
  .split-right .form-footer.bar { margin-top: auto; }
}

/* ---------- Modal / sheet (kept for any future overlay use) ---------- */
.overlay { position: fixed; inset: 0; background: rgba(23, 45, 59, 0.55); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 700px) { .overlay { align-items: center; } }
.sheet { background: var(--sbc-wattblau); width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; border-radius: var(--radius-md) var(--radius-md) 0 0; padding: 22px 20px 26px; border-top: 1px solid var(--sbc-gold); }
@media (min-width: 700px) { .sheet { border-radius: var(--radius-md); max-width: 480px; border: 1px solid var(--sbc-gold); } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sheet-head h3 { font-size: 19px; color: var(--sbc-gold-bright); }
.icon-btn { border: none; background: var(--sbc-wattblau-soft); color: var(--sbc-sand); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }

/* ---------- Idle / start screen (js/views/idle.js) ----------
   The tablet's resting state — shown on load and restored after 2 minutes of
   inactivity (see app.js). Two modes, chosen per room in the backoffice: the
   postcard screen below, or the Fallblattanzeige split-flap board further down. */
.idle-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; cursor: pointer; }
.idle-hint { text-align: center; font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sbc-copper); opacity: 0.8; }

/* Postcard idle screen — shared markup (util.js postcardHTML()) and frame
   image with the admin compose-preview, so the two always match pixel-for-
   pixel — the frame itself is the client's real brand asset
   (assets/postcard-frame.png), not a hand-drawn CSS approximation. */
main.postcard-takeover { padding: 20px; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; min-height: 0; }
/* .postcard-wrap is capped to the same width as .postcard (instead of being a
   full-width flex row that only centers a narrower child) so that .postcard's
   percentage padding below resolves against its own real width — percentage
   padding always resolves against the containing block's width, so a wider
   .postcard-wrap would silently double it. */
/* max-width tuned so the card fills a landscape iPad-Mini-class tablet
   (1024x768) nicely without touching edge-to-edge and without the card's
   height (from aspect-ratio) pushing past the viewport height. */
.postcard-wrap { width: 100%; max-width: 800px; margin: 0 auto; }
.postcard {
  width: 100%; aspect-ratio: 419.25 / 297.75; background-color: var(--sbc-wattblau-deep);
  background-image: url("../assets/postcard-frame.png"); background-size: 100% 100%; background-repeat: no-repeat;
  border-radius: var(--radius-md); padding: 11% 5.5% 6%; display: flex; flex-direction: column;
  container-type: inline-size;
}
/* cqw (the postcard's own rendered width), not vw — ties the text size to
   the card itself so it stays proportional regardless of how wide the card
   ends up, instead of silently overflowing/shrinking whenever .postcard-wrap's
   max-width changes independently of the viewport. */
.postcard-message { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--sbc-sand); font-size: clamp(22px, 6.5cqw, 56px); line-height: 1.55; white-space: pre-wrap; word-break: break-word; overflow-y: auto; }
.postcard-message.placeholder { color: rgba(233, 223, 209, 0.5); font-family: "Montserrat", sans-serif !important; font-size: clamp(15px, 3.5cqw, 28px); }
.postcard-footer { font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(233, 223, 209, 0.45); border-top: 1px dashed rgba(201, 169, 114, 0.25); padding-top: 10px; margin-top: 8px; text-align: center; flex-shrink: 0; }

/* Fallblattanzeige idle screen — split-flap ("Solari board") welcome display.
   Each cell is a physical-metaphor flip: static top/bottom halves (each
   overflow:hidden, showing the top or bottom 50% of an oversized glyph) form
   the resting character, with a third "flap" layer folded via 2D scaleY
   (deliberately not a 3D rotateX/backface-visibility flip — see js/views/idle.js). */
/* Cell size is derived from the row's own real, laid-out width (percentage
   math against a definite container — .fb-stage/.fb-rows/.fb-row are all
   forced to width:100% precisely so that width is never itself dependent on
   the cells' content, which would be circular) rather than an estimated vw
   formula — a vw guess can't account for scrollbars, ancestor padding, or
   sub-pixel rounding, which was overflowing by ~10px at some widths and
   clipping the last column. aspect-ratio (not another percentage calc, which
   would resolve against the wrong axis) derives the cell's height from
   whatever width actually gets resolved, and container query units (cqw)
   do the same for the glyph's font-size and vertical offset — all three stay
   in the original 64:118:55 proportions at any size between the 22px floor
   (below which .fb-stage scrolls horizontally instead) and the original 64px. */
main.fb-idle { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px 12px; }
.fb-stage { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fb-rule { height: 1px; width: 64px; background: var(--sbc-gold); margin: 0 auto; flex-shrink: 0; }
.fb-rows { width: 100%; display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.fb-row { width: 100%; display: flex; gap: 6px; justify-content: center; }
.fb-cell {
  position: relative; flex-shrink: 0; container-type: inline-size;
  width: calc((100% - 90px) / 16); min-width: 22px; max-width: 64px; aspect-ratio: 64 / 118;
}
.fb-cell-half { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background-color: var(--sbc-wattblau-soft); border: 1px solid var(--line); }
/* A faint top-lit/bottom-shadowed gradient on the two resting halves, so the
   flap (below) reads as visibly catching more light mid-fold by comparison. */
.fb-cell-top { top: 0; border-bottom: none; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 65%); }
.fb-cell-bottom { bottom: 0; border-top: none; border-radius: 0 0 var(--radius-xs) var(--radius-xs); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0) 65%); }
.fb-cell-glyph { position: absolute; top: 0; left: 0; width: 100%; height: 184.375cqw; display: flex; align-items: center; justify-content: center; font-family: var(--font-sub); font-weight: 700; font-size: 68.75cqw; color: var(--sbc-gold-bright); }
.fb-cell-bottom .fb-cell-glyph { top: -92.1875cqw; }
/* The moving leaf. filter (brightness + drop-shadow, driven from JS in lockstep
   with the scaleY transform — see js/views/idle.js) is what actually sells the
   2D fold as a physical card turning edge-on to the light rather than a flat
   squash: it darkens and lifts a shadow as it collapses toward the hinge, then
   brightens and settles as the new face rotates into view. */
.fb-cell-flap { position: absolute; top: 0; left: 0; width: 100%; height: 50%; overflow: hidden; transform-origin: bottom; background-color: var(--sbc-wattblau-soft); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 65%); border: 1px solid var(--line); border-bottom: none; border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
/* The hinge: a thin highlight-over-shadow pair rather than a flat line, so it
   reads as a crease with real depth instead of a printed rule. */
.fb-cell-seam { position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 3px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.05) 40%, rgba(0, 0, 0, 0.4)); z-index: 5; }

/* ---------- Room setup / re-assignment screen (unchanged structure) ---------- */
.setup-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--sbc-wattblau-deep); }
.setup-card { width: 100%; max-width: 380px; background: var(--sbc-wattblau); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 36px 30px; }
.setup-logo { display: flex; justify-content: center; margin-bottom: 10px; }
.setup-card h2 { font-family: var(--font-body); font-weight: 500; font-size: 22px; color: var(--sbc-gold-bright); text-align: center; margin-bottom: 8px; }
.setup-card > p.muted { text-align: center; margin-bottom: 20px; line-height: 1.6; color: var(--sbc-copper); }
.setup-card .field { margin-bottom: 14px; }
.setup-card label { display: block; font-size: 13px; color: var(--sbc-copper); margin-bottom: 6px; }
.setup-card input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--radius-md); background: var(--sbc-wattblau-soft); border: 1px solid var(--line); color: var(--sbc-sand); font-size: 15px; font-family: inherit; }
.setup-room-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.setup-room-grid .btn-secondary { width: auto; padding: 0 16px; min-height: 44px; }
.setup-room-grid .btn-secondary.picked { background: var(--sbc-gold); border-color: var(--sbc-gold); color: var(--sbc-wattblau-deep); }

/* Storniert + Zeitstempel in "Meine Anfragen" */
.status-plaque.storniert { color: #e08a76; border: 1px solid rgba(224, 138, 118, 0.5); }
.request-card.cancelled { background: transparent; opacity: 0.75; }
.request-card.cancelled .title { text-decoration: line-through; text-decoration-color: rgba(233, 223, 209, 0.4); }
.request-card .stamp { font-size: 12px; color: var(--sbc-copper); margin-top: 6px; }
.request-card .stamp:first-of-type { margin-top: 10px; }

/* Wetter */
.weather-link { background: none; border: none; padding: 0; font-family: inherit; text-align: left; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.weather-link .icon { color: var(--sbc-gold); }
.weather-grid { display: flex; flex-direction: column; gap: 20px; padding: 24px var(--gutter) 0; }
@media (min-width: 744px) { .weather-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } }
.weather-now { background: var(--sbc-wattblau-soft); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; }
.weather-now-main { display: flex; align-items: center; gap: 20px; }
.weather-now-icon { color: var(--sbc-gold-bright); display: flex; }
.weather-now-temp { font-family: var(--font-body); font-weight: 500; font-size: 64px; line-height: 1; color: var(--sbc-gold-bright); }
.weather-now-cond { font-size: 16px; color: var(--sbc-sand); margin-top: 6px; }
.weather-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 22px; }
.weather-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; }
.weather-facts span { color: var(--sbc-copper); }
.weather-facts b { font-weight: 500; color: var(--sbc-sand); white-space: nowrap; }
.weather-forecast { padding: 4px 0; }
.weather-day { display: grid; grid-template-columns: 74px 28px 1fr auto auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.weather-day-name { color: var(--sbc-sand); font-weight: 500; }
.weather-day-icon { color: var(--sbc-gold); display: flex; }
.weather-day-cond { color: var(--sbc-copper); min-width: 0; }
.weather-day-rain { color: var(--sbc-copper); display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.weather-day-rain .icon { color: var(--sbc-gold); }
.weather-day-temps { white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 66px; text-align: right; }
.weather-day-temps b { font-weight: 500; color: var(--sbc-sand); }
.weather-day-temps span { color: var(--sbc-copper); }
.weather-credit { padding: 18px var(--gutter) 0; font-size: 12px; color: var(--sbc-copper); }
@media (max-width: 480px) { .weather-day { grid-template-columns: 84px 24px 1fr auto; gap: 8px; } .weather-day-rain { display: none; } }