/* Marke, Kopfzeile, Listenkopf und die Personenseite. Teil 08 der Gestaltung - die Reihenfolge steht in index.html
   und ist bindend: spaetere Regeln ueberschreiben fruehere. *//* ===== V38: Marke, Top-Sheets, interaktiver Modus und Profil-Hero ===== */
.rail-brand{display:flex;align-items:center;gap:9px}
.rail-brand img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(23,28,61,.14))}
.landing-brand{display:flex;align-items:center;justify-content:center;gap:10px;font-size:18px;font-weight:900}
.landing-brand img{width:48px;height:48px;object-fit:contain}
.landing-preferences{position:absolute;top:max(14px,env(safe-area-inset-top));right:16px;display:flex;gap:7px}
.landing-preferences button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:7px 10px;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;min-height:44px}
.landing-preferences .ico{width:14px;height:14px}
.language-mark{display:inline-grid;place-items:center;min-width:25px;height:22px;padding:0 4px;border-radius:7px;background:var(--soft);font-size:10px;font-weight:900;letter-spacing:.04em}

.current-mode-card{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:15px;background:linear-gradient(135deg,#eefcf7,#f3efff);border:1px solid #d9eee7;margin-bottom:12px}
.current-mode-card .status-ico{width:34px;height:34px;border-radius:11px;background:#fff;display:grid;place-items:center;color:#5d43d6}
.current-mode-card .status-ico .ico{width:18px;height:18px}
.current-mode-card strong,.current-mode-card .muted{display:block}
.route-mode-entry{width:100%;margin-top:14px;padding:13px;border:1px solid #d8d1ff;background:linear-gradient(135deg,#fbfaff,#f1fffb);border-radius:17px;display:flex;align-items:center;gap:11px;text-align:left;color:var(--text)}
.route-mode-entry strong,.route-mode-entry span span{display:block}
.route-mode-entry .grow>span{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35}
.route-mode-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#6d4aff,#11bfa2);color:#fff;flex:0 0 auto}
.route-mode-icon .ico{width:22px;height:22px}
.route-mode-hero{text-align:center;padding:12px 4px 4px}
.route-mode-hero>.route-mode-icon{margin:0 auto 12px;width:58px;height:58px;border-radius:19px}
.route-mode-hero h3{font-size:22px;margin:0 0 7px}
.route-mode-hero p{font-size:13px;color:var(--muted);line-height:1.5;margin:0 auto 18px;max-width:42ch}
.route-mode-hero .plus-badge{background:rgba(255,255,255,.22);color:inherit}

.contact-profile-hero{margin:0 -16px 10px;overflow:hidden;background:var(--surface);border-bottom:1px solid var(--line)}
.contact-profile-cover{height:110px}
.contact-profile-body{position:relative;text-align:center;padding:0 18px 20px}
.contact-profile-body>.avatar.lg{display:block;position:relative;width:88px;height:88px;margin:-46px auto 10px;border:4px solid var(--surface);box-shadow:0 8px 24px rgba(16,24,40,.18);font-size:27px}
.contact-profile-body h2{font-size:24px;letter-spacing:-.03em;margin:0 0 4px}
.contact-profile-body .person-headline{font-weight:600;color:var(--muted)}
.contact-profile-body>.pill{margin-top:10px}
.contact-profile-body .contact-chips{justify-content:center;margin-top:13px}
.contact-favorite{position:absolute;right:14px;top:10px}
.contact-favorite:empty{display:none}
@media(min-width:900px){.contact-profile-hero{margin:0 -18px 12px}.contact-profile-cover{height:132px}}

.sticker-safe-note{display:flex;align-items:flex-start;justify-content:center;gap:7px;margin:9px auto 14px;max-width:390px;color:#34735e;font-size:11.5px;line-height:1.4;text-align:left}
.sticker-safe-note .ico{width:16px;height:16px;flex:0 0 auto}
.choice-grid{display:grid;gap:9px}.choice-grid.two{grid-template-columns:repeat(2,1fr)}.choice-grid.three{grid-template-columns:repeat(3,1fr)}
.choice-tile{min-height:76px;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.choice-tile.active{border-color:var(--primary);background:#f4f1ff;color:#5638cf;box-shadow:0 0 0 2px rgba(109,74,255,.1)}
.choice-tile .ico{width:20px;height:20px}.choice-tile strong{font-size:13px}

@media(max-width:430px){
  .current-mode-card{align-items:flex-start;flex-wrap:wrap}.current-mode-card .btn{margin-left:44px;margin-top:-5px}
  .landing-preferences button span:last-child{display:none}
}
@media (prefers-color-scheme: dark){
  .current-mode-card{background:linear-gradient(135deg,#10251e,#211b38);border-color:#25463d}
  .current-mode-card .status-ico{background:#16231f;color:#75dbc4}
  .route-mode-entry{background:linear-gradient(135deg,#171425,#10231f);border-color:#353050}
  .choice-tile.active{background:#24203a;color:#b7a8ff;border-color:#8069ec}
  .sticker-safe-note{color:#7fd8b6}
}

/* ============================================================
   Zeile und Personenseite im Rhythmus des Adressbuchs

   Die Liste war korrekt und trotzdem muehsam: ein grauer Kreis, ein
   Farbpunkt, ein Pfeil, alles klein und in derselben Farbe. Man las sie,
   statt sie zu ueberfliegen. Drei Dinge tragen den Unterschied, und sie
   stehen hier: farbige Kreise, ein Name in lesbarer Groesse, und
   Trennlinien, die erst hinter dem Bild beginnen - dadurch bildet die
   Spalte der Kreise eine durchgehende Linie fuers Auge.
   ============================================================ */
.avatar.placeholder.tinted{color:#fff;border-color:transparent;font-weight:800}

.person-row-wrap>.person-row{position:relative;gap:14px;padding:11px 4px;min-height:68px;border-bottom:0}
.person-row-wrap>.person-row .avatar{width:52px;height:52px;font-size:18px}
.person-row-wrap>.person-row .person-name{font-size:17px;font-weight:600;letter-spacing:-.01em}
.person-row-wrap+.person-row-wrap>.person-row::before{
  content:"";position:absolute;left:70px;right:0;top:0;height:1px;background:var(--hairline)}

/* Kopf der Personenseite: Name links, Bild rechts, Verben darunter. */
.contact-profile-body{text-align:left}
.cp-head{display:flex;align-items:flex-start;gap:14px}
.cp-id{flex:1;min-width:0;padding-top:12px}
.cp-head>.avatar.lg{flex:0 0 auto;width:84px;height:84px;margin-top:-42px;font-size:26px;
  border:4px solid var(--surface);box-shadow:0 8px 24px rgba(16,24,40,.18)}
.contact-profile-body h2{font-size:24px;letter-spacing:-.03em;margin:0 0 3px;overflow-wrap:anywhere}
.cp-line{font-size:15px;margin-top:3px}
.contact-profile-body .pill{margin-top:9px}

.action-circles{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.action-circle{display:flex;flex-direction:column;align-items:center;gap:7px;width:66px;
  font-size:11px;font-weight:700;color:var(--muted)}
.ac-ring{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:#f0edff;color:#5638cf;font-size:22px;transition:transform .12s}
.action-circle:active .ac-ring{transform:scale(.93)}
.action-circle.wa .ac-ring{background:#e6f7ee;color:#0a7b45}
.action-circle.ig .ac-ring{background:#fdeef4;color:#a83267}
.ac-label{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (prefers-color-scheme: dark){
  .ac-ring{background:#231d3d;color:#b7a8ff}
  .action-circle.wa .ac-ring{background:#102a1e;color:#5fd39a}
  .action-circle.ig .ac-ring{background:#2b1622;color:#f09cc0}
  .cp-head>.avatar.lg{border-color:#151a26}
}

/* ============================================================
   Kopfzeile, Listenkopf und der Rueckweg aus einem Profil
   ============================================================ *//* Die vier Einstiege stehen rechtsbuendig. Bricht die Zeile auf schmalen
   Geraeten um, rutschen sie nach unten - und stehen auch dort rechts,
   statt am linken Rand neu anzufangen. */
.screen-head{flex-wrap:wrap}
.top-actions{margin-left:auto;flex:0 0 auto;justify-content:flex-end}

/* Ueber der Liste: Kategorie links, Sortierung rechts. Der Schalter darf
   nicht mehr schrumpfen - "A–Z" wurde dabei angeschnitten und sass eine
   Haaresbreite tiefer als der Stern daneben. */
.list-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:20px 2px 10px}
.list-head .sort-switch{flex:0 0 auto;min-width:0}
.list-head .sort-switch button{padding:9px 12px;font-size:13px;white-space:nowrap}

/* Ein gescanntes Profil war eine Sackgasse: der Code steht in der Adresse,
   und ohne ihn zu loeschen kam man nicht zurueck. */
.public-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.public-brand{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:18px;color:var(--text)}
.public-exit{border:1px solid var(--line);background:var(--surface);color:var(--text);
  border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700}

/* Der Stern sass rechts oben im Kopf - genau dort, wo jetzt das Bild
   steht. Er wandert auf die andere Seite in den Farbstreifen und bekommt
   dort eine eigene Flaeche, damit er auf jedem Banner lesbar bleibt. */
.contact-profile-body>.contact-favorite{left:16px;right:auto;top:-52px}
.contact-profile-body>.contact-favorite .fav-btn{background:var(--surface);box-shadow:0 2px 10px rgba(16,24,40,.16)}

/* ============================================================
   Listenkopf: ein Wort links, drei Schalter rechts

   Zugeklappt steht in der Auswahl nur "Alle" - die Zahlen sieht man beim
   Aufklappen. Vorher stand "Alle Kategorien (371)" im Knopf und schob die
   Sortierung in die naechste Zeile. Aus denselben zwei Zentimetern sind
   "Nähe" und "Neu" zu Symbolen geworden: der Nadel und der Uhr sieht man
   an, wonach sie sortieren.
   ============================================================ */
.list-head .sort-switch{margin-left:auto;flex:0 0 auto}
.list-head .sort-switch button{padding:9px 13px;font-size:13px;white-space:nowrap}
.list-head .sort-switch .ico{width:17px;height:17px}

.cat-picker{position:relative;min-width:0}
.cat-btn{display:inline-flex;align-items:center;gap:7px;max-width:100%;height:42px;padding:0 12px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);
  font-size:15px;font-weight:700}
.cat-btn.is-set{background:var(--soft)}
.cat-btn .cat-chev{width:16px;height:16px;color:var(--muted);transform:rotate(90deg);flex:0 0 auto}
.cat-backdrop{position:fixed;inset:0;z-index:40}
.cat-menu{position:absolute;z-index:41;top:calc(100% + 6px);left:0;min-width:232px;max-height:56vh;overflow:auto;
  padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.cat-option{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:11px 12px;
  border:0;border-radius:11px;background:transparent;color:inherit;text-align:left;font-size:16px}
.cat-option.active{background:var(--soft);font-weight:700}
.cat-count{color:var(--muted);font-size:13px;font-weight:600}

/* Der Stern sitzt jetzt neben der Lupe und muss dort zeigen, dass er an ist. */
.icon-btn.active{background:#fffaf0;border-color:#f0d79a;color:#d9a406}

/* ============================================================
   Personenseite: Felder wie im Adressbuch

   Jede Zeile bekommt ihr Symbol - Haus, Uhr, Menschen, Glocke - und die
   Gruppe steht als eigene weisse Karte. Vorher war es eine Liste aus
   Trennlinien auf dem Seitenhintergrund: gleich viel Information, aber
   nichts, worauf der Daumen zielt.
   ============================================================ */
.value-list{
  margin-top:14px;border-top:0;gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:2px 14px;
  box-shadow:0 3px 14px rgba(16,24,40,.04)}
.value-row{
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"ico label edit" "ico value edit";
  min-height:72px;padding:14px 0;column-gap:14px}
.value-row:last-child{border-bottom:0}
.value-ico{grid-area:ico;align-self:center;display:grid;place-items:center;
  width:38px;height:38px;border-radius:12px;background:var(--soft);color:var(--primary)}
.value-ico .ico{width:19px;height:19px}
.value-text{font-size:17px}
.value-empty{font-size:16px}
.add-row{grid-template-areas:"ico value edit";min-height:64px}

/* Der offene Zustand: ein Feld, das man auch mit dem Daumen trifft. */
.value-row.editing{padding:16px 0}
.value-row.editing .value-label{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--primary)}
.value-row.editing input,.value-row.editing select,.value-row.editing textarea{
  min-height:52px;font-size:17px;padding:13px 14px;border-radius:14px}

@media (prefers-color-scheme: dark){
  .icon-btn.active{background:#241d09;border-color:#5a4a16;color:#e6b422}
  .value-list{box-shadow:none}
}

/* Eingaben im ganzen Haus so gross wie im Adressbuch: eine Flaeche, die
   der Daumen trifft, statt einer Zeile, die man anpeilt. */
.field label{font-size:13px;font-weight:700;color:var(--muted)}
.field input,.field select,.field textarea{min-height:52px;font-size:17px;padding:13px 14px;border-radius:14px}
.field textarea{min-height:104px}

/* Zwischen zwei Themenkarten liegt Luft, nicht nur eine Linie. */
.value-list+.value-list{margin-top:12px}/* Die Notiz ist ein Thema wie die anderen und traegt dieselbe Flaeche. */

/* Die Herkunftszeile ("von dir eingetragen", "von dieser Person geteilt")
   stand im selben Rasterfeld wie der Wert: zwei Texte in einer Zelle,
   also uebereinander gedruckt. Sie bekommt eine eigene Zeile darunter -
   Zeilen ohne Herkunft fallen auf Hoehe null zusammen. */
.value-row{grid-template-areas:"ico label edit" "ico value edit" "ico src edit";row-gap:2px}
.value-row .value-src{grid-area:src;align-self:start;line-height:1.35}
.add-row{grid-template-areas:"ico value edit"}

/* ============================================================
   Der offene Wert: ein Feld, kein Formularrest

   Bearbeiten sah aus wie ein Fremdkoerper in der Karte: Etikett in
   12px Grau, ein schmales Feld, zwei kleine Knoepfe rechts unten. Jetzt
   traegt der offene Zustand dieselbe Sprache wie das Adressbuch - Symbol
   und Etikett in der Akzentfarbe, ein Feld ueber die volle Breite, und
   Abbrechen/Übernehmen als zwei gleich grosse Flaechen darunter.
   ============================================================ */
.value-row.editing{gap:12px;padding:18px 2px}
.value-row.editing .value-label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--primary)}
.value-row.editing .value-ico{width:34px;height:34px;background:transparent;color:var(--primary)}
.value-row.editing select{
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b91a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px}
.value-row.editing input+input{margin-top:2px}
.value-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.value-actions .btn{min-height:50px;font-size:15px;border-radius:14px;padding:12px 14px}

/* Die Zeitraum-Marken stehen jetzt im Feed-Sheet und brauchen dort Luft. */
.window-chips{flex-wrap:wrap;overflow:visible;gap:8px;margin-top:4px}
/* Zwei gleich grosse Flaechen: Abbrechen darf nicht wie Text aussehen. */
.value-actions .btn.ghost{background:var(--soft);color:var(--text)}
.followup-field .field-note{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
/* Eine Notiz hat Absaetze - im Wertfeld bleiben sie erhalten. */
.value-text.note-text{white-space:pre-wrap}