/* Angstfrei Termine - Hausstil: Gruen 2C5F5A, heller Kasten F3F8F5 */

.aft-wrap {
	--aft-gruen: #2C5F5A;
	--aft-hell: #F3F8F5;
	--aft-rand: #d6e3dd;
	--aft-text: #22302d;
	--aft-fehler: #a4291f;
	max-width: 760px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.55;
	color: var(--aft-text);
	box-sizing: border-box;
}

.aft-wrap *,
.aft-wrap *::before,
.aft-wrap *::after { box-sizing: inherit; }

.aft-kopf { margin-bottom: 1.2rem; }

.aft-titel {
	margin: 0 0 .3rem;
	color: var(--aft-gruen);
	font-size: 1.45rem;
	line-height: 1.25;
}

.aft-hinweis { margin: 0; opacity: .85; }

.aft-laden { padding: 1.2rem 0; opacity: .7; }

/* ---------- Tage und Slots ---------- */

.aft-tag {
	border: 1px solid var(--aft-rand);
	border-radius: 10px;
	padding: .9rem 1rem 1rem;
	margin-bottom: .75rem;
	background: #fff;
}

.aft-tag-name {
	font-weight: 700;
	color: var(--aft-gruen);
	margin-bottom: .6rem;
}

.aft-slots {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.aft-slot {
	appearance: none;
	border: 2px solid var(--aft-gruen);
	background: #fff;
	color: var(--aft-gruen);
	font: inherit;
	font-weight: 700;
	padding: .7rem 1rem;
	border-radius: 8px;
	cursor: pointer;
	min-width: 84px;
	min-height: 48px;
	transition: background .15s, color .15s;
}

.aft-slot:hover,
.aft-slot:focus-visible {
	background: var(--aft-gruen);
	color: #fff;
	outline: none;
}

.aft-leer {
	background: var(--aft-hell);
	border: 1px solid var(--aft-rand);
	border-radius: 10px;
	padding: 1rem;
}

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

.aft-form {
	background: var(--aft-hell);
	border: 1px solid var(--aft-rand);
	border-left: 5px solid var(--aft-gruen);
	border-radius: 10px;
	padding: 1.2rem;
	margin-top: .4rem;
}

.aft-gewaehlt {
	margin: 0 0 1rem;
	font-weight: 700;
	color: var(--aft-gruen);
	font-size: 1.1rem;
}

.aft-feld { margin-bottom: .9rem; }

.aft-feld label {
	display: block;
	font-weight: 600;
}

.aft-feld span { color: var(--aft-fehler); }

.aft-feld input[type="text"],
.aft-feld input[type="email"],
.aft-feld input[type="tel"],
.aft-feld textarea {
	display: block;
	width: 100%;
	margin-top: .3rem;
	padding: .7rem .75rem;
	font: inherit;
	border: 1px solid #b9c9c3;
	border-radius: 7px;
	background: #fff;
	min-height: 48px;
}

.aft-feld textarea { min-height: 96px; resize: vertical; }

.aft-feld input:focus,
.aft-feld textarea:focus {
	outline: 3px solid rgba(44, 95, 90, .35);
	outline-offset: 1px;
	border-color: var(--aft-gruen);
}

.aft-kanal {
	border: 1px solid var(--aft-rand);
	border-radius: 8px;
	padding: .8rem .9rem;
	margin: 0 0 .9rem;
	background: #fff;
}

.aft-kanal legend { font-weight: 700; padding: 0 .3rem; }

.aft-kanal label {
	display: block;
	font-weight: 500;
	padding: .35rem 0;
	cursor: pointer;
}

.aft-check label {
	font-weight: 500;
	display: flex;
	gap: .55rem;
	align-items: flex-start;
	line-height: 1.45;
}

.aft-check input { margin-top: .3rem; flex: 0 0 auto; }

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots ein Koeder */
.aft-honig {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

.aft-fehler {
	background: #fdeceb;
	border-left: 4px solid var(--aft-fehler);
	color: var(--aft-fehler);
	padding: .7rem .85rem;
	border-radius: 6px;
	margin: 0 0 .9rem;
	font-weight: 600;
}

.aft-senden,
.aft-zurueck {
	appearance: none;
	font: inherit;
	font-weight: 700;
	border-radius: 8px;
	cursor: pointer;
	min-height: 52px;
	padding: .85rem 1.4rem;
}

.aft-senden {
	background: var(--aft-gruen);
	color: #fff;
	border: 2px solid var(--aft-gruen);
	width: 100%;
}

.aft-senden:hover:not([disabled]) { background: #24504c; }
.aft-senden[disabled] { opacity: .6; cursor: progress; }

.aft-zurueck {
	background: transparent;
	color: var(--aft-gruen);
	border: none;
	text-decoration: underline;
	width: 100%;
	margin-top: .5rem;
	min-height: 48px;
}

/* ---------- Danke ---------- */

.aft-danke {
	background: var(--aft-hell);
	border-left: 5px solid var(--aft-gruen);
	border-radius: 10px;
	padding: 1.3rem;
	font-size: 1.05rem;
}

.aft-danke strong { color: var(--aft-gruen); }

@media (max-width: 480px) {
	.aft-wrap { font-size: 16px; }
	.aft-slot { flex: 1 1 calc(50% - .25rem); min-width: 0; }
	.aft-form { padding: 1rem; }
}

.aft-danke-links {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	margin-top: 1rem;
}

.aft-danke-knopf {
	display: inline-block;
	background: var(--aft-gruen);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	padding: .75rem 1.2rem;
	border-radius: 8px;
	min-height: 48px;
	line-height: 1.5;
}

.aft-danke-knopf:hover,
.aft-danke-knopf:focus-visible { background: #24504c; color: #fff; }

.aft-danke-absage {
	color: var(--aft-gruen);
	text-decoration: underline;
	padding: .75rem 0;
	display: inline-block;
	min-height: 48px;
	line-height: 1.5;
}

.aft-hinweis small { opacity: .75; }

@media (max-width: 480px) {
	.aft-danke-links { flex-direction: column; align-items: stretch; }
	.aft-danke-knopf { text-align: center; }
	.aft-danke-absage { text-align: center; }
}

/* Das WhatsApp-Kaestchen: der Grund fuer die Nummer steht direkt darunter,
   damit niemand raten muss, wofuer ich sie brauche. */
.aft-wa {
	background: #F3F8F5;
	border-left: 3px solid #2C5F5A;
	border-radius: 4px;
	padding: .75rem .9rem;
}

.aft-klein {
	margin: .45rem 0 0 1.85rem;
	font-size: .85rem;
	line-height: 1.5;
	color: #4a5a58;
}

.aft-wa .aft-klein strong { color: #2C5F5A; }