/* =====================================================================
   FernBlick – Gestaltung
   Übernommen vom Entwurf unter fernblick-dream-catcher.lovable.app,
   ausgelesen am 06.09.2026. Die Farbwerte stammen dort aus oklch; hier
   stehen sie doppelt: erst als Hex für ältere Browser, dann als oklch.
   Wer oklch versteht, nimmt die zweite Zeile – das ist der genauere Wert.

   Der Entwurf ist fürs Telefon gedacht: eine Spalte, Leiste unten.
   Am Rechner wird daraus eine Seitenleiste und ein mehrspaltiges Raster.
   ===================================================================== */

:root {
  color-scheme: light;

  --grund:        #f6f2ea;  --grund:        oklch(96% .014 83);
  --karte:        #fdfaf5;  --karte:        oklch(98.5% .009 78);
  --text:         #3a3129;  --text:         oklch(28% .025 60);
  --text-leise:   #6f6357;  --text-leise:   oklch(48% .025 62);
  --rand:         #ddd2c2;  --rand:         oklch(86% .025 75);
  --feld:         #e5dcd0;  --feld:         oklch(89% .02 75);
  --gedaempft:    #ece5da;  --gedaempft:    oklch(92% .016 75);
  --zweit:        #e8dfd0;  --zweit:        oklch(91% .025 82);
  --zweit-text:   #443a2f;  --zweit-text:   oklch(32% .03 57);
  --haupt:        #a4522f;  --haupt:        oklch(49% .12 37);
  --haupt-text:   #fdfaf5;  --haupt-text:   oklch(98.5% .009 78);
  --gruen:        #4a6236;  --gruen:        oklch(39% .075 139);
  --gruen-sanft:  #dcead0;  --gruen-sanft:  oklch(91% .04 133);

  --serif: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius:       18px;
  --radius-klein: 10px;
  --schatten:     0 10px 35px rgba(58, 49, 41, .05);
  --schatten-hoch:0 14px 40px rgba(58, 49, 41, .12);
}

* { box-sizing: border-box; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: #201c18; --karte: #2b2520; --text: #f3e9dc;
  --text-leise: #c4b5a3; --rand: #594b3f; --feld: #3e342c;
  --gedaempft: #382f28; --zweit: #44382d; --zweit-text: #eedfcd;
  --haupt: #edaa83; --haupt-text: #2b1b12;
  --gruen: #b3ce91; --gruen-sanft: #34442a;
  --schatten: 0 10px 35px #0003; --schatten-hoch: 0 14px 40px #0007;
}
:root[data-theme="dark"] .error,
:root[data-theme="dark"] .danger { color: #ffb0a0; }
:root[data-theme="dark"] .pflicht-fehlt { background: #482924; border-color: #ffb0a0; }
:root[data-theme="dark"] .rolle-knopf.an { color: #201c18; }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #b4a492; opacity: 1; }
:root[data-theme="dark"] .leaflet-container { background: var(--gedaempft); }
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip,
:root[data-theme="dark"] .leaflet-bar a,
:root[data-theme="dark"] .leaflet-control-attribution { background: var(--karte); color: var(--text); }
:root[data-theme="dark"] .leaflet-control-attribution a,
:root[data-theme="dark"] .leaflet-popup-close-button { color: var(--haupt); }
:root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.72) saturate(.65); }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.15; }

.hidden { display: none !important; }

.eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--haupt); margin: 0;
}
.muted { color: var(--text-leise); margin: 0; }
.hint  { color: var(--text-leise); font-size: .85rem; margin: 8px 0 0; }
.error { color: #a02c1f; font-size: .88rem; margin: 8px 0 0; }

a { color: var(--haupt); }

/* ---------------------------------------------------------------------
   Knöpfe
   --------------------------------------------------------------------- */
button { font: inherit; font-family: var(--sans); cursor: pointer; }

.primary, .secondary, .ghost {
  border-radius: var(--radius-klein);
  padding: 10px 16px;
  border: 1px solid transparent;
  font-weight: 600;
  transition: filter .12s ease, background .12s ease;
}
.primary   { background: var(--haupt); color: var(--haupt-text); }
.secondary { background: var(--karte); color: var(--text); border-color: var(--rand); }
.ghost     { background: transparent; color: var(--text-leise); }
.primary:hover, .secondary:hover { filter: brightness(.96); }
.ghost:hover { color: var(--text); }
button:disabled { opacity: .5; cursor: not-allowed; }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-klein);
  border: 1px solid var(--rand); background: var(--karte); color: var(--text);
  display: grid; place-items: center; font-size: 1.05rem;
}
.linkish {
  background: none; border: none; padding: 0;
  color: var(--haupt); text-decoration: underline; font-weight: 600;
}

/* ---------------------------------------------------------------------
   Eingabefelder
   --------------------------------------------------------------------- */
input, select, textarea {
  font: inherit; font-family: var(--sans);
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--feld);
  border-radius: var(--radius-klein);
  background: var(--karte);
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--haupt); outline-offset: 1px; border-color: transparent;
}
textarea { resize: vertical; }
label { display: block; font-size: .84rem; font-weight: 600; color: var(--text-leise); }
label input, label select, label textarea { margin-top: 5px; font-weight: 400; color: var(--text); }

/* iOS zoomt kleine Eingabefelder beim Fokus und behält den Zoom nach dem
   Anmelden bei. Auch kompakte Filter dürfen mobil nicht unter 16 px fallen.
   Pinch-Zoom bleibt über den unveränderten Viewport ausdrücklich möglich. */
@media (max-width: 860px), (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1rem) !important; }
}

.inline-field { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-field input, .inline-field select { flex: 1 1 180px; width: auto; }
.inline-field button { flex: 0 0 auto; white-space: nowrap; }

.card {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

/* ---------------------------------------------------------------------
   Anmeldung und erste Schritte
   --------------------------------------------------------------------- */
.onboarding { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.onboarding-card { width: min(440px, 100%); padding: 30px 26px; }
.onboarding-card h1 { font-size: 2rem; margin: 4px 0 10px; }
.onboarding-card label { margin-top: 16px; }
.onboarding-actions { margin-top: 16px; display: grid; gap: 10px; }
.onboarding-actions .primary { width: 100%; padding: 13px; }
.or { text-align: center; color: var(--text-leise); font-size: .85rem; }

/* ---------------------------------------------------------------------
   Gerüst: Seitenleiste und Inhalt
   --------------------------------------------------------------------- */
#app { display: grid; grid-template-columns: 236px 1fr; min-height: 100dvh; }

.seitenleiste {
  display: flex; flex-direction: column; gap: 22px;
  padding: 26px 16px;
  border-right: 1px solid var(--rand);
  background: var(--grund);
  position: sticky; top: 0; height: 100dvh;
}
.marke { display: flex; gap: 11px; align-items: center; padding: 0 6px; }
.marke h1 { font-size: 1.4rem; }
.marken-zeichen {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  background: var(--haupt); color: var(--haupt-text);
  display: grid; place-items: center; font-size: 1.05rem;
}

.tabs { display: flex; flex-direction: column; gap: 3px; }
.tab {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border: none; border-radius: var(--radius-klein);
  background: transparent; color: var(--text-leise);
  font-weight: 600; text-align: left;
}
.tab:hover { background: var(--gedaempft); color: var(--text); }
.tab.active { background: var(--zweit); color: var(--zweit-text); }
.tab-zeichen { font-size: 1rem; opacity: .8; }
.pill {
  margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: var(--haupt); color: var(--haupt-text);
  font-size: .72rem; font-weight: 700; text-align: center;
}
.pill[data-zero="1"] { display: none; }

.seitenleiste-fuss { margin-top: auto; display: flex; gap: 10px; align-items: center; }
.sync-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rand); }
.sync-dot.online  { background: var(--gruen); }
.sync-dot.offline { background: var(--haupt); }

/* Der Inhalt waechst mit dem Schirm, bis 1600 Pixel.
   Am 09.09.2026 geaendert. Vorher: 1180 Pixel und zentriert. Auf einem breiten
   Schirm lagen dadurch 245 Pixel toter Raum zwischen Seitenleiste und Inhalt,
   waehrend die Karten schmal blieben. Jetzt beginnt der Inhalt dicht an der
   Navigation und laeuft nach rechts aus; die Aussenkanten von Ueberschrift,
   Suche, Filtern und Karten liegen dabei alle auf derselben Linie. */
main {
  padding: 34px 48px 72px; max-width: 1600px; width: 100%;
  /* Zentriert, was aber erst jenseits von etwa 1790 Pixeln Fensterbreite
     ueberhaupt etwas bewirkt: Bis dahin ist der Platz neben der Navigation
     schmaler als 1600 Pixel, es bleibt bei den 48 Pixeln Abstand. Erst darueber
     wandert der Inhalt in die Mitte, statt links zu kleben und rechts 724 Pixel
     leer zu lassen. Genau das war am 09.09.2026 die Rueckmeldung. */
  margin-inline: auto;
}

.begruessung {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 26px;
}
.begruessung h2 { font-size: 2.1rem; margin: 6px 0 8px; font-weight: 500; }
.begruessung .muted { max-width: 46ch; }
.rund-plus {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px;
  font-size: 1.6rem; line-height: 1; padding: 0; display: grid; place-items: center;
}

.view { display: none; }
.view.active { display: block; }
.section-intro { color: var(--text-leise); margin: 0 0 16px; }

/* ---------------------------------------------------------------------
   Werkzeugleiste
   --------------------------------------------------------------------- */
.toolbar { padding: 14px; margin-bottom: 18px; }
.toolbar input[type="search"] { margin-bottom: 10px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters select {
  width: auto; flex: 0 1 auto; padding: 8px 12px;
  border: 1px solid var(--rand); border-radius: 999px; background: var(--karte);
  font-size: .88rem;
}
.filters .ghost { padding: 8px 14px; border-radius: 999px; }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px;
}
.stats > div {
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius-klein);
  padding: 12px 14px;
}
.stats strong { display: block; font-family: var(--serif); font-size: 1.5rem; }
.stats span { font-size: .78rem; color: var(--text-leise); }

/* ---------------------------------------------------------------------
   Ideenkarten
   --------------------------------------------------------------------- */
/* Eine bis vier Spalten, in festen Stufen statt nach auto-fill.
   Feste Spuren haben zwei Vorteile: Die Zahl der Spalten ist vorhersehbar, und
   bei zwei Eintraegen bleiben die Karten so breit wie bei acht, statt sich auf
   halbe Bildschirmbreite zu ziehen. */
.ideas-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width:  700px) { .ideas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ideas-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1560px) { .ideas-grid { grid-template-columns: repeat(4, 1fr); } }
.idea-card {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.idea-card:hover { box-shadow: var(--schatten-hoch); transform: translateY(-2px); }

/* Alle Bildflaechen 4:3. Gleiche Hoehe heisst: Name, Ort, Preis und Grund
   stehen auf jeder Karte an derselben Stelle, und man findet sie im Raster
   ohne zu suchen. */
.idea-photo { position: relative; aspect-ratio: 4 / 3; background: var(--gedaempft); }

/* Absolut im Rahmen, nicht im Fluss. Sonst bestimmt bei object-fit: contain die
   Eigenhoehe des Bildes die Hoehe des Rahmens: Ein hochkantes 600x900-Bild
   machte daraus 361x533 statt 361x271, und die eine Karte war halb so hoch
   wieder wie die anderen. Am 09.09.2026 gemessen und behoben. */
.idea-photo img, .idea-photo .no-photo { position: absolute; inset: 0; }
.idea-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ein abfotografierter Zeitschriftenausschnitt ist hochkant und traegt seinen
   Inhalt als Text. Zugeschnitten waere er unlesbar, deshalb wird er vollstaendig
   gezeigt, auf ruhigem Grund, mit einem Knopf zum Vergroessern. Welcher Fall
   vorliegt, entscheidet app.js nach dem Seitenverhaeltnis des Bildes. */
.idea-photo.ganz { background: var(--zweit); }
.idea-photo.ganz img { object-fit: contain; padding: 8px; }
.bild-lupe {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(58, 49, 41, .62); color: #fff;
  font-size: .95rem; display: grid; place-items: center; cursor: pointer;
}
.bild-lupe:hover { background: rgba(58, 49, 41, .85); }
.idea-photo [hidden] { display: none !important; }
.bild-navigation { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 24px; background: rgba(38,32,27,.8); color: #fff; z-index: 2; }
.bild-navigation button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 1.7rem; line-height: 1; }
.bild-navigation button:hover { background: rgba(255,255,255,.2); }
.bild-navigation button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.bild-zaehler { min-width: 36px; text-align: center; font-size: .75rem; font-variant-numeric: tabular-nums; }
.idea-photo .bild-fehler { font-size: 1rem; }
@media (max-width: 860px) {
  .als-liste .bild-navigation { gap: 0; padding: 2px; bottom: 5px; }
  .als-liste .bild-navigation button { width: 32px; height: 34px; }
  .als-liste .bild-zaehler { min-width: 30px; font-size: .65rem; }
  .als-liste .idea-photo .bild-lupe { bottom: 48px; right: 5px; }
}

/* Die Lupe: das Bild in voller Groesse, ohne Rahmenwerk drumherum. */
#bildDialog { width: min(1100px, calc(100vw - 40px)); background: transparent; box-shadow: none; }
#bildDialog img {
  display: block; width: 100%; max-height: 86dvh; object-fit: contain;
  border-radius: var(--radius-klein); background: var(--karte);
}
#bildDialog::backdrop { background: rgba(28, 23, 19, .82); }
.no-photo {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 2.4rem; opacity: .5;
}
.source-pill, .review-pill {
  position: absolute; top: 12px; padding: 5px 11px; border-radius: 999px;
  font-size: .76rem; font-weight: 700;
}
.source-pill { left: 12px; background: var(--karte); color: var(--text); }
.review-pill { right: 12px; background: var(--haupt); color: var(--haupt-text); }

.idea-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.type-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--haupt);
}
.idea-body h3 { font-size: 1.35rem; }
.location { color: var(--text-leise); font-size: .88rem; margin: 0; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: .86rem; font-weight: 600; }
.facts span { position: relative; }
.facts span + span::before {
  content: ""; position: absolute; left: -8px; top: 3px; bottom: 3px;
  width: 1px; background: var(--rand);
}
.reason { margin: 0; color: var(--text-leise); font-size: .9rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tag {
  padding: 4px 10px; border-radius: 999px; background: var(--gedaempft);
  color: var(--text-leise); font-size: .76rem;
}

.idea-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--rand); background: var(--karte);
}
.status-badge {
  padding: 5px 11px; border-radius: 999px; background: var(--gedaempft);
  color: var(--text-leise); font-size: .76rem; font-weight: 700;
}
.match-badge { background: var(--gruen-sanft); color: var(--gruen); }
.idea-foot a { font-size: .84rem; font-weight: 600; text-decoration: none; }
.edit-btn {
  background: none; border: none; padding: 0;
  color: var(--text-leise); font-size: .84rem; font-weight: 600;
}
.edit-btn:hover { color: var(--haupt); }
.votes { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.vote-btn {
  border: none; background: none; padding: 4px; border-radius: 8px;
  font-size: 1.05rem; filter: grayscale(1); opacity: .55;
}
.vote-btn:hover { opacity: .9; }
.vote-btn.on-up, .vote-btn.on-down { filter: none; opacity: 1; }
.other-vote { font-size: .95rem; opacity: .8; }

.empty { padding: 34px 24px; text-align: center; }
.empty h3 { font-size: 1.3rem; margin-bottom: 8px; }
.empty p { color: var(--text-leise); margin: 0 0 16px; }

/* ---------------------------------------------------------------------
   Eingang: roh Erfasstes. Schlichter als eine Ideenkarte – es ist noch
   kein Eintrag, sondern ein Zettel.
   --------------------------------------------------------------------- */
.eingang-karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius-klein); padding: 14px 16px; margin-bottom: 10px;
}
.eingang-karte .eingang-text {
  margin: 6px 0 10px; white-space: pre-wrap; word-break: break-word; line-height: 1.45;
}

/* ---------------------------------------------------------------------
   Karte und Reisen
   --------------------------------------------------------------------- */
.map {
  height: min(62vh, 620px); border-radius: var(--radius);
  border: 1px solid var(--rand); overflow: hidden;
}
.trips-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.trip-card { padding: 18px; }
.trip-card h3 { font-size: 1.2rem; margin-bottom: 4px; }

/* ---------------------------------------------------------------------
   Dialoge
   --------------------------------------------------------------------- */
dialog {
  border: none; border-radius: var(--radius); padding: 0;
  width: min(680px, calc(100vw - 28px)); max-height: 90dvh;
  background: var(--karte); color: var(--text); box-shadow: var(--schatten-hoch);
}
dialog::backdrop { background: rgba(40, 33, 27, .45); }
dialog form, dialog > div { padding: 22px 24px 24px; overflow-y: auto; max-height: 90dvh; }
.dialog-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 16px;
}
.dialog-head h2 { font-size: 1.5rem; margin-top: 2px; }
.sammlung-direkt, .sammlung-name { flex-basis: 100%; width: 100%; }
.sammlung-name small { display: block; margin-top: 4px; }
.idea-foot .karten-status, .idea-foot .karten-links, .idea-foot .karten-aktionen, .idea-foot .basis-info { width: 100%; }
.karten-status, .karten-links, .karten-aktionen { display: flex; align-items: center; gap: 12px; }
.karten-aktionen { flex-wrap: wrap; }
.karten-status select { width: auto; flex: 1; padding: 5px 10px; font-size: .8rem; }
.favorit-herz { background: transparent; border: 0; color: var(--haupt); font-size: 1.65rem; padding: 0 6px; }
.basis-info { font-size: .78rem; color: var(--text-leise); }
.karten-links:empty { display: none; }
#ideaForm { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: min(850px,90dvh); }
#ideaForm > .dialog-head { flex: none; padding: 20px 24px 0; margin-bottom: 12px; }
.editor-tabs { display: flex; flex: none; gap: 8px; padding: 0 24px 12px; border-bottom: 1px solid var(--rand); }
.editor-ki-einstieg { flex: none; margin: 0 24px 12px; }
.editor-ki-einstieg button { width: 100%; }
.editor-ki-einstieg span { display: block; margin-top: 5px; font-size: .75rem; color: var(--text-leise); }
.editor-ki-zurueck { flex: none; padding: 0 24px 12px; border-bottom: 1px solid var(--rand); }
.editor-tabs[hidden], .editor-ki-einstieg[hidden], .editor-ki-zurueck[hidden] { display: none; }
.editor-tabs button { flex: 1; padding: 10px 8px; background: transparent; border: 0; border-radius: 9px; color: var(--text); }
.editor-tabs button[aria-selected="true"] { background: var(--gedaempft); color: var(--haupt); font-weight: 700; }
[data-editor-panel] { min-height: 0; overflow-y: auto; padding: 16px 24px; flex: 1; }
[data-editor-panel][hidden] { display: none; }
.editor-gruppe { margin-bottom: 20px; }
.editor-gruppe h3, .editor-gruppe summary { font-size: 1rem; font-weight: 700; }
.editor-gruppe .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 12px 0; }
.editor-gruppe .ki-block, .editor-gruppe .dubletten { grid-column: 1/-1; margin: 0; }
details.editor-gruppe { padding: 14px 0; border-top: 1px solid var(--rand); margin: 0; }
.editor-optionen { margin: 14px 0; }
.editor-optionen[open] summary { margin-bottom: 12px; }
#editor-recherche > .ki-block { margin: 0 0 16px; }
#ideaForm > .dialog-actions { flex: none; margin: 0; padding: 12px 24px; border-top: 1px solid var(--rand); background: var(--karte); }
#ideaForm > .dialog-actions .danger { padding: 8px; font-size: .8rem; }
#ideaForm #previewImageWrap { display: none; }
@media(max-width:600px) {
  #ideaForm > .dialog-head { padding: 14px 16px 0; }
  .editor-tabs { padding: 0 12px 10px; gap: 2px; }
  .editor-ki-einstieg { margin: 0 16px 10px; }
  .editor-tabs button { font-size: .85rem; white-space: nowrap; padding: 10px 4px; }
  [data-editor-panel] { padding: 14px 16px; }
  #ideaForm > .dialog-actions { padding: 10px 12px; gap: 6px; }
  #ideaForm > .dialog-actions button { padding: 9px 10px; font-size: .8rem; }
}

.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.form-grid .full { grid-column: 1 / -1; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.dialog-actions .danger {
  margin-right: auto; background: none; border: 1px solid var(--rand);
  color: #a02c1f; border-radius: var(--radius-klein); padding: 10px 16px; font-weight: 600;
}
.preview-image { margin: 12px 0; }
.preview-image img { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius-klein); }

.settings-block { padding: 16px 0; border-bottom: 1px solid var(--rand); }
.settings-block:last-of-type { border-bottom: none; }
.settings-block h3 { font-size: 1.1rem; margin-bottom: 6px; }
.settings-block .muted { font-size: .88rem; margin-bottom: 10px; }

.code {
  background: var(--gedaempft); border-radius: var(--radius-klein);
  padding: 12px 14px; font-size: .78rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}

/* Ausfüllhilfe, Position, Fotos: Werkzeuge, keine Formularfelder. */
.ki-block {
  margin: 12px 0; padding: 14px 16px;
  border-radius: var(--radius-klein); background: var(--gedaempft);
}
.ki-block > summary { cursor: pointer; font-weight: 700; }
.ki-block textarea {
  margin-top: 10px; font-family: ui-monospace, Consolas, monospace; font-size: .8rem;
}

.foto-streifen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.foto-kachel { position: relative; margin: 0; width: 84px; height: 84px; }
.foto-kachel img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-klein); display: block; cursor: pointer;
}
.foto-weg {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border: none; border-radius: 50%; line-height: 1;
  background: rgba(40, 33, 27, .85); color: #fff; font-size: 15px;
}
#fotoDatei { max-width: 100%; }

.marke-zeile { padding: 10px 0; border-bottom: 1px solid var(--rand); }
.marke-zeile:last-child { border-bottom: none; }
.marke-wert {
  display: block; margin: 6px 0; padding: 8px 10px; border-radius: 8px;
  background: var(--gedaempft); font-size: .8rem; line-height: 1.4;
  word-break: break-all; user-select: all;
}

/* ---------------------------------------------------------------------
   Meldung unten
   --------------------------------------------------------------------- */
#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 60; max-width: min(520px, calc(100vw - 28px));
  background: var(--text); color: var(--grund);
  padding: 13px 18px; border-radius: var(--radius-klein);
  box-shadow: var(--schatten-hoch); font-size: .9rem; text-align: center;
}

/* =====================================================================
   Telefon: eine Spalte, Navigation als Leiste unten, Plus als runder
   Knopf darüber. Genau so ist der Entwurf gedacht.
   ===================================================================== */
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; }

  .seitenleiste {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    height: auto; z-index: 50;
    flex-direction: row; gap: 0;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid var(--rand);
    background: var(--karte);
  }
  .marke, .seitenleiste-fuss { display: none; }

  .tabs { flex: 1; flex-direction: row; justify-content: space-around; gap: 0; }
  .tab {
    flex-direction: column; gap: 3px; padding: 6px 4px;
    font-size: .68rem; font-weight: 600; text-align: center; background: none;
  }
  .tab.active { background: none; color: var(--haupt); }
  .tab-zeichen { font-size: 1.25rem; opacity: 1; }
  .pill {
    margin: 0; position: absolute; transform: translate(14px, -6px);
    font-size: .62rem; min-width: 17px;
  }
  .tab { position: relative; }

  main { padding: 22px 18px 120px; }

  .begruessung { margin-bottom: 20px; }
  .begruessung h2 { font-size: 1.75rem; }

  /* Der Plus-Knopf wandert in die Leiste unten und wird rund. Dasselbe
     Element, andere Gestalt - so bleibt es bei einem Knopf im Dokument. */
  .rund-plus {
    position: fixed; left: 50%; z-index: 51;
    bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: 58px; height: 58px; border-radius: 50%;
    box-shadow: var(--schatten-hoch); font-size: 1.8rem;
  }

  #toast { bottom: calc(94px + env(safe-area-inset-bottom)); }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .ideas-grid { grid-template-columns: 1fr; }
  .filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .filters select, .filters .ghost { flex: 0 0 auto; }
}

@media (max-width: 520px) {
  .form-grid { grid-template-columns: 1fr; }
  .begruessung h2 { font-size: 1.55rem; }
}

/* Grüne Bestätigung oben rechts auf dem Bild, wie im Entwurf. */
.match-pill { background: var(--gruen-sanft); color: var(--gruen); }
.quelle-note { font-size: .8rem; color: var(--text-leise); }
.quelle-note.urheber { font-style: italic; }

/* =====================================================================
   Zweiter Durchgang, 06.09.2026: die Stellen, an denen der erste noch
   deutlich hinter dem Entwurf zurueckblieb.
   ===================================================================== */

/* --- Suchzeile mit Lupe und getrenntem Filter-Knopf ------------------ */
.suchzeile { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.suchfeld { position: relative; flex: 1 1 220px; min-width: 0; }
.such-zeichen {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--text-leise); font-size: 1.15rem; pointer-events: none;
}
.suchfeld input {
  padding: 14px 16px 14px 42px; border-radius: 14px;
  border: 1px solid var(--rand); background: var(--karte);
}
.filter-knopf { display: flex; align-items: center; gap: 7px; border-radius: 14px; padding: 0 18px; }
.filter-knopf.an { background: var(--zweit); border-color: var(--zweit); }

/* --- Filterleiste: Pillen statt Systemauswahlfelder ------------------ */
.toolbar { padding: 0; margin-bottom: 16px; background: none; border: none; box-shadow: none; }
.filters select {
  appearance: none; -webkit-appearance: none;
  padding: 9px 32px 9px 15px; border-radius: 999px;
  border: 1px solid var(--rand); background: var(--karte);
  font-size: .88rem; font-weight: 600; color: var(--text);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-leise) 50%),
    linear-gradient(135deg, var(--text-leise) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* --- Segmente ------------------------------------------------------- */
.segmente {
  display: flex; gap: 22px; margin: 4px 0 14px;
  border-bottom: 1px solid var(--rand);
  /* overflow-y MUSS mit. Ein einzelnes overflow-x macht die andere Achse
     automatisch scrollbar; der Unterstrich des aktiven Segments ragt mit
     margin-bottom: -1px genau einen Pixel hinaus, und dafuer zeichnete der
     Browser eine senkrechte Bildlaufleiste mit zwei Pfeilen daneben. */
  overflow-x: auto; overflow-y: hidden;
}
.segment {
  border: none; background: none; padding: 0 0 11px;
  color: var(--text-leise); font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.segment:hover { color: var(--text); }
.segment.active { color: var(--haupt); border-bottom-color: var(--haupt); }

/* --- Zeile mit der Anzahl ------------------------------------------- */
.anzahl-zeile {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px; font-size: .95rem;
}
.anzahl-neben { margin-left: auto; font-size: .84rem; }

/* --- Kennzeichen der Personen --------------------------------------- */
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gruen-sanft); color: var(--gruen);
  display: inline-grid; place-items: center;
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
}
.avatar-reihe { display: flex; }
.avatar-reihe .avatar { margin-left: -8px; border: 2px solid var(--grund); }
.avatar-reihe .avatar:first-child { margin-left: 0; }
.kopf-rechts { display: flex; align-items: center; gap: 14px; }

/* display MUSS hier mit. Die erste Fassung setzte grid mit place-items:center;
   mit zwei Kindern wurden daraus zwei Zeilen, und der Text stand ausserhalb des
   52 Pixel hohen Knopfes. */
.rund-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; flex: 0 0 auto;
  padding: 13px 20px; font-size: 1rem; border-radius: 14px; white-space: nowrap;
}
.rund-plus .plus-zeichen { font-size: 1.15rem; margin-right: 7px; }

/* --- Fuss der Seitenleiste ------------------------------------------ */
.seitenleiste-fuss { margin-top: auto; display: block; }
.haushalt-block {
  display: flex; gap: 10px; align-items: center;
  margin-top: 10px; padding: 11px 13px 0; border-top: 1px solid var(--rand);
}
.haushalt-block strong { display: block; font-size: .88rem; }
.sync-zeile { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--text-leise); }

@media (max-width: 860px) {
  .filters { flex-wrap: wrap; overflow: visible; }

  .suchzeile { margin-bottom: 10px; }
  .anzahl-neben { margin-left: 0; width: 100%; }
  .kopf-rechts { flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
  .rund-plus .plus-text { display: none; }
  .rund-plus .plus-zeichen { margin: 0; }
}

@media (max-width: 860px) {
  /* In der Leiste unten ist Platz fuer fuenf Ziele, nicht fuer einen
     Personenblock. Einstellungen bleiben als fuenftes Ziel erreichbar. */
  .seitenleiste-fuss { display: contents; }
  .haushalt-block { display: none; }
  #settingsBtn.tab { flex-direction: column; gap: 3px; padding: 6px 4px; font-size: .68rem; }
}

/* --- Segmentzeile mit Ansichtsumschalter ---------------------------- */
.segment-zeile {
  display: flex; align-items: flex-end; gap: 16px;
  border-bottom: 1px solid var(--rand); margin: 4px 0 14px;
}
.segment-zeile .segmente { border-bottom: none; margin: 0; flex: 1; }
.ansicht-schalter {
  display: flex; gap: 2px; padding: 3px; margin-bottom: 7px;
  background: var(--gedaempft); border-radius: 10px;
}
.ansicht {
  border: none; background: none; border-radius: 8px;
  padding: 5px 10px; color: var(--text-leise); font-size: .95rem; line-height: 1;
}
.ansicht:hover { color: var(--text); }
.ansicht.active { background: var(--karte); color: var(--haupt); box-shadow: var(--schatten); }

/* Listenansicht: Bild links, Text rechts, eine Karte je Zeile. Fuer den
   Ueberblick ueber viele Eintraege, wenn die Bilder nicht das Wichtigste sind. */
.ideas-grid.als-liste { grid-template-columns: 1fr; }
.ideas-grid.als-liste .idea-card { flex-direction: row; align-items: stretch; }
.ideas-grid.als-liste .idea-photo { flex: 0 0 210px; aspect-ratio: auto; }
.ideas-grid.als-liste .idea-body { flex: 1; }
.ideas-grid.als-liste .idea-foot { border-top: none; border-left: 1px solid var(--rand); flex-direction: column; align-items: flex-start; justify-content: center; flex: 0 0 170px; }
.ideas-grid.als-liste .votes { margin-left: 0; }

/* Der Untertitel im Kopf darf breiter laufen; auf 46 Zeichen umbrach er
   mitten im Satz und sah nach Fehler aus. */
.begruessung .muted { max-width: 62ch; }

@media (max-width: 860px) {
  .segment-zeile { flex-direction: column; align-items: stretch; gap: 6px; }
  .ansicht-schalter { align-self: flex-end; margin-bottom: 4px; }
  /* Liste auf dem Handy. Bis zum 07.09.2026 stellte diese Stelle die Liste
     wieder auf Spalte um, also genau auf das Raster - der Umschalter tat am
     Handy sichtbar nichts. Jetzt ist die Liste, was der Name sagt: eine
     schmale Zeile je Eintrag, Bild links, damit mehr auf den Schirm passt. */
  .ideas-grid.als-liste { gap: 10px; }
  .ideas-grid.als-liste .idea-card { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  /* aspect-ratio bewusst aus: Sonst gaebe das Bild die Zeilenhoehe vor und es
     entstuende neben dem kurzen Text ein leeres Feld. So bestimmt der Text die
     Hoehe, und das Bild fuellt die Spalte daneben. */
  .ideas-grid.als-liste .idea-photo { flex: 0 0 108px; aspect-ratio: auto; align-self: stretch; }
  .ideas-grid.als-liste .idea-body { min-height: 92px; justify-content: center; }
  .ideas-grid.als-liste .source-pill,
  .ideas-grid.als-liste .review-pill {
    font-size: .62rem; padding: 2px 7px; top: 7px; left: 7px; right: auto;
  }
  /* Beide Marken links uebereinander - nebeneinander passen sie auf 108px nicht. */
  .ideas-grid.als-liste .review-pill { top: 30px; }
  .ideas-grid.als-liste .idea-body { flex: 1; min-width: 0; padding: 11px 13px; gap: 5px; }
  .ideas-grid.als-liste .idea-body h3 { font-size: 1.05rem; }
  /* Begruendung und Schlagworte fallen weg. Sie sind der Grund, warum eine
     Rasterkarte hoch ist; wer sie lesen will, tippt auf Bearbeiten. */
  .ideas-grid.als-liste .reason,
  .ideas-grid.als-liste .tag-row { display: none; }
  .ideas-grid.als-liste .idea-foot {
    flex: 0 0 100%; border-left: none; border-top: 1px solid var(--rand);
    flex-direction: row; align-items: center; padding: 8px 13px;
  }
}

/* --- Kopfzeile einer Ansicht ----------------------------------------
   Alle vier Ansichten beginnen gleich: eine Zeile Erklaerung links, wenn
   noetig ein Knopf rechts. Vorher hatte die Reiseplanung dafuer einen
   eigenen weissen Kasten und fiel aus der Reihe. */
.ansicht-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.ansicht-kopf .section-intro { margin: 0; }
.trips-list .trip-card { padding: 18px; }
.trips-list .empty { grid-column: 1 / -1; }
.ansicht-kopf.nur-knopf { justify-content: flex-end; }

/* Am Rechner gibt es die Luecke nicht - dort steht der Plus-Knopf im Kopf. */
.tab-luecke { display: none; }

@media (max-width: 860px) {
  /* Vier Ziele und in der Mitte die Luecke fuer den Plus-Knopf. Alle fuenf
     Plaetze gleich breit, damit der Knopf bei 50 Prozent wirklich in der
     Luecke sitzt und nichts mehr zudeckt. */
  .tab-luecke { display: block; }
  .tabs > * { flex: 1 1 0; min-width: 0; }
  .seitenleiste-fuss { display: none; }

  /* Der Einstellungsknopf sitzt jetzt oben im Kopf. */
  .kopf-rechts #settingsBtn { width: 40px; height: 40px; }
  .kopf-rechts { flex-direction: row; align-items: center; }
}

/* Ein privater Eintrag muss auf einen Blick als solcher erkennbar sein. Wer
   glaubt, etwas sei gemeinsam sichtbar, und es ist es nicht, wartet auf eine
   Reaktion, die nie kommt. */
.privat-pill { background: var(--text); color: var(--grund); }

.schalter-zeile {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-klein); background: var(--gedaempft);
  font-weight: 600; color: var(--text);
}
.schalter-zeile input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 18px; }
.schalter-zeile small { display: block; font-weight: 400; margin-top: 2px; }

/* --- Kartennadeln ---------------------------------------------------
   Farbe nach Gruppe, Symbol nach Art. Sechzehn Farben kann sich niemand
   merken, vier schon. */
.fb-nadel { background: none; border: none; }
.fb-nadel-kopf {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  border: 2px solid var(--karte);
  box-shadow: 0 3px 8px rgba(40, 33, 27, .35);
  font-size: 15px; line-height: 1;
}
.fb-nadel-kopf i { display: block; transform: rotate(45deg); font-style: normal; }

.leaflet-popup-content { font-family: var(--sans); font-size: .85rem; line-height: 1.5; }
.leaflet-popup-content strong { font-family: var(--serif); font-size: 1rem; }
.popup-titelfoto { position: relative; width: 260px; max-width: calc(100vw - 90px); height: 180px; margin-bottom: 10px; border-radius: 10px; overflow: hidden; background: var(--gedaempft); }
.popup-titelfoto[hidden] { display: none; }
.popup-titelfoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.popup-titelfoto img.hochkant { object-fit: contain; }
.entdecken-inhalt { padding: 0 24px 24px; }
.entdecken-inhalt > *, #entdeckenEingabe > * { margin-bottom: 14px; }
#entdeckenDialog { width: min(720px, calc(100vw - 28px)); height: min(900px, 90dvh); overflow: hidden; }
#entdeckenDialog[open] { display: flex; flex-direction: column; }
#entdeckenDialog > .dialog-head { flex: none; }
#entdeckenDialog > .entdecken-inhalt { flex: 1; min-height: 0; overflow-y: auto; }
.entdecken-aktionen { flex: none; padding: 12px 24px; border-top: 1px solid var(--rand); background: var(--karte); }
.entdecken-auswahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .85rem; }
.entdecken-auswahl button { padding: 7px 10px; }
#entdeckenSpeichern { width: 100%; white-space: normal; }
.entdecken-aktionen > .schalter-zeile { padding: 8px; margin: 0 0 6px; }
.entdecken-aktionen > p { margin: 6px 0; font-size: .8rem; line-height: 1.4; }
#entdeckenFortschritt { max-height: 100px; overflow-y: auto; }
#entdeckenFortschritt:empty { display: none; }
#entdeckenDialog [hidden] { display: none !important; }
.popup-knopf {
  margin-top: 8px; margin-right: 8px; border: 1px solid var(--rand);
  background: var(--karte); color: var(--text);
  border-radius: 8px; padding: 4px 10px; font-size: .8rem; font-weight: 600;
}

.karten-legende {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px;
  font-size: .8rem; color: var(--text-leise);
}
.karten-legende span { display: flex; align-items: center; gap: 6px; }
.karten-legende i {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
}

/* Der Filter-Knopf klappt die Leiste auf und zu, auf JEDEM Geraet. Vorher stand
   die Regel nur im Telefonteil - am Rechner bewirkte der Knopf nichts, und ein
   Knopf, der nichts tut, ist schlimmer als keiner. */
#filterBereich { display: none; }
#filterBereich.offen { display: block; }
.filter-knopf .filter-zahl {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--haupt); color: var(--haupt-text); font-size: .72rem;
}

/* Die Warnung unten waechst oberhalb der Blickposition ein. Ohne diese Zeile
   haelt der Browser die Stelle fest, an der man gerade steht, und macht das
   Rollen zur Warnung sofort wieder rueckgaengig. */
#ideaForm { overflow-anchor: none; }

/* Dublettenwarnung. Auffaellig genug, um nicht ueberlesen zu werden, aber kein
   Fehler - es ist eine Frage, keine Absage. */
.dubletten {
  margin: 12px 0; padding: 14px 16px; border-radius: var(--radius-klein);
  background: var(--gruen-sanft); color: var(--gruen);
}
.dubletten strong { display: block; margin-bottom: 6px; }
.dubletten ul { margin: 0 0 10px; padding-left: 18px; }
.dubletten li { margin-bottom: 4px; }
.dubletten .muted { color: inherit; opacity: .75; }
.dubletten .linkish { color: inherit; }

/* Kurzes Aufleuchten, wenn die Warnung erscheint. Das Formular springt dorthin,
   und der Rahmen sagt, wo das Springen geendet hat. */
.dubletten.blinkt { animation: dublette-auf .9s ease-out 2; }
@keyframes dublette-auf {
  0%   { box-shadow: 0 0 0 0 var(--gruen); }
  60%  { box-shadow: 0 0 0 4px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .dubletten.blinkt { animation: none; }
}

/* --- Reise zusammenstellen -------------------------------------------
   Vier Schritte untereinander in einem Dialog. Jeder Schritt bekommt eine
   sichtbare Kante, sonst laeuft das lange Formular zu einem Block zusammen. */
.plan-schritt { border-top: 1px solid var(--rand); padding-top: 16px; margin-top: 18px; }
.plan-schritt:first-of-type { border-top: none; padding-top: 0; margin-top: 8px; }
.plan-schritt h3 { font-size: 1.15rem; margin-bottom: 6px; }
.plan-schritt .hint { margin-bottom: 10px; }
#planSuche { width: 100%; margin-bottom: 10px; }

.plan-liste {
  max-height: 320px; overflow-y: auto; border: 1px solid var(--rand);
  border-radius: var(--radius-klein); background: var(--karte);
}
.plan-zeile {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--rand);
}
.plan-zeile:last-child { border-bottom: none; }
.plan-zeile.markiert { background: var(--gedaempft); }
.plan-zeichen { font-size: 1.1rem; }
.plan-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plan-name em { font-style: normal; font-size: .8rem; color: var(--text-leise); }
.plan-rollen { display: flex; gap: 4px; flex: none; }

/* Drei Knoepfe statt eines Schalters: "muss dabei sein", "kommt infrage",
   "bitte vermeiden". Ein Daumen sagt nichts ueber Verbindlichkeit. Nochmal
   Tippen nimmt die Markierung zurueck. */
.rolle-knopf {
  border: 1px solid var(--rand); background: var(--karte); color: var(--text-leise);
  border-radius: 999px; padding: 3px 10px; font-size: .76rem; font-weight: 600;
  cursor: pointer;
}
.rolle-knopf:hover { border-color: var(--haupt); color: var(--text); }
.rolle-knopf.an { color: #fff; border-color: transparent; }
.rolle-knopf.an.pflicht   { background: var(--haupt); }
.rolle-knopf.an.moeglich  { background: var(--gruen); }
.rolle-knopf.an.vermeiden { background: var(--text-leise); }

.plan-station {
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  padding: 12px 14px; margin-bottom: 10px; background: var(--karte);
}
.plan-station-kopf { display: flex; align-items: center; gap: 10px; }
.plan-nr {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--haupt); color: var(--haupt-text);
  display: grid; place-items: center; font-size: .82rem; font-weight: 700;
}
.plan-werkzeug { display: flex; align-items: center; gap: 4px; flex: none; }
.plan-naechte { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--text-leise); }
.plan-naechte input { width: 58px; }
.plan-station .reason { margin: 8px 0 0; }
.plan-station .tag-row { margin-top: 8px; }
.plan-etappe { margin: 8px 0 0; }
#planEntwurfText { margin-top: 12px; }
#planPruefung ul { margin: 6px 0 0; padding-left: 18px; }
#planPruefung li { margin-bottom: 3px; }
.ok { color: var(--gruen); font-weight: 600; }

/* Leiste ueber der Karte, solange eine Route liegt. */
.routen-leiste {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px; padding: 10px 14px;
  border-radius: var(--radius-klein); background: var(--gedaempft);
  font-size: .86rem;
}
.fb-route-nr span {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--haupt); color: var(--haupt-text); font-weight: 700; font-size: .8rem;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.trip-fuss { margin-top: 12px; }

@media (max-width: 860px) {
  .plan-zeile { flex-wrap: wrap; }
  .plan-rollen { width: 100%; justify-content: flex-end; }
  .plan-station-kopf { flex-wrap: wrap; }
  .plan-werkzeug { width: 100%; justify-content: flex-end; }
}

/* --- Fusszeile mit dem Urheberrecht ---------------------------------- */
.app-fuss {
  margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--rand);
  color: var(--text-leise); font-size: .8rem; line-height: 1.6;
}
.app-fuss div + div { margin-top: 2px; max-width: 70ch; }

/* --- Zaehler fuer Personen ------------------------------------------- */
.feld-titel { display: block; font-size: .84rem; font-weight: 600; color: var(--text-leise); }
.zaehler-reihe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.zaehler {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--feld); border-radius: var(--radius-klein);
  background: var(--karte); padding: 5px 10px 5px 13px;
}
.zaehler-name { font-size: .86rem; color: var(--text-leise); margin-right: 2px; }
.zaehler .icon-btn { width: 32px; height: 32px; font-size: 1.05rem; }
.zaehler output { min-width: 1.6ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Einstellungen: Luft zwischen den Abschnitten ---------------------
   Vorher standen Ueberschrift, Erklaerung und Feld dicht aufeinander, und die
   Abschnitte gingen ineinander ueber; der Dialog wirkte gedrungen. */
.settings-block { padding: 24px 0 4px; }
.settings-block h3 { margin-bottom: 8px; font-size: 1.2rem; }
.settings-block .muted, .settings-block > .hint { margin-bottom: 14px; max-width: 68ch; line-height: 1.55; }
.settings-block .inline-field { margin-top: 2px; }
.settings-block .inline-field input { padding: 12px 13px; }
#markenListe:not(:empty) { margin-top: 14px; }

@media (max-width: 860px) {
  /* Nur das Zahnrad, ohne Beschriftung. Bis zum 07.09.2026 stand der Text
     weiterhin im 40 Pixel breiten Knopf: Er lief heraus, machte die Seite
     breiter als den Schirm, und man musste erst herauszoomen, um etwas zu
     sehen. Genau der weisse Kasten neben den Kuerzeln. */
  .kopf-rechts #settingsBtn .tab-text { display: none; }
  .kopf-rechts #settingsBtn { padding: 0; flex: 0 0 40px; }
  .app-fuss { margin-top: 32px; }
}

/* Der Einstellungsdialog traegt mehr Text als die anderen: sieben Abschnitte
   mit Erklaerung. Auf 680 Pixeln standen Ueberschrift, Satz und Feld dicht
   uebereinander und er wirkte gedrungen. Etwas mehr Breite gibt jeder Zeile
   Platz, ohne die Zeilenlaenge zu sprengen - die Absaetze sind auf 68 Zeichen
   begrenzt. */
#settingsDialog { width: min(780px, calc(100vw - 28px)); }
#settingsDialog > .settings-block { padding: 20px clamp(16px, 4vw, 30px); }
#settingsDialog form, #settingsDialog > div { padding: 24px 30px 28px; }

/* --- Ausstattung: feste Merkmale zum Ankreuzen ------------------------
   Sie sehen anders aus als die Tags daneben. Das ist Absicht: Nach diesen
   laesst sich filtern, nach den Tags nicht. Saehe beides gleich aus, suchte
   man spaeter vergeblich nach einem Filter fuer ein Schlagwort. */
.merkmal-gruppe { margin-top: 12px; }
.merkmal-gruppe:first-child { margin-top: 6px; }
.merkmal-titel {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-leise); margin-bottom: 6px;
}
.merkmal-reihe { display: flex; flex-wrap: wrap; gap: 7px; }
.merkmal {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--rand); border-radius: 999px;
  background: var(--karte); cursor: pointer; font-weight: 500;
}
/* Das Kaestchen selbst ist weg; der ganze Schalter ist die Anzeige. Ein
   Kaestchen neben einer Pille sieht nach zwei Bedienelementen aus. */
.merkmal input { position: absolute; opacity: 0; width: 0; height: 0; }
.merkmal span { padding: 5px 12px; font-size: .82rem; color: var(--text-leise); }
.merkmal:hover { border-color: var(--haupt); }
.merkmal:hover span { color: var(--text); }
.merkmal:has(input:checked), .merkmal.an { background: var(--gruen-sanft); border-color: var(--gruen); }
.merkmal:has(input:checked) span, .merkmal.an span { color: var(--gruen); font-weight: 600; }
.merkmal:focus-within { outline: 2px solid var(--haupt); outline-offset: 1px; }

.ausstattung-filter { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rand); }
.ausstattung-filter .feld-titel { margin-bottom: 8px; }

/* Auf der Karte: dieselbe Form wie ein Tag, aber gruen hinterlegt. */
.merkmal-tag { background: var(--gruen-sanft); color: var(--gruen); }

/* Ein Pflichtfeld, das noch leer ist. Der Browser zeigt seine eigene
   Sprechblase; auf dem iPhone bleibt die in einem gerollten Dialog aus. */
.pflicht-fehlt { border-color: #a02c1f; background: #fdf3f1; }
.pflicht-fehlt:focus { outline-color: #a02c1f; }

/* --- Stand der Buchung je Station ------------------------------------
   Er haelt den Plan ueber die erste Begeisterung hinaus am Leben: Ohne ihn
   weiss in drei Wochen niemand mehr, wo angefragt wurde. */
.buchung-zeile {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rand);
}
.buchung-zeile label { font-size: .76rem; }
.buchung-zeile select { width: auto; min-width: 140px; padding: 8px 30px 8px 11px; }
.buchung-notiz { flex: 1 1 220px; }
.buchung-notiz input { padding: 8px 11px; }

/* Der Stand faerbt seine Zeile. Gebucht ist erledigt, nicht moeglich ist
   erledigt, dazwischen liegt die Arbeit. */
.buchung-zeile[data-stand="gebucht"]   select { border-color: var(--gruen); color: var(--gruen); font-weight: 600; }
.buchung-zeile[data-stand="angefragt"] select { border-color: var(--haupt); color: var(--haupt); font-weight: 600; }
.buchung-zeile[data-stand="abgesagt"]  select { color: var(--text-leise); text-decoration: line-through; }

.stand-zeile { font-size: .82rem; margin-top: 6px; }

/* --- Zeile mit den aktiven Filtern -----------------------------------
   Seit die Ausstattung eingeklappt ist, sagt die Zahl am Knopf nur noch, DASS
   gefiltert wird. Hier steht, WOMIT, und jeder Filter laesst sich einzeln
   abstellen. Die Zeile erscheint nur, wenn etwas aktiv ist. */
.aktive-filter {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  margin: 0 0 12px;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--gruen); border-radius: 999px;
  background: var(--gruen-sanft); color: var(--gruen);
  padding: 4px 8px 4px 4px; font-size: .8rem; font-weight: 600;
}
.filter-chip .chip-art {
  background: var(--karte); border-radius: 999px;
  padding: 1px 7px; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.filter-chip .chip-x { font-weight: 400; font-size: 1rem; opacity: .7; }
.filter-chip:hover .chip-x { opacity: 1; }
.aktive-filter .alle-weg { font-size: .8rem; margin-left: 4px; }

/* Die Ausstattung als aufklappbarer Block. */
#weitereFilter > summary {
  cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--text-leise);
  padding: 4px 0; list-style: none;
}
#weitereFilter > summary::-webkit-details-marker { display: none; }
#weitereFilter > summary::before { content: '▸ '; }
#weitereFilter[open] > summary::before { content: '▾ '; }
#weitereFilter > summary:hover { color: var(--text); }
#weitereFilter[open] > summary { margin-bottom: 10px; }

/* --- Plan bearbeiten: ersetzen und Orte zuordnen ---------------------
   Beide Wege teilen dasselbe Auswahlfeld. Es klappt in der Station auf, damit
   sichtbar bleibt, wofuer man gerade waehlt. */
.plan-knoepfe { display: flex; gap: 16px; margin-top: 10px; }
.plan-knoepfe .linkish { font-size: .82rem; }
.plan-knoepfe .linkish.an { text-decoration: none; color: var(--text); }

.plan-auswahl {
  margin-top: 10px; padding: 12px; border-radius: var(--radius-klein);
  background: var(--gedaempft);
}
.plan-auswahl .hint { margin: 0 0 10px; }
.plan-vorschlaege { display: flex; flex-direction: column; gap: 6px; }
.vorschlag {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-align: left; width: 100%;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--karte); padding: 8px 11px;
}
.vorschlag:hover { border-color: var(--haupt); }
.vorschlag strong { font-family: var(--sans); font-size: .88rem; font-weight: 600; }
.vorschlag em { font-style: normal; font-size: .76rem; color: var(--text-leise); }

.plan-fern > summary {
  cursor: pointer; font-size: .78rem; color: var(--text-leise);
  margin-top: 8px; list-style: none;
}
.plan-fern > summary::-webkit-details-marker { display: none; }
.plan-fern > summary::before { content: '▸ '; }
.plan-fern[open] > summary::before { content: '▾ '; }
.plan-fern[open] > summary { margin-bottom: 6px; }

/* Die zugeordneten Orte, mit Entfernung und einem Kreuz zum Loesen. */
.akt-reihe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.akt-marke {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--rand); border-radius: 999px;
  background: var(--gedaempft); padding: 3px 5px 3px 11px; font-size: .8rem;
}
.akt-marke em { font-style: normal; font-size: .72rem; color: var(--text-leise); }
.akt-marke button {
  border: none; background: none; padding: 0 4px;
  color: var(--text-leise); font-size: 1rem; line-height: 1;
}
.akt-marke button:hover { color: var(--haupt); }
/* Nach einem Austausch der Unterkunft kann ein Restaurant ploetzlich weit weg
   liegen. Das darf nicht aussehen wie alles andere. */
.akt-marke.weit { border-color: var(--haupt); }
.akt-marke.weit em { color: var(--haupt); font-weight: 600; }
/* Recherchevorschau: lesbare Belege auch auf schmalen Geräten. */
.recherche-block { background: var(--gedaempft); border-radius: 12px; padding: 18px; }
.recherche-block h3 { margin: 0 0 8px; }
.recherche-option { display: inline-flex; align-items: center; gap: 8px; margin: 6px 12px 12px 0; }
.recherche-option input, .recherche-feld > input { width: auto; flex: 0 0 auto; }
.recherche-feld { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rand); }
.recherche-feld > span { min-width: 0; overflow-wrap: anywhere; }
.recherche-feld small { display: block; margin-top: 6px; color: var(--text-leise); }
.recherche-treffer { padding: 12px 0; border-top: 1px solid var(--rand); overflow-wrap: anywhere; }
.recherche-treffer button { display: block; margin-top: 8px; }
#rechercheBelege { margin-top: 12px; overflow-wrap: anywhere; }
.recherche-bilder { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 12px; }
.recherche-bilder figure { margin: 0; min-width: 0; }
.recherche-bilder img { width: 100%; height: 140px; object-fit: cover; border-radius: 10px; }
.recherche-bilder figcaption { font-size: .8rem; overflow-wrap: anywhere; }
.bild-auswahl { position: relative; }
.bild-titel { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; border-radius: 10px; overflow: hidden; }
.bild-titel img { display: block; }
.foto-kachel .bild-titel { height: 100%; }
.bild-titel[aria-pressed="true"] { outline: 3px solid var(--haupt); outline-offset: 2px; }
.bild-titel:focus-visible { outline: 3px solid var(--haupt); outline-offset: 3px; }
.bild-titelmarke { position: absolute; bottom: 7px; left: 7px; padding: 3px 8px; border-radius: 20px; background: #fff9; color: #30251e; font-size: .75rem; }
.bild-entfernen { position: absolute; top: 5px; right: 5px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #fff9; color: #30251e; font-size: 24px; line-height: 1; backdrop-filter: blur(3px); }
.bild-entfernen:hover { background: #fffe; }
.manuelle-fotos { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--rand); }
/* Mehrfach-Tags und lokale Filteransichten */
.tag-auswahl { min-width:180px; max-width:100%; }
.filters { align-items:flex-start; }
main { min-width:0; }
.filter-ansichten .entdecken-auswahl > * { max-width:100%; }
.filter-ansichten select { flex:1; width:auto; min-width:160px; }
.tag-auswahl summary,.filter-ansichten summary { cursor:pointer; padding:8px 0; }
#tagFilter { display:flex; flex-wrap:wrap; gap:6px; max-width:360px; max-height:180px; overflow:auto; padding:8px 0; }
.filter-ansichten { margin:8px 0; }
.filter-ansichten .entdecken-auswahl { margin:8px 0; flex-wrap:wrap; }
.filter-ansichten input { min-width:180px; flex:1; }
#entdeckenVorbild { margin:12px 0; padding:12px; border:1px solid var(--line,#d8cbbb); border-radius:12px; }
#rechercheLaden { padding:12px 0; }
.reise-laden { display:flex; align-items:center; flex-wrap:wrap; gap:12px; color:var(--haupt); }
.reise-laden[hidden], .reise-laden [hidden] { display:none !important; }
.lade-kompass { display:block; position:relative; flex:none; width:48px; height:48px; border:1px solid currentColor; border-radius:50%; box-shadow:inset 0 0 0 4px var(--karte); background:var(--gedaempft); }
.lade-kompass::before { content:''; position:absolute; inset:7px 17px; background:linear-gradient(var(--haupt) 50%,var(--rand) 50%); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); animation:kompass-suchen 3s ease-in-out infinite; }
.reise-laden.fertig .lade-kompass::before { content:'✓'; inset:0; display:grid; place-items:center; background:none; clip-path:none; animation:none; font-style:normal; font-size:32px; }
.reise-laden.fertig .lade-punkte { visibility:hidden; }
@keyframes kompass-suchen { 0%,100% { transform:rotate(-30deg); } 50% { transform:rotate(65deg); } }
.lade-punkte { display:block; font-style:normal; letter-spacing:5px; animation:reise-puls 1.8s ease-in-out infinite; }
@keyframes reise-puls { 50% { opacity:.3; } }
.votes button { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:4px; line-height:1; }
.votes [data-entfernen] { color:var(--text-leise); opacity:.65; }
.votes [data-entfernen]:hover { opacity:1; color:var(--haupt); }
#entfernenPapierkorb { color:var(--haupt); border-color:var(--haupt); }
#teilenDialog label { display:block; margin:12px 0; }
#teilenDialog a.secondary { display:inline-flex; align-items:center; text-decoration:none; }
#teilenDialog a[aria-disabled="true"] { opacity:.45; cursor:default; }
.recherche-einstieg { margin-bottom:18px; }
.recherche-einstieg label { display:block; margin:10px 0; }
.recherche-einstieg details { margin:12px 0; }
.recherche-einstieg .manuelle-fotos { margin-top:8px; }
#editor-recherche > .recherche-block { background:transparent; border:0; border-radius:0; padding:0; margin:18px 0; }
#editor-recherche > .recherche-einstieg, #editor-recherche > .editor-gruppe { padding:0; background:transparent; }
.bilder-pruefen { margin-bottom:16px; }
.bilder-pruefen p { font-size:.85rem; color:var(--text-leise); }
.manuelle-fotos { padding:16px; border:1px dashed var(--rand); border-radius:12px; background:var(--gedaempft); }
.manuelle-fotos .inline-field { flex-wrap:wrap; gap:8px; }
#fotoDatei[hidden] { display:none; }
@media (min-width:1000px) {
  #ideaDialog { width:min(1180px,calc(100vw - 48px)); max-height:94dvh; }
  #ideaForm { height:94dvh; max-height:94dvh; }
  #editor-recherche:not([hidden]) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:16px 32px; align-content:start; align-items:start; }
  #editor-recherche > .recherche-einstieg { grid-column:1; grid-row:1 / span 3; }
  #editor-recherche > .recherche-block, #editor-recherche > .editor-gruppe, #editor-recherche > .editor-optionen { grid-column:2; margin:0; }
  #editor-recherche > #kiBlock { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce) { .lade-kompass::before,.lade-punkte { animation:none; } }
#rechercheLaden progress { display:block; width:100%; height:12px; margin-bottom:6px; accent-color:var(--accent,#98452e); }
#rechercheLaden span { font-size:.85rem; }
#entdeckenDialog > #entdeckenLaden { flex:none; padding:10px 24px; overflow:visible; }
#entdeckenLaden[hidden] { display:none; }
#entdeckenLaden progress { display:block; width:100%; height:12px; margin-bottom:4px; accent-color:var(--haupt); }
#entdeckenLaden span, .treffer-belege { font-size:.85rem; }
.treffer-homepage { display:inline-block; margin-top:6px; }
#entdeckenZiel { margin:16px 0; padding:14px; border-radius:12px; background:var(--gedaempft); }
#entdeckenRegionLabel { margin-top:10px; }
#entdeckenZiel[hidden], #entdeckenRegionLabel[hidden] { display:none; }
.treffer-fakten { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 14px; font-size:.9rem; }
.treffer-fakten dt { color:var(--text-leise); }
.treffer-fakten dd { margin:0; overflow-wrap:anywhere; }