:root{
  --bg:#f5f6fa;--surface:#fff;--surface2:#f8f9fc;--text:#0f1728;--muted:#687083;
  --line:#e6e8ef;--primary:#6d4aff;--primary2:#8b5cf6;--success:#0ba66d;--danger:#d92d20;
  --shadow:0 8px 28px rgba(16,24,40,.08);--nav-h:72px;--radius:20px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,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:100vh;display:grid;place-items:center;color:var(--muted)}
.app-shell{min-height:100vh;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:42px;height:42px;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:grid;grid-template-columns:repeat(5,1fr)}.nav-item{border:0;background:transparent;color:#7b8190;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:750}.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:850;text-transform:uppercase;letter-spacing:.08em;color:#8b91a0;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:780;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:760;color:#596174;white-space:nowrap}.chip.active{background:#171b27;color:#fff;border-color:#171b27}.btn{border:0;border-radius:14px;padding:12px 15px;font-weight:820;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}
.searchbar{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:0 12px;height:48px;box-shadow:0 4px 14px rgba(16,24,40,.04)}.searchbar input{border:0;outline:0;background:transparent;width:100%;font-size:15px}.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:850;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}
.map-card{padding:0;overflow:hidden;height:330px;position:relative}.leaflet-container{height:100%;width:100%;background:#e8ebf2}.map-overlay{position:absolute;left:12px;right:12px;bottom:12px;z-index:500;display:flex;gap:8px;overflow:auto}.map-stat{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border:1px solid rgba(230,232,239,.9);border-radius:14px;padding:10px 12px;min-width:125px}.map-stat strong{display:block;font-size:18px}.map-stat span{font-size:11px;color:var(--muted)}
.presence-banner{background:linear-gradient(135deg,#111827,#252b3b);color:#fff;border:0}.presence-banner .muted{color:#c7cbd4}.presence-icon{font-size:32px}.timeline-item{display:grid;grid-template-columns:12px 1fr;gap:10px}.timeline-dot{width:10px;height:10px;border-radius:50%;background:var(--primary);margin-top:5px}.timeline-line{border-left:2px solid #e5e7eb;margin-left:4px;padding-bottom:14px}
.connect-hero{text-align:center;padding:26px 18px}.qr-shell{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;margin:16px auto}.connect-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.connect-action{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:17px;text-align:left}.connect-action .big{font-size:27px;margin-bottom:9px}.connect-action strong{display:block}.connect-action span{font-size:12px;color:var(--muted)}
.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:#9aa0ad;margin-left:auto}.profile-summary{text-align:center}.profile-summary .avatar{margin:0 auto 10px}.profile-summary h2{margin:0;font-size:22px}.profile-summary p{margin:5px 0 0;color:var(--muted);font-size:13px}
.modal-backdrop{position:fixed;inset:0;background:rgba(7,10,18,.5);z-index:90;display:flex;align-items:flex-end}.sheet{background:#fff;width:100%;max-height:86vh;overflow:auto;border-radius:24px 24px 0 0;padding:10px 16px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -14px 40px rgba(0,0,0,.16)}.sheet-handle{width:42px;height:5px;border-radius:999px;background:#d9dce3;margin:2px auto 14px}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.sheet-head h2{margin:0;font-size:22px}.close-btn{border:0;background:#f1f2f6;border-radius:50%;width:34px;height:34px}.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{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 10px;font-size:12px;font-weight:750}.filter-option.active{background:#171b27;color:white;border-color:#171b27}
.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}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px;text-align:left}.feature{background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px}.feature strong{display:block;margin:7px 0 3px}.feature span{font-size:12px;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:950;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:760;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}.sheet{max-width:560px;border-radius:24px;padding:18px;max-height:82vh}.form-grid.two{grid-template-columns:1fr 1fr}.toast{left:auto;right:28px;bottom:28px;max-width:380px}.connect-actions{grid-template-columns:repeat(4,1fr)}.map-card{height:430px}
}
@media(max-width:430px){.feature-grid{grid-template-columns:1fr}.connect-actions{grid-template-columns:1fr 1fr}.screen-title{font-size:26px}}

/* PeopleMap V3 */
.bottom-nav{grid-template-columns:repeat(3,1fr)}
.person-name-line{gap:7px}
.pill.demo{background:#fff4dd;color:#9a5b00;padding:4px 7px;font-size:9px}
.pill.subtle{background:#f2f4f7;color:#667085;padding:4px 7px;font-size:9px}
.person-contact-preview{font-size:11px;color:#565f73;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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}
.person-identity{display:flex;align-items:flex-start;gap:14px}
.person-identity .contact-chips{justify-content:flex-start}
.import-bar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.import-note{line-height:1.4;margin:0 2px 4px}.tiny{font-size:10px}
.people-search .search-submit{border:0;background:#171b27;color:white;width:36px;height:36px;border-radius:11px;font-weight:900}
.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}
.map-stat{border:1px solid rgba(230,232,239,.9);text-align:left;cursor:pointer}
.compact-connect{padding:20px 16px}
.compact-connect .qr-shell{margin:12px auto}
.qr-actions{max-width:360px;margin:0 auto}
.me-actions{margin-top:10px}
.qr-profile .contact-chips{margin:17px 0 8px}
.qr-headline{font-weight:800;margin:2px 0 5px;color:#344054}
@media(max-width:430px){
  .import-bar .btn{flex:1}
  .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}
.pill.google{background:#eef5ff;color:#2563eb;padding:4px 7px;font-size:9px}
.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-progress{text-align:center;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#667085;margin-bottom:14px}
.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}
.primary-actions{align-items:center}
.primary-actions .btn{white-space:nowrap}
.google-profile-row{width:100%;border:0;background:transparent;text-align:left}
.sharing-form .toggle-row{padding:14px 0;border-bottom:1px solid #eef0f4}
.disabled-row{opacity:.5}
.menu-row{width:100%;border:0;background:transparent;text-align:left}
.wrap{flex-wrap:wrap}
@media(max-width:520px){
  .primary-actions{display:grid;grid-template-columns:1fr 1fr}
  .primary-actions .btn:first-child{grid-column:1/-1}
}

/* PeopleMap V5 */
.people-segment{display:grid;grid-template-columns:1fr 1fr;background:#eef0f5;padding:4px;border-radius:14px;margin:8px 0 14px}
.people-segment button{border:0;background:transparent;border-radius:11px;padding:10px;font-weight:800;color:#667085;cursor:pointer}
.people-segment button.active{background:white;color:#171b27;box-shadow:0 1px 4px rgba(16,24,40,.08)}
.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}
.public-network-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 8px}
.public-network-stats div{background:#f7f6ff;border:1px solid #e3ddff;border-radius:13px;padding:10px 5px;text-align:center}
.public-network-stats strong{display:block;font-size:17px}
.public-network-stats span{display:block;font-size:9px;color:#667085;margin-top:3px}
.connector-badge{display:inline-flex;background:#171b27;color:white;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:800;margin-top:4px}
@media(max-width:420px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .leader-value{font-size:12px}
}

/* ============================================================
   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}
.connect-action .big{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;
                     background:#f2f3f7;color:#4b5567;margin-bottom:10px}
.connect-action .big .ico{width:21px;height:21px}
.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}
.map-stat .ico,.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}
.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 --- */
.note-box{background:#f8f9fc;border:1px solid #eaecf2;border-radius:14px;padding:12px 13px;font-size:13px;
          line-height:1.5;white-space:pre-wrap;color:#344054}
.voice-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.voice-play{width:42px;height:42px;border-radius:50%;border:0;background:var(--primary);color:#fff;
            display:grid;place-items:center;flex:0 0 auto}
.voice-meta{font-size:12px;color:var(--muted)}
.rec-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:1px solid #ffd0d0;
         background:#fff6f6;color:#b42318;border-radius:14px;padding:13px;font-weight:820}
.rec-btn.recording{background:#b42318;color:#fff;border-color:#b42318}
.rec-dot{width:11px;height:11px;border-radius:50%;background:currentColor}
.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){.rec-btn.recording .rec-dot{animation:none}}

/* --- Offline --- */
.offline-bar{position:fixed;left:0;right:0;top:0;z-index:130;background:#171b27;color:#fff;
             font-size:12px;font-weight:750;padding:8px 14px;display:flex;align-items:center;gap:8px;
             justify-content:center}
.offline-bar .ico{width:15px;height:15px}
.queued-note{margin-top:12px;font-size:12px;color:#9a6a2f;background:#fff8ee;border:1px solid #ffe0b8;
             border-radius:12px;padding:10px 12px}

/* --- 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 .public-network-stats,
.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:780}
.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. */
.start-hero{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 12px}
.hero-action{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:16px 14px;border-radius:16px;border:1px solid var(--line,#e4e6ee);
  background:#fff;text-align:left;cursor:pointer;
  box-shadow:0 1px 2px rgba(16,20,35,.05);
}
.hero-action .hero-ico{display:flex;margin-bottom:8px;opacity:.9}
.hero-action .hero-ico .ico{width:24px;height:24px}
.hero-action strong{font-size:15px}
.hero-action .hero-sub{font-size:12px;color:#6b7280}
.hero-action.primary{background:#0b0f1a;border-color:#0b0f1a;color:#fff}
.hero-action.primary .hero-sub{color:#aab3c5}
.hero-action:active{transform:scale(.985)}

.start-search{margin:2px 0 14px}
.start-screen .section-label{margin-top:20px}

.active-event .presence-icon{background:#0b0f1a;color:#fff}

.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:650;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 */
.scanner-sheet{max-height:92vh}
.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 */
.login-alt{display:flex;flex-direction:column;gap:10px;margin-top:18px;width:100%;max-width:320px}
.login-alt>span{font-size:12px;color:#8b93a3;text-align:center}
.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:15px;width:100%;
}
.login-note{margin-top:18px;font-size:12px;color:#8b93a3;max-width:320px;text-align:center}
.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){
  .hero-action{background:#151a26;border-color:#252b3a}
  .hero-action.primary{background:#5fbfac;border-color:#5fbfac;color:#08110f}
  .hero-action.primary .hero-sub{color:#0d2a24}
  .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}
}

/* Ortskonflikt: beide Optionen gleichwertig anbieten, keine ist "richtig". */
.conflict-card{display:flex;flex-direction:column;gap:12px}
.conflict-choice{display:flex;gap:8px;flex-wrap:wrap}
.conflict-choice .btn{flex:1 1 140px}
.field-note{font-weight:400;color:#8b93a3;font-size:11px;margin-left:6px}
@media (prefers-color-scheme: dark){ .field-note{color:#7c8697} }

/* ===== V8: ein Modus statt drei Aktionen, FAB, weniger Felder ===== */

/* Modus-Auswahl auf der Startseite */
.mode-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mode-option{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:13px 12px;border-radius:14px;border:1px solid var(--line,#e4e6ee);
  background:#fff;text-align:left;cursor:pointer;
}
.mode-option .mode-ico{display:flex;margin-bottom:6px;opacity:.85}
.mode-option .mode-ico .ico{width:20px;height:20px}
.mode-option strong{font-size:14px}
.mode-option .mode-sub{font-size:11px;color:#6b7280;line-height:1.3}
.mode-option.active{border-color:#0b0f1a;background:#0b0f1a;color:#fff}
.mode-option.active .mode-sub{color:#aab3c5}
.mode-option:active{transform:scale(.985)}

/* Segmente im Modus-Sheet */
.mode-tabs{display:flex;gap:6px;margin-bottom:16px;background:#f2f3f7;padding:4px;border-radius:12px}
.mode-tabs button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 6px;border:0;border-radius:9px;background:transparent;
  font-size:13px;font-weight:600;color:#6b7280;cursor:pointer;
}
.mode-tabs button.active{background:#fff;color:#0b0f1a;box-shadow:0 1px 2px rgba(16,20,35,.08)}
.mode-tabs .ico{width:16px;height:16px}
.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 */
.fab{
  position:fixed;right:16px;z-index:40;
  bottom:calc(var(--nav-h,68px) + 16px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:7px;
  padding:14px 18px;border:0;border-radius:999px;
  background:#0b0f1a;color:#fff;font-size:14px;font-weight:600;
  box-shadow:0 6px 20px rgba(11,15,26,.28);cursor:pointer;
}
.fab .ico{width:18px;height:18px}
.fab:active{transform:scale(.96)}
@media (min-width:900px){ .fab{bottom:24px;right:24px} }

/* Import als Liste von Quellen, nicht als Knopfleiste */
.import-sources{display:flex;flex-direction:column}
.import-sources .menu-row{width:100%}

@media (prefers-color-scheme: dark){
  .mode-option{background:#151a26;border-color:#252b3a}
  .mode-option.active{background:#5fbfac;border-color:#5fbfac;color:#08110f}
  .mode-option.active .mode-sub{color:#0d2a24}
  .mode-tabs{background:#151a26}
  .mode-tabs button.active{background:#232a3a;color:#e6e9f0}
  .fab{background:#5fbfac;color:#08110f;box-shadow:0 6px 20px rgba(0,0,0,.45)}
  .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 */
.place-ask{display:flex;flex-direction:column;gap:4px}

/* 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-half{padding:4px 0 16px;border-bottom:1px solid var(--line,#eef0f5)}
.connect-half:last-child{border-bottom:0;padding-bottom:4px}
.half-label{
  font-family:ui-monospace,Consolas,monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#9aa1ae;margin-bottom:10px;
}
.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:500}
.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 ===== */

/* Gleiche Form wie .people-segment, nur kleiner - es ist ein Filter,
   keine Navigation, und soll sich auch so anfühlen. */
.group-switch{
  display:flex;gap:4px;background:#f2f3f7;padding:3px;border-radius:11px;
  margin:16px 0 10px;
}
.group-switch button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 6px;border:0;border-radius:9px;background:transparent;
  font-size:13px;font-weight:600;color:#6b7280;cursor:pointer;
}
.group-switch button.active{background:#fff;color:#0b0f1a;box-shadow:0 1px 2px rgba(16,20,35,.08)}
.group-switch .ico{width:15px;height:15px}

.menu-row .relation-dot{margin-right:11px;flex:0 0 auto}

/* Orte ergänzen: pro Event ein Block, nicht pro Person */
.place-group{padding:14px 0;border-bottom:1px solid var(--line,#eef0f5)}
.place-group:last-child{border-bottom:0}
.place-group-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.place-group-head .person-meta{white-space:normal;overflow-wrap:anywhere}

@media (prefers-color-scheme: dark){
  .group-switch{background:#151a26}
  .group-switch button.active{background:#232a3a;color:#e6e9f0}
}

/* ===== 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:15px;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 */
.link-row{display:flex;align-items:center;gap:8px;padding:8px 10px}
.link-copy{
  display:flex;align-items:center;gap:11px;border:0;background:transparent;
  text-align:left;cursor:pointer;padding:6px 2px;min-width:0;
}
.link-copy strong{display:block;font-size:14px;overflow-wrap:anywhere}
.link-copy .person-meta{white-space:normal}
.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}
}

/* ===== 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-name{border:0;background:transparent;cursor:pointer;padding:0;width:100%}
.my-name h2{margin:0;font-size:21px}
.my-identity{font-size:14px;color:#6b7280;margin-top:3px}
.my-edit{
  display:inline-flex;align-items:center;gap:5px;margin-top:9px;
  font-size:12px;color:#6b7280;
}
.my-edit .ico{width:12px;height:12px}
.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. */
.meet-hint{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;padding:10px 14px;border-radius:12px;
  background:#f2f3f7;font-size:13px;color:#4b5567;text-align:left;
}
.meet-hint strong{color:#0b0f1a;font-weight:650}
.meet-hint .meet-ico,.meet-hint .ico{flex:0 0 auto}
.meet-hint .ico{width:15px;height:15px;opacity:.7}
.meet-hint.compact{margin-top:0;justify-content:flex-start;font-size:12px}

@media (prefers-color-scheme: dark){
  .meet-hint{background:#1d2331;color:#c2c9d6}
  .meet-hint strong{color:#e6e9f0}
}

/* ===== V17: Feld-Hinweis, Inline-Ort ===== */
.field-hint{font-size:12px;color:#8b93a3;margin-top:2px;overflow-wrap:anywhere}
.field-hint strong{color:#0b0f1a}
.inline-place{display:flex;gap:8px;margin-top:12px;align-items:center}
.inline-place input{flex:1;min-width:0}
.inline-place .btn{flex:0 0 auto}
@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-when{
  display:flex;align-items:center;gap:8px;font-size:13px;color:#4b5567;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line,#e8eaf0);
}
.capture-when strong{color:#0b0f1a}
.capture-when .ico{width:15px;height:15px;opacity:.7;flex:0 0 auto}
.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:650;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:15px;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)}
.capture-note-line{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:#6b7280;margin:-4px 0 11px;
}
.capture-note-line .ico{width:13px;height:13px;flex:0 0 auto}
.capture-note-line.warn{color:#a85f25}
.capture-check{
  display:flex;align-items:flex-start;gap:10px;
  padding-top:11px;border-top:1px solid var(--line,#e8eaf0);cursor:pointer;
}
.capture-check input{
  width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:#0b0f1a;
}
.capture-check span{font-size:13px;line-height:1.45}

@media (prefers-color-scheme: dark){
  .capture-inline{background:#131a28;border-color:#252b3a}
  .capture-when{color:#b0bcb8;border-color:#252b3a}
  .capture-when strong{color:#e6e9f0}
  .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)}
  .capture-check{border-color:#252b3a}
  .capture-check input{accent-color:#5fbfac}
}
/* ===== V20: Export ins Adressbuch ===== */
.export-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:18px;padding-top:14px;
  border-top:1px solid var(--line,#eef0f5);
}
.export-label{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:650;color:#566074;
}
.export-label .ico{width:14px;height:14px;opacity:.65}
.export-row .row{gap:8px}