/* Ski-Kita App – eigenständige Oberfläche, auch für das Tablet in der Skihütte */

.ska {
	--ska-blau: #1d5f9c;
	--ska-blau-dunkel: #164a7a;
	--ska-rand: #dfe3e8;
	--ska-grau: #f6f7f9;
	--ska-text: #1d2327;
	--ska-gedimmt: #6b7280;
	--ska-gruen: #0f7a3d;
	--ska-rot: #c0392b;
	--ska-gelb: #b5820a;

	max-width: 1280px;
	margin: 0 auto;
	color: var(--ska-text);
	font-size: 15px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}
.ska *, .ska *::before, .ska *::after { box-sizing: border-box; }

/* Kopfbereich */
.ska-head {
	display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
	padding: 14px 0 12px; margin-bottom: 18px;
	border-bottom: 2px solid var(--ska-rand);
}
.ska-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.ska-brand small { display: block; font-weight: 400; font-size: 12px; color: var(--ska-gedimmt); }
.ska-logo { font-size: 26px; line-height: 1; }
.ska-brand--big { font-size: 22px; justify-content: center; margin-bottom: 8px; }

.ska-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.ska-user { margin-left: auto; }
.ska-nav a {
	padding: 9px 15px; border-radius: 6px; text-decoration: none;
	color: var(--ska-gedimmt); font-weight: 500; white-space: nowrap;
}
.ska-nav a:hover { background: var(--ska-grau); color: var(--ska-text); }
.ska-nav a.is-active { background: var(--ska-blau); color: #fff; }

.ska-user { font-size: 13px; color: var(--ska-gedimmt); text-align: right; }
.ska-user a { display: block; color: var(--ska-blau); text-decoration: none; }

/* Hinweise */
.ska-testmode {
	background: #fdf6e3; border: 1px solid #e8d9a0; border-left: 4px solid var(--ska-gelb);
	border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px;
}
.ska-notice { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.ska-notice--ok { background: #e8f5ec; border-left: 4px solid var(--ska-gruen); }
.ska-notice--error { background: #fdeceb; border-left: 4px solid var(--ska-rot); }

/* Flächen */
.ska-panel {
	background: #fff; border: 1px solid var(--ska-rand); border-radius: 10px;
	padding: 18px 20px; margin-bottom: 18px;
}
.ska-panel--warn { border-left: 4px solid var(--ska-gelb); }
.ska-panel h2 { margin: 0 0 4px; font-size: 17px; }
.ska-panel h3 { margin: 18px 0 8px; font-size: 15px; }
.ska-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ska-desc { color: var(--ska-gedimmt); font-size: 13.5px; margin: 0 0 12px; }
.ska-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .ska-split { grid-template-columns: 1fr; } }

/* Kennzahlen */
.ska-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ska-cards--slim { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.ska-card {
	background: #fff; border: 1px solid var(--ska-rand); border-radius: 10px;
	padding: 14px 16px; text-decoration: none; color: inherit; display: block;
}
a.ska-card:hover { border-color: var(--ska-blau); }
.ska-card__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ska-gedimmt); }
.ska-card__value { display: block; font-size: 30px; font-weight: 700; line-height: 1.2; }
.ska-card__sub { display: block; font-size: 12.5px; color: var(--ska-gedimmt); }

/* Tabellen */
.ska-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ska-table th, .ska-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #eef0f3; vertical-align: top; }
.ska-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ska-gedimmt); border-bottom: 2px solid var(--ska-rand); }
.ska-table tbody tr:hover { background: #fbfcfd; }
.ska-table tr.is-urgent { background: #fdf3f2; }
.ska-right { text-align: right; white-space: nowrap; }

/* Fortschritt */
.ska-progress { width: 90px; height: 8px; background: #eceff3; border-radius: 4px; overflow: hidden; }
.ska-progress span { display: block; height: 100%; background: var(--ska-blau); }
.ska-progress span.is-complete { background: var(--ska-gruen); }
.ska-progress span.is-partial { background: var(--ska-gelb); }
.ska-progress span.is-open { background: var(--ska-rot); }

/* Etiketten */
.ska-tag { display: inline-block; padding: 2px 9px; border-radius: 11px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ska-tag--green { background: #e0f0e6; color: var(--ska-gruen); }
.ska-tag--blue  { background: #e2ecf7; color: var(--ska-blau); }
.ska-tag--grey  { background: #eceff3; color: var(--ska-gedimmt); }
.ska-tag--red   { background: #fbe4e2; color: var(--ska-rot); }
.ska-badge { padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.ska-badge--complete { background: #e0f0e6; color: var(--ska-gruen); }
.ska-badge--partial  { background: #fdf3e0; color: var(--ska-gelb); }
.ska-badge--open     { background: #fbe4e2; color: var(--ska-rot); }

.ska-ok { color: var(--ska-gruen); font-weight: 600; }
.ska-warn { color: var(--ska-gelb); font-weight: 600; }
.ska-muted { color: var(--ska-gedimmt); }

/* Schaltflächen */
.ska-btn {
	display: inline-block; padding: 9px 16px; border-radius: 6px;
	border: 1px solid var(--ska-rand); background: #fff; color: var(--ska-text);
	text-decoration: none; font-size: 14px; font-weight: 500; cursor: pointer;
	line-height: 1.3;
}
.ska-btn:hover { border-color: var(--ska-blau); color: var(--ska-blau); }
.ska-btn--primary { background: var(--ska-blau); border-color: var(--ska-blau); color: #fff; }
.ska-btn--primary:hover { background: var(--ska-blau-dunkel); color: #fff; }
.ska-btn--warn { color: var(--ska-rot); border-color: #f0c8c4; }
.ska-btn--small { padding: 6px 11px; font-size: 13px; }
.ska-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ska-back { text-decoration: none; color: var(--ska-blau); font-size: 14px; }

/* Formulare */
.ska-form label { display: block; font-size: 13px; color: var(--ska-gedimmt); margin-bottom: 4px; }
.ska-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 16px; margin-bottom: 14px; }
.ska-form input[type="text"], .ska-form input[type="number"], .ska-form input[type="tel"],
.ska-form input[type="date"], .ska-form input[type="email"], .ska-form select, .ska-form textarea {
	width: 100%; padding: 9px 11px; margin-top: 3px;
	border: 1px solid #c8ccd2; border-radius: 6px;
	font-size: 15px; color: var(--ska-text); background: #fff;
}
.ska-form input:focus, .ska-form select:focus, .ska-form textarea:focus {
	outline: none; border-color: var(--ska-blau); box-shadow: 0 0 0 3px rgba(29,95,156,.12);
}
.ska-check { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0; font-size: 14px; color: var(--ska-text); }
.ska-check input { margin-top: 3px; flex: 0 0 auto; }
.ska-block { display: block; margin: 12px 0; }
.ska-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ska-filter input, .ska-filter select { padding: 8px 11px; border: 1px solid #c8ccd2; border-radius: 6px; font-size: 14px; }

/* Reiter */
.ska-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.ska-tabs a {
	padding: 8px 15px; border-radius: 6px 6px 0 0; text-decoration: none;
	color: var(--ska-gedimmt); border: 1px solid transparent; border-bottom: none;
}
.ska-tabs a.is-active { background: #fff; border-color: var(--ska-rand); color: var(--ska-text); font-weight: 600; }
.ska-count { display: inline-block; margin-left: 5px; font-size: 12px; color: var(--ska-gedimmt); }

/* Kurse als Kacheln */
.ska-courselist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ska-course {
	display: block; padding: 12px 14px; border: 1px solid var(--ska-rand);
	border-radius: 8px; text-decoration: none; color: inherit;
}
.ska-course:hover { border-color: var(--ska-blau); }
.ska-course__type { display: block; font-weight: 600; }
.ska-course__date { display: block; font-size: 13px; color: var(--ska-gedimmt); margin: 2px 0; }
.ska-course__meta { display: block; font-size: 12.5px; color: var(--ska-gedimmt); }

/* Z-Wert */
.ska-zbox {
	display: flex; align-items: center; gap: 16px; margin-bottom: 14px;
	background: #eef4fa; border: 1px solid #c5dbf0; border-radius: 8px; padding: 12px 16px;
}
.ska-zbox__value { font-size: 36px; font-weight: 700; line-height: 1; color: var(--ska-blau); min-width: 66px; text-align: center; }
.ska-zbox__label { font-size: 13.5px; }

/* Kinder in der Ausgabe */
.ska-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.ska-kid {
	background: #fff; border: 1px solid var(--ska-rand); border-left: 5px solid #c8ccd2;
	border-radius: 10px; padding: 14px 16px;
}
.ska-kid.is-issued   { border-left-color: var(--ska-gruen); }
.ska-kid.is-reserved { border-left-color: var(--ska-blau); }
.ska-kid.is-returned { border-left-color: #b8bec7; opacity: .72; }
.ska-kid.is-open     { border-left-color: var(--ska-rot); }
.ska-kid header { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.ska-kid header small { display: block; color: var(--ska-gedimmt); font-size: 12.5px; }
.ska-kid__missing { margin: 4px 0; font-size: 12.5px; color: var(--ska-rot); }
.ska-kid__measures { margin: 4px 0; font-size: 12.5px; color: var(--ska-gedimmt); }
.ska-kid__z { font-size: 14px; margin-bottom: 8px; }
.ska-kid__mats { list-style: none; margin: 0 0 12px; padding: 0; }
.ska-kid__mats li { display: flex; justify-content: space-between; padding: 3px 0; font-size: 14px; border-bottom: 1px dotted #eef0f3; }
.ska-kid__mats span { color: var(--ska-gedimmt); }
.ska-kid__mats strong { font-variant-numeric: tabular-nums; }
.ska-kid__mats .is-proposed { color: var(--ska-blau); font-weight: 500; font-style: italic; }
.ska-kid__mats .is-missing { color: var(--ska-rot); font-weight: 400; }
.ska-kid footer { display: flex; gap: 5px; flex-wrap: wrap; }

/* Anmeldung */
.ska--login { display: flex; justify-content: center; padding: 30px 16px; }
.ska-loginbox {
	width: 100%; max-width: 380px; background: #fff;
	border: 1px solid var(--ska-rand); border-radius: 12px; padding: 28px 26px;
}
.ska-lead { text-align: center; color: var(--ska-gedimmt); font-size: 14px; margin-bottom: 18px; }
.ska-loginbox label { display: block; font-size: 13px; color: var(--ska-gedimmt); margin-bottom: 12px; }
.ska-loginbox input[type="text"], .ska-loginbox input[type="password"] {
	width: 100%; padding: 10px 12px; margin-top: 4px;
	border: 1px solid #c8ccd2; border-radius: 6px; font-size: 15px;
}
.ska-loginbox .login-remember { font-size: 13px; }
.ska-loginbox input[type="submit"] {
	width: 100%; padding: 11px; margin-top: 8px;
	background: var(--ska-blau); color: #fff; border: 0; border-radius: 6px;
	font-size: 15px; font-weight: 600; cursor: pointer;
}
.ska-loginbox input[type="submit"]:hover { background: var(--ska-blau-dunkel); }
.ska-hint { text-align: center; margin-top: 14px; font-size: 13px; }
.ska-hint a { color: var(--ska-blau); }

/* Tablet und Telefon */
@media (max-width: 782px) {
	.ska { font-size: 16px; }
	.ska-head { gap: 12px; }
	.ska-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
	.ska-user { margin-left: auto; }
	.ska-btn { padding: 11px 18px; }
	.ska-btn--small { padding: 9px 14px; }
	.ska-table { font-size: 14px; }
	.ska-table th:nth-child(2), .ska-table td:nth-child(2) { max-width: 130px; }
}

/* Datei-Upload in der App */
.ska-upload { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ska-rand); }
.ska-upload input[type="file"] { margin-top: 4px; font-size: 14px; }

/* Materialkürzel in Listen */
.ska-chip {
	display: inline-block; background: #eceff3; border-radius: 4px;
	padding: 1px 7px; margin-right: 3px; font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Tagesansicht: Vorbereitung */
.ska-table--prep td { vertical-align: middle; }
.ska-num { text-align: center; font-variant-numeric: tabular-nums; }
.ska-num strong { font-size: 17px; }
.ska-zcell { background: #f4f8fc; }
.ska-zcell strong { font-size: 19px; color: var(--ska-blau); }
.ska-legal { margin-top: 10px; font-size: 12.5px; }
.ska-inline-warn {
	margin-top: 12px; padding: 9px 12px; font-size: 13.5px;
	background: #fdf6e3; border-left: 3px solid var(--ska-gelb); border-radius: 4px;
}
.ska-inline-warn a { color: var(--ska-blau); }

/* Greifliste */
.ska-grab { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.ska-grab h3 { margin: 0 0 6px; font-size: 14px; }
.ska-grablist { list-style: none; margin: 0; padding: 0; }
.ska-grablist li {
	display: flex; align-items: baseline; gap: 8px;
	padding: 4px 0; border-bottom: 1px dotted #eef0f3; font-size: 14px;
}
.ska-grablist strong {
	min-width: 30px; font-variant-numeric: tabular-nums;
	font-size: 16px; text-align: right;
}
.ska-grablist span { flex: 1; color: var(--ska-gedimmt); font-size: 13px; }
.ska-grablist em { font-style: normal; font-size: 12.5px; color: var(--ska-blau); font-weight: 600; }

/* Monatsüberschrift in der Kursliste */
.ska-monat { margin: 18px 0 8px; font-size: 15px; }
.ska-monat:first-of-type { margin-top: 4px; }

/* Link kopieren */
.ska-copy.is-done { background: var(--ska-gruen); border-color: var(--ska-gruen); color: #fff; }

/* Handlungshinweis mit Schaltfläche */
.ska-inline-warn--action {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}

/* Materialangabe mit Zusatzinfo */
.ska-kid__mats strong small {
	display: block; font-weight: 400; font-size: 11.5px;
	color: var(--ska-gedimmt); margin-top: 1px;
}

/* Material ändern */
.ska-kid__change { margin: 8px 0 10px; }
.ska-kid__change summary, .ska-swaprow summary {
	cursor: pointer; font-size: 13px; color: var(--ska-blau);
	padding: 4px 0; user-select: none;
}
.ska-swaprow td { background: #fafbfc; padding-top: 0; }
.ska-swap { padding: 10px 0 4px; }
.ska-swap__row {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 7px 0; border-bottom: 1px dotted #eef0f3;
}
.ska-swap__label { min-width: 190px; font-size: 13.5px; }
.ska-swap__now { display: block; color: var(--ska-gedimmt); font-size: 12.5px; }
.ska-swap__form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex: 1; }
.ska-swap__form select {
	flex: 1; min-width: 200px; max-width: 420px; padding: 7px 10px;
	border: 1px solid #c8ccd2; border-radius: 6px; font-size: 13.5px;
}
.ska-swap__z { margin: 10px 0 0; font-size: 13.5px; }
.ska-swap__z strong { font-size: 16px; color: var(--ska-blau); }
.ska-chip.is-proposed { background: #e2ecf7; color: var(--ska-blau); font-style: italic; }

/* Hausdatenbank: die Lieferliste ist breit und muss auf dem Tablet
   seitlich scrollen können, ohne die ganze Seite zu verschieben. */
.ska-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ska-scroll .ska-table { min-width: 720px; }
.ska-row--muted td { opacity: .55; }
.ska-bericht { margin: 8px 0 16px; padding-left: 20px; }
.ska-bericht li { margin-bottom: 4px; }

/* ───────────── Kurstag am Tablet (1.7.0) ─────────────
   Große Tippflächen (mind. 48 px), ein Gedanke je Block, Zustände über
   Farbe und Text – auch mit Handschuhen und im Gegenlicht lesbar. */

.ska-btn--gross { padding: 14px 22px; font-size: 17px; border-radius: 10px; min-height: 52px; }

/* Wer bist du? */
.ska-wer { text-align: center; padding: 20px 0; }
.ska-wer h1 { font-size: 30px; margin: 0 0 8px; }
.ska-wer__namen { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 24px; }
.ska-wer__name {
	display: flex; align-items: center; justify-content: center; min-height: 90px;
	background: #fff; border: 2px solid var(--ska-rand); border-radius: 14px;
	font-size: 22px; font-weight: 600; color: var(--ska-text); text-decoration: none;
}
.ska-wer__name:active, .ska-wer__name:hover { border-color: var(--ska-blau); color: var(--ska-blau); }

/* Mein Tag */
.ska-start__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ska-start__kopf h1 { font-size: 28px; margin: 0; }
.ska-start__kopf h1 small { display: block; font-size: 15px; font-weight: 400; color: var(--ska-gedimmt); }
.ska-start__tage { display: flex; gap: 6px; }
.ska-start h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--ska-gedimmt); margin: 24px 0 10px; }
.ska-tagkarten { display: grid; gap: 12px; }
.ska-tagkarte {
	display: flex; align-items: center; gap: 16px; padding: 16px 18px; min-height: 84px;
	background: #fff; border: 1px solid var(--ska-rand); border-left: 6px solid var(--ska-blau);
	border-radius: 12px; color: var(--ska-text); text-decoration: none;
}
.ska-tagkarte.is-fertig { border-left-color: var(--ska-gruen); }
.ska-tagkarte:hover { border-color: var(--ska-blau); }
.ska-tagkarte__zeit { font-size: 24px; font-weight: 700; min-width: 72px; font-variant-numeric: tabular-nums; }
.ska-tagkarte__zeit small { display: block; font-size: 13px; font-weight: 400; color: var(--ska-gedimmt); }
.ska-tagkarte__mitte { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ska-tagkarte__mitte strong { font-size: 18px; }
.ska-tagkarte__offen { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.ska-tagkarte__pfeil { font-size: 32px; color: var(--ska-gedimmt); }
.ska-leer { text-align: center; padding: 40px 10px; color: var(--ska-gedimmt); }

/* Kurstag */
.ska-kurstag__kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }
.ska-kurstag__kopf h1 { font-size: 26px; margin: 0; }
.ska-kurstag__kopf p { margin: 4px 0 0; }
.ska-kurstag__tage { display: flex; gap: 6px; }
.ska-kurstag__tage .ska-chip {
	padding: 8px 14px; font-size: 15px; border-radius: 10px; text-decoration: none; color: var(--ska-text);
	text-align: center; line-height: 1.2; background: #fff; border: 1px solid var(--ska-rand);
}
.ska-kurstag__tage .ska-chip small { display: block; font-size: 11px; color: var(--ska-gedimmt); }
.ska-kurstag__tage .ska-chip.is-active { background: var(--ska-blau); border-color: var(--ska-blau); color: #fff; }
.ska-kurstag__tage .ska-chip.is-active small { color: #dbe7f3; }
.ska-kurstag__stand {
	display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 16px; margin-bottom: 14px;
	background: var(--ska-grau); border-radius: 10px; font-size: 15px;
}
.ska-kurstag__stand .is-offen strong { color: var(--ska-rot); }
.ska-kurstag__team { margin-bottom: 14px; }
.ska-kurstag__team form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }

.ska-kinder2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.ska-karte { background: #fff; border: 1px solid var(--ska-rand); border-radius: 14px; padding: 16px 18px; }
.ska-karte.is-fehlt { opacity: .55; }
.ska-karte--neu { border-style: dashed; }
.ska-karte__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ska-karte__kopf h3 { font-size: 21px; margin: 0 0 2px; }
.ska-karte__hinweise { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.ska-anwesend { display: flex; gap: 6px; flex-shrink: 0; }
.ska-anwesend a {
	display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 48px;
	border: 2px solid var(--ska-rand); border-radius: 10px; text-decoration: none;
	font-weight: 600; color: var(--ska-gedimmt); background: #fff;
}
.ska-anwesend__da.is-an { background: var(--ska-gruen); border-color: var(--ska-gruen); color: #fff; }
.ska-anwesend__fehlt.is-an { background: var(--ska-rot); border-color: var(--ska-rot); color: #fff; }

.ska-block2 { border-top: 1px solid var(--ska-rand); margin-top: 14px; padding-top: 12px; }
.ska-block2__titel { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ska-gedimmt); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.ska-block2__inhalt { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 17px; }
.ska-material { flex-direction: column; gap: 4px; }
.ska-material b { display: inline-block; min-width: 52px; color: var(--ska-gedimmt); font-weight: 600; }
.is-fehlt { color: var(--ska-rot); font-weight: 600; }
.ska-knoepfe { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

.ska-aufklapp { margin-top: 10px; }
.ska-aufklapp > summary {
	cursor: pointer; display: inline-block; padding: 8px 14px; border: 1px solid var(--ska-rand);
	border-radius: 8px; font-size: 15px; color: var(--ska-blau); list-style: none;
}
.ska-aufklapp > summary::-webkit-details-marker { display: none; }
.ska-aufklapp[open] > summary { background: var(--ska-grau); }
.ska-aufklapp > form, .ska-aufklapp > .ska-swap { margin-top: 10px; }

.ska-masse { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ska-masse label { display: flex; flex-direction: column; font-size: 13px; color: var(--ska-gedimmt); gap: 4px; }
.ska-masse input, .ska-masse select, .ska-bindung input, .ska-block2 textarea {
	font-size: 18px; padding: 10px 12px; border: 1px solid var(--ska-rand); border-radius: 8px; width: 100%; box-sizing: border-box;
}
.ska-masse button { grid-column: 1 / -1; }
.ska-block2 textarea { font-size: 16px; margin-bottom: 8px; }

.ska-bindung { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.ska-bindung label { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ska-bindung input { width: 80px; text-align: center; }
.ska-bindung.is-ok { color: var(--ska-gruen); font-size: 17px; }
.ska-zgross { font-size: 26px; margin: 0 4px; }
.ska-notiz { margin: 4px 0; font-size: 15px; }

.ska-zuteilung__form { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }

@media (max-width: 782px) {
	.ska-kinder2 { grid-template-columns: 1fr; }
	.ska-karte__kopf { flex-direction: column; }
	.ska-anwesend { width: 100%; }
	.ska-anwesend a { flex: 1; }
	.ska-tagkarte__zeit { font-size: 20px; min-width: 60px; }
}

/* Startseite für Gäste und Mitarbeiterzugang (1.8.0) */
.ska--login { flex-direction: column; align-items: center; gap: 18px; }
.ska-gast { max-width: 560px; text-align: center; }
.ska-gast h1 { font-size: 22px; margin: 18px 0 10px; }
.ska-gast .ska-lead { font-size: 16px; color: var(--ska-text); line-height: 1.5; }
.ska-mitarbeiter { max-width: 560px; }
.ska-mitarbeiter > summary { cursor: pointer; text-align: center; color: var(--ska-gedimmt); font-size: 14px; list-style: none; }
.ska-mitarbeiter > summary::-webkit-details-marker { display: none; }
.ska-mitarbeiter h3 { font-size: 15px; margin: 18px 0 8px; }
.ska-tabletcode { display: flex; gap: 8px; }
.ska-tabletcode input { flex: 1; font-size: 20px; letter-spacing: .15em; text-transform: uppercase; padding: 10px 12px; border: 1px solid #c8ccd2; border-radius: 6px; }
.ska-tabletcode-anzeige {
	font-size: 34px; font-weight: 700; letter-spacing: .2em; font-family: ui-monospace, Menlo, monospace;
	background: var(--ska-grau); border-radius: 10px; padding: 14px 18px; display: inline-block; margin: 6px 0 12px;
}

/* PIN am Tablet (1.8.1) */
.ska-pin { max-width: 320px; margin: 20px auto 0; }
.ska-pin input[type="password"] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.ska-pin__punkte { display: flex; justify-content: center; gap: 18px; margin: 10px 0 24px; }
.ska-pin__punkte span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ska-blau); }
.ska-pin__punkte span.an { background: var(--ska-blau); }
.ska-pin__tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ska-pin__tasten button {
	min-height: 72px; font-size: 28px; font-weight: 600; border-radius: 14px;
	border: 1px solid var(--ska-rand); background: #fff; color: var(--ska-text); cursor: pointer;
}
.ska-pin__tasten button:active { background: var(--ska-grau); }
.ska-pin__tasten .ska-pin__ok { background: var(--ska-blau); border-color: var(--ska-blau); color: #fff; font-size: 20px; }
.ska-pinform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ska-pinform input { width: 110px; font-size: 18px; letter-spacing: .3em; padding: 6px 10px; border: 1px solid var(--ska-rand); border-radius: 6px; }
.ska-ausgabe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 12px; }
.ska-ausgabe label { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.ska-ausgabe input { width: 90px; font-size: 22px; text-align: center; padding: 10px; border: 2px solid var(--ska-blau); border-radius: 8px; }
.ska-ausgabe button[disabled] { opacity: .45; cursor: not-allowed; }
.ska-fristen { display: grid; gap: 12px; max-width: 720px; }
.ska-fristen label { display: block; font-size: 15px; }
.ska-fristen label span { display: block; font-weight: 600; font-size: 13px; color: var(--ska-gedimmt); }
.ska-fristen input { width: 80px; padding: 6px 8px; margin: 0 6px; border: 1px solid var(--ska-rand); border-radius: 6px; font-size: 15px; }
.ska-fristen small { display: block; color: var(--ska-gedimmt); font-size: 12.5px; margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════════
   Elldus-Look (1.11.0) – für draußen: groß, kontrastreich, ruhig.
   Farben aus dem Logo (Petrol), dazu Creme. Knöpfe ≥ 64 px, mit
   Handschuhen treffsicher. Keine verschachtelten Bereiche.
   ════════════════════════════════════════════════════════════════════ */
.ska {
	--ska-blau: #28495c;
	--ska-blau-dunkel: #1b3340;
	--ska-creme: #f3eee5;
	--ska-creme-dunkel: #e6dfd2;
	--ska-rand: #d8d1c4;
	--ska-grau: #f3eee5;
	--ska-text: #16232b;
	--ska-gedimmt: #5b6870;
	--ska-gruen: #1e7a4c;
	--ska-rot: #b3261e;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	color: var(--ska-text);
}

/* Kopfleiste: schlicht, Petrol */
.ska-head {
	background: var(--ska-blau); border: 0; border-radius: 0 0 12px 12px;
	padding: 10px 14px; margin-bottom: 22px; gap: 8px;
}
.ska-nav a { color: #e9eef1; font-size: 17px; font-weight: 600; padding: 12px 16px; border-radius: 8px; }
.ska-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.ska-nav a.is-active { background: var(--ska-creme); color: var(--ska-blau); }
.ska-user, .ska-user a, .ska-user strong { color: #e9eef1; }
.ska-user a { margin-left: 10px; text-decoration: underline; }
.ska-testmode { border-radius: 10px; }

/* Grundknopf */
.ska-knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 64px; padding: 0 26px; border-radius: 10px; border: 2px solid transparent;
	font-size: 20px; font-weight: 700; text-decoration: none; cursor: pointer;
	-webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
	transition: transform .05s;
}
.ska-knopf:active { transform: scale(.97); }
.ska-knopf[disabled] { opacity: .4; cursor: not-allowed; }
.ska-knopf--haupt { background: var(--ska-blau); color: #fff; }
.ska-knopf--haupt:hover { background: var(--ska-blau-dunkel); color: #fff; }
.ska-knopf--gruen { background: var(--ska-gruen); color: #fff; }
.ska-knopf--rot { background: var(--ska-rot); color: #fff; }
.ska-knopf--leise { background: #fff; color: var(--ska-blau); border-color: var(--ska-blau); }
.ska-knopf--fertig { background: #e3f1e9; color: var(--ska-gruen); border-color: #b9dcc7; }
.ska-knopf--breit { display: flex; width: 100%; margin-top: 14px; }
.ska-knopf--gross { min-height: 80px; font-size: 24px; }
.ska-knopf.is-laeuft { opacity: .6; }

.ska-zurueck {
	display: inline-flex; align-items: center; min-height: 52px; padding: 0 18px 0 8px;
	font-size: 19px; font-weight: 600; color: var(--ska-blau); text-decoration: none;
}
.ska-kopf2 h1 { font-size: 32px; line-height: 1.15; margin: 6px 0 4px; color: var(--ska-blau); }
.ska-kopf2 p { margin: 0 0 16px; font-size: 18px; color: var(--ska-gedimmt); }

/* Mein Tag */
.ska-start__kopf h1 { font-size: 34px; color: var(--ska-blau); }
.ska-start__tage .ska-btn { min-width: 64px; min-height: 56px; font-size: 22px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ska-blau); color: var(--ska-blau); border-radius: 10px; }
.ska-start h2 { font-size: 15px; color: var(--ska-blau); letter-spacing: .08em; }
.ska-tagkarte { border: 2px solid var(--ska-rand); border-left: 8px solid var(--ska-blau); min-height: 100px; padding: 18px 20px; }
.ska-tagkarte__zeit { font-size: 30px; color: var(--ska-blau); }
.ska-tagkarte__mitte strong { font-size: 22px; }
.ska-tagkarte__pfeil { font-size: 40px; color: var(--ska-blau); }

/* Wer bist du / PIN */
.ska-wer h1 { font-size: 34px; color: var(--ska-blau); }
.ska-wer__name { min-height: 100px; font-size: 26px; border: 3px solid var(--ska-blau); color: var(--ska-blau); border-radius: 14px; }
.ska-pin__tasten button { min-height: 84px; font-size: 32px; border: 2px solid var(--ska-rand); }
.ska-pin__tasten .ska-pin__ok { background: var(--ska-blau); border-color: var(--ska-blau); }
.ska-pin__punkte span { width: 22px; height: 22px; border-color: var(--ska-blau); }
.ska-pin__punkte span.an { background: var(--ska-blau); }

/* Kurstag: Tage, Bilanz, Liste */
.ska-tagwahl { display: flex; gap: 8px; margin-bottom: 14px; }
.ska-tagwahl a {
	flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 70px; border: 2px solid var(--ska-blau); border-radius: 10px;
	color: var(--ska-blau); text-decoration: none; background: #fff;
}
.ska-tagwahl a strong { font-size: 20px; }
.ska-tagwahl a span { font-size: 14px; }
.ska-tagwahl a.is-aktiv { background: var(--ska-blau); color: #fff; }
.ska-bilanz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.ska-bilanz div { background: var(--ska-creme); border-radius: 10px; padding: 10px 8px; text-align: center; }
.ska-bilanz strong { display: block; font-size: 28px; line-height: 1.1; color: var(--ska-blau); }
.ska-bilanz span { font-size: 14px; color: var(--ska-gedimmt); }
.ska-bilanz .is-offen strong { color: var(--ska-rot); }
.ska-zuteilen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.ska-zuteilen > span { font-weight: 700; color: var(--ska-gedimmt); margin-right: 4px; }

.ska-liste2 { display: grid; gap: 10px; }
.ska-zeile {
	display: flex; align-items: stretch; gap: 10px; background: #fff;
	border: 2px solid var(--ska-rand); border-radius: 12px; min-height: 100px;
}
.ska-zeile.is-fertig { border-color: #b9dcc7; background: #f6fbf8; }
.ska-zeile.is-fehlt { opacity: .55; }
.ska-zeile.is-neu { border-style: dashed; }
.ska-zeile__kind { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 12px 16px; text-decoration: none; color: var(--ska-text); }
.ska-zeile__kind strong { font-size: 23px; line-height: 1.2; }
.ska-zeile__kind > span { font-size: 16px; color: var(--ska-gedimmt); }
.is-warn { color: var(--ska-rot); font-weight: 700; }
.ska-schritte { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.ska-schritte i { font-style: normal; font-size: 13px; font-weight: 600; padding: 2px 9px; border-radius: 6px; border: 1.5px solid var(--ska-rand); color: var(--ska-gedimmt); }
.ska-schritte i.is-ok { border-color: var(--ska-gruen); background: var(--ska-gruen); color: #fff; }
.ska-zeile__aktion { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 0; }
.ska-zeile__aktion .ska-knopf { min-width: 130px; }

/* Kind-Seite */
.ska-kindseite { max-width: 820px; margin: 0 auto; }
.ska-warnungen p { margin: 0 0 8px; padding: 14px 16px; border-radius: 10px; background: var(--ska-creme); font-size: 18px; font-weight: 600; }
.ska-warnungen p.is-rot { background: #fbe9e7; color: var(--ska-rot); }
.ska-abschnitt { background: #fff; border: 2px solid var(--ska-rand); border-radius: 14px; padding: 18px 18px 20px; margin: 0 0 16px; }
.ska-abschnitt h2 { font-size: 22px; margin: 0 0 14px; color: var(--ska-blau); display: flex; align-items: center; gap: 10px; }
.ska-abschnitt h3 { font-size: 17px; margin: 14px 0 8px; color: var(--ska-gedimmt); text-transform: uppercase; letter-spacing: .05em; }
.ska-ok { font-size: 16px; color: var(--ska-gruen); font-weight: 700; }
.ska-zweier { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ska-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; margin-bottom: 14px; }
.ska-feld { display: flex; flex-direction: column; gap: 6px; }
.ska-feld__label { font-size: 15px; font-weight: 700; color: var(--ska-gedimmt); text-transform: uppercase; letter-spacing: .04em; }
.ska-feld__einheit { font-size: 14px; color: var(--ska-gedimmt); margin-top: -2px; }
.ska-stepper { display: grid; grid-template-columns: 64px 1fr 64px; height: 64px; border: 2px solid var(--ska-blau); border-radius: 12px; overflow: hidden; background: #fff; }
.ska-stepper button { border: 0; background: var(--ska-creme); color: var(--ska-blau); font-size: 34px; font-weight: 700; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ska-stepper button:active { background: var(--ska-creme-dunkel); }
.ska-stepper input { border: 0; text-align: center; font-size: 28px; font-weight: 700; color: var(--ska-text); width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.ska-stepper input:focus { outline: none; background: #fffdf8; }
.ska-stepper.is-geaendert { border-color: var(--ska-gruen); }
.ska-text { height: 60px; font-size: 22px; padding: 0 14px; border: 2px solid var(--ska-blau); border-radius: 12px; }
.ska-namen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

.ska-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 4px; }
.ska-wahl label, .ska-wahlknopf { position: relative; cursor: pointer; }
.ska-wahl input, .ska-wahlknopf input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ska-wahl span, .ska-wahlknopf span {
	display: flex; align-items: center; justify-content: center; text-align: center; min-height: 64px; padding: 6px 10px;
	border: 2px solid var(--ska-blau); border-radius: 10px; font-size: 18px; font-weight: 700; color: var(--ska-blau); background: #fff;
}
.ska-wahlknopf span { min-height: 52px; padding: 0 18px; font-size: 17px; }
.ska-wahl input:checked + span, .ska-wahlknopf input:checked + span { background: var(--ska-blau); color: #fff; }
.ska-wahl input:focus-visible + span { outline: 3px solid #f0b429; }

.ska-material2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ska-material2 div { background: var(--ska-creme); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; }
.ska-material2 span { font-size: 14px; font-weight: 700; color: var(--ska-gedimmt); text-transform: uppercase; letter-spacing: .04em; }
.ska-material2 strong { font-size: 30px; line-height: 1.15; color: var(--ska-blau); }
.ska-material2 small { font-size: 15px; color: var(--ska-gedimmt); }
.ska-material2 .is-z { background: var(--ska-blau); }
.ska-material2 .is-z span, .ska-material2 .is-z small { color: #cfdbe2; }
.ska-material2 .is-z strong { color: #fff; font-size: 36px; }
.ska-ausgabe2, .ska-bindung2 { display: grid; gap: 4px; }
.ska-bindung2 { grid-template-columns: 1fr auto; align-items: end; gap: 12px; margin: 14px 0 4px; }
.ska-erledigt { background: #e3f1e9; color: var(--ska-gruen); border-radius: 10px; padding: 14px 16px; font-size: 19px; font-weight: 600; margin: 0; }
.ska-hinweis2 { font-size: 15px; color: var(--ska-gedimmt); margin: 10px 0 0; }

.ska-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ska-kachel {
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 96px; padding: 12px 14px;
	border: 2px solid var(--ska-blau); border-radius: 12px; background: #fff; color: var(--ska-text); text-align: left; cursor: pointer;
	touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ska-kachel:active { background: var(--ska-creme); }
.ska-kachel strong { font-size: 22px; color: var(--ska-blau); }
.ska-kachel span { font-size: 15px; }
.ska-kachel em { font-style: normal; font-size: 13px; color: var(--ska-gedimmt); }
.ska-kachel.is-aktuell { background: var(--ska-blau); border-color: var(--ska-blau); cursor: default; }
.ska-kachel.is-aktuell strong, .ska-kachel.is-aktuell span, .ska-kachel.is-aktuell em { color: #fff; }

.ska-notiz2 { background: var(--ska-creme); border-radius: 10px; padding: 12px 14px; margin: 0 0 8px; font-size: 17px; }
.ska-notiz2 small { display: block; font-size: 13px; color: var(--ska-gedimmt); margin-top: 4px; }
.ska-notizform textarea { width: 100%; font-size: 18px; padding: 12px 14px; border: 2px solid var(--ska-rand); border-radius: 12px; }

/* Schmale Geräte: eine Spalte, Aktion unter den Namen */
@media (max-width: 640px) {
	.ska-zeile { flex-direction: column; }
	.ska-zeile__aktion { padding: 0 12px 12px; }
	.ska-zeile__aktion .ska-knopf { flex: 1; }
	.ska-bilanz { grid-template-columns: repeat(2, 1fr); }
	.ska-wahl { grid-template-columns: 1fr; }
	.ska-kopf2 h1 { font-size: 26px; }
	.ska-nav a { padding: 10px 12px; font-size: 16px; }
}
/* Das Theme setzt Überschriften dünn und eine eigene Knopfschrift – hier einheitlich und kräftig. */
.ska h1, .ska h2, .ska h3, .ska strong, .ska b { font-weight: 700; font-family: inherit; letter-spacing: 0; }
.ska button, .ska input, .ska select, .ska textarea { font-family: inherit; }
.ska-zeile__kind strong { font-weight: 700; }

/* Z-Rechner und Regeln (1.12.0) */
.ska-ergebnis .ska-material2 { margin-bottom: 12px; }
.ska-ergebnis .is-z strong { font-size: 44px; }
.ska-rechenweg { margin: 10px 0 12px; padding-left: 22px; font-size: 16px; line-height: 1.6; color: var(--ska-gedimmt); }
.ska-beispiel { width: 100%; font-size: 18px; }
.ska-beispiel th, .ska-beispiel td { padding: 10px 12px; text-align: left; }
.ska-beispiel tbody tr:nth-child(odd) { background: var(--ska-creme); }
.ska-kindseite form > .ska-knopf--breit { margin-bottom: 10px; }