/* Formularsystem, Finden, Radar, Sheet-Kopf, eigene Karte. Teil 09 der Gestaltung - die Reihenfolge steht in index.html
   und ist bindend: spaetere Regeln ueberschreiben fruehere. *//* ============================================================
   Ein Formularsystem fuer die ganze App

   Bis hierher trug jedes Sheet dieselbe weisse Flaeche wie die Felder
   darauf: eine Eingabe war eine Linie im Weiss, und wo ein Abschnitt
   endete, musste man raten. Das Sheet ist jetzt die Unterlage, und alles
   Bedienbare liegt als eigene Flaeche darauf - dasselbe Prinzip wie auf
   der Personenseite: Karte, kleines Etikett, grosser Wert.
   ============================================================ */
.sheet{background:var(--bg)}
.sheet-head{background:var(--bg)}

.form-grid{gap:10px}
.form-grid .field{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:12px 14px 10px;gap:2px}
.form-grid .field label{font-size:12px;font-weight:700;color:var(--muted)}
.form-grid .field input,.form-grid .field select,.form-grid .field textarea{
  border:0;background-color:transparent;border-radius:0;padding:4px 0;min-height:38px;font-size:17px}
.form-grid .field textarea{min-height:96px}
.form-grid .field select{
  padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:17px}
/* Hier stand eine Regel, die outline und box-shadow im Fokus abschaltete.
   Mit Spezifitaet 0,3,1 und aus der letzten Datei schlug sie die globale
   :focus-visible-Regel - in JEDEM Formularfeld der App. Der Ersatzring
   hatte 12 Prozent Deckkraft, also 1,19:1; WCAG 2.2 verlangt 3:1.
   Jetzt zeichnet das Feld nur noch seinen Rahmen mit, den Ring liefert
   die globale Regel. */
.form-grid .field:focus-within{border-color:var(--primary)}
.form-grid>.toggle-row{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px}

/* ============================================================
   Finden: eine Zeile je Facette statt aller Marken auf einmal

   Offen standen dort Kreise, Kategorie, jede Stadt, jedes Jahr, jeder
   Monat und jedes Event untereinander - auf dem Telefon eine Wand, durch
   die man scrollen musste, um zum Knopf zu kommen. Jetzt zeigt jede
   Zeile ihren aktuellen Wert; aufgeklappt ist nur, was gesetzt ist.
   ============================================================ */
.find-facets{display:flex;flex-direction:column;gap:8px}
.find-facet{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.find-facet>summary{
  display:flex;align-items:center;gap:11px;min-height:56px;padding:10px 14px;
  font-size:15px;font-weight:700;cursor:pointer;list-style:none}
.find-facet>summary::-webkit-details-marker{display:none}
.facet-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--soft);color:var(--primary);flex:0 0 auto}
.facet-ico .ico{width:18px;height:18px}
.facet-value{color:var(--muted);font-weight:600;font-size:14px;max-width:45%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.facet-chev{display:flex;color:var(--muted);transition:transform .15s}
.facet-chev .ico{width:16px;height:16px;transform:rotate(90deg)}
.find-facet[open] .facet-chev{transform:rotate(180deg)}
.find-facet>.filter-options{padding:2px 14px 14px}
.facet-break{flex-basis:100%;height:0}

/* Der Fuss bleibt in Reichweite, statt hinter der Markenwand zu liegen. */
.find-foot{position:sticky;bottom:0;z-index:5;gap:10px;padding:12px 0 4px;
  background:linear-gradient(to bottom,transparent,var(--bg) 22%)}
.find-foot .btn{min-height:52px}
/* Auch hinter der Klappe stehen Felder als Karten - mit Luft dazwischen,
   die sie vom Rasterabstand des Formulars nicht erben. */
.more-fields>.field,.more-fields>.toggle-row,.more-fields>.form-grid{margin-top:10px}
.more-fields>.toggle-row{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px}

/* ============================================================
   Radar - dieselbe Karte wie auf der Startseite, mit echten Menschen
   ============================================================ */
.radar-card{max-width:none;margin:0 0 12px}
.pm-list .pm-line{width:100%;border:0;background:transparent;text-align:left;cursor:pointer}

/* ============================================================
   Eingeben sieht ueberall gleich aus - und nie als Kasten im Kasten

   Im Adressbuch hat ein Feld INNERHALB einer Karte keinen eigenen
   Rahmen: nur Etikett, Wert und eine haarfeine Linie darunter. Genau so
   hier. Einen Rahmen bekommt ein Feld nur, wenn es allein auf der
   Unterlage steht (.form-grid > .field).
   ============================================================ */
.value-row.editing input,.value-row.editing select,.value-row.editing textarea,.card .field input,.card .field select,.card .field textarea,.value-list .field input,.value-list .field select,.value-list .field textarea{
  border:0;border-bottom:1px solid var(--line);border-radius:0;background-color:transparent;
  padding:9px 0;min-height:46px;font-size:17px;box-shadow:none}
.value-row.editing input:focus,.value-row.editing select:focus,.value-row.editing textarea:focus{
  border-bottom-color:var(--primary);box-shadow:none}
.value-row.editing textarea{min-height:96px}
.value-row.editing select{background-position:right 2px center;padding-right:28px}

/* Ein Feld in einer Karte ist keine zweite Karte. */
.card .field,.value-list .field,.more-fields .card .field{
  background:transparent;border:0;border-radius:0;padding:0}

/* Abbrechen und Übernehmen sind Text, kein Block - wie Cancel/Save dort. */
.value-actions{grid-template-columns:1fr 1fr;gap:0;margin-top:2px}
.value-actions .btn,.value-actions .btn.small{
  background:transparent;color:var(--primary);font-weight:800;font-size:15px;
  min-height:48px;border-radius:12px;padding:12px}
.value-actions .btn.ghost{color:var(--muted)}
.value-actions .btn:active{background:var(--soft)}

/* Das Ortsfeld im Wohnort-Durchlauf lief noch auf eigenen Werten: fest
   verdrahtetes Weiss (und damit im Dunkelmodus heller Text auf hellem
   Grund), 13px Radius, 16px Schrift. Es folgt jetzt denselben Tokens wie
   jedes andere Feld. */
.input-go input{
  background-color:var(--field);border-color:var(--field-line);
  border-radius:16px 0 0 16px;min-height:52px;font-size:17px}
.input-go .go-btn{border-radius:0 16px 16px 0;min-height:52px}

/* ============================================================
   Kopf des Sheets: Gewicht auf dem Kreuz, links der Weg zurueck
   ============================================================ */
.sheet-head{gap:8px}
.sheet-head h2{flex:1;min-width:0}
.sheet-back{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;
  background:var(--soft);color:var(--text);display:grid;place-items:center}
.sheet-back .ico{width:21px;height:21px;transform:rotate(180deg)}
.close-btn{width:46px;height:46px;border:1px solid var(--line);color:var(--text);
  box-shadow:0 2px 8px rgba(16,24,40,.08)}
.close-btn .ico{width:22px;height:22px;stroke-width:2.2}

/* Loeschen ist kein Verwaltungspunkt, sondern ein Ende: eigener Knopf,
   volle Breite, satte Farbe - und weit genug weg vom Rest, dass ihn
   niemand im Vorbeiscrollen trifft. */
.btn.danger.danger-solid{
  background:var(--danger);color:#fff;min-height:54px;font-size:16px;
  margin-top:18px;box-shadow:0 6px 18px rgba(217,45,32,.22)}
.btn.danger.danger-solid .ico{width:18px;height:18px}

/* Leere Felder behalten ihr Symbol und bekommen ein kleines Plus an die
   Ecke der Kachel. Vorher stand dort ein Plus STATT des Symbols - bei
   fuenf leeren Feldern fuenf gleiche Zeichen untereinander, an denen man
   nicht mehr erkannte, was ueberhaupt fehlt. */
.value-ico{position:relative}
.value-ico.is-add{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.value-ico.is-add::after{
  content:"+";position:absolute;right:-4px;bottom:-4px;
  width:18px;height:18px;border-radius:50%;
  background:var(--primary);color:#fff;
  font-size:13px;font-weight:800;line-height:16px;text-align:center;
  border:2px solid var(--surface)}

/* ============================================================
   Die eigene Karte folgt der Personenseite

   Vorher stand alles mittig untereinander - Bild, Name, eine
   Bearbeiten-Marke, Zustand, Kontaktmarken, Fachgebiete: sechs Elemente
   auf vier verschiedenen Kanten, dazwischen viel Luft. Jetzt eine Kante
   links, das Bild rechts, darunter drei runde Knoepfe.
   ============================================================ */
.my-card-body{text-align:left;padding:0 18px 18px}
.my-card-body .cp-head>.avatar.lg{margin:-42px 0 0;width:84px;height:84px;
  border:4px solid var(--surface);box-shadow:0 8px 24px rgba(16,24,40,.18)}
.my-card-body .cp-id{padding-top:12px}
.my-card-body h2{font-size:24px;letter-spacing:-.03em;margin:0 0 3px;overflow-wrap:anywhere}
.my-link{display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:0;
  border:0;background:transparent;color:var(--primary);font-size:14px;font-weight:700;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.my-link .ico{width:15px;height:15px;flex:0 0 auto}
.my-card-body .action-circles{margin-top:14px}
.my-card-body .my-presence{margin:14px 0 0;min-height:60px;border-radius:16px;padding:10px 12px}
button.action-circle{border:0;background:transparent;padding:0;cursor:pointer}

/* ============================================================
   Verbinden-Sheet im Kartensystem

   Der Kamera-Umschalter war eine gestrichelte 13px-Zeile - das lauteste
   Feature des Sheets im leisesten Gewand. Jetzt eine Zeile wie jede
   andere: Karte, Symbolkachel, lesbare Schrift. Die Modus-Wahl sieht aus
   wie jeder andere Segment-Schalter der App.
   ============================================================ */
.mode-chips{background:var(--soft);border-radius:14px;padding:4px;gap:4px}
.mode-chips .chip{border:0;background:transparent;border-radius:11px;min-height:40px;font-size:13px;color:var(--muted)}
.mode-chips .chip.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(16,24,40,.10)}
.scan-toggle{
  border:1px solid var(--line);border-radius:16px;background:var(--surface);
  min-height:60px;padding:11px 14px;font-size:15px;font-weight:700;color:var(--text)}
.scan-toggle>.ico:first-child{
  width:36px;height:36px;padding:8px;border-radius:11px;background:var(--soft);color:var(--primary);box-sizing:border-box}

/* Anleitungen und Plus-Liste standen mit blossem Rahmen auf dem grauen
   Sheet - jetzt tragen sie dieselbe weisse Flaeche wie alle Karten. */
.guide{background:var(--surface)}
.plus-list{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px}

@media (prefers-color-scheme: dark){
  .mode-chips .chip.active{background:#232a3a}
  .scan-toggle{background:var(--surface);border-color:var(--line);color:var(--text)}
  .guide,.plus-list{background:var(--surface);border-color:var(--line)}
}


/* ---------- Trefferflaechen ----------
   Zwoelf antippbare Bauteile lagen unter 44px, zwei davon loeschen Daten:
   das Kreuz an einem Spezialgebiet (18px) und das Kreuz an Ort, Moment und
   Termin (rund 22px). Die Absicherung gab es bereits, sie deckte aber nur
   drei Selektoren ab.

   Zwei Techniken, je nach Lage. Wo Vergroessern nichts verschiebt, genuegt
   min-height - es schlaegt ein kleineres width/height ohnehin, weil der
   Browser den Wert damit begrenzt. Wo ein groesserer Kasten das Layout
   sprengen wuerde - ein Kreuz IN einem Chip -, waechst nur die Flaeche,
   nicht das Bild: ein ::after ohne eigenes Aussehen, ueber die Raender
   hinaus. Der Nutzer sieht dasselbe und trifft trotzdem.

   Steht bewusst in der letzten Datei: .mode-chips .chip setzt sein
   min-height weiter oben in genau dieser Datei. */
.icon-btn.mini,.fav-btn,.search-go,.voice-play,.cat-btn,.banner-edit,
.filter-option,.circle-filter .chip,.date-chips .chip,.expiry-options .chip,
.mode-chips .chip,button.chip,label.chip,
.people-segment button,.mode-tabs button,.group-switch button,.sort-switch button{
  min-height:44px}
.icon-btn.mini,.fav-btn,.search-go,.voice-play,.banner-edit{min-width:44px}

/* Das Kreuz an Ort, Moment und Termin steht allein am Zeilenende - dort
   stoert ein grosses Ziel niemanden. */
.value-remove{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* Das Kreuz IN einem Chip bekommt bewusst 24 und nicht 44 Pixel. Chips
   stehen dicht nebeneinander; eine unsichtbar auf 44px vergroesserte
   Trefferflaeche wuerde die des Nachbarn ueberlappen, und dann loescht man
   das falsche Spezialgebiet. 24px ist das Mindestmass aus WCAG 2.2 und
   hier das groesste, das noch eindeutig bleibt. */
.chip.picked button{width:24px;height:24px}