/* ==========================================================================
   NAEHRSTOFF-CHECK
   Nur auf der Seitenvorlage template-naehrstoff-check.php geladen.
   Alle Farben aus den Seitentokens. Orange nur fuer "besprechen".
   ========================================================================== */

.nc { padding-block-end: var(--s-12); }

.nc :where(h1, h2, h3, h4, p, ul, fieldset, legend) { margin: 0; padding: 0; }
.nc :where(ul) { list-style: none; }

/* Kopf */
.nc-kopf {
	background: var(--c-accent-deep);
	color: var(--c-ink-invert);
	border-radius: 10px;
	padding: var(--s-6) var(--s-5);
	margin-block: var(--s-4) 10px;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.nc-kopf__titel {
	font-family: var(--f-display);
	font-weight: var(--w-bold);
	font-size: clamp(1.75rem, 4.5vw, 2.75rem);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-head);
	color: #FFFFFF;
}
.nc-kopf__lead {
	font-size: var(--t-body);
	line-height: var(--lh-normal);
	color: var(--c-accent-wash);
	max-width: 44rem;
}

/* Labels */
.nc-label {
	align-self: flex-start;
	display: inline-block;
	border-radius: 4px;
	padding: 3px 8px;
	font-family: var(--f-body);
	font-size: var(--t-label);
	font-weight: var(--w-bold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	line-height: 1.4;
}
.nc-label--hell { background: var(--c-surface); color: var(--c-accent-deep); }
.nc-label--taeglich { background: var(--c-accent-deep); color: #FFFFFF; }
.nc-label--teller { background: var(--c-accent); color: #FFFFFF; }
.nc-label--kein { background: transparent; color: var(--c-accent-deep); box-shadow: inset 0 0 0 1.5px var(--c-accent-deep); }
.nc-label--besprechen { background: var(--c-signal); color: var(--c-ink); }

/* Raster */
.nc-raster {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
@media (min-width: 64rem) {
	.nc-raster {
		display: grid;
		grid-template-columns: 22rem minmax(0, 1fr);
		gap: var(--s-4);
		align-items: start;
	}
	.nc-form { position: sticky; top: 88px; }
	.nc-form .nc-knopf--mobil { display: none; }
}

/* Formular */
.nc-form { display: flex; flex-direction: column; gap: 10px; }
.nc-feld {
	border: 0;
	background: var(--c-surface);
	border-radius: 10px;
	padding: var(--s-4);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	min-width: 0;
}
.nc-feld__titel {
	float: left;
	width: 100%;
	font-family: var(--f-display);
	font-weight: var(--w-bold);
	font-size: var(--t-small);
	color: var(--c-ink);
	margin-block-end: var(--s-1);
}
.nc-feld__titel + * { clear: left; }
.nc-optional { font-family: var(--f-body); font-weight: var(--w-regular); font-size: var(--t-meta); color: var(--c-ink-muted); margin-inline-start: var(--s-1); }

.nc-geburt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.nc-select { display: flex; flex-direction: column; gap: 4px; }
.nc-select__label { font-size: var(--t-meta); color: var(--c-ink-muted); }
.nc-select select {
	appearance: none;
	-webkit-appearance: none;
	height: 48px;
	width: 100%;
	border: 1.5px solid var(--c-line-strong);
	border-radius: 6px;
	background: var(--c-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2326302B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
	padding: 0 36px 0 12px;
	font: var(--w-medium) 1rem/1 var(--f-body);
	color: var(--c-ink);
}
.nc-select select:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 2px; }

.nc-alter { font-size: var(--t-meta); font-weight: var(--w-bold); color: var(--c-accent-deep); min-height: 1.2em; }

.nc-zahn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding-block-start: var(--s-3);
	border-block-start: 1px solid var(--c-line);
}
.nc-zahn__frage { font-size: 1rem; color: var(--c-ink); }

.nc-wahl { display: grid; gap: 6px; }
.nc-wahl--klein { grid-template-columns: repeat(2, 4.5rem); }
.nc-wahl--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nc-wahl--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.nc-chip { position: relative; display: block; cursor: pointer; }
.nc-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.nc-chip span {
	min-height: 48px;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6px 8px;
	border: 1.5px solid var(--c-line-strong);
	border-radius: 6px;
	background: var(--c-surface);
	font-size: 0.9375rem;
	font-weight: var(--w-medium);
	line-height: 1.2;
	color: var(--c-ink-soft);
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nc-chip:hover span { border-color: var(--c-accent); }
.nc-chip input:checked + span { background: var(--c-accent-wash); border: 2px solid var(--c-accent-deep); color: var(--c-ink); font-weight: var(--w-bold); }
.nc-chip input:focus-visible + span { outline: 2px solid var(--c-accent-deep); outline-offset: 2px; }

.nc-check { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; font-size: 1rem; color: var(--c-ink); cursor: pointer; }
.nc-check input { width: 20px; height: 20px; accent-color: var(--c-accent-deep); flex-shrink: 0; margin: 0; }

.nc-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--s-5);
	border: 0;
	border-radius: 6px;
	background: var(--c-accent-deep);
	color: #FFFFFF;
	font: var(--w-bold) 0.75rem/1 var(--f-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.nc-knopf:hover { background: var(--c-ink); color: #FFFFFF; }
.nc-knopf--hell { background: var(--c-surface); color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-line-strong); }
.nc-knopf--hell:hover { background: var(--c-accent-wash); color: var(--c-ink); }
.nc-hinweis { font-size: var(--t-meta); color: var(--c-ink-muted); text-align: center; }

/* Ergebnis */
.nc-ergebnis { display: flex; flex-direction: column; gap: 10px; min-width: 0; outline: none; }
#nc-ausgabe { display: flex; flex-direction: column; gap: 10px; }
#nc-ausgabe[hidden] { display: none; }

.nc-leer {
	background: var(--c-surface);
	border: 1.5px dashed var(--c-line-strong);
	border-radius: 10px;
	padding: var(--s-6) var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	color: var(--c-ink-soft);
	line-height: var(--lh-normal);
}
.nc-leer[hidden] { display: none; }
.nc-leer__titel { font-family: var(--f-display); font-weight: var(--w-bold); font-size: var(--t-medium); color: var(--c-ink); }

.nc-bilanz {
	background: var(--c-ink);
	border-radius: 10px;
	padding: var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.nc-bilanz__titel { font-family: var(--f-display); font-weight: var(--w-bold); font-size: var(--t-large); line-height: var(--lh-snug); color: #FFFFFF; }
.nc-bilanz__zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.nc-bilanz__zahlen li { border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 2px; font-size: var(--t-meta); line-height: 1.25; color: var(--c-accent-wash); }
.nc-bilanz__zahlen strong { font-family: var(--f-display); font-size: 1.75rem; line-height: 1; color: #FFFFFF; }
.nc-bilanz__zahlen .taeglich { background: var(--c-accent-deep); }
.nc-bilanz__zahlen .teller { background: #3A453F; }
.nc-bilanz__zahlen .kein { background: transparent; box-shadow: inset 0 0 0 1.5px #5A655E; }
.nc-bilanz__zahlen .besprechen { background: var(--c-signal-deep); color: #FBF0E2; }
.nc-bilanz__zahlen .null { opacity: 0.45; }
@media (max-width: 30rem) {
	.nc-bilanz__zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Zeitleiste */
.nc-zeit { background: var(--c-surface); border-radius: 10px; padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.nc-zeit__titel, .nc-quellen__titel { font-family: var(--f-display); font-weight: var(--w-bold); font-size: var(--t-small); color: var(--c-ink); }
.nc-zeit__achse { display: flex; justify-content: space-between; margin-inline-start: 5.5rem; font-size: var(--t-label); color: var(--c-ink-muted); }
.nc-zeit__reihen { display: flex; flex-direction: column; gap: 8px; }
.nc-zeit__reihe { display: flex; align-items: center; gap: 0.5rem; }
.nc-zeit__name { width: 5rem; flex-shrink: 0; font-size: var(--t-meta); font-weight: var(--w-bold); color: var(--c-ink); }
.nc-zeit__spur { position: relative; flex-grow: 1; height: 16px; background: #F1EFE7; border-radius: 3px; }
.nc-balken { position: absolute; top: 0; height: 100%; border-radius: 3px; }
.nc-balken.fest { background: var(--c-accent); }
.nc-balken.offen { background: #B7C08F; }
.nc-balken.schwach { background: var(--c-surface-deep); }
.nc-zeit__heute { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1px; background: var(--c-signal); border-radius: 2px; }
.nc-zeit__legende { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-meta); color: var(--c-ink-soft); }
.nc-zeit__legende li { display: flex; align-items: center; gap: 6px; }
.nc-zeit__legende .nc-balken { position: static; display: inline-block; width: 12px; height: 12px; }
.nc-zeit__heute--legende { position: static; display: inline-block; width: 3px; height: 14px; margin: 0; }
.nc-zeit__hinweis { font-size: var(--t-meta); line-height: var(--lh-normal); color: var(--c-ink-muted); }

/* Gruppen und Karten */
.nc-gruppe { border-radius: 10px; padding: var(--s-4); display: flex; flex-direction: column; gap: 10px; }
.nc-gruppe--taeglich { background: var(--c-accent-wash); }
.nc-gruppe--teller { background: var(--c-surface); }
.nc-gruppe--kein { background: var(--c-surface); box-shadow: inset 0 0 0 1.5px #C9D0AE; }
.nc-gruppe--besprechen { background: var(--c-signal-wash); }

.nc-karte { background: var(--c-surface); border-radius: 10px; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.nc-gruppe--teller .nc-karte, .nc-gruppe--kein .nc-karte { background: var(--c-bg); }
.nc-gruppe--besprechen .nc-karte { background: #FDF7EF; }
.nc-karte__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.nc-karte__titel { font-family: var(--f-display); font-weight: var(--w-bold); font-size: var(--t-medium); line-height: var(--lh-snug); color: var(--c-ink); }
.nc-gruppe--besprechen .nc-karte__titel { color: var(--c-signal-deep); }
.nc-karte__wert { font-size: var(--t-meta); font-weight: var(--w-bold); color: var(--c-accent-deep); white-space: nowrap; }
.nc-karte__text { font-size: 1rem; line-height: var(--lh-normal); color: var(--c-ink-soft); max-width: var(--w-text); }
.nc-zusatz { font-size: 0.9375rem; line-height: var(--lh-normal); color: var(--c-ink); padding-inline-start: var(--s-3); border-inline-start: 3px solid var(--c-accent); }
.nc-tipp { background: var(--c-accent-wash); border-radius: 6px; padding: var(--s-3); font-size: 0.9375rem; line-height: var(--lh-normal); color: var(--c-ink); }
.nc-tipp strong { color: var(--c-accent-deep); }
.nc-karte__links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.nc-karte__link { font-size: var(--t-meta); font-weight: var(--w-bold); color: var(--c-accent-deep); text-underline-offset: 3px; }
.nc-gruppe--besprechen .nc-karte__link { color: var(--c-signal-deep); }

.nc-lm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 48rem) { .nc-lm { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nc-lm a {
	min-height: 44px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--c-surface);
	box-shadow: inset 0 0 0 1px var(--c-line);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: var(--w-bold);
	color: var(--c-ink);
}
.nc-lm a:hover { box-shadow: inset 0 0 0 1.5px var(--c-accent); }
.nc-punkte { display: inline-flex; gap: 3px; flex-shrink: 0; }
.nc-punkte span { width: 8px; height: 8px; border-radius: 50%; background: var(--c-surface-deep); }
.nc-punkte span.an { background: var(--c-accent-deep); }

/* Quellen und Aktionen */
.nc-quellen { background: var(--c-surface); border-radius: 10px; padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); font-size: 0.9375rem; line-height: var(--lh-normal); color: var(--c-ink-soft); }
.nc-quellen ul { list-style: disc; padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.nc-quellen a { color: var(--c-accent-deep); font-weight: var(--w-medium); }
.nc-quellen__hinweis { padding-block-start: var(--s-2); border-block-start: 1px solid var(--c-line); font-size: var(--t-meta); color: var(--c-ink-muted); }
.nc-aktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 64rem) { .nc-aktionen { display: flex; } }

@media (prefers-reduced-motion: reduce) {
	.nc-chip span { transition: none; }
}

@media print {
	.nc-form, .nc-aktionen, .c-crumbs, .site-header, header.l-header, footer { display: none !important; }
	.nc-raster { display: block; }
	.nc-kopf, .nc-bilanz { background: none; color: #000; box-shadow: none; }
	.nc-kopf__titel, .nc-bilanz__titel, .nc-bilanz__zahlen strong { color: #000; }
}