/* ============================================================================
 * Abflugradar - Gestaltung nach Apples Human Interface Guidelines
 * (developer.apple.com/design/human-interface-guidelines, Stand 21.09.2026)
 *
 * Drei Vorgaben bestimmen den Aufbau:
 *
 * 1. Systemschrift, nicht eingebettet ("don't embed system fonts"). Auf
 *    Apple-Geraeten liefert der Stack echtes SF Pro, anderswo die jeweilige
 *    Systemschrift. Keine leichten Schnitte - HIG: "avoid Ultralight, Thin
 *    and Light". Basisgroesse 17 px, die iOS-Standardgroesse.
 *
 * 2. Liquid Glass ausschliesslich in der Funktionsebene. HIG: "Don't use
 *    Liquid Glass in the content layer." Glas bekommt hier nur die
 *    schwebende Bedienleiste; Karten und Listen sind opake Standardflaechen.
 *
 * 3. Eine Farbe, eine Bedeutung. HIG: "Avoid using the same color to mean
 *    different things." Blau (systemBlue) heisst ueberall "bedienbar",
 *    Gruen (systemGreen) heisst ueberall "Ersparnis". Nie umgekehrt.
 * ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Systemfarben, helle Darstellung ------------------------------------
     Werte nach der HIG-Referenz. Apple weist darauf hin, dass die echten
     Werte je Release schwanken koennen - im Web muessen sie fest stehen. */
  --blue: #007AFF;
  --blue-press: #0062CC;
  --green: #34C759;
  --green-deep: #248A3D;
  --orange: #FF9500;
  --red: #FF3B30;

  /* Hintergrundebenen (systemBackground / secondary / tertiary) */
  --bg: #F2F2F7;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --fill: rgba(120, 120, 128, .12);
  --fill-2: rgba(120, 120, 128, .08);

  /* Textebenen (label / secondaryLabel / tertiaryLabel) */
  --label: #000000;
  --label-2: rgba(60, 60, 67, .60);
  --label-3: rgba(60, 60, 67, .30);
  --separator: rgba(60, 60, 67, .29);
  --separator-opaque: #C6C6C8;

  /* Liquid Glass, regulaere Variante: verwischt und hellt auf */
  --glass: rgba(250, 250, 252, .78);
  --glass-line: rgba(60, 60, 67, .16);
  --glass-shadow: 0 1px 0 rgba(60, 60, 67, .06), 0 8px 28px -12px rgba(0, 0, 0, .18);

  /* Preisstufen im Kalender: eine gruene Skala, weil sie Geld bedeutet */
  --heat-0: #34C759;
  --heat-1: #7BD695;
  --heat-2: #B6E3C2;
  --heat-3: #D8DCE3;
  --heat-4: #BFC5CF;

  /* Radien nach iOS-Vorbild: Karten 16, Bedienelemente 12, Pillen 980 */
  --r-card: 16px;
  --r-control: 12px;
  --r-pill: 980px;

  /* 4-pt-Raster */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue: #0A84FF;
    --blue-press: #409CFF;
    --green: #30D158;
    --green-deep: #30D158;
    --orange: #FF9F0A;
    --red: #FF453A;

    --bg: #000000;
    --surface: #1C1C1E;
    --surface-2: #2C2C2E;
    --fill: rgba(120, 120, 128, .24);
    --fill-2: rgba(120, 120, 128, .16);

    --label: #FFFFFF;
    --label-2: rgba(235, 235, 245, .60);
    --label-3: rgba(235, 235, 245, .30);
    --separator: rgba(84, 84, 88, .65);
    --separator-opaque: #38383A;

    --glass: rgba(34, 34, 37, .74);
    --glass-line: rgba(255, 255, 255, .12);
    --glass-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 8px 28px -12px rgba(0, 0, 0, .7);

    --heat-0: #30D158;
    --heat-1: #248A3D;
    --heat-2: #1C5B2C;
    --heat-3: #3A3A3C;
    --heat-4: #2C2C2E;
  }
}

:root[data-theme="dark"] {
  --blue: #0A84FF;
  --blue-press: #409CFF;
  --green: #30D158;
  --green-deep: #30D158;
  --orange: #FF9F0A;
  --red: #FF453A;

  --bg: #000000;
  --surface: #1C1C1E;
  --surface-2: #2C2C2E;
  --fill: rgba(120, 120, 128, .24);
  --fill-2: rgba(120, 120, 128, .16);

  --label: #FFFFFF;
  --label-2: rgba(235, 235, 245, .60);
  --label-3: rgba(235, 235, 245, .30);
  --separator: rgba(84, 84, 88, .65);
  --separator-opaque: #38383A;

  --glass: rgba(34, 34, 37, .74);
  --glass-line: rgba(255, 255, 255, .12);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 8px 28px -12px rgba(0, 0, 0, .7);

  --heat-0: #30D158;
  --heat-1: #248A3D;
  --heat-2: #1C5B2C;
  --heat-3: #3A3A3C;
  --heat-4: #2C2C2E;
}

/* --- Grundlagen ---------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { min-height: 100%; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  /* HIG: Systemschrift verwenden, nicht einbetten. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;             /* iOS-Standardgroesse */
  line-height: 1.294;          /* 22/17, die Body-Zeilenhoehe */
  letter-spacing: -.022em;     /* SF-Tracking bei 17 pt */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--s4); }

/* --- Textstile nach iOS --------------------------------------------------- */
h1 {
  font-size: clamp(34px, 4.6vw, 44px);
  line-height: 1.07;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: 22px; line-height: 1.27; letter-spacing: -.026em; font-weight: 600; margin: 0; }
.headline { font-size: 17px; font-weight: 600; letter-spacing: -.022em; }
.subhead { font-size: 15px; letter-spacing: -.01em; color: var(--label-2); }
.footnote { font-size: 13px; letter-spacing: -.006em; color: var(--label-2); }
.caption {
  font-size: 12px; letter-spacing: 0; color: var(--label-2);
}
.mono-num { font-variant-numeric: tabular-nums; }

/* --- Kopfbereich ---------------------------------------------------------- */
.board-head { padding-block: var(--s8) var(--s5); }
.head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4);
}
.eyebrow {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 13px; font-weight: 600; letter-spacing: -.006em;
  color: var(--label-2); margin: 0;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
h1 .count { color: var(--blue); }
.subline {
  margin: var(--s3) 0 0; color: var(--label-2);
  font-size: 17px; line-height: 1.35; max-width: 62ch;
}
.subline b { color: var(--label); font-weight: 600; }

/* --- Funktionsebene: Liquid Glass ----------------------------------------
   HIG Materials: "Liquid Glass forms a distinct functional layer for controls
   and navigation elements [...] that floats above the content layer" und
   "Don't use Liquid Glass in the content layer."

   Deshalb bekommt genau EIN Element Glas: die Navigationsleiste, die beim
   Scrollen einschwebt. Das Suchformular ist Inhalt und liegt auf einer
   normalen Standardflaeche. */
/*
 * Schwebende Kapsel statt bildschirmbreiter Leiste. Zwei Gruende:
 * Apples aktuelle Formsprache setzt auf frei schwebende Glas-Elemente - und
 * eine bildschirmbreite Flaeche mit backdrop-filter ueber einer mehrere
 * tausend Pixel hohen Seite bringt die Darstellung zum Erliegen (gemessen:
 * die Seite blieb komplett leer, bis der Filter abgeschaltet war).
 * Die kleine Kapsel hat dieses Problem nicht.
 */
.navbar {
  position: fixed; z-index: 50;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  width: fit-content; max-width: calc(100% - 32px);
  padding: 7px 7px 7px var(--s4);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: .5px solid var(--glass-line);
  border-radius: var(--r-pill);
  box-shadow: var(--glass-shadow);
  transform: translateX(-50%) translateY(calc(-100% - 24px));
  transition: transform .3s cubic-bezier(.32, .72, 0, 1), opacity .2s ease;
  opacity: 0;
}
.navbar.visible { transform: translateX(-50%); opacity: 1; }
.navbar-inner {
  display: flex; align-items: center; gap: var(--s3);
}
.navbar-title {
  font-size: 17px; font-weight: 600; letter-spacing: -.022em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.navbar-action {
  font: inherit; font-size: 15px; font-weight: 600; color: #fff;
  background: var(--blue); border: 0; border-radius: var(--r-pill); cursor: pointer;
  padding: 8px 16px; min-height: 36px; white-space: nowrap;
  transition: background-color .18s ease;
}
.navbar-action:hover { background: var(--blue-press); }
/*
 * HIG Color: "Even if your app ships in a single appearance mode, provide
 * both light and dark colors to support Liquid Glass adaptivity." Wer
 * Transparenz reduziert, bekommt stattdessen eine deckende Flaeche.
 */
@media (prefers-reduced-transparency: reduce) {
  .navbar {
    background: var(--surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* Das Suchformular ist Inhalt, kein Glas. */
.controls {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .04);
  padding: var(--s4);
  margin-top: var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
}
:root[data-theme="dark"] .controls { box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .controls { box-shadow: none; }
}

/* --- Segmentierte Steuerung nach iOS-Vorbild ------------------------------ */
.segmented {
  display: flex; flex-wrap: wrap; gap: 2px;
  background: var(--fill-2); border-radius: 10px; padding: 2px;
}
.segmented button {
  flex: 1 1 auto; min-height: 34px; padding: 6px 12px;
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -.01em;
  color: var(--label); background: transparent;
  border: 0; border-radius: 8px; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.segmented button:hover { color: var(--label); background: var(--fill-2); }
.segmented button[aria-pressed="true"] {
  background: var(--surface); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04);
}
:root[data-theme="dark"] .segmented button[aria-pressed="true"] { background: var(--surface-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .segmented button[aria-pressed="true"] { background: var(--surface-2); }
}
.segmented.theme { flex: 0 0 auto; }
.segmented.theme button { flex: 0 0 auto; font-size: 13px; padding: 5px 11px; min-height: 30px; }

/* --- Formularfelder ------------------------------------------------------- */
.grid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field label {
  font-size: 12px; font-weight: 500; letter-spacing: -.006em; color: var(--label-2);
  padding-left: 2px;
}
.field input, .field select {
  font: inherit; font-size: 16px; letter-spacing: -.02em;
  color: var(--label); background: var(--fill-2);
  border: .5px solid transparent; border-radius: 10px;
  padding: 10px 12px; width: 100%; min-width: 0; min-height: 44px;   /* HIG: 44 pt */
  appearance: none; -webkit-appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--label-2) 50%),
                    linear-gradient(135deg, var(--label-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 32px;
}
.field input:focus-visible, .field select:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 55%, transparent);
  outline-offset: 2px;
}
.submit {
  font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -.022em;
  background: var(--blue); color: #fff; border: 0; border-radius: var(--r-control);
  padding: 13px 20px; min-height: 50px; cursor: pointer; grid-column: 1 / -1;
  transition: background-color .18s ease, transform .1s ease;
}
.submit:hover { background: var(--blue-press); }
.submit:active { transform: scale(.985); }
.submit[disabled] { opacity: .4; cursor: progress; }

/* --- Flughäfen im Umland -------------------------------------------------- */
.nearby { display: flex; flex-direction: column; gap: var(--s2); }
.nearby .tool-label, .tool-label {
  font-size: 12px; font-weight: 500; color: var(--label-2); padding-left: 2px;
}
.nearby .segmented { background: transparent; padding: 0; gap: var(--s2); }
.nearby .segmented button {
  flex: 0 0 auto; background: var(--fill-2); border-radius: var(--r-pill);
  min-height: 36px; padding: 7px 14px; font-size: 14px;
}
.nearby .segmented button[aria-pressed="true"] {
  background: var(--blue); color: #fff; box-shadow: none;
}
.nearby button .km { font-size: 12px; opacity: .65; margin-left: 5px; }
.nearby-note { margin: 0; font-size: 12px; color: var(--label-3); max-width: 64ch; }

/* --- Fortschritt ---------------------------------------------------------- */
.scanline { padding-block: var(--s4); }
.scanbar {
  height: 4px; background: var(--fill); border-radius: var(--r-pill); overflow: hidden;
}
.scanbar i {
  display: block; height: 100%; width: 0; background: var(--blue);
  border-radius: var(--r-pill); transition: width .35s ease;
}
.scanline p { margin: var(--s2) 0 0; font-size: 13px; color: var(--label-2); }

/* --- Inhaltsebene: gruppierte Karten -------------------------------------- */
.deals { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.deal {
  background: var(--surface); border-radius: var(--r-card);
  padding: var(--s4) var(--s5);
  display: grid; gap: var(--s1) var(--s4);
  grid-template-columns: 1fr auto;
  align-items: start;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .04);
}
:root[data-theme="dark"] .deal { box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .deal { box-shadow: none; } }

.rank { display: none; }
.dest { min-width: 0; }
.iata {
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--blue); display: block;
}
.city {
  font-size: 22px; font-weight: 700; letter-spacing: -.026em;
  margin-top: 1px; line-height: 1.2;
}
.country { color: var(--label-2); font-size: 13px; margin-top: 2px; }
.from {
  display: inline-block; margin-top: var(--s2);
  font-size: 11px; font-weight: 600; letter-spacing: -.006em;
  background: var(--fill-2); color: var(--label-2);
  border-radius: var(--r-pill); padding: 3px 9px;
}

.figures { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.price {
  font-size: 28px; font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.instead { font-size: 13px; color: var(--label-2); font-variant-numeric: tabular-nums; }
.instead s { color: var(--label-3); }
.saving {
  margin-top: var(--s1);
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green-deep);
  font-size: 13px; font-weight: 600; letter-spacing: -.006em;
  padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
}
:root[data-theme="dark"] .saving { color: var(--green); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .saving { color: var(--green); } }

.detail {
  grid-column: 1 / -1; margin-top: var(--s3);
  border-top: .5px solid var(--separator); padding-top: var(--s3);
}
.legs { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.leg { display: flex; align-items: baseline; gap: var(--s2); }
.leg .tag { font-size: 12px; color: var(--label-3); }
.leg .when { font-size: 15px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.leg .clock { font-size: 13px; color: var(--label-2); font-variant-numeric: tabular-nums; }
.rankline { margin: var(--s3) 0 0; font-size: 15px; color: var(--label-2); letter-spacing: -.01em; }
.rankline b { color: var(--label); font-weight: 600; }

.alt {
  margin-top: var(--s3); padding: var(--s3);
  background: var(--fill-2); border-radius: 10px;
  font-size: 13px; color: var(--label-2);
}
.alt b { color: var(--label); font-weight: 600; }

.actions { margin-top: var(--s4); display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.book {
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  background: var(--blue); color: #fff; text-decoration: none;
  padding: 11px 18px; min-height: 44px; border-radius: var(--r-control);
  display: inline-flex; align-items: center;
  transition: background-color .18s ease, transform .1s ease;
}
.book:hover { background: var(--blue-press); }
.book:active { transform: scale(.985); }
.drop { font-size: 13px; color: var(--green-deep); font-weight: 600; }

/* --- Preiskalender: schrittweise Offenlegung ------------------------------
   HIG Layout: "Use progressive disclosure to make layouts cleaner." */
.cal-wrap { margin-top: var(--s3); }
.cal-wrap summary {
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  color: var(--blue); cursor: pointer; list-style: none;
  padding: var(--s2) 0; min-height: 34px; display: flex; align-items: center; gap: 6px;
}
.cal-wrap summary::-webkit-details-marker { display: none; }
.cal-wrap summary::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.cal-wrap[open] summary::after { transform: rotate(-135deg) translate(-1px, -1px); }

.cal { margin: var(--s2) 0 0; }
.cal-months { display: flex; gap: var(--s4); flex-wrap: wrap; }
.cal-name { font-size: 12px; font-weight: 500; color: var(--label-2); margin-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 16px); gap: 3px; }
.cal-day { width: 16px; height: 16px; border-radius: 4px; background: var(--fill-2); }
.cal-day.h0 { background: var(--heat-0); }
.cal-day.h1 { background: var(--heat-1); }
.cal-day.h2 { background: var(--heat-2); }
.cal-day.h3 { background: var(--heat-3); }
.cal-day.h4 { background: var(--heat-4); }
.cal-day.pick { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--blue); }
.cal-legend {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--label-2); margin-top: var(--s3);
}
.cal-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* --- Werkzeugleiste ------------------------------------------------------- */
.toolbar {
  display: flex; gap: var(--s5); flex-wrap: wrap; align-items: flex-end;
  margin-top: var(--s6);
}
.tool { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* --- Listenabschnitte (gruppiert, eingerueckt) ---------------------------- */
.drops, .cheapest, .watch, .empty {
  margin-top: var(--s6); background: var(--surface);
  border-radius: var(--r-card); padding: var(--s5);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .04);
}
:root[data-theme="dark"] .drops, :root[data-theme="dark"] .cheapest,
:root[data-theme="dark"] .watch, :root[data-theme="dark"] .empty { box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .drops, :root:not([data-theme="light"]) .cheapest,
  :root:not([data-theme="light"]) .watch, :root:not([data-theme="light"]) .empty { box-shadow: none; }
}
.drops { border-left: 3px solid var(--green); }
.section-note, .cheapest .section-note {
  margin: 5px 0 0; font-size: 13px; color: var(--label-2); max-width: 64ch;
}
.drops ul, .cheapest ul { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.drops li, .cheapest li {
  display: flex; gap: var(--s2) var(--s3); flex-wrap: wrap; align-items: baseline;
  font-size: 15px; padding: var(--s3) 0; border-bottom: .5px solid var(--separator);
}
.drops li:last-child, .cheapest li:last-child { border-bottom: 0; padding-bottom: 0; }
.drops li:first-child, .cheapest li:first-child { padding-top: var(--s2); }
.drops .code, .cheapest .code {
  font-size: 13px; font-weight: 600; color: var(--blue); min-width: 38px;
}
.drops .city, .cheapest .city { font-weight: 600; letter-spacing: -.01em; min-width: 120px; }
.drops .was { color: var(--label-3); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.drops .now, .cheapest .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.drops .pct {
  background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-deep);
  font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-pill);
}
:root[data-theme="dark"] .drops .pct { color: var(--green); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drops .pct { color: var(--green); } }
.cheapest .when { color: var(--label-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.drops a, .cheapest a {
  font-size: 15px; font-weight: 500; color: var(--blue);
  text-decoration: none; margin-left: auto; min-height: 30px;
  display: inline-flex; align-items: center;
}

/* --- Merkliste ------------------------------------------------------------ */
.watch h2 { margin-bottom: 5px; }
.watch p { margin: 0; color: var(--label-2); font-size: 15px; max-width: 60ch; }
.watch-form { margin-top: var(--s4); display: flex; gap: var(--s2); flex-wrap: wrap; }
.watch-form input {
  flex: 1 1 220px; min-width: 0; min-height: 48px;
  font: inherit; font-size: 16px; color: var(--label);
  background: var(--fill-2); border: .5px solid transparent; border-radius: var(--r-control);
  padding: 12px 14px;
}
.watch-form button {
  font: inherit; font-size: 16px; font-weight: 600;
  background: var(--blue); color: #fff; border: 0; border-radius: var(--r-control);
  padding: 12px 22px; min-height: 48px; cursor: pointer;
}
.watch-form button:hover { background: var(--blue-press); }
.watch-msg { margin-top: var(--s3) !important; color: var(--label) !important; font-weight: 500; font-size: 15px; }
.watch-msg.bad { color: var(--red) !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Leerzustand und Hinweise --------------------------------------------- */
.empty h2 { font-size: 20px; }
.empty p { margin: var(--s2) 0 0; color: var(--label-2); font-size: 15px; max-width: 60ch; }
.empty-actions { margin-top: var(--s4); display: flex; gap: var(--s2); flex-wrap: wrap; }
.empty-actions button {
  font: inherit; font-size: 15px; font-weight: 500; color: var(--blue);
  background: var(--fill-2); border: 0; border-radius: var(--r-control);
  padding: 12px 16px; min-height: 44px; cursor: pointer;
}
.empty-actions button:hover { background: var(--fill); }
.checked-note { font-size: 13px; color: var(--label-3); margin: var(--s4) 0 0; }
.checked-note.error {
  color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent);
  padding: var(--s3) var(--s4); border-radius: var(--r-control);
}

/* --- Karte ---------------------------------------------------------------- */
.map {
  margin: var(--s5) 0 0; padding: var(--s4);
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .04);
}
:root[data-theme="dark"] .map { box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map { box-shadow: none; } }
.map svg { display: block; width: 100%; height: auto; max-height: 420px; margin: 0 auto; }
.map .net { fill: var(--label-3); opacity: .45; }
.map .link { stroke: var(--blue); stroke-width: 1.3; opacity: .5; fill: none; }
.map .home { fill: none; stroke: var(--label); stroke-width: 2; }
.map .hit { fill: var(--green); cursor: pointer; }
.map .label {
  font-size: 13px; font-weight: 600; fill: var(--label); letter-spacing: -.01em;
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}
.map figcaption { font-size: 12px; color: var(--label-3); margin-top: var(--s3); }

/* --- Bewegung ------------------------------------------------------------- */
@keyframes rise {
  from { transform: translateY(8px); opacity: .0001; }
  to   { transform: none; opacity: 1; }
}
.deal.enter {
  animation: rise .34s cubic-bezier(.32, .72, 0, 1);
  animation-delay: calc(var(--i, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Fußbereich ----------------------------------------------------------- */
.foot {
  margin-top: var(--s8); padding-block: var(--s5) calc(var(--s8) + env(safe-area-inset-bottom, 0px));
  border-top: .5px solid var(--separator); color: var(--label-3); font-size: 13px;
}
.foot h2 { font-size: 13px; font-weight: 600; color: var(--label-2); margin-bottom: var(--s2); }
.foot p { margin: 0 0 var(--s2); max-width: 70ch; line-height: 1.45; }
.foot em { font-style: normal; color: var(--label-2); font-weight: 600; }

@media (max-width: 520px) {
  .wrap { padding: 0 var(--s4); }
  .city { font-size: 20px; }
  .price { font-size: 25px; }
  .book { width: 100%; justify-content: center; }
  .cal-months { gap: var(--s3); }
}