/* Freigabe, Ich-Seite, Nachbereitung, Verbinden. Teil 05 der Gestaltung - die Reihenfolge steht in index.html
   und ist bindend: spaetere Regeln ueberschreiben fruehere. *//* ===== V14: Freigabe-Modi, QR zuerst ===== */
.mode-chips{display:flex;gap:6px;margin-bottom:8px}
.mode-chips .chip{flex:1;justify-content:center;font-size:13px;padding:9px 8px}
.mode-hint{
  font-size:12px;color:#6b7280;text-align:center;
  margin-bottom:16px;min-height:1.4em;line-height:1.4;
}

/* Der Code ist hier die Hauptsache, nicht ein Element unter vielen. */
.qr-big{
  display:grid;place-items:center;padding:20px;background:#fff;
  border:1px solid var(--line,#e4e6ee);border-radius:20px;margin-bottom:14px;
}
.qr-big img,.qr-big canvas{display:block;width:100%;max-width:230px;height:auto}

.scan-toggle{
  display:flex;align-items:center;gap:9px;width:100%;margin-top:14px;
  padding:13px 14px;border-radius:14px;border:1px dashed var(--line-strong,#d3d7e0);
  background:transparent;color:#6b7280;font-size:13px;font-weight:600;
  text-align:left;cursor:pointer;
}
.scan-toggle>span:not(.chev){flex:1}
.scan-toggle .ico{width:16px;height:16px}
.scan-toggle .chev{opacity:.5;display:flex}
.scan-toggle[aria-expanded="true"] .chev{transform:rotate(90deg)}
.connect-sheet .scan-frame{margin-top:12px}

@media (prefers-color-scheme: dark){
  .qr-big{background:#fff;border-color:#252b3a}   /* QR braucht weissen Grund */
.scan-toggle{border-color:#2c3446;color:#8b96a8}
}

/* ===== V15: Ich in drei Zonen, Banner, Nachbereitung ===== *//* Zone 1: die Karte, die andere sehen. Der Banner ist Teil davon und
   direkt antippbar - kein Umweg über ein Formular. */
.my-card{padding:0;overflow:hidden}
.my-banner{
  display:block;width:100%;height:96px;border:0;padding:0;cursor:pointer;
  position:relative;
}
.banner-edit{
  position:absolute;right:12px;top:12px;width:32px;height:32px;
  border-radius:50%;background:rgba(255,255,255,.9);color:#0b0f1a;
  display:grid;place-items:center;
}
.banner-edit .ico{width:15px;height:15px}
.my-card-body{padding:0 18px 20px;text-align:center}
.my-card-body .avatar.lg{margin:-42px auto 12px;border:4px solid #fff;box-shadow:0 6px 20px rgba(16,24,40,.14)}
.my-card-body .contact-chips{justify-content:center;margin-top:14px}
.my-card-body .tag-row{margin-top:12px}

/* Bannerauswahl */
.banner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px}
.banner-option{
  border:2px solid transparent;background:transparent;border-radius:14px;
  padding:4px;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:center;
  font-size:12px;color:#6b7280;
}
.banner-option.active{border-color:#0b0f1a}
.banner-swatch{display:block;width:100%;height:48px;border-radius:10px}

/* Rückblick ist jetzt der Einstieg in die Nachbereitung */
.recap-open{border:0;background:transparent;text-align:left;cursor:pointer;padding:0}
.recap-people{
  display:flex;gap:6px;align-items:center;width:100%;
  border:0;background:transparent;padding:12px 0 0;cursor:pointer;
}

/* Kontaktdaten auf dem öffentlichen Profil - sie sind der Grund, warum
   jemand die Seite überhaupt offen hat. */
.qr-contacts{margin-top:16px}
.qr-contacts .contact-chips{justify-content:center}

@media (prefers-color-scheme: dark){
  .my-card-body .avatar.lg{border-color:#151f1d}
  .banner-option.active{border-color:#5fbfac}
  .banner-edit{background:rgba(20,26,38,.9);color:#e6e9f0}
}

/* ===== V16: Kontext beim Kennenlernen, Banner-Fix ===== *//* Banner-Fix auf der Ich-Seite.
   .avatar hat kein display. Ein Profilbild ist ein <img> und damit
   inline - dort wirken margin:auto und die negative Marke anders als
   beim Platzhalter, der display:grid hat. Mit Bild sass der Avatar
   deshalb falsch, ohne Bild richtig. Hier explizit block. */
.my-card-body .avatar.lg,.qr-profile .avatar.lg{
  display:block;position:relative;z-index:1;
}
.my-banner{
  -webkit-appearance:none;appearance:none;
  border-radius:0;line-height:0;font-size:0;
}
.my-card{isolation:isolate}/* Wann und wo - das Versprechen der App, sichtbar vor dem Tippen. */

/* ===== V17: Feld-Hinweis, Inline-Ort ===== */
.field-hint{font-size:12px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.field-hint strong{color:#0b0f1a}
@media (prefers-color-scheme: dark){.field-hint strong{color:#e6e9f0}}

/* ===== V18: Nachbereitung mit Wohnort und Notiz ===== */
.recap-person{padding:14px 0;border-bottom:1px solid var(--line,#eef0f5)}
.recap-person:last-child{border-bottom:0}
.recap-person-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.recap-form{display:flex;flex-direction:column;gap:8px}
.recap-form .btn{align-self:flex-start}

/* ===== V19: Erfassung direkt auf der Kontaktseite ===== */
.capture-inline{
  margin-top:18px;padding:14px;border-radius:16px;
  background:#f7f8fa;border:1px solid var(--line,#e4e6ee);text-align:left;
}
.capture-row{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.capture-label{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:#566074;
}
.capture-label .ico{width:13px;height:13px;opacity:.65}
.capture-row input{
  border:1px solid #d9dce5;border-radius:11px;padding:10px 12px;
  font-size:16px;background:#fff;color:var(--text);width:100%;
  -webkit-appearance:none;appearance:none;
}
.capture-row input:focus{outline:0;border-color:#0b0f1a;box-shadow:0 0 0 3px rgba(11,15,26,.07)}

@media (prefers-color-scheme: dark){
  .capture-inline{background:#131a28;border-color:#252b3a}
  .capture-row input{background:#0e1420;border-color:#252b3a;color:#e6e9f0}
  .capture-row input:focus{border-color:#5fbfac;box-shadow:0 0 0 3px rgba(95,191,172,.14)}
}/* ===== V20: Export ins Adressbuch ===== */
/* ===== V21: Erfassung auf dem Verbinden-Screen ===== */
.capture-inline{
  margin-top:20px;padding:16px;border-radius:18px;
  background:#f7f8fa;border:1px solid var(--line,#e4e6ee);text-align:left;
}
.capture-inline.preview{background:transparent;border-style:dashed}
.capture-pitch{
  font-size:12.5px;color:#6b7280;line-height:1.5;
  padding-top:11px;border-top:1px solid var(--line,#e8eaf0);
}

.capture-row{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.capture-label{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:#48526a;
}
.capture-label .ico{width:14px;height:14px;opacity:.6}

/* Feld plus "Aktueller Ort" nebeneinander, nicht gestapelt. */
.capture-input-wrap{display:flex;gap:7px;align-items:center}
.capture-inline input[type=text],.capture-inline input:not([type]),.capture-inline textarea{
  flex:1;min-width:0;width:100%;
  border:1px solid #dcdfe8;border-radius:13px;padding:12px 14px;
  font-size:16px;line-height:1.35;background:#fff;color:var(--text);
  -webkit-appearance:none;appearance:none;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.capture-inline textarea{resize:vertical;min-height:60px}
.capture-inline input:focus,.capture-inline textarea:focus{
  outline:0;border-color:#0b0f1a;box-shadow:0 0 0 3px rgba(11,15,26,.08);
}
.capture-inline input::placeholder,.capture-inline textarea::placeholder{color:var(--faint)}

.here-chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  padding:11px 12px;border-radius:13px;border:1px solid #dcdfe8;
  background:#fff;font-size:12.5px;font-weight:600;color:#48526a;cursor:pointer;
  white-space:nowrap;
;max-width:100%}
.here-chip .ico{width:13px;height:13px}
.here-chip:active{transform:scale(.97)}
.here-chip[hidden]{display:none}

/* Kategorie als Chips - eine Auswahl, kein Aufklappmenü. */
.capture-chips{display:flex;flex-wrap:wrap;gap:6px}
.capture-chips .chip{
  position:relative;cursor:pointer;user-select:none;
  border:1px solid #dcdfe8;background:#fff;border-radius:999px;
  padding:8px 13px;font-size:13px;font-weight:600;color:#48526a;
}
.capture-chips .chip input{position:absolute;opacity:0;pointer-events:none}
.capture-chips .chip:has(input:checked){background:#0b0f1a;border-color:#0b0f1a;color:#fff}

@media (prefers-color-scheme: dark){
  .capture-inline{background:#131a28;border-color:#252b3a}
  .capture-pitch{border-color:#252b3a}
  .capture-inline input,.capture-inline textarea,.here-chip,.capture-chips .chip{
    background:#0e1420;border-color:#2a3243;color:#e6e9f0;
  }
  .capture-inline input:focus,.capture-inline textarea:focus{
    border-color:#5fbfac;box-shadow:0 0 0 3px rgba(95,191,172,.15);
  }
  .capture-chips .chip:has(input:checked){background:#5fbfac;border-color:#5fbfac;color:#08110f}
}

/* Die Fassungsnummer schliesst die Ich-Seite ab - leise, aber auffindbar. */
.app-version{text-align:center;font-size:12px;color:var(--faint);margin:20px 2px 4px}