/* Page header (matches kombinationen) */
  .page-head { background: #0b1722; color: #fff; overflow: hidden; position: relative; }
  .page-head .bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 80% 50% at 80% 30%, rgba(244,155,6,0.18), transparent 60%),
      radial-gradient(ellipse 60% 50% at 20% 70%, rgba(244,155,6,0.08), transparent 60%),
      linear-gradient(160deg, #14202d 0%, #0b1722 60%, #060d15 100%);
  }
  .page-head .lines {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 90%);
  }
  .page-head .inner { position: relative; z-index: 2; padding-block: 36px 44px; }
  .ph-crumbs { font-size:13px; color:rgba(255,255,255,0.7); display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; }
  .ph-crumbs a { color:rgba(255,255,255,0.85); }
  .ph-crumbs a:hover { color: var(--brand); }
  .ph-crumbs .sep { opacity:0.4; }
  .ph-crumbs .here { color:#fff; font-weight:600; }
  .ph-eyebrow { display:inline-flex; align-items:center; gap:14px; font-family:'Caveat',cursive; font-size:22px; color:#ffe8c2; margin-bottom:8px; }
  .ph-eyebrow::before { content:""; width:36px; height:2px; background:#ffe8c2; border-radius:2px; }
  .ph-h1 { font-size: clamp(30px, 3.4vw, 44px); line-height:1.05; letter-spacing:-0.02em; font-weight:800; color:#fff; }
  /* Scoped to .page-head on purpose: base.css paints `.page-head h1 em` in
     --brand-text for the light generic header, and that selector outranks a
     bare `.ph-h1 em`. On this navy hero it landed at 2.7:1 — the accent word
     came out brown. */
  .page-head .ph-h1 em { font-style:normal; font-family:'Caveat',cursive; font-weight:600; color: var(--brand-on-dark); }
  .ph-lede { margin-top:14px; max-width:680px; font-size:14px; line-height:1.65; color:rgba(255,255,255,0.85); padding-left:16px; border-left:2px solid rgba(244,155,6,0.9); }
  .ph-lede a { color:#fff; text-decoration:underline; }
  .ph-lede a:hover { color: var(--brand); }

  /* Steps strip */
  .steps { background:#fff; border-bottom:1px solid var(--line); }
  .steps-inner { max-width: var(--container-max); margin:0 auto; padding:18px var(--gutter); display:flex; align-items:center; gap:0; overflow-x:auto; }
  .step { display:inline-flex; align-items:center; gap:12px; padding-right:28px; flex-shrink:0; }
  .step + .step { padding-left:28px; border-left:1px solid var(--line); }
  .step .num { width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); color: var(--muted-2); display:grid; place-items:center; font-size:12.5px; font-weight:800; flex-shrink:0; }
  .step.done .num { background: var(--ok); color:#fff; border-color: var(--ok); }
  .step.active .num { background: var(--brand); color:#fff; border-color: var(--brand); }
  .step .lbl { line-height:1.2; }
  .step .l-top { font-size:11px; color: var(--muted-2); letter-spacing:0.06em; text-transform:uppercase; font-weight:700; }
  .step .l-bot { font-size:13.5px; font-weight:700; color: var(--ink); margin-top:2px; }
  .step.todo .l-bot { color: var(--muted-2); font-weight:600; }

  /* Layout */
  .layout { display:grid; grid-template-columns:1.6fr 1fr; gap:32px; padding: 40px 0 80px; align-items:start; }
  .col { display:flex; flex-direction:column; gap:36px; }
  .stack-section h2 { font-size:20px; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:14px; }
  .stack-section h2 .num { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:999px; background: var(--ink); color:#fff; font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:500; }
  .stack-section h2 .num--wide { width:36px; }
  .stack-section h2 small { color: var(--muted-2); font-size:13px; font-weight:600; }
  .stack-section--sub { margin-top:-18px; }
  .stack-subtitle { margin:0 0 12px; font-size:15px; font-weight:800; color:var(--ink); }
  .stack-subtitle--spaced { margin-top:24px; }

  .booking-urgency {
    display:flex; align-items:flex-start; gap:12px;
    padding:14px 16px;
    border:1px solid #f0c46a;
    border-radius:var(--radius-sm);
    background:#fff9eb;
    color:#624415;
    font-size:13.5px;
    line-height:1.55;
  }
  .booking-urgency strong { display:block; color:#3f2c0e; }
  .booking-urgency__icon {
    width:30px; height:30px; flex:0 0 30px;
    display:grid; place-items:center;
    border-radius:50%; background:var(--brand); color:#fff;
  }
  .booking-urgency__icon svg { width:15px; height:15px; }

  .api-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding: 22px; }
  .api-card .api-html table { width:100%; border-collapse:collapse; }
  .api-card .api-html td { padding:8px 12px; border-bottom:1px solid var(--line-2); font-size:14px; vertical-align:top; }
  .api-card .api-html td:first-child { color: var(--muted); white-space:nowrap; }
  .api-card .api-html button { display:none; }

  .upgrade-form { display:flex; flex-direction:column; gap:36px; }
  .upgrade-groups { display:grid; gap:24px; }
  .upgrade-group h3 { margin:0 0 10px; font-size:15px; font-weight:800; }
  .upgrade-list { display:grid; gap:8px; }
  /* Two columns: the choice itself, and whatever settles it — a price, or the
     button that fetches one. The check used to sit on its own line below the
     row, which turned a list of rooms into a stack of buttons. */
  .upgrade-row {
    display:grid; grid-template-columns:1fr auto; gap:6px 16px;
    align-items:center; padding:14px 16px;
    border:1px solid var(--line-2); border-radius:14px;
    background:#fff;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  /* The label is the target — stretched to the row's height and never shorter
     than a thumb. A pending row carries no status line, so without this its
     hit area shrank to the 20px radio itself. */
  .upgrade-row__main {
    display:flex; align-items:center; gap:12px;
    align-self:stretch; min-height:40px;
    min-width:0; cursor:pointer;
  }
  .upgrade-row__text { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .upgrade-row__aside {
    display:flex; align-items:center; justify-content:flex-end; gap:10px;
    justify-self:end; text-align:right;
  }
  .upgrade-row:hover { border-color:#cdd2d8; }
  .upgrade-row input[type="radio"],
  .upgrade-row input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px;
    margin: 0; flex-shrink: 0;
    border: 2px solid #d4d8dd; background: #fff;
    cursor: pointer;
    display: inline-grid; place-content: center;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .upgrade-row input[type="radio"]    { border-radius: 50%; }
  .upgrade-row input[type="checkbox"] { border-radius: 6px; }
  .upgrade-row:hover input:not(:disabled) { border-color: var(--brand); }
  .upgrade-row input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(244,155,6,0.28);
    border-color: var(--brand);
  }
  .upgrade-row input:checked {
    border-color: var(--brand);
    background: var(--brand);
  }
  .upgrade-row input[type="radio"]:checked::after {
    content: ""; width: 8px; height: 8px;
    border-radius: 50%; background: #fff;
  }
  .upgrade-row input[type="checkbox"]:checked::after {
    content: ""; width: 14px; height: 14px;
    background: center / 14px 14px no-repeat
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
  }
  .upgrade-row input:disabled {
    background: #f5f7f9; border-color: #e4e7eb;
    cursor: not-allowed;
  }
  .upgrade-row .label { font-weight:700; font-size:14px; }
  .upgrade-row .meta  { color: var(--muted-2); font-size:12px; }
  .upgrade-row .price { font-weight:800; white-space:nowrap; font-size:15px; }
  /* Orange marks one thing on this list: the row you picked. A row that still
     needs a price check stays neutral — twelve amber-filled rows read as
     twelve warnings — and says nothing, because its button already does. */
  .upgrade-row .meta:empty { display:none; }
  .upgrade-row:has(input:checked) {
    border-color: var(--brand);
    background:#fffdf9;
    box-shadow: 0 0 0 3px rgba(244,155,6,0.10);
  }
  .upgrade-row.is-disabled { opacity:0.55; }
  /* Not selectable *yet* is not the same as sold out — a room waiting for its
     price check has to stay readable, or the list looks half unavailable. */
  .upgrade-row.is-pending.is-disabled { opacity:1; }
  .upgrade-row.is-disabled .upgrade-row__main,
  .upgrade-row.is-disabled input { cursor: not-allowed; }
  .upgrade-check-action { display:flex; align-items:center; }
  /* Once the check has answered, the wrapper must not keep holding a gap. */
  .upgrade-check-action:has([hidden]) { display:none; }
  .upgrade-check-button {
    padding:8px 13px; border:1px solid var(--line); border-radius:999px;
    background:#fff; color:var(--ink); font:inherit; font-size:12.5px; font-weight:700;
    white-space:nowrap; cursor:pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
  }
  .upgrade-check-button:hover { border-color:var(--brand); color:var(--brand-text); background:#fffdf9; }
  .upgrade-check-button:disabled { cursor:wait; opacity:.7; }
  .upgrade-check-status:empty { display:none; }
  .upgrade-check-status {
    grid-column:1 / -1;
    padding-left:32px;
    color:var(--muted-2); font-size:12px; line-height:1.4;
  }
  .upgrade-row--none { background:var(--surface-3); }
  .upgrade-row--none:has(input:checked) { background:#fffdf9; }
  .upgrade-form__submit {
    align-self:flex-start;
    padding:10px 18px;
    background: var(--ink); color:#fff;
    border:none; border-radius:999px;
    font-family:inherit; font-weight:700; font-size:13px;
    cursor:pointer;
  }

  /* Sidebar */
  .side { position: sticky; top: 20px; display:flex; flex-direction:column; gap:16px; }
  .booking-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding:22px; box-shadow: 0 8px 30px -12px rgba(0,0,0,0.08); }
  .booking-card__title { display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:19px; }
  .booking-card__title > span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--ink); color:#fff; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; }
  .booking-card .eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color: var(--muted-2); display:flex; align-items:center; gap:8px; }
  .booking-card .eyebrow .live { width:6px; height:6px; border-radius:50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(46,139,87,0.18); }
  .price-rows { margin-top:14px; }
  .price-rows .row { display:flex; justify-content:space-between; padding:8px 0; font-size:14px; color: var(--muted); }
  .price-rows .row strong { color: var(--ink); font-weight:700; }
  .price-rows .row.big { font-size: 20px; font-weight:800; padding-top:14px; border-top:1px solid var(--line); color: var(--ink); margin-top:6px; }
  .submit-btn { width:100%; margin-top:18px; padding:16px 22px; background: var(--brand); color:#fff; border:none; border-radius:999px; font-family:inherit; font-weight:800; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition: transform .15s ease; letter-spacing:0.02em; }
  .submit-btn:hover { transform: translateY(-1px); }
  .submit-btn:disabled { cursor: wait; opacity: .75; transform: none; }

  .selected-upgrades { margin-top: 18px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
  .selected-upgrades .lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
  .selected-upgrades .su-group + .su-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
  .selected-upgrades .su-group-name { font-size: 12px; font-weight: 700; color: var(--muted-2); margin-bottom: 4px; }
  .selected-upgrades .su-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; color: var(--ink); }
  .selected-upgrades .su-row .pr { font-weight: 700; color: var(--brand); }
  .submit-sub { margin-top:10px; font-size:12px; color: var(--muted-2); text-align:center; line-height:1.5; }

  .insurance-list { display:grid; gap:10px; }
  .insurance-row .price { color: var(--brand-text); font-weight:800; font-size:14px; }
  .insurance-row .docs { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .insurance-row .docs a { font-size:12px; color: var(--muted); border-bottom:1px dotted var(--muted); }
  .insurance-row .docs a:hover { color: var(--brand); border-color: var(--brand); }
  [data-insurance-pricing-content][aria-busy="true"] { opacity:.62; pointer-events:none; }
  .insurance-pricing-status { min-height:20px; margin:10px 0 0; color:var(--muted-2); font-size:13px; line-height:1.5; }
  .insurance-pricing-status.is-error { color:var(--danger, #a52a2a); }
  .insurance-pricing-retry { margin-top:8px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
  .insurance-pricing-retry:hover { border-color:var(--brand); color:var(--brand-text); }
  .pay-grid { display:flex; flex-wrap:wrap; gap:8px; }
  .pay-grid .pill { padding:10px 14px; font-size:13px; }

  .badges { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:16px; border-top:1px dashed var(--line); margin-top:16px; }
  .badge-item { display:flex; gap:10px; align-items:flex-start; font-size:11.5px; color: var(--muted); line-height:1.35; }
  .badge-item .ico { width:24px; height:24px; flex-shrink:0; border-radius:999px; background: var(--surface); color: var(--ink); display:grid; place-items:center; }
  .badge-item .ico svg { width:12px; height:12px; }
  .badge-item strong { color: var(--ink); display:block; font-weight:700; font-size:12px; }

  .side-contact { padding:18px; background: var(--ink); color:#fff; border-radius: var(--radius-md); }
  .side-contact .lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color: rgba(255,255,255,0.55); margin-bottom:10px; }
  .side-contact .row { display:flex; gap:12px; align-items:center; }
  .side-contact .phone-ico { width:40px; height:40px; border-radius:50%; background: var(--brand); display:grid; place-items:center; flex-shrink:0; }
  .side-contact .phone-ico svg { width:18px; height:18px; }
  .side-contact .number { font-size:17px; font-weight:800; letter-spacing:-0.01em; }
  .side-contact .hours { font-size:11.5px; color: rgba(255,255,255,0.65); margin-top:2px; }

  .formblatt-card { background: var(--surface-2); border:1px solid var(--line); border-radius: var(--radius-md); padding:16px; font-size:12px; color: var(--muted); line-height:1.6; }
  .formblatt-card strong { color: var(--ink); }

  .small-link { color: var(--muted-2); font-size:12px; }
  .small-link:hover { color: var(--brand); }

  @media (max-width: 960px) {
    .layout { grid-template-columns: 1fr; gap: 28px; padding: 32px 0 64px; }
    .side { position: static; }
    .col { gap: 28px; }
    .page-head .inner { padding-block: 28px 36px; }
  }
  @media (max-width: 640px) {
    .page-head .inner { padding-block: 24px 32px; }
    .ph-eyebrow { font-size: 20px; margin-bottom: 6px; }
    .ph-crumbs { margin-bottom: 16px; }
    .ph-lede { font-size: 13.5px; padding-left: 14px; }
    .steps-inner { padding: 14px var(--gutter); gap: 0; }
    .step { padding-right: 18px; }
    .step + .step { padding-left: 18px; }
    .step .l-top { display: none; }
    .step .l-bot { font-size: 12.5px; }
    .layout { padding: 24px 0 56px; gap: 24px; }
    .col { gap: 22px; }
    .stack-section h2 { font-size: 18px; gap: 10px; }
    .api-card { padding: 16px; }
    .api-card .api-html td { font-size: 13px; padding: 6px 8px; }
    .upgrade-row { padding: 12px 14px; gap: 10px; }
    .upgrade-row .label { font-size: 13.5px; }
    .upgrade-row .price { font-size: 14px; }
    .upgrade-check-button { min-height: 40px; }
    .booking-card { padding: 18px; }
    .price-rows .row { font-size: 13.5px; }
    .price-rows .row.big { font-size: 18px; padding-top: 12px; }
    .submit-btn { padding: 14px 18px; font-size: 14px; }
    .badges { grid-template-columns: 1fr; }
    .side-contact { padding: 16px; }
    .form-card { padding: 18px; }
    .traveler-card { padding: 14px; }
    .agb-row { padding: 12px 14px; font-size: 12.5px; }
    .formblatt-expand { padding: 2px 18px; }
    .formblatt-expand summary { font-size: 13.5px; padding: 12px 0; }
    .stack-section h2 { flex-wrap: wrap; }
    .section-flag { margin-left: 0; }
    .booking-alert { padding: 14px 15px; }
    .booking-alert__title { font-size: 15px; }
  }
  /* Below this the label and its check button stop sharing a line honestly —
     the button then sits under the label, still inside the same row. */
  @media (max-width: 520px) {
    .upgrade-row { grid-template-columns: 1fr; }
    .upgrade-row__aside {
      justify-self: start; justify-content: flex-start;
      padding-left: 32px; text-align: left;
    }
    .upgrade-check-status { padding-left: 32px; }
  }

  /* ------ Confirm form (sections 07–14) ------ */

  .confirm-form { display:flex; flex-direction:column; gap:36px; }

  .form-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius-md);
    padding:22px;
    display:flex; flex-direction:column; gap:14px;
  }

  .form-grid { display:grid; gap:14px; grid-template-columns: 1fr 1fr; }
  .form-grid--full { grid-template-columns: 1fr; }
  .form-grid--zip  { grid-template-columns: 120px 1fr 1fr; }
  .form-grid--cc   { grid-template-columns: 1fr 1fr 1fr; }
  @media (max-width: 700px) {
    .form-grid, .form-grid--zip, .form-grid--cc { grid-template-columns: 1fr; }
  }

  /* Jump targets for the missing-data panel: land the field below the nav,
     not underneath it. */
  .form-field, .agb-row, .payment-list, .insurance-list, .upgrade-group, .traveler-card {
    scroll-margin-top: 100px;
  }
  .form-field { display:flex; flex-direction:column; gap:6px; }
  .form-field--full { grid-column: 1 / -1; }
  .form-label { font-size:13px; font-weight:700; color: var(--ink); }
  .form-hint  { font-size:12px; color: var(--muted-2); margin:0; }
  .mock-data-hint { margin-top:12px; color:var(--muted-2); font-size:12px; line-height:1.55; }
  .payment-terms { margin:0 0 4px; padding:12px 14px; border-radius:12px; background:var(--surface-2); color:var(--muted); font-size:12.5px; line-height:1.6; }
  .payment-terms strong { color:var(--ink); }

  .form-input,
  .form-select,
  .form-textarea {
    width:100%;
    padding:11px 14px;
    font-family: inherit; font-size:14px;
    background:#fff;
    border:1px solid var(--line-2);
    border-radius:14px;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .form-textarea { resize:vertical; min-height:88px; }
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline:none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(244,155,6,0.28);
  }
  .form-input.is-invalid,
  .form-select.is-invalid,
  .form-textarea.is-invalid {
    border-color: #d23a3a;
    background: #fff7f7;
  }
  .form-err {
    font-size:12px; font-weight:600; color: #b32424;
    display:flex; align-items:center; gap:6px;
  }
  .form-err::before {
    content:""; width:6px; height:6px; border-radius:50%; background:#b32424;
  }

  .radio-pills { display:flex; gap:8px; flex-wrap:wrap; }
  .radio-pill {
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 14px;
    border:1px solid var(--line-2);
    border-radius:999px;
    background:#fff;
    cursor:pointer;
    font-size:13.5px; font-weight:600;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .radio-pill input { -webkit-appearance:none; appearance:none; width:16px; height:16px; margin:0; border:2px solid #d4d8dd; border-radius:50%; background:#fff; display:inline-grid; place-content:center; }
  .radio-pill input:checked { border-color: var(--brand); background: var(--brand); }
  .radio-pill input:checked::after { content:""; width:6px; height:6px; border-radius:50%; background:#fff; }
  .radio-pill:has(input:checked) {
    border-color: var(--brand);
    background:#fffbf3;
    box-shadow: 0 0 0 3px rgba(244,155,6,0.10);
  }

  .traveler-card {
    padding:16px;
    border:1px dashed var(--line);
    border-radius: var(--radius-sm);
    display:flex; flex-direction:column; gap:14px;
    background: var(--surface-2);
  }
  .traveler-card__head {
    font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.08em;
    color: var(--muted-2);
  }

  /* Insurance and payment reuse .upgrade-row wholesale — only the document
     links below an insurance name are specific to it. */
  .insurance-row .docs {
    display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
  }
  .insurance-row .docs a {
    display:inline-block; min-height:24px; line-height:24px;
    font-size:12px; color: var(--muted);
    border-bottom:1px dotted var(--muted);
  }
  .insurance-row .docs a:hover { color: var(--brand); border-color: var(--brand); }

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

  .payment-fields {
    display:none;
    margin-top:14px;
    padding:16px;
    background: var(--surface-2);
    border:1px solid var(--line-2);
    border-radius: var(--radius-sm);
  }
  .payment-fields[data-active] { display:flex; flex-direction:column; gap:14px; }

  .formblatt-expand {
    border:1px solid var(--line);
    border-radius: var(--radius-md);
    background:#fff;
    padding: 4px 22px;
  }
  .formblatt-expand summary {
    cursor: pointer; list-style: none;
    padding:14px 0; display:flex; align-items:center; justify-content:space-between; gap:12px;
    font-weight:700; font-size:14px;
  }
  .formblatt-expand summary::-webkit-details-marker { display:none; }
  .formblatt-expand summary .hint {
    font-size:12px; font-weight:600; color: var(--brand);
  }
  .formblatt-expand summary .hint::before { content: "mehr anzeigen"; }
  .formblatt-expand[open] summary .hint::before { content: "weniger anzeigen"; }
  .formblatt-expand summary .hint::after { content: " ▾"; }
  .formblatt-expand[open] summary .hint::after { content: " ▴"; }
  .formblatt-expand__body { padding:0 0 16px; font-size:13px; color: var(--muted); line-height:1.65; }
  .formblatt-expand__body ul { margin:10px 0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
  .formblatt-expand__body a { color: var(--brand); }

  .agb-row {
    display:flex; gap:12px; align-items:flex-start;
    padding:14px 16px;
    border:1px solid var(--line-2);
    border-radius:14px;
    background:#fff;
    cursor:pointer;
    font-size:13px; line-height:1.55; color: var(--muted);
  }
  .agb-row.is-invalid { border-color:#d23a3a; background:#fff7f7; }
  .agb-row input[type="checkbox"] {
    -webkit-appearance:none; appearance:none;
    flex-shrink:0; width:20px; height:20px; margin:0;
    border:2px solid #d4d8dd; background:#fff; border-radius:6px;
    display:inline-grid; place-content:center; cursor:pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .agb-row input:checked { border-color: var(--brand); background: var(--brand); }
  .agb-row input:checked::after {
    content:""; width:14px; height:14px;
    background: center / 14px 14px no-repeat
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
  }
  .agb-row a { color: var(--brand-text); text-decoration: underline; }

  /* Per-traveller entry-requirement links. Tap targets stay a full line high
     on a phone and never break mid-name. */
  [data-entry-requirement-links] a {
    display:inline-block;
    min-height:24px;
    color:var(--brand-text);
    font-weight:700;
    line-height:24px;
    text-decoration:underline;
    white-space:nowrap;
  }

  /* One box, both statements — kept as two paragraphs so neither disappears
     into a wall of legal text. */
  .consent-block { display:flex; flex-direction:column; gap:10px; }
  .agb-row__text { display:flex; flex-direction:column; gap:10px; }

  /* Missing-data panel. First thing in the column, because the submit button
     lives in the sidebar: a visitor who lands back on the page after a failed
     submit sees the reason without scrolling for it. */
  .booking-alert {
    border:1px solid #f0c4c4;
    border-left:4px solid #c62f2f;
    background:#fff5f5;
    color:#7a1f1f;
    padding:16px 18px;
    border-radius: var(--radius-sm);
    font-size:13.5px;
    display:flex; flex-direction:column; gap:12px;
    scroll-margin-top:20px;
  }
  /* `display:flex` outranks the UA rule for [hidden], and an empty red box at
     the top of a clean booking page is worse than no panel at all. */
  .booking-alert[hidden] { display:none; }
  /* Focused on load so screen readers announce it; the panel is loud enough
     on its own without a ring around it. */
  .booking-alert:focus, .booking-alert:focus-visible { outline:none; }
  .booking-alert__head { display:flex; align-items:flex-start; gap:12px; }
  .booking-alert__icon {
    flex:0 0 26px; width:26px; height:26px; border-radius:50%;
    background:#c62f2f; color:#fff;
    display:grid; place-items:center;
    font-size:15px; font-weight:800; line-height:1;
  }
  .booking-alert__title { display:block; font-size:16px; color:#7a1f1f; }
  .booking-alert__lede { margin:4px 0 0; font-size:13px; line-height:1.55; color:#8a3636; }
  .booking-alert__lede strong { color:#7a1f1f; }
  .booking-alert__list { margin:0; padding:0; list-style:none; display:grid; gap:6px; }
  .booking-alert__list li { display:flex; }
  .booking-alert__list a {
    display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;
    width:100%; padding:8px 12px;
    border:1px solid #f3cfcf; border-radius:10px;
    background:#fff;
    color:#7a1f1f; text-decoration:none;
    transition: border-color .15s ease, background .15s ease;
  }
  .booking-alert__list a:hover { border-color:#c62f2f; background:#fffafa; }
  .booking-alert__field { font-weight:800; font-size:13px; }
  .booking-alert__field::after { content:"›"; margin-left:6px; opacity:.6; }
  .booking-alert__msg { font-size:12.5px; color:#8a3636; }

  /* Section heading badge, so a collapsed-away section still says it needs work. */
  .section-flag {
    margin-left:auto;
    padding:4px 10px;
    border-radius:999px;
    background:#fdeaea; color:#a12626;
    font-size:11.5px; font-weight:800; letter-spacing:0.01em;
    white-space:nowrap;
  }

  .form-field.is-invalid,
  .payment-list.is-invalid {
    border-radius:12px;
    box-shadow: 0 0 0 3px rgba(198,47,47,0.12);
    outline:1px solid #e6a6a6;
    outline-offset:6px;
  }

  .booking-mock-notice {
    border: 1px solid #f3c565;
    background: #fff8e8;
    color: #6a4700;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    line-height: 1.55;
  }
  .booking-mock-notice strong { display: block; color: #4e3400; margin-bottom: 2px; }

  /* "You have already sent this one." Green, not amber: nothing is wrong and
     nothing is required — the visitor is being told where their booking is. */
  .booking-sent-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid #b9dcc7;
    background: #f2faf5;
    color: #1f5137;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    line-height: 1.55;
  }
  .booking-sent-notice strong { display: block; color: #14432c; margin-bottom: 2px; }
  .booking-sent-notice__icon {
    flex: none;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
  }
  .booking-sent-notice__icon svg { width: 13px; height: 13px; }
  .booking-sent-notice a {
    display: inline-block;
    margin-top: 4px;
    min-height: 24px; line-height: 24px;
    color: #14432c;
    font-weight: 700;
    text-decoration: underline;
  }