/* «What's here»-Kacheln (place-form.js) und geführte Erfassung (add.html). Konzept docs/erfassen.md */

/* ---------- Kacheln ---------- */
.pf-list { display: flex; flex-direction: column; gap: 10px; }
.pf-row { border: 2px solid var(--sand-line); border-radius: 10px; background: var(--paper); transition: border-color .15s; }
.pf-row[data-v="yes"] { border-color: var(--ink); }
.pf-row[data-v="no"] { background: var(--salt); }
.pf-row[data-v="no"] .pf-txt { opacity: .6; }
.pf-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; }
.pf-ic { font-size: 24px; width: 32px; text-align: center; flex: none; line-height: 1; }
.pf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pf-txt b { font: 800 17px var(--f-display); font-stretch: 105%; }
.pf-txt small { font-size: 14px; color: var(--ink-soft); }
.pf-yn { display: flex; flex: none; border: 2px solid var(--ink); border-radius: 22px; overflow: hidden; }
.pf-yn button { min-width: 56px; min-height: 40px; border: 0; background: var(--paper); color: var(--ink); font: 700 15px var(--f-display); cursor: pointer; }
.pf-yn button + button { border-left: 2px solid var(--ink); }
.pf-yn button:hover { background: var(--sand-light); }
.pf-yn button[aria-pressed="true"][data-yn="yes"] { background: var(--ink); color: var(--salt); }
.pf-yn button[aria-pressed="true"][data-yn="no"] { background: var(--sand-dark); color: var(--ink); }
.pf-yn button:focus-visible { outline: 3px solid var(--kite); outline-offset: -3px; }
.pf-det { display: flex; flex-direction: column; gap: 14px; padding: 4px 14px 16px 58px; }
.pf-det[hidden] { display: none; }
.pf-q { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-q legend, .pf-q > span:first-child { font: 700 14px var(--f-display); padding: 0; margin-bottom: 6px; }
.pf-q--num { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-q--num > span:first-child { margin: 0; }
.pf-q input[type="number"], .pf-q input[type="text"], .pf-q select, .pf-other {
  font: 16px var(--f-display); min-height: 44px; padding: 8px 10px; border: 1px solid var(--sand-dark); border-radius: 4px; background: var(--salt); color: var(--ink); }
.pf-q input[type="number"] { width: 110px; }
.pf-price { display: inline-flex; gap: 6px; }
.pf-own { font: 500 11px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--deep-water); margin-left: 6px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip { position: relative; }
.pf-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.pf-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 20px;
  background: var(--salt); font: 600 15px var(--f-display); cursor: pointer; }
.pf-chip input:checked + span { background: var(--ink); color: var(--salt); }
.pf-chip input:checked + span::before { content: '✓'; margin-right: 6px; }
.pf-chip input:focus-visible + span { outline: 3px solid var(--kite); outline-offset: 2px; }
.pf-slot:empty { display: none; }
.pf-slot { display: flex; flex-direction: column; gap: 14px; border-top: 1px dashed var(--sand-line); padding-top: 14px; }
.pf-rental { display: flex; flex-direction: column; gap: 14px; }
.pf-foot { margin-top: 4px; }
@media (max-width: 560px) {
  .pf-head { padding: 10px; gap: 8px; }
  .pf-ic { font-size: 20px; width: 24px; }
  .pf-txt b { font-size: 16px; }
  .pf-txt small { font-size: 13px; }
  .pf-yn button { min-width: 48px; min-height: 44px; font-size: 14px; }
  .pf-det { padding: 2px 12px 14px; }
}

/* Anzeige: Ortsseite (Liste) und Steckbrief (Icons) */
.pf-show { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 18px; }
.pf-show li { display: flex; gap: 10px; align-items: flex-start; }
.pf-show .pf-ic { font-size: 22px; width: 28px; }
.pf-show b { display: block; font: 800 16px var(--f-display); }
.pf-show small { display: block; font-size: 14px; color: var(--ink-soft); }
.pf-icons { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pf-icons li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 14px; background: var(--sand-light); font: 600 13px var(--f-display); }
.pf-gaps { font-size: 14px; color: var(--ink-soft); }

/* ---------- Geführte Erfassung ---------- */
.wz { display: block; }
.wz-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.wz-step { display: flex; flex-direction: column; gap: 16px; }
.wz-step[hidden] { display: none; }
.wz-h2 { margin-top: 10px; }
.wz-top { display: flex; flex-direction: column; gap: 6px; }
.wz-bar { height: 6px; border-radius: 3px; background: var(--sand-light); overflow: hidden; }
.wz-bar span { display: block; height: 100%; background: var(--kite); transition: width .3s; }
.wz-count { margin: 0; font: 500 13px var(--f-mono); color: var(--ink-soft); }
.wz-side { display: none; }
.wz-who { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.wz-card { position: relative; }
.wz-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wz-card span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px; border: 2px solid var(--sand-line); border-radius: 10px; background: var(--paper); cursor: pointer; }
.wz-card b { font: 800 18px var(--f-display); font-stretch: 105%; }
.wz-card small { font-size: 14px; color: var(--ink-soft); }
.wz-card em { font: 500 12px var(--f-mono); font-style: normal; color: var(--deep-water); margin-top: auto; padding-top: 6px; }
.wz-card input:checked + span { border-color: var(--ink); background: var(--sand-light); box-shadow: inset 0 0 0 1px var(--ink); }
.wz-card input:checked + span b::before { content: '✓ '; color: var(--kite-text); }
.wz-card input:focus-visible + span { outline: 3px solid var(--kite); outline-offset: 2px; }
.wz-nav { justify-content: space-between; }
.wz-nav #wz-back[hidden] + .btn-kite { margin-left: auto; }
.wz-nav .saved { flex-basis: 100%; margin: 0; }
.wz-nav .saved:empty { display: none; }
.wz-draft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; margin-bottom: 18px;
  border: 2px solid var(--ink); border-radius: 10px; background: var(--sand-light); }
.wz-draft[hidden] { display: none; }
.wz-draft p { margin: 0; }
.wz-linked { margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--sand-light); }
.wz-check dl { margin: 0; display: flex; flex-direction: column; }
.wz-ck { display: grid; grid-template-columns: 120px 1fr auto; gap: 4px 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--sand-line); }
.wz-ck dt { font: 500 13px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding-top: 2px; }
.wz-ck dd { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wz-ck .link { background: none; border: 0; padding: 4px 0; color: var(--kite-text); font: 700 15px var(--f-display); text-decoration: underline; cursor: pointer; }
.wz-ck-no { color: var(--ink-soft); }
/* Feedback-Knopf über der Leiste mit Back/Continue */
body:has(.wz-nav) .fb-fab { bottom: 96px; }
body:has(.wz-done:not([hidden])) .fb-fab { bottom: 16px; }
.wz-done .next--main { background: var(--ink); color: var(--salt); }
.wz-done .next--main span { color: var(--sand); }
.wz-done .next--main:hover { background: var(--ink); color: var(--salt); opacity: .92; }
.wz-done .done-card { text-align: left; align-items: stretch; }
@media (max-width: 560px) {
  .wz-ck { grid-template-columns: 1fr auto; }
  .wz-ck dt { grid-column: 1 / -1; }
  .wz-nav .btn-big { width: auto; flex: 1; }
  .wz-nav #wz-back { min-height: 56px; }
}
/* Desktop: Schritte links, Inhalt rechts */
@media (min-width: 960px) {
  .wz { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
  .wz-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 120px; }
  .wz-top { display: none; }
  .wz-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .wz-steps li > * { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none;
    font: 600 16px var(--f-display); color: var(--ink-soft); text-align: left; }
  .wz-steps button { cursor: pointer; color: var(--ink); }
  .wz-steps button:hover { background: var(--sand-light); }
  .wz-steps i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--sand-dark); font: 600 12px var(--f-mono); font-style: normal; flex: none; }
  .wz-steps .is-on > * { background: var(--sand-light); color: var(--ink); font-weight: 800; }
  .wz-steps .is-on i { background: var(--ink); border-color: var(--ink); color: var(--salt); }
  .wz-steps .is-done i { background: var(--lagoon, #2a7f7a); border-color: transparent; color: var(--salt); }
  .wz-live { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 8px; background: var(--paper); font-size: 14px; }
  .wz-live:empty { display: none; }
}

/* Spot: Wasser + Level + Heads-up über den Kacheln */
.here-spot { display: flex; flex-direction: column; gap: 16px; padding-bottom: 6px; }
.here-spot[hidden] { display: none; }

/* Ortsseite: verknüpfte Einträge */
.pl-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

/* Lücken-Fragen in der Bewertung (rate.js) + «Been here? Tell us» auf der Ortsseite */
.rate-amen { border: 1.5px dashed var(--sand-line); border-radius: 12px; padding: 4px 14px 12px; margin: 12px 0; }
.rate-amen legend { padding: 0 4px; }
.rate-amen-q { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--sand-line); }
.rate-amen-q:first-of-type { border-top: 0; }
.rate-amen-t { flex: 1 1 220px; font-size: 15px; line-height: 1.35; }
.rate-amen-t > span { margin-right: 4px; }
.rate-amen .seg { gap: 6px; flex-wrap: nowrap; }
.pf-tell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 0 0; padding: 10px 14px; border: 1.5px dashed var(--sand-line); border-radius: 12px; font-size: 14px; color: var(--ink-soft); }
.pf-tell b { color: var(--ink); }
.pf-tell .rate-btn, .pf-tell a { margin-left: auto; }
.rate-amen .seg input[value=""]:checked + span { background: transparent; color: var(--ink-soft); border-color: var(--sand-line); }