/* ===========================================================================
   Gestaltungswerte
   ---------------------------------------------------------------------------
   Drei Bloecke, die dasselbe setzen: die Voreinstellung (hell), die
   Systemeinstellung (dunkel) und die Handumstellung im Kopf der Seite. Jedes
   neue Merkmal muss in allen dreien stehen, sonst faellt es im Dunkeln auf
   einen hellen Wert zurueck.

   Die Farben tragen Rollen, keine Namen. Wichtig ist der Unterschied zwischen
   `--panel` (erhoehte Flaeche: Karte, Kopfzeile, Overlay) und `--flaeche`
   (vertiefte Flaeche: Eingabefeld, Filtergruppe, Protokoll). Vorher hat
   `--bg` beide Rollen gespielt — deshalb sah eine Karte auf der Seite genauso
   aus wie ein Eingabefeld in der Karte.
   =========================================================================== */

:root {
  /* -- Flaechen ---------------------------------------------------------- */
  --bg: #f2f4f7;          /* die Seite — A&O „hell" */
  --panel: #ffffff;       /* erhoeht: Karten, Kopfzeile, Spalten, Overlay */
  --flaeche: #e8ebf0;     /* vertieft: Eingabefelder, Gruppen, Protokoll */
  --fg: #14171c;
  --muted: #4f5866;       /* 6,6:1 auf --bg — bleibt lesbar */
  --line: #dde1e7;        /* nur Trennlinien */
  --karte-rand: #e3e6eb;  /* haarfeiner Rand wie bei A&O, dazu ein weicher Schatten */

  /* -- Signalfarben ------------------------------------------------------ */
  /* Lagune (Étang de Thau) ist der Akzent — die eigene Note gegenüber dem
     A&O-Blau, das hier als „neu" weiterlebt. Glut steht für Warnung und
     Preissprung. Im Hellen dunkel getönt, damit weisse Schrift trägt. */
  --accent: #0a7179; --good: #16704f; --new: #2455e8; --warn: #9a4b0f;
  /* Schrift auf farbigen Flaechen. Im hellen Aussehen sind diese Farben
     dunkel, also Weiss darauf; im dunklen ist es umgekehrt. */
  --auf-signal: #fff;
  /* Weiche Fassungen fuer Flaechen statt Text — ersetzen elf handgeschriebene
     color-mix()-Aufrufe und lassen sich im Dunkeln getrennt einstellen. */
  --accent-weich: #dcf1f2;
  --good-flaeche: #e2f1ea;
  --new-flaeche: #e4ebfd;
  --warn-flaeche: #f8ebdd;

  /* -- Knoepfe ----------------------------------------------------------- */
  /* Hauptknopf in den Karten: neutral statt rot. 59 rote Flaechen
     untereinander erschlagen die Bilder, um die es eigentlich geht. */
  --btn-bg: #14171c; --btn-fg: #fff;

  /* -- Rundungen --------------------------------------------------------- */
  /* Eine Skala statt zwoelf Einzelwerte: klein fuer Felder und Marken,
     mittel fuer Knoepfe und Kacheln, gross fuer Karten und Spalten. */
  --r-s: 8px; --r-m: 16px; --r-l: 24px; --r-rund: 999px;

  /* -- Schatten ---------------------------------------------------------- */
  /* Drei Hoehen: aufliegend, angehoben, schwebend. Mehr braucht es nicht. */
  --schatten-1: 0 1px 2px rgba(7,8,11,.05);
  --schatten-2: 0 8px 24px rgba(7,8,11,.08);
  --schatten-3: 0 18px 44px rgba(7,8,11,.18);
  /* Altbestand: viele Regeln nennen noch --shadow. */
  --shadow: var(--schatten-2);

  /* -- Fokus ------------------------------------------------------------- */
  /* Ein Fokusstil fuer alles, statt der Browser-Vorgabe in acht Varianten. */
  --fokus: 0 0 0 3px var(--accent-weich);

  /* -- Schrift ----------------------------------------------------------- */
  /* Sechs Groessen, vier Gewichte. Vorher standen 560, 620, 650, 680 und 700
     nebeneinander — Systemschriften runden das je nach Geraet verschieden,
     und das Ergebnis wirkt unruhig, ohne dass man sagen kann warum. */
  --t-2xl: 30px; --t-xl: 22px; --t-l: 17px; --t-m: 15px; --t-s: 13px; --t-xs: 12px;
  --gew-normal: 400; --gew-mittel: 500; --gew-halb: 600; --gew-fett: 700;

  /* -- Abstaende --------------------------------------------------------- */
  /* Acht Stufen statt 26 handgesetzter Werte. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* -- Masse ------------------------------------------------------------- */
  --bild-format: 20 / 19;   /* fast quadratisch: die Unterkunft wird groesser */
  --breite-max: 1760px;     /* sonst stehen auf einem 34-Zoll-Schirm neun Briefmarken */
  /* Hoehe der Reiterleiste, die auf dem Telefon unten steht. Alles, was dort
     ebenfalls klebt, rechnet damit — sonst liegt der Suchknopf dahinter. */
  --leiste-h: 50px;

  /* Ein Pfeil nach unten als Maske. Als Maske und nicht als eingefaerbtes Bild,
     damit er die Farbe aus dem Stylesheet nimmt und in beiden Aussehen stimmt. */
  --pfeil-runter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Dunkles Aussehen — als Zwillingsblock, einmal fuer die Systemeinstellung
   und einmal fuer die Handumstellung im Kopf der Seite. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07080b; --panel: #12141a; --flaeche: #1b1e26; --fg: #eceef2;
    --muted: #a6acb8; --line: #252932; --karte-rand: #252932;
    --accent: #3fc1c9; --good: #4ecfa6; --new: #648dff; --warn: #f0a060;
    --auf-signal: #06111e;
    --accent-weich: #0e2b2e; --good-flaeche: #11302a;
    --new-flaeche: #161f3d; --warn-flaeche: #33230f;
    --btn-bg: #eceef2; --btn-fg: #07080b;
    /* Schatten sind auf dunklem Grund unsichtbar — dort trennt --karte-rand. */
    --schatten-1: none;
    --schatten-2: none;
    --schatten-3: 0 16px 40px rgba(0,0,0,.5);
    --shadow: var(--schatten-2);
  }
}
:root[data-theme="dark"] {
  --bg: #07080b; --panel: #12141a; --flaeche: #1b1e26; --fg: #eceef2;
  --muted: #a6acb8; --line: #252932; --karte-rand: #252932;
  --accent: #3fc1c9; --good: #4ecfa6; --new: #648dff; --warn: #f0a060;
  --auf-signal: #06111e;
  --accent-weich: #0e2b2e; --good-flaeche: #11302a;
  --new-flaeche: #161f3d; --warn-flaeche: #33230f;
  --btn-bg: #eceef2; --btn-fg: #07080b;
  --schatten-1: none;
  --schatten-2: none;
  --schatten-3: 0 16px 40px rgba(0,0,0,.5);
  --shadow: var(--schatten-2);
}
* { box-sizing: border-box; }

/* Ein `hidden`-Attribut muss verstecken. Eigene Regeln mit `display: flex`
   oder `display: grid` überstimmen sonst die Vorgabe des Browsers — dadurch
   erschien der Passkey-Knopf, obwohl Passkeys abgeschaltet waren. */
[hidden] { display: none !important; }

html, body { height: 100%; }
html {
  /* Ohne das vergroessert iOS im Querformat eigenmaechtig die Schrift. */
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }

/* Ein Fokusstil fuer alles. Vorher trugen sechs Elemente einen eigenen Rahmen
   und alle uebrigen die Browser-Vorgabe — die auf dunklem Grund kaum zu sehen
   ist. Mit Maus bedient erscheint nichts (`:focus-visible`), mit Tastatur
   ueberall dasselbe. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-s);
}
/* Felder tragen den Ring innen, sonst springt das Layout um 4px. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: var(--fokus);
}

/* Safari auf dem iPhone zoomt beim Antippen in jedes Feld, dessen Schrift
   kleiner als 16px ist — und zoomt nicht wieder heraus. Genau das laesst die
   Ansicht danach verschoben wirken. */
input, select, textarea { font-size: 16px; }

.onlyMobile { display: none; }

/* ---------------------------------------------------------------- Bedienung */
/* `a.knopfLink` steht hier mit drin: „Profil" fuehrt auf eine eigene Seite und
   muss deshalb ein Verweis sein — mit Mittelklick, Zurueck-Knopf und allem,
   was daran haengt. Ohne diese Regel trug er das Blau und die Unterstreichung
   des Browsers und fiel zwischen den Knoepfen daneben auf. */
button.primary, button.ghost, button.danger, a.knopfLink {
  border-radius: var(--r-m); padding: 9px 16px; cursor: pointer; font-weight: var(--gew-halb); font-size: var(--t-m);
  border: 1px solid transparent;
}
button.primary { background: var(--accent); color: var(--auf-signal); }
button.ghost, a.knopfLink { background: var(--panel); border-color: var(--line); }
a.knopfLink { color: var(--fg); text-decoration: none; display: inline-block; line-height: 1.4; }
a.knopfLink:hover { border-color: var(--muted); }
button.danger { background: none; border-color: var(--line); color: var(--accent); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.link { background: none; border: none; color: var(--new); cursor: pointer; padding: 0; font-size: var(--t-s); }

/* ---------------------------------------------------------------- Formular */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); align-items: start; }
fieldset {
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--panel);
  padding: 16px 18px 18px; margin: 0;
}
legend { font-weight: var(--gew-halb); font-size: var(--t-s); padding: 0 6px; letter-spacing: .01em; }
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field > label { font-size: var(--t-s); color: var(--muted); }
.field .hint { font-size: var(--t-xs); color: var(--muted); }
input[type=text], input[type=number], input[type=date], select, textarea {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--flaeche); width: 100%;
}
textarea { resize: vertical; min-height: 76px; font-family: inherit; }

/* Ein gesperrtes Feld muss man sehen. „Nur Erdgeschoss" sperrt die
   Etagenobergrenze, ein fehlender Etagenfilter sperrt die Zusatzfrage — bisher
   sahen beide aus wie benutzbare Felder, und man tippte ins Leere. Knoepfe
   hatten diese Kennzeichnung schon, Eingabefelder nicht. */
input:disabled, select:disabled, textarea:disabled {
  opacity: .45; cursor: not-allowed; background: var(--flaeche);
}
label:has(:disabled) { color: var(--muted); cursor: not-allowed; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checks { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.checks label, .inline { display: flex; align-items: center; gap: 8px; font-size: var(--t-s); }
.checks.cols { grid-template-columns: 1fr 1fr; }

/* ----------------------------------------------------------------- Regler */
/* Die Regler stehen jetzt untereinander in der Steuerspalte statt als breites
   Band über den Ergebnissen. Eine Spalte, weil man sie von oben nach unten
   durchgeht — nebeneinander gelesen ergibt „Gesamtpreis, Entfernung, Strand,
   Bewertung, Rezensionen" keine Reihenfolge. */
.sliders { display: grid; gap: var(--s-5); }
.slider > label { display: flex; justify-content: space-between; font-size: var(--t-s); color: var(--muted); }
.slider label b { color: var(--fg); font-weight: var(--gew-halb); }
/* Häkchen-Zeilen sollen NICHT auseinandergezogen werden — sonst steht der
   Text am rechten Rand und das Kästchen einsam links. */
.slider label.inline { justify-content: flex-start; font-size: var(--t-s); }
.slider input[type=range] { width: 100%; accent-color: var(--accent); }

/* Sortierung + Auf-/Absteigend nebeneinander. Der Knopf ist quadratisch und
   so hoch wie das Auswahlfeld, damit beide auf einer Grundlinie stehen. */
.sortZeile { display: flex; gap: 8px; align-items: stretch; }
.sortZeile select { flex: 1; min-width: 0; }
.sortRichtung {
  flex: 0 0 auto; width: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-l); line-height: 1;
}
/* Der Pfeil zeigt die WIRKUNG des naechsten Klicks nicht — er zeigt den
   AKTUELLEN Zustand: ↓ = wie beschriftet („günstigste zuerst“), ↑ = umgekehrt. */
.sortRichtung[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------------ Karten */
/* Höchstens vier Spalten. Ohne Deckel stehen auf einem 34-Zoll-Schirm neun
   Briefmarken nebeneinander — bei einer Anwendung, in der es um die Bilder
   geht, ist das die falsche Antwort auf viel Platz. */
.cards {
  display: grid; gap: var(--s-5) var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  max-width: var(--breite-max);
}
@media (min-width: 1500px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Die Karte traegt keinen Rahmen und keinen Schatten mehr, solange sie
   ruhig daliegt.
   Vorher hatte jede Karte beides — bei 27 Ergebnissen sind das 27 gerahmte
   Kaesten, und die Bilder, um die es eigentlich geht, ertrinken darin. Im
   Hellen grenzt jetzt das Bild selbst ab; im Dunkeln uebernimmt das
   --karte-rand, weil ein Schatten auf dunklem Grund nichts ausrichtet. */
.card {
  background: var(--panel); border: 1px solid var(--karte-rand);
  border-radius: var(--r-l);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--schatten-2); }
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}
.card .shot {
  position: relative; aspect-ratio: var(--bild-format); background: var(--flaeche);
  border-radius: var(--r-m); overflow: hidden; margin: var(--s-2) var(--s-2) 0;
  /* Waagerechtes Wischen wertet die Bildergalerie aus, senkrechtes bleibt
     beim Scrollen der Seite. */
  touch-action: pan-y;
}
/* Beide Bildebenen liegen deckungsgleich übereinander; sichtbar ist die mit
   `.an`. Der Wechsel ist eine Blende statt eines Sprungs. */
.card .shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity .25s ease;
}
.card .shot img.an { opacity: 1; }

/* Wer Bewegung im Betriebssystem abgestellt hat, bekommt den harten Wechsel —
   das ist dort die richtige Antwort, nicht die hübschere. */
@media (prefers-reduced-motion: reduce) {
  .card .shot img { transition: none; }
}
.card .nav { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; opacity: 0; transition: opacity .15s; }
.card:hover .nav { opacity: 1; }
.card .nav button {
  border: none; width: 28px; height: 28px; margin: 0 7px; border-radius: 50%;
  background: rgba(255,255,255,.9); color: #111; cursor: pointer;
}
.card .dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.card .dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); }
.card .dots i.on { background: #fff; }

/* Auf Touchgeraeten gibt es kein :hover — die Pfeile waeren sonst unerreichbar. */
@media (hover: none) {
  .card .nav { opacity: 1; }
  .card .nav button { width: 34px; height: 34px; background: rgba(255,255,255,.8); }
}
.flags { position: absolute; top: 9px; left: 9px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.flag { font-size: var(--t-xs); font-weight: var(--gew-halb); padding: 3px 8px; border-radius: var(--r-rund); background: rgba(255,255,255,.94); color: #111; }
.flag.new { background: var(--new); color: var(--auf-signal); }
.flag.drop { background: var(--good); color: var(--auf-signal); }
/* Unterkunft ist nur an anderen Tagen frei — muss sofort ins Auge fallen. */
.flag.warn { background: var(--warn); color: var(--auf-signal); }
/* Treffer aus einem Ausweichtermin: An- und Abreise verschieben sich. */
.flag.datum { background: var(--new); color: var(--auf-signal); }
.fav {
  position: absolute; top: 8px; right: 8px; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.9);
  font-size: var(--t-l); line-height: 1; color: #444;
}
.fav.on { color: var(--accent); }
.card .body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card .title { font-weight: var(--gew-halb); font-size: var(--t-m); line-height: 1.35; }
.card .meta { font-size: var(--t-s); color: var(--muted); }
.card .price { font-size: var(--t-l); font-weight: var(--gew-fett); font-variant-numeric: tabular-nums; }
.card .price s { font-weight: var(--gew-normal); font-size: var(--t-s); color: var(--muted); margin-right: 5px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: var(--t-xs); font-weight: var(--gew-halb); padding: 2px 8px; border-radius: var(--r-rund); background: var(--new-flaeche); color: var(--new); }
/* Jede Wertung trug bisher dasselbe kräftige Grün, egal ob 46 oder 89 von
   100 — sah aus, als sei jedes Angebot gleich gut empfohlen. Nur eine
   tatsächlich starke Wertung (≥65, deutlich über dem Mittelwert 50) bekommt
   jetzt die Hervorhebung; der Rest bleibt neutral. */
.score { font-size: var(--t-xs); font-weight: var(--gew-fett); padding: 2px 7px; border-radius: var(--r-s); background: var(--flaeche); color: var(--muted); }
.score.gut { background: var(--good-flaeche); color: var(--good); }
.go {
  margin-top: auto; display: block; text-align: center; text-decoration: none;
  padding: 10px; border-radius: var(--r-m); font-weight: var(--gew-halb); font-size: var(--t-s);
  background: var(--btn-bg); color: var(--btn-fg);
}
.rowline { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

/* ------------------------------------------------------------------- Karte */
#centerList { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
#centerList li { display: flex; align-items: center; gap: 8px; font-size: var(--t-s); padding: 5px 8px; border-radius: var(--r-s); background: var(--flaeche); }
#centerList li span { flex: 1; }
#geoHits { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
#geoHits li {
  font-size: var(--t-s); padding: 6px 8px; border-radius: var(--r-s); background: var(--flaeche);
  cursor: pointer; display: grid; gap: 1px;
}
#geoHits li:hover, #geoHits li:focus-visible {
  background: var(--new-flaeche);
  outline: 2px solid var(--accent); outline-offset: -2px;
}
/* Region und Land unter dem Ortsnamen — ohne sie sind gleichnamige Orte
   ("Marseillan" im Hérault und im Gers) nicht auseinanderzuhalten. */
#geoHits li small { color: var(--muted); font-size: var(--t-xs); }

/* Zahlenfeld neben dem Radius-Regler. */
.reglerZeile { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.reglerZeile input[type=number] { width: 92px; }
.reglerZeile .hint { white-space: nowrap; }

/* ------------------------------------------------- Laufender Suchvorgang */

/* Sitzt in der Kopfzeile, solange eine Suche läuft — auch bei geschlossenem
   Fortschrittsfenster. Ein Klick holt das Fenster zurück. */
.laufAnzeige {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: var(--t-s); padding: 6px 12px; border-radius: var(--r-rund);
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
}
.laufAnzeige:hover { border-color: var(--muted); }
.laufAnzeige .punkt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: pulsieren 1.4s ease-in-out infinite;
}
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Wer sich nicht gern bewegende Dinge ansieht, bekommt einen ruhigen Punkt. */
@media (prefers-reduced-motion: reduce) {
  .laufAnzeige .punkt { animation: none; }
}

/* Meldung, wenn ein Lauf im Hintergrund fertig geworden ist. */
.banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px; font-size: var(--t-s);
  border-bottom: 1px solid var(--line);
  background: var(--new-flaeche);
}
.banner.fehler { background: var(--warn-flaeche); }

/* ------------------------------------------------- Merkliste und Notizen */

/* Nur für Screenreader — Beschriftungen, die sichtbar Platz kosten würden. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===================================================== Geführte Suche ===== */

/* Eine Bahn statt eines Kachelfelds: der Blick läuft von oben nach unten
   durch die vier Schritte, statt zwischen acht gleichrangigen Kästen zu
   springen. */
.suchbahn { max-width: 760px; margin: 0 auto; padding-bottom: 96px; }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.schritt {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 18px 20px;
}
.schritt > h3 { margin: 0 0 14px; font-size: var(--t-l); letter-spacing: -.01em; }

/* Die Ueberschrift ist der Schalter zum Zuklappen. Eine Suche ueber viele Orte
   fuellte allein mit den Ortsmarken ein Viertel des Bildschirms — jedes Mal
   aufs Neue, obwohl sich daran nichts aendert. */
.schrittSchalter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  width: 100%; padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.schrittName { font-weight: var(--gew-halb); }

/* Was drinsteht, wenn nichts zu sehen ist. Nur im zugeklappten Zustand.
   `order` sorgt dafuer, dass der Pfeil in der ersten Zeile rechts stehen
   bleibt: ohne ihn rutschte er hinter die umbrechende Fassung in eine dritte
   Zeile, und der Kasten wurde hoeher als aufgeklappt sinnvoll waere. */
.fassung {
  display: none; flex: 1 1 100%; order: 2;
  font-size: var(--t-s); font-weight: var(--gew-normal); color: var(--muted);
  line-height: 1.4; margin-top: 2px;
}
.schritt.zu .fassung { display: block; }
.schritt.zu > h3 { margin-bottom: 0; }
.schritt.zu > :not(h3) { display: none; }

/* Ein Pfeil, der die Richtung anzeigt. Als Maske, damit er die Textfarbe
   annimmt und in beiden Aussehen stimmt. */
.schrittPfeil {
  margin-left: auto; order: 1; width: 18px; height: 18px; flex: none;
  background: var(--muted);
  -webkit-mask: var(--pfeil-runter) center / 18px no-repeat;
  mask: var(--pfeil-runter) center / 18px no-repeat;
  transform: rotate(180deg); transition: transform .18s ease;
}
.schritt.zu .schrittPfeil { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) {
  .schrittPfeil { transition: none; }
}

/* Zugeklappt tritt der Schritt zurueck — er ist erledigt. */
.schritt.zu { background: var(--flaeche); border-color: transparent; padding: 14px 20px; }
.schritt.zu .nr { background: var(--muted); }
.schritt.zu:hover { border-color: var(--line); }
/* Die Nummer trägt die Reihenfolge sichtbar — man sieht, wo man steht. */
.schritt .nr {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--t-s); font-weight: var(--gew-fett);
  background: var(--accent); color: var(--auf-signal);
}
.pflicht, .optional {
  font-size: var(--t-xs); font-weight: var(--gew-halb); padding: 2px 8px; border-radius: var(--r-rund);
  letter-spacing: .01em;
}
.pflicht { background: var(--accent-weich); color: var(--accent); }
.optional { background: var(--flaeche); color: var(--muted); }

.wunschgitter { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Überschrift eines Feldes ohne zugehöriges Eingabeelement. */
.feldTitel { display: block; font-size: var(--t-s); color: var(--muted); margin-bottom: 6px; }

/* Die gewählten Orte — Liste statt Textfläche: sie werden von der Ortssuche
   befüllt, nicht von Hand getippt. */
.orteListe { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.orteListe li {
  display: flex; align-items: center; gap: 4px;
  background: var(--flaeche); border: 1px solid var(--line); border-radius: var(--r-rund);
  padding: 5px 6px 5px 13px; font-size: var(--t-s);
}
.orteListe li.leer {
  border-style: dashed; color: var(--muted); padding: 7px 13px; font-size: var(--t-s);
}
.ortWeg {
  width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; font-size: var(--t-m); line-height: 1;
}
.ortWeg:hover { background: var(--warn); color: var(--auf-signal); }

/* Fehlerhafte Pflichtfelder: Rahmen plus Text, nie nur Farbe. */
.feldFehler input, .feldFehler textarea, .feldFehler select { border-color: var(--warn); }
.feldFehler label { color: var(--warn); }

.suchFehler {
  background: var(--warn-flaeche);
  border: 1px solid var(--warn); border-radius: var(--r-m);
  padding: 9px 12px; font-size: var(--t-s); margin-bottom: 8px;
}
.suchFehler ul { margin: 5px 0 0; padding-left: 18px; }
.suchFehler a { color: var(--fg); }

/* Die eine dominante Aktion — immer erreichbar, ohne den Inhalt zu verdecken. */
.suchleiste {
  position: sticky; bottom: 0; margin: 0 -24px -24px;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
.suchleisteInhalt { max-width: 760px; margin: 0 auto; display: grid; gap: 8px; }
button.gross { font-size: var(--t-m); padding: 13px 26px; font-weight: var(--gew-halb); justify-self: end; }

/* Nebensächliches: Vorausladen und „nur speichern“. */
.suchZusatz {
  margin-top: 16px; padding: 14px 20px; border-radius: var(--r-m);
  background: var(--panel); border: 1px dashed var(--line);
  display: grid; gap: 8px;
}
.suchZusatzZeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Auf dem Telefon: der Suchknopf über die volle Breite und als Erstes, das
   Beiwerk darunter. Ein Daumen erreicht die untere Kante am leichtesten. */
@media (max-width: 640px) {
  .suchbahn { padding-bottom: 96px; }
  .suchleiste { margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  button.gross { width: 100%; padding: 14px; justify-self: stretch; }
  #btnSave { width: 100%; }
  .vorausLabel { font-size: var(--t-xs); }
  .schritt { padding: 15px 16px; }
  .wunschgitter { grid-template-columns: 1fr; }
}

/* Karte im Schritt „Wohin“ — zugeklappt, damit sie nicht ablenkt. */
.kartenblock { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.kartenblock > summary { cursor: pointer; font-weight: var(--gew-halb); font-size: var(--t-s); }
.kartenflaeche { height: 320px; border-radius: var(--r-m); overflow: hidden; margin-top: 10px; }

/* ------------------------------------------------- Ergebnisse: Liste/Karte
   Bei einer Unterkunft ist die Lage die halbe Entscheidung. Die Kartenansicht
   war beim Umbau der Bereiche verlorengegangen — die Punkte wurden weiter
   gerechnet, landeten aber auf der zugeklappten Karte im Suchschritt. */
.reglerBezug {
  display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
  margin-top: var(--s-1); font-size: var(--t-xs);
}
.reglerBezug .hint { font-size: var(--t-xs); }

.filterSuche { margin-bottom: var(--s-4); }

/* „Einstellungen dieser Suche" steht bewusst außerhalb der Filtergruppen —
   Name, Seitenzahl und Tempo grenzen keine Ergebnisse ein. */
.einstellungenBlock { margin-top: var(--s-4); }

.ansichtWahl {
  display: inline-flex; gap: 2px; margin-bottom: var(--s-4);
  padding: 3px; border-radius: var(--r-rund); background: var(--flaeche);
}
.ansichtWahl button {
  border: none; background: none; cursor: pointer;
  padding: 7px 18px; border-radius: var(--r-rund);
  font-size: var(--t-s); font-weight: var(--gew-mittel); color: var(--muted);
}
.ansichtWahl button.an {
  background: var(--panel); color: var(--fg); font-weight: var(--gew-halb);
  box-shadow: var(--schatten-1);
}

#karteBereich { display: flex; flex-direction: column; }
/* Die Karte füllt die Höhe, die übrig ist — eine 320px hohe Karte beantwortet
   die Frage „wo liegt das im Verhältnis zueinander?" nicht. */
#mapErgebnisse {
  height: clamp(420px, calc(100dvh - 380px), 900px);
  margin-top: 0; border: 1px solid var(--line);
}
#karteHinweis { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--muted); }

/* Der Preis steht am Punkt. Eine Karte voller gleicher Nadeln beantwortet die
   Frage nicht, um die es hier geht: was kostet es *dort*? */
.preisNadel { background: none; border: none; }
.preisNadelInhalt {
  display: inline-block; transform: translate(-50%, -50%);
  padding: 4px 9px; border-radius: var(--r-rund); white-space: nowrap;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); box-shadow: var(--schatten-2);
  font-size: var(--t-xs); font-weight: var(--gew-halb);
  font-variant-numeric: tabular-nums;
}
.preisNadelInhalt.gemerkt {
  background: var(--accent); color: var(--auf-signal); border-color: transparent;
}
.preisNadel:hover .preisNadelInhalt { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; z-index: 400; }

.kartenBlase img {
  width: 100%; height: 120px; object-fit: cover;
  border-radius: var(--r-s); margin-bottom: var(--s-2); display: block;
}
.kartenBlase b { display: block; font-size: var(--t-s); line-height: 1.35; }
.kartenBlase .kbMeta { color: var(--muted); font-size: var(--t-xs); margin-top: 2px; }
.kartenBlase .kbPreis {
  font-weight: var(--gew-halb); margin: var(--s-1) 0;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- Weitere Filter */
.weitereFilter {
  margin-top: 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 20px;
}
.weitereFilter.hatFilter { border-color: var(--accent); }
.weitereFilter > summary {
  cursor: pointer; font-weight: var(--gew-halb); font-size: var(--t-m);
  display: flex; align-items: center; gap: 10px;
}
.zahl {
  font-size: var(--t-xs); font-weight: var(--gew-fett); padding: 2px 8px; border-radius: var(--r-rund);
  background: var(--accent); color: var(--auf-signal);
}
.zahl:empty { display: none; }
/* 0 Treffer ist eine bekannte Zahl, kein Fehler — sie soll nicht dieselbe
   knallige Akzentfarbe tragen wie ein Fund. Betraf zunächst nur die Kachel
   (siehe unten); Seitenleiste und Telefon-Wähler teilten sich dieselbe Klasse
   ohne diese Unterscheidung und zeigten „0" als grellen rosa Kreis. */
.zahl.leer { background: var(--flaeche); color: var(--muted); }
.filtergruppen { display: grid; gap: 10px; margin-top: 14px; }
.filtergruppe { border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; background: var(--flaeche); }
.filtergruppe > summary { cursor: pointer; font-weight: var(--gew-halb); font-size: var(--t-s); display: flex; align-items: center; gap: 8px; }
.filtergruppe > summary + * { margin-top: 12px; }
.filtergruppe .field + .field, .filtergruppe .row + .field { margin-top: 12px; }

/* ---------------------------------------------------------- Ausstattung */
.amSchnell { margin-bottom: 12px; }
.amSchnell > b { display: block; font-size: var(--t-s); margin-bottom: 7px; }
.amGruppe { border-top: 1px solid var(--line); padding: 9px 0 0; }
.amGruppe > summary { cursor: pointer; font-size: var(--t-s); display: flex; align-items: center; gap: 8px; }
.amGruppe > summary .zahl { background: var(--line); color: var(--muted); font-weight: var(--gew-halb); }
.amGitter {
  display: grid; gap: 6px 14px; margin-top: 9px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.amLabel { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-s); line-height: 1.35; }
.amLabel input { margin-top: 2px; flex: none; }

/* ------------------------------------------------------- Ergebniskopf */
/* Der Ergebniskopf war ein grosser Kasten, der Wo, Wann und Wer noch einmal
   auflistete — dieselben Angaben, die zwei Zentimeter darueber in der
   Anfragezeile stehen. Zwei Kaesten mit demselben Inhalt uebereinander sind
   der Grund, warum eine Seite unaufgeraeumt wirkt, ohne dass ein einzelnes
   Element falsch waere. Jetzt eine schlichte Zeile ohne Rahmen: die Zahl, der
   Stand, der Weg zurueck zur Suche. */
.ergebnisKopf {
  margin-bottom: var(--s-4);
  display: flex; align-items: baseline; gap: var(--s-2) var(--s-4); flex-wrap: wrap;
}
.ergebnisZahl { display: flex; align-items: baseline; gap: 9px; }
.ergebnisZahl b { font-size: var(--t-2xl); letter-spacing: -.02em; }
.ergebnisZahl span { color: var(--muted); font-size: var(--t-m); }

/* Wo, Wann und Wer stehen in der Anfragezeile. Hier bleibt nur der Stand —
   den sagt sonst niemand. */
.ergebnisKontext { display: contents; }
.ergebnisKontext > div:not(.ergebnisStand) { display: none; }
.ergebnisKontext .ergebnisStand {
  display: flex; gap: var(--s-2); font-size: var(--t-s); color: var(--muted);
}
.ergebnisKontext dt { color: var(--muted); }
.ergebnisKontext dd { margin: 0; font-variant-numeric: tabular-nums; }
.ergebnisAktionen { display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; }
/* Die Statistikzeile gehoert unter die Ueberschriftzeile, nicht daneben. */
.ergebnisKopf > .hint { flex: 1 0 100%; margin: 0; }

/* Die Ergebnisse gehören noch zur vorherigen Anfrage. */
.veraltetErgebnis {
  margin-top: 12px; padding: 9px 12px; border-radius: var(--r-m); font-size: var(--t-s);
  background: var(--warn-flaeche);
  border: 1px solid var(--warn);
}
.veraltetErgebnis b { display: block; }

/* Vorausladen — ein zurückhaltendes Angebot, keine Voreinstellung. */
.vorausLabel { font-size: var(--t-s); color: var(--muted); margin-bottom: 2px; }
.vorausLabel span { line-height: 1.35; }

/* ------------------------------------------------------ Offline / Druck */
.merkAktionen { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.offlineHinweis {
  padding: 7px 11px; border-radius: var(--r-s);
  background: var(--warn-flaeche);
  border: 1px solid var(--warn);
}
.offlineKarte .body { padding: 14px 16px; }
.dNotizOffline {
  margin-top: 9px; padding: 7px 9px; border-radius: var(--r-s);
  background: var(--flaeche); border: 1px solid var(--line); font-size: var(--t-s);
}
.dNotizOffline p { margin: 3px 0 0; white-space: pre-wrap; }

/* ---------------------------------------------------- Datenqualität */
.qualitaet {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r-m);
  background: var(--flaeche); border: 1px solid var(--line); font-size: var(--t-s);
}
.qualitaet summary { cursor: pointer; font-weight: var(--gew-halb); }
.qliste { display: grid; gap: 5px; }
.qzeile {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 2px 8px; align-items: baseline;
}
.qzeile .qtext { grid-column: 2 / -1; color: var(--muted); font-size: var(--t-xs); line-height: 1.4; }
.qtitel { font-weight: var(--gew-mittel); }
.qwert { color: var(--muted); font-size: var(--t-xs); white-space: nowrap; }
/* Das Zeichen trägt die Aussage, die Farbe verstärkt sie nur — auf
   Schwarz-Weiß und für Farbenblinde bleibt alles lesbar. */
.qzeichen { font-size: var(--t-xs); }
.qzeile[data-zustand="vorhanden"] .qzeichen { color: var(--new); }
.qzeile[data-zustand="teilweise"] .qzeichen { color: var(--accent); }
.qzeile[data-zustand="unbekannt"] .qzeichen,
.qzeile[data-zustand="nichtGeprueft"] .qzeichen { color: var(--muted); }

/* --------------------------------------------------- Preisüberwachung */
.wache {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r-m);
  background: var(--flaeche); border: 1px solid var(--line); font-size: var(--t-s);
}
.wache.an { border-color: var(--accent); }
.wache .inline { font-size: var(--t-s); }
.wacheDetails { display: grid; gap: 6px; margin-top: 8px; }
.wacheDetails .inline { gap: 6px; }
.wacheProzent { width: 62px; }
.wacheDetails small, .wacheStand { color: var(--muted); font-size: var(--t-xs); line-height: 1.45; }
.wacheStand { min-height: 14px; margin-top: 4px; }
.wacheStand.gut { color: var(--new); }
.wacheStand.fehler { color: var(--warn); }

/* -------------------------------------------------------------- Meldungen */
#meldungenListe { display: grid; gap: 8px; }
.meldung {
  padding: 11px 13px; border-radius: var(--r-m); font-size: var(--t-s);
  background: var(--panel); border: 1px solid var(--line);
}
/* Gelesenes tritt zurück, verschwindet aber nicht — Farbe ist nie der einzige
   Unterschied, die Meldung bleibt vollständig lesbar. */
.meldung.gelesen { opacity: .62; }
.meldungKopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.meldungKopf small { color: var(--muted); margin-left: auto; }
.meldungPfeil.hoch { color: var(--warn); }
.meldungPfeil.runter { color: var(--new); }
.meldungText { margin-top: 4px; font-variant-numeric: tabular-nums; }
.meldungText .hoch { color: var(--warn); font-weight: var(--gew-halb); }
.meldungText .runter { color: var(--new); font-weight: var(--gew-halb); }
.meldungText small, .meldung > small { color: var(--muted); font-size: var(--t-xs); }
.meldung > small { display: block; margin-top: 3px; }
.meldungKnoepfe { display: flex; gap: 12px; margin-top: 6px; }
.meldungAktionen { display: flex; gap: 14px; margin-top: 10px; }

/* ------------------------------------------------------------ Preisverlauf */
.verlauf {
  margin-top: 10px; padding: 10px 11px; border-radius: var(--r-m);
  background: var(--flaeche); border: 1px solid var(--line); font-size: var(--t-s);
}
.verlauf > b { display: block; font-size: var(--t-s); }
.verlauf small { display: block; color: var(--muted); font-size: var(--t-xs); line-height: 1.45; }
.verlauf.leer { border-style: dashed; }
.verlaufEinzel { font-size: var(--t-l); font-weight: var(--gew-fett); margin: 6px 0 4px; }
.verlaufEinzel small { display: inline; font-weight: var(--gew-normal); margin-left: 5px; }

.verlaufGrafik { width: 100%; height: 54px; margin: 8px 0 4px; display: block; }
.verlaufGrafik path { stroke: var(--accent); stroke-width: 1.8; }
.verlaufGrafik circle { fill: var(--accent); }

.verlaufMeldung { font-weight: var(--gew-halb); margin: 4px 0; font-variant-numeric: tabular-nums; }
.verlaufMeldung.hoch { color: var(--warn); }
.verlaufMeldung.runter { color: var(--new); }
.verlaufMeldung.gleich { color: var(--muted); font-weight: var(--gew-normal); }
/* Eine starke Änderung wird kräftiger gesetzt — aber nie allein durch Farbe:
   Pfeil, Prozentzahl und Betrag stehen immer dabei. */
.verlaufMeldung.stark { font-size: var(--t-m); }

.verlaufZahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 8px 0 0; }
.verlaufZahlen div { display: flex; justify-content: space-between; gap: 6px; }
.verlaufZahlen dt { color: var(--muted); }
.verlaufZahlen dd { margin: 0; font-weight: var(--gew-halb); font-variant-numeric: tabular-nums; }
.verlaufZahlen dd small { display: inline; font-weight: var(--gew-normal); margin-left: 4px; }

.notizFeld { display: block; margin-top: 10px; }
.notizFeld textarea {
  width: 100%; font-family: inherit; font-size: var(--t-s); min-height: 46px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--flaeche); color: var(--fg); resize: vertical;
}
.notizStand { font-size: var(--t-xs); color: var(--muted); min-height: 15px; margin-top: 3px; }
.notizStand.gut { color: var(--new); }
.notizStand.fehler { color: var(--warn); }

/* Im gesuchten Zeitraum nicht mehr zu haben. Bewusst auffällig — das ist die
   wichtigste Nachricht, die eine Karte tragen kann. Farbe allein reicht nicht,
   deshalb zusätzlich das Zeichen und der fette Satz. */
.wegHinweis {
  margin: 10px 0 0; padding: 9px 11px 9px 34px; border-radius: var(--r-s); font-size: var(--t-s);
  position: relative; line-height: 1.45;
  background: var(--warn-flaeche);
  border: 1px solid var(--warn); color: var(--fg);
}
.wegHinweis::before {
  content: '⚠'; position: absolute; left: 11px; top: 8px; font-size: var(--t-m);
}
.wegHinweis b { display: block; }
.wegHinweis small { display: block; color: var(--muted); margin-top: 3px; }

/* Das Ersatzdatum ist die eigentliche Antwort auf „wann wäre es denn frei?“.
   Es steht deshalb allein, größer und in tabellarischen Ziffern. */
.wegDatum {
  display: inline-block; margin-top: 5px;
  font-size: var(--t-m); font-weight: var(--gew-fett); font-variant-numeric: tabular-nums;
  padding: 3px 9px; border-radius: var(--r-s);
  background: var(--warn); color: var(--auf-signal);
}
/* Die tatsächlich freien Termine aus dem Datumsfächer. Bewusst abgesetzt vom
   Warnblock darüber: das eine ist Airbnbs Vorschlag, das andere sind eigene,
   gemessene Suchtreffer. */
.freiBlock {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--warn-flaeche);
}
.freiBlock > b { display: block; font-size: var(--t-xs); margin-bottom: 6px; }
.freiListe { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.freiListe li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.freiDatum {
  font-weight: var(--gew-fett); font-variant-numeric: tabular-nums; font-size: var(--t-s);
  padding: 2px 8px; border-radius: var(--r-s);
  background: var(--new); color: var(--auf-signal);
}
.freiPreis { font-weight: var(--gew-halb); }
.freiListe small { color: var(--muted); }

.wegListe { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.wegListe li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; }
.wegListe .wegDatum { margin-top: 0; }

/* Ein gemerktes Angebot, das in keiner aktuellen Suche mehr auftaucht. */
.veraltetHinweis {
  margin-top: 10px; font-size: var(--t-xs); padding: 6px 9px; border-radius: var(--r-s);
  background: var(--warn-flaeche); color: var(--fg);
}

.kartenAktionen { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.kartenAktionen .go { flex: 1; margin-top: 0; }
.vgl {
  font-size: var(--t-s); padding: 7px 11px; border-radius: var(--r-s); cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg); white-space: nowrap;
}
.vgl:hover { border-color: var(--muted); }
.vgl.on { background: var(--accent); color: var(--auf-signal); border-color: var(--accent); }

/* ------------------------------------------------------------- Vergleich */

/* Begleitet einen durch alle Reiter, solange etwas ausgewählt ist. */
/* Die Auswahl trägt man mit sich — sie schwebt unten über der Bühne, statt
   oben 50 Pixel wegzunehmen, die den Ergebnissen fehlen. */
.auswahlLeiste {
  position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%);
  z-index: 20; max-width: min(680px, calc(100% - var(--s-8)));
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); font-size: var(--t-s);
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel);
  box-shadow: var(--schatten-3);
}
/* Sobald die Fläche rollt statt der Bühne, hat die Bühne keine feste Höhe
   mehr — `absolute` säße dann am Ende einer 20000px langen Liste statt am
   Bildrand. Die Regel steht bewusst hier hinter der allgemeinen und nicht
   oben im Medienblock: dort hätte die allgemeine sie wieder überschrieben. */
@media (max-width: 1180px) {
  .auswahlLeiste { position: fixed; }
}

.auswahlNamen {
  color: var(--muted); flex: 1; min-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Waagerecht scrollbar, damit auf dem Telefon nichts zerquetscht wird.
   Die Merkmalsspalte bleibt beim Scrollen stehen. */
/* Die schwebende Auswahlleiste (.auswahlLeiste) liegt unten über der Bühne
   und wird bis zu ~123px hoch, wenn die Namen der verglichenen Unterkünfte
   umbrechen. Ohne diesen Freiraum lagen die letzten Tabellenzeilen
   ("gemerkt", "deine Notiz") dauerhaft darunter — auch ganz unten
   angescrollt nicht erreichbar, weil beide relativ zum selben Rollbereich
   positioniert sind. */
.vglRahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 148px; }
.vgl-tabelle, table.vgl {
  border-collapse: collapse; font-size: var(--t-s); min-width: 100%;
  background: var(--panel); border-radius: var(--r-m); overflow: hidden;
}
table.vgl th, table.vgl td {
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top; min-width: 170px;
}
table.vgl th[scope="row"] {
  font-weight: var(--gew-halb); color: var(--muted); font-size: var(--t-s); min-width: 155px;
  position: sticky; left: 0; background: var(--panel); z-index: 1;
}
table.vgl thead th { background: var(--panel); position: sticky; top: 0; z-index: 2; }
table.vgl thead th[scope="col"]:first-child { z-index: 3; left: 0; }
table.vgl tr:last-child td, table.vgl tr:last-child th { border-bottom: none; }

/* Feste Breite, nicht nur eine Höchstbreite: sonst bekommt jede Spalte je nach
   Textlänge eine andere Breite, und die Vorschaubilder stehen unterschiedlich
   hoch nebeneinander. */
.vglKopf { display: grid; gap: 6px; width: 215px; }
.vglKopf img { width: 215px; height: 161px; object-fit: cover; border-radius: var(--r-s); background: var(--line); }
.vglName { font-weight: var(--gew-halb); line-height: 1.3; }
.vglKopf .veraltet { color: var(--warn); }
.vglKopf .go { margin-top: 4px; }

/* Der beste Zahlenwert einer Zeile. Fehlende Werte nehmen daran nicht teil —
   „unbekannt“ ist kein schlechterer Wert, sondern gar keiner. */
table.vgl td.best { background: var(--new-flaeche); font-weight: var(--gew-halb); }
.unbekannt { color: var(--muted); font-style: italic; }
.nichtVerfuegbar { color: var(--warn); font-weight: var(--gew-halb); }
/* Zähler am Reiter, wenn etwas nicht mehr verfügbar ist. */
/* Der Zaehler neben einer Ueberschrift ist eine Zahl, kein Warnschild. In der
   Ueberschriftgroesse ergab die farbige Pille einen schmalen Splitter, in dem
   die Ziffer kaum stand. */
.abschnitt .count {
  font-size: var(--t-s); font-weight: var(--gew-mittel);
  color: var(--muted); margin-left: var(--s-2);
  background: none; padding: 0;
}
.abschnitt .count.warnung {
  color: var(--warn); font-weight: var(--gew-halb);
  background: none; padding: 0;
}
.count.warnung { background: var(--warn); color: var(--auf-signal); }
.notizZitat { font-size: var(--t-s); white-space: pre-wrap; }

/* Auf dem Telefon bleibt neben der klebenden Merkmalsspalte sonst kaum Platz
   für die Werte. Schmaler, aber nicht unlesbar klein. */
@media (max-width: 560px) {
  table.vgl th, table.vgl td { padding: 8px 10px; min-width: 145px; }
  table.vgl th[scope="row"] { min-width: 108px; max-width: 108px; font-size: var(--t-xs); }
  .vglKopf, .vglKopf img { width: 150px; }
  .vglKopf img { height: 112px; }
}

/* --------------------------------------------------------- Aktive Filter */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.chip {
  font-size: var(--t-s); padding: 5px 11px; border-radius: var(--r-rund); cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
}
.chip:hover { border-color: var(--muted); }
.chip.alle { background: none; color: var(--muted); border-style: dashed; }

/* Zeile mit Strandentfernung, Etage und Außenmerkmalen auf der Ergebniskarte. */
.card .meta.lage { display: flex; flex-wrap: wrap; gap: 4px 8px; }

/* Der Zeitraum, für den der Preis gilt. Bei Ausweichterminen hervorgehoben —
   dort gilt der Preis für andere Tage als die eingestellten. */
/* Der Flugknopf sitzt in der Lagezeile und soll dort nicht dominieren —
   angereist wird meist mit dem Auto. */
.card .lage .flugLink {
  color: var(--new); font-weight: var(--gew-mittel); text-decoration: none;
  white-space: nowrap;
}
.card .lage .flugLink:hover { text-decoration: underline; }

/* Der Flugpreis: ein Schnappschuss, kein garantierter Preis — deshalb dezent,
   in der gedämpften Textfarbe statt im Akzent, direkt vor dem Link. */
.card .lage .flugPreis {
  color: var(--muted); font-weight: var(--gew-mittel);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Bettbefund: die Farbe sagt das Ergebnis, der Text sagt es noch einmal —
   Farbe allein reicht nicht, wenn jemand sie nicht unterscheiden kann. */
.card .meta.bettbefund { display: flex; align-items: center; gap: 4px; font-weight: var(--gew-mittel); }
.card .meta.bettbefund.gut { color: var(--good); }
.card .meta.bettbefund.warn { color: var(--warn); }
.card .meta.bettbefund.unklar { color: var(--muted); font-weight: var(--gew-normal); }
.card .meta.bettbefund .quelle { color: var(--muted); font-weight: var(--gew-normal); }

.card .meta.zeitraum { font-variant-numeric: tabular-nums; }
.card .meta.zeitraum.verschoben span {
  color: var(--fg); background: var(--warn-flaeche);
  padding: 2px 7px; border-radius: var(--r-s);
}

/* ------------------------------------------------------------- Fortschritt */
#overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none;
  align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
#overlay.on { display: flex; }
#overlay .box {
  background: var(--panel); border-radius: var(--r-l); padding: 22px 24px; width: min(660px, 100%);
  box-shadow: var(--shadow); display: grid; gap: 12px;
}
#overlay h3 { margin: 0; font-size: var(--t-l); }
.bar { height: 6px; border-radius: var(--r-rund); background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); width: 30%; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
#runLog {
  font: 12.5px/1.6 ui-monospace, Consolas, monospace; background: var(--flaeche);
  border-radius: var(--r-m); padding: 12px; max-height: 320px; overflow-y: auto; white-space: pre-wrap;
}
.summary { display: grid; gap: 6px; font-size: var(--t-s); }
.summary table { border-collapse: collapse; width: 100%; }
.summary td { padding: 3px 0; }
.summary td:last-child { text-align: right; color: var(--muted); }

/* --------------------------------------------------------------- Übersicht */
/* Zwischenueberschriften sind Ueberschriften, keine Etiketten. Versalien mit
   gesperrter Laufweite in Grauton waren die deutlichste Alt-Signatur im
   Bestand — und schlechter lesbar als gemischte Schrift. */
.abschnitt {
  font-size: var(--t-l); letter-spacing: -.01em;
  color: var(--fg); margin: var(--s-7) 0 var(--s-3); font-weight: var(--gew-halb);
}
.abschnitt:first-child { margin-top: 0; }

.kacheln { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kachel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 16px 18px; box-shadow: var(--shadow); cursor: pointer; display: grid; gap: 6px;
  text-align: left; font: inherit; color: inherit;
}
.kachel:hover { border-color: var(--line); box-shadow: var(--schatten-2); }
.kachel .kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kachel .nm { font-weight: var(--gew-halb); font-size: var(--t-m); }
/* Die Zahl auf der Kachel ist eine Zahl, kein Abzeichen. Sie teilt sich die
   Klasse mit dem Filterzaehler und erbte dessen roten Kreis — bei 30px eine
   Blase, die aussieht, als sei etwas schiefgegangen. */
.kachel .zahl {
  font-size: var(--t-2xl); font-weight: var(--gew-fett); line-height: 1;
  background: none; color: var(--fg); padding: 0; border-radius: 0;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.kachel .zahl.leer { color: var(--muted); }
.kachel .dt { font-size: var(--t-s); color: var(--muted); }
.kachel .marken { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.marke {
  font-size: var(--t-xs); font-weight: var(--gew-halb); padding: 2px 8px; border-radius: var(--r-rund);
  background: var(--flaeche); color: var(--muted); border: 1px solid var(--line);
}
.marke.neu { background: var(--new); color: var(--auf-signal); border-color: transparent; }
.marke.datum { background: var(--new-flaeche); color: var(--new); border-color: transparent; }
.marke.laeuft { background: var(--accent); color: var(--auf-signal); border-color: transparent; }

.feedliste { display: grid; gap: 10px; }
.feedzeile {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 14px 10px 10px;
  text-decoration: none; color: inherit;
}
.feedzeile:hover { border-color: var(--line); box-shadow: var(--schatten-1); }
.feedzeile img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--r-s); background: var(--line); }
.feedzeile .txt { min-width: 0; }
.feedzeile .nm { font-weight: var(--gew-halb); font-size: var(--t-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedzeile .sub { font-size: var(--t-s); color: var(--muted); }
.feedzeile .pr { font-weight: var(--gew-fett); font-size: var(--t-m); white-space: nowrap; text-align: right; }
.feedzeile .pr small { display: block; font-weight: var(--gew-normal); font-size: var(--t-xs); color: var(--muted); }

/* ---------------------------------------------------------- Anmeldung/Konto */
body.anmeldeseite { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }
.anmeldung {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow); padding: 34px 30px; width: min(400px, 100%); text-align: center;
}
.anmeldung img { border-radius: var(--r-l); }
.anmeldung h1 { margin: 14px 0 2px; font-size: var(--t-xl); letter-spacing: -.02em; }
.anmeldung .unterzeile { margin: 0 0 26px; color: var(--muted); font-size: var(--t-s); }
.anmeldung button.gross {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; margin-bottom: 10px; font-size: var(--t-m);
}
.anmeldung .hint { margin: 4px 0 0; }
.anmeldung .bar { margin: 18px 0; }
.meldung { margin: 16px 0 0; font-size: var(--t-s); min-height: 1.2em; color: var(--muted); }
.meldung.fehler { color: var(--accent); font-weight: var(--gew-halb); }
.einrichtung { margin-top: 18px; text-align: left; font-size: var(--t-s); color: var(--muted); }
.einrichtung h2 { font-size: var(--t-m); color: var(--fg); margin: 0 0 8px; }
.einrichtung code {
  background: var(--flaeche); border: 1px solid var(--line); border-radius: var(--r-s); padding: 1px 5px; font-size: var(--t-s);
}

.kontobox {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 16px 18px; box-shadow: var(--shadow); display: grid; gap: 14px;
}
.kontozeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kontozeile span { font-size: var(--t-m); font-weight: var(--gew-halb); }
.passkeys { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.passkeys li {
  display: flex; align-items: center; gap: 10px; font-size: var(--t-s);
  background: var(--flaeche); border-radius: var(--r-s); padding: 7px 10px;
}
.passkeys li span { flex: 1; }
.passkeys li small { color: var(--muted); }
.passkeys li.hint { background: none; padding: 0; }

/* Leerzustände erklären, was passiert ist und was als Nächstes geht — eine
   bloße Meldung „keine Daten“ lässt einen ratlos zurück. */
.empty {
  padding: 34px 22px; color: var(--muted); text-align: left;
  max-width: 560px; margin: 0 auto;
  background: var(--panel); border: 1px dashed var(--line); border-radius: var(--r-m);
}
.empty b { display: block; color: var(--fg); font-size: var(--t-m); margin-bottom: 6px; }
.empty p { margin: 0 0 12px; line-height: 1.5; }
.nullGruende { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.nullGruende li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--flaeche); border-radius: var(--r-s); padding: 7px 9px 7px 12px;
  color: var(--fg); font-size: var(--t-s);
}
.nullGruende small { color: var(--muted); }
.nullAktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.note { font-size: var(--t-s); color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; margin-bottom: 18px; }
.note b { color: var(--warn); }
.cmp { width: 100%; border-collapse: collapse; font-size: var(--t-s); background: var(--panel); border-radius: var(--r-m); overflow: hidden; }
.cmp th, .cmp td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp th { font-weight: var(--gew-halb); color: var(--muted); font-size: var(--t-s); }
.cmp tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------- Ladezustaende
   Platzhalter, solange die Angebote geholt werden. Aufbau wie eine echte
   Karte, damit beim Eintreffen der Daten nichts springt. Die Farbe ist
   bewusst nur eine Spur heller als die Flaeche: es soll nach "noch nichts"
   aussehen, nicht nach Inhalt. */
.card.skelett { pointer-events: none; }
.card.skelett .shot {
  background: var(--line);
  /* Dasselbe Format wie eine echte Karte — ein Platzhalter, der die falsche
     Hoehe hat, verursacht genau den Sprung, den er verhindern soll. */
  aspect-ratio: var(--bild-format);
}
.card.skelett .body { display: grid; gap: 10px; padding: 14px; }
.skelett .bar {
  display: block;
  height: 12px;
  border-radius: var(--r-s);
  background: var(--line);
  width: 62%;
}
.skelett .bar.breit { width: 88%; height: 15px; }
.skelett .bar.schmal { width: 38%; }
.ergebnisKopf.skelett { display: grid; gap: 10px; }

/* Ein ruhiges Pulsieren zeigt, dass etwas laeuft. Wer Bewegung abgestellt
   hat, sieht die Kaesten still — die Information steckt in der Form. */
.skelett .bar, .card.skelett .shot { animation: pulsieren 1.4s ease-in-out infinite; }
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .skelett .bar, .card.skelett .shot { animation: none; }
}

.ladeHinweis { color: var(--muted); margin: 0 0 12px; }
/* ============================================================== Profilseite
   Eigene Seite statt eines Kastens am Ende der Startansicht. Was hier steht,
   betrifft nicht eine Suche, sondern das Konto und dieses Geraet — zwischen
   „Neu gefunden" und „Zuletzt angesehen" war es an der falschen Stelle. */
body.profilseite { background: var(--bg); }
.profil {
  max-width: 760px; margin: 0 auto;
  padding: var(--s-5) var(--s-5) var(--s-8);
  /* Die Profilseite hat kein `#app` um sich — hier bleibt der Abstand lokal. */
  padding-top: max(var(--s-5), env(safe-area-inset-top));
}
.profilKopf { margin-bottom: var(--s-6); }
.profilKopf h1 { margin: var(--s-2) 0 0; font-size: var(--t-2xl); letter-spacing: -.02em; }
.zurueck {
  display: inline-block; color: var(--muted); text-decoration: none;
  font-size: var(--t-s); padding: var(--s-1) 0;
}
.zurueck:hover { color: var(--fg); }

.profilblock {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: var(--s-5); margin-bottom: var(--s-4);
  display: grid; gap: var(--s-4);
}
.profilblock h2 {
  margin: 0; font-size: var(--t-l); letter-spacing: -.01em; font-weight: var(--gew-halb);
}
.profilblock > .hint { margin: 0; }
.profilblock .field + .field, .profilblock .row + .row, .profilblock .row + .field { margin-top: 0; }
.kontoMail { font-size: var(--t-m); font-weight: var(--gew-halb); }
.profilAktionen { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* Passkeys mit Namensfeld. Ohne Namen unterscheiden sich mehrere Passkeys nur
   durch eine Base64-Kennung — dann traut man sich keinen zu entfernen. */
.profil .passkeys { margin: 0; }
.profil .passkeys li { gap: var(--s-3); padding: var(--s-2) var(--s-3); flex-wrap: wrap; }
.passkeyName {
  flex: 1 1 180px; min-width: 0;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--panel);
}
.passkeyName.gespeichert { border-color: var(--good); }
.profil .passkeys li small { color: var(--muted); flex: 0 0 auto; }
.passkeyWeg { flex: 0 0 auto; }

.telegramStand {
  margin: 0; font-size: var(--t-m); font-weight: var(--gew-mittel);
  padding: var(--s-3); border-radius: var(--r-s);
  background: var(--warn-flaeche); color: var(--fg);
}
.telegramStand.gut { background: var(--good-flaeche); }

@media (max-width: 640px) {
  .profil { padding: var(--s-4) var(--s-4) var(--s-7); }
  .profilblock { padding: var(--s-4); border-radius: var(--r-m); }
  .profilKopf h1 { font-size: var(--t-xl); }
}
/* Als installierte App auch hier eine Luecke oben — Begruendung siehe beim
   Gegenstueck fuer `#app` weiter oben. Die Regel steht bewusst hier hinter der
   allgemeinen `.profil`-Regel: Medienabfragen erhoehen die Spezifitaet nicht. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .profil { padding-top: max(var(--s-5), calc(env(safe-area-inset-top) + 10px), 28px); }
}
/* --------------------------------------------------- Orte in der Umgebung
   Airbnb ordnet jede Unterkunft dem Ort zu, in dem sie steht — ohne die
   Nachbarorte sieht man die Haelfte des Angebots nicht. Der Kasten sagt
   ausdruecklich, was das kostet: jeder Ort ist ein eigener Suchlauf. */
.umgebung {
  margin-top: var(--s-3); padding: var(--s-3);
  background: var(--new-flaeche); border-radius: var(--r-s);
  display: grid; gap: var(--s-2);
}
.umgebungKopf { margin: 0; font-size: var(--t-s); line-height: 1.45; }
.umgebungKopf b { font-weight: var(--gew-halb); }
.umgebungRest { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.umgebungRest .chip { background: var(--panel); }
.umgebungRest .chip small { color: var(--muted); margin-left: 3px; }
.umgebung .hint { font-size: var(--t-xs); }
/* Der Knopf unter „Neu gefunden". Er steht mittig und ruhig — er ist eine
   Einladung, keine Handlung, die man gleich sehen muss. */
.feedMehr {
  display: block; width: 100%; margin-top: var(--s-3);
  padding: var(--s-2); text-align: center;
}
/* ===================================================== Tippgefühl (Haptik)
   Am Telefon gibt es kein Überfahren. Der gedrückte Zustand ist damit die
   **einzige** Rückmeldung, die es überhaupt geben kann — ohne ihn fühlt sich
   jeder Tipp tot an, bis sich die Ansicht ändert.

   Der blaue Blitz, den iOS und Android von sich aus über jedes angetippte
   Element legen, weicht dabei den eigenen Zuständen: er kommt verzögert,
   liegt über den eigenen Farben und sieht auf jedem Gerät anders aus. */
* { -webkit-tap-highlight-color: transparent; }

/* Flächen, die man drückt: sie geben sichtbar nach. 0.97 ist wenig genug,
   dass nichts springt, und genug, dass der Finger es merkt. */
.kachel:active,
.feedzeile:active,
.card .fav:active,
.card .vgl:active,
.chip:active,
.preisNadelInhalt:active,
button.primary:active,
button.ghost:active,
button.danger:active,
a.knopfLink:active,
.ansichtWahl button:active,
.tabs button:active {
  transform: scale(.97);
}

/* Flächen, die eher aufleuchten als nachgeben — dort wäre ein Schrumpfen
   unruhig, weil sie den halben Bildschirm einnehmen. */
.schrittSchalter:active { opacity: .7; }
.tabs button:active { opacity: .75; }
button.link:active, .link:active { opacity: .55; }
.orteListe li .ortWeg:active,
#searchList .sucheWeg:active { opacity: .5; transform: scale(.9); }

/* Die Rückmeldung muss sofort da sein — eine Übergangszeit beim Drücken
   würde sie genau um die Spanne verzögern, um die es geht. Nur das Loslassen
   läuft weich aus. */
.kachel, .feedzeile, .chip, button.primary, button.ghost, button.danger,
a.knopfLink, .ansichtWahl button, .tabs button, .card .fav, .card .vgl {
  transition: transform .16s ease, opacity .16s ease, background-color .15s ease;
}
.kachel:active, .feedzeile:active, .chip:active, button.primary:active,
button.ghost:active, button.danger:active, a.knopfLink:active,
.ansichtWahl button:active, .tabs button:active, .card .fav:active, .card .vgl:active {
  transition-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .kachel:active, .feedzeile:active, .card .fav:active, .card .vgl:active,
  .chip:active, .preisNadelInhalt:active, button.primary:active,
  button.ghost:active, button.danger:active, a.knopfLink:active,
  .ansichtWahl button:active, .tabs button:active,
  .orteListe li .ortWeg:active, #searchList .sucheWeg:active {
    transform: none;
  }
}

/* Auf dem Telefon sind Kacheln und Feedzeilen die Hauptziele — dort lohnt
   zusätzlich eine kurz aufblitzende Fläche. */
@media (hover: none) {
  .kachel:active, .feedzeile:active { background: var(--flaeche); }
}
/* ------------------------------------------------------------ Preiskalender */
/* Waagerecht scrollbar statt umbrechend: die Termine sind eine Zeitachse, und
   eine zweite Zeile würde die Reihenfolge zerreißen. */
.preiskalender { margin-bottom: 18px; }
.preiskalender .abschnitt { margin-top: 0; }
.kalenderReihe {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximity;
}
.kalenderZelle {
  flex: 0 0 auto; min-width: 118px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: var(--r-m);
  background: var(--panel); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.kalenderZelle .termin { font-weight: var(--gew-halb); }
.kalenderZelle .dauer,
.kalenderZelle .anzahl { font-size: .82em; color: var(--muted); }
.kalenderZelle .ab { font-size: 1.05em; }
.kalenderZelle.wunsch { border-color: var(--fg); }
.kalenderZelle.bester { background: var(--good-flaeche); border-color: var(--good); }
.kalenderZelle.bester .ab { color: var(--good); }
.kalenderZelle.leer { opacity: .6; }

.reisepreis b { font-weight: var(--gew-halb); color: var(--fg); }

/* ===========================================================================
   A&O-Schicht
   ---------------------------------------------------------------------------
   Formensprache von ao-webstudio.de (Bühne, Bricolage Grotesque + Instrument
   Sans, Mono-Versalien als Eyebrow, Chrom in der Wortmarke, Glanzstreif auf
   dem Hauptknopf, Lichtkegel unter dem Zeiger) mit eigener Note: Lagune als
   Akzent, eine Welle als Marker, Horizontlinie unter dem Kopf.

   Bewusst am Ende und bewusst nur Farbe, Schrift und Form — keine Masse, die
   eine Telefonregel weiter oben setzt. Sonst würde diese Schicht genau die
   Medienabfragen überstimmen, an denen schon zweimal ein Fehler entstand.
   Die Schriften liegen auf dem eigenen Server: keine Anfrage an Google.
   =========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}

:root {
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-sans: "Instrument Sans", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
  --ease-aus: cubic-bezier(.2, .7, .2, 1);
  /* Die Welle vor Zwischenüberschriften — als Maske, damit sie die Farbe aus
     dem Stylesheet nimmt. */
  --welle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 11'%3E%3Cpath d='M1 7c3-5 6-5 9 0s6 5 9 0' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  /* Wortmarke: im Hellen schlicht, auf der Bühne in Chrom. */
  --marke-fuellung: linear-gradient(var(--fg), var(--fg));
  /* Lichtkegel unter dem Zeiger. */
  --kegel: rgba(10,113,121,.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marke-fuellung: linear-gradient(168deg,#f4f7fd 0%,#cdd7ea 18%,#8a97ad 38%,#fff 52%,#9fb0cd 68%,#d8e2f4 86%,#aab6c9 100%);
    --kegel: rgba(63,193,201,.16);
  }
}
:root[data-theme="dark"] {
  --marke-fuellung: linear-gradient(168deg,#f4f7fd 0%,#cdd7ea 18%,#8a97ad 38%,#fff 52%,#9fb0cd 68%,#d8e2f4 86%,#aab6c9 100%);
  --kegel: rgba(63,193,201,.16);
}

body { font-family: var(--f-sans); }

/* -- Überschriften und Zahlen in der Displayschrift ----------------------- */
main > header h2,
.abschnitt,
.markeWort,
.card .title,
.card .price,
.kachel b,
.kalenderZelle .ab,
.cmp th {
  font-family: var(--f-display);
  letter-spacing: -.02em;
}
main > header h2 { font-weight: var(--gew-fett); letter-spacing: -.03em; }
.card .price { font-weight: var(--gew-fett); letter-spacing: -.03em; }

/* Zwischenüberschrift mit Welle davor — die eigene Note statt des A-Winkels. */
.abschnitt { display: flex; align-items: center; gap: 10px; font-weight: var(--gew-halb); }
.abschnitt::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 10px;
  background: var(--accent);
  -webkit-mask: var(--welle) center / contain no-repeat;
  mask: var(--welle) center / contain no-repeat;
}

/* Spaltenköpfe als Eyebrow: Mono-Versalien im Akzent. */
.spaltenkopf h3,
.spaltenkopfKriterien h3 {
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: var(--gew-mittel);
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
}

/* -- Wortmarke in Chrom --------------------------------------------------- */
.markeWort b {
  font-weight: var(--gew-fett); letter-spacing: -.03em;
  background: var(--marke-fuellung);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.markeZeichen { border: 1px solid var(--line); }

/* -- Horizontlinie unter dem Kopf: beginnt im Akzent, läuft ins Leere ----- */
main > header {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to right, var(--accent), var(--line) 38%, transparent) 1;
}

/* -- Knöpfe --------------------------------------------------------------- */
button.primary { position: relative; overflow: hidden; }
button.primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  pointer-events: none;
}
button.primary:hover:not(:disabled)::after { animation: glanzstreif .7s var(--ease-aus); }
@keyframes glanzstreif { to { left: 130%; } }
.go { border-radius: var(--r-rund); transition: transform .16s var(--ease-aus); }
.go:hover { transform: translateY(-1px); }

/* -- Karten --------------------------------------------------------------- */
.card { position: relative; isolation: isolate; }
.card:hover { box-shadow: var(--schatten-2); border-color: color-mix(in srgb, var(--accent) 35%, var(--karte-rand)); }
/* Der Lichtkegel folgt dem Zeiger (Koordinaten aus app.js). Liegt über dem
   Bild, fängt aber keinen Klick ab. */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(14rem 14rem at var(--mx, 50%) var(--my, -30%), var(--kegel), transparent 70%);
  opacity: 0; transition: opacity .32s var(--ease-aus);
}
@media (hover: hover) {
  .card:hover::before { opacity: 1; }
}

/* Marker im Foto: Mono-Versalien auf dunklem Glas, Farbe als Rand und Schrift.
   Feste Farben, weil sie immer auf einem Foto stehen, nie auf der Seite. */
.flag {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: var(--gew-mittel);
  text-transform: uppercase; letter-spacing: .08em;
  background: rgba(7,8,11,.72); color: #eceef2;
  border: 1px solid rgba(236,238,242,.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.flag.new, .flag.datum { background: rgba(7,8,11,.72); color: #9db8ff; border-color: #9db8ff; }
.flag.drop { background: rgba(7,8,11,.72); color: #f0a060; border-color: #f0a060; }
.flag.warn { background: rgba(7,8,11,.72); color: #ffb4a8; border-color: #ffb4a8; }
.fav { background: rgba(7,8,11,.55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fav.on { color: #3fc1c9; }

/* Wertung als Ring: der Anteil ist die Zahl, der Ring macht sie ablesbar. */
.score {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  font-family: var(--f-display); font-size: var(--t-xs); color: var(--fg);
  background:
    radial-gradient(closest-side, var(--panel) 80%, transparent 82% 100%),
    conic-gradient(var(--muted) calc(var(--w, 0) * 1%), var(--line) 0);
}
.score.gut {
  color: var(--fg);
  background:
    radial-gradient(closest-side, var(--panel) 80%, transparent 82% 100%),
    conic-gradient(var(--accent) calc(var(--w, 0) * 1%), var(--line) 0);
}
.rowline { align-items: center; }

/* -- Kacheln und Zellen: haarfeine Ränder statt Schatten ------------------ */
.kachel { box-shadow: none; }
.kachel:hover { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  button.primary:hover:not(:disabled)::after { animation: none; }
  .card::before, .go { transition: none; }
  .go:hover { transform: none; }
}
/* Die Zahl am Schubladenknopf klebte ohne Abstand am Wort. */
#btnSchublade .zahl { margin-left: 6px; }

/* ------------------------------------------------------------ Foto-Check */
.card .fotobefund { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.fotomarke {
  font-size: var(--t-xs); padding: 2px 8px; border-radius: var(--r-s);
  border: 1px solid var(--line); color: var(--muted);
}
.fotomarke.gut { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.fotomarke.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.fotobefund .quelle {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-left: 2px;
}

/* ---------------------------------------------------------------- Details */
.detailLeer { display: grid; gap: 2px; justify-items: start; }
.detailLeer small { color: var(--muted); font-size: var(--t-xs); }
.detailBlock { border: 1px solid var(--line); border-radius: var(--r-m); padding: 8px 12px; background: var(--flaeche); }
.detailBlock > summary { cursor: pointer; font-weight: var(--gew-halb); font-size: var(--t-s); }
.detailAbschnitt { margin-top: 10px; font-size: var(--t-s); }
.detailAbschnitt > b {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: var(--gew-mittel);
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
}
.detailAbschnitt p { margin: 4px 0 0; }
.detailAbschnitt ul { margin: 4px 0 0; padding-left: 18px; }
.detailAbschnitt .lob li::marker { content: "+ "; color: var(--good); }
.detailAbschnitt .kritik li::marker { content: "− "; color: var(--warn); }
.ausstattungText { color: var(--muted); }
.warnText { color: var(--warn); }
.fehlerText { color: var(--warn); display: block; margin-top: 4px; }
/* Ohne Wertung (etwa ein gemerktes Angebot, das in keiner Suche mehr steht) kein leerer Ring. */
.score:empty { display: none; }

/* ---------------------------------------------------- Gemeinsam entscheiden */
.stimmen { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.stimme {
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-rund);
  padding: 3px 10px; cursor: pointer; font-size: var(--t-s); line-height: 1.4;
  filter: grayscale(1); opacity: .75; transition: opacity .15s, filter .15s, border-color .15s;
}
.stimme:hover { opacity: 1; filter: none; }
.stimme.on { filter: none; opacity: 1; border-color: var(--accent); background: var(--accent-weich); }
.stimmenAndere { font-size: var(--t-xs); color: var(--muted); }

/* --------------------------------------------------------- Satzsuche */
.satzsuche {
  display: grid; gap: 6px; margin-bottom: var(--s-6);
  padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel);
}
.satzsuche label {
  font-family: var(--f-mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .14em; color: var(--accent);
}
.satzZeile { display: flex; gap: 8px; flex-wrap: wrap; }
.satzZeile input { flex: 1 1 260px; min-width: 0; }
.satzsuche .hint { margin: 0; font-size: var(--t-xs); color: var(--muted); }

/* ----------------------------------------------------------- Kaufhinweis */
.kaufhinweis {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--r-s);
  font-size: var(--t-s); border: 1px solid var(--line); background: var(--panel);
}
.kaufhinweis b { display: block; }
.kaufhinweis small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t-xs); }
.kaufhinweis.jetzt { border-color: var(--warn); background: var(--warn-flaeche); }
.kaufhinweis.jetzt b { color: var(--warn); }
.kaufhinweis.warten { border-color: var(--good); background: var(--good-flaeche); }
.kaufhinweis.warten b { color: var(--good); }
.kaufhinweis.knapp { border-color: var(--new); background: var(--new-flaeche); }
.kaufhinweis.knapp b { color: var(--new); }

/* ------------------------------------------------------------------- FAQ */
.faq details { border-top: 1px solid var(--line); padding: 12px 0; }
.faq details:first-of-type { border-top: none; }
.faq summary {
  cursor: pointer; font-family: var(--f-display); font-weight: var(--gew-halb);
  font-size: var(--t-m); letter-spacing: -.01em; list-style: none;
  display: flex; justify-content: space-between; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: var(--gew-fett); flex: 0 0 auto; }
.faq details[open] summary::after { content: "−"; }
.faq details p, .faq details ul { color: var(--muted); margin: 8px 0 0; max-width: 68ch; }
.faq details ul { padding-left: 20px; }
.faq details li + li { margin-top: 4px; }
.faq code { font-family: var(--f-mono); font-size: .9em; }

/* Das App-Icon als Zeichen neben der Wortmarke — dasselbe wie auf dem Startbildschirm. */
.markeZeichen:has(img) { background: none; border: none; padding: 0; overflow: hidden; }
.markeZeichen img { width: 100%; height: 100%; display: block; }
/* Das Satzfeld steht vor der ersten Überschrift — ob sichtbar (eigener Abstand
   unten) oder versteckt: die Überschrift danach braucht keinen oberen Abstand. */
.satzsuche + .abschnitt { margin-top: 0; }

/* ------------------------------------------------- Geteilte Suchen, Kreis */
.marke.besitz { background: var(--accent-weich); color: var(--accent); }
.nurLesenHinweis {
  margin: 0; padding: 10px 12px; border-radius: var(--r-m);
  background: var(--accent-weich); color: var(--fg); font-size: var(--t-s);
}
/* Fremde Suche: nichts anbieten, was der Server ohnehin ablehnt. */
#app[data-nurlesen="1"] .spaltenkopfKriterien,
#app[data-nurlesen="1"] .suchbahn,
#app[data-nurlesen="1"] .suchZusatz,
#app[data-nurlesen="1"] .suchleiste,
#app[data-nurlesen="1"] #btnAdopt { display: none !important; }

/* ------------------------------------------------------------ Einladungen */
.einladungZeile, .einladungLink { display: flex; gap: 8px; flex-wrap: wrap; }
.einladungZeile input, .einladungLink input { flex: 1 1 220px; min-width: 0; }
.unterkopf { font-size: var(--t-s); margin: var(--s-4) 0 var(--s-2); color: var(--muted); font-weight: var(--gew-halb); }
.einfacheListe { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.einfacheListe li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: var(--t-s); }
.einfacheListe li.leer { color: var(--muted); }
.einfacheListe small { color: var(--muted); }
.einladungHinweis {
  text-align: left; margin: 0 0 var(--s-4); padding: 12px 14px; border-radius: var(--r-m);
  background: var(--accent-weich); font-size: var(--t-s);
}
.einladungHinweis p { margin: 4px 0 0; }
/* Leere Meldung auf der Anmeldeseite: kein leerer Rahmen. */
.anmeldung .meldung:empty { display: none; }

/* ------------------------------------------------------- Impressum, Fuß */
.poweredBy {
  text-align: center; font-size: var(--t-xs); color: var(--muted);
  margin-top: var(--s-5); line-height: 1.8;
}
.poweredBy a { color: var(--muted); text-decoration: none; }
.poweredBy a:hover { color: var(--accent); }
.poweredBy b { font-family: var(--f-display); font-weight: var(--gew-halb); letter-spacing: .02em; }
aside .poweredBy { margin-top: 4px; }
.faq .profilblock > p { margin: 0 0 12px; }
.faq .profilblock a { color: var(--accent); text-underline-offset: 2px; }
.anmeldung .nurEinladung { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--muted); }
.registrierung { display: grid; gap: 6px; margin-top: var(--s-3); text-align: left; }
.registrierung label { font-size: var(--t-xs); color: var(--muted); }
.registrierung .hint { font-size: var(--t-xs); color: var(--muted); margin: 4px 0 0; }
.registrierung button { margin-top: 6px; }
.einladungHinweis a { color: var(--accent); }

/* ===========================================================================
   Gerüst wie Airbnb (seit 29.09.2026)
   ---------------------------------------------------------------------------
   Die Seite rollt als Ganzes, der Kopf klebt oben. Kopf: Marke, Suchleiste,
   Bereiche und Menü. Darunter die Suchen als Kategorien, die Werkzeugleiste
   und die Bühne. Auf dem Telefon: Suchpille oben, Reiter unten, Aufklapper
   und Filter als Vollbild. Farben und Schriften kommen aus der A&O-Schicht.
   =========================================================================== */

html, body { height: auto; }
#app { min-height: 100vh; min-height: 100dvh; padding-top: env(safe-area-inset-top); }
.onlyMobile { display: none !important; }
.pane { display: none; }
.pane.on { display: block; }

/* -------------------------------------------------------------------- Kopf */
.airKopf {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to right, var(--accent), var(--line) 38%, transparent) 1;
}
.kopfZeile {
  max-width: var(--breite-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4);
  padding: 14px 24px;
}
.marke {
  justify-self: start; display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.marke img { width: 34px; height: 34px; border-radius: 9px; display: block; }
.marke .markeWort { font-size: 22px; }

/* Die Suchleiste — vier Felder in einer Pille, wie bei Airbnb. */
.suchPille {
  display: flex; align-items: center; min-width: 0; width: min(780px, 56vw);
  border: 1px solid var(--line); border-radius: var(--r-rund);
  background: var(--panel); box-shadow: var(--schatten-2);
  transition: background-color .15s var(--ease-aus);
}
.suchPille.offen { background: var(--flaeche); }
.pFeld {
  flex: 1 1 0; min-width: 0; position: relative;
  background: none; border: 0; border-radius: var(--r-rund);
  padding: 10px 22px; text-align: left; cursor: pointer; color: var(--fg);
}
.pFeld + .pFeld::before {
  content: ""; position: absolute; left: 0; top: 25%; height: 50%; width: 1px; background: var(--line);
}
.pFeld:hover { background: var(--flaeche); }
.suchPille.offen .pFeld:hover { background: color-mix(in srgb, var(--line) 60%, transparent); }
.pFeld.an { background: var(--panel); box-shadow: var(--schatten-2); }
.pFeld.an::before, .pFeld.an + .pFeld::before { opacity: 0; }
.pFeld b { display: block; font-size: 12px; font-weight: var(--gew-halb); }
.pFeld span {
  display: block; font-size: var(--t-s); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pFeld span.gesetzt { color: var(--fg); }
.pLos {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 48px; min-width: 48px; margin: 6px; padding: 0 14px;
  border: 0; border-radius: var(--r-rund); cursor: pointer;
  background: var(--accent); color: var(--auf-signal); font-weight: var(--gew-halb);
  position: relative; overflow: hidden;
}
.pLos svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pLos .losText { display: none; }
.suchPille.offen .pLos .losText, .pLos.laeuft .losText { display: inline; }
.pLos:disabled { opacity: .7; cursor: progress; }

.suchPilleMobil { display: none; }

.kopfRechts { justify-self: end; display: flex; align-items: center; gap: 6px; position: relative; }
.tabs.kopfNav { display: flex; gap: 2px; }
.tabs.kopfNav button {
  display: flex; align-items: center; gap: 6px; position: relative;
  background: none; border: 0; border-radius: var(--r-rund); cursor: pointer;
  padding: 9px 12px; color: var(--muted); font-size: var(--t-s); font-weight: var(--gew-mittel);
}
.tabs.kopfNav button:hover { background: var(--flaeche); color: var(--fg); }
.tabs.kopfNav button.on { color: var(--fg); background: var(--flaeche); }
.tabs .tabZeichen {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
}
.tabs .count {
  background: var(--accent); color: var(--auf-signal); border-radius: var(--r-rund);
  font-size: 10.5px; line-height: 16px; min-width: 16px; padding: 0 5px; text-align: center;
}
.tabs .count:empty { display: none; }
@media (max-width: 1320px) {
  .tabs.kopfNav .tabText { display: none; }
  .tabs.kopfNav .count { position: absolute; top: 2px; right: 2px; }
}

.menueKnopf {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-rund); background: var(--panel);
  padding: 5px 5px 5px 12px; color: var(--fg);
}
.menueKnopf:hover, .menueKnopf[aria-expanded="true"] { box-shadow: var(--schatten-2); }
.menueKnopf > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menueIch {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--muted); color: var(--panel); font-weight: var(--gew-fett); font-size: 13px;
}
.menueIch svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.menue {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 45;
  min-width: 260px; padding: 8px 0; border-radius: var(--r-m);
  background: var(--panel); box-shadow: var(--schatten-3); border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.menue { padding: 6px; min-width: 280px; }
.menue > button, .menue > a {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; border-radius: 10px;
  padding: 10px 12px; color: var(--fg); text-decoration: none;
  font: inherit; font-size: var(--t-s); font-weight: var(--gew-mittel);
}
.menue > button > svg, .menue > a > svg {
  width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.menue > button > svg path[fill], .menue > a > svg path[fill] { fill: var(--accent); }
.menue > button:hover, .menue > a:hover, .menue > button:focus-visible, .menue > a:focus-visible { background: var(--accent-weich); outline: none; }
.menue { border-top: 3px solid var(--accent); }
.menue .mWert { margin-left: auto; color: var(--muted); font-weight: var(--gew-normal); font-size: var(--t-xs); }
.menueWer { display: grid; gap: 2px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.menueWer { grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.menueWer::before { content: attr(data-initial); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--auf-signal); font-weight: var(--gew-fett); }
.menueWer b { font-size: var(--t-m); }
.menueWer span { color: var(--muted); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; }
.menueWer span:empty { display: none; }
.menue hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.menueFuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 12px 6px; color: var(--muted); font-size: var(--t-xs); }
.menueFuss a { color: var(--muted); text-decoration: none; }
.menueFuss a:hover { color: var(--accent); text-decoration: underline; }
.textKnopf { background: none; border: 0; padding: 0; margin-top: 10px; color: var(--muted); font: inherit; font-size: var(--t-xs); text-decoration: underline; cursor: pointer; }
.textKnopf:hover { color: var(--fg); }

/* Aufklapper unter der Suchleiste */
.suchPop {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 8px);
  width: min(780px, calc(100vw - 32px)); max-height: calc(100dvh - 120px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 28px;
  box-shadow: var(--schatten-3); padding: 24px 28px; z-index: 41;
}
.popZu {
  display: none; border: 0; cursor: pointer; width: 36px; height: 36px; border-radius: 50%;
  background: var(--flaeche); color: var(--fg); margin-bottom: 8px;
}
.popFuss { display: flex; justify-content: flex-end; margin-top: var(--s-4); }
#geoQuery { font-size: 18px; padding: 12px 16px; border-radius: var(--r-m); }
.zaehlerZeile {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.zaehlerZeile small { display: block; color: var(--muted); font-size: var(--t-xs); }
.zahlwahl { display: flex; align-items: center; gap: 10px; }
.zahlwahl input {
  width: 3.2em; text-align: center; border: 0; background: none; padding: 4px 0;
  font-weight: var(--gew-halb); -moz-appearance: textfield;
}
.zahlwahl input::-webkit-outer-spin-button, .zahlwahl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rund {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-size: 18px; line-height: 1;
}
.rund:hover { border-color: var(--fg); }

/* -------------------------------------------------------------- Kategorien */
.kategorien { max-width: var(--breite-max); margin: 0 auto; padding: 14px 24px 0; }
.kategorien ul {
  list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: 28px;
  overflow-x: auto; scrollbar-width: none;
}
.kategorien ul::-webkit-scrollbar { display: none; }
.kategorien li { flex: 0 0 auto; }
.kategorie {
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 6px 2px 10px; color: var(--muted); font-size: var(--t-xs); font-weight: var(--gew-halb);
  min-width: 64px; max-width: 170px;
}
.kategorie:hover { color: var(--fg); border-bottom-color: var(--line); }
.kategorie.on { color: var(--fg); border-bottom-color: var(--fg); }
.kategorie .kZeichen {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: var(--gew-fett); font-size: 13px;
  background: var(--flaeche); color: var(--fg);
}
.kategorie.on .kZeichen { background: var(--accent); color: var(--auf-signal); }
.kategorie .kName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kategorie .kMeta { font-weight: var(--gew-normal); font-size: 11px; white-space: nowrap; }
.kategorie .kMeta .marke { display: inline; }
.kategorie.neu .kZeichen { border: 1.5px dashed var(--line); background: none; }

/* ----------------------------------------------------------- Werkzeugleiste */
.werkzeug {
  max-width: var(--breite-max); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--line);
}
.schnellfilter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.schnellfilter::-webkit-scrollbar { display: none; }
.schnellfilter .chip {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  border-radius: var(--r-rund); padding: 7px 14px; font-size: var(--t-s);
}
.schnellfilter .chip:hover { border-color: var(--fg); }
.schnellfilter .chip.an { border-color: var(--fg); background: var(--flaeche); font-weight: var(--gew-halb); }
.werkzeugRechts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.werkzeug .sortZeile { display: flex; gap: 6px; align-items: center; }
.werkzeug #sSort { width: auto; max-width: 240px; padding: 8px 10px; border-radius: var(--r-s); font-size: var(--t-s); }
.filterKnopf {
  display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  border-radius: var(--r-m); padding: 9px 14px; font-weight: var(--gew-halb); font-size: var(--t-s);
}
.filterKnopf:hover { border-color: var(--fg); }
.filterKnopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.filterKnopf .zahl:empty { display: none; }
.filterKnopf .zahl { background: var(--fg); color: var(--bg); border-radius: var(--r-rund); padding: 0 7px; font-size: 11px; }

/* -------------------------------------------------------------------- Bühne */
#buehne { max-width: var(--breite-max); margin: 0 auto; padding: 8px 24px 110px; position: relative; }
.status { display: block; font-size: var(--t-xs); color: var(--muted); }
.status:empty { display: none; }
.bereichTitel { font-family: var(--f-display); font-size: var(--t-2xl); letter-spacing: -.03em; margin: 12px 0 16px; }
#pane-ergebnisse .cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px 22px; }
/* Airbnbs Kartenzuschnitt: das Foto trägt die Karte, kein Kasten darum. */
#pane-ergebnisse .card, #pane-merkliste .card { background: none; border: none; box-shadow: none; }
#pane-ergebnisse .card .shot, #pane-merkliste .card .shot { margin: 0; border-radius: var(--r-m); }
#pane-ergebnisse .card .body, #pane-merkliste .card .body { padding: 10px 2px 0; }
#pane-ergebnisse .card:hover, #pane-merkliste .card:hover { box-shadow: none; }

/* Der schwebende Umschalter Liste/Karte */
.ansichtWahl {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 28px; z-index: 30;
  display: flex; gap: 0; padding: 4px; border-radius: var(--r-rund);
  background: var(--fg); box-shadow: var(--schatten-3);
}
.ansichtWahl button {
  border: 0; cursor: pointer; border-radius: var(--r-rund); padding: 10px 18px;
  background: none; color: var(--bg); font-weight: var(--gew-halb); font-size: var(--t-s);
}
.ansichtWahl button.an { background: var(--bg); color: var(--fg); }
#app:not([data-ansicht="suche"]) .ansichtWahl { display: none; }
.auswahlLeiste { bottom: 88px; }

/* ------------------------------------------------------------ Filterfenster */
.filterSchleier {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: rgba(7,8,11,.55);
}
.filterFenster {
  width: min(780px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column;
  background: var(--panel); border-radius: var(--r-l); box-shadow: var(--schatten-3); overflow: hidden;
  border: 1px solid var(--line);
}
.filterKopf {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 16px; border-bottom: 1px solid var(--line);
}
.filterKopf h2 { margin: 0; font-size: var(--t-m); font-family: var(--f-display); }
.filterKopf .popZu { display: block; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); margin: 0; }
.filterInhalt { overflow-y: auto; padding: 8px 28px 24px; }
.fAbschnitt { padding: 22px 0; border-bottom: 1px solid var(--line); }
.fAbschnitt:last-child { border-bottom: 0; }
.fAbschnitt > h3 { font-family: var(--f-display); font-size: 19px; letter-spacing: -.02em; margin: 0 0 6px; }
.fAbschnitt > .hint { margin: 0 0 12px; }
.fAbschnitt .sliders { display: grid; gap: var(--s-4); }
.filterInhalt .filterSuche { margin: 14px 0 0; }
.schalterZeile {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 10px 0; cursor: pointer; font-size: var(--t-m);
}
.schalterZeile small { display: block; color: var(--muted); font-size: var(--t-xs); }
input.schalter {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto;
  width: 48px; height: 30px; border-radius: var(--r-rund); margin: 0; cursor: pointer;
  background: var(--line); position: relative; transition: background-color .15s;
}
input.schalter::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s var(--ease-aus);
}
input.schalter:checked { background: var(--fg); }
input.schalter:checked::after { left: 21px; background: var(--panel); }
.filterFuss {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 24px; border-top: 1px solid var(--line);
}
.filterFuss .link { font-weight: var(--gew-halb); text-decoration: underline; color: var(--fg); font-size: var(--t-m); }
#btnFilterAnwenden { padding: 13px 22px; font-size: var(--t-m); border-radius: var(--r-s); }
body.modalOffen { overflow: hidden; }

/* Unten-Reiter: nur auf dem Telefon */
.tabs.untenNav { display: none; }

/* ================================================================ Telefon */
@media (max-width: 860px) {
  .onlyMobile { display: flex !important; }
  .kopfZeile { grid-template-columns: 1fr auto; padding: 10px 16px; gap: 10px; }
  .marke, .suchPille, .kopfRechts .kopfNav, .menueKnopf, .werkzeugRechts .filterKnopf { display: none; }
  .kopfRechts { position: fixed; top: calc(env(safe-area-inset-top) + 64px); right: 12px; z-index: 42; }
  .suchPilleMobil {
    display: flex; align-items: center; gap: 12px; min-width: 0; width: 100%;
    border: 1px solid var(--line); border-radius: var(--r-rund); background: var(--panel);
    box-shadow: var(--schatten-2); padding: 10px 18px; text-align: left; color: var(--fg); cursor: pointer;
  }
  .suchPilleMobil svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .waehlerText { min-width: 0; flex: 1; }
  .waehlerName { display: block; font-weight: var(--gew-halb); font-size: var(--t-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .waehlerMeta { display: block; font-size: var(--t-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rundKnopf {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel);
    display: grid; place-items: center; cursor: pointer; color: var(--fg); flex: 0 0 auto;
  }
  .rundKnopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

  /* Aufklapper als Vollbild, wie Airbnbs Suche auf dem Telefon */
  .suchPop {
    position: fixed; inset: 0; transform: none; width: auto; max-height: none; border-radius: 0; border: 0;
    padding: calc(env(safe-area-inset-top) + 14px) 18px calc(env(safe-area-inset-bottom) + 18px);
  }
  .popZu { display: block; }

  .kategorien { padding: 8px 16px 0; }
  .kategorien ul { gap: 20px; }
  .werkzeug { padding: 10px 16px; }
  #buehne { padding: 6px 16px calc(var(--leiste-h) + env(safe-area-inset-bottom) + 90px); }
  #pane-ergebnisse .cards, #pane-merkliste .cards { grid-template-columns: 1fr; gap: var(--s-5); }

  .tabs.untenNav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 4px 6px env(safe-area-inset-bottom); border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 90%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .tabs.untenNav button, .tabs.untenNav .tabLink {
    flex: 1 1 0; min-width: 0; min-height: var(--leiste-h); position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: 0; color: var(--muted); text-decoration: none;
    font-size: 10.5px; font-weight: var(--gew-mittel); cursor: pointer;
  }
  .tabs.untenNav button.on { color: var(--accent); font-weight: var(--gew-halb); }
  .tabs.untenNav .tabZeichen { width: 24px; height: 24px; }
  .tabs.untenNav .count { position: absolute; top: 2px; left: 50%; margin-left: 5px; box-shadow: 0 0 0 2px var(--panel); }
  .ansichtWahl { bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom) + 16px); }
  .auswahlLeiste {
    bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom) + 70px);
    left: 12px; right: 12px; transform: none; max-width: none;
  }

  /* Filter als Blatt von unten */
  .filterSchleier { padding: 0; place-items: end stretch; }
  .filterFenster { width: 100%; max-height: 94dvh; border-radius: var(--r-l) var(--r-l) 0 0; }
  .filterInhalt { padding: 4px 18px 20px; }
  .filterFuss { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }

  /* Neuigkeiten-Reihen waagerecht, wie Ferienziel-Reihen */
  #feed .feedliste, #gesehen .feedliste, #gemeinsamListe .feedliste {
    display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 0 16px 2px; scroll-padding-inline: 16px;
  }
  #feed .feedzeile, #gesehen .feedzeile, #gemeinsamListe .feedzeile {
    flex: 0 0 auto; width: 148px; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 6px; padding: 0; border: none; background: none; box-shadow: none;
  }
  #feed .feedzeile img, #gesehen .feedzeile img, #gemeinsamListe .feedzeile img { width: 100%; height: 110px; border-radius: var(--r-m); }
  #feed .feedzeile .pr, #gesehen .feedzeile .pr, #gemeinsamListe .feedzeile .pr { text-align: left; }

  #mapErgebnisse { height: clamp(360px, 62dvh, 640px); }
  #favCompare { overflow-x: auto; }
  .cmp { min-width: 620px; }
  #overlay { padding: 12px; }
  #runLog { max-height: 40dvh; }
  .row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- Karten im Airbnb-Zuschnitt */
.card .shot .score {
  position: absolute; left: 10px; bottom: 10px; z-index: 3; width: 38px; height: 38px;
  background:
    radial-gradient(closest-side, rgba(7,8,11,.78) 80%, transparent 82% 100%),
    conic-gradient(#9fb0cd calc(var(--w, 0) * 1%), rgba(255,255,255,.25) 0);
  color: #fff; font-size: 12px;
}
.card .shot .score.gut {
  background:
    radial-gradient(closest-side, rgba(7,8,11,.78) 80%, transparent 82% 100%),
    conic-gradient(#3fc1c9 calc(var(--w, 0) * 1%), rgba(255,255,255,.25) 0);
  color: #fff;
}
.card .body { gap: 2px; }
.card .rowline { align-items: baseline; }
.card .kTitel {
  font-weight: var(--gew-halb); font-size: var(--t-m); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card .kSterne { flex: 0 0 auto; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.card .title {
  font-family: var(--f-sans); font-weight: var(--gew-normal); letter-spacing: 0;
  color: var(--muted); font-size: var(--t-s);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card .kLage:empty { display: none; }
/* Zeitraum nur, wenn er vom gesuchten abweicht — sonst steht auf jeder Karte dasselbe. */
.card .meta.zeitraum:not(.verschoben) { display: none; }
.card .kExtras { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.card .kExtras:empty { display: none; }
.card .kExtras .meta.bettbefund {
  font-size: var(--t-xs); padding: 2px 8px; border-radius: var(--r-s); border: 1px solid var(--line);
}
.card .kExtras .meta.bettbefund.gut { border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.card .kExtras .meta.bettbefund.warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.card .kExtras .fotobefund .quelle { display: none; }
.card .meta.lage { font-size: var(--t-xs); }
.card .price { font-size: var(--t-m); margin-top: 6px; font-family: var(--f-sans); letter-spacing: 0; font-weight: var(--gew-normal); }
.card .price .kGesamt { font-weight: var(--gew-fett); text-decoration: underline; text-underline-offset: 3px; }
.card .price .meta { font-size: var(--t-s); }
.card .kartenAktionen { margin-top: 8px; gap: 6px; }
.card .kartenAktionen .go {
  flex: 0 1 auto; padding: 7px 14px; font-size: var(--t-xs); border-radius: var(--r-rund);
}
.card .kartenAktionen .vgl {
  border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer;
  border-radius: var(--r-rund); padding: 6px 12px; font-size: var(--t-xs);
}
.card .kartenAktionen .vgl.on { border-color: var(--accent); color: var(--accent); }
.card .stimmen { margin-top: 6px; }

/* Filterfenster: Abschnitte ohne Kasten, wie bei Airbnb nur durch Linien getrennt. */
.filterInhalt .filtergruppe.fAbschnitt {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none;
  padding: 22px 0; margin: 0; box-shadow: none;
}
.filterInhalt .filtergruppe.fAbschnitt:last-child { border-bottom: 0; }
.filterInhalt .filtergruppen { display: block; }
#fFilterSuche {
  width: 100%; padding: 10px 14px; border-radius: var(--r-rund);
  border: 1px solid var(--line); background: var(--flaeche); color: var(--fg); font-size: var(--t-s);
}
.filterInhalt .schalterZeile small { max-width: 52ch; }

/* Ergebniskopf schlicht: eine Zeile mit Zahl und Stand. */
#pane-ergebnisse .ergebnisKopf { padding: 4px 0 6px; }
#pane-ergebnisse .ergebnisZahl b { font-size: var(--t-l); }
#pane-ergebnisse .ergebnisAktionen { display: none; }
#resultsHead .hint, #resultsHead p { font-size: var(--t-xs); }

/* Flughafen auf der Karte: eine Zeile, der Rest steht bei den Details. */
.card .meta.lage {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted);
}

/* =============================================================== Detailseite */
.unterkunftSchleier {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: var(--bg);
  padding-top: env(safe-area-inset-top);
}
.unterkunftSeite { max-width: 1120px; margin: 0 auto; padding: 16px 24px 80px; }
.uLeiste { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; position: sticky; top: 0; z-index: 2; padding: 8px 0; background: var(--bg); }
.uLeiste .popZu { display: block; margin: 0; }
.uLeisteRechts { display: flex; gap: 8px; }
.uKlein {
  border: 0; background: none; color: var(--fg); cursor: pointer; font-weight: var(--gew-halb);
  font-size: var(--t-s); text-decoration: underline; text-underline-offset: 3px; padding: 8px 10px; border-radius: var(--r-s);
}
.uKlein:hover { background: var(--flaeche); }
.uTitel { font-family: var(--f-display); font-size: 28px; letter-spacing: -.03em; margin: 0 0 4px; line-height: 1.15; }
.uUnter { margin: 0 0 18px; font-size: var(--t-s); font-weight: var(--gew-mittel); }
.uFotos {
  display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 200px 200px; gap: 8px;
  border-radius: var(--r-l); overflow: hidden;
}
.uFotos img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--flaeche); }
.uFotos img:first-child { grid-row: span 2; }
.uFotos.wenige { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-template-rows: 400px; }
.uFotos.wenige img:first-child { grid-row: auto; }
.uKeinFoto { display: grid; place-items: center; background: var(--flaeche); color: var(--muted); grid-column: 1 / -1; }
.uRaster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; margin-top: 28px; align-items: start; }
.uAbschnitt { padding: 24px 0; border-bottom: 1px solid var(--line); }
.uAbschnitt:first-child { padding-top: 0; }
.uAbschnitt > h2 { font-family: var(--f-display); font-size: 21px; letter-spacing: -.02em; margin: 0 0 6px; }
.uFakten { margin: 0; color: var(--muted); }
.uWissen { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 16px; }
.uWissen li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; }
.uIcon { font-size: 22px; line-height: 1.2; }
.uWissen b { display: block; font-weight: var(--gew-halb); }
.uWissen span { color: var(--muted); font-size: var(--t-s); }
.uWissen .flugPreis { color: var(--fg); font-weight: var(--gew-halb); }
.uPreis { position: sticky; top: 76px; }
.uPreisKasten {
  border: 1px solid var(--line); border-radius: var(--r-m); padding: 22px; background: var(--panel);
  box-shadow: var(--schatten-3); display: grid; gap: 12px;
}
.uBetrag { margin: 0; font-size: var(--t-l); }
.uBetrag b { font-family: var(--f-display); font-size: 24px; letter-spacing: -.02em; }
.uPreisKasten > .hint { margin: -8px 0 0; }
.uTermin { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.uTermin > div { padding: 10px 12px; }
.uTermin > div + div { border-left: 1px solid var(--line); }
.uTermin > .breit { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
.uTermin b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.uTermin span { font-size: var(--t-s); }
.uBuchen {
  display: block; text-align: center; text-decoration: none; padding: 14px; border-radius: var(--r-s);
  background: var(--accent); color: var(--auf-signal); font-weight: var(--gew-halb); font-size: var(--t-m);
}
.uKleingedruckt { text-align: center; margin: 0; font-size: var(--t-xs); }
.card .shot, .card .kTitel, .card .title { cursor: pointer; }

@media (max-width: 860px) {
  .unterkunftSeite { padding: 8px 0 120px; }
  .uLeiste { padding: 8px 16px; margin: 0; }
  .uTitel, .uUnter { padding: 0 16px; }
  .uTitel { font-size: 23px; }
  .uFotos {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 0;
    grid-template-rows: none; gap: 0;
  }
  .uFotos img { flex: 0 0 100%; height: 280px; scroll-snap-align: start; }
  .uRaster { display: block; margin-top: 8px; padding: 0 16px; }
  .uPreis { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 3; }
  .uPreisKasten {
    border-radius: 0; border: 0; border-top: 1px solid var(--line); box-shadow: none;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
  }
  .uPreisKasten > :not(.uBetrag):not(.uBuchen):not(.hint:first-of-type) { display: none; }
  .uPreisKasten > .hint { margin: 0; grid-column: 1; }
  .uBuchen { grid-column: 2; grid-row: 1 / span 2; padding: 12px 18px; }
}

/* Als installierte App gibt es keine Browserleiste, die oben Platz freihält —
   unter der Statusleiste ist nichts antippbar. `max()`, damit sich
   Geräteangabe und Mindestabstand nicht addieren. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  #app { padding-top: max(calc(env(safe-area-inset-top) + 4px), 22px); }
}
#app { min-height: var(--app-hoehe, 100dvh); }

@media (max-width: 860px) {
  /* Der Vollbild-Aufklapper liegt über der Reiterleiste — sonst verdeckte sie
     seinen „Suchen"-Knopf. */
  .suchPop { z-index: 60; }
  /* Sortieren gibt es auch auf dem Telefon: eine eigene Zeile unter den Schnellfiltern. */
  .werkzeug { flex-wrap: wrap; row-gap: 8px; }
  .werkzeugRechts { width: 100%; }
  .werkzeug .sortZeile { display: flex; flex: 1; }
  .werkzeug #sSort { flex: 1; max-width: none; }
}
@media (max-width: 860px) {
  /* backdrop-filter macht den Kopf zum Bezugsrahmen für position:fixed —
     solange ein Aufklapper offen ist, muss er weg, sonst bleibt das Vollbild kopfgroß. */
  .airKopf:has(.suchPop:not([hidden])) {
    -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 65;
  }
}

/* Suche löschen direkt in der Kategorie-Leiste: am Rechner beim Überfahren,
   bei der gewählten Suche immer — so geht es auch auf dem Telefon. */
#searchList li { position: relative; }
.kLoeschen {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  opacity: 0; transition: opacity .15s;
}
#searchList li:hover .kLoeschen, #searchList li.on .kLoeschen, .kLoeschen:focus-visible { opacity: 1; }
.kLoeschen:hover { color: var(--warn); border-color: var(--warn); background: var(--warn-flaeche); }
@media (hover: none) { #searchList li:not(.on) .kLoeschen { display: none; } }

/* Termine sind Knöpfe: antippen filtert auf diesen Zeitraum. */
button.kalenderZelle { font: inherit; color: var(--fg); text-align: left; cursor: pointer; }
button.kalenderZelle:hover { border-color: var(--accent); }
button.kalenderZelle:focus-visible { outline: none; box-shadow: var(--fokus); }
.kalenderZelle.gewaehlt { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-weich); }

/* Filter als feste Spalte links (breiter Bildschirm) */
.filterLinks { display: none; }
#pane-ergebnisse.mitFilter.on { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
#pane-ergebnisse.mitFilter .filterLinks {
  display: block; position: sticky; top: 96px;
  max-height: calc(100dvh - 112px);
}
.filterLinks .filterFenster {
  width: auto; max-height: calc(100dvh - 112px); box-shadow: none; border-radius: var(--r-m);
}
.filterLinks .filterKopf { justify-content: flex-start; padding: 14px 18px; }
.filterLinks .filterKopf h2 { font-size: var(--t-l); }
.filterLinks .filterKopf .popZu { display: none; }
.filterLinks .filterInhalt { padding: 4px 18px 18px; }
.filterLinks .fAbschnitt { padding: 16px 0; }
.filterLinks .fAbschnitt > h3 { font-size: 16px; }
.filterLinks .filterFuss { padding: 12px 18px; }
.filterLinks #btnFilterAnwenden { padding: 10px 14px; font-size: var(--t-s); }
.filterLinks .schalterZeile { font-size: var(--t-s); }
@media (min-width: 1100px) {
  .werkzeugRechts .filterKnopf { display: none; }
}