/* Klassenpunkte – Stile für Admin und Klassenanzeige */

.kp-wrap,
.kp-app,
.kp-board {
	--kp-ink: #1d2733;
	--kp-muted: #646970;
	--kp-line: #e2e4e7;
	--kp-card: #fff;
	--kp-bg-soft: #f6f7f7;
	--kp-good: #1f9d63;
	--kp-good-dark: #157a4b;
	--kp-good-soft: #e3f5ec;
	--kp-gold: #f2a91d;
	--kp-gold-soft: #fff4dc;
	--kp-low: #d63638;
	--kp-mid: #dba617;
	--kp-radius: 10px;
	color: var(--kp-ink);
}

/* ---------- Grundlayout ---------- */

.kp-card {
	background: var(--kp-card);
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius);
	padding: 16px 20px;
	margin: 16px 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.kp-card h2,
.kp-card h3 {
	margin-top: 0.2em;
}

.kp-narrow {
	max-width: 720px;
}

.kp-muted {
	color: var(--kp-muted);
}

.kp-empty {
	padding: 28px;
	font-size: 14px;
}

.kp-split {
	display: grid;
	grid-template-columns: minmax(220px, 280px) 1fr;
	gap: 16px;
	align-items: start;
}

.kp-split__main > .kp-card:first-child,
.kp-split__side {
	margin-top: 16px;
}

.kp-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 16px;
}

.kp-cols > .kp-card {
	margin: 0;
}

.kp-cols {
	margin: 16px 0;
}

.kp-section-title {
	font-size: 1.4em;
	margin: 22px 0 6px;
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.kp-back {
	font-size: 13px;
	font-weight: 400;
	text-decoration: none;
}

.kp-navlist {
	margin: 0 0 16px;
}

.kp-navlist li {
	margin: 0;
}

.kp-navlist a {
	display: block;
	padding: 7px 10px;
	border-radius: 6px;
	text-decoration: none;
	color: var(--kp-ink);
}

.kp-navlist a:hover {
	background: var(--kp-bg-soft);
}

.kp-navlist .is-active a {
	background: var(--kp-good-soft);
	font-weight: 600;
}

.kp-navlist .is-archived a {
	color: var(--kp-muted);
}

.kp-navlist small {
	color: var(--kp-muted);
	margin-left: 6px;
	font-weight: 400;
}

/* ---------- Formulare ---------- */

.kp-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	align-items: flex-end;
}

.kp-form-row label,
.kp-form-stack label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600;
	font-size: 13px;
}

.kp-form-stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kp-form-stack .kp-switch,
.kp-form-row .kp-switch {
	flex-direction: row;
	font-weight: 400;
}

.kp-form-stack input[type="text"],
.kp-form-stack input[type="number"] {
	width: 100%;
}

.kp-inline-form {
	margin-top: 10px;
}

.kp-switch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.kp-grid-5 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.kp-grid-5 label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600;
}

/* ---------- Tabellen ---------- */

.kp-table th,
.kp-table td {
	vertical-align: middle;
}

.kp-table thead th {
	font-weight: 600;
}

.kp-center {
	text-align: center !important;
}

.kp-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.kp-inactive {
	opacity: 0.55;
}

.kp-table-scroll {
	overflow-x: auto;
}

.kp-th-sub {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--kp-muted);
	white-space: nowrap;
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 auto;
}

.kp-note-row td {
	color: var(--kp-muted);
	padding-top: 0 !important;
	font-style: italic;
}

.kp-col-meter {
	min-width: 180px;
}

/* ---------- Hinweise & Badges ---------- */

.kp-hint {
	background: var(--kp-gold-soft);
	border-left: 4px solid var(--kp-gold);
	padding: 10px 14px;
	border-radius: 6px;
	margin: 16px 0;
}

.kp-badge {
	display: inline-block;
	background: var(--kp-gold-soft);
	color: #7a5300;
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.kp-badge--open {
	background: #fde8e8;
	color: #8a1f1f;
}

/* ---------- Phasen-Kacheln (Bewertung) ---------- */

.kp-phases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 14px 0 18px;
}

.kp-phase input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kp-phase__box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 112px;
	padding: 12px 8px;
	border: 2px dashed #c3c4c7;
	border-radius: 14px;
	background: var(--kp-bg-soft);
	cursor: pointer;
	text-align: center;
	transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
	user-select: none;
}

.kp-phase__box:hover {
	border-color: var(--kp-good);
}

.kp-phase__num {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: #a7aaad;
}

.kp-phase__name {
	font-weight: 600;
	font-size: 13px;
	line-height: 1.25;
}

.kp-phase__state {
	position: absolute;
	top: 8px;
	right: 10px;
	font-size: 16px;
	opacity: 0;
}

.kp-phase input:checked + .kp-phase__box {
	background: var(--kp-good);
	border: 2px solid var(--kp-good-dark);
	color: #fff;
	transform: scale(1.02);
}

.kp-phase input:checked + .kp-phase__box .kp-phase__num {
	color: #fff;
}

.kp-phase input:checked + .kp-phase__box .kp-phase__state {
	opacity: 1;
}

.kp-phase input:focus-visible + .kp-phase__box {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

.kp-phase.is-locked .kp-phase__box {
	cursor: not-allowed;
	transform: none;
}

/* ---------- Ergebnis-Bereich ---------- */

.kp-rate__result {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	align-items: center;
	padding: 18px 0 8px;
	border-top: 1px solid var(--kp-line);
}

.kp-rate__label {
	margin-bottom: 8px;
	font-size: 14px;
}

.kp-rate__label strong {
	font-size: 22px;
}

.kp-reward {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--kp-gold-soft);
	border: 2px solid var(--kp-gold);
	border-radius: 12px;
	padding: 10px 14px;
	animation: kp-pop 0.25s ease;
}

.kp-reward[hidden] {
	display: none;
}

.kp-reward__icon {
	font-size: 28px;
}

.kp-reward__game {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-top: 4px;
	font-size: 13px;
}

@keyframes kp-pop {
	from {
		transform: scale(0.9);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.kp-note {
	display: block;
	margin-top: 14px;
	font-weight: 600;
}

.kp-note textarea {
	margin-top: 4px;
	font-weight: 400;
}

.kp-savebar {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 12px 20px;
	margin: 16px 0;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}

/* ---------- Regler / Fortschritt (mit Avatar) ---------- */

.kp-meter {
	--h: 18px;
	--knob: 50px;
	--fill-a: #4cc38a;
	--fill-b: #1f9d63;
	position: relative;
	padding: calc(var(--knob) / 2 + 22px) calc(var(--knob) / 2 + 4px) calc(var(--knob) / 2 - var(--h) / 2 + 34px);
}

.kp-meter--md {
	--h: 18px;
	--knob: 50px;
}

.kp-meter--lg {
	--h: 26px;
	--knob: 68px;
}

.kp-meter--sm {
	--h: 10px;
	--knob: 32px;
	padding: calc(var(--knob) / 2 - var(--h) / 2 + 2px) calc(var(--knob) / 2 + 2px);
	min-width: 140px;
}

.kp-meter.has-label {
	padding-bottom: calc(var(--knob) / 2 - var(--h) / 2 + 54px);
}

.kp-meter__track {
	position: relative;
	height: var(--h);
	border-radius: 999px;
	background:
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 0 6px, transparent 6px 12px),
		#e6e9ee;
	box-shadow: inset 0 2px 4px rgba(16, 24, 40, 0.12);
}

.kp-meter__fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--fill-a), var(--fill-b));
	box-shadow: 0 2px 6px rgba(31, 157, 99, 0.35);
	transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
	overflow: hidden;
}

.kp-meter__fill::after {
	content: "";
	position: absolute;
	inset: 2px 6px auto 6px;
	height: 35%;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.45);
}

.kp-meter.is-reached {
	--fill-a: #34c27f;
	--fill-b: #f2a91d;
}

.kp-meter__ticks span {
	position: absolute;
	top: 50%;
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.08);
}

.kp-meter--sm .kp-meter__ticks {
	display: none;
}

.kp-meter__marker {
	position: absolute;
	top: -5px;
	bottom: -5px;
	width: 0;
	border-left: 3px dashed #f2a91d;
	margin-left: -1.5px;
}

.kp-meter__flag {
	position: absolute;
	left: 50%;
	top: calc(var(--h) / 2 + var(--knob) / 2 + 4px);
	transform: translateX(-50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff4dc;
	border: 2px solid #f2a91d;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
}

.kp-meter__marker-label {
	position: absolute;
	left: 50%;
	top: calc(var(--h) / 2 + var(--knob) / 2 + 33px);
	transform: translateX(-50%);
	font-size: 12px;
	font-weight: 700;
	color: #8a5d00;
	background: #fff4dc;
	border-radius: 999px;
	padding: 1px 10px;
	white-space: nowrap;
}

.kp-meter--sm .kp-meter__flag,
.kp-meter--sm .kp-meter__marker-label {
	display: none;
}

.kp-meter__knob {
	position: absolute;
	top: 50%;
	width: var(--knob);
	height: var(--knob);
	transform: translate(-50%, -50%);
	z-index: 2;
	transition: left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kp-meter__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ffffff, #eef7f2);
	border: 4px solid var(--fill-b);
	box-shadow: 0 4px 12px rgba(16, 24, 40, 0.22), inset 0 -3px 0 rgba(16, 24, 40, 0.06);
	font-size: calc(var(--knob) * 0.52);
	line-height: 1;
	box-sizing: border-box;
	user-select: none;
}

.kp-meter--sm .kp-meter__avatar {
	border-width: 3px;
}

.kp-meter__value {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 7px);
	transform: translateX(-50%);
	min-width: 26px;
	padding: 2px 9px;
	border-radius: 999px;
	background: #1d2733;
	color: #fff;
	font-size: calc(10px + var(--knob) * 0.1);
	font-weight: 700;
	text-align: center;
	line-height: 1.4;
	white-space: nowrap;
}

.kp-meter__value::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: #1d2733;
}

.kp-meter.is-reached .kp-meter__value {
	background: #b97800;
}

.kp-meter.is-reached .kp-meter__value::after {
	border-top-color: #b97800;
}

.kp-meter--sm .kp-meter__value {
	display: none;
}

.kp-meter.is-full .kp-meter__avatar {
	animation: kp-glow 1.8s ease-in-out infinite;
}

.kp-meter__knob.is-hop .kp-meter__avatar {
	animation: kp-hop 0.5s ease;
}

@keyframes kp-hop {
	0% {
		transform: translateY(0) scale(1);
	}
	35% {
		transform: translateY(-10px) scale(1.08);
	}
	70% {
		transform: translateY(0) scale(0.97);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

@keyframes kp-glow {
	0%,
	100% {
		box-shadow: 0 4px 12px rgba(16, 24, 40, 0.22), 0 0 0 0 rgba(242, 169, 29, 0.55);
	}
	50% {
		box-shadow: 0 4px 12px rgba(16, 24, 40, 0.22), 0 0 0 10px rgba(242, 169, 29, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kp-meter__fill,
	.kp-meter__knob {
		transition: none;
	}

	.kp-meter__avatar {
		animation: none !important;
	}
}

.kp-inline-meter {
	display: flex;
	align-items: center;
	gap: 8px;
}

.kp-inline-meter .kp-meter {
	flex: 1;
}

/* ---------- Avatare ---------- */

.kp-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border-radius: 50%;
	background: #eef7f2;
	border: 2px solid #c9ead8;
	line-height: 1;
	vertical-align: middle;
}

.kp-avatar--sm {
	width: 28px;
	height: 28px;
	font-size: 16px;
}

.kp-avatar--md {
	width: 42px;
	height: 42px;
	font-size: 24px;
}

.kp-avatar--lg {
	width: 58px;
	height: 58px;
	font-size: 34px;
}

.kp-avatar--xl {
	width: 96px;
	height: 96px;
	font-size: 58px;
	border-width: 4px;
}

.kp-namecell {
	white-space: nowrap;
}

.kp-namecell .kp-avatar {
	margin-right: 6px;
}

.kp-avatar-select {
	font-size: 18px;
	min-width: 64px;
}

/* ---------- Stempelkarte ---------- */

.kp-stampcard {
	display: inline-flex;
	gap: 4px;
	vertical-align: middle;
}

.kp-stamp {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px dashed #c3c4c7;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: #a7aaad;
	background: #fff;
}

.kp-stamp.is-on {
	border: 2px solid #b8336a;
	background: #fbe3ee;
	color: #b8336a;
	font-size: 13px;
	transform: rotate(-8deg);
}

.kp-stampcard--lg {
	gap: 10px;
	padding: 12px 16px;
	border: 2px solid #f0d6e2;
	border-radius: 14px;
	background: #fff9fb;
}

.kp-stampcard--lg .kp-stamp {
	width: 48px;
	height: 48px;
	font-size: 18px;
}

.kp-stampcard--lg .kp-stamp.is-on {
	font-size: 26px;
}

.kp-stampgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}

.kp-stampkid input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kp-stampkid__box {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	border: 2px solid var(--kp-line);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.kp-stampkid__name {
	font-weight: 600;
}

.kp-stampkid__action {
	font-size: 12px;
	color: #b8336a;
	font-weight: 600;
}

.kp-stampkid input:checked + .kp-stampkid__box {
	border-color: #b8336a;
	background: #fff4f8;
}

.kp-stampkid input:focus-visible + .kp-stampkid__box {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

.kp-stampkid.is-locked .kp-stampkid__box {
	cursor: default;
}

.kp-stampsection {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
}

.kp-cards {
	margin: 0;
}

.kp-cards__item {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--kp-line);
}

.kp-cards__no {
	font-weight: 600;
	min-width: 60px;
}

.kp-cards__item.is-open .kp-cards__no::after {
	content: " 🎁";
}

.kp-stamplog {
	margin-top: 12px;
}

/* ---------- Einzelbewertung: Häkchen ---------- */

.kp-details > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.kp-details > summary::-webkit-details-marker {
	display: none;
}

.kp-details > summary h2 {
	margin: 0.2em 0;
}

.kp-details > summary h2::before {
	content: "▸ ";
	color: var(--kp-muted);
}

.kp-details[open] > summary h2::before {
	content: "▾ ";
}

.kp-tick {
	display: inline-block;
	cursor: pointer;
}

.kp-tick input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kp-tick span[aria-hidden] {
	display: inline-flex;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 2px solid #c3c4c7;
	background: #fff;
	align-items: center;
	justify-content: center;
	transition: background 0.12s ease;
}

.kp-tick input:checked + span[aria-hidden] {
	background: var(--kp-good);
	border-color: var(--kp-good-dark);
}

.kp-tick input:checked + span[aria-hidden]::after {
	content: "✓";
	color: #fff;
	font-weight: 700;
}

.kp-tick.is-locked input:checked + span[aria-hidden]::after {
	content: "🔒";
	font-size: 12px;
}

.kp-tick input:focus-visible + span[aria-hidden] {
	outline: 3px solid #2271b1;
	outline-offset: 1px;
}

.kp-tick.is-locked {
	cursor: not-allowed;
}

/* ---------- Auswertung ---------- */

.kp-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin: 12px 0;
}

.kp-kpi {
	background: var(--kp-card);
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-radius);
	padding: 14px 16px;
}

.kp-kpi__value {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
}

.kp-kpi__label {
	font-weight: 600;
	margin-top: 4px;
}

.kp-kpi__sub {
	color: var(--kp-muted);
	font-size: 12px;
}

.kp-big-number {
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 4px;
}

.kp-big-number small {
	font-size: 20px;
	color: var(--kp-muted);
	font-weight: 400;
}

.kp-chart-scroll {
	overflow-x: auto;
	padding-bottom: 4px;
}

.kp-chart {
	display: block;
	font-family: inherit;
}

.kp-chart__grid {
	stroke: #eceef0;
	stroke-width: 1;
}

.kp-chart__axis {
	fill: var(--kp-muted);
	font-size: 11px;
}

.kp-chart__value {
	fill: var(--kp-ink);
	font-size: 11px;
	font-weight: 600;
}

.kp-chart__bar {
	fill: #9ccdb4;
}

.kp-chart__bar.is-reached {
	fill: var(--kp-good);
}

.kp-chart__bar.is-current {
	stroke: var(--kp-ink);
	stroke-width: 2;
	stroke-dasharray: 4 3;
}

.kp-chart__goal {
	stroke: var(--kp-gold);
	stroke-width: 2;
	stroke-dasharray: 6 4;
}

.kp-chart__goal-label {
	fill: #8a5d00;
	font-size: 11px;
	font-weight: 600;
}

.kp-legend {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--kp-muted);
}

.kp-legend__item::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	margin-right: 6px;
	vertical-align: -2px;
	background: #9ccdb4;
}

.kp-legend__item.is-reached::before {
	background: var(--kp-good);
}

.kp-legend__item.is-current::before {
	background: transparent;
	border: 2px dashed var(--kp-ink);
	width: 9px;
	height: 9px;
}

.kp-phasebars {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.kp-phasebar {
	display: grid;
	grid-template-columns: minmax(110px, 170px) 1fr auto;
	gap: 10px;
	align-items: center;
}

.kp-phasebar__name {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kp-phasebar__track {
	height: 12px;
	background: #e8eaec;
	border-radius: 999px;
	overflow: hidden;
}

.kp-phasebar__track span {
	display: block;
	height: 100%;
	border-radius: 999px;
}

.kp-phasebar--good .kp-phasebar__track span {
	background: var(--kp-good);
}

.kp-phasebar--mid .kp-phasebar__track span {
	background: var(--kp-mid);
}

.kp-phasebar--low .kp-phasebar__track span {
	background: var(--kp-low);
}

.kp-phasebar__value {
	font-size: 12px;
	color: var(--kp-muted);
	white-space: nowrap;
}

.kp-dots {
	display: inline-flex;
	gap: 4px;
	vertical-align: middle;
}

.kp-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #e2e4e7;
	border: 1px solid #c9cccf;
}

.kp-dot.is-on {
	background: var(--kp-good);
	border-color: var(--kp-good-dark);
}

.kp-dots--md .kp-dot {
	width: 16px;
	height: 16px;
}

.kp-dots--lg .kp-dot {
	width: 24px;
	height: 24px;
}

.kp-lessonlist {
	margin: 0;
}

.kp-lessonlist li {
	display: grid;
	grid-template-columns: 150px minmax(80px, 140px) auto 44px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px solid var(--kp-line);
	margin: 0;
}

.kp-lessonlist__subject {
	color: var(--kp-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kp-lessonlist .kp-badge {
	justify-self: start;
}

.kp-printonly {
	display: none;
}

/* ---------- Klassenanzeige (Shortcode) ---------- */

.kp-board {
	font-family: inherit;
	border: 2px solid var(--kp-line);
	border-radius: 18px;
	padding: 20px 24px;
	background: #fff;
	max-width: 900px;
}

.kp-board__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 1.4em;
	margin-bottom: 10px;
}

.kp-board__head span {
	font-size: 0.7em;
	color: var(--kp-muted);
}

.kp-board__block {
	padding: 12px 0;
	border-top: 1px solid var(--kp-line);
}

.kp-board__label {
	font-weight: 600;
	font-size: 1.1em;
	margin-bottom: 8px;
}

.kp-board__phases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px;
}

.kp-board__phase {
	text-align: center;
	padding: 12px 6px;
	border-radius: 12px;
	background: var(--kp-bg-soft);
	border: 2px dashed #c3c4c7;
	font-weight: 600;
	color: var(--kp-muted);
}

.kp-board__phase.is-on {
	background: var(--kp-good);
	border: 2px solid var(--kp-good-dark);
	color: #fff;
}

.kp-board__win {
	font-size: 1.2em;
	font-weight: 700;
	color: #8a5d00;
	background: var(--kp-gold-soft);
	border-radius: 10px;
	padding: 8px 12px;
	margin: 10px 0 0;
}

/* ---------- Responsiv ---------- */

@media (max-width: 960px) {
	.kp-split {
		grid-template-columns: 1fr;
	}

	.kp-rate__result {
		grid-template-columns: 1fr;
	}

	.kp-lessonlist li {
		grid-template-columns: 1fr auto auto;
	}

	.kp-lessonlist li .kp-meter,
	.kp-lessonlist__subject {
		display: none;
	}
}

@media (max-width: 640px) {
	.kp-phases,
	.kp-board__phases {
		grid-template-columns: repeat(2, 1fr);
	}

	.kp-phase__box {
		min-height: 84px;
	}

	.kp-phasebar {
		grid-template-columns: 1fr auto;
	}

	.kp-phasebar__track {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* ---------- Druck ---------- */

@media print {
	#adminmenumain,
	#wpadminbar,
	#wpfooter,
	.notice,
	.page-title-action,
	.kp-noprint {
		display: none !important;
	}

	#wpcontent {
		margin-left: 0 !important;
		padding: 0 !important;
	}

	.kp-printonly {
		display: inline-block;
	}

	.kp-card,
	.kp-kpi {
		break-inside: avoid;
		box-shadow: none;
	}

	.kp-wrap * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

.kp-lessonlist .kp-meter {
	max-width: 260px;
}

/* ---------- Korrektur (nur Administratoren) ---------- */

.kp-correct {
	border-color: #f0c3c3;
	background: #fffafa;
}

.kp-correct > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.kp-correct > summary::-webkit-details-marker {
	display: none;
}

.kp-correct > summary h2 {
	margin: 0.2em 0;
	font-size: 1.1em;
	color: #8a1f1f;
}

.kp-correct__intro {
	border-left: 4px solid #d63638;
	background: #fff;
	padding: 4px 14px;
	margin: 12px 0;
}

.kp-correct h3 {
	margin: 18px 0 6px;
	font-size: 1em;
}

.kp-correct__reason {
	display: block;
	margin: 18px 0 10px;
	font-weight: 600;
}

.kp-correct__reason textarea {
	margin-top: 4px;
	font-weight: 400;
}

.kp-correct__delete {
	margin-top: 24px;
	padding-top: 12px;
	border-top: 1px dashed #e0b4b4;
}

.kp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kp-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kp-chip span {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--kp-good-soft);
	border: 2px solid var(--kp-good);
	color: var(--kp-good-dark);
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

.kp-chip--sm span {
	padding: 2px 10px;
}

.kp-chip input:checked + span {
	background: #fde8e8;
	border-color: #d63638;
	color: #8a1f1f;
	text-decoration: line-through;
}

.kp-chip input:focus-visible + span {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

.kp-button-danger.button {
	color: #b32d2e;
	border-color: #b32d2e;
}

.kp-button-danger.button:hover {
	background: #b32d2e;
	color: #fff;
	border-color: #b32d2e;
}

.kp-grow {
	flex: 1;
	min-width: 240px;
}

.kp-grow input {
	width: 100%;
}

.kp-stamplog li {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: center;
}

.kp-stamplog__fix {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.kp-stamplog__fix input[type="text"] {
	width: 180px;
}

.kp-badge--correct {
	background: #fde8e8;
	color: #8a1f1f;
}

.kp-nowrap {
	white-space: nowrap;
}

.kp-log__details {
	color: var(--kp-muted);
	font-size: 12px;
	margin-top: 2px;
}

/* =====================================================================
 * Webseiten-Oberfläche [klassenpunkte_app]
 * Eigene Grundstile, damit es in jedem Theme gleich aussieht.
 * ================================================================== */

.kp-app {
	--kp-accent: #2563eb;
	max-width: 1200px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

.kp-app *,
.kp-app *::before,
.kp-app *::after {
	box-sizing: border-box;
}

.kp-app h1,
.kp-app h2,
.kp-app h3 {
	font-family: inherit;
	color: var(--kp-ink);
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.25;
}

.kp-app h2 {
	font-size: 1.25em;
	margin: 0.3em 0 0.6em;
}

.kp-app h3 {
	font-size: 1.05em;
	margin: 0.3em 0 0.8em;
}

.kp-app a {
	color: var(--kp-accent);
}

.kp-app p {
	margin: 0.5em 0;
}

.kp-app ul,
.kp-app ol {
	padding-left: 0;
	list-style: none;
}

.kp-app .kp-stamplog ol {
	list-style: decimal;
	padding-left: 1.4em;
}

.kp-app input[type="text"],
.kp-app input[type="date"],
.kp-app input[type="number"],
.kp-app input[type="password"],
.kp-app select,
.kp-app textarea {
	font: inherit;
	font-size: 15px;
	color: var(--kp-ink);
	background: #fff;
	border: 1px solid #c3c8cf;
	border-radius: 8px;
	padding: 8px 10px;
	min-height: 40px;
	max-width: 100%;
	box-shadow: none;
}

.kp-app select {
	padding-right: 28px;
}

.kp-app input:focus,
.kp-app select:focus,
.kp-app textarea:focus {
	outline: 2px solid var(--kp-accent);
	outline-offset: 1px;
	border-color: var(--kp-accent);
}

.kp-app .large-text {
	width: 100%;
}

.kp-app .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Buttons */
.kp-app .button,
.kp-app button.button,
.kp-app .kp-login input[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	padding: 9px 16px;
	min-height: 40px;
	border-radius: 10px;
	border: 1px solid #c3c8cf;
	background: #fff;
	color: var(--kp-ink);
	cursor: pointer;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.kp-app .button:hover {
	border-color: var(--kp-ink);
}

.kp-app .button.button-primary,
.kp-app .kp-login input[type="submit"] {
	background: var(--kp-good);
	border-color: var(--kp-good-dark);
	color: #fff;
}

.kp-app .button.button-primary:hover {
	background: var(--kp-good-dark);
	color: #fff;
}

.kp-app .button.button-hero {
	font-size: 17px;
	padding: 14px 28px;
	min-height: 54px;
	border-radius: 14px;
}

.kp-app .button-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--kp-accent);
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
}

/* Tabellen */
.kp-app .widefat {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--kp-line);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	margin: 0;
}

.kp-app .widefat th,
.kp-app .widefat td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--kp-line);
	text-align: left;
	font-size: 14px;
}

.kp-app .widefat thead th {
	background: var(--kp-bg-soft);
	font-size: 13px;
}

.kp-app .widefat.striped > tbody > tr:nth-child(odd) {
	background: #fafbfc;
}

/* Meldungen */
.kp-app .notice {
	border-radius: 10px;
	padding: 4px 16px;
	margin: 12px 0;
	border-left: 5px solid var(--kp-good);
	background: var(--kp-good-soft);
}

.kp-app .notice-warning {
	border-left-color: var(--kp-gold);
	background: var(--kp-gold-soft);
}

.kp-app .notice-error {
	border-left-color: var(--kp-low);
	background: #fde8e8;
}

/* Kopfzeile mit Menü */
.kp-app__bar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding: 12px 16px;
	margin-bottom: 18px;
	background: rgba(255, 255, 255, 0.97);
	border: 1px solid var(--kp-line);
	border-radius: 18px;
	box-shadow: 0 6px 20px rgba(16, 24, 40, 0.07);
}

.admin-bar .kp-app__bar {
	top: 32px;
}

.kp-app__brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kp-app__brand strong {
	display: block;
	font-size: 13px;
	color: var(--kp-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.kp-app__classform select {
	font-weight: 700;
	font-size: 16px;
	border: 0;
	padding: 0 24px 0 0;
	min-height: 0;
	background-color: transparent;
}

.kp-app__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 4px;
	background: var(--kp-bg-soft);
	border-radius: 14px;
	flex: 1;
	justify-content: center;
}

.kp-app__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: 10px;
	color: var(--kp-ink) !important;
	text-decoration: none !important;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.kp-app__tab:hover {
	background: #fff;
}

.kp-app__tab.is-active {
	background: #fff;
	color: var(--kp-good-dark) !important;
	box-shadow: 0 2px 6px rgba(16, 24, 40, 0.1);
}

.kp-app__tools {
	display: flex;
	gap: 14px;
	align-items: center;
	font-size: 14px;
}

.kp-app__toollink {
	text-decoration: none;
	color: var(--kp-muted) !important;
	white-space: nowrap;
}

.kp-app__toollink:hover {
	color: var(--kp-ink) !important;
}

.kp-title {
	font-size: 26px !important;
	margin: 4px 0 8px !important;
}

.kp-titlebar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.kp-period {
	color: var(--kp-muted);
	margin: 4px 0 8px;
}

.kp-filter {
	padding: 12px 16px;
}

/* Kinder-Übersicht */
.kp-kids {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 14px;
	margin: 16px 0;
}

.kp-kid {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 18px 12px;
	background: #fff;
	border: 1px solid var(--kp-line);
	border-radius: 18px;
	color: var(--kp-ink) !important;
	text-decoration: none !important;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.kp-kid:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(16, 24, 40, 0.1);
}

.kp-kid__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.kp-kid__name {
	display: block;
	font-size: 18px;
	font-weight: 700;
}

.kp-kid__meta,
.kp-kid__label {
	display: block;
	font-size: 13px;
	color: var(--kp-muted);
}

.kp-kid__label {
	margin-top: 8px;
}

.kp-kid__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	border-top: 1px solid var(--kp-line);
	padding-top: 8px;
}

.kp-kid .kp-meter {
	margin: 0 -4px;
}

/* Schüler-Detail */
.kp-student-head {
	display: flex;
	gap: 12px;
	align-items: center;
}

.kp-hero {
	display: flex;
	gap: 24px;
	align-items: center;
}

.kp-hero__body {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0 24px;
}

.kp-hero__label {
	font-weight: 600;
	color: var(--kp-muted);
	font-size: 14px;
}

/* Anmeldung */
.kp-login {
	max-width: 420px;
	margin: 30px auto;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--kp-line);
	border-radius: 20px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
}

.kp-login__icon {
	font-size: 46px;
}

.kp-login form {
	text-align: left;
}

.kp-login form p {
	margin: 12px 0;
}

.kp-login label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.kp-login input[type="text"],
.kp-login input[type="password"] {
	width: 100%;
}

.kp-login input[type="submit"] {
	width: 100%;
	justify-content: center;
}

/* Verwaltung: Übersicht */
.kp-start {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	border-left: 5px solid var(--kp-good);
}

.kp-start__icon {
	font-size: 48px;
	line-height: 1;
}

.kp-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 12px;
	margin: 16px 0;
}

.kp-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--kp-line);
	border-radius: 12px;
	text-decoration: none;
	color: var(--kp-ink);
}

.kp-tile:hover {
	border-color: var(--kp-good);
	color: var(--kp-ink);
}

.kp-tile__icon {
	font-size: 28px;
}

.kp-lessonhead {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.kp-lessonhead__points {
	margin-left: auto;
	display: flex;
	gap: 10px;
	align-items: center;
}

@media (max-width: 782px) {
	.admin-bar .kp-app__bar {
		top: 0;
		position: static;
	}

	.kp-app__nav {
		order: 3;
		flex-basis: 100%;
	}

	.kp-app__tab {
		flex: 1;
		justify-content: center;
		padding: 9px 8px;
		font-size: 14px;
	}

	.kp-hero {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

@media print {
	.kp-app__bar,
	.kp-filter {
		display: none !important;
	}
}

@media (max-width: 640px) {
	.kp-savebar {
		padding: 8px;
	}

	.kp-savebar .kp-muted {
		display: none;
	}

	.kp-app .kp-savebar .button {
		width: 100%;
		justify-content: center;
	}
}

/* =====================================================================
 * Senkrechte Säulen-Regler (Vergleich nebeneinander)
 * ================================================================== */

.kp-columns {
	--knob: 50px;
	--track: 24px;
	--colw: 72px;
	--fill-a: #4cc38a;
	--fill-b: #1f9d63;
	margin: 6px 0 4px;
}

.kp-columns--sm {
	--knob: 36px;
	--track: 16px;
	--colw: 52px;
}

.kp-columns--lg {
	--knob: 64px;
	--track: 32px;
	--colw: 120px;
}

.kp-columns__scroll {
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 4px;
}

.kp-columns__inner {
	min-width: calc(var(--n) * var(--colw) + 56px);
	padding-left: 56px;
	text-align: left;
}

.kp-columns--single .kp-columns__inner {
	min-width: 0;
	width: calc(var(--colw) + 56px);
	margin: 0 auto;
	padding-right: 28px;
	box-sizing: content-box;
}

.kp-columns__plot {
	height: var(--plot-h);
	padding: calc(var(--knob) / 2 + 40px) 0 calc(var(--knob) / 2 + 2px);
	box-sizing: border-box;
}

.kp-columns__area {
	position: relative;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(var(--n), minmax(var(--colw), 1fr));
	border-bottom: 2px solid #d5d9df;
}

/* Hilfslinien */
.kp-columns__gl {
	position: absolute;
	left: 0;
	right: 0;
	height: 0;
	border-top: 1px dashed #e3e6ea;
	pointer-events: none;
}

.kp-columns__gl em {
	position: absolute;
	right: 100%;
	top: -8px;
	padding-right: 8px;
	font-style: normal;
	font-size: 11px;
	color: var(--kp-muted);
	white-space: nowrap;
}

/* Gemeinsame Ziellinie quer über alle Säulen */
.kp-columns__goal {
	position: absolute;
	left: -6px;
	right: -6px;
	height: 0;
	border-top: 3px dashed #f2a91d;
	z-index: 1;
	pointer-events: none;
}

.kp-columns__goal span {
	position: absolute;
	right: calc(100% + 22px);
	top: -11px;
	font-size: 14px;
	line-height: 1;
}

.kp-columns__legend {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: #8a5d00;
	background: #fff4dc;
	border: 1px solid #f6d48a;
	border-radius: 999px;
	padding: 2px 12px;
	margin: 4px 0 0;
}

.kp-columns__legend-line {
	display: inline-block;
	width: 22px;
	border-top: 3px dashed #f2a91d;
}

.kp-columns--single {
	text-align: center;
}

.kp-columns--single .kp-columns__inner {
	padding-right: 0;
}

/* Eine Säule */
.kp-col {
	position: relative;
	display: flex;
	justify-content: center;
	height: 100%;
	text-decoration: none !important;
	color: inherit !important;
}

.kp-col__track {
	position: relative;
	width: var(--track);
	height: 100%;
	border-radius: 999px 999px 6px 6px;
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0 6px, transparent 6px 12px),
		#e6e9ee;
	box-shadow: inset 0 2px 4px rgba(16, 24, 40, 0.12);
}

.kp-col__fill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 999px 999px 6px 6px;
	background: linear-gradient(0deg, var(--fill-b), var(--fill-a));
	box-shadow: 0 2px 8px rgba(31, 157, 99, 0.3);
	transition: height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kp-col__fill::after {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 3px;
	width: 30%;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
}

.kp-col.is-reached {
	--fill-a: #f2a91d;
	--fill-b: #1f9d63;
}

.kp-col--good {
	--fill-a: #4cc38a;
	--fill-b: #1f9d63;
}

.kp-col--mid {
	--fill-a: #f6c34a;
	--fill-b: #dba617;
}

.kp-col--low {
	--fill-a: #f08a8b;
	--fill-b: #d63638;
}

/* Knopf mit Avatar sitzt oben auf der Säule */
.kp-col__knob {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--knob);
	height: var(--knob);
	transform: translate(-50%, -50%);
	z-index: 2;
}

.kp-col__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff, #eef7f2);
	border: 4px solid var(--fill-b);
	box-shadow: 0 4px 12px rgba(16, 24, 40, 0.22);
	font-size: calc(var(--knob) * 0.52);
	font-weight: 800;
	line-height: 1;
	color: var(--fill-b);
	box-sizing: border-box;
	user-select: none;
	transition: transform 0.15s ease;
}

.kp-col.is-reached .kp-col__avatar {
	border-color: #f2a91d;
}

a.kp-col:hover .kp-col__avatar,
a.kp-col:focus-visible .kp-col__avatar {
	transform: scale(1.12);
}

a.kp-col:focus-visible {
	outline: none;
}

a.kp-col:focus-visible .kp-col__avatar {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

.kp-col__value {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 7px);
	transform: translateX(-50%);
	padding: 2px 9px;
	border-radius: 999px;
	background: #1d2733;
	color: #fff;
	font-size: calc(10px + var(--knob) * 0.1);
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.kp-col__value::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: #1d2733;
}

.kp-col.is-reached .kp-col__value {
	background: #b97800;
}

.kp-col.is-reached .kp-col__value::after {
	border-top-color: #b97800;
}

.kp-col.is-full .kp-col__avatar {
	animation: kp-glow 1.8s ease-in-out infinite;
}

.kp-col.is-hop .kp-col__avatar {
	animation: kp-hop 0.5s ease;
}

/* Beschriftung unter den Säulen */
.kp-columns__labels {
	display: grid;
	grid-template-columns: repeat(var(--n), minmax(var(--colw), 1fr));
	padding-top: 6px;
}

.kp-columns__label {
	text-align: center;
	padding: 0 4px;
	min-width: 0;
	line-height: 1.25;
}

.kp-columns__label a,
.kp-columns__label strong {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--kp-ink) !important;
	text-decoration: none !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kp-columns__label a:hover {
	color: var(--kp-good-dark) !important;
}

.kp-columns__label small {
	display: block;
	font-size: 12px;
	color: var(--kp-muted);
}

.kp-columns--phases .kp-columns__label strong {
	white-space: normal;
	font-size: 13px;
}

/* Säulen-Leiste auf der Bewertungsseite */
.kp-gauges {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 16px;
	align-items: center;
	padding: 10px 0 4px;
	border-top: 1px solid var(--kp-line);
}

.kp-gauge {
	text-align: center;
}

.kp-gauge__label {
	font-size: 14px;
	margin-bottom: 2px;
}

.kp-gauge__label strong {
	font-size: 22px;
}

.kp-compare-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}

.kp-compare-head h3 {
	margin: 0;
}

.kp-compare-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.kp-compare-form label {
	display: flex;
	gap: 6px;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
}

.kp-hero-gauges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	align-items: flex-end;
	flex: 1;
}

@media (max-width: 782px) {
	.kp-gauges {
		grid-template-columns: 1fr 1fr;
	}

	.kp-gauges .kp-reward {
		grid-column: 1 / -1;
		order: 3;
	}

	.kp-columns--lg {
		--knob: 54px;
		--track: 28px;
		--colw: 96px;
	}
}

@media print {
	.kp-columns__scroll {
		overflow: visible;
	}
}

.kp-week {
	text-align: center;
}

.kp-lessonlist li {
	grid-template-columns: 150px minmax(80px, 140px) auto 44px minmax(0, 1fr);
}

/* =====================================================================
 * Waagerechte Balken (links → rechts)
 * ================================================================== */

.kp-hbars {
	--labelw: 150px;
	display: grid;
	grid-template-columns: var(--labelw) minmax(0, 1fr);
	column-gap: 12px;
	padding: 4px 0 24px;
}

.kp-columns--single .kp-hbars,
.kp-columns--h.kp-columns--single .kp-hbars {
	--labelw: 0px;
	column-gap: 0;
}

.kp-columns--phases .kp-hbars {
	--labelw: 170px;
}

.kp-hbars__overlay {
	grid-column: 2;
	position: relative;
	z-index: 0;
	pointer-events: none;
	padding: 30px calc(var(--knob) / 2 + 6px) 0 calc(var(--knob) / 2);
}

.kp-hbars__lines {
	position: relative;
	height: 100%;
	border-left: 2px solid #d5d9df;
}

.kp-hbars__gl {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 1px dashed #e3e6ea;
}

.kp-hbars__gl em {
	position: absolute;
	top: 100%;
	left: 0;
	transform: translateX(-50%);
	padding-top: 4px;
	font-style: normal;
	font-size: 11px;
	color: var(--kp-muted);
	white-space: nowrap;
}

.kp-hbars__goal {
	position: absolute;
	top: -8px;
	bottom: -6px;
	width: 0;
	border-left: 3px dashed #f2a91d;
	margin-left: -1.5px;
}

.kp-hbars__goal span {
	position: absolute;
	top: -14px;
	left: 0;
	transform: translateX(-50%);
	font-size: 14px;
	line-height: 1;
}

.kp-hbars__label {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	text-align: right;
	padding-top: 30px;
	min-width: 0;
	line-height: 1.25;
}

.kp-hbars__label a,
.kp-hbars__label strong {
	font-weight: 700;
	font-size: 14px;
	color: var(--kp-ink) !important;
	text-decoration: none !important;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kp-hbars__label small {
	font-size: 12px;
	color: var(--kp-muted);
}

.kp-columns--h .kp-col {
	grid-column: 2;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	height: auto;
	min-height: calc(var(--knob) + 30px);
	padding: 30px calc(var(--knob) / 2 + 6px) 0 calc(var(--knob) / 2);
}

.kp-columns--h .kp-col__track {
	width: 100%;
	height: var(--track);
	border-radius: 6px 999px 999px 6px;
	background:
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 0 6px, transparent 6px 12px),
		#e6e9ee;
}

.kp-columns--h .kp-col__fill {
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
	height: auto;
	border-radius: 6px 999px 999px 6px;
	background: linear-gradient(90deg, var(--fill-b), var(--fill-a));
	transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kp-columns--h .kp-col__fill::after {
	top: 3px;
	bottom: auto;
	left: 6px;
	right: 6px;
	width: auto;
	height: 30%;
}

.kp-columns--h .kp-col__knob {
	top: 50%;
	left: 100%;
}

.kp-columns--h .kp-columns__legend {
	margin-bottom: 4px;
}

.kp-columns--h.kp-columns--lg {
	--track: 28px;
}

/* Bewertungsseite & Kind-Detail: Balken untereinander statt nebeneinander */
.kp-dir-h .kp-gauges {
	grid-template-columns: 1fr;
}

.kp-dir-h .kp-gauge {
	text-align: left;
}

.kp-dir-h .kp-hero-gauges {
	flex-direction: column;
	align-items: stretch;
}

.kp-dir-h .kp-week {
	text-align: left;
}

/* Umschalter in der Menüleiste */
.kp-dirswitch {
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	background: var(--kp-bg-soft);
	border-radius: 10px;
}

.kp-dirswitch a {
	padding: 5px 10px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--kp-muted) !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.kp-dirswitch a.is-active {
	background: #fff;
	color: var(--kp-good-dark) !important;
	box-shadow: 0 1px 4px rgba(16, 24, 40, 0.12);
}

@media (max-width: 640px) {
	.kp-hbars {
		--labelw: 84px;
	}

	.kp-columns--phases .kp-hbars {
		--labelw: 100px;
	}

	.kp-app__tools {
		flex-wrap: wrap;
	}
}

@media (max-width: 640px) {
	.kp-columns--h {
		--knob: 38px;
		--track: 16px;
	}

	.kp-columns--h.kp-columns--lg {
		--knob: 46px;
		--track: 20px;
	}

	.kp-hbars {
		--labelw: 64px;
		column-gap: 6px;
	}

	.kp-hbars__label small {
		display: none;
	}

	.kp-columns--h .kp-col,
	.kp-hbars__label {
		padding-top: 26px;
	}
}

/* ---------- Live-Klassenanzeige (Tablet) ---------- */

.kp-board-live {
	position: relative;
}

.kp-board-live:fullscreen {
	background: #fff;
	padding: 3vh 3vw;
	overflow: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kp-board-live:fullscreen .kp-board {
	max-width: none;
	width: 100%;
	border: 0;
	font-size: 1.3em;
}

.kp-board__full {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid var(--kp-line, #e2e4e7);
	background: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.kp-board-live.is-updated .kp-board {
	animation: kp-flash 1.2s ease;
}

@keyframes kp-flash {
	0% {
		box-shadow: 0 0 0 0 rgba(31, 157, 99, 0.6);
	}
	100% {
		box-shadow: 0 0 0 18px rgba(31, 157, 99, 0);
	}
}

/* ---------- Handy verbinden ---------- */

.kp-pairbox {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.kp-pairbox__qr {
	text-align: center;
	padding: 14px;
	border: 2px solid var(--kp-line);
	border-radius: 18px;
	background: #fff;
}

.kp-pairbox__qr svg {
	display: block;
	margin: 0 auto;
}

.kp-pairbox__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 0.12em;
	margin: 8px 0 2px;
}

.kp-pairbox__steps {
	flex: 1;
	min-width: 260px;
}

.kp-app .kp-pairbox__steps ol {
	list-style: decimal;
	padding-left: 1.3em;
}

.kp-pairbox__steps li {
	margin-bottom: 8px;
}

.kp-app__toollink.is-active {
	color: var(--kp-good-dark) !important;
	font-weight: 700;
}

/* ---------- Schüler-Zugang ---------- */

.kp-inline {
	display: inline;
}

.kp-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 700;
	letter-spacing: 0.05em;
	background: var(--kp-bg-soft);
	padding: 2px 6px;
	border-radius: 6px;
}

.kp-login--student {
	border: 3px solid var(--kp-good);
}

.kp-codeform input {
	width: 100%;
	text-align: center;
	font-size: 26px !important;
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 14px !important;
	margin: 6px 0 12px;
	border-radius: 14px !important;
}

.kp-codeform .button {
	width: 100%;
	justify-content: center;
}

.kp-codeform__error {
	color: var(--kp-low);
	font-weight: 700;
}

details.kp-login--teacher {
	padding: 14px 20px;
	max-width: 420px;
	margin: 0 auto 30px;
	box-shadow: none;
}

details.kp-login--teacher summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--kp-muted);
}

.kp-kidbar__hello {
	display: block;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}

.kp-avatarpick {
	position: relative;
	text-align: center;
}

.kp-avatarpick > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.kp-avatarpick > summary::-webkit-details-marker {
	display: none;
}

.kp-avatarpick__hint {
	font-size: 13px;
	font-weight: 700;
	color: var(--kp-good-dark);
}

.kp-avatarpick__panel {
	margin-top: 10px;
	padding: 10px;
	background: var(--kp-bg-soft);
	border-radius: 16px;
	max-width: 440px;
	text-align: left;
}

.kp-avatarpick__tabs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 8px;
	scrollbar-width: thin;
}

.kp-app .kp-avatarpick__tabs button {
	flex: none;
	border: 0;
	border-radius: 999px;
	padding: 7px 12px;
	background: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--kp-ink);
	cursor: pointer;
	white-space: nowrap;
}

.kp-app .kp-avatarpick__tabs button.is-active {
	background: var(--kp-good);
	color: #fff;
}

.kp-avatarpick__group {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.kp-avatarpick__group legend {
	font-weight: 700;
	font-size: 13px;
	color: var(--kp-muted);
	padding: 6px 0 4px;
}

.has-tabs .kp-avatarpick__group legend {
	display: none;
}

.kp-avatarpick__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
	gap: 6px;
}

.kp-app .kp-avatarpick__grid button {
	font-size: 26px;
	line-height: 1;
	padding: 6px 0;
	border-radius: 10px;
	border: 2px solid transparent;
	background: #fff;
	cursor: pointer;
}

.kp-app .kp-avatarpick__grid button.is-on {
	border-color: var(--kp-good);
	background: var(--kp-good-soft);
}



.kp-hint__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.kp-avatarpick > summary:focus:not(:focus-visible) {
	outline: none;
}

/* ---------- Bild-Avatare (Anime-Figuren) ---------- */

.kp-ava-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.kp-avatar.has-img {
	overflow: hidden;
	background: transparent;
}

.kp-meter__avatar,
.kp-col__avatar {
	overflow: hidden;
}

.kp-avatarpick__grid .kp-ava-img {
	width: 100%;
	max-width: 46px;
	height: auto;
	aspect-ratio: 1;
	margin: 0 auto;
}

.kp-app .kp-avatarpick__grid button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
}

.kp-avatarpick__tabicon {
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: -4px;
	line-height: 20px;
	text-align: center;
}

.kp-avatarpick__tabicon .kp-ava-img {
	width: 20px;
	height: 20px;
}

/* ---------- Phasen-Editor ---------- */

.kp-phase-editor {
	list-style: none;
	margin: 14px 0;
	padding: 0;
	max-width: 640px;
}

.kp-phase-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	margin: 0 0 6px;
	border: 1px solid var(--kp-line);
	border-radius: 10px;
	background: #fff;
}

.kp-phase-row.is-new {
	border-color: var(--kp-good);
	background: var(--kp-good-soft);
}

.kp-phase-row__no {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 800;
	background: var(--kp-good);
	color: #fff;
	flex: none;
}

.kp-phase-row input[type="text"] {
	flex: 1;
	min-width: 0;
}

.kp-phase-row__tools {
	display: flex;
	gap: 4px;
	flex: none;
}

.kp-phase-row__tools .button {
	min-width: 34px;
	padding: 0 8px;
}

/* Entfernen-Schalter im Phasen-Editor (Checkbox, funktioniert auch ohne JavaScript). */
.kp-phase-row__remove {
	position: relative;
	min-width: 34px;
	padding: 0 8px !important;
	color: #b32d2e !important;
	border-color: #b32d2e !important;
	cursor: pointer;
	text-align: center;
}

.kp-phase-row__remove input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.kp-phase-row__remove:focus-within {
	box-shadow: 0 0 0 2px #2271b1;
}

.kp-phase-row__undo,
.kp-phase-row__remove input:checked ~ .kp-phase-row__x {
	display: none;
}

.kp-phase-row__remove input:checked ~ .kp-phase-row__undo {
	display: inline;
}

.kp-phase-row__remove.is-disabled {
	opacity: .4;
	cursor: not-allowed;
}

.kp-phase-row.is-removed,
.kp-phase-row:has([data-field="remove"]:checked) {
	background: #fcf0f1;
	border-color: #e5a5a8;
}

.kp-phase-row.is-removed input[type="text"],
.kp-phase-row:has([data-field="remove"]:checked) input[type="text"] {
	text-decoration: line-through;
	color: #8c8f94;
}

.kp-phase-row.is-removed .kp-phase-row__no {
	background: #c3c4c7;
}

.kp-phase-help {
	max-width: 640px;
}

/* Einzelne Kinder direkt in der Bewertungskarte. */
.kp-solo {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 2px dashed var(--kp-line);
	scroll-margin-top: 80px;
}

.kp-solo__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.kp-solo__head h3 {
	margin: 0;
	font-size: 1.2em;
}

.kp-solo__count {
	margin-left: 8px;
	font-size: .75em;
	font-weight: 600;
	color: var(--kp-muted, #646970);
}

.kp-students tr.is-rated > th,
.kp-students tr.is-rated > td {
	background: var(--kp-good-soft);
}

.kp-solo__chart {
	margin-top: 14px;
}

.kp-solo__chart > summary {
	cursor: pointer;
	font-weight: 600;
	color: #2271b1;
	margin-bottom: 10px;
}

.kp-jump {
	margin-left: 6px;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- Einzelpunkte: ✓ Punkt und ⭐ Sternpunkt ---------- */

.kp-kidlegend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 10px 0 14px;
}

.kp-kidgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 10px;
}

.kp-kidcard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px 12px;
	border: 2px solid var(--kp-line);
	border-radius: 14px;
	background: #fff;
	transition: border-color .15s, background .15s;
}

.kp-kidcard.is-on {
	border-color: var(--kp-good);
	background: var(--kp-good-soft);
}

.kp-kidcard.is-star {
	border-color: #e0a100;
	background: #fff8e1;
}

.kp-kidcard__who {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.kp-kidcard__name {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	font-size: 1.05em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kp-kidcard__pts {
	flex: none;
	min-width: 30px;
	height: 30px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	font-weight: 800;
	background: #f0f0f1;
	color: #50575e;
}

.kp-kidcard.is-on .kp-kidcard__pts {
	background: var(--kp-good);
	color: #fff;
}

.kp-kidcard.is-star .kp-kidcard__pts {
	background: #e0a100;
}

.kp-kidcard__btns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.kp-kidbtn {
	position: relative;
	display: block;
	cursor: pointer;
}

.kp-kidbtn input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.kp-kidbtn__face {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 4px 8px;
	border: 2px solid var(--kp-line);
	border-radius: 10px;
	background: #fff;
	font-weight: 700;
	font-size: .95em;
	text-align: center;
	line-height: 1.15;
	user-select: none;
}

.kp-kidbtn__icon {
	font-style: normal;
	font-size: 1.15em;
}

.kp-kidbtn--point input:checked + .kp-kidbtn__face {
	border-color: var(--kp-good);
	background: var(--kp-good);
	color: #fff;
}

.kp-kidbtn--star input:checked + .kp-kidbtn__face {
	border-color: #e0a100;
	background: #ffc928;
	color: #3c2a00;
}

.kp-kidbtn input:focus-visible + .kp-kidbtn__face {
	outline: 3px solid #2271b1;
	outline-offset: 2px;
}

.kp-kidbtn.is-locked,
.kp-kidbtn.is-locked input {
	cursor: default;
}

.kp-kidbtn.is-locked .kp-kidbtn__face::after {
	content: "🔒";
	font-size: .8em;
}

.kp-small {
	font-size: .9em;
}

/* Abzeichen ✓ ⭐ in Listen */
.kp-kidbadges {
	display: inline-flex;
	gap: 4px;
}

.kp-kidbadge {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid var(--kp-line);
	font-size: 13px;
	filter: grayscale(1);
	opacity: .35;
}

.kp-kidbadge.is-on {
	filter: none;
	opacity: 1;
}

.kp-kidbadge--point.is-on {
	background: var(--kp-good);
	border-color: var(--kp-good);
	color: #fff;
}

.kp-kidbadge--star.is-on {
	background: #ffc928;
	border-color: #e0a100;
}

.kp-offscreen {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Stundenplan ---------- */
.kp-timetable {
	border-collapse: separate;
	border-spacing: 4px;
	min-width: 640px;
}

.kp-timetable th {
	text-align: left;
	font-weight: 700;
	padding: 4px 6px;
	white-space: nowrap;
}

.kp-timetable th small {
	display: block;
	font-weight: 400;
	color: var(--kp-muted);
	font-size: 11px;
}

.kp-timetable td {
	padding: 0;
}

.kp-timetable select {
	width: 100%;
	min-width: 110px;
	border-radius: 8px;
}

.kp-timetable td.is-set select {
	background: var(--kp-good-soft);
	border-color: var(--kp-good);
	font-weight: 700;
}

.kp-times td,
.kp-times th {
	padding: 3px 10px 3px 0;
	text-align: left;
}

/* Heute-Leiste beim Eintragen */
.kp-today {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
}

.kp-today__label {
	font-weight: 700;
	margin-right: 4px;
}

.kp-today__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 999px;
	border: 2px solid var(--kp-line);
	background: #fff;
	color: var(--kp-ink);
	text-decoration: none;
	font-weight: 600;
}

.kp-today__item:hover {
	border-color: var(--kp-good);
	color: var(--kp-ink);
}

.kp-today__item.is-current {
	background: var(--kp-good);
	border-color: var(--kp-good);
	color: #fff;
}

.kp-today__item.is-done::after {
	content: "✓";
	font-weight: 800;
}

.kp-today__item small {
	opacity: .75;
	font-weight: 400;
}

.kp-auto {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--kp-gold-soft);
	color: #7a5200;
	font-size: .85em;
	font-weight: 600;
}