/* PRO-Kademie Lernbereich im Erscheinungsbild „PRO-Sulting Signal“.
 * Nutzt die Website-Variablen (--ps-*), wo vorhanden, sonst dieselben Werte als Rückfall.
 * Schriften liegen im Plugin (assets/fonts), nichts wird von fremden Servern geladen. */
@font-face { font-family: "PKL Manrope"; src: url(../fonts/manrope-normal-latin.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "PKL DM Serif Display"; src: url(../fonts/dm-serif-display-normal-latin-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PKL DM Serif Display"; src: url(../fonts/dm-serif-display-italic-latin-400.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

.pkl {
	--pkl-grund: var(--ps-grund, #14161a);
	--pkl-grund-kopf: var(--ps-grund-kopf, #1b1e23);
	--pkl-papier: var(--ps-papier, #edebe4);
	--pkl-fliess: var(--ps-fliess, #b9bcb7);
	--pkl-gedaempft: var(--ps-gedaempft, #9a9e9b);
	--pkl-dim: var(--ps-dim, #8e938f);
	--pkl-rahmen: var(--ps-rahmen, #2a2d31);
	--pkl-feldrand: var(--ps-feldrand, #666b6e);
	--pkl-signal: var(--ps-signal, #f4b400);
	--pkl-signal-hell: var(--ps-signal-hell, #ffd028);
	--pkl-auf-signal: var(--ps-auf-signal, #14161a);
	--pkl-signal-a08: rgba(244, 180, 0, .08);
	--pkl-signal-a15: rgba(244, 180, 0, .15);
	--pkl-fehler: var(--ps-fehler, #f87171);
	--pkl-erfolg: var(--ps-erfolg, #4ade80);
	--pkl-flaeche: #ffffff08;
	--pkl-karte-rand: #ffffff1f;
	--pkl-umriss: var(--ps-knopf-rand-umriss, #ffffff1f);
	--pkl-sans: Manrope, "PKL Manrope", system-ui, sans-serif;
	--pkl-serif: "DM Serif Display", "PKL DM Serif Display", Georgia, serif;
	max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; box-sizing: border-box;
	background: var(--pkl-grund); color: var(--pkl-fliess);
	font-family: var(--pkl-sans); font-size: 16px; line-height: 1.5;
}
.pkl ::selection { background: rgba(244, 180, 0, .3); }
.pkl h1, .pkl h2, .pkl h3, .pkl h4 { color: var(--pkl-papier); font-family: var(--pkl-sans); text-wrap: balance; }
.pkl h1 { font-size: 34px; line-height: 1.06; font-weight: 800; letter-spacing: -.03em; margin: 1.2rem 0 1rem; }
.pkl fieldset { border: 1px solid var(--pkl-karte-rand); border-radius: 10px; padding: 12px 16px; margin: 1.2rem 0; }
.pkl legend { color: var(--pkl-papier); font-weight: 700; padding: 0 .3rem; }
.pkl h2 { font-size: 27px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin: 1.6rem 0 1rem; }
.pkl h3 { font-size: 18px; line-height: 1.3; font-weight: 700; margin: 1.6rem 0 .6rem; }
.pkl h4 { font-size: 16px; font-weight: 700; }
.pkl strong, .pkl b { color: var(--pkl-papier); }
.pkl a { color: var(--pkl-signal); }
.pkl a:hover { color: var(--pkl-signal-hell); }
.pkl em { color: inherit; }
.pkl hr { border: 0; border-top: 1px solid var(--pkl-rahmen); margin: 2rem 0; }
.pkl blockquote { margin: 1.5rem 0; padding: 0; border: 0; font-family: var(--pkl-serif); font-size: 20px; line-height: 1.4; color: var(--pkl-papier); }
.pkl code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .85em; }
.pkl :focus-visible { outline: 3px solid var(--pkl-signal); outline-offset: 2px; border-radius: 2px; }
@media (min-width: 768px) { .pkl h1 { font-size: 46px; } .pkl h2 { font-size: 31px; } }

/* Kursliste und Lektionen */
.pkl-liste { list-style: none; padding: 0; margin: 1rem 0; }
.pkl-liste li { margin: 0 0 12px; }
.pkl-liste a { display: block; padding: 18px 20px; border: 1px solid var(--pkl-karte-rand); border-radius: 10px; text-decoration: none; color: var(--pkl-fliess); font-weight: 400; transition: background .18s, border-color .18s; }
.pkl-liste a:hover, .pkl-liste a:focus-visible { background: #ffffff05; border-color: var(--pkl-feldrand); color: var(--pkl-fliess); }
.pkl-liste strong { display: block; font-size: 17px; font-weight: 700; color: var(--pkl-papier); margin-bottom: 2px; }
.pkl-liste .pkl-stand { margin-top: 6px; }
.pkl-liste span { display: block; }
.pkl-erledigt a { border-color: var(--pkl-rahmen); }
.pkl-stand, .pkl-untertitel { color: var(--pkl-gedaempft); font-size: 14px; font-weight: 400; }
.pkl-zurueck { font-size: 14px; font-weight: 700; text-decoration: none; }
.pkl-fortschritt { color: var(--pkl-gedaempft); font-size: 14px; }

/* Knöpfe als Pille: Hauptknopf Signalgelb, Zweitknopf als Umriss */
.pkl .pkl-knopf { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; padding: 13px 24px; box-sizing: border-box; border: 1px solid var(--pkl-signal); border-radius: 999px; background: var(--pkl-signal); color: var(--pkl-auf-signal); font: 700 14px/1 var(--pkl-sans); cursor: pointer; text-decoration: none; transition: transform .18s, box-shadow .18s; }
.pkl a.pkl-knopf { color: var(--pkl-auf-signal); }
.pkl .pkl-knopf:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -10px rgba(244, 180, 0, .55); color: var(--pkl-auf-signal); }
.pkl .pkl-knopf--zweit, .pkl a.pkl-knopf--zweit { background: transparent; color: var(--pkl-papier); border-color: var(--pkl-feldrand); }
.pkl .pkl-knopf--zweit:hover { background: var(--pkl-signal-a08); box-shadow: none; color: var(--pkl-papier); }
.pkl-link-knopf { background: none; border: 0; padding: 0; color: var(--pkl-fehler); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .pkl .pkl-knopf, .pkl-liste a { transition: none; } .pkl .pkl-knopf:hover { transform: none; } }

.pkl-lernziel, .pkl-regeln, .pkl-hinweis-box { border: 1px solid var(--pkl-karte-rand); border-radius: 10px; padding: 16px 20px; margin: 1rem 0; background: var(--pkl-flaeche); }
.pkl-lernziel strong:first-child { color: var(--pkl-signal); }
.pkl-lektion table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.pkl-lektion th, .pkl-lektion td { border: 1px solid var(--pkl-rahmen); padding: .5rem .7rem; text-align: left; }
.pkl-lektion th { color: var(--pkl-papier); }
.pkl-lektion ul li::marker, .pkl-lektion ol li::marker { color: var(--pkl-signal); }

/* Quiz */
.pkl-quiz { margin: 2rem 0; }
.pkl-frage { border: 1px solid var(--pkl-karte-rand); border-radius: 10px; padding: 16px 20px; margin: 0 0 12px; }
.pkl-frage legend { font-weight: 700; color: var(--pkl-papier); padding: 0 .3rem; }
.pkl-frage label { display: block; padding: .35rem 0; }
.pkl-richtig { border-color: var(--pkl-erfolg); }
.pkl-falsch { border-color: var(--pkl-fehler); }
.pkl-erklaerung { margin: .5rem 0 0; }
.pkl-ergebnis { font-weight: 700; color: var(--pkl-papier); }
.pkl input[type=radio], .pkl input[type=checkbox] { accent-color: var(--pkl-signal); }

/* Meldungen: Farbe nie allein, die Meldung trägt immer ein Wort */
.pkl-meldung { padding: 12px 16px; border: 1px solid var(--pkl-erfolg); border-radius: 10px; color: var(--pkl-papier); }
.pkl-meldung--fehler { border-color: var(--pkl-fehler); }

/* Team und Beitritt */
.pkl-person { border-bottom: 1px solid var(--pkl-rahmen); padding: .8rem 0; }
.pkl-person label, .pkl-einladen label { display: block; margin: .3rem 0; }
.pkl-erledigt-form { margin: 2rem 0; }
.pkl-beitritt label { display: block; margin: 1rem 0; }

/* Eingabefelder */
.pkl input[type=text], .pkl input[type=email], .pkl input[type=password], .pkl input[type=number], .pkl input[type=tel], .pkl textarea, .pkl select {
	box-sizing: border-box; padding: 10px 12px; font: 400 16px/1.4 var(--pkl-sans); color: var(--pkl-papier);
	background: var(--pkl-flaeche); border: 1px solid var(--pkl-feldrand); border-radius: 8px;
}
.pkl input::placeholder, .pkl textarea::placeholder { color: var(--pkl-dim); }
.pkl-einladen input[type=text], .pkl-einladen input[type=email] { display: block; width: 100%; max-width: 360px; }

/* Bilder und interaktive Bausteine (ab 0.3) */
.pkl-lektion img, .pkl-beschreibung img { width: 100%; max-width: 100%; height: auto; display: block; margin: 1.5rem 0; border-radius: 12px; }
.pkl-baustein { border: 1px solid var(--pkl-karte-rand); border-radius: 12px; padding: 24px 20px; margin: 2.5rem 0; background: var(--pkl-grund-kopf); }
.pkl-baustein h3 { margin-top: .3rem; }
.pkl-baustein-art { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 700; color: var(--pkl-signal); margin: 0; }
.pkl-baustein fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pkl-baustein legend { font-weight: 700; color: var(--pkl-papier); padding: 0; margin-bottom: .4rem; }
.pkl-feld { margin: 1.2rem 0; }
.pkl-feld > label, .pkl-feld-frage { display: block; font-weight: 700; color: var(--pkl-papier); margin: 0 0 .4rem; }
.pkl-feld-hinweis { display: block; font-weight: 400; color: var(--pkl-gedaempft); font-size: 14px; }
.pkl-feld input[type=text], .pkl-feld textarea { width: 100%; }
.pkl-feld textarea { min-height: 6rem; resize: vertical; }
.pkl-option { display: block; padding: .3rem 0; }
.pkl-tabelle-rahmen { overflow-x: auto; }
.pkl-tabelle { border-collapse: collapse; width: 100%; min-width: 480px; }
.pkl-tabelle th { text-align: left; font-size: 13px; font-weight: 700; color: var(--pkl-gedaempft); padding: .4rem .3rem; border-bottom: 1px solid var(--pkl-feldrand); }
.pkl-tabelle td { padding: .3rem; border-bottom: 1px solid var(--pkl-rahmen); }
.pkl .pkl-tabelle input { width: 100%; padding: 8px 10px; }
.pkl-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 1.2rem 0 .5rem; }
.pkl-datenschutz-hinweis { font-size: 13px; color: var(--pkl-dim); }
.pkl-karten, .pkl-aussagen { list-style: none; padding: 0; margin: 1rem 0; }
.pkl-karte, .pkl-aussage { border: 1px solid var(--pkl-karte-rand); border-radius: 10px; padding: 16px; margin: 0 0 12px; color: var(--pkl-papier); }
.pkl-karte.pkl-richtig { border-color: var(--pkl-erfolg); }
.pkl-karte.pkl-falsch { border-color: var(--pkl-fehler); }
.pkl-aussage.pkl-offen { border-color: var(--pkl-signal); }
.pkl-wahl, .pkl-skala { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pkl-wahl label, .pkl-skala label { position: relative; }
.pkl-wahl input, .pkl-skala input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pkl-wahl > label > span, .pkl-skala > label > span { display: inline-block; padding: 12px 16px; min-height: 44px; box-sizing: border-box; line-height: 1.4; border: 1px solid var(--pkl-feldrand); border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--pkl-papier); }
.pkl-wahl > label > span:hover, .pkl-skala > label > span:hover { border-color: var(--pkl-signal); }
.pkl-wahl input:checked + span, .pkl-skala input:checked + span { background: var(--pkl-signal); border-color: var(--pkl-signal); color: var(--pkl-auf-signal); }
.pkl-wahl input:focus-visible + span, .pkl-skala input:focus-visible + span { outline: 3px solid var(--pkl-signal); outline-offset: 2px; }
.pkl-karte-rueckmeldung { margin: .8rem 0 0; color: var(--pkl-fliess); }
.pkl-richtig .pkl-karte-rueckmeldung strong { color: var(--pkl-erfolg); }
.pkl-falsch .pkl-karte-rueckmeldung strong { color: var(--pkl-fehler); }
.pkl-auswertung { margin-top: 1rem; }
.pkl-auswertung .pkl-ergebnis { font-size: 18px; }
.pkl-balken { height: 10px; background: var(--pkl-rahmen); border-radius: 999px; overflow: hidden; margin: .4rem 0 .8rem; }
.pkl-balken span { display: block; height: 100%; background: var(--pkl-signal); border-radius: 999px; }
.pkl-hinweis { color: var(--pkl-signal); }

.pkl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pkl-skala { flex-wrap: nowrap; gap: 6px; }
.pkl-skala label { flex: 1 1 0; }
.pkl-skala > label > span { width: 100%; text-align: center; padding: 12px 0; font-family: var(--pkl-serif); font-size: 18px; font-weight: 400; line-height: 1; }
.pkl-skala-legende { display: flex; justify-content: space-between; gap: 1rem; font-size: 13px; color: var(--pkl-gedaempft); margin: .8rem 0 0; }
.pkl .pkl-zeile-plus { margin: .6rem 0; color: var(--pkl-signal); text-decoration: none; font-weight: 700; font-size: 14px; min-height: 44px; }
@media (max-width: 600px) {
	.pkl-tabelle, .pkl-tabelle tbody, .pkl-tabelle tr, .pkl-tabelle td { display: block; min-width: 0; width: 100%; }
	.pkl-tabelle thead { display: none; }
	.pkl-tabelle tr { border: 1px solid var(--pkl-karte-rand); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; box-sizing: border-box; }
	.pkl-tabelle tr[hidden] { display: none; }
	.pkl-tabelle td { border: 0; padding: .25rem 0; }
	.pkl-tabelle td::before { content: attr(data-spalte); display: block; font-size: 13px; font-weight: 700; color: var(--pkl-gedaempft); margin-bottom: 2px; }
	.pkl-baustein { padding: 20px 16px; margin-left: -4px; margin-right: -4px; }
}

/* Jahresgespräche (ab 0.4) */
.pkl-hinweis-box p { margin: .3rem 0; }
.pkl-link-box input { width: 100%; margin: .4rem 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; }
.pkl-pin { border: 1px solid var(--pkl-karte-rand); border-radius: 12px; padding: 16px 20px; margin: 1.5rem 0 1rem; }
.pkl-pin legend { font-weight: 700; color: var(--pkl-papier); padding: 0 .3rem; }
.pkl-pin-feld { display: block; margin: .8rem 0; font-weight: 700; color: var(--pkl-papier); }
.pkl .pkl-pin-feld input { display: block; width: 9em; font-size: 22px; letter-spacing: .3em; margin-top: .3rem; }
.pkl-schritte li { margin: .3rem 0; }
.pkl-schritte li::marker { color: var(--pkl-signal); font-weight: 700; }
.pkl-bogen-zeile { padding: 18px 20px; border: 1px solid var(--pkl-karte-rand); border-radius: 10px; color: var(--pkl-papier); }
.pkl-bogen-zeile strong { font-weight: 700; }
.pkl-bogen-zeile .pkl-stand { display: block; }
.pkl-boegen .pkl-knoepfe { margin: .8rem 0 0; }
.pkl-antworten dt { font-weight: 700; color: var(--pkl-papier); margin-top: 1.2rem; }
.pkl-antworten dd { margin: .3rem 0 0; padding: 10px 14px; border: 1px solid var(--pkl-rahmen); border-radius: 8px; color: var(--pkl-fliess); white-space: pre-line; }
.pkl-leer { color: var(--pkl-dim); font-style: italic; }
.pkl-tabelle--lesen { min-width: 0; }
.pkl-tabelle--lesen td { padding: .4rem .3rem; color: var(--pkl-fliess); }
.pkl-pin-speichern { border-top: 1px solid var(--pkl-rahmen); margin-top: 1.2rem; padding-top: .6rem; }

/* Drucken: immer hell, nur der gewählte Baustein */
@media print {
	body.pkl-druckmodus *:not(.pkl-druck-pfad):not(.pkl-druck-aktiv):not(.pkl-druck-aktiv *) { display: none !important; }
	body.pkl-druckmodus .pkl-druck-pfad { margin: 0 !important; padding: 0 !important; border: 0 !important; max-width: none !important; background: #fff !important; }
	.pkl { background: #fff; color: #3e4441; padding: 0; }
	.pkl h2, .pkl h3, .pkl strong, .pkl legend, .pkl-feld > label, .pkl-feld-frage, .pkl-karte, .pkl-aussage, .pkl-antworten dt, .pkl-bogen-zeile { color: #14161a !important; }
	.pkl-baustein-art { color: #8a6200 !important; }
	.pkl-baustein, body.pkl-druckmodus .pkl-druck-aktiv { background: #fff; border: 0; margin: 0; padding: 0; }
	.pkl-druck-aktiv .pkl-knoepfe, .pkl-druck-aktiv .pkl-datenschutz-hinweis, .pkl-druck-aktiv .pkl-zeile-plus, .pkl-druck-aktiv .pkl-pin-speichern { display: none; }
	.pkl input[type=text], .pkl textarea, .pkl-antworten dd { border: 1px solid #999 !important; background: #fff !important; color: #14161a !important; }
	.pkl-druck-aktiv .pkl-tabelle { min-width: 0; }
	.pkl-tabelle th { color: #565b57; }
}

/* Anmeldung und Profil (ab 0.5) */
.pkl-anmeldung { max-width: 440px; }
.pkl-anmeldung .pkl-feld input { display: block; width: 100%; margin-top: .2rem; }
.pkl-anmeldung h3 { margin-top: 2rem; }
.pkl .pkl-leise { color: var(--pkl-gedaempft); font-size: 14px; }
.pkl .pkl-leise:hover, .pkl .pkl-leise:focus-visible { color: var(--pkl-papier); }