/* ==========================================================
   PERSONEN, FÄHIGKEITEN, BESTÄTIGUNGEN
   ==========================================================
   Ergänzt verzeichnis.css und artikel.css; nichts davon wird
   überschrieben. Wird nur geladen, wenn HAS_PROFILES gesetzt ist -
   die übrigen Mandanten holen die Datei gar nicht erst.

   Alle Farben kommen aus den vorhandenen Variablen. Nichts hier ist
   fest verdrahtet, damit die Akzentfarbe je Mandant weiter durchschlägt.
   ========================================================== */

/* ---------- gemeinsame Kleinteile ---------- */

.sk-empty {
    color: var(--medium-gray);
    background: var(--off-white);
    border-radius: var(--border-radius);
    padding: 1rem 1.1rem;
}

.sk-avatar {
    font-size: 1.6rem;
    line-height: 1;
    flex: 0 0 auto;
}

/* Der Reihungshinweis. Steht ÜBER der Liste und ist bewusst kein
   Kleingedrucktes: Eine Liste von Personen ohne genanntes Kriterium
   wird als Rangliste gelesen, auch wenn keine gemeint ist. */
.sk-order-note {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--primary-text);
    background: var(--off-white);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: .8rem 1rem;
    margin: 0 0 1.4rem;
}

/* ---------- Personenliste auf der Fähigkeitsseite ---------- */

.sk-people { margin: 2.5rem 0; }

.sk-person-list {
    list-style: none;
    counter-reset: person;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.sk-person {
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius-lg);
    padding: 1.1rem 1.2rem;
    background: #fff;
    counter-increment: person;
    position: relative;
}

/* Nur bei tatsächlicher Reihung wird nummeriert. Ist die Liste
   alphabetisch, wäre eine Positionsnummer eine Aussage, die niemand
   belegen kann - dann steht dort auch keine. */
.sk-person-list:not(.sk-person-list--unordered) .sk-person::before {
    content: counter(person);
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--medium-gray);
}

.sk-person-head { display: flex; gap: .8rem; align-items: flex-start; }
.sk-person-head h3 { margin: 0 0 .15rem; font-size: 1.08rem; }
.sk-person-head h3 a { text-decoration: none; }
.sk-person-head h3 a:hover { text-decoration: underline; }

/* Die Kurzzeile ist kein Link. Sie stand in var(--primary-text) -
   das ist die Farbe, die <a> im Grundstylesheet bekommt. Blauer Text,
   der nicht klickbar ist, kostet jeden Leser einen Fehlversuch. */
.sk-person-line { margin: 0 0 .25rem; color: var(--text-dark); font-size: .95rem; }

.sk-person-meta {
    margin: 0;
    font-size: .82rem;
    color: var(--medium-gray);
    font-family: var(--mono);
}

.sk-pin { color: var(--accent-text); }

/* Beleg: eine Zeile, eingerückt unter der Fähigkeit. Die Beschriftung
   "Beleg:" steht als kleines Etikett davor - sie sagt, was der Link
   ist, und darf deshalb nicht wie Fließtext aussehen. */
.sk-evidence {
    margin: .3rem 0 0;
    font-size: .88rem;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .45rem;
    align-items: baseline;
}
.sk-evidence::before {
    content: "Beleg";
    font-family: var(--mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--medium-gray);
    border: 1px solid var(--light-gray);
    border-radius: 3px;
    padding: .02rem .3rem;
    flex: 0 0 auto;
}
.sk-evidence a { color: var(--accent-text); }

.sk-endorse { margin: .7rem 0 0; font-size: .92rem; line-height: 1.5; }

/* Die Namen stehen im HTML, nicht in einem Tooltip: Was per JavaScript
   nachgeladen wird, existiert für Crawler und Sprachmodelle nicht -
   und auf dem Telefon gibt es kein Hover. */
.sk-quotes {
    list-style: none;
    margin: .8rem 0 0;
    padding: 0;
    display: grid;
    gap: .7rem;
}

.sk-quotes li {
    border-left: 2px solid var(--light-gray);
    padding-left: .85rem;
}

.sk-quote-text {
    margin: 0 0 .2rem;
    font-size: .94rem;
    line-height: 1.55;
}

.sk-quote-by {
    margin: 0;
    font-size: .8rem;
    color: var(--medium-gray);
}

.sk-more,
.sk-toplist-link {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--medium-gray);
    margin-top: 1.2rem;
}

.sk-toplist-link {
    background: var(--off-white);
    border-radius: var(--border-radius);
    padding: .85rem 1rem;
    color: var(--primary-text);
}

.sk-people-count {
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--medium-gray);
    white-space: nowrap;
}

/* ---------- Offenlegungen ---------- */

.hinweis-quelle,
.hinweis-eigen {
    font-size: .92rem;
    line-height: 1.6;
    background: var(--off-white);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: .85rem 1rem;
}

/* ---------- Profilseite ---------- */

.pr-head { display: flex; gap: 1.1rem; align-items: flex-start; }
.pr-photo { border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.pr-avatar { font-size: 3rem; line-height: 1; flex: 0 0 auto; }
.pr-meta { margin: .4rem 0 0; font-size: .9rem; color: var(--medium-gray); }

/* ---------- Fähigkeiten ----------
   Vorher ein gerahmter Kasten je Fähigkeit, jeder mit 1rem Innenabstand
   und meist nur einer Zeile Inhalt. Bei acht Fähigkeiten waren das acht
   Kästen mit viel Luft und wenig darin - die Seite wurde lang, ohne
   dass mehr dastand.

   Jetzt eine Liste mit Trennlinien statt Rahmen. Der Kasten war eine
   Umrandung um etwas, das ohnehin schon durch Weißraum getrennt war;
   dieselbe Gliederung mit weniger Mitteln.

   Die Fähigkeiten sind der Kern dieser Seite. Kompakter heißt hier:
   mehr davon sichtbar, ohne zu scrollen. */

.pr-skills { margin: 2.2rem 0; }

.pr-skill-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.pr-skill {
    padding: .75rem 0;
    border-bottom: 1px solid var(--light-gray);
}
.pr-skill:first-child { padding-top: 0; }
.pr-skill:last-child  { border-bottom: 0; padding-bottom: 0; }

.pr-skill-name {
    margin: 0;
    font-size: 1.02rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .5rem;
}
.pr-skill-name a { text-decoration: none; }
.pr-skill-name a:hover { text-decoration: underline; }

/* Eine Fähigkeit ohne Artikel ist bewusst kein Link, sondern nur
   hervorgehoben. Ein Verweis auf eine leere Seite wäre schlechter als
   keiner. */
.pr-skill-plain {
    border-bottom: 1px dotted var(--medium-gray);
    cursor: help;
}

.pr-skill-since {
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 400;
    color: var(--medium-gray);
    margin-left: .5rem;
}

.pr-links { margin: 2rem 0; }
.pr-link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pr-link-list li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }

.pr-verified {
    font-family: var(--mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent-text);
    border: 1px solid var(--accent-light);
    border-radius: 999px;
    padding: .1rem .5rem;
}

.pr-links-note {
    margin-top: 1rem;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--medium-gray);
}

/* ---------- Profilverzeichnis ---------- */

.pr-index { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.pr-index-item { display: flex; gap: .8rem; align-items: flex-start; }
.pr-index-name { font-weight: 600; text-decoration: none; }
.pr-index-name:hover { text-decoration: underline; }
.pr-index-line { margin: .1rem 0 .3rem; font-size: .92rem; color: var(--text-dark); }

.pr-index-skills { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.pr-index-skills a,
.pr-index-skills span {
    font-size: .78rem;
    background: var(--off-white);
    border-radius: 999px;
    padding: .15rem .6rem;
    text-decoration: none;
    color: var(--primary-text);
}
.pr-index-skills a:hover { background: var(--accent-light); }

/* ---------- Mitgliederbereich ---------- */

.form-card {
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius-lg);
    padding: 1.4rem 1.5rem;
    margin: 1.5rem 0;
    background: #fff;
}

.form-card h2 { margin-top: 0; }
.form-card label { display: block; margin: .9rem 0 .2rem; font-size: .92rem; font-weight: 600; }
.form-card input[type="text"],
.form-card input[type="url"],
.form-card input[type="email"],
.form-card select,
.form-card textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius);
    font: inherit;
    font-weight: 400;
}

.form-card label input[type="checkbox"] { width: auto; margin-right: .4rem; }

.beleg-zeile {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    padding: .6rem 0;
    border-bottom: 1px solid var(--off-white);
}
.beleg-zeile strong { flex: 0 0 9rem; font-size: .92rem; }
.beleg-zeile input { flex: 1 1 9rem; }

.klein { font-size: .87rem; color: var(--medium-gray); line-height: 1.6; }

.msg {
    padding: .85rem 1.1rem;
    border-radius: var(--border-radius);
    margin: 1rem 0;
    font-size: .95rem;
}
.msg.ok    { background: #eef8f1; border-left: 3px solid #2f855a; }
.msg.error { background: #fdf1f1; border-left: 3px solid #c53030; }
.msg.info  { background: #fff8e8; border-left: 3px solid #b7791f; }

/* ---------- schmale Bildschirme ---------- */

@media (max-width: 640px) {
    .pr-head { flex-direction: column; }
    .sk-person-list:not(.sk-person-list--unordered) .sk-person::before { display: none; }
    .beleg-zeile strong { flex: 1 1 100%; }
}

/* ---------- Startseite ---------- */

.ka-kategorien {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem 2rem;
    margin: 1.5rem 0;
}

.ka-kategorie h3 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--medium-gray);
    margin: 0 0 .6rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--light-gray);
}

.ka-kategorie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ka-kategorie li { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.ka-kategorie a { text-decoration: none; }
.ka-kategorie a:hover { text-decoration: underline; }

.ka-zahl {
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--medium-gray);
    background: var(--off-white);
    border-radius: 999px;
    padding: .05rem .45rem;
}

.ka-mehr { margin-top: 1.4rem; font-weight: 600; }

/* ---------- Suche ---------- */

.ka-treffer { display: none; }
.ka-treffer.offen {
    display: block;
    margin-top: .6rem;
    background: #fff;
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius-lg);
    padding: .5rem;
    text-align: left;
    max-height: 24rem;
    overflow-y: auto;
}

.ka-liste { list-style: none; margin: 0; padding: 0; }
.ka-liste li { display: flex; align-items: center; gap: .6rem; }
.ka-liste a {
    flex: 1;
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: .1rem .7rem;
    padding: .5rem .6rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: inherit;
}
.ka-liste a:hover { background: var(--off-white); }

.ka-art {
    grid-row: span 2;
    align-self: center;
    font-family: var(--mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--medium-gray);
}
.ka-name { font-weight: 600; }
.ka-text { font-size: .85rem; color: var(--medium-gray); }

.ka-kein, .ka-mehr-treffer {
    margin: 0; padding: .7rem .6rem;
    font-size: .88rem; color: var(--medium-gray);
}

/* ---------- Formular ---------- */

.pflicht { color: #c53030; }
.form-card .check { font-weight: 400; font-size: .92rem; line-height: 1.5; }
.form-card h2 { font-size: 1.05rem; margin: 1.6rem 0 .2rem; }
.form-card h2:first-of-type { margin-top: .4rem; }

/* ---------- Berufe ---------- */

.be-skills { margin: 2.2rem 0; }

.be-skill-list {
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: .7rem 1.4rem;
}

.be-skill-list li {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding-left: .8rem;
    border-left: 2px solid var(--light-gray);
}

.be-skill-list a { font-weight: 600; text-decoration: none; }
.be-skill-list a:hover { text-decoration: underline; }
.be-skill-list span { font-size: .85rem; color: var(--medium-gray); line-height: 1.5; }

.pr-berufe { margin: 1.8rem 0; }

.pr-beruf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.pr-beruf-list li {
    background: var(--off-white);
    border-radius: 999px;
    padding: .32rem .95rem;
    font-size: .95rem;
    display: inline-flex;
    align-items: baseline;
    /* flex-start, nicht der Vorgabewert: Bricht die Pille auf schmalen
       Bildschirmen um, stand die Jahresangabe sonst rechtsbuendig
       allein in der zweiten Zeile. */
    justify-content: flex-start;
    gap: .45rem;
}

/* Die Jahresangabe in der Pille war zuvor genauso gross wie der Beruf
   und in Monospace - zwei Schriftarten in einem 3-Zentimeter-Element.
   Jetzt tritt sie zurueck: Sie ergaenzt den Beruf, sie steht nicht
   daneben. */
.pr-beruf-list .pr-skill-since {
    margin-left: 0;
    font-size: .72rem;
    opacity: .85;
}

.pr-beruf-list a { text-decoration: none; font-weight: 600; }
.pr-beruf-list a:hover { text-decoration: underline; }

/* ---------- Tätigkeiten ----------
   Vorher lag alles in einer Flex-Zeile: Betrieb, Anschrift, Art, Jahr
   und Rollen nebeneinander, mit Umbruch nach Platz. Das Ergebnis war
   bei jedem Eintrag ein anderes - mal stand die Rolle rechts, mal
   darunter, je nachdem wie lang die Anschrift war.

   Jetzt ein festes Raster: links der Betrieb, rechts die Rollen. Und
   die Anschrift steht in einer eigenen Zeile darunter statt in der
   Kopfzeile - sie ist Beiwerk und soll nicht so breit sein wie der
   Name des Betriebs. */

.pr-taetig { margin: 1.8rem 0; }

.pr-taetig-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.1rem;
}

.pr-taetig-item {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: .2rem 1.6rem;
    align-items: start;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--light-gray);
}
.pr-taetig-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.pr-taetig-kopf {
    grid-column: 1;
    display: grid;
    gap: .15rem;
    margin: 0;
}

.pr-taetig-name { font-weight: 600; font-size: 1.02rem; }
.pr-taetig-name a { text-decoration: none; }
.pr-taetig-name a:hover { text-decoration: underline; }

/* Anschrift: normale Schrift, klein und grau. Monospace war hier
   falsch - sie ist für Zahlen und Kennungen gedacht, nicht für
   Straßennamen. Bei "Zu den kurzen Enden 1" macht sie die Zeile ein
   Drittel breiter, ohne etwas zu gewinnen. */
.pr-taetig-adresse {
    font-size: .86rem;
    color: var(--medium-gray);
    line-height: 1.5;
}

/* Art und Zeitraum: hier passt die Monospace, es sind Angaben in
   fester Form - "selbständig · seit 2012". */
.pr-taetig-meta {
    font-size: .78rem;
    color: var(--medium-gray);
    font-family: var(--mono);
    line-height: 1.5;
}

/* ---------- Rollen je Tätigkeit ---------- */

/* Rollen: rechte Spalte, ohne senkrechte Linie. Die Linie war eine
   dritte Umrandungsart neben Kästen und Pillen - Chanel-Regel: ein
   Schmuckstück weniger. */
.pr-rollen {
    grid-column: 2;
    grid-row: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .2rem;
}

.pr-rollen li { display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; }
.pr-rolle { font-size: .95rem; }
.pr-rolle::before {
    content: "";
    display: inline-block;
    width: .35rem; height: .35rem;
    margin-right: .45rem;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: .12em;
}

@media (max-width: 640px) {
    .pr-taetig-item { grid-template-columns: 1fr; gap: .4rem; }
    .pr-rollen { grid-column: 1; grid-row: auto; }
}

/* ---------- Filterleisten ----------
   Die Kategorien waren zuvor <span> mit Schaltflächenoptik: Sie sahen
   klickbar aus und waren es nicht. Jetzt sind es echte <button>, und
   die Zustände sind sichtbar - gedrückt heißt gefiltert. */

.gl-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 1rem; }

.gl-cat {
    font: inherit;
    font-size: .88rem;
    background: #fff;
    border: 1px solid var(--light-gray);
    border-radius: 999px;
    padding: .35rem .9rem;
    cursor: pointer;
    color: var(--text-dark);
    transition: var(--transition);
}
.gl-cat em { font-style: normal; opacity: .55; margin-left: .3rem; font-size: .85em; }
.gl-cat:hover { border-color: var(--accent); }
.gl-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gl-cat.is-aktiv {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.gl-cat.is-aktiv em { opacity: .8; }

.gl-alpha a.is-aktiv {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Statuszeile: sagt, wie viele Einträge die Auswahl übrig lässt, und
   bietet den Weg zurück. Ohne sie steht der Nutzer vor einer
   gekürzten Liste, ohne zu wissen warum. */
.gl-filterstatus {
    margin: .2rem 0 1.2rem;
    font-size: .9rem;
    color: var(--medium-gray);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
}
.gl-filterstatus button {
    font: inherit;
    font-size: .85rem;
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    padding: 0;
    cursor: pointer;
    color: var(--accent-text);
}

/* ---------- Profilbilder ----------
   Zwei Erscheinungsformen: das grosse Portrait im Profilkopf und der
   kleine Avatar in Listen. Beide bewusst ohne Text im Bild - der Name
   steht daneben, und was im Bild steht, liest kein Vorleseprogramm.

   Das CI entsteht ueber Form und Rahmen, nicht ueber eingebauten
   Text: weiche Rundung, duenner Rahmen, leichter Schatten. Damit wirkt
   das Portrait als Familie mit dem Vorschaubild, ohne Information zu
   verstecken. */

.pr-photo {
    width: 128px;
    height: 128px;
    border-radius: 20px;
    object-fit: cover;
    border: 1px solid var(--light-gray);
    box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
    background: var(--off-white);
}

/* Avatar in Listen. Gleiche Kantenlaenge wie das Emoji-Feld daneben,
   damit die Zeilen nicht springen, je nachdem ob jemand ein Bild hat. */
.sk-avatar-bild {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--light-gray);
    flex: 0 0 auto;
    background: var(--off-white);
}

@media (max-width: 640px) {
    .pr-photo { width: 96px; height: 96px; border-radius: 16px; }
}

/* Verweise: Herkunft der Bestätigung sichtbar halten. Grün für den
   maschinellen Fund, neutral für das redaktionelle Urteil - der
   Unterschied soll auffallen, ohne das eine abzuwerten. */
.pr-verified--hand {
    background: var(--off-white);
    color: var(--medium-gray);
    border: 1px solid var(--light-gray);
}

/* Mitgliederbereich und Backend: Verweisliste */
.mb-links { list-style: none; margin: .6rem 0 1rem; padding: 0; display: grid; gap: .5rem; }
.mb-links li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
               padding-bottom: .5rem; border-bottom: 1px solid var(--light-gray); }
.mb-ok    { font-size: .78rem; color: #15803D; }
.mb-offen { font-size: .78rem; color: var(--medium-gray); }
.btn-mini { font: inherit; font-size: .78rem; background: none; border: 0;
            border-bottom: 1px solid currentColor; padding: 0; cursor: pointer;
            color: var(--medium-gray); }