/* be-impft Triage – ergänzt Bootstrap 4.
   Farben gemäss Branding «Wir machen das» (Pantone 7546 C, 2269 C, Cool Gray 9/6 C). Keine Rundungen.
   Die Variablen können im Theme auf .bit-triage überschrieben werden. */
.bit-triage {
	--bit-navy: #233647;        /* Pantone 7546 C */
	--bit-magenta: #e50745;     /* Pantone 192 C – Primärfarbe Bern */
	--bit-blue: #00a7e3;        /* Pantone 2995 C – «Auch prüfen» */
	--bit-green: #7dbf7c;       /* Pantone 2269 C – «Empfohlen» */
	--bit-green-dark: #4f9a50;  /* Grün, abgedunkelt für Text auf Weiss (Kontrast) */
	--bit-green-soft: #e9f4e9;  /* Grün, 15 % – Flächen */
	--bit-gray9: #73787c;       /* Cool Gray 9 C */
	--bit-gray6: #a4a7aa;       /* Cool Gray 6 C */
	--bit-gray-soft: #f2f3f3;   /* Cool Gray 6, 15 % – Flächen */
	--bit-text: #233647;
	--bit-muted: #5f6468;       /* Cool Gray 9, leicht dunkler für Lesbarkeit */
	--bit-border: #233647;      /* Rahmen: Dunkelblau, 3 px */
	--bit-focus: #00a7e3;       /* Pantone 2995 C – nur für den Tastaturfokus */
	margin: 2rem 0;
	color: var(--bit-text);
}

.bit-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.bit-icon {
	width: 1.5em; height: 1.5em;
	flex: 0 0 auto;
	color: var(--bit-gray9);
}

/* Etikett im Stil der Branding-Tags: dunkle Fläche, weisse Versalien, leicht schräg */
.bit-tag {
	display: inline-block;
	padding: .3em .7em;
	background: var(--bit-green);
	color: #fff;
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.bit-tag > span { display: inline-block; }

/* Kopf */
.bit-triage__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-left: 3px solid var(--bit-border); padding: .25rem 0 .25rem 1.25rem; margin-bottom: 1.75rem; }
.bit-triage__headtext { flex: 1 1 24rem; min-width: 0; }
.bit-triage__title { margin: 0 0 .35rem; font-size: 1.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
.bit-triage__intro { margin: 0; color: var(--bit-muted); }

.bit-triage__fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.bit-triage__legend {
	font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--bit-gray9); margin-bottom: .6rem; padding: 0; width: auto;
}

/* Lebensphasen als Kacheln */
.bit-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.bit-phase__label {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
	min-height: 7rem; padding: 1rem .5rem; margin: 0;
	border: 3px solid var(--bit-border); background: #fff;
	text-align: center; cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.bit-phase__label .bit-icon { width: 2em; height: 2em; margin-bottom: .25rem; }
.bit-phase__name { font-weight: 700; line-height: 1.2; }
.bit-phase__sub { font-size: .85rem; color: var(--bit-muted); }
.bit-phase__label:hover { border-color: var(--bit-magenta); }
.bit-phase__label:hover .bit-icon { color: var(--bit-magenta); }
.bit-phase input:checked + .bit-phase__label { border-color: var(--bit-navy); background: var(--bit-navy); color: #fff; }
.bit-phase input:checked + .bit-phase__label .bit-icon { color: var(--bit-magenta); }
.bit-phase input:checked + .bit-phase__label .bit-phase__sub { color: #d9dbdd; }

/* Situationen als Buttons */
.bit-situations { display: flex; flex-wrap: wrap; gap: .5rem; }
.bit-situation__label {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .55rem 1rem; margin: 0;
	border: 3px solid var(--bit-border); background: #fff; color: var(--bit-text);
	font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
.bit-situation__label:hover { border-color: var(--bit-magenta); }
/* Ebene 2 erst nach Auswahl einer Lebensphase aktiv */
.bit-triage__fieldset--situations.is-disabled .bit-situation__label {
	background: #fff; border-color: var(--bit-gray6); color: var(--bit-gray9); cursor: not-allowed;
}
.bit-triage__fieldset--situations.is-disabled .bit-situation__label .bit-icon { color: var(--bit-gray6); }
.bit-triage__fieldset--situations.is-disabled .bit-situation__label:hover { border-color: var(--bit-gray6); }
/* Zurücksetzen: rechts neben dem Titel, ausgegraut bis etwas gewählt ist */
.bit-reset {
	display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto;
	padding: .55rem 1rem; margin: .15rem 0 0;
	border: 3px solid var(--bit-navy); background: var(--bit-navy); color: #fff;
	font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
.bit-reset .bit-icon { color: #fff; width: 1.25em; height: 1.25em; }
.bit-reset:hover { background: var(--bit-magenta); border-color: var(--bit-magenta); }
.bit-reset:disabled { background: #fff; border-color: var(--bit-gray6); color: var(--bit-gray9); cursor: not-allowed; }
.bit-reset:disabled .bit-icon { color: var(--bit-gray6); }
.bit-situation__label:hover .bit-icon { color: var(--bit-magenta); }
.bit-situation input:checked + .bit-situation__label { border-color: var(--bit-navy); background: var(--bit-navy); color: #fff; }
.bit-situation input:checked + .bit-situation__label .bit-icon { color: var(--bit-magenta); }

/* Tastaturfokus */
.bit-phase input:focus-visible + .bit-phase__label,
.bit-situation input:focus-visible + .bit-situation__label,
.bit-reset:focus-visible,
.bit-card__links a:focus-visible,
.bit-card__link:focus-visible { outline: 3px solid var(--bit-focus); outline-offset: 2px; }
.bit-phase input:focus:not(:focus-visible) + .bit-phase__label,
.bit-situation input:focus:not(:focus-visible) + .bit-situation__label { outline: 0; }

/* Resultat */
.bit-results { margin-top: 2rem; border-top: 3px solid var(--bit-border); padding-top: 1.25rem; }
.bit-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bit-results__title { font-size: 1.35rem; font-weight: 900; text-transform: uppercase; margin: 0 0 1rem; }
.bit-results__count { color: var(--bit-muted); font-weight: 600; }
.bit-results__empty { background: var(--bit-gray-soft); padding: 2rem 1rem; text-align: center; color: var(--bit-muted); margin: 0; }
.bit-results__note { margin: 1.25rem 0 0; font-size: .9rem; color: var(--bit-muted); }

.bit-group { margin-bottom: 1.5rem; }
.bit-group__label { margin: 0 0 .75rem; font-size: 1rem; }
.bit-group--empfohlen .bit-tag { background: var(--bit-green); }
.bit-group--pruefen .bit-tag { background: var(--bit-blue); }

.bit-cards { display: flex; flex-wrap: wrap; margin-left: -.5rem; margin-right: -.5rem; }
.bit-card-col { box-sizing: border-box; padding: .5rem; flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) { .bit-card-col { flex: 0 0 50%; max-width: 50%; } }
@media (min-width: 992px) { .bit-group--empfohlen .bit-card-col { flex: 0 0 33.3333%; max-width: 33.3333%; } }

.bit-card { display: flex; flex-direction: column; height: 100%; border: 3px solid var(--bit-border); border-radius: 0; position: relative; background: #fff; }

/* Gleich hohe Textbereiche und Footer pro Zeile (Subgrid; ältere Browser behalten das Flex-Layout oben). */
@supports (grid-template-rows: subgrid) {
	.bit-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; }
	@media (min-width: 576px) { .bit-cards { grid-template-columns: repeat(2, 1fr); } }
	@media (min-width: 992px) { .bit-group--empfohlen .bit-cards { grid-template-columns: repeat(3, 1fr); } }
	.bit-card-col { display: contents; }
	.bit-card { display: grid; grid-template-rows: subgrid; grid-row: span 2; height: auto; }
	.bit-card .card-body { flex: none; }
	.bit-card__footer { align-content: start; }
}
.bit-card--empfohlen .bit-card__title { color: var(--bit-green); }
.bit-card--pruefen .bit-card__title { color: var(--bit-blue); }
.bit-card .card-body { flex: 1 1 auto; padding: 1rem 1.1rem; }
.bit-card__title { display: flex; align-items: flex-start; gap: .6rem; font-size: 1.3rem; line-height: 1.2; font-weight: 700; margin: 0 0 .6rem; overflow-wrap: anywhere; }
.bit-card__title .bit-icon { width: 1.2em; height: 1.2em; margin-top: 0; } /* gleiche Höhe wie die erste Titelzeile */
.bit-card .card-body, .bit-card__footer { font-size: 1.1rem; }
.bit-card__title .bit-icon { color: currentColor; }
.bit-card__reasons { margin: 0; padding: 0; }
.bit-card__reason { margin: 0; padding: 0; line-height: 1.4; }
.bit-card__when { margin: .15rem 0 0; padding: 0; font-size: .9rem; font-weight: 400; line-height: 1.4; color: var(--bit-gray9); }
.bit-card__entry { margin: 0; padding: 0 0 .7rem; }
.bit-card__entry + .bit-card__entry { border-top: 2px solid var(--bit-gray-soft); padding-top: .7rem; } /* gleicher Abstand über und unter der Linie */
.bit-card__entry:last-child { padding-bottom: 0; }
.bit-card__footer { background: var(--bit-gray-soft); border-top: 0; border-radius: 0; padding: .6rem 1.1rem; }
.bit-card__footer a { color: var(--bit-navy); font-weight: 600; text-decoration: none; }
.bit-card__footer a:hover { color: var(--bit-magenta); text-decoration: underline; }
.bit-arrow { display: inline-block; margin-right: .35em; }
/* Bootstrap 4 blendet über .stretched-link::after eine Klickfläche ein – keinen eigenen Inhalt dort setzen. */
.bit-card__links { margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .25rem 1rem; }
.bit-card__links .bit-card__link { display: inline-block; }
.bit-card__info-link { font-weight: 400 !important; color: var(--bit-muted) !important; }