/* Seite: Einstellungen (settings_page.dart) – Hauptseite im Karten-Look der App
   (Gruppen-Überschrift, Karte Radius 22, eingerückte Trennlinien, monochrome Symbole).
   Unterseiten flach wie in der App. Dazu die Druckseite des Muttizettels. */

/* Heller Seitengrund wie die App (iOS-Grouped-Grau), nur auf der Hauptseite. */
:root[data-theme="light"].is-settings-main,
:root[data-theme="light"].is-settings-main body { background: #F2F2F7; }

@media (min-width: 768px) {
  .page--settings,
  .page--settings-sub { padding-top: 12px; }
}

/* Kopfzeile mit Zurück-Knopf links */
.page-header.st-header {
  gap: 4px;
  padding-left: 8px;
}
.st-header .glass-btn .icon { width: 22px; height: 22px; }
.st-header .page-header__title { font-weight: 800; }

/* ---------- Grundgerüst ---------- */
.st-body { padding: 4px var(--gutter) 28px; }
.st-body--cards { padding: 4px 0 28px; }
.st-list-body { padding-bottom: 28px; }
.st-lead {
  padding: 4px var(--gutter) 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
.st-body:not(.st-body--cards) .st-lead { padding-left: 0; padding-right: 0; }

/* Kopf: Avatar 56, Name 22/900 */
.st-me {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px 6px;
  color: var(--text);
}
.st-me__name {
  min-width: 0;
  font-size: 22px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gruppe: Überschrift 12,5/700 in Sekundärfarbe, Abstand 28/18/20/7 */
.st-group { margin-top: 18px; }
.st-group__title {
  padding: 0 20px 7px 28px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--text-2);
}

/* Karte: Radius 22, seitlich 14, hell weiß, dunkel leicht aufgehellt, ohne Rand */
.st-card {
  margin: 0 14px;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, .055);
}
:root[data-theme="light"] .st-card { background: #FFFFFF; }
.st-card .row {
  position: relative;
  min-height: 54px;
  padding: 9px 16px;
  gap: 14px;
}
.st-card .row__icon { width: 30px; color: var(--text); }
.st-card .row__icon .icon { width: 24px; height: 24px; }
.st-card .row__title { font-size: 15.5px; font-weight: 600; }
.st-card .row__sub { font-size: 12.5px; color: var(--text-2); }
.st-card .row__end { color: var(--text-3); opacity: .7; }
.st-card .row--danger .row__icon { color: var(--danger); }
/* Trennlinie 0,6 px, links um 60 px eingerückt */
.st-card > * + *::before {
  content: "";
  position: absolute;
  top: 0;
  left: 60px;
  right: 0;
  height: .6px;
  background: var(--line);
  pointer-events: none;
}
.st-card > * { position: relative; }
.st-card .row.is-busy { opacity: .6; }

/* Enge-Freunde-Stern im Verlauf Orange → Grün */
/* Fallback-Farbe, falls der Verlauf (closeFriendsDefs) einmal fehlt */
.icon.icon--cf { fill: url(#cv-close-friends) #FFB545; }
.st-card .row__icon .icon--cf { fill: url(#cv-close-friends) #FFB545; }

/* Unterseiten ohne Kacheln (wie die App): keine Fläche, keine Linien, 16 px Rand */
.page--settings-sub .st-card {
  margin: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
:root[data-theme="light"] .page--settings-sub .st-card { background: none; }
.page--settings-sub .st-card > * + *::before { display: none; }
.page--settings-sub .st-group { margin-top: 22px; }
.page--settings-sub .st-group__title {
  padding: 0 var(--gutter) 4px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text);
}
.page--settings-sub .st-card .row { padding-left: var(--gutter); padding-right: var(--gutter); }
.page--settings-sub .st-card .row__icon { color: var(--text-2); }
.page--settings-sub .st-note-plain { padding: 0 var(--gutter); }
.page--settings-sub .st-group .form-error { margin: 10px var(--gutter) 0; }

/* Platzhalter-Karten (abgemeldet) und Skelett */
.st-card--sk { padding: 6px 0; }
.st-sk { padding: 12px var(--gutter); display: grid; gap: 18px; }
.st-sk-row { display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
.st-sk .st-sk-row { padding: 0; }

/* Abmelden: zentriert, Radius 12, 36 × 14 */
.st-logout-wrap { display: flex; justify-content: center; padding: 30px 16px 12px; }
.st-logout {
  min-height: 0;
  padding: 14px 36px;
  border-radius: 12px;
  font-size: 16px;
}
.st-logout .icon { width: 20px; height: 20px; }

/* Fehler mit „Erneut versuchen“ */
.st-error {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 48px 24px;
  text-align: center;
}
.st-error__text { font-size: 15px; font-weight: 700; }
.st-error .btn .icon { width: 18px; height: 18px; }

/* Hinweise */
.st-note-plain {
  margin-top: 10px;
  padding: 0 28px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.st-body:not(.st-body--cards) .st-note-plain { padding: 0; }
.st-note-plain--top { margin: 0 0 10px; }
.st-link { color: var(--text); text-decoration: underline; }
.st-field-note { margin-top: -6px; font-size: 12px; color: var(--text-2); line-height: 1.4; }

/* Kopf-Symbol mit Text (Passwort, Muttizettel, Konto löschen) */
.st-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 8px 22px;
  text-align: center;
}
.st-hero--left { align-items: flex-start; text-align: left; padding: 12px 0 10px; }
.st-hero__icon .icon { width: 30px; height: 30px; }
.st-hero__title { font-size: 21px; font-weight: 900; }
.st-hero__text { max-width: 360px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.st-hero--left .st-hero__text { font-size: 15px; color: var(--text); font-weight: 600; }

/* Formulare */
.st-form { display: grid; gap: 16px; }
.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 359px) {
  .st-two { grid-template-columns: 1fr; }
}
.st-counter { justify-self: end; margin-top: -8px; font-size: 12px; color: var(--text-2); }
.st-fsection { display: grid; gap: 16px; margin-top: 10px; }
.st-fsection__title { font-size: 16px; font-weight: 800; }
.st-at .st-at__prefix {
  position: absolute;
  left: 16px;
  font-weight: 800;
  background: var(--accent-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}
.st-at .field__input { padding-left: 32px; padding-right: 16px; }
.st-form.is-saving { opacity: .75; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; }
.st-chips:empty { display: none; }
.st-chips .chip { height: 30px; padding: 0 12px; font-size: 12.5px; color: var(--text); }
.st-inline-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.st-inline-link span { flex: 1 1 auto; }
.st-inline-link .icon { width: 18px; height: 18px; }

/* Geschlecht: Pillen mit Auswahl-Kreis */
.st-gender { display: flex; flex-wrap: wrap; gap: 10px; }
.st-gender__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 15px 0 10px;
  border-radius: var(--r-pill);
  background: var(--quiet-fill);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
}
.st-gender__opt.is-on {
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--accent-tint-border) border-box;
}
.st-gender__opt .sel-circle { width: 20px; height: 20px; }
.st-gender__opt .sel-circle .icon { width: 14px; height: 14px; }

/* Profilbild-Kopf: Ring im Verlauf, 104 px */
.st-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 6px;
  text-align: center;
}
.st-avatar__btn {
  padding: 3px;
  border-radius: 50%;
  background: var(--accent-gradient);
}
.st-avatar__img {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-soft);
  color: var(--text-2);
  box-shadow: 0 0 0 2px var(--bg);
}
.st-avatar__img img { width: 100%; height: 100%; object-fit: cover; }
.st-avatar__img .icon { width: 30px; height: 30px; }
.st-avatar__name { margin-top: 14px; font-size: 22px; font-weight: 900; }
.st-avatar__user { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.st-avatar__hint { margin-top: 12px; max-width: 320px; font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.st-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  margin-top: 16px;
  padding: 13px 0;
}
.st-mini-stats > div { display: grid; gap: 3px; }
.st-mini-stats strong { font-size: 15.5px; font-weight: 800; }
.st-mini-stats span { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.st-progress {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--quiet-fill);
  overflow: hidden;
}
.st-progress__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent-gradient);
  transition: width .35s var(--ease-out);
}

/* Knopf fest unten (über der unteren Leiste), ohne Fläche dahinter */
.st-sticky-foot {
  position: sticky;
  bottom: calc(var(--tabbar-space) - 4px);
  z-index: 10;
  padding: 12px 0 4px;
}
.st-list-body .st-sticky-foot { padding-left: var(--gutter); padding-right: var(--gutter); }

/* Listen mit Personen (Blockiert, Enge Freunde) – Zeilen wie die Chat-Liste */
.st-list-head { display: grid; gap: 10px; padding: 6px var(--gutter) 6px; }
.st-search { width: 100%; }
.st-count { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.st-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-max { margin-left: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.st-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px var(--gutter) 4px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-2);
}
.st-note .icon { flex: none; width: 20px; height: 20px; }
.st-people { padding: 2px 0 12px; }
.st-person {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px var(--gutter);
  text-align: left;
  color: var(--text);
}
.st-person__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.st-person__name {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-person__name--lg { font-size: 17px; font-weight: 500; }
.st-person__sub {
  font-size: 12.5px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-person .btn--small { flex: none; }
.st-person--select:disabled { opacity: .5; }
.st-people__empty { padding: 32px 24px; text-align: center; }
.sel-circle.sel-circle--cf.is-on { background: linear-gradient(135deg, #FFB545, #1BD760); }
.sel-circle.sel-circle--cf .icon { fill: #fff; }

/* Darstellung */
.st-choice .row__end { opacity: 1; }

/* Hinweis-Seiten (Konto löschen, Deine Daten) */
.st-block { margin-top: 22px; }
.st-block__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
}
.st-block__title .icon { flex: none; width: 20px; height: 20px; }
.st-block__text { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--text-2); }

/* Sheets: Anmelde-Bestätigung, Profilbild */
.st-reauth { display: grid; gap: 14px; padding: 16px 16px 20px; }
.st-reauth.is-busy,
.sheet__body.is-busy .st-reauth { opacity: .7; pointer-events: none; }
.st-reauth__form { display: grid; gap: 12px; }
.st-reauth__title { font-size: 17px; font-weight: 800; }
.st-reauth__resend { justify-self: center; font-size: 13.5px; color: var(--text-2); }
.st-sheet-list { padding: 6px 0 12px; }

/* =====================================================================
   Muttizettel – Formular
   ===================================================================== */
.mz-form { display: grid; gap: 8px; }
.mz-section { margin-top: 18px; }
.mz-section__title { margin-bottom: 10px; font-size: 16px; font-weight: 800; }
.mz-fields { display: grid; gap: 12px; }
.mz-legal { display: grid; gap: 4px; font-size: 12.5px; line-height: 1.5; font-weight: 500; color: var(--text-2); }
.mz-actions { margin-top: 24px; display: grid; gap: 4px; }
.mz-actions .st-note-plain { text-align: center; }
.mz-actions .btn .icon { width: 20px; height: 20px; }

/* Druckseite: auf dem Bildschirm unsichtbar */
.mz-sheet { display: none; }

@page mz-a4 {
  size: A4;
  margin: 12mm 12mm 9mm;
}

@media print {
  html.mz-printing,
  html.mz-printing body {
    background: #fff !important;
    color: #000 !important;
  }
  html.mz-printing body > *:not(.mz-sheet) { display: none !important; }
  html.mz-printing .mz-sheet {
    display: flex;
    flex-direction: column;
    page: mz-a4;
    min-height: 270mm;
    color: #000;
    font-family: var(--font-ui);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .mz-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .mz-logo { width: 40px; height: 40px; margin-bottom: 8px; border-radius: 10px; }
  .mz-title { font-size: 24pt; font-weight: 700; margin: 0; }
  .mz-brand { margin-top: 4pt; font-size: 16pt; }
  .mz-law { margin-top: 8pt; font-size: 10pt; }
  .mz-copy { margin-top: 8pt; font-size: 10pt; font-style: italic; max-width: 150mm; }
  .mz-lead { margin-top: 14pt; margin-bottom: 6pt; font-size: 12pt; font-weight: 700; }
  .mz-text { margin-top: 10pt; font-size: 10.5pt; line-height: 1.4; }
  .mz-text--trust { font-size: 10.2pt; line-height: 1.5; }
  .mz-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8pt; }
  .mz-box__value {
    height: 30pt;
    padding: 0 5pt;
    border: 1pt solid #000;
    font-size: 10pt;
    line-height: 30pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mz-box__label { margin-top: 3pt; font-size: 9pt; }
  .mz-foot { margin-top: auto; padding-top: 10pt; border-top: 1pt solid #000; }
  .mz-foot__title { font-size: 10.5pt; font-weight: 700; margin-bottom: 6pt; }
  .mz-foot__item { font-size: 9.4pt; line-height: 1.45; }
}