body { min-height: 100vh; }
  #app { max-width: 720px; margin: 0 auto; padding: var(--sc-space-4) var(--sc-space-4) var(--sc-space-8); min-height: 100vh; display:flex; flex-direction:column; }
  .view { flex: 1; display:flex; flex-direction:column; }
  .home-center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; }
  .topbar { display:flex; align-items:center; justify-content:space-between; padding: var(--sc-space-2) 2px var(--sc-space-6); }
  .wordmark { display:flex; align-items:center; gap: var(--sc-space-3); }
  .wordmark .dot { width:50px; height:50px; border-radius:50%; flex-shrink:0; object-fit: cover; }
  .wordmark span { font-family: var(--sc-font-display); font-weight:700; font-size: var(--sc-text-lg); color: var(--sc-color-heading); }
  .stack { display:flex; flex-direction:column; gap: var(--sc-space-4); }
  .sc-btn-block { width:100%; justify-content:center; }
  .hint { font-size: var(--sc-text-sm); color: var(--sc-color-text-muted); line-height:1.5; }
  .hint-error { color: var(--sc-color-error); }
  .home-hero { text-align:center; padding: 0 var(--sc-space-2); }
  .home-hero-icon {
    width:72px; height:72px; border-radius:50%; margin: 0 auto var(--sc-space-6); display:flex; align-items:center; justify-content:center;
    background: var(--sc-orange-tint); color: var(--sc-navy);
  }
  html[data-theme="dark"] .home-hero-icon { background: rgba(255,178,63,0.18); color: var(--sc-orange); }
  @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .home-hero-icon { background: rgba(255,178,63,0.18); color: var(--sc-orange); } }
  .home-hero h1 { font-size: var(--sc-text-2xl); line-height:1.15; margin-bottom: var(--sc-space-3); }
  .home-hero p { color: var(--sc-color-text-muted); font-size: var(--sc-text-base); margin: 0 0 var(--sc-space-6); line-height:1.5; }
  .home-actions { display:flex; flex-direction:column; gap: var(--sc-space-3); }
  .back-row { display:flex; align-items:center; gap: var(--sc-space-3); margin-bottom: var(--sc-space-4); }
  .board-head { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--sc-space-3); margin-bottom: var(--sc-space-4); }
  .board-title h2 { font-size: var(--sc-text-xl); }
  .code-pill {
    display:inline-flex; align-items:center; gap: var(--sc-space-2); margin-top: var(--sc-space-2); background: var(--sc-color-surface);
    border:1px solid var(--sc-color-border); padding: 7px 7px 7px var(--sc-space-3); border-radius: var(--sc-radius-pill);
    font-size: var(--sc-text-sm); color: var(--sc-color-text-muted);
  }
  .code-pill b { color: var(--sc-color-heading); font-family: var(--sc-font-display); letter-spacing:.06em; }
  .day-group { margin-bottom: var(--sc-space-6); }
  .day-title { font-family: var(--sc-font-display); font-weight:700; font-size: var(--sc-text-sm); margin-bottom: var(--sc-space-2); color: var(--sc-color-text-muted); }
  .slot-list { display:flex; flex-direction:column; gap: var(--sc-space-2); }
  .slot-row {
    display:flex; align-items:center; justify-content:space-between; gap: var(--sc-space-3); padding: var(--sc-space-3) var(--sc-space-4);
    border-radius: var(--sc-radius-sm); border: 1px solid var(--sc-color-border); background: var(--sc-color-surface);
  }
  .slot-row.free { cursor:pointer; }
  .slot-row.free:hover { border-color: var(--sc-teal); }
  .slot-row.taken { opacity:.55; }
  .slot-time { font-family: var(--sc-font-display); font-weight:700; font-size: var(--sc-text-base); color: var(--sc-color-heading); }
  .modal-header h3 { margin: 0 0 var(--sc-space-3); }
  .resend-box { margin-top: var(--sc-space-6); padding-top: var(--sc-space-6); border-top: 1px solid var(--sc-color-border); }
  .resend-box .row { display:flex; gap: var(--sc-space-2); }
  .resend-box input { flex:1; }
  .empty-state { text-align:center; padding: var(--sc-space-8) var(--sc-space-3); color: var(--sc-color-text-muted); }

/* Termin-Code-Eingabe: Großbuchstaben, gesperrt, in der Display-Schrift. */
.code-input {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: var(--sc-font-display);
}

/* Abweichungen von base.css: etwas kräftigere Fußzeile, größeres Logo,
   und im Buchungsdialog steht unter der Überschrift noch Datum + Uhrzeit. */
.brand-footer { opacity: .8; }
.brand-footer .brand-logo { height: 20px; }
.modal-header h3 { margin: 0 0 var(--sc-space-3); }