/* ============================================================
   Profil und Einstellungen — die Stile zu crs-einstellungen.js.

   EIGENE DATEI, nicht in crm-suite.css: die liegt als Kopie aus
   der Workstation hier und wird von Zeit zu Zeit neu geholt.
   Was nur zu diesen Seiten gehoert, waere dann weg.

   Alle Farben kommen aus den Variablen der Suite (--scrm-*).

   Vorlage: previews/konto-klein.html (Workstation-Repo).
   ============================================================ */

/* WEISSE INSELN AUF GRAUEM GRUND — das Muster der ganzen Suite.
   Die Bereichsspalte war eine randlose weisse Flaeche, die bis in
   die Ecken des Inhaltsbereichs lief. Jetzt ist sie eine Karte
   mit Rundung, und der Grund laeuft rundherum durch, wie bei der
   Vorlagenseite (.cvl-tabkarte) auch. */
.cse {
  --cse-akzent: #1a9bdb;
  --cse-akzent-tief: #15739f;
  --cse-akzent-matt: #e8f5fc;
  --cse-r: 11px;
  --cse-karte-r: 14px;
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: 14px; padding: 14px;
  background: var(--scrm-grund, #f5f8fc);
  min-width: 0; min-height: 0; width: 100%; height: 100%;
}
/* Die Profilseite hat keine Bereichsspalte — sie ist der eine
   Bereich. */
.cse.cse-einzeln { grid-template-columns: minmax(0, 1fr); }

/* Wird es eng, wandert die Spalte nach oben und wird zu einer
   Reihe. Untereinander scrollen zwei Spalten gegeneinander, und
   man verliert beide.

   DIE SCHWELLE IST 1100, NICHT 860: @media misst das FENSTER,
   die Seite steht aber im Inhaltsbereich der Suite — und links
   davon liegen 240 Pixel Navigation. Bei 1000 Pixeln Fenster
   bleiben der Seite knapp 760, und zwei Spalten darin sind eine
   zu viel. */
@media (max-width: 1100px) {
  .cse { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  /* Als Reihe bleibt sie eine Karte — nur flacher und waagerecht
     scrollend. */
  .cse-bereiche { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 8px; }
  .cse-bereiche .cse-kat { display: none; }
  .cse-b { width: auto; flex: none; margin-bottom: 0; }
  /* flex:none und nowrap, sonst schrumpft der Text und bricht auf
     zwei Zeilen — in einer Reihe, die ohnehin waagerecht scrollt,
     ist das verschenkte Hoehe. Die Silbentrennung gilt nur fuer
     die schmale Spalte. */
  .cse-bt {
    flex: none; white-space: nowrap;
    hyphens: none; -webkit-hyphens: none; overflow-wrap: normal;
  }
}

/* ---------- Links: die Bereiche ---------- */
.cse-bereiche {
  background: #fff;
  border: 1px solid var(--scrm-linie, #e7eef6);
  border-radius: var(--cse-karte-r);
  padding: 12px 10px; overflow-y: auto; min-height: 0;
}
.cse-kat {
  padding: 12px 10px 6px; font-size: 10px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--scrm-mut, #8a97a8);
}
.cse-kat:first-child { padding-top: 2px; }
.cse-b {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--scrm-mut, #8a97a8); margin-bottom: 1px;
}
.cse-b:hover { background: var(--scrm-grund, #f5f8fc); color: var(--scrm-tinte, #16233a); }
.cse-b.an { background: var(--cse-akzent-matt); color: var(--cse-akzent-tief); font-weight: 700; }
.cse-b > .material-symbols-rounded { font-size: 18px; }
/* "Benachrichtigungen" ist laenger als die Spalte und hat keinen
   Bindestrich. hyphens:auto trennt an der Silbengrenze statt
   mitten im Wort — es greift, weil <html lang> gesetzt ist. */
.cse-bt {
  flex: 1; min-width: 0; overflow-wrap: break-word;
  hyphens: auto; -webkit-hyphens: auto; line-height: 1.3;
}
.cse-neu {
  flex: none; font-size: 8.5px; font-weight: 800; letter-spacing: .07em;
  padding: 2px 5px; border-radius: 4px; background: var(--cse-akzent); color: #fff;
}

/* ---------- Rechts: der Inhalt ---------- */
/* Den grauen Grund traegt jetzt .cse — hier bleibt er
   durchsichtig. Ueberschrift und Einleitung stehen direkt
   darauf, die Karten darunter bringen ihr eigenes Weiss mit:
   was keinen Inhalt traegt, braucht keine Flaeche. */
.cse-inhalt {
  padding: 8px 10px 24px; overflow-y: auto; min-height: 0;
  background: transparent;
}
.cse-inhalt h2 {
  margin: 0 0 3px; font-size: 17px; font-weight: 800; letter-spacing: -.018em;
  display: flex; align-items: center; gap: 9px;
}
.cse-inhalt h2 .material-symbols-rounded { font-size: 21px; color: var(--scrm-mut, #8a97a8); }
.cse-was {
  font-size: 12.5px; color: var(--scrm-mut, #8a97a8); margin: 0 0 18px;
  max-width: 70ch; line-height: 1.55;
}
.cse-was b { color: #41556d; }
.cse-karte {
  background: #fff; border: 1px solid var(--scrm-linie, #e7eef6); border-radius: var(--cse-r);
  padding: 16px 18px; margin-bottom: 12px; max-width: 760px;
}
.cse-karte h3 { margin: 0 0 12px; font-size: 13.5px; font-weight: 800; }
.cse-hin {
  font-size: 11.5px; line-height: 1.55; color: var(--scrm-mut, #8a97a8);
  margin: 0 0 12px; max-width: 64ch;
}
.cse-hin:last-child { margin-bottom: 0; }
.cse-hin b { color: #41556d; }

.cse-feld { display: block; margin-bottom: 13px; max-width: 440px; }
.cse-feld span { display: block; font-size: 11.5px; font-weight: 700; color: #41556d; margin-bottom: 4px; }
.cse-feld input, .cse-feld select {
  width: 100%; height: 36px; padding: 0 11px; border: 1px solid #d9e2ee;
  border-radius: 8px; background: #fff; font-size: 13px; font-family: inherit; color: inherit;
}
.cse-feld input:focus, .cse-feld select:focus { outline: 2px solid var(--cse-akzent); outline-offset: -1px; }
.cse-wenn[hidden] { display: none; }

.cse-tun {
  all: unset; box-sizing: border-box; cursor: pointer;
  height: 36px; padding: 0 15px; border-radius: 9px; background: var(--cse-akzent);
  color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center;
}
.cse-tun:hover { background: var(--cse-akzent-tief); }
.cse-tun:disabled { opacity: .55; cursor: default; }
.cse-tun.still {
  background: var(--scrm-grund, #f5f8fc); color: var(--scrm-mut, #8a97a8);
  border: 1px solid #d9e2ee;
}
.cse-tun.still:hover { border-color: var(--cse-akzent); color: var(--cse-akzent-tief); background: #fff; }
.cse-reihe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.cse-zeile {
  display: flex; align-items: center; gap: 11px; padding: 10px 0;
  border-bottom: 1px solid var(--scrm-linie, #e7eef6);
}
.cse-zeile:last-of-type { border-bottom: 0; }
.cse-zeile > .material-symbols-rounded { font-size: 19px; color: var(--scrm-mut, #8a97a8); }
.cse-zt { flex: 1; min-width: 0; }
.cse-zt b { display: block; font-size: 12.5px; font-weight: 700; }
.cse-zt small { display: block; font-size: 11px; color: var(--scrm-mut, #8a97a8); }
.cse-marke { flex: none; font-size: 10px; font-weight: 800; color: var(--scrm-gut, #0e7c6b); }
.cse-aus { flex: none; font-size: 11px; font-weight: 700; color: #c6d0dc; }

.cse-neuband {
  display: inline-flex; align-items: center; height: 21px; padding: 0 9px;
  border-radius: 11px; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  background: var(--cse-akzent-matt); color: var(--cse-akzent-tief);
}

/* ---------- Die Design-Proben ---------- */
.cse-proben { display: flex; gap: 10px; flex-wrap: wrap; }
.cse-probe {
  all: unset; box-sizing: border-box; cursor: pointer;
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid transparent;
  position: relative; outline: 1px solid #d9e2ee; outline-offset: -1px;
}
.cse-probe.an { border-color: var(--scrm-tinte, #16233a); }
.cse-probe .material-symbols-rounded {
  position: absolute; inset: 0; display: none; place-items: center;
  font-size: 19px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.cse-probe.an .material-symbols-rounded { display: grid; }
.cse-probenname { margin-top: 11px; font-size: 12px; color: var(--scrm-mut, #8a97a8); }
.cse-probenname b { color: var(--scrm-tinte, #16233a); }

/* ---------- Die Sprachen ---------- */
.cse-sprachen { display: flex; gap: 6px; flex-wrap: wrap; }
.cse-spr {
  all: unset; box-sizing: border-box; cursor: pointer;
  height: 30px; padding: 0 12px; border: 1px solid #d9e2ee; border-radius: 15px;
  background: #fff; font-size: 12px; font-weight: 700; color: var(--scrm-mut, #8a97a8);
  display: inline-flex; align-items: center;
}
.cse-spr:hover { border-color: var(--cse-akzent); color: var(--cse-akzent-tief); }
.cse-spr.an { background: var(--cse-akzent); border-color: var(--cse-akzent); color: #fff; }

/* ============================================================
   DAS KLEINE KONTO-MENUE

   Es traegt weiter die kto-Klassen aus anmelden.css — hier steht
   nur, was durch den Umbau dazukam: die zwei grossen Knoepfe.
   ============================================================ */
.kto-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 2px 10px 10px; }
.kto-gross {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 11px 12px; border: 1px solid #d9e2ee; border-radius: 10px; background: #fff;
}
.kto-gross:hover { border-color: var(--cse-akzent); background: var(--cse-akzent-matt); }
.kto-gross .material-symbols-rounded { font-size: 20px; color: var(--cse-akzent-tief); }
.kto-gross b { font-size: 12.5px; font-weight: 700; }
.kto-gross small { font-size: 10.5px; color: var(--scrm-mut, #8a97a8); line-height: 1.35; }
.kto-fuss {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-top: 1px solid var(--scrm-linie, #e7eef6); background: #fbfcfe;
}
.kto-fuss small {
  flex: 1; min-width: 0; font-size: 10.5px; color: var(--scrm-mut, #8a97a8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kto-ab {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border: 1px solid #d9e2ee; border-radius: 8px; background: #fff;
  font-size: 12px; font-weight: 700; color: var(--scrm-mut, #8a97a8);
}
.kto-ab:hover { border-color: #c2341a; color: #c2341a; }
.kto-ab .material-symbols-rounded { font-size: 16px; }