/* apple-benutzer.css – Ansicht "Neu" für Übersicht, Kontakte, Profil, Passwort, Zwei-Faktor und Anmeldung (nur Vorschau-Umgebung).
   Alle Regeln hängen an body.apple und an einer Seitenklasse am <main> (seite-dashboard, seite-kontakte, seite-profil, seite-anmeldung).
   Farben, Reihenfolge und Inhalte bleiben wie heute; geändert werden Rhythmus, Gruppierung, Tippflächen und Kontrast.
   Die gemeinsamen Bausteine (Karten, Knöpfe, Felder, Tabellen, Chips) kommen aus apple-global.css. */

/* ===== Übersicht (Dashboard) ===== */
body.apple .seite-dashboard .karte > h2 { margin-bottom: 12px; }

/* Verfügbarkeit: gleich hohe Pillen; auf dem Handy teilen sie sich die Breite (volle Tippfläche) */
body.apple .seite-dashboard .status-auswahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
body.apple .seite-dashboard .status-knopf { min-width: 96px; }
@media (max-width: 800px) {
  body.apple .seite-dashboard .status-auswahl { flex-wrap: nowrap; }
  body.apple .seite-dashboard .status-knopf { flex: 1 1 0; min-width: 0; padding: 0 8px; }
}
body.apple .seite-dashboard #status-gespeichert-hinweis { color: #276639; font-weight: 600; margin: 0 0 8px; }
body.apple .seite-dashboard #status-gespeichert-hinweis[hidden] { display: none; }

/* Wer ist online: ruhige Liste mit feinen Trennlinien */
body.apple .seite-dashboard .online-liste { margin: 0; padding: 0; }
body.apple .seite-dashboard .online-liste li {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-height: 40px; padding: 6px 0; box-sizing: border-box;
  border-bottom: 1px solid var(--a-linie, #e8dccb); font-size: 16px; line-height: 1.3; overflow-wrap: anywhere;
}
body.apple .seite-dashboard .online-liste li:last-child { border-bottom: 0; }
body.apple .seite-dashboard .online-liste .punkt { margin-right: 0; }
body.apple .seite-dashboard .online-liste .status { margin-left: auto; flex: 0 0 auto; }
body.apple .seite-dashboard .online-liste .punkt, body.apple .seite-dashboard .online-liste .rollen-kennzeichen { flex: 0 0 auto; }
body.apple .seite-dashboard #online-leer-hinweis { margin: 0; color: var(--farbe-text-mittel); }
body.apple .seite-dashboard #online-leer-hinweis[hidden] { display: none; }

/* Rollen-Kennzeichen (Admin): Abstand regelt das Gerüst */
body.apple .rollen-kennzeichen { margin-left: 0; padding: 0 8px; }

/* ===== Kontakte ===== */
body.apple .seite-kontakte .tabelle { width: 100%; border: 1px solid var(--a-linie, #e8dccb); border-radius: var(--a-r-karte, 16px); border-collapse: separate; border-spacing: 0; overflow: hidden; }
body.apple .seite-kontakte .tabelle th { text-align: left; }
body.apple .seite-kontakte .tabelle td { font-size: 15px; line-height: 1.35; }
body.apple .seite-kontakte .tabelle td:first-child { width: 56px; padding-right: 0; }
body.apple .seite-kontakte .kontakt-name { font-weight: 600; color: var(--farbe-text); }
body.apple .seite-kontakte .kontakt-name .punkt { margin: 0 0 0 6px; }
body.apple .seite-kontakte .kontakt-name .rollen-kennzeichen { margin-left: 6px; }
body.apple .seite-kontakte .tabelle .status { margin-left: 0; }
@media (max-width: 800px) {
  body.apple .seite-kontakte .tabelle { border: 0; border-radius: 0; background: none; overflow: visible; }
  body.apple .seite-kontakte .tabelle-karten tbody { background: none; }
  /* Karte: oben Bild, Name und Verfügbarkeit in einer Zeile, darunter die Einzelangaben */
  body.apple .seite-kontakte .tabelle-karten tr {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 12px 14px;
  }
  body.apple .seite-kontakte .tabelle-karten td { grid-column: 1 / -1; padding: 2px 0; font-size: 15px; width: auto; }
  body.apple .seite-kontakte .tabelle-karten td:nth-child(1) { grid-column: 1; grid-row: 1; padding: 0; line-height: 0; }
  body.apple .seite-kontakte .tabelle-karten td:empty { display: none; }
  body.apple .seite-kontakte .tabelle-karten td.kontakt-name { grid-column: 2; grid-row: 1; padding: 0; font-size: 17px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
  body.apple .seite-kontakte .tabelle-karten td.kontakt-name .punkt, body.apple .seite-kontakte .tabelle-karten td.kontakt-name .rollen-kennzeichen { margin-left: 0; }
  body.apple .seite-kontakte .tabelle-karten td.kontakt-status { grid-column: 3; grid-row: 1; justify-self: end; padding: 0; }
  body.apple .seite-kontakte .tabelle-karten td[data-label] a { display: inline-block; padding: 6px 0; min-width: 0; }
  body.apple .seite-kontakte .tabelle-karten td[data-label]:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; min-height: 32px; padding: 0; }
  body.apple .seite-kontakte .tabelle-karten td.kontakt-name + td[data-label]:not(:empty) { margin-top: 8px; }
}

/* ===== Profil, Passwort, Zwei-Faktor: gemeinsame Rhythmen ===== */
body.apple .seite-profil .karte > h2 { margin-bottom: 12px; }
body.apple .seite-profil .karte > p { margin: 0 0 12px; line-height: 1.5; }
body.apple .seite-profil .karte > p:last-child { margin-bottom: 0; }
body.apple .seite-profil > p > a { display: inline-flex; align-items: center; min-height: var(--a-h-knopf); }
body.apple .seite-profil .hinweis { margin: 0 0 16px; }
body.apple .seite-profil .karte form { max-width: 560px; }
body.apple .seite-profil .karte form p { margin: 0 0 16px; }
body.apple .seite-profil .karte form .helptext { margin-top: 6px; }
body.apple .seite-profil .karte form .errorlist { margin: 0 0 6px; }
body.apple .seite-profil .karte form button[type="submit"] { margin-top: 4px; }
body.apple .seite-profil .karte > p + form { margin-top: 12px; }
@media (max-width: 800px) {
  body.apple .seite-profil .karte form button[type="submit"]:not(.link-button) { width: 100%; }
}
body.apple .seite-profil code {
  display: inline-block; max-width: 100%; padding: 6px 10px; margin-top: 4px; border-radius: 8px; box-sizing: border-box;
  background: var(--a-gruppe-bg, #f5efe8); border: 1px solid var(--a-linie, #e8dccb);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all;
}

/* ===== Profil: Profilbild ===== */
body.apple .seite-profil #profilbild-anzeige { margin: 0 0 12px; line-height: 0; }
body.apple .seite-profil .avatar-gross { width: 160px; height: 160px; box-shadow: 0 0 0 1px var(--a-linie, #e8dccb); }
body.apple .seite-profil .avatar-platzhalter.avatar-gross { font-size: 44px; }
body.apple .seite-profil .karte > p:has(#profilbild-auswaehlen-knopf) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.apple .seite-profil #profilbild-editor > p:has(button) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
body.apple .seite-profil .karte p > button.button { margin: 0; }
body.apple .seite-profil #profilbild-fehler { margin: 8px 0 0; }
body.apple .seite-profil #profilbild-fehler[hidden], body.apple .seite-profil #profilbild-editor[hidden] { display: none; }
/* Konto-Seite am Computer: dieselbe Karte mit Zeilen wie am Handy (Regeln dort in apple-mobil.css) */
@media (min-width: 801px) {
  body.apple .konto-liste { list-style: none; margin: 0 0 16px; padding: 0; max-width: 420px; background: #fff; border: 1px solid var(--a-linie, #e8dccb); border-radius: 14px; overflow: hidden; }
  body.apple .konto-liste li + li { border-top: 1px solid var(--a-linie, #e8dccb); }
  body.apple .konto-liste a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; color: var(--a-text, #3a332c); text-decoration: none; }
  body.apple .konto-liste a::after { content: "›"; margin-left: auto; color: var(--a-text-2, #5f554a); font-size: 20px; }
  body.apple .konto-liste a:hover { background: var(--a-gruppe-bg, #f5efe8); }
  body.apple .konto-liste .konto-hinweis { font-size: 12px; color: var(--a-text-2, #5f554a); }
}

body.apple .seite-profil #profilbild-zoom { width: 100%; max-width: 320px; min-height: 44px; margin: 0; padding: 0; accent-color: var(--farbe-primaer); }
@media (max-width: 800px) {
  body.apple .seite-profil .karte > p:has(#profilbild-auswaehlen-knopf) .button { flex: 1 1 140px; }
}

/* ===== Profil: Formular (Name, Kontakt, Farbe, Schalter) ===== */
body.apple .seite-profil .karte form > p > input:not([type="checkbox"]),
body.apple .seite-profil .karte form > p > select { width: 100%; box-sizing: border-box; }
body.apple .seite-profil .karte form > p > input[type="number"] { max-width: 160px; }
body.apple .seite-profil .hex-farbe-feld { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
body.apple .seite-profil .karte form > p .hex-farbe-feld input[type="text"] { width: 120px; max-width: 100%; font-variant-numeric: tabular-nums; }
body.apple .seite-profil .hex-farbe-feld input[type="color"] {
  width: 44px; height: var(--a-h-feld, 40px); min-height: 0; padding: 3px; margin: 0; cursor: pointer;
  border: 1px solid var(--a-rand, #c4b399); border-radius: var(--a-r-feld, 12px); background: #fff;
}
body.apple .seite-profil .rgb-farbe-felder { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 0 12px; vertical-align: middle; }
body.apple .seite-profil .karte .rgb-farbe-felder label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
body.apple .seite-profil .rgb-farbe-felder input[type="number"] {
  width: 64px; min-height: var(--a-h-feld, 40px); padding: 0 8px; box-sizing: border-box; text-align: center;
  border: 1px solid var(--a-rand, #c4b399); border-radius: var(--a-r-feld, 12px); background: var(--a-gruppe-bg, #f5efe8);
  color: var(--farbe-text); font-family: inherit; font-size: 16px;
}
body.apple .seite-profil .rgb-farbe-felder input[type="number"]:focus { outline: none; background: #fff; border-color: var(--a-petrol, #0c577f); }
body.apple .seite-profil .rgb-farbe-felder input[type="number"]:focus-visible { outline: 2px solid var(--a-petrol, #0c577f); outline-offset: 2px; }
@media (max-width: 800px) {
  body.apple .seite-profil .rgb-farbe-felder { display: flex; margin: 12px 0 0; }
}

/* Vorschau des Beitragstexts: weißes Muster in beiger Fläche */
body.apple .seite-profil #beitragstext-vorschau-karte { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--a-gruppe-bg, #f5efe8); border: 1px solid var(--a-linie, #e8dccb); }
body.apple .seite-profil #beitragstext-vorschau-karte .hinweis-klein { margin: 0 0 8px; }
body.apple .seite-profil #beitragstext-vorschau { margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--a-linie, #e8dccb); background: #fff; line-height: 1.4; }

/* Ein/Aus-Schalter (Chat ausblenden): Schalter links, Beschriftung daneben, Erklärung darunter */
body.apple .seite-profil .karte .profil-schalter { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 16px; min-height: 44px; }
body.apple .seite-profil .karte .profil-schalter label { margin: 0; font-size: 16px; font-weight: 600; cursor: pointer; }
body.apple .seite-profil .profil-schalter input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; order: -1; flex: 0 0 auto; position: relative; cursor: pointer;
  width: 48px; height: 28px; min-height: 0; margin: 0; padding: 0; border-radius: 999px; box-sizing: border-box;
  background: #8a7d68; border: 0; transition: background-color var(--a-sprung, .15s ease);
}
body.apple .seite-profil .profil-schalter input[type="checkbox"]::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform var(--a-sprung, .15s ease);
}
body.apple .seite-profil .profil-schalter input[type="checkbox"]:checked { background: var(--farbe-primaer); }
body.apple .seite-profil .profil-schalter input[type="checkbox"]:checked::after { transform: translateX(20px); }
body.apple .seite-profil .profil-schalter input[type="checkbox"]:focus-visible { outline: 2px solid var(--a-petrol, #0c577f); outline-offset: 2px; }
body.apple .seite-profil .profil-schalter .helptext { flex-basis: 100%; margin: 0; }

/* Passwort ändern */
body.apple .seite-passwort .hinweis-klein ul { margin: 4px 0 0; padding-left: 18px; }
body.apple .seite-passwort .hinweis-klein li { margin: 2px 0; }
body.apple .seite-passwort .karte form > input { display: block; width: 100%; box-sizing: border-box; }
body.apple .seite-passwort .karte form label { margin-top: 16px; }
body.apple .seite-passwort .karte form > label:first-of-type { margin-top: 0; }
body.apple .seite-passwort .karte form button[type="submit"] { margin-top: 20px; }

/* Zwei-Faktor */
body.apple .seite-zwei-faktor .karte form > input { display: block; width: 100%; box-sizing: border-box; }
body.apple .seite-zwei-faktor .karte form label { margin-top: 16px; }
body.apple .seite-zwei-faktor .karte form label:first-of-type { margin-top: 0; }
body.apple .seite-zwei-faktor .karte form button[type="submit"] { margin-top: 20px; }
body.apple .seite-zwei-faktor .karte > h2:not(:first-child) { margin-top: 24px; }
body.apple .seite-zwei-faktor .qr-code { margin: 0 0 12px; line-height: 0; }
body.apple .seite-zwei-faktor .qr-code svg { width: 200px; height: 200px; border: 1px solid var(--a-linie, #e8dccb); border-radius: 12px; }
body.apple .seite-zwei-faktor #code, body.apple .seite-zwei-faktor-pruefen #code { max-width: 220px; font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
body.apple .seite-zwei-faktor-pruefen .karte form > input { display: block; width: 100%; box-sizing: border-box; }
body.apple .seite-zwei-faktor-pruefen .karte form label { margin-top: 0; }
body.apple .seite-zwei-faktor-pruefen .karte form button[type="submit"] { margin-top: 16px; }
body.apple .seite-zwei-faktor-pruefen .karte form.inline { display: inline-block; max-width: none; margin-top: 12px; }
body.apple .seite-zwei-faktor-pruefen .karte form.inline button { margin: 0; width: auto; }
body.apple .seite-zwei-faktor-pruefen .karte .link-button { min-height: 44px; padding: 0 4px; }
@media (max-width: 800px) {
  body.apple .seite-zwei-faktor #code, body.apple .seite-zwei-faktor-pruefen #code { max-width: none; }
}

/* ===== Anmeldung (und gesperrt) ===== */
body.apple .seite-anmeldung .anmelde-box {
  max-width: 500px; margin: 48px auto; padding: 32px 32px 28px; border-radius: 20px; background: var(--farbe-flaeche);
  border: 1px solid var(--a-linie, #e8dccb); box-shadow: 0 1px 2px rgba(58, 38, 28, .06), 0 16px 40px -24px rgba(58, 38, 28, .3);
}
body.apple .seite-anmeldung .anmelde-logo { max-height: 72px; margin: 0 auto 24px; }
body.apple .seite-anmeldung .anmelde-box > h1 { font-size: 26px; text-align: center; margin: 0 0 24px; }
body.apple .seite-anmeldung .anmelde-box > h2 { font-size: 20px; margin: 0 0 12px; }
body.apple .seite-anmeldung .anmelde-box > p { margin: 0 0 12px; line-height: 1.5; }
body.apple .seite-anmeldung .anmelde-box > p:last-child { margin-bottom: 0; }
body.apple .seite-anmeldung .anmelde-box label { margin-top: 16px; }
body.apple .seite-anmeldung .anmelde-box label:first-of-type { margin-top: 0; }
body.apple .seite-anmeldung .anmelde-box label .hinweis-klein { display: inline; margin: 0; font-weight: 400; }
body.apple .seite-anmeldung .anmelde-box input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; min-height: 44px; }
body.apple .seite-anmeldung .anmelde-box .fehler {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #f8d7da; border: 1px solid #eab6bb; color: #7a1a12; font-size: 15px; line-height: 1.4;
}
body.apple .seite-anmeldung .anmelde-box button[type="submit"] { width: 100%; margin-top: 24px; min-height: 48px; font-size: 16px; font-weight: 700; }
body.apple .seite-anmeldung .anmelde-box a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 800px) {
  body.apple .seite-anmeldung .anmelde-box { margin: 16px 0; padding: 24px 20px; }
}
body.apple .seite-zwei-faktor .karte > form + .hinweis-klein { margin-top: 16px; }