/* =========================================================================
   Companion — Terminbuchung und Kontaktformular
   Erbt Farben, Schrift und Abstände vom Theme. Die Werte hier sind
   Rückfälle, damit das Plugin auch unter einem fremden Theme lesbar ist.
   ========================================================================= */

.ct-buchung { --ct-line: var(--co-line, #D7DADD); }

.ct-schritt {
	margin: 0 0 2rem;
	padding: 0 0 1.75rem;
	border: 0;
	border-bottom: 1px solid var(--ct-line);
}
.ct-schritt:last-of-type { border-bottom: 0; }
.ct-schritt > legend { padding: 0; margin-bottom: 1.25rem; }

/* --- Tage und Termine ---------------------------------------------------- */

/* Die Tage sind eine Klappliste: einer offen, die übrigen als Zeile.

   Offen untereinander wuchs die Auswahl mit jedem freigegebenen Tag, und
   der Rest des Formulars rutschte entsprechend weit nach unten. Zugeklappt
   kostet ein Tag 44 px — die Höhe der Auswahl hängt damit nicht mehr an
   der Großzügigkeit des Zeitrasters. */
.ct-tage {
	display: grid;
	gap: 0;
	border: 1px solid var(--ct-line);
	border-radius: 14px;
	overflow: hidden;
	background: var(--co-surface, #fff);
}
.ct-tage[aria-busy="true"] { opacity: .5; transition: opacity .2s; }

.ct-tag + .ct-tag { border-top: 1px solid var(--ct-line); }

.ct-tag__kopf {
	display: flex;
	align-items: center;
	gap: .75rem;
	/* 44 px Antippfläche, auch wenn der Text kleiner ist. */
	min-height: 44px;
	padding: .6rem .9rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.ct-tag__kopf::-webkit-details-marker { display: none; }
.ct-tag__kopf::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .18s ease;
	color: var(--co-text-muted, #5F686F);
}
.ct-tag[open] > .ct-tag__kopf::before { transform: rotate(45deg); }
.ct-tag__kopf:hover { background: var(--co-sunken, #EDEFF3); }
.ct-tag__kopf:focus-visible { outline: 2px solid var(--co-accent, #3A5CD8); outline-offset: -2px; }

.ct-tag__titel {
	margin: 0;
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--co-text, #14181C);
}

/* Die Zahl steht rechts und sagt, ob sich das Aufklappen lohnt. */
.ct-tag__zahl {
	margin-left: auto;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .6875rem;
	letter-spacing: .06em;
	color: var(--co-text-muted, #5F686F);
	font-variant-numeric: tabular-nums;
}

.ct-slots {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: .25rem .9rem 1rem;
}

.ct-slot { position: relative; }
.ct-slot input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	margin: 0;
}
.ct-slot span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	min-width: 88px;
	min-height: 52px;
	padding: .55rem .8rem;
	background: var(--co-surface, #fff);
	border: 1px solid var(--ct-line);
	border-radius: 11px;
	transition: border-color .18s ease, background .18s ease, transform .18s cubic-bezier(.22,1,.36,1);
	cursor: pointer;
}
.ct-slot strong { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ct-slot small {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .625rem;
	letter-spacing: .06em;
	color: var(--co-text-muted, #5F686F);
}

.ct-slot input:hover + span { border-color: var(--co-text, #14181C); transform: translateY(-1px); }
.ct-slot input:focus-visible + span { outline: 2px solid var(--co-accent, #3A5CD8); outline-offset: 2px; }
.ct-slot input:checked + span {
	background: var(--co-ink, #14181C);
	border-color: var(--co-ink, #14181C);
	color: var(--co-paper, #F4F5F6);
}
.ct-slot input:checked + span small { color: rgba(244,245,246,.7); }

/* --- Gesprächsweg -------------------------------------------------------- */

.ct-kanaele { display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-kanal { position: relative; }
.ct-kanal input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.ct-kanal span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .6rem 1.1rem;
	background: var(--co-surface, #fff);
	border: 1px solid var(--ct-line);
	border-radius: 11px;
	font-size: .9375rem;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}
.ct-kanal input:hover + span { border-color: var(--co-text, #14181C); }
.ct-kanal input:focus-visible + span { outline: 2px solid var(--co-accent, #3A5CD8); outline-offset: 2px; }
.ct-kanal input:checked + span {
	background: var(--co-ink, #14181C);
	border-color: var(--co-ink, #14181C);
	color: var(--co-paper, #F4F5F6);
}

/* --- Fehler und Absenden ------------------------------------------------- */

.ct-fehler {
	margin: .45rem 0 0;
	font-size: .8125rem;
	color: #C0341A;
}
@media (prefers-color-scheme: dark) { .ct-fehler { color: #FF8A6B; } }

.ct-absenden {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--ct-line);
}
.ct-absenden .co-field__hint { margin: 0; }

/* --- Erfolg -------------------------------------------------------------- */

.ct-erfolg {
	padding: clamp(2rem, 5vw, 3.5rem);
	background: var(--co-surface, #fff);
	border-radius: 20px;
	box-shadow: var(--co-shadow-card, 0 1px 2px rgba(20,24,28,.05), 0 8px 24px -12px rgba(20,24,28,.14));
	max-width: 640px;
}
@media (prefers-color-scheme: dark) { .ct-erfolg { border: 1px solid var(--ct-line); } }

.ct-erfolg__mark { margin-bottom: 1.5rem; }
.ct-erfolg h2 { margin-bottom: .75rem; }
.ct-erfolg__termin {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--co-accent, #3A5CD8);
	margin-bottom: 1rem;
}
.ct-erfolg__hinweis {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ct-line);
	font-size: .875rem;
	color: var(--co-text-muted, #5F686F);
}