/* Modus, Scan-Ansicht, Startseite, Vokabular, Felder. Teil 04 der Gestaltung - die Reihenfolge steht in index.html
   und ist bindend: spaetere Regeln ueberschreiben fruehere. *//* ===== V8: ein Modus statt drei Aktionen, FAB, weniger Felder ===== *//* Modus-Auswahl auf der Startseite */

/* Segmente im Modus-Sheet */
.mode-lead{font-size:13px;color:#6b7280;margin-bottom:14px;line-height:1.5}
.mode-active{margin-bottom:10px}

/* Zwei Datumsfelder nebeneinander statt untereinander */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Selten gebrauchte Felder wegklappen, statt sie jedem zu zeigen */
.more-fields{border-top:1px solid var(--line,#eef0f5);padding-top:4px;margin-top:2px}
.more-fields>summary{
  cursor:pointer;font-size:13px;color:#6b7280;padding:9px 2px;
  list-style:none;display:flex;align-items:center;gap:6px;
}
.more-fields>summary::-webkit-details-marker{display:none}
.more-fields>summary::before{content:"+";font-size:15px;line-height:1;width:14px}
.more-fields[open]>summary::before{content:"–"}
.more-fields[open]>summary{color:#0b0f1a}/* Schwebender Hauptknopf: eine Seite, eine Hauptaktion *//* Import als Liste von Quellen, nicht als Knopfleiste */

@media (prefers-color-scheme: dark){
  .more-fields[open]>summary{color:#e6e9f0}
}

/* ===== V9: Scan-Ansicht, Username-Profil, Ort, Karte, Nachverfolgung ===== *//* Sharing-Sheet lief seitlich aus dem Bild: .toggle-row ist flex, das
   Textelement hatte kein min-width:0, und .person-meta steht auf nowrap.
   Eine lange Unterzeile (die ganze Spezialgebiete-Liste) zwingt die Zeile
   damit auf ihre volle Breite. Beides hier gerade ziehen. */
.toggle-row>div:first-child{min-width:0;flex:1 1 auto}
.toggle-row .toggle{flex:0 0 auto}
.toggle-row .person-meta{white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip;line-height:1.45}
.sheet{overflow-x:hidden}
.sheet .form-grid{min-width:0}
.sheet input,.sheet select,.sheet textarea{max-width:100%}

/* Entschlackte Scan-/Username-Ansicht */
.qr-profile.compact{padding-top:22px}
.qr-identity{font-size:14px;color:#6b7280;margin-top:4px}
.mutual-strip{
  display:inline-flex;align-items:center;gap:8px;margin:14px auto 0;
  padding:6px 12px 6px 6px;border-radius:999px;background:#f2f3f7;font-size:13px;
}
.mutual-faces{display:flex}
.mutual-faces .avatar{margin-right:-8px;border:2px solid #fff}
.mutual-faces .avatar:last-child{margin-right:0}
.qr-actions-public{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.qr-trust{margin-top:12px;font-size:12px;color:#6b7280;display:flex;align-items:center;justify-content:center;gap:6px}
.qr-trust .ico{width:14px;height:14px}
.below-fold{margin-top:22px;padding-top:16px;border-top:1px solid var(--line,#eef0f5)}
.qr-foot{margin-top:14px;font-size:11px;color:#9aa1ae;line-height:1.5}/* Ort der Begegnung */

/* Eigener Standort auf der Karte */
.me-dot span{
  display:block;width:14px;height:14px;border-radius:50%;
  background:#2e90fa;border:3px solid #fff;box-shadow:0 0 0 4px rgba(46,144,250,.25);
}
.nearest-line{
  display:flex;align-items:center;gap:6px;justify-content:center;
  margin:10px 0 2px;font-size:12px;color:#6b7280;
}
.nearest-line .ico{width:14px;height:14px}
.locate-btn{margin-top:10px}

/* Nachverfolgung: fuenf Stufen als Radio-Chips */
.followup-field{gap:8px}
.followup-chips{display:flex;flex-wrap:wrap;gap:7px}
.followup-chips .chip{
  position:relative;cursor:pointer;user-select:none;
  border:1px solid var(--line,#e4e6ee);background:#fff;border-radius:999px;
  padding:8px 13px;font-size:13px;font-weight:600;color:#4b5567;
}
.followup-chips .chip input{position:absolute;opacity:0;pointer-events:none}
.followup-chips .chip:has(input:checked){background:#0b0f1a;border-color:#0b0f1a;color:#fff}
.followup-chips .chip.active{background:#0b0f1a;border-color:#0b0f1a;color:#fff}

@media (prefers-color-scheme: dark){
  .mutual-strip{background:#1d2331}
  .mutual-faces .avatar{border-color:#151a26}
  .followup-chips .chip{background:#151a26;border-color:#252b3a;color:#c2c9d6}
  .followup-chips .chip:has(input:checked),.followup-chips .chip.active{background:#5fbfac;border-color:#5fbfac;color:#08110f}
  .me-dot span{border-color:#0e1614}
}

/* ===== V10: Startseite "Fläche und Griff" ===== */
.start-focus .screen-head{align-items:flex-start}
.start-focus .screen-title{margin-bottom:8px}

/* Der Modus als Zeile: liest sich als Zustand, nicht als Knopf. */
.status-line{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px 7px 9px;border-radius:999px;
  border:1px solid var(--line,#e4e6ee);background:#fff;
  font-size:13px;font-weight:600;color:#6b7280;cursor:pointer;max-width:100%;
}
.status-line.set{border-color:#0b0f1a;background:#0b0f1a;color:#fff}
.status-ico{display:flex}
.status-ico .ico{width:15px;height:15px}
.status-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.status-chev{display:flex;opacity:.5}
.status-chev .ico{width:14px;height:14px}
.status-line:active{transform:scale(.98)}

/* Scannen und Mein QR als zwei Hälften einer Begegnung */
.connect-sheet{max-height:92vh}
.connect-sheet .scan-frame{aspect-ratio:4/3;max-height:34vh}
.connect-sheet .qr-shell{padding:12px}
.connect-sheet .qr-actions{margin-top:10px}

/* Umkreis */
.nearby-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;border:1px solid var(--line,#e4e6ee)}
.nearby-hint{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:13px 14px;border-radius:14px;border:1px dashed var(--line-strong,#d3d7e0);
  background:transparent;color:#6b7280;font-size:13px;text-align:left;cursor:pointer;
}
.nearby-hint .ico{width:16px;height:16px;flex:0 0 auto}

/* Ruhiger Zustand statt leerer Seite */
.quiet-state{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:52px 20px;text-align:center;color:#6b7280;
}
.quiet-icon{
  width:46px;height:46px;border-radius:50%;background:#eef4f1;color:#356e4e;
  display:grid;place-items:center;margin-bottom:6px;
}
.quiet-icon .ico{width:22px;height:22px}
.quiet-state strong{color:#3a4a47;font-size:15px}
.quiet-state span{font-size:13px;max-width:24ch}

@media (prefers-color-scheme: dark){
  .status-line{background:#151a26;border-color:#252b3a;color:#c2c9d6}
  .status-line.set{background:#5fbfac;border-color:#5fbfac;color:#08110f}
  .nearby-card{background:#151a26;border-color:#252b3a}
  .nearby-hint{border-color:#2c3446;color:#8b96a8}
  .quiet-icon{background:#15271d;color:#7fc49b}
  .quiet-state strong{color:#b0bcb8}
}

/* ===== V11: Vokabular-Picker für Spezialgebiete ===== */
.expertise-field{gap:8px}
.expertise-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:26px;align-items:center}
.chip.picked{
  display:inline-flex;align-items:center;gap:5px;padding:6px 7px 6px 12px;
  background:#0b0f1a;border-color:#0b0f1a;color:#fff;font-size:13px;
}
.chip.picked button{
  border:0;background:rgba(255,255,255,.18);color:#fff;border-radius:50%;
  width:18px;height:18px;display:grid;place-items:center;cursor:pointer;padding:0;
}
.chip.picked button .ico{width:11px;height:11px}
.expertise-suggest{display:flex;flex-wrap:wrap;gap:6px}
.expertise-suggest:not(:empty){margin-top:2px}
.expertise-suggest .chip{font-weight:400}
.expertise-suggest .usage{
  margin-left:6px;font-size:10px;color:#9aa1ae;
  font-variant-numeric:tabular-nums;
}

@media (prefers-color-scheme: dark){
  .chip.picked{background:#5fbfac;border-color:#5fbfac;color:#08110f}
  .chip.picked button{background:rgba(0,0,0,.2);color:#08110f}
  .expertise-suggest .usage{color:#7e8c88}
}

/* ===== V12: Orte/Gruppen-Umschalter, Ort nach Event ===== */
.menu-row .relation-dot{margin-right:11px;flex:0 0 auto}/* Orte ergänzen: pro Event ein Block, nicht pro Person */

/* ===== V13: Feldstile, Suchzeile, QR auf der Ich-Seite ===== *//* Das bisherige CSS traf nur `.field input`. Jedes Feld, das ohne
   .field-Huelle eingebaut wurde - Suche, Aufraeum-Flow, Orte ergaenzen,
   Scanner-Link, Spezialgebiete - fiel damit auf den Browser-Standard
   zurueck und sah eckig aus. Hier greift es unabhaengig von der Huelle. */
.sheet input:not([type=checkbox]):not([type=radio]):not([type=file]),.sheet select,.sheet textarea{
  border:1px solid #d9dce5;border-radius:13px;padding:11px 13px;
  font-size:16px;outline:0;background:#fff;color:var(--text);width:100%;
  -webkit-appearance:none;appearance:none;
}
.sheet input:focus,.sheet select:focus,.sheet textarea:focus{
  border-color:#0b0f1a;box-shadow:0 0 0 3px rgba(11,15,26,.08);
}

/* Suche: ein Feld, kein Formular-Stapel. */
.search-field{
  display:flex;align-items:center;gap:10px;
  border:1px solid #d9dce5;border-radius:16px;padding:4px 4px 4px 14px;
  background:#fff;transition:border-color .15s,box-shadow .15s;
}
.search-field:focus-within{border-color:#0b0f1a;box-shadow:0 0 0 3px rgba(11,15,26,.08)}
.search-field .search-ico{display:flex;color:#9aa1ae;flex:0 0 auto}
.search-field .search-ico .ico{width:18px;height:18px}
.search-field input{
  flex:1;min-width:0;border:0!important;background:transparent!important;
  padding:12px 0!important;font-size:16px;box-shadow:none!important;
}
.search-field input:focus{border:0!important;box-shadow:none!important}
.search-go{
  flex:0 0 auto;width:38px;height:38px;border:0;border-radius:12px;
  background:#0b0f1a;color:#fff;display:grid;place-items:center;cursor:pointer;
}
.search-go .ico{width:18px;height:18px}/* Dein Link statt QR-Block */
.qr-inline{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px}
.qr-inline .qr-shell{padding:14px}

@media (prefers-color-scheme: dark){
  .sheet input:not([type=checkbox]):not([type=radio]):not([type=file]),.sheet select,.sheet textarea,.search-field{
    background:#151a26;border-color:#252b3a;color:#e6e9f0;
  }
  .sheet input:focus,.sheet select:focus,.sheet textarea:focus,.search-field:focus-within{border-color:#5fbfac;box-shadow:0 0 0 3px rgba(95,191,172,.15)}
  .search-go{background:#5fbfac;color:#08110f}
}