/**
 * KI-Formularassistent – Frontend.
 *
 * Gestaltung nach „Styleguide neu-personal.staffeins.de“ (Stand 21.08.2026):
 * vier Farben – Orange #E74B11, Dunkel #212232, Schwarz, Weiß – plus die zwei
 * abgeleiteten Linienwerte; seit 2.2.0 dazu das dunklere Orange #C43E0C für Flächen mit
 * weißer Schrift und Dunkelrot #8B1A1A für den Zähler; Archivo 400/700/800; Radius 10 für Karten und Buttons,
 * 8 für Eingabefelder; keine Schatten, keine Grautöne, keine transparenten Textfarben.
 *
 * Eingabefelder nach Styleguide 7.7 (E7): hellgelb hinterlegt = hier kann man eingeben,
 * hellrot mit oranger Kante = Pflicht, noch offen. Rahmen von Eingabe- und
 * Auswahlelementen in se_field_line (3,7 : 1), Auswahlkästchen mit 2 px dunkler Kante.
 * Feldkarten: Orange = hier fehlt etwas, Dunkel = gewählt oder vollständig, Linie = ergänzbar.
 *
 * Alle Regeln hängen an .kifa-wrap: Themes wie Hello Elementor färben Buttons
 * sonst pink, setzen „white-space: nowrap“ und eigene Feldrahmen (reset.css).
 */

.kifa-wrap {
	--kifa-accent: #E74B11;                 /* accent: Linien, Akzentkanten, Rahmen – orange Details ohne Text */
	--kifa-accent-strong: #C43E0C;          /* Orange für Flächen mit weißer Schrift (Kontrast ≥ 4,5 : 1) */
	--kifa-alert: #8B1A1A;                  /* Dunkelrot: Zähler am Tab „Rahmenbedingungen“ */
	--kifa-dark: #212232;                   /* primary   */
	--kifa-text: #000000;                   /* text      */
	--kifa-surface: #FFFFFF;                /* secondary */
	--kifa-line: rgba(33, 34, 50, 0.15);    /* se_line   */
	--kifa-hover: rgba(33, 34, 50, 0.08);   /* Hover „Outline hell“ */
	--kifa-field: #FFFBE6;                  /* se_field: Eingabe möglich */
	--kifa-field-required: #FFF1F0;         /* se_field_required: Pflicht, noch offen */
	--kifa-field-line: rgba(33, 34, 50, 0.55); /* se_field_line: Rahmen von Eingabe- und Auswahlelementen */
	--kifa-font: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	font-family: var(--kifa-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--kifa-text);
	text-align: left;
	background: var(--kifa-surface);
	border: 1px solid var(--kifa-line);
	border-radius: 10px;
	padding: 32px;
}

.kifa-wrap *,
.kifa-wrap *::before,
.kifa-wrap *::after {
	box-sizing: border-box;
}

.kifa-hidden {
	display: none !important;
}

/* ---------- Grundzustand für Buttons und Felder (gegen Theme-Vorgaben) ---------- */

.kifa-wrap button {
	font-family: var(--kifa-font);
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
	white-space: normal;
	user-select: auto;
	box-shadow: none;
	min-height: 0;
	width: auto;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Manche Themes (Themify) heben Buttons beim Überfahren an und geben ihnen Schatten. */
.kifa-wrap button:hover {
	transform: none;
	box-shadow: none;
}

.kifa-wrap button:focus-visible,
.kifa-wrap input:focus-visible,
.kifa-wrap select:focus-visible,
.kifa-wrap textarea:focus-visible {
	outline: 2px solid var(--kifa-dark);
	outline-offset: 2px;
}

/* Platzhalter: kleiner und kursiv statt heller – die Palette kennt keine Grautöne. */
.kifa-wrap ::placeholder {
	color: var(--kifa-text);
	font-style: italic;
	opacity: 1;
}

/* ---------- Typografie ---------- */

/* H3 Rasterkopf: Frage der Einsatzart */
.kifa-wrap .kifa-picker-title {
	font-family: var(--kifa-font);
	font-size: 23px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.4px;
	color: var(--kifa-text);
	text-transform: none;
	margin: 0 0 20px;
}

/* H3 Karte: Köpfe der Bereiche */
.kifa-wrap .kifa-h3 {
	font-family: var(--kifa-font);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.3px;
	color: var(--kifa-text);
	text-transform: none;
	margin: 0 0 12px;
}

/* Feldlabel: 11 / 700 / Laufweite 1, in Versalien wie im Personalkosten-Rechner */
.kifa-wrap .kifa-label {
	display: block;
	font-family: var(--kifa-font);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	vertical-align: baseline;
	color: var(--kifa-text);
	margin: 0 0 6px;
}

/* Das Freitextfeld ist die Hauptfrage des Formulars – Label in Kartenkopf-Größe. */
.kifa-wrap label[for="kifa-text"] {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.3px;
	text-transform: none;
	margin: 0 0 12px;
}

.kifa-wrap .kifa-hint,
.kifa-wrap .kifa-count,
.kifa-wrap .kifa-legend,
.kifa-wrap .kifa-question-field {
	font-size: 13px;
	line-height: 1.55;
	color: var(--kifa-text);
}

.kifa-wrap p {
	margin: 0 0 12px;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-empty {
	font-style: italic;
}

/* ---------- Einsatzart wählen ---------- */

.kifa-wrap .kifa-picker {
	margin-bottom: 40px;
}

.kifa-wrap .kifa-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 8px;
}

/* Wie die Check-Badges der Seite: Outline, Radius 10, 15 px */
.kifa-wrap .kifa-card,
.kifa-wrap .kifa-card:focus {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	color: var(--kifa-text);
	background: rgba(0, 0, 0, 0);
	border: 1px solid var(--kifa-field-line);
	border-radius: 10px;
	padding: 11px 16px;
	cursor: pointer;
}

.kifa-wrap .kifa-card:hover {
	color: var(--kifa-text);
	background: var(--kifa-hover);
	border-color: var(--kifa-dark);
}

.kifa-wrap .kifa-card-active,
.kifa-wrap .kifa-card-active:hover,
.kifa-wrap .kifa-card-active:focus {
	color: var(--kifa-surface);
	background: var(--kifa-dark);
	border-color: var(--kifa-dark);
}

/* Kategorien und Templates: Karten mit Unterzeile, im Raster */
.kifa-wrap .kifa-categories,
.kifa-wrap .kifa-templates {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 10px 8px;
}

.kifa-wrap .kifa-card-cat,
.kifa-wrap .kifa-card-tpl {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	min-height: 64px;
}

.kifa-wrap .kifa-card-title {
	display: block;
}

.kifa-wrap .kifa-card-sub {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: inherit;
	opacity: 0.85;
}

.kifa-wrap .kifa-card-general {
	border-style: dashed;
}

.kifa-wrap .kifa-card-active.kifa-card-general {
	border-style: solid;
}

/* Schritt 2: Zurück-Button und Kategoriename */
.kifa-wrap .kifa-pick-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 10px;
}

.kifa-wrap .kifa-pick-hint {
	margin: 0 0 14px;
}

.kifa-wrap .kifa-back,
.kifa-wrap .kifa-back:focus {
	display: inline-flex;
	align-items: center;
	font-family: var(--kifa-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	background: var(--kifa-accent-strong);
	border: 1px solid var(--kifa-accent-strong);
	border-radius: 8px;
	padding: 10px 14px 10px 12px;
	min-height: 44px;
	cursor: pointer;
	text-transform: none;
	white-space: normal;
}

.kifa-wrap .kifa-back::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 8px 0 0;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	flex: 0 0 auto;
}

.kifa-wrap .kifa-back:hover {
	color: #fff;
	background: var(--kifa-dark);
	border-color: var(--kifa-dark);
}

.kifa-wrap .kifa-back:focus-visible {
	outline: 2px solid var(--kifa-dark);
	outline-offset: 2px;
}

.kifa-wrap .kifa-pick-cat {
	font-family: var(--kifa-font);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.3px;
	margin: 0;
	color: var(--kifa-text);
}

/* Leiste „Bitte immer angeben“: Überschrift und Chips sind Teil der Zeile unter dem Freitext (kifa-hint-row).
   Chips mit Lucide-Symbol – erkannte Punkte schrumpfen auf Symbol plus grünen Haken, ein einzelner offener
   Punkt wird rot. Maße seit 2.2.0 so, dass vier abgehakte Chips, der offene rote Chip „Personenzahl“ und
   „Jetzt auswerten“ zweispaltig in eine Zeile passen – nicht unter 14 px Schrift und 32 px Höhe. */
.kifa-wrap .kifa-must-label {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	margin: 6px 0 2px;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-must-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Jeder Chip ist ein Button (seit 2.3.1): Klick springt zum Feld – das li ist nur noch Hülle. */
.kifa-wrap .kifa-must-li {
	display: inline-flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kifa-wrap .kifa-must-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--kifa-text);
	border-radius: 999px;
	background: var(--kifa-surface);
	color: var(--kifa-text);
	font-family: var(--kifa-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	list-style: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kifa-wrap .kifa-must-item:not(.kifa-must-alert):hover {
	background: var(--kifa-hover);
	border-color: var(--kifa-dark);
}

.kifa-wrap .kifa-must-alert:hover {
	background: #FFE2DD;
}

.kifa-wrap .kifa-must-icon,
.kifa-wrap .kifa-must-check {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.kifa-wrap .kifa-must-svg {
	width: 15px;
	height: 15px;
}

.kifa-wrap .kifa-must-check {
	display: none;
}

.kifa-wrap .kifa-must-check-svg {
	width: 14px;
	height: 14px;
	stroke: #157435;
}

.kifa-wrap .kifa-must-done {
	gap: 3px;
	padding: 0 8px;
}

.kifa-wrap .kifa-must-done .kifa-must-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.kifa-wrap .kifa-must-done .kifa-must-check {
	display: inline-flex;
}

.kifa-wrap .kifa-must-alert {
	background: #FFF0ED;
	border-color: #EA301A;
	color: #711409;
	font-weight: 700;
}

/* Rücken die Chips an einen neuen Platz (Überschrift oder Hinweis fällt weg), blenden sie kurz ein. */
.kifa-wrap .kifa-must-list.kifa-settle {
	animation: kifa-settle 0.2s ease both;
}

@keyframes kifa-settle {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.kifa-wrap .kifa-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* Textlink als Button (Breadcrumb-Kategorie, „+ N weitere Haltestellen“): unterstrichen, Textfarbe,
   beim Überfahren und bei Tastaturfokus orange – ausdrücklich kein Button-Stil. */
.kifa-wrap .kifa-link-btn,
.kifa-wrap .kifa-link-btn:hover,
.kifa-wrap .kifa-link-btn:focus {
	display: inline;
	font-family: var(--kifa-font);
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 2px;
	color: var(--kifa-text);
	background: rgba(0, 0, 0, 0);
	border: 0;
	border-radius: 2px;
	padding: 0;
	margin: 0;
	min-height: 0;
	cursor: pointer;
}

.kifa-wrap .kifa-link-btn:hover,
.kifa-wrap .kifa-link-btn:focus-visible {
	color: var(--kifa-accent);
}

/* Breadcrumb nach der Vorlagenwahl: „Kategorie › Vorlage“ – die Kategorie führt als Textlink zur
   Vorlagenliste, die aktuelle Vorlage steht fett und ohne Link. */
.kifa-wrap .kifa-pick-head {
	gap: 12px 16px;
}

.kifa-wrap .kifa-crumb-nav {
	min-width: 0;
}

.kifa-wrap .kifa-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.35;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-crumb {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kifa-wrap .kifa-crumb-sep {
	margin: 0 8px;
}

.kifa-wrap .kifa-crumb-current strong {
	font-weight: 700;
}

.kifa-wrap .kifa-picked .kifa-templates,
.kifa-wrap .kifa-picked .kifa-pick-hint,
.kifa-wrap .kifa-picked .kifa-pick-cat {
	display: none;
}

/* Sicherheitsabfrage beim Wechsel der Einsatzart */
.kifa-wrap .kifa-dialog-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(33, 34, 50, 0.55);
}

.kifa-wrap .kifa-dialog {
	width: 100%;
	max-width: 600px;
	background: var(--kifa-surface);
	border-radius: 10px;
	padding: 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	font-family: var(--kifa-font);
}

.kifa-wrap .kifa-dialog-title {
	font-family: var(--kifa-font);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 8px;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-dialog-text {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-dialog-actions {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: 8px;
}

.kifa-wrap .kifa-dialog-actions .kifa-btn {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 12px 18px;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.kifa-wrap .kifa-dialog-actions .kifa-btn-primary {
		flex: 1 1 auto;
		white-space: normal;
	}
}

.kifa-wrap .kifa-dialog-actions .kifa-btn::after {
	display: none;
}

/* ---------- Zweispaltiges Formular ---------- */

.kifa-wrap .kifa-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.kifa-wrap .kifa-col {
	min-width: 0;
}

/* Vor der ersten Auswertung steht nur das Beschreibungsfeld. Die rechte Spalte hat Breite null
   und zieht sich mit dem ersten Ergebnis auf; Aufgaben, Kontakt und Absenden bleiben bis dahin weg. */
.kifa-wrap .kifa-body {
	transition: grid-template-columns 0.6s ease, gap 0.6s ease;
}

.kifa-wrap .kifa-body.kifa-fresh {
	grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
	gap: 0;
}

.kifa-wrap .kifa-fresh .kifa-col-right {
	visibility: hidden;
	overflow: hidden;
}

.kifa-wrap .kifa-fresh .kifa-tasks-panel,
.kifa-wrap .kifa-fresh .kifa-contact,
.kifa-wrap .kifa-fresh .kifa-shift,
.kifa-wrap .kifa-fresh .kifa-submit,
.kifa-wrap .kifa-fresh .kifa-msg {
	display: none;
}

/* Der Block „Schicht“ (seit 3.0.0, vorher Kontaktdaten und Absenden) kommt erst, wenn nichts mehr fehlt; dann steigt er ein. */
.kifa-wrap .kifa-body.kifa-incomplete .kifa-contact,
.kifa-wrap .kifa-body.kifa-incomplete .kifa-shift,
.kifa-wrap .kifa-body.kifa-incomplete .kifa-submit,
.kifa-wrap .kifa-body.kifa-incomplete .kifa-msg {
	display: none;
}

.kifa-wrap .kifa-contact-reveal .kifa-contact     { animation: kifa-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.kifa-wrap .kifa-contact-reveal .kifa-shift       { animation: kifa-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.kifa-wrap .kifa-contact-reveal .kifa-submit      { animation: kifa-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both; }

/* Offene Pflichtangaben im Bereich „Das fehlt noch“ */
.kifa-wrap .kifa-missing-intro {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.kifa-wrap .kifa-missing-outro {
	display: block;
	margin: 10px 0 0;
}

/* „… die Felder rechts …“ stimmt nur, wenn rechts auch Felder zu sehen sind: nicht vor der ersten Auswertung
   (kifa-fresh, rechte Spalte Breite null) und nicht einspaltig (bis 900 px, siehe unten). Dann steht statt
   kifa-hint-right die kurze Fassung kifa-hint-noright. Rein per CSS – folgt jeder Fensterbreite von selbst. */
.kifa-wrap .kifa-hint-noright {
	display: none;
}

.kifa-wrap .kifa-body.kifa-fresh .kifa-hint-right {
	display: none;
}

.kifa-wrap .kifa-body.kifa-fresh .kifa-hint-noright {
	display: inline;
}

.kifa-wrap .kifa-start-note {
	margin: -8px 0 16px;
	font-weight: 700;
}

/* Das erste Ergebnis: Bereiche steigen nacheinander ein, die Felder in ihrer Reihenfolge (--kifa-i). */
@keyframes kifa-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

.kifa-wrap .kifa-reveal .kifa-col-right {
	overflow: hidden;
}

.kifa-wrap .kifa-reveal .kifa-summary-panel    { animation: kifa-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
.kifa-wrap .kifa-reveal .kifa-questions-panel  { animation: kifa-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both; }
.kifa-wrap .kifa-reveal .kifa-fields > .kifa-h3,
.kifa-wrap .kifa-reveal .kifa-complete-note,
.kifa-wrap .kifa-reveal .kifa-legend,
.kifa-wrap .kifa-reveal .kifa-sorthint         { animation: kifa-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both; }
.kifa-wrap .kifa-reveal .kifa-field            { animation: kifa-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.6s + var(--kifa-i, 0) * 70ms) both; }
.kifa-wrap .kifa-reveal .kifa-done-toggle      { animation: kifa-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s both; }
.kifa-wrap .kifa-reveal .kifa-tasks-panel      { animation: kifa-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both; }
.kifa-wrap .kifa-reveal .kifa-contact          { animation: kifa-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both; }
.kifa-wrap .kifa-reveal .kifa-shift            { animation: kifa-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both; }
.kifa-wrap .kifa-reveal .kifa-submit           { animation: kifa-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 1.0s both; }

/* ---------- Freitextfeld ---------- */

.kifa-wrap .kifa-text {
	display: block;
	width: 100%;
	min-height: 200px;
	font-family: var(--kifa-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--kifa-text);
	/* Leer: Pflicht, noch offen – hellrot mit oranger Kante. */
	background-color: var(--kifa-field-required);
	border: 2px solid var(--kifa-accent);
	border-radius: 8px;
	padding: 14px 16px;
	margin: 0;
	box-shadow: none;
	/* Höhe folgt dem Inhalt (Skript), Handgriff bleibt für den Notfall. */
	resize: vertical;
	overflow: hidden;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Mit Text: bearbeitbar – hellgelb, die Kante bleibt 2 px, damit nichts springt. */
.kifa-wrap .kifa-text.kifa-has-text {
	background-color: var(--kifa-field);
	border-color: var(--kifa-field-line);
}

.kifa-wrap .kifa-text::placeholder {
	font-size: 15px;
}

.kifa-wrap .kifa-text:focus {
	outline: none;
	border-color: var(--kifa-dark);
}

/* Erfassungswelle: Spiegelebene deckungsgleich über dem Textfeld – gleiche Schrift, gleiches Innenmaß,
   gleicher Umbruch. Solange sie läuft, ist die Schrift im Feld unsichtbar, der Cursor nicht. */
.kifa-wrap .kifa-text-wrap {
	position: relative;
}

.kifa-wrap .kifa-text-mirror {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 14px 16px;
	border: 2px solid rgba(0, 0, 0, 0);
	border-radius: 8px;
	font-family: var(--kifa-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	text-align: left;
	color: var(--kifa-text);
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-break: normal;
	overflow: hidden;
	pointer-events: none;
}

.kifa-wrap .kifa-text.kifa-text-scanning {
	color: rgba(0, 0, 0, 0);
	caret-color: var(--kifa-text);
}

/* Jedes Wort pulst einmal je Durchlauf; die Verzögerung nach Wortnummer lässt die Welle wandern.
   max-width + overflow-wrap: ein überlanges Wort bricht innerhalb des Blocks wie im Textfeld. */
.kifa-wrap .kifa-text-mirror .kifa-w {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
	transform-origin: 50% 85%;
	animation: kifa-scan 3.6s ease-in-out infinite;
	animation-delay: calc(var(--kifa-d, 0) * 90ms);
}

@keyframes kifa-scan {
	0%, 32%   { transform: none; color: var(--kifa-text); text-shadow: none; }
	50%       { transform: scale(1.3); color: var(--kifa-accent); text-shadow: 0 0 1.2px var(--kifa-accent), 0 0 1.2px var(--kifa-accent), 0 0 1.2px var(--kifa-accent); }
	68%, 100% { transform: none; color: var(--kifa-text); text-shadow: none; }
}

/* Kurzes Aufleuchten als Zeichen der Erfassung – als Kontur, ohne Flächentönung. */
.kifa-wrap .kifa-text-pulse {
	animation: kifa-pulse 0.9s ease-out;
}

@keyframes kifa-pulse {
	0%   { outline: 4px solid var(--kifa-accent); outline-offset: 2px; }
	100% { outline: 4px solid rgba(0, 0, 0, 0); outline-offset: 6px; }
}

.kifa-wrap .kifa-request-title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.3px;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-answer-skip {
	font-weight: 400;
	font-style: italic;
}

/* Countdown bis zur nächsten Auswertung: schmaler Streifen unter dem Textfeld.
   Er läuft von Dunkel nach Orange (Skript) – bei Null wertet das Formular aus. */
.kifa-wrap .kifa-countdown {
	height: 3px;
	margin: 6px 0 0;
	border-radius: 2px;
	background: var(--kifa-line);
	overflow: hidden;
}

.kifa-wrap .kifa-countdown-bar {
	width: 0;
	height: 100%;
	border-radius: 2px;
	background-color: var(--kifa-dark);
}

/* Zeile unter dem Freitext als Raster: links der Hinweis, rechts Zeichenzahl und „Jetzt auswerten“, darunter
   Überschrift und Chips über die volle Breite. Die Teile treten einzeln zurück (Zeichenzahl ab der
   Mindestlänge, Überschrift mit dem ersten Haken, Hinweis nach der zweiten Auswertung) – jede Kombination
   bleibt sauber: Fällt der Hinweis weg, rückt die Überschrift an seinen Platz; sind beide weg, stehen die
   Chips links neben dem Button. Der Button bleibt immer oben rechts stehen; finden die Chips daneben keinen
   Platz, brechen sie in ihrer Spalte um, statt ihn zu verdrängen. */
.kifa-wrap .kifa-hint-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 12px;
	margin: 8px 0 16px;
}

.kifa-wrap .kifa-hint-row .kifa-hint {
	grid-column: 1;
	grid-row: 1;
}

/* Zeichenzahl und Button als Paar, immer oben rechts. */
.kifa-wrap .kifa-hint-actions {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.kifa-wrap .kifa-hint-row .kifa-must-label,
.kifa-wrap .kifa-hint-row .kifa-must-list {
	grid-column: 1 / -1;
}

/* Hinweis weg, Überschrift noch da: Sie steht links neben dem Button. */
.kifa-wrap .kifa-hint-row.kifa-hint-off .kifa-must-label {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

/* Hinweis und Überschrift weg: Die Chips stehen in einer Zeile mit „Jetzt auswerten“. */
.kifa-wrap .kifa-hint-row.kifa-hint-off.kifa-label-off .kifa-must-list {
	grid-column: 1;
	grid-row: 1;
}

.kifa-wrap .kifa-count {
	white-space: nowrap;
}

/* ---------- Buttons (Styleguide 7.1) ---------- */

.kifa-wrap .kifa-btn,
.kifa-wrap .kifa-btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	text-align: center;
	border: 1px solid rgba(0, 0, 0, 0);
	border-radius: 10px;
	padding: 15px 26px;
	cursor: pointer;
}

/* Pfeil rechts für Handlungen, wie „fas fa-arrow-right“ auf der Seite */
.kifa-wrap .kifa-btn::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 7h10.6L7.3 2.7l1.4-1.4L15.4 8l-6.7 6.7-1.4-1.4L11.6 9H1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 7h10.6L7.3 2.7l1.4-1.4L15.4 8l-6.7 6.7-1.4-1.4L11.6 9H1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Primär (seit 2.2.0): weiße Schrift auf dem dunkleren Orange #C43E0C – Kontrast 5,2 : 1, erfüllt WCAG AA.
   Das ist eine bewusste Entscheidung: Auf #E74B11 erreicht Weiß bei 15 px nur 3,88 : 1, deshalb die eigene
   Flächenfarbe – bitte nicht wieder auf schwarze Schrift zurückstellen. Gilt für alle Primär-Buttons:
   „Anforderung absenden“, „Jetzt auswerten“, „Übernehmen“/„Abbrechen“ im Korrekturfeld, „Ja, Beschreibung
   übernehmen“ im Dialog. */
.kifa-wrap .kifa-btn-primary,
.kifa-wrap .kifa-btn-primary:focus {
	color: #fff;
	background: var(--kifa-accent-strong);
	border-color: var(--kifa-accent-strong);
}

/* Mouseover: Weiß auf Dunkelblau. */
.kifa-wrap .kifa-btn-primary:hover:not(:disabled) {
	color: #fff;
	background: var(--kifa-dark);
	border-color: var(--kifa-dark);
}

/* „Anforderung absenden“: volle Breite mit Abstand. Ein- und Ausblenden (kifa-fresh, kifa-incomplete,
   kifa-rise) hängen an dieser Klasse, nicht am Aussehen – sonst verschwänden auch „Jetzt auswerten“ und
   „Übernehmen“, solange die Beschreibung unvollständig ist. */
.kifa-wrap .kifa-submit,
.kifa-wrap .kifa-submit:focus {
	width: 100%;
	margin-top: 24px;
}

.kifa-wrap .kifa-btn-outline,
.kifa-wrap .kifa-btn-outline:focus {
	color: var(--kifa-text);
	background: rgba(0, 0, 0, 0);
	border-color: var(--kifa-field-line);
}

.kifa-wrap .kifa-btn-outline:hover:not(:disabled) {
	color: var(--kifa-text);
	background: var(--kifa-hover);
	border-color: var(--kifa-dark);
}

/* Klein (Styleguide 7.1 „Outline klein“): für Handlungen innerhalb des Formulars. */
.kifa-wrap .kifa-btn-small,
.kifa-wrap .kifa-btn-small:focus {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	padding: 7px 12px;
}

/* Kreispfeil statt Pfeil: „neu auswerten“ */
.kifa-wrap .kifa-btn-refresh::after {
	width: 13px;
	height: 13px;
	margin-left: 7px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.6 2.4A7.95 7.95 0 0 0 8 0a8 8 0 1 0 7.73 10h-2.08A6 6 0 1 1 8 2c1.66 0 3.14.69 4.22 1.78L9 7h7V0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.6 2.4A7.95 7.95 0 0 0 8 0a8 8 0 1 0 7.73 10h-2.08A6 6 0 1 1 8 2c1.66 0 3.14.69 4.22 1.78L9 7h7V0z'/%3E%3C/svg%3E");
}

.kifa-wrap .kifa-btn.kifa-busy::after {
	animation: kifa-spin 0.9s linear infinite;
}

/* Gesperrt: als Outline statt halbtransparent – keine Zwischentöne. */
.kifa-wrap .kifa-btn:disabled,
.kifa-wrap .kifa-btn:disabled:hover {
	color: var(--kifa-text);
	background: rgba(0, 0, 0, 0);
	border-color: var(--kifa-line);
	cursor: not-allowed;
}

/* ---------- Bereiche (Karten auf hellem Grund) ---------- */

.kifa-wrap .kifa-panel {
	background: var(--kifa-surface);
	border: 1px solid var(--kifa-line);
	border-radius: 10px;
	padding: 24px;
	margin-bottom: 24px;
}

.kifa-wrap .kifa-panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Akzentkante: dunkel für das Ergebnis, orange für das, was noch fehlt */
.kifa-wrap .kifa-summary-panel {
	border-left: 3px solid var(--kifa-dark);
}

.kifa-wrap .kifa-toggle {
	display: flex;
	gap: 6px;
	margin: 0 0 16px;
}

.kifa-wrap .kifa-toggle-btn,
.kifa-wrap .kifa-toggle-btn:focus {
	flex: 1 1 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--kifa-text);
	background: rgba(0, 0, 0, 0);
	border: 1px solid var(--kifa-field-line);
	border-radius: 10px;
	padding: 10px;
	cursor: pointer;
}

.kifa-wrap .kifa-tab-badge {
	display: inline-block;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	padding: 0 6px;
	margin-left: 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	color: #fff;
	background: var(--kifa-alert);
	/* Dünner weißer Rand: Auf dem orangen aktiven Tab stünde Dunkelrot sonst zu wenig ab (1,8 : 1). */
	border: 1px solid #fff;
	box-sizing: border-box;
	vertical-align: baseline;
}

.kifa-wrap .kifa-toggle-btn:hover {
	color: var(--kifa-text);
	background: var(--kifa-hover);
	border-color: var(--kifa-dark);
}

/* Aktiver Tab: Weiß auf dem dunkleren Orange – ohne Mouseover-Wechsel, ein Klick auf ihn bewirkt nichts. */
.kifa-wrap .kifa-toggle-active,
.kifa-wrap .kifa-toggle-active:hover,
.kifa-wrap .kifa-toggle-active:focus {
	color: #fff;
	background: var(--kifa-accent-strong);
	border-color: var(--kifa-accent-strong);
}

.kifa-wrap .kifa-summary-text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--kifa-text);
	white-space: pre-wrap;
}

.kifa-wrap .kifa-summary-note {
	display: block;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--kifa-line);
}

/* ---------- Kernangaben: Stichpunkte unter Zusammenfassung und Mitarbeiter-Text ---------- */

.kifa-wrap .kifa-facts {
	margin: 12px 0 0;
	padding: 12px 0 0 20px;
	border-top: 1px solid var(--kifa-line);
	list-style: disc;
	font-size: 15px;
	line-height: 1.5;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-fact {
	margin: 0 0 4px;
	padding: 0;
}

.kifa-wrap .kifa-fact strong {
	font-weight: 700;
}

/* ---------- Nebeninformationen ---------- */

.kifa-wrap .kifa-notes {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 10px 16px;
	margin: 0;
}

.kifa-wrap .kifa-note-label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-note-value {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--kifa-text);
}

/* Annahme: als kleines Label mit orangem Strich statt Warnfarbe */
.kifa-wrap .kifa-note-flag {
	display: block;
	margin-top: 3px;
	padding-left: 6px;
	border-left: 2px solid var(--kifa-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1.3;
	color: var(--kifa-text);
}

/* Bestätigte Annahme: grüner Strich statt orange */
.kifa-wrap .kifa-note-flag.kifa-note-confirmed {
	border-left-color: #2e7d32;
}

/* Sprachkenntnisse (seit 3.0.0): je Zeile Sprache, Niveau und Entfernen; schmal zweizeilig */
.kifa-wrap .kifa-lang-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 12em) auto;
	gap: 8px;
	align-items: center;
	margin: 0 0 8px;
}

.kifa-wrap .kifa-lang-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--kifa-line);
	border-radius: 6px;
	background: transparent;
	color: var(--kifa-dark);
	cursor: pointer;
}

.kifa-wrap .kifa-lang-remove:hover,
.kifa-wrap .kifa-lang-remove:focus-visible {
	background: var(--kifa-dark);
	border-color: var(--kifa-dark);
	color: #fff;
}

.kifa-wrap .kifa-lang-remove-icon {
	width: 16px;
	height: 16px;
}

.kifa-wrap .kifa-lang-add,
.kifa-wrap .kifa-lang-add:hover,
.kifa-wrap .kifa-lang-add:focus {
	display: inline-block;
	margin: 2px 0 0;
	font-size: 14px;
}

@media (max-width: 480px) {
	.kifa-wrap .kifa-lang-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.kifa-wrap .kifa-lang-name {
		grid-column: 1 / -1;
	}
}

/* Widerspruch zwischen Feld und Beschreibung (seit 3.0.0): orange Kante wie eine Annahme */
.kifa-wrap .kifa-question-conflict,
.kifa-wrap .kifa-question-wage {
	padding-left: 10px;
	border-left: 3px solid var(--kifa-accent);
}

/* Bestätigt (seit 3.0.0): weißer Haken in schwarzem Kreis vor dem Text, mittig auf der ersten Zeile */
.kifa-wrap .kifa-note-value.kifa-note-done {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.kifa-wrap .kifa-note-check {
	display: inline-flex;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: calc((1.4em - 16px) / 2);
	color: #000;
}

.kifa-wrap .kifa-note-check-icon {
	width: 16px;
	height: 16px;
}

.kifa-wrap .kifa-note-text {
	min-width: 0;
}

/* Bestätigen (grüner Haken) und Ablehnen (Kreuz) einer Annahme */
.kifa-wrap .kifa-note-actions {
	display: inline-flex;
	gap: 6px;
	margin: 6px 0 0;
}

.kifa-wrap .kifa-note-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #2e7d32;
	color: #fff;
	cursor: pointer;
	transition: transform 0.12s ease, background-color 0.12s ease;
}

.kifa-wrap .kifa-note-btn svg {
	width: 14px;
	height: 14px;
}

.kifa-wrap .kifa-note-btn:hover,
.kifa-wrap .kifa-note-btn:focus-visible {
	background: var(--kifa-dark);
	color: #fff;
	transform: scale(1.08);
	outline: none;
}

.kifa-wrap .kifa-note-btn.kifa-note-no {
	background: var(--kifa-accent);
	color: #fff;
}

.kifa-wrap .kifa-note-btn.kifa-note-no:hover,
.kifa-wrap .kifa-note-btn.kifa-note-no:focus-visible {
	background: var(--kifa-dark);
	color: #fff;
}

/* Korrektur direkt an der Annahme: Feld plus Übernehmen/Abbrechen im <dd> */
.kifa-wrap .kifa-note-fix {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin: 8px 0 2px;
}

.kifa-wrap .kifa-note-fix-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: auto;
	min-height: 0;
	font-family: var(--kifa-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--kifa-text);
	background-color: var(--kifa-field);
	border: 1px solid var(--kifa-field-line);
	border-radius: 8px;
	padding: 9px 12px;
	margin: 0;
	box-shadow: none;
	text-transform: none;
}

.kifa-wrap .kifa-note-fix-input:focus {
	outline: 2px solid var(--kifa-dark);
	outline-offset: -1px;
	border-color: var(--kifa-dark);
}

.kifa-wrap .kifa-note-fix-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kifa-wrap .kifa-note-fix-actions .kifa-btn {
	margin: 0;
}

/* Anreise: Statustext gedämpft, Lade-Animation, Haltestellen-Liste */
.kifa-wrap .kifa-note-muted {
	color: rgba(33, 34, 50, 0.7);
}

.kifa-wrap .kifa-note-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 8px -2px 0;
	border: 2px solid var(--kifa-line);
	border-top-color: var(--kifa-accent);
	border-radius: 50%;
	animation: kifa-turn 0.9s linear infinite;
}

@keyframes kifa-turn {
	to { transform: rotate(360deg); }
}

/* Haltestellen (seit 3.0.0): statt des Aufzählungspunkts stehen vorn die Symbole der Verkehrsmittel, dann Name
   und Fußweg – ohne Linien. Mehrere Symbole direkt nebeneinander; bricht der Name um, bleibt er rechts davon. */
.kifa-wrap .kifa-stops {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kifa-wrap .kifa-stop {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 6px;
	padding: 0;
	line-height: 1.4;
}

.kifa-wrap .kifa-stop::before,
.kifa-wrap .kifa-stop::marker {
	content: none;
}

.kifa-wrap .kifa-stop-info {
	min-width: 0;
}

/* „+ N weitere Haltestellen“ / „weniger anzeigen“: Textlink unter der Liste, bündig mit den Namen */
.kifa-wrap .kifa-stops-toggle,
.kifa-wrap .kifa-stops-toggle:hover,
.kifa-wrap .kifa-stops-toggle:focus {
	display: inline-block;
	margin: 0 0 2px;
	font-size: 14px;
	line-height: 1.4;
}

.kifa-wrap .kifa-stop-name {
	font-weight: 700;
}

.kifa-wrap .kifa-stop-dist {
	margin-left: 6px;
	font-size: 13px;
	color: rgba(33, 34, 50, 0.7);
}

.kifa-wrap .kifa-stop-modes {
	display: inline-flex;
	flex-shrink: 0;
	gap: 2px;
	/* Symbole mittig auf der ersten Textzeile (Zeilenhöhe 1.4 × 15 px) */
	margin-top: calc((1.4em - 16px) / 2);
}

.kifa-wrap .kifa-mode {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: var(--kifa-dark);
}

.kifa-wrap .kifa-mode svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

@media (max-width: 767px) {
	.kifa-wrap .kifa-notes {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.kifa-wrap .kifa-note-value {
		margin-bottom: 10px;
	}
}

.kifa-wrap .kifa-ainote {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--kifa-line);
	font-size: 13px;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-spinner {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-bottom: 12px;
	border: 2px solid var(--kifa-line);
	border-top-color: var(--kifa-accent);
	border-radius: 50%;
	animation: kifa-spin 0.8s linear infinite;
}

@keyframes kifa-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Typische Aufgaben ---------- */

.kifa-wrap .kifa-tasks-panel {
	margin-top: 24px;
}

.kifa-wrap .kifa-tasks-panel .kifa-hint {
	display: block;
	margin-bottom: 12px;
}

.kifa-wrap .kifa-tasks {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kifa-wrap .kifa-task {
	margin: 0;
	padding: 0;
}

.kifa-wrap .kifa-task-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kifa-text);
	padding: 4px 6px;
	border-radius: 8px;
	cursor: pointer;
}

.kifa-wrap .kifa-task-label:hover {
	background: var(--kifa-hover);
}

/* Kästchen auf die erste Zeile zentriert (Zeilenhöhe 20 px) */
.kifa-wrap .kifa-task-label input[type="checkbox"] {
	margin-top: 1px;
}

.kifa-wrap .kifa-task-on > .kifa-task-label {
	font-weight: 700;
}

/* ---------- Das fehlt noch (Rückfragen) ---------- */

.kifa-wrap .kifa-questions-panel {
	border-left: 3px solid var(--kifa-accent);
}

.kifa-wrap .kifa-question-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kifa-wrap .kifa-question {
	margin: 0;
	padding: 0;
}

.kifa-wrap .kifa-question + .kifa-question {
	border-top: 1px solid var(--kifa-line);
}

.kifa-wrap .kifa-question-btn,
.kifa-wrap .kifa-question-btn:focus {
	display: block;
	width: 100%;
	font-weight: 400;
	text-align: left;
	color: var(--kifa-text);
	background: rgba(0, 0, 0, 0);
	border: 0;
	border-radius: 8px;
	padding: 10px 6px;
	cursor: pointer;
}

.kifa-wrap .kifa-question-btn:hover {
	color: var(--kifa-text);
	background: var(--kifa-hover);
}

.kifa-wrap .kifa-question-text {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-question > .kifa-question-text {
	padding: 10px 6px 4px;
}

.kifa-wrap .kifa-question-field {
	display: block;
	margin-top: 2px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Schnellantworten zum Anklicken */

.kifa-wrap .kifa-answers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 8px 6px;
}

.kifa-wrap .kifa-answer,
.kifa-wrap .kifa-answer:focus {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	color: var(--kifa-text);
	background: rgba(0, 0, 0, 0);
	border: 1px solid var(--kifa-field-line);
	border-radius: 10px;
	padding: 7px 12px;
	cursor: pointer;
}

.kifa-wrap .kifa-answer:hover {
	color: var(--kifa-text);
	background: var(--kifa-hover);
	border-color: var(--kifa-dark);
}

.kifa-wrap .kifa-answer-on,
.kifa-wrap .kifa-answer-on:hover,
.kifa-wrap .kifa-answer-on:focus {
	color: var(--kifa-surface);
	background: var(--kifa-dark);
	border-color: var(--kifa-dark);
}

.kifa-wrap .kifa-answer-status {
	display: none;
	margin: 0 0 8px 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-answer-active {
	display: block;
}

/* ---------- Felder ---------- */

.kifa-wrap .kifa-fields {
	margin-top: 8px;
}

.kifa-wrap .kifa-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-bottom: 16px;
}

.kifa-wrap .kifa-legend-item {
	display: inline-flex;
	align-items: center;
}

.kifa-wrap .kifa-chip {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 6px;
	border-radius: 4px;
	background: var(--kifa-surface);
	border: 1px solid var(--kifa-line);
}

/* Die Kästchen zeigen, wie die Felder aussehen: hellrot = Pflicht offen, hellgelb = ergänzbar. */
.kifa-wrap .kifa-chip-required { border: 2px solid var(--kifa-accent); background: var(--kifa-field-required); }
.kifa-wrap .kifa-chip-optional { border: 1px solid var(--kifa-field-line); background: var(--kifa-field); }
.kifa-wrap .kifa-chip-done     { border: 1px solid var(--kifa-dark); background: var(--kifa-dark); }

.kifa-wrap .kifa-sorthint {
	display: block;
	margin: -8px 0 16px;
}

/* Beschreibung vollständig: Rückfragen, Aufgaben, Legende und fertige Angaben treten zurück –
   der Schalter unter den Angaben holt sie wieder hervor. */
.kifa-wrap .kifa-complete .kifa-questions-panel,
.kifa-wrap .kifa-complete .kifa-tasks-panel,
.kifa-wrap .kifa-complete .kifa-legend,
.kifa-wrap .kifa-complete .kifa-sorthint,
.kifa-wrap .kifa-gone {
	display: none;
}

.kifa-wrap .kifa-complete-note {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--kifa-text);
	border: 1px solid var(--kifa-line);
	border-left: 3px solid var(--kifa-dark);
	border-radius: 10px;
	padding: 12px 16px;
	margin: 0 0 12px;
}

/* Haken wie bei den Check-Badges der Seite: Symbol in Orange */
.kifa-wrap .kifa-complete-note::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: var(--kifa-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 13.4L1 8.2l1.8-1.8 3.4 3.4 7-7L15 4.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 13.4L1 8.2l1.8-1.8 3.4 3.4 7-7L15 4.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kifa-wrap .kifa-field-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Eigene Vergütung: die eigene Karte bleibt unsichtbar, ihr Eingabefeld steht in der Karte des Modells */
.kifa-wrap .kifa-field.kifa-pay-off {
	display: none;
}

.kifa-wrap .kifa-pay-custom {
	margin-top: 8px;
}

/* Rahmenstärke wechselt je Status – das Innenmaß gleicht es aus, nichts springt. */
.kifa-wrap .kifa-field {
	background: var(--kifa-surface);
	border: 1px solid var(--kifa-line);
	border-radius: 10px;
	padding: 12px 14px;
	transition: border-color 0.2s ease, transform 0.45s ease;
}

.kifa-wrap .kifa-s-required {
	border: 2px solid var(--kifa-accent);
	padding: 11px 13px;
}

.kifa-wrap .kifa-s-optional {
	border: 1px solid var(--kifa-line);
}

.kifa-wrap .kifa-s-done {
	border: 1px solid var(--kifa-dark);
}

.kifa-wrap .kifa-moving {
	position: relative;
	z-index: 1;
}

/* Fertige Angaben eingeklappt: nur Beschriftung und Wert. */
.kifa-wrap .kifa-field-peek,
.kifa-wrap .kifa-field-peek:focus {
	display: none;
	width: 100%;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	color: var(--kifa-text);
	background: rgba(0, 0, 0, 0);
	border: 0;
	border-radius: 0;
	padding: 0;
	cursor: pointer;
}

.kifa-wrap .kifa-field-peek:hover {
	color: var(--kifa-text);
	background: rgba(0, 0, 0, 0);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kifa-wrap .kifa-collapsed {
	padding-top: 8px;
	padding-bottom: 8px;
}

.kifa-wrap .kifa-collapsed .kifa-control,
.kifa-wrap .kifa-collapsed .kifa-badge {
	display: none;
}

.kifa-wrap .kifa-collapsed .kifa-field-peek {
	display: block;
}

.kifa-wrap .kifa-collapsed .kifa-label {
	margin-bottom: 2px;
}

.kifa-wrap .kifa-done-toggle,
.kifa-wrap .kifa-done-toggle:focus {
	display: block;
	width: 100%;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: #fff;
	background: var(--kifa-accent-strong);
	border: 1px solid var(--kifa-accent-strong);
	border-radius: 10px;
	padding: 10px 12px;
	cursor: pointer;
}

.kifa-wrap .kifa-done-toggle:hover {
	color: #fff;
	background: var(--kifa-dark);
	border-color: var(--kifa-dark);
}

.kifa-wrap .kifa-field-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.kifa-wrap .kifa-field-head .kifa-label {
	flex: 1 1 auto;
	margin-bottom: 6px;
}

/* Statusmarke: Dunkel = erledigt, Orange = fehlt oder zu ungenau („bitte ergänzen“ / „bitte genauer“ – Weiß auf
   dem dunkleren Orange, damit es lesbar ist), Outline = kann genauer werden */
.kifa-wrap .kifa-badge {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.3px;
	padding: 4px 8px;
	border-radius: 10px;
	color: var(--kifa-text);
	background: var(--kifa-surface);
	border: 1px solid var(--kifa-line);
	white-space: nowrap;
}

.kifa-wrap .kifa-s-done .kifa-badge {
	color: var(--kifa-surface);
	background: var(--kifa-dark);
	border-color: var(--kifa-dark);
}

.kifa-wrap .kifa-s-required .kifa-badge {
	color: #fff;
	background: var(--kifa-accent-strong);
	border-color: var(--kifa-accent-strong);
}

.kifa-wrap .kifa-s-optional .kifa-badge {
	color: var(--kifa-text);
	background: var(--kifa-surface);
	border-color: var(--kifa-line);
}

/* „✓ Stimmt so“ (seit 2.3.1): grüner Kreis mit Haken wie bei den Annahmen, daneben die Beschriftung */
.kifa-wrap .kifa-field-ok,
.kifa-wrap .kifa-field-ok:focus {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 2px 9px 2px 2px;
	border: 1px solid #2e7d32;
	border-radius: 14px;
	background: var(--kifa-surface);
	color: #1b5e20;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.kifa-wrap .kifa-field-ok-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #2e7d32;
	color: #fff;
}

.kifa-wrap .kifa-field-ok-icon svg {
	width: 12px;
	height: 12px;
}

.kifa-wrap .kifa-field-ok:hover,
.kifa-wrap .kifa-field-ok:focus-visible {
	background: #2e7d32;
	color: #fff;
}

.kifa-wrap .kifa-collapsed .kifa-field-ok {
	display: none;
}

.kifa-wrap .kifa-unlock,
.kifa-wrap .kifa-unlock:focus {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--kifa-text);
	background: var(--kifa-surface);
	border: 1px solid var(--kifa-field-line);
	border-radius: 8px;
	padding: 4px 7px;
	cursor: pointer;
}

.kifa-wrap .kifa-unlock:hover {
	color: var(--kifa-text);
	background: var(--kifa-hover);
	border-color: var(--kifa-dark);
}

/* Eingabefelder (Styleguide 7.7): hellgelb = Eingabe möglich, Rahmen se_field_line, Radius 8.
   :where() hält die Gewichtung niedrig, Zustände und Themes lassen sich so sauber staffeln. */
.kifa-wrap .kifa-control :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	font-family: var(--kifa-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--kifa-text);
	background-color: var(--kifa-field);
	border: 1px solid var(--kifa-field-line);
	border-radius: 8px;
	padding: 9px 12px;
	margin: 0;
	box-shadow: none;
	text-transform: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Pflicht, noch offen: hellrot mit oranger Kante */
.kifa-wrap .kifa-s-required .kifa-control :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	background-color: var(--kifa-field-required);
	border-color: var(--kifa-accent);
}

/* Fokus: dunkle Kante in 2 px – die Kontur liegt innen, nichts verschiebt sich. */
.kifa-wrap .kifa-control :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
	outline: 2px solid var(--kifa-dark);
	outline-offset: -1px;
	border-color: var(--kifa-dark);
}

.kifa-wrap .kifa-control textarea {
	resize: vertical;
}

/* Auswahlliste: eigener Pfeil, damit Themes keinen zweiten zeichnen */
.kifa-wrap .kifa-control select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23212232' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
	cursor: pointer;
}

/* Datum: Textfeld TT.MM.JJJJ plus Kalenderknopf; Uhrzeit: Textfeld HH:MM */
.kifa-wrap .kifa-date {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.kifa-wrap .kifa-control .kifa-date-text {
	flex: 0 1 auto;
	width: 9.5em;
}

.kifa-wrap .kifa-control .kifa-time {
	width: 6em;
}

/* Unsichtbares Datumsfeld, nur für den Kalender des Browsers – er öffnet sich am Knopf. */
.kifa-wrap .kifa-control input.kifa-date-proxy {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 42px;
	height: 1px;
	min-height: 0;
	padding: 0;
	border: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.kifa-wrap .kifa-date-btn,
.kifa-wrap .kifa-date-btn:focus {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	color: var(--kifa-dark);
	background: var(--kifa-surface);
	border: 1px solid var(--kifa-field-line);
	border-radius: 8px;
	padding: 0;
	cursor: pointer;
}

.kifa-wrap .kifa-date-btn:hover {
	color: var(--kifa-dark);
	background: var(--kifa-hover);
	border-color: var(--kifa-dark);
}

.kifa-wrap .kifa-date-btn::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 0h2v2h4V0h2v2h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h2zM3 6v8h10V6zm2 2h2v2H5zm4 0h2v2H9zm-4 3h2v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 0h2v2h4V0h2v2h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h2zM3 6v8h10V6zm2 2h2v2H5zm4 0h2v2H9zm-4 3h2v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kifa-wrap .kifa-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.kifa-wrap .kifa-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kifa-text);
	cursor: pointer;
}

/* Auswahlkästchen (Styleguide 7.7): 18 px, 2 px dunkle Kante, weiß; gewählt dunkel mit weißem Haken.
   Themes zeichnen teils eigene Haken per ::before – die werden hier abgeschaltet. */
.kifa-wrap input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	flex: 0 0 auto;
	display: inline-block;
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--kifa-dark);
	border-radius: 4px;
	background-color: var(--kifa-surface);
	background-image: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px 12px;
	box-shadow: none;
	vertical-align: middle;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.kifa-wrap input[type="checkbox"]:hover:not(:checked):not(:disabled) {
	background-color: var(--kifa-hover);
}

.kifa-wrap input[type="checkbox"]:checked {
	background-color: var(--kifa-dark);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.4' fill='none' stroke='%23FFFFFF' stroke-width='2.2'/%3E%3C/svg%3E");
}

.kifa-wrap input[type="checkbox"]::before,
.kifa-wrap input[type="checkbox"]:checked::before,
.kifa-wrap input[type="checkbox"]::after {
	content: none;
	display: none;
}

.kifa-wrap input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--kifa-dark);
	outline-offset: 2px;
}

.kifa-wrap input[type="checkbox"]:disabled {
	background-color: var(--kifa-surface);
	border-color: var(--kifa-line);
	cursor: not-allowed;
}

.kifa-wrap .kifa-range {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.kifa-wrap .kifa-range-sep {
	flex: 0 0 auto;
	color: var(--kifa-text);
}

/* Frisch befüllt: kurze orange Kontur, keine Flächentönung */
.kifa-wrap .kifa-flash {
	animation: kifa-flash 1.1s ease-out;
}

@keyframes kifa-flash {
	0%   { outline: 3px solid var(--kifa-accent); outline-offset: 1px; }
	100% { outline: 3px solid rgba(0, 0, 0, 0); outline-offset: 5px; }
}

/* ---------- Kontakt & Meldungen ---------- */

.kifa-wrap .kifa-contact {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--kifa-line);
}

.kifa-wrap .kifa-contact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

/* Alle Kontaktangaben sind Pflicht: offen hellrot mit oranger Kante, ausgefüllt hellgelb */
.kifa-wrap .kifa-contact-field input {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	font-family: var(--kifa-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--kifa-text);
	background-color: var(--kifa-field-required);
	border: 1px solid var(--kifa-accent);
	border-radius: 8px;
	padding: 9px 12px;
	margin: 0;
	box-shadow: none;
	text-transform: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.kifa-wrap .kifa-contact-field input.kifa-c-done {
	background-color: var(--kifa-field);
	border-color: var(--kifa-field-line);
}

.kifa-wrap .kifa-contact-field input:focus,
.kifa-wrap .kifa-contact-field input.kifa-c-done:focus {
	outline: 2px solid var(--kifa-dark);
	outline-offset: -1px;
	border-color: var(--kifa-dark);
}

/* Fehlerhaft (etwa ein unvollständiges Datum): wie „Pflicht offen“ */
.kifa-wrap .kifa-invalid,
.kifa-wrap .kifa-contact-field input.kifa-invalid {
	background-color: var(--kifa-field-required) !important;
	border-color: var(--kifa-accent) !important;
}

.kifa-wrap .kifa-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

.kifa-wrap .kifa-msg {
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 15px;
	color: var(--kifa-text);
	background: var(--kifa-surface);
	border: 1px solid var(--kifa-line);
}

.kifa-wrap .kifa-msg-error {
	border: 1px solid var(--kifa-line);
	border-left: 3px solid var(--kifa-accent);
	font-weight: 700;
}

.kifa-wrap .kifa-success {
	grid-column: 1 / -1;
	text-align: center;
	background: var(--kifa-surface);
	border: 1px solid var(--kifa-line);
	border-radius: 10px;
	padding: 40px 24px;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-success .kifa-btn {
	margin-top: 16px;
}

/* Hinweis ohne Fehler (seit 3.0.0): „Diese Funktion wird in Kürze freigeschaltet.“ */
.kifa-wrap .kifa-msg-info {
	border: 1px solid var(--kifa-line);
	border-left: 3px solid var(--kifa-dark);
	font-weight: 700;
}

/* ---------- Bestellsystem (seit 3.0.0): Ansichten, Statuszeile, Schicht, Liste, Beauftragen ---------- */

/* Ansichten: Auswahl und Formular stehen nur in der Ansicht „Formular“; Liste und Beauftragen haben eigene Bereiche.
   Der Container trägt kifa-view-form / kifa-view-list / kifa-view-checkout – auch für Theme-CSS. */
.kifa-wrap.kifa-view-list .kifa-picker,
.kifa-wrap.kifa-view-list .kifa-body,
.kifa-wrap.kifa-view-checkout .kifa-picker,
.kifa-wrap.kifa-view-checkout .kifa-body,
.kifa-wrap.kifa-view-done .kifa-picker,
.kifa-wrap.kifa-view-done .kifa-body,
.kifa-wrap.kifa-view-history .kifa-picker,
.kifa-wrap.kifa-view-history .kifa-body {
	display: none;
}

/* Überschriften, die beim Ansichtswechsel den Fokus bekommen – ohne Fokusrahmen, sie sind keine Bedienelemente. */
.kifa-wrap [tabindex="-1"]:focus,
.kifa-wrap [tabindex="-1"]:focus-visible {
	outline: none;
}

/* Statuszeile über jeder Ansicht: rechtsbündig, klein; seit 3.1.0 links daneben „Anforderungshistorie“. */
.kifa-wrap .kifa-status {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px 20px;
	min-height: 20px;
	margin: -16px 0 12px;
	font-size: 13px;
	line-height: 1.5;
	text-align: right;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-status .kifa-link-btn,
.kifa-wrap .kifa-status .kifa-link-btn:hover,
.kifa-wrap .kifa-status .kifa-link-btn:focus {
	font-size: 13px;
	text-align: right;
}

/* Symbole der Statuszeile (seit 3.2.0): 16 px, auf die Textzeile zentriert – im Text- wie im Link-Zustand; unterstrichen
   ist im Link-Zustand nur der Text. */
.kifa-wrap .kifa-status .kifa-status-text,
.kifa-wrap .kifa-status .kifa-link-btn,
.kifa-wrap .kifa-status .kifa-link-btn:hover,
.kifa-wrap .kifa-status .kifa-link-btn:focus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}

.kifa-wrap .kifa-status .kifa-link-btn .kifa-status-label {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.kifa-wrap .kifa-status-icon {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.kifa-wrap .kifa-status-svg {
	width: 16px;
	height: 16px;
}

.kifa-wrap .kifa-h4 {
	font-family: var(--kifa-font);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.2px;
	text-transform: none;
	color: var(--kifa-text);
	margin: 0 0 12px;
}

/* Block „Schicht“ im Formular und dieselbe Zusammenfassung in den Karten der Liste. */
.kifa-wrap .kifa-shift {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--kifa-line);
}

.kifa-wrap .kifa-shift-title {
	font-family: var(--kifa-font);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kifa-text);
	margin: 0 0 4px;
}

.kifa-wrap .kifa-shift-line,
.kifa-wrap .kifa-shift-pool {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.5;
}

.kifa-wrap .kifa-shift-pool {
	margin-bottom: 14px;
}

.kifa-wrap .kifa-estimate {
	margin: 0;
	padding: 2px 0 2px 14px;
	border-left: 3px solid var(--kifa-dark);
}

.kifa-wrap .kifa-estimate-title {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.kifa-wrap .kifa-estimate-rows {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 4px 12px;
	margin: 0;
}

.kifa-wrap .kifa-estimate-label,
.kifa-wrap .kifa-estimate-calc {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.kifa-wrap .kifa-estimate-label {
	font-weight: 700;
}

.kifa-wrap .kifa-estimate-sub {
	display: block;
	font-size: 12px;
	font-style: italic;
	line-height: 1.4;
}

.kifa-wrap .kifa-estimate-note,
.kifa-wrap .kifa-estimate-none {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.45;
}

.kifa-wrap .kifa-estimate-none {
	margin-top: 0;
	font-style: italic;
}

.kifa-wrap .kifa-shift-cancel-row {
	margin: 14px 0 0;
	text-align: center;
}

/* Liste „Ihre Bedarfsanforderungen“ */
.kifa-wrap .kifa-cart-title,
.kifa-wrap .kifa-checkout-title {
	margin: 0 0 16px;
}

.kifa-wrap .kifa-entries {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.kifa-wrap .kifa-entry {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 12px 16px;
	margin: 0;
	padding: 20px;
	list-style: none;
	background: var(--kifa-surface);
	border: 1px solid var(--kifa-line);
	border-left: 3px solid var(--kifa-dark);
	border-radius: 10px;
}

.kifa-wrap .kifa-entries-readonly .kifa-entry {
	grid-template-columns: minmax(0, 1fr);
}

.kifa-wrap .kifa-entry-body {
	min-width: 0;
}

.kifa-wrap .kifa-entry-actions {
	display: flex;
	gap: 8px;
}

/* Icon-Buttons „bearbeiten“ und „löschen“: Outline, beim Überfahren Weiß auf Dunkelblau. */
.kifa-wrap .kifa-icon-btn,
.kifa-wrap .kifa-icon-btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--kifa-text);
	background: rgba(0, 0, 0, 0);
	border: 1px solid var(--kifa-field-line);
	border-radius: 10px;
	cursor: pointer;
}

.kifa-wrap .kifa-icon-btn:hover:not(:disabled) {
	color: #fff;
	background: var(--kifa-dark);
	border-color: var(--kifa-dark);
}

.kifa-wrap .kifa-icon-btn:disabled,
.kifa-wrap .kifa-icon-btn:disabled:hover {
	color: var(--kifa-text);
	background: rgba(0, 0, 0, 0);
	border: 1px dashed var(--kifa-line);
	cursor: not-allowed;
}

.kifa-wrap .kifa-icon-svg {
	width: 18px;
	height: 18px;
}

.kifa-wrap .kifa-entry-gone {
	margin: 12px 0 0;
	font-size: 13px;
	font-style: italic;
}

.kifa-wrap .kifa-cart-empty {
	margin: 0 0 24px;
	font-style: italic;
}

.kifa-wrap .kifa-cart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.kifa-wrap .kifa-cart-actions .kifa-btn {
	flex: 1 1 260px;
	line-height: 1.3;
}

.kifa-wrap .kifa-cart-full {
	margin: 10px 0 0;
}

.kifa-wrap .kifa-cart-warning,
.kifa-wrap .kifa-toast {
	margin: 0 0 16px;
	padding: 10px 14px;
	font-size: 15px;
	line-height: 1.5;
	border: 1px solid var(--kifa-line);
	border-left: 3px solid var(--kifa-accent);
	border-radius: 8px;
}

.kifa-wrap .kifa-toast {
	border-left-color: var(--kifa-dark);
}

.kifa-wrap .kifa-toast .kifa-link-btn {
	font-weight: 700;
}

/* Beauftragen: Kopf mit Rücklink, Tarif als Radio-Karten, Kontaktdaten, zwei Buttons. */
.kifa-wrap .kifa-checkout-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin: 0 0 20px;
}

.kifa-wrap .kifa-checkout-head .kifa-checkout-title {
	margin: 0;
}

.kifa-wrap .kifa-tariffs {
	min-width: 0;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
}

.kifa-wrap .kifa-tariffs-legend {
	float: none;
	width: auto;
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--kifa-font);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--kifa-text);
}

/* Einleitungssatz über den Tarif-Karten (seit 3.2.0). */
.kifa-wrap .kifa-tariff-intro {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.5;
}

/* Tarif-Karten wie die Preistabelle der Startseite (seit 3.2.0): drei Spalten mit Trennlinien, auf dem Handy untereinander;
   Zeile klein und gesperrt, Name fett, Preis groß, Einheit klein, Stichpunkte, „DETAILS ANSEHEN“ klein und unterstrichen. */
.kifa-wrap .kifa-tariff-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--kifa-line);
	border-bottom: 1px solid var(--kifa-line);
}

.kifa-wrap .kifa-tariff {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	margin: 0;
	padding: 22px 20px 20px;
	color: var(--kifa-text);
	background: var(--kifa-surface);
	border-left: 1px solid var(--kifa-line);
	cursor: pointer;
}

.kifa-wrap .kifa-tariff:first-child {
	border-left: 0;
}

.kifa-wrap .kifa-tariff:hover {
	background: var(--kifa-hover);
}

/* Gewählt: orange Fläche in --kifa-accent-strong (Weiß darauf 5,2 : 1; das hellere --kifa-accent schafft nur 3,9 : 1),
   weiße Schrift, Stichpunkte und Link, Haken oben rechts. */
.kifa-wrap .kifa-tariff-on,
.kifa-wrap .kifa-tariff-on:hover {
	color: #fff;
	background: var(--kifa-accent-strong);
}

/* Pflicht nicht erfüllt: Karten hellrot, Linien orange. */
.kifa-wrap .kifa-tariffs-invalid .kifa-tariff-grid {
	border-color: var(--kifa-accent);
}

.kifa-wrap .kifa-tariffs-invalid .kifa-tariff {
	background: var(--kifa-field-required);
}

/* Das Radio bleibt fokussierbar und für Screenreader da, sichtbar ist die Karte – sie trägt auch den Fokusrahmen. */
.kifa-wrap input[type="radio"].kifa-tariff-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.kifa-wrap .kifa-tariff-focus {
	z-index: 1;
	outline: 2px solid var(--kifa-dark);
	outline-offset: -5px;
}

.kifa-wrap .kifa-tariff-on.kifa-tariff-focus {
	outline-color: #fff;
}

.kifa-wrap .kifa-tariff-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 0 32px 0 0;
	font-family: var(--kifa-font);
	font-weight: 400;
	color: inherit;
	cursor: pointer;
}

.kifa-wrap .kifa-tariff-line {
	margin: 0 0 2px;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.6;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.kifa-wrap .kifa-tariff-name {
	margin: 0 0 16px;
	font-size: 19px;
	font-weight: 900;
	line-height: 1.1;
}

.kifa-wrap .kifa-tariff-price {
	font-size: 40px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -1.6px;
}

.kifa-wrap .kifa-tariff-unit {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.5;
}

.kifa-wrap .kifa-tariff-points {
	margin: 18px 0 16px;
	padding: 0 0 0 18px;
	list-style: disc;
	font-size: 15px;
	line-height: 1.6;
	color: inherit;
}

.kifa-wrap .kifa-tariff-points li {
	margin: 0 0 4px;
	padding: 0;
	color: inherit;
}

.kifa-wrap .kifa-tariff-points li::marker {
	color: inherit;
}

.kifa-wrap .kifa-tariff-link,
.kifa-wrap .kifa-tariff-link:hover,
.kifa-wrap .kifa-tariff-link:focus {
	margin-top: auto;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.6;
	letter-spacing: 0.72px;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: inherit;
}

.kifa-wrap .kifa-tariff-link:hover,
.kifa-wrap .kifa-tariff-link:focus-visible {
	text-decoration-thickness: 2px;
}

.kifa-wrap .kifa-tariff-link:focus-visible,
.kifa-wrap .kifa-tariff-more a:focus-visible,
.kifa-wrap .kifa-tariff-finder a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.kifa-wrap .kifa-tariff-check {
	position: absolute;
	top: 16px;
	right: 16px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--kifa-accent-strong);
	background: #fff;
	border-radius: 50%;
}

.kifa-wrap .kifa-tariff-on .kifa-tariff-check {
	display: inline-flex;
}

.kifa-wrap .kifa-tariff-check-svg {
	width: 16px;
	height: 16px;
}

/* Unter den Karten: Full-Service (nur Verweis, nicht bestellbar) und der Modellfinder. */
.kifa-wrap .kifa-tariff-more,
.kifa-wrap .kifa-tariff-finder {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.5;
}

.kifa-wrap .kifa-tariff-finder {
	margin-top: 6px;
}

.kifa-wrap .kifa-tariff-more a,
.kifa-wrap .kifa-tariff-finder a,
.kifa-wrap .kifa-tariff-more a:hover,
.kifa-wrap .kifa-tariff-finder a:hover {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-tariff-more a:hover,
.kifa-wrap .kifa-tariff-finder a:hover {
	color: var(--kifa-accent-strong);
}

/* Kontaktdaten beim Beauftragen (seit 3.2.0): ohne Sternchen, darunter der Hinweis. */
.kifa-wrap .kifa-contact-hint {
	margin: 10px 0 0;
}

.kifa-wrap .kifa-checkout-contact {
	margin-top: 24px;
}

.kifa-wrap .kifa-checkout-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 24px;
}

.kifa-wrap .kifa-checkout-actions .kifa-btn {
	width: 100%;
	line-height: 1.3;
}

.kifa-wrap .kifa-checkout-actions .kifa-btn:disabled {
	cursor: progress;
	opacity: 0.75;
}

/* ---------- Beauftragen und Anforderungshistorie (seit 3.1.0) ---------- */

/* Einwilligung: Kästchen und Text in einer Zeile, der Hinweis darunter eingerückt. */
.kifa-wrap .kifa-consent {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 10px;
	align-items: start;
	margin-top: 24px;
}

.kifa-wrap .kifa-consent-input {
	margin-top: 2px;
}

.kifa-wrap .kifa-consent-label {
	display: block;
	font-size: 15px;
	line-height: 1.45;
	cursor: pointer;
}

.kifa-wrap .kifa-consent-hint {
	grid-column: 2;
	margin: 0;
	font-size: 13px;
}


/* Bestätigung nach dem Beauftragen – wie früher die Erfolgsmeldung. */
.kifa-wrap .kifa-done-view {
	text-align: center;
	background: var(--kifa-surface);
	border: 1px solid var(--kifa-line);
	border-left: 3px solid var(--kifa-accent);
	border-radius: 10px;
	padding: 40px 24px;
	color: var(--kifa-text);
}

.kifa-wrap .kifa-done-title {
	margin: 0 0 12px;
}

.kifa-wrap .kifa-done-text {
	margin: 0 0 24px;
	font-size: 17px;
	line-height: 1.5;
}

.kifa-wrap .kifa-done-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.kifa-wrap .kifa-done-actions .kifa-btn {
	flex: 0 1 320px;
	line-height: 1.3;
}

/* Anforderungshistorie: je Vorgang Kopfzeile mit „Alle erneut anfordern“, darunter die Karten. */
.kifa-wrap .kifa-history-title {
	margin: 0 0 16px;
}

.kifa-wrap .kifa-history-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
}

.kifa-wrap .kifa-history-loading .kifa-spinner {
	margin: 0;
}

.kifa-wrap .kifa-history-status .kifa-msg {
	margin: 0 0 12px;
}

.kifa-wrap .kifa-history-order {
	margin: 0 0 28px;
}

.kifa-wrap .kifa-history-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--kifa-line);
}

.kifa-wrap .kifa-history-line {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
}

.kifa-wrap .kifa-entries-history {
	margin-bottom: 0;
}

.kifa-wrap .kifa-entry-reorder {
	white-space: nowrap;
}

.kifa-wrap .kifa-history-forget-row {
	margin: 8px 0 0;
	text-align: center;
}


/* „Erneut angefordert aus Vorgang …“ – über beiden Spalten des Formulars. */
.kifa-wrap .kifa-reorder-note {
	grid-column: 1 / -1;
	margin: 0;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	background: var(--kifa-surface);
	border: 1px solid var(--kifa-line);
	border-left: 3px solid var(--kifa-accent);
	border-radius: 8px;
}


/* Termin in der Vergangenheit: Hinweis in der Karte, „beauftragen“ gesperrt. */
.kifa-wrap .kifa-entry-is-past {
	border-left-color: var(--kifa-accent);
}

.kifa-wrap .kifa-entry-past {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--kifa-accent-strong);
}

.kifa-wrap .kifa-cart-past {
	margin: 10px 0 0;
}

.kifa-wrap .kifa-cart-actions .kifa-btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.kifa-wrap .kifa-question-past .kifa-question-text {
	font-weight: 700;
}

/* ---------- 3.2.0: Historie, Preisabschätzung, Details ---------- */

/* Historie: „Bedarfsanforderung hinzufügen“ unter der Überschrift (und ab vier Vorgängen am Ende), daneben der Link zum
   Warenkorb. */
.kifa-wrap .kifa-history-actions {
	align-items: center;
	gap: 12px 20px;
	margin: 0 0 20px;
}

.kifa-wrap .kifa-history-actions .kifa-btn {
	flex: 0 1 320px;
}

.kifa-wrap .kifa-history-actions-bottom {
	margin: 4px 0 20px;
}

.kifa-wrap .kifa-history-tocart,
.kifa-wrap .kifa-history-tocart:hover,
.kifa-wrap .kifa-history-tocart:focus {
	font-size: 15px;
}

.kifa-wrap .kifa-history-full {
	margin: -10px 0 16px;
}

/* ⓘ hinter „Nebenjobber:“: kleiner Button (24 × 24 px Zielfläche), der Hinweis klappt unter der Rechnung auf. */
.kifa-wrap .kifa-info-btn,
.kifa-wrap .kifa-info-btn:hover,
.kifa-wrap .kifa-info-btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	min-height: 0;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	color: var(--kifa-text);
	background: rgba(0, 0, 0, 0);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.kifa-wrap .kifa-info-btn:hover,
.kifa-wrap .kifa-info-btn[aria-expanded="true"] {
	color: var(--kifa-accent-strong);
}

.kifa-wrap .kifa-info-btn:focus-visible {
	outline: 2px solid var(--kifa-dark);
	outline-offset: 1px;
}

.kifa-wrap .kifa-info-svg {
	width: 16px;
	height: 16px;
}

.kifa-wrap .kifa-estimate-info {
	display: block;
	margin: 4px 0 2px;
	padding: 4px 0 4px 10px;
	font-size: 13px;
	line-height: 1.45;
	border-left: 3px solid var(--kifa-accent);
}

/* „Details zur Anfrage anzeigen“ in den Karten: Zusammenfassung und Kernangaben, eingeklappt. */
.kifa-wrap .kifa-entry-details {
	margin: 12px 0 0;
}

.kifa-wrap .kifa-details-toggle,
.kifa-wrap .kifa-details-toggle:hover,
.kifa-wrap .kifa-details-toggle:focus {
	font-size: 14px;
	font-weight: 700;
}

.kifa-wrap .kifa-details-panel {
	margin: 10px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--kifa-line);
	border-radius: 8px;
}

.kifa-wrap .kifa-details-summary {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	white-space: pre-line;
}

.kifa-wrap .kifa-details-facts {
	margin-top: 10px;
	padding-top: 10px;
}

/* ---------- 3.2.0: Anforderungshistorie per Link ---------- */

/* Hinweis über der Ansicht (etwa „Ihre Anforderungshistorie ist jetzt auch in diesem Browser verfügbar.“) mit Schließen. */
.kifa-wrap .kifa-banner {
	position: relative;
	margin: 0 0 20px;
}

.kifa-wrap .kifa-banner .kifa-msg {
	margin: 0;
	padding-right: 48px;
}

.kifa-wrap .kifa-banner-close,
.kifa-wrap .kifa-banner-close:hover,
.kifa-wrap .kifa-banner-close:focus {
	position: absolute;
	top: 50%;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	margin: -16px 0 0;
	padding: 0;
	color: var(--kifa-text);
	background: rgba(0, 0, 0, 0);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.kifa-wrap .kifa-banner-close:hover {
	background: var(--kifa-hover);
}

.kifa-wrap .kifa-banner-svg {
	width: 18px;
	height: 18px;
}

.kifa-wrap .kifa-msg-success {
	border: 1px solid var(--kifa-line);
	border-left: 3px solid var(--kifa-dark);
	font-weight: 700;
}

/* Auf anderen Geräten: Button, Link mit „Link kopieren“, QR-Code und Warnung; darunter „Ihre Links“. */
.kifa-wrap .kifa-share {
	margin: 28px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--kifa-line);
}

.kifa-wrap .kifa-done-view .kifa-share {
	margin-top: 24px;
}

/* In der zentrierten Bestätigung steht das Ergebnis linksbündig in einer schmalen Spalte. */
.kifa-wrap .kifa-done-view .kifa-share-result {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.kifa-wrap .kifa-share-intro {
	margin: 0 0 14px;
	font-size: 15px;
}

.kifa-wrap .kifa-share-result {
	margin: 18px 0 0;
}

.kifa-wrap .kifa-share-label {
	display: block;
	margin: 0 0 6px;
}

.kifa-wrap .kifa-share-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}

.kifa-wrap .kifa-share-row .kifa-share-url {
	flex: 1 1 320px;
	min-width: 0;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 9px 12px;
	font-family: var(--kifa-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--kifa-text);
	background-color: var(--kifa-surface);
	border: 1px solid var(--kifa-field-line);
	border-radius: 8px;
	box-shadow: none;
}

.kifa-wrap .kifa-share-row .kifa-share-copy {
	flex: 0 0 auto;
}

.kifa-wrap .kifa-share-copied {
	min-height: 1.5em;
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: 700;
}

.kifa-wrap .kifa-share-qr {
	display: inline-block;
	margin: 10px 0 0;
	padding: 0;
}

.kifa-wrap .kifa-share-qr-code {
	width: 200px;
	max-width: 100%;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--kifa-line);
	border-radius: 10px;
}

.kifa-wrap .kifa-qr-svg {
	display: block;
	width: 100%;
	height: auto;
}

.kifa-wrap .kifa-share-qr-caption {
	max-width: 220px;
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.45;
}

.kifa-wrap .kifa-share-warning {
	margin: 14px 0 0;
	padding: 8px 0 8px 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	border-left: 3px solid var(--kifa-accent);
}

.kifa-wrap .kifa-links-title {
	margin: 24px 0 8px;
}

.kifa-wrap .kifa-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kifa-wrap .kifa-link-item {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--kifa-line);
}

.kifa-wrap .kifa-link-meta {
	font-size: 15px;
}

.kifa-wrap .kifa-links-none {
	margin: 0;
	font-size: 15px;
}

/* ---------- Tablet / Mobil (Breakpoints der Seite: 1024 / 767) ---------- */

@media (max-width: 1024px) {
	.kifa-wrap .kifa-picker-title {
		font-size: 21px;
	}
}

@media (max-width: 900px) {
	.kifa-wrap .kifa-body,
	.kifa-wrap .kifa-body.kifa-fresh {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.kifa-wrap .kifa-fresh .kifa-col-right {
		display: none;
	}

	/* Einspaltig stehen die Felder unter dem Freitext – „die Felder rechts“ stimmt dann nicht. */
	.kifa-wrap .kifa-hint-right {
		display: none;
	}

	.kifa-wrap .kifa-hint-noright {
		display: inline;
	}
}

@media (max-width: 767px) {
	.kifa-wrap {
		padding: 20px;
		font-size: 15px;
	}

	.kifa-wrap .kifa-picker-title {
		font-size: 20px;
	}

	.kifa-wrap .kifa-h3,
	.kifa-wrap label[for="kifa-text"],
	.kifa-wrap .kifa-request-title {
		font-size: 19px;
	}

	.kifa-wrap .kifa-panel {
		padding: 16px;
	}

	.kifa-wrap .kifa-contact-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Auf anderen Geräten (seit 3.2.0): Link und „Link kopieren“ untereinander, Buttons in voller Breite. */
	.kifa-wrap .kifa-share-row .kifa-share-copy,
	.kifa-wrap .kifa-share-btn {
		width: 100%;
	}

	.kifa-wrap .kifa-cards {
		flex-direction: column;
	}

	.kifa-wrap .kifa-card {
		width: 100%;
	}

	.kifa-wrap .kifa-categories,
	.kifa-wrap .kifa-templates {
		grid-template-columns: minmax(0, 1fr);
	}

	.kifa-wrap .kifa-pick-head {
		align-items: flex-start;
	}

	/* Zeile unter dem Freitext: alle Teile untereinander – Hinweis, Zeichenzahl und Button, Überschrift, Chips. */
	.kifa-wrap .kifa-hint-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.kifa-wrap .kifa-hint-row .kifa-hint,
	.kifa-wrap .kifa-hint-row .kifa-hint-actions,
	.kifa-wrap .kifa-hint-row.kifa-hint-off .kifa-must-label,
	.kifa-wrap .kifa-hint-row.kifa-hint-off.kifa-label-off .kifa-must-list {
		grid-column: 1;
		grid-row: auto;
	}

	.kifa-wrap .kifa-dialog {
		padding: 20px;
	}

	.kifa-wrap .kifa-toggle {
		flex-direction: column;
	}

	/* Untereinander dürfen die Umschalter nicht auf Höhe null schrumpfen. */
	.kifa-wrap .kifa-toggle-btn,
	.kifa-wrap .kifa-toggle-btn:focus {
		flex: 0 0 auto;
	}

	/* Bestellsystem: Statuszeile näher am Rand, Karten einspaltig mit den Aktionen unten, Rechnung untereinander. */
	.kifa-wrap .kifa-status {
		margin: -8px 0 10px;
	}

	.kifa-wrap .kifa-entry {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px;
	}

	.kifa-wrap .kifa-estimate-rows {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.kifa-wrap .kifa-estimate-calc {
		margin-bottom: 6px;
	}

	/* Tarif-Karten untereinander, Trennlinien waagerecht (seit 3.2.0). */
	.kifa-wrap .kifa-tariff-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.kifa-wrap .kifa-tariff {
		border-left: 0;
		border-top: 1px solid var(--kifa-line);
	}

	.kifa-wrap .kifa-tariff:first-child {
		border-top: 0;
	}

	.kifa-wrap .kifa-tariff-price {
		font-size: 34px;
	}

	.kifa-wrap .kifa-history-actions .kifa-btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kifa-wrap .kifa-must-item {
		transition: none;
	}

	.kifa-wrap .kifa-must-list.kifa-settle {
		animation: none;
	}

	.kifa-wrap .kifa-field,
	.kifa-wrap .kifa-text,
	.kifa-wrap .kifa-text-pulse,
	.kifa-wrap .kifa-flash,
	.kifa-wrap .kifa-note-spinner,
	.kifa-wrap .kifa-spinner,
	.kifa-wrap button,
	.kifa-wrap .kifa-btn::after,
	.kifa-wrap .kifa-text-mirror .kifa-w,
	.kifa-wrap .kifa-body,
	.kifa-wrap .kifa-reveal .kifa-panel,
	.kifa-wrap .kifa-reveal .kifa-fields > *,
	.kifa-wrap .kifa-reveal .kifa-field,
	.kifa-wrap .kifa-reveal .kifa-contact,
	.kifa-wrap .kifa-reveal .kifa-shift,
	.kifa-wrap .kifa-contact-reveal .kifa-contact,
	.kifa-wrap .kifa-contact-reveal .kifa-shift,
	.kifa-wrap .kifa-contact-reveal .kifa-submit,
	.kifa-wrap .kifa-reveal .kifa-submit,
	.kifa-wrap input,
	.kifa-wrap select,
	.kifa-wrap textarea {
		animation: none !important;
		transition: none !important;
	}
}