/* Symbole, Erinnerungen, Rueckblick, Notizen, Start, Scanner, Stadt. Teil 02 der Gestaltung - die Reihenfolge steht in index.html
   und ist bindend: spaetere Regeln ueberschreiben fruehere. *//* ============================================================
   PeopleMap V6
   Icon-System, Erinnerungen, Recap, Notizen, Offline
   ============================================================ *//* Icons: ein Strich-Set statt Emoji. Erbt Farbe und Groesse vom Elternelement,
   laesst sich also ueberall mitfaerben - was Emoji nie konnten. */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex:0 0 auto;
     fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico.fill{fill:currentColor;stroke:none}
.nav-icon .ico{width:23px;height:23px}
.menu-icon .ico,.cleanup-icon .ico,.presence-icon .ico{width:20px;height:20px}
.presence-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
               background:rgba(255,255,255,.13);font-size:22px}
.presence-icon .ico{width:23px;height:23px}
.empty-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;
            background:#f2f3f7;color:#98a0ae;margin:0 auto 12px;font-size:0}
.empty-icon .ico{width:25px;height:25px}
.icon-btn .ico{width:19px;height:19px}
.rail-item{display:flex;align-items:center;gap:10px}
.rail-item .ico{width:18px;height:18px}
.chev .ico{width:17px;height:17px}
.chip .ico{width:14px;height:14px;margin-right:5px}
.btn .ico{width:16px;height:16px}

/* Ersetzt die ueberall wiederholten Inline-Styles an Listen-Schaltflaechen. */
.row-button{width:100%;background:transparent;border:0;text-align:left;color:inherit;font:inherit}

/* --- Follow-up-Erinnerungen --- */
.reminder-card{border-color:#ffd9b0;background:linear-gradient(135deg,#fffaf4,#fff6ec);margin-bottom:12px}
.reminder-head{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.reminder-badge{width:40px;height:40px;border-radius:13px;background:#ffe6cc;color:#b45309;
                display:grid;place-items:center;flex:0 0 auto}
.reminder-item{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid #f4ece2}
.reminder-item:last-child{border-bottom:0}
.reminder-actions{display:flex;gap:6px;margin-left:auto;flex:0 0 auto}
.reminder-actions .btn{padding:7px 9px;font-size:11px;border-radius:10px}
.reminder-since{font-size:11px;color:#9a6a2f;font-weight:800;margin-top:3px}

/* --- Event-Rueckblick --- */
.recap-card{border-color:#c9d9ff;background:linear-gradient(135deg,#f7faff,#eef4ff);margin-bottom:12px}
.recap-head{display:flex;align-items:center;gap:12px}
.recap-badge{width:44px;height:44px;border-radius:14px;background:#dbe7ff;color:#1d4ed8;
             display:grid;place-items:center;flex:0 0 auto}
.recap-count{font-size:25px;font-weight:900;line-height:1}
.recap-people{display:flex;gap:-8px;margin-top:12px;padding-left:8px}
.recap-people .avatar{margin-left:-8px;border:2px solid #fff;width:34px;height:34px;font-size:11px}
/* Der Stern steht neben dem Segment-Schalter, nicht darin: der Schalter
   waehlt eines von dreien, der Stern schaltet einen Filter an und aus. *//* Vier Symbole a 44px plus die Ueberschrift passen auf einem schmalen
   Telefon nicht in eine Zeile. Statt die Tippziele zu verkleinern - die
   waren gerade erst auf 44px gebracht - darf die Reihe umbrechen. */
.screen-head{flex-wrap:wrap}
.top-actions{flex-wrap:wrap;justify-content:flex-end}
.screen-head>.grow,.screen-head>div:first-child{min-width:min(60%,190px)}/* An der Liste steht die Sortierung neben der Zaehlzeile und darf schrumpfen. */
.list-head .sort-switch{flex:1 1 auto;min-width:0}
.list-head .sort-switch button{padding:8px 6px;font-size:12px}
/* Die Zustandszeile in der eigenen Karte. Ruhig, solange nichts los ist -
   gefaerbt, sobald man woanders ist als da, wo einen alle vermuten. Die
   beiden Toene sind die, die die App fuer "Achtung" und "Hinweis" ohnehin
   benutzt (.pill.warn und .pill.primary). */
.my-presence{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);border-radius:14px;
  padding:9px 11px;margin:12px 0 4px;color:inherit;
}
.my-presence .presence-icon{width:32px;height:32px;border-radius:9px;display:grid;
  place-items:center;background:var(--soft);color:var(--muted);flex:0 0 auto}
.my-presence .person-meta{margin-top:2px}
.my-presence.live{background:#fff6e8;border-color:#f3d9ab}
.my-presence.live .presence-icon{background:#fdeccd;color:#8a5a00}
.my-presence.weg{background:#f0edff;border-color:#ddd4ff}
.my-presence.weg .presence-icon{background:#e5deff;color:#5638cf}
.here-chip{font-weight:700}
/* Verbunden oder nicht. Der Punkt links in der Zeile zeigt die
   Beziehungsart und ist vergeben - deshalb traegt der Avatar den Ring.
   Zwei Ringe: der innere in der Flaechenfarbe schafft die Luecke. */
.is-linked .avatar{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--primary)}
/* Die Nachricht, bevor man die App waehlt - man soll sehen, was rausgeht. */
.invite-preview{
  background:var(--surface2);border:1px solid var(--hairline);border-radius:14px;
  padding:13px 14px;font-size:15px;line-height:1.45;color:var(--text);margin-bottom:14px;
}
.conn-state{display:flex;align-items:flex-start;gap:11px;margin-top:16px}
.conn-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:0 0 auto;background:var(--primary)}
.conn-dot.off{background:transparent;border:2px solid var(--field-line)}
.conn-state + .btn{margin-top:10px}
.person-more{margin-top:6px}
.person-more .value-list{margin-top:2px;border-top:0}
.recap-filter{margin-top:14px}
/* Aus dem Such-Bogen, der frueher drei style-Attribute im Markup trug. */
.search-count{margin:10px 2px 4px}
.find-note{margin-top:14px}
.find-foot{margin-top:18px;gap:8px}
.recap-more{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-left:-8px;
            background:#1d4ed8;color:#fff;border:2px solid #fff;font-size:11px;font-weight:900}

/* --- Wer kommt auch --- */
.who-else{border-color:#c6ecdd;background:linear-gradient(135deg,#f7fffb,#edfbf5)}
.who-else-badge{width:40px;height:40px;border-radius:13px;background:#d5f3e6;color:#087a51;
                display:grid;place-items:center;flex:0 0 auto}
.overlap-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #e6f4ee}
.overlap-row:last-child{border-bottom:0}
.overlap-when{font-size:11px;color:#0b7a55;font-weight:800}/* --- Notizen und Sprachnotizen --- */
.voice-row{display:flex;align-items:center;gap:10px;margin-top:10px}
/* Gefuellt in der Primaerfarbe war dieser Abspielknopf lauter als jede
   Eingabestelle im selben Sheet. Die Farbe traegt jetzt das Symbol. */
.voice-play{width:42px;height:42px;border-radius:50%;border:0;background:var(--soft);color:var(--primary);
            display:grid;place-items:center;flex:0 0 auto}
.voice-meta{font-size:12px;color:var(--muted)}
/* Der Knopf war das lauteste Bedienelement der ganzen App: Gefahr-Rot,
   Gewicht 800, volle Breite - fuer eine Aufnahme, die nichts zerstoert.
   Rot heisst hier sonst "loeschen". Jetzt traegt nur der Punkt die Farbe,
   und rot wird der Knopf erst, waehrend er wirklich aufnimmt. *//* Die Aufnahme war ein Block ueber die volle Breite mit Rahmen und Flaeche,
   waehrend jede andere Eingabestelle daneben eine schlichte Zeile war. Jetzt
   ist sie eine Zeile wie die anderen - erkennbar am Punkt, nicht an Groesse. */
.rec-btn{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;
         width:100%;text-align:left;min-height:66px;padding:12px 4px;
         border:0;border-bottom:1px solid var(--hairline,#f0f1f4);
         background:transparent;color:var(--text);border-radius:0;font-weight:600;font-size:16px}
.rec-btn:active{background:var(--surface2)}
.rec-btn .rec-dot{background:var(--danger)}
.rec-btn.recording{background:#b42318;color:#fff;border-radius:14px;padding:12px 14px}
.rec-btn.recording .rec-dot{background:#fff}
.rec-dot{width:13px;height:13px;border-radius:50%;background:currentColor;flex:0 0 auto}
.rec-btn.recording .rec-dot{animation:recpulse 1.1s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* --- Offline --- */
.offline-bar{position:fixed;left:0;right:0;top:0;z-index:130;background:#171b27;color:#fff;
             font-size:12px;font-weight:700;padding:8px 14px;display:flex;align-items:center;gap:8px;
             justify-content:center}
.offline-bar .ico{width:15px;height:15px}

/* --- QR-Profilseite: die einzige Oberflaeche, die Fremde sehen --- */
.public-shell{padding:26px 16px 40px}
.public-top{display:flex;align-items:center;justify-content:center;gap:8px;color:#475467}
.public-top .ico{width:19px;height:19px;color:var(--primary)}
.qr-profile{position:relative;padding:0 0 26px;overflow:hidden;text-align:center}
.qr-cover{height:104px;background:linear-gradient(135deg,var(--primary),var(--primary2));position:relative}
.qr-cover::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.35) 1px,transparent 0);
  background-size:19px 19px;opacity:.55}
.qr-profile .avatar.lg{margin:-46px auto 12px;border:4px solid #fff;box-shadow:0 6px 20px rgba(16,24,40,.14);
                       width:92px;height:92px;position:relative;z-index:1}
.qr-profile h1{font-size:27px;margin:0 0 3px;padding:0 20px}
.qr-profile .muted,.qr-profile .qr-headline,.qr-profile .tag-row,.qr-profile .contact-chips,.qr-profile .qr-actions-public,.qr-profile .qr-foot{padding-left:20px;padding-right:20px}
.qr-actions-public{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.qr-foot{font-size:11px;color:#98a0ae;margin-top:15px;line-height:1.5}
.qr-trust{display:inline-flex;align-items:center;gap:6px;background:#f4f2ff;color:#5638cf;
          border-radius:999px;padding:6px 11px;font-size:11px;font-weight:800;margin-top:14px}
.qr-trust .ico{width:13px;height:13px}

/* --- Reminder-Einstellungen --- */
.interval-options{display:flex;gap:7px;flex-wrap:wrap}
.interval-option{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;
                 font-size:12px;font-weight:700}
.interval-option.active{background:#171b27;color:#fff;border-color:#171b27}

@media(max-width:430px){
  .reminder-item{flex-wrap:wrap}
  .reminder-actions{margin-left:0;width:100%}
  .reminder-actions .btn{flex:1}
}/* ===== V7: Start, Scanner, Stadt-Ansicht, Veranstalter ===== *//* Startseite: zwei gleichwertige Haupthandlungen, sonst nichts Lautes. */

.trip-preview{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  cursor:pointer;border:1px solid var(--line,#e4e6ee);
}
.presence-icon.soft{background:#f2f3f7;color:#4b5567}

/* Import-Belohnung */
.import-summary{display:flex;flex-direction:column;gap:12px}
.import-stats{display:flex;gap:22px}
.import-stats>div{display:flex;flex-direction:column}
.import-stats .big{font-size:26px;font-weight:700;line-height:1.1}
.import-stats .big.muted{color:#9aa1ae}
.import-stats span:last-child{font-size:12px;color:#6b7280}

/* Aufraeum-Flow: eine Frage, ein Feld */
.cleanup-bar{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;color:#6b7280;margin-bottom:12px;
}
.cleanup-question{font-size:17px;font-weight:600;margin:14px 0 10px}
.cleanup-person{display:flex;align-items:center;gap:12px}
.cleanup-person h3{margin:0;font-size:17px}

/* Stadt-Ansicht */
.city-lead{font-size:16px;margin-bottom:14px}
.city-group{margin-bottom:16px}
.city-group-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.city-names{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.city-chip{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;
  border-radius:999px;border:1px solid var(--line,#e4e6ee);background:#fff;
  font-size:13px;cursor:pointer;
}
.city-chip:active{background:#f5f6fa}
.avatar.xs{width:22px;height:22px;font-size:9px}

/* Veranstalter */
.hosted-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line,#eef0f5)}
.hosted-row:last-child{border-bottom:0}
.event-mark{
  width:56px;height:56px;border-radius:18px;background:#0b0f1a;color:#fff;
  display:grid;place-items:center;margin:0 auto 14px;
}
.event-mark .ico{width:28px;height:28px}/* QR-Scanner */
.scan-frame{
  position:relative;border-radius:16px;overflow:hidden;background:#0b0f1a;
  aspect-ratio:1/1;max-height:52vh;margin:0 auto;
}
.scan-frame video{width:100%;height:100%;object-fit:cover;display:block}
.scan-reticle{
  position:absolute;inset:16%;border:2px solid rgba(255,255,255,.9);
  border-radius:14px;box-shadow:0 0 0 100vmax rgba(11,15,26,.35);
  pointer-events:none;
}
.qr-shell.big{padding:18px}
.center{text-align:center}

/* Login *//* Der E-Mail-Weg ist der zweite. Zugeklappt gibt es keinen Knopf, der ohne
   Eingabe deaktiviert aussieht - das Problem loest sich, indem das Feld erst
   auf Wunsch erscheint. Kein Javascript: <details> kann das. */
.login-alt{margin:14px auto 0;width:100%;max-width:340px;border-top:0;text-align:center}
.login-alt>summary{justify-content:center;font-size:13.5px;color:var(--muted);min-height:44px}
.login-alt[open]>summary{color:var(--text)}
.login-mail{margin-top:6px}
.login-mail{display:flex;flex-direction:column;gap:8px}
.login-mail input{
  padding:12px 14px;border-radius:12px;border:1px solid var(--line,#e4e6ee);
  font-size:16px;width:100%;
}
/* Die Zeile stand vorher als Versprechen da ("uebernimmt, was schon da ist")
   und liess offen, was uebernommen wird. Jetzt drei Tatsachen, keine
   Rechtsbelehrung - deshalb klein, ruhig und ohne Kasten. */
.login-note{margin:16px auto 0;font-size:12.5px;color:var(--muted);max-width:36ch;text-align:center;line-height:1.6}
.mail-mark{
  width:62px;height:62px;border-radius:20px;background:#0b0f1a;color:#fff;
  display:grid;place-items:center;margin-bottom:18px;
}
.mail-mark .ico{width:30px;height:30px}

.btn.ghost{background:transparent;border:1px solid var(--line,#e4e6ee);color:#4b5567}

@media (prefers-color-scheme: dark){
  .city-chip,.login-mail input{background:#151a26;border-color:#252b3a;color:#e6e9f0}
  .presence-icon.soft{background:#1d2331;color:#c2c9d6}
  .btn.ghost{border-color:#252b3a;color:#c2c9d6}
}