/* Farben, Schrift, Raster und die Grundformen. Teil 01 der Gestaltung - die Reihenfolge steht in index.html
   und ist bindend: spaetere Regeln ueberschreiben fruehere. */
:root{
  --bg:#f5f6fa;--surface:#fff;--surface2:#f8f9fc;--text:#0f1728;--muted:#5f6878;
  --line:#e6e8ef;--primary:#6d4aff;--primary2:#8b5cf6;--success:#0ba66d;--danger:#d92d20;
  --shadow:0 8px 28px rgba(16,24,40,.08);--nav-h:72px;--radius:20px;
  /* Der Ton fuer ausgewaehlte Zustaende: hell fast schwarz, dunkel teal.
     Frueher stand beides als feste Farbe im Regelwerk verstreut - und weil
     nur die Haelfte der Regeln einen Dunkel-Zweig hatte, war der Dunkelmodus
     ein helles Layout mit dunklen Flecken darin. */
  --ink:#0b0f1a;--on-ink:#fff;
  --soft:#f2f3f7;      /* Fuellung fuer Icon-Kacheln, Segmente, Chips */
  --field:#fff;--field-line:#d9dce5;
  --hairline:#f0f1f4;  /* Trennlinien innerhalb einer Karte */
  /* --faint traegt Herkunftsangaben und Fussnoten. Der alte Wert #6f7788
     stand hier mit dem Vermerk "AA auf beiden Gruenden" - nachgerechnet
     waren es 4,16:1 auf --bg und 4,06:1 auf --soft, also unter den
     verlangten 4,5:1. Der neue Wert kommt auf 5,41 / 5,01 / 4,88. */
  --faint:#636a7b;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.hidden{display:none!important}.boot{min-height:100dvh;display:grid;place-items:center;color:var(--muted)}
.app-shell{min-height:100dvh;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}.desktop-rail{display:none}.screen{max-width:820px;margin:0 auto;padding:18px 16px 28px}.screen-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.screen-title{font-size:28px;font-weight:900;letter-spacing:-.045em;margin:0}.screen-sub{font-size:13px;color:var(--muted);margin-top:3px}.top-actions{display:flex;gap:8px;align-items:center}.icon-btn{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:19px;box-shadow:0 3px 12px rgba(16,24,40,.04)}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding:7px 8px env(safe-area-inset-bottom);background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line);display:flex}.nav-item{flex:1;border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:700}.nav-icon{font-size:21px;line-height:1}.nav-item.active{color:var(--primary)}.nav-connect .nav-icon{width:48px;height:48px;border-radius:17px;margin-top:-22px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;display:grid;place-items:center;font-size:28px;box-shadow:0 8px 22px rgba(109,74,255,.3)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.grow{flex:1;min-width:0}.muted{color:var(--muted)}.small{font-size:12px}.section-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin:22px 2px 9px}.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 10px;background:#f1f2f6;font-size:12px;font-weight:700;white-space:nowrap}.pill.primary{background:#f0edff;color:#5638cf}.pill.success{background:#ebfbf4;color:#087a51}.pill.warn{background:#fff6e8;color:#ae5c00}.pill.dark{background:#171b27;color:#fff}.chips{display:flex;gap:7px;overflow:auto;padding:2px 0 4px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 11px;font-size:12px;font-weight:700;color:#596174;white-space:nowrap;max-width:100%}.chip.active{background:#171b27;color:#fff;border-color:#171b27}.btn{border:0;border-radius:14px;padding:12px 15px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff}.btn.secondary{background:#f1f2f6;color:#273043}.btn.ghost{background:transparent;color:#596174}.btn.danger{background:#fff0ef;color:var(--danger)}.btn.block{width:100%}.btn.small{padding:8px 10px;font-size:12px;border-radius:11px;min-height:44px}.filter-count{min-width:22px;height:22px;border-radius:999px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:900}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#eef0f5;border:1px solid var(--line);flex:0 0 auto}.avatar.placeholder{display:grid;place-items:center;font-weight:900;color:#4b5567}.avatar.lg{width:76px;height:76px;font-size:24px}.avatar.sm{width:36px;height:36px;font-size:12px}.person-row{display:flex;align-items:center;gap:12px;padding:12px 3px;border-bottom:1px solid #f0f1f4}.person-row:last-child{border-bottom:0}.person-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.person-meta{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.relation-dot{width:9px;height:9px;border-radius:50%;background:#c6cad3}.relation-dot.close_friend{background:#ef476f}.relation-dot.friend{background:#6d4aff}.relation-dot.family{background:#10a872}.relation-dot.business{background:#2e90fa}.relation-dot.dating{background:#f79009}.relation-dot.acquaintance{background:#728096}.relation-dot.activism{background:#16a394}.relation-dot.other{background:#9a6b4f}
.map-card{padding:0;overflow:hidden;height:330px;position:relative}.leaflet-container{height:100%;width:100%;background:#e8ebf2}
.presence-banner{background:linear-gradient(135deg,#111827,#252b3b);color:#fff;border:0}.presence-banner .muted{color:#c7cbd4}.presence-icon{font-size:32px}.timeline-dot{width:10px;height:10px;border-radius:50%;background:var(--primary);margin-top:5px}.qr-shell{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;margin:16px auto}
.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:12px;font-weight:800;color:#566074}.field input,.field select,.field textarea{border:1px solid #d9dce5;border-radius:13px;padding:11px 12px;outline:0;background:#fff;color:var(--text);width:100%}.field textarea{min-height:88px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr;gap:12px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid #f0f1f4}.toggle-row:last-child{border-bottom:0}.toggle{appearance:none;width:46px;height:27px;border-radius:999px;background:#d8dbe3;position:relative;transition:.2s}.toggle:checked{background:var(--primary)}.toggle:after{content:"";position:absolute;width:21px;height:21px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.18)}.toggle:checked:after{transform:translateX(19px)}
.network-result{display:flex;gap:11px;border:1px solid var(--line);border-radius:17px;padding:13px;background:#fff}.network-result.direct{border-color:#b6ead4;background:#f9fffc}.network-result.bridge{border-color:#d9d1ff;background:#fcfbff}.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.intro-row{padding:12px 0;border-bottom:1px solid #f0f1f4}.intro-row:last-child{border-bottom:0}
.menu-row{display:flex;align-items:center;gap:13px;padding:14px 2px;border-bottom:1px solid #eef0f4}.menu-row:last-child{border-bottom:0}.menu-icon{width:37px;height:37px;border-radius:12px;background:#f2f3f7;display:grid;place-items:center}.chev{color:var(--muted);margin-left:auto}
.modal-backdrop{position:fixed;inset:0;background:rgba(7,10,18,.5);z-index:90;display:flex;align-items:flex-start;padding-top:max(8px,env(safe-area-inset-top))}.sheet{background:#fff;width:100%;max-height:calc(100dvh - max(8px,env(safe-area-inset-top)));overflow:auto;overscroll-behavior:contain;border-radius:0 0 24px 24px;padding:10px 16px calc(20px + env(safe-area-inset-bottom));box-shadow:0 16px 40px rgba(0,0,0,.18);animation:sheet-drop .2s ease-out}.sheet-handle{display:none}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;position:sticky;top:-10px;z-index:8;background:var(--surface);padding:8px 0}.sheet-head h2{margin:0;font-size:22px}.close-btn{border:0;background:#f1f2f6;border-radius:50%;width:44px;height:44px}.filter-group{margin:18px 0}.filter-group h3{font-size:13px;margin:0 0 9px}.filter-options{display:flex;gap:7px;flex-wrap:wrap}/* .filter-option war .chip unter anderem Namen: gleicher Rahmen, gleicher
   Radius, gleiche Schrift, gleicher Aktivzustand - nur 4px hoeher und mit
   fest verdrahtetem Weiss. Dieselbe Marke sah im Filter anders aus als in
   der Leiste darueber. */
.filter-option{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 11px;font-size:12px;font-weight:700;color:#596174;white-space:nowrap;max-width:100%}.filter-option.active{background:#171b27;color:#fff;border-color:#171b27}
@keyframes sheet-drop{from{transform:translateY(-18px);opacity:.65}to{transform:translateY(0);opacity:1}}
.empty-state{text-align:center;padding:32px 18px;color:var(--muted)}.empty-icon{font-size:38px;margin-bottom:8px}.notice{border:1px solid #b6ead4;background:#effcf6;color:#087a51;padding:12px 14px;border-radius:13px;font-size:13px}.notice.error{border-color:#fecaca;background:#fff1f1;color:#b42318}.toast{position:fixed;left:16px;right:16px;bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom));z-index:120;background:#111827;color:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);font-size:13px}
.public-shell{max-width:520px;margin:0 auto;padding:34px 16px}.public-card{text-align:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:var(--shadow)}.public-card h1{font-size:29px;margin:12px 0 3px}.public-top{font-weight:900;font-size:18px;margin-bottom:22px}.login-landing{max-width:720px;margin:0 auto;padding:54px 20px;text-align:center}.login-landing h1{font-size:clamp(44px,12vw,78px);letter-spacing:-.065em;line-height:.92;margin:24px 0 18px}.login-landing p{color:var(--muted);font-size:17px;line-height:1.5}.landing-lead{max-width:34ch;margin:0 auto;text-wrap:balance}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px;text-align:left}.feature{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:15px;display:flex;flex-direction:column}.feature strong{display:block;margin:8px 0 4px;font-size:14px}.feature span{font-size:12.5px;line-height:1.45;color:var(--muted)}
@media(min-width:900px){
  .app-shell{padding:0 0 0 220px}.desktop-rail{display:flex;position:fixed;left:0;top:0;bottom:0;width:220px;background:#fff;border-right:1px solid var(--line);padding:24px 14px;flex-direction:column;z-index:60}.rail-brand{font-size:20px;font-weight:900;letter-spacing:-.04em;padding:0 10px 20px}.rail-nav{display:flex;flex-direction:column;gap:5px}.rail-item{border:0;background:transparent;border-radius:13px;padding:11px 12px;text-align:left;font-weight:700;color:#697184}.rail-item.active{background:#f0edff;color:#5638cf}.rail-bottom{margin-top:auto}.bottom-nav{display:none}.screen{max-width:1020px;padding:28px 32px 50px}.screen-title{font-size:34px}.modal-backdrop{align-items:center;justify-content:center;padding:18px}.sheet{max-width:560px;border-radius:24px;padding:18px;max-height:82dvh}.form-grid.two{grid-template-columns:1fr 1fr}.toast{left:auto;right:28px;bottom:28px;max-width:380px}.map-card{height:430px}
}
@media(max-width:430px){.feature-grid{grid-template-columns:1fr}.screen-title{font-size:26px}}/* PeopleMap V3 */
.contact-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.contact-chip{display:inline-flex;align-items:center;gap:6px;background:#f4f2ff;color:#4f35bd;border:1px solid #ded8ff;border-radius:13px;padding:9px 11px;font-size:13px;font-weight:800}
.contact-chip.compact{padding:6px 8px;font-size:11px}.tiny{font-size:10px}
.network-hint{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:13px 14px;background:#f7f5ff;border:1px solid #e3ddff;border-radius:16px}
.empty-state.mini{padding:18px}
.qr-actions{max-width:360px;margin:0 auto}
.qr-profile .contact-chips{margin:17px 0 8px}
.qr-headline{font-weight:800;margin:2px 0 5px;color:#344054}
@media(max-width:430px){
  .network-hint{align-items:flex-start;flex-direction:column}
  .contact-chip span{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* PeopleMap V4 */
.google-import-card{margin-bottom:12px;background:linear-gradient(135deg,#fff,#f8faff)}
.google-mark,.google-small{display:grid;place-items:center;font-weight:900;font-family:Arial,sans-serif;color:#4285f4;background:#fff;border:1px solid #e5e7eb}
.google-mark{width:38px;height:38px;border-radius:12px;font-size:20px;flex:0 0 auto}
.google-small{font-size:15px}

.cleanup-callout{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #ffe09b;background:#fffaf0;margin-bottom:12px;cursor:pointer}
.cleanup-icon{width:42px;height:42px;border-radius:14px;background:#fff0c8;display:grid;place-items:center;font-size:20px}
.cleanup-person{display:flex;align-items:center;gap:13px;padding:14px;background:#f8f9fc;border-radius:16px;margin-bottom:14px}
.cleanup-person h3{margin:0 0 3px}
.quick-city-chips{display:flex;flex-wrap:wrap;gap:7px}
.google-profile-row{width:100%;border:0;background:transparent;text-align:left}
.disabled-row{opacity:.5}.btn:disabled{opacity:.55;cursor:default}
.menu-row{width:100%;border:0;background:transparent;text-align:left}
.wrap{flex-wrap:wrap}

/* PeopleMap V5 *//* Ein Segment-Schalter fuer alle vier Stellen. Vorher hatte jede ihre
   eigenen Zahlen - Grund #eef0f5 gegen #f2f3f7, Radius 14/12/11/10,
   Polster 3/4, Schrift 11/12/13, Gewicht 600/700/800 und zwei verschiedene
   Aktiv-Schatten. Der Kommentar an .group-switch sagte "gleiche Form wie
   .people-segment, nur kleiner" - gestimmt hat es nie. Nebenwirkung: der
   Dunkelmodus braucht keine eigenen Regeln mehr, hier stehen nur Tokens. */
.people-segment,.mode-tabs,.group-switch,.sort-switch{
  display:flex;gap:3px;background:var(--soft);padding:3px;border-radius:12px;
}
.people-segment button,.mode-tabs button,.group-switch button,.sort-switch button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;
  padding:9px 8px;border:0;border-radius:9px;background:transparent;
  font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;
}
.people-segment button.active,.mode-tabs button.active,.group-switch button.active,.sort-switch button.active{
  background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(16,20,35,.08);
}
.people-segment{margin:8px 0 14px}
.mode-tabs{margin-bottom:16px}
.group-switch{margin:16px 0 10px}
.mode-tabs .ico,.group-switch .ico{width:15px;height:15px}
.pill.coin{background:#fff6d9;color:#875900;border:1px solid #f1d273}
.network-stat-card{overflow:hidden}
.stats-heading{margin-bottom:14px}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat-cell{background:#f7f8fb;border:1px solid #edf0f4;border-radius:14px;padding:13px 8px;text-align:center}
.stat-cell strong{display:block;font-size:21px;line-height:1.1;color:#171b27}
.stat-cell span{display:block;font-size:10px;color:#667085;margin-top:5px}
.stats-foot{font-size:11px;margin:12px 2px 9px;color:#475467}
/* Die Leaderboard-Styles sind mit der Oberflaeche entfallen. */
.intro-feedback{border-color:#d9d6fe;background:#fcfbff}
.feedback-question{font-weight:800;margin:13px 0 9px}
.sharing-divider{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#667085;margin-top:12px;padding-top:14px;border-top:1px solid #e9ebf0}
/* 430, nicht 420: dazwischen lag ein Zehn-Pixel-Fenster, in dem die eine
   Anpassung griff und die andere nicht - und ein iPhone 14 Pro Max ist
   genau 430px breit. */
@media(max-width:430px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}