/* ============================================================
   Kompetenzprofil — eine Karte zum Aufklappen

   Masse aus Prototyp.dc.html Zeile 2385-2405.

   Das Element ist ein <details>. Aufklappen, Tastatur und die Ansage fuer
   Screenreader macht damit der Browser; hier steht nur, wie es aussieht.
   ============================================================ */

.ps-profil {
  /* Damit die Karte selbst entscheiden kann, ob die Kernkompetenzen in
     eine oder in zwei Spalten laufen. Der Abschnitt weiss das nicht: Wie
     breit eine Karte ist, haengt an der Spaltenzahl des Rasters. */
  container-type: inline-size;

  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-block: 0;
  min-width: 0; /* sonst sprengt eine lange Rollenbezeichnung die Spalte */
}

/* ---------- Die Zusammenfassung: Symbol, Bezeichnung, Pfeil ----------

   Der Dreiecksmarker faellt weg — er wuerde neben dem Pfeil rechts ein
   zweites Mal dasselbe sagen. `display: flex` nimmt ihn in modernen
   Browsern bereits mit; die beiden folgenden Zeilen sind fuer die uebrigen.
*/

.ps-profil__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  transition: background var(--dur-base) var(--ease-out);
}

.ps-profil__kopf::-webkit-details-marker { display: none; }
.ps-profil__kopf::marker { content: ""; }

.ps-profil__kopf:hover { background: var(--surface-subtle); }

/* Der Fokusring gehoert an die ganze Zeile, nicht an den Text darin. */
.ps-profil__kopf:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: -2px;
}

.ps-profil__symbol {
  display: inline-flex;
  flex: none;
  color: var(--highlight);
}

.ps-profil__titel {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--text-strong);
  text-wrap: pretty;
}

.ps-profil__pfeil {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--highlight);
  transition: transform var(--dur-base) var(--ease-out);
}

.ps-profil[open] .ps-profil__pfeil,
.ps-profil--offen .ps-profil__pfeil {
  transform: rotate(180deg);
}

/* ---------- Der aufgeklappte Teil ---------- */

.ps-profil__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 0 var(--space-6) var(--space-6);
}

/* Die Trennlinie sitzt am Text und nicht an der Huelle: Ist die
   Beschreibung abgeschaltet, soll die Linie mit ihr verschwinden. */
.ps-profil__text {
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-body);
  text-wrap: pretty;
}

/* Steht die Liste allein da, uebernimmt sie die Linie. */
.ps-profil__text + .ps-profil__liste { border-top: 0; padding-top: 0; }

.ps-profil__liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.ps-profil__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ps-profil__liste ul,
.ps-profil__liste ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-body);
}

.ps-profil__liste li {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

/* Der Punkt als Pseudo-Element und nicht als ::marker — dieselbe
   Begruendung wie bei der Karte: ::marker kennt weder Groesse noch
   Verschiebung zuverlaessig. */
.ps-profil__liste li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--highlight);
  transform: translateY(-3px);
}

.ps-profil__liste li > ul,
.ps-profil__liste li > ol {
  flex: 1 0 100%;
  padding-left: var(--space-5);
}

/*
   Steht die Karte allein in der Zeile, ist sie ueber tausend Pixel breit —
   eine einspaltige Liste liesse zwei Drittel davon leer. Ab 620 Pixeln
   Kartenbreite laufen die Punkte deshalb zweispaltig.
*/
@container (min-width: 620px) {
  .ps-profil__liste ul,
  .ps-profil__liste ol {
    display: block;
    columns: 2;
    column-gap: var(--space-7);
    margin-bottom: -8px;
  }

  .ps-profil__liste li {
    break-inside: avoid;
    margin-bottom: 8px;
  }
}

/* ---------- Abgeschaltete Teile ----------

   Der Schalter sitzt am Raster, weil er fuer alle Karten gemeinsam gilt.
   Auf der Website gibt render.php die Zeile gar nicht erst aus; diese
   Regeln sind fuer den Editor, damit man die Wirkung dort schon sieht.
*/

.ps-profile--ohne-text  .ps-profil__text,
.ps-profile--ohne-liste .ps-profil__liste {
  display: none;
}

/* Bleibt nichts uebrig, faellt auch das Innenpolster weg. */
.ps-profile--ohne-text.ps-profile--ohne-liste .ps-profil__inhalt {
  display: none;
}

/* Steht die Liste allein, traegt sie die Trennlinie. */
.ps-profile--ohne-text .ps-profil__liste {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-5);
}

/* ---------- Im Editor ----------

   Dort ist die Karte ein <div> und immer offen: Ein zugeklapptes <details>
   liesse die Felder darin unerreichbar, und ein Klick auf die
   Zusammenfassung wuerde mit der Blockauswahl streiten.
*/

.editor-styles-wrapper .ps-profil__kopf { cursor: default; }
.editor-styles-wrapper .ps-profil__kopf:hover { background: transparent; }