/* Farben und Form werden je Website über diese Variablen gesetzt (Einstellungen → Darstellung oder eigenes CSS).
   Ohne Einstellung gelten zuerst die Werte der Kadence Style Library (--kb-token--…), dann die des Kadence-Themes
   (--global-…), zuletzt die eigene Vorgabe. Auf Seiten ohne Kadence greift also nur die letzte Stufe. */
.ma-tb {
	--ma-tb-akzent: var(--global-palette-highlight, #2f6f6a);
	--ma-tb-auf-akzent: #fff;
	--ma-tb-knopf: var(--kb-token--semantic--color--button-bg, var(--global-palette-btn-bg, var(--ma-tb-akzent)));
	--ma-tb-auf-knopf: var(--kb-token--semantic--color--button-text, var(--global-palette-btn, #fff));
	--ma-tb-knopf-hover: var(--kb-token--semantic--color--button-bg-hover, var(--global-palette-btn-bg-hover, color-mix(in srgb, var(--ma-tb-knopf) 88%, #000)));
	--ma-tb-auf-knopf-hover: var(--kb-token--semantic--color--button-text-hover, var(--global-palette-btn-hover, var(--ma-tb-auf-knopf)));
	--ma-tb-text: var(--kb-token--semantic--color--text, var(--global-palette3, #1e2633));
	--ma-tb-leise: var(--kb-token--semantic--color--text-muted, var(--global-palette5, #4a5562));
	--ma-tb-flaeche: var(--kb-token--semantic--color--surface, var(--global-palette9, #fff));
	--ma-tb-grund: var(--kb-token--primitive--color--neutral--100, var(--global-palette7, #f1f5f7));
	--ma-tb-linie: var(--kb-token--primitive--color--neutral--300, var(--global-gray-400, #c9d3d8));
	--ma-tb-gesperrt: #6b7480;
	--ma-tb-fehler: var(--global-palette13, #a4231c);
	--ma-tb-radius: var(--kb-token--semantic--radius--control, 8px);
	--ma-tb-hell: color-mix(in srgb, var(--ma-tb-akzent) 10%, var(--ma-tb-flaeche));
	--ma-tb-dauer: .18s;
	color: var(--ma-tb-text);
	max-width: 54rem;
	/* Das Layout richtet sich nach dem Platz des Widgets, nicht nach dem Fenster: in einer schmalen Spalte stapelt es auch am Desktop. */
	container: ma-tb / inline-size;
}
.ma-tb *, .ma-tb *::before, .ma-tb *::after { box-sizing: border-box; }
.ma-tb [hidden] { display: none !important; }
.ma-tb button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ma-tb button:disabled { cursor: default; opacity: 1; }
/* Themes gestalten jedes button (Kadence: Hintergrund und weiße Schrift bei :hover/:focus, Schatten, Abblenden bei
   :disabled). Die Bausteine unten stehen deshalb alle unter .ma-tb (Spezifität 0,2,0 schlägt button:hover mit 0,1,1). */
.ma-tb button, .ma-tb button:hover, .ma-tb button:focus, .ma-tb button:active { box-shadow: none; text-transform: none; letter-spacing: normal; }
.ma-tb button:focus-visible, .ma-tb input:focus-visible, .ma-tb textarea:focus-visible, .ma-tb a:focus-visible { outline: 3px solid var(--ma-tb-akzent); outline-offset: 2px; }
/* Fett: übernimmt der Titel die Überschriftenfarbe des Themes (Kadence: Markengrün), gilt er als große Schrift (3:1). */
.ma-tb .ma-tb__titel { margin: 0 0 .35rem; font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.ma-tb .ma-tb__titel:focus { outline: none; }
.ma-tb .ma-tb__untertitel { margin: 0; font-size: 1rem; }
.ma-tb .ma-tb__hinweis { margin: .5rem 0 0; color: var(--ma-tb-leise); }
.ma-tb .ma-tb__gewaehlt { margin: 0 0 1.25rem; color: var(--ma-tb-leise); }
.ma-tb .ma-tb__fehler { color: var(--ma-tb-fehler); font-weight: 600; margin: .75rem 0; }

/* Fortschritt */
.ma-tb .ma-tb__fortschritt { display: flex; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: none; }
.ma-tb .ma-tb__punkt { flex: 1; display: flex; align-items: center; gap: .5rem; padding-bottom: .6rem; color: var(--ma-tb-leise); font-size: .9rem; border-bottom: 3px solid var(--ma-tb-linie); }
.ma-tb .ma-tb__nr { display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid currentColor; font-weight: 700; font-size: .8rem; }
.ma-tb .ma-tb__punkt[aria-current="step"] { color: var(--ma-tb-text); font-weight: 600; border-color: var(--ma-tb-akzent); }
.ma-tb .ma-tb__punkt[aria-current="step"] .ma-tb__nr { color: var(--ma-tb-auf-akzent); background: var(--ma-tb-akzent); border-color: var(--ma-tb-akzent); }
.ma-tb .ma-tb__punkt--fertig { color: var(--ma-tb-akzent); border-color: var(--ma-tb-akzent); }

/* Bühne mit einem Schritt */
.ma-tb .ma-tb__buehne { padding: 1.5rem; background: var(--ma-tb-flaeche); border: 1px solid var(--ma-tb-linie); border-radius: calc(var(--ma-tb-radius) * 1.5); }
/* [terminbuchung rahmen="nein"]: für Seiten, die das Widget schon in eine eigene Karte setzen. */
.ma-tb--ohne-rahmen .ma-tb__buehne { padding: 0; border: 0; border-radius: 0; background: transparent; }
.ma-tb .ma-tb__panel { animation: ma-tb-ein var(--ma-tb-dauer) cubic-bezier(.22, .61, .36, 1); }
@keyframes ma-tb-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ma-tb .ma-tb__zurueck { margin: -.25rem 0 .75rem; padding: .25rem 0; color: var(--ma-tb-akzent); background: none; border: 0; font-weight: 600; }
.ma-tb .ma-tb__zurueck:hover { text-decoration: underline; }

/* Schritt 1 */
.ma-tb .ma-tb__auswahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; margin-top: 1rem; }
.ma-tb .ma-tb__karte {
	display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; text-align: left; min-height: 4.5rem;
	padding: 1rem 1.1rem; color: var(--ma-tb-text); background: var(--ma-tb-flaeche);
	border: 1px solid var(--ma-tb-linie); border-radius: var(--ma-tb-radius);
	transition: border-color var(--ma-tb-dauer), background-color var(--ma-tb-dauer);
}
.ma-tb .ma-tb__karte small { color: var(--ma-tb-leise); font-size: .875rem; }
.ma-tb .ma-tb__karte:hover, .ma-tb .ma-tb__karte[aria-pressed="true"] { border-color: var(--ma-tb-akzent); background: var(--ma-tb-hell); }
.ma-tb .ma-tb__karte:active { transform: scale(.99); }

/* Schritt 2 */
.ma-tb .ma-tb__wahl { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.ma-tb .ma-tb__monat { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.ma-tb .ma-tb__blaettern {
	width: 2.75rem; height: 2.75rem; padding: 0; font-size: 1.4rem; line-height: 1; color: var(--ma-tb-text);
	background: var(--ma-tb-flaeche); border: 1px solid var(--ma-tb-linie); border-radius: var(--ma-tb-radius);
}
.ma-tb .ma-tb__blaettern:hover:not(:disabled) { border-color: var(--ma-tb-akzent); }
.ma-tb .ma-tb__blaettern:disabled { opacity: .35; }
.ma-tb .ma-tb__raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.ma-tb .ma-tb__wt { text-align: center; font-size: .8rem; color: var(--ma-tb-leise); padding: .25rem 0; }
.ma-tb .ma-tb__tag {
	aspect-ratio: 1; min-height: 2.6rem; padding: 0; color: var(--ma-tb-akzent); background: var(--ma-tb-hell);
	border: 1px solid transparent; border-radius: var(--ma-tb-radius); font-weight: 700;
	transition: background-color var(--ma-tb-dauer), color var(--ma-tb-dauer);
}
.ma-tb .ma-tb__tag:hover:not(:disabled) { border-color: var(--ma-tb-akzent); }
.ma-tb .ma-tb__tag:disabled { color: var(--ma-tb-gesperrt); background: transparent; font-weight: 400; }
.ma-tb .ma-tb__tag[aria-pressed="true"], .ma-tb .ma-tb__zeit[aria-pressed="true"] { color: var(--ma-tb-auf-akzent); background: var(--ma-tb-akzent); border-color: var(--ma-tb-akzent); }
.ma-tb .ma-tb__raster--laedt .ma-tb__tag { color: transparent; background: var(--ma-tb-grund); animation: ma-tb-puls 1.1s ease-in-out infinite alternate; }
@keyframes ma-tb-puls { from { opacity: .55; } to { opacity: 1; } }
.ma-tb .ma-tb__datum { margin: .15rem 0 .75rem; color: var(--ma-tb-leise); }
.ma-tb .ma-tb__zeitspalte { min-height: 6rem; }
.ma-tb .ma-tb__zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: .45rem; }
.ma-tb .ma-tb__zeit {
	min-height: 2.75rem; padding: 0; color: var(--ma-tb-text); background: var(--ma-tb-flaeche); font-weight: 600;
	border: 1px solid var(--ma-tb-linie); border-radius: var(--ma-tb-radius);
	transition: border-color var(--ma-tb-dauer), background-color var(--ma-tb-dauer);
}
.ma-tb .ma-tb__zeit:hover { border-color: var(--ma-tb-akzent); background: var(--ma-tb-hell); }

/* Schritt 3 */
.ma-tb .ma-tb__zusammenfassung {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 1.25rem; padding: .85rem 1rem;
	background: var(--ma-tb-hell); border-left: 4px solid var(--ma-tb-akzent); border-radius: var(--ma-tb-radius);
}
.ma-tb .ma-tb__zusammenfassung div { display: flex; flex-direction: column; }
.ma-tb .ma-tb__aendern { flex: none; padding: .4rem .8rem; color: var(--ma-tb-akzent); background: var(--ma-tb-flaeche); border: 1px solid var(--ma-tb-akzent); border-radius: var(--ma-tb-radius); font-weight: 600; }
.ma-tb .ma-tb__felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.ma-tb .ma-tb__feld--breit { grid-column: 1 / -1; }
.ma-tb .ma-tb__feld label { display: block; margin-bottom: .3rem; font-weight: 600; font-size: .95rem; }
.ma-tb .ma-tb__feld input, .ma-tb .ma-tb__feld textarea {
	width: 100%; min-height: 2.9rem; padding: .55rem .75rem; font: inherit; color: var(--ma-tb-text);
	background: var(--ma-tb-flaeche); border: 1px solid var(--ma-tb-linie); border-radius: var(--ma-tb-radius);
}
.ma-tb .ma-tb__feld input:focus, .ma-tb .ma-tb__feld textarea:focus { border-color: var(--ma-tb-akzent); box-shadow: none; outline: 0; }
.ma-tb .ma-tb__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile-Widget (Cloudflare), Höhe vorab reserviert, damit der Knopf beim Laden nicht springt. */
.ma-tb .ma-tb__pruefung { min-height: 65px; margin: 12px 0; }
.ma-tb .ma-tb__zustimmung { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1.25rem; }
.ma-tb .ma-tb__zustimmung input { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .15rem; accent-color: var(--ma-tb-akzent); }
.ma-tb .ma-tb__zustimmung a { color: inherit; text-decoration: underline; }
.ma-tb .ma-tb__bedingungen {
	margin-bottom: 1.25rem; padding: 1rem 1.1rem .1rem; border: 1px solid var(--ma-tb-linie);
	border-left: 4px solid var(--ma-tb-akzent); border-radius: var(--ma-tb-radius);
}
.ma-tb .ma-tb__bedingungen-titel { display: block; margin-bottom: .35rem; }
.ma-tb .ma-tb__bedingungen-text { margin: 0 0 .9rem; white-space: pre-line; line-height: 1.5; }
.ma-tb .ma-tb__bedingungen .ma-tb__zustimmung { margin-bottom: .9rem; font-weight: 600; }
.ma-tb .ma-tb__senden {
	position: relative; min-height: 3.1rem; padding: .65rem 1.75rem; color: var(--ma-tb-auf-knopf); background: var(--ma-tb-knopf);
	border: 0; border-radius: var(--ma-tb-radius); font-weight: 700;
	/* Mindestens 18,66px fett = große Schrift nach WCAG: Markenfarben mit 3:1 bis 4,5:1 bleiben damit zulässig. */
	font-size: max(1.2rem, 1em); line-height: 1.3;
	transition: background-color var(--ma-tb-dauer), color var(--ma-tb-dauer);
}
.ma-tb .ma-tb__senden:hover:not(:disabled) { color: var(--ma-tb-auf-knopf-hover); background: var(--ma-tb-knopf-hover); }
.ma-tb .ma-tb__senden:disabled { opacity: .75; }
.ma-tb .ma-tb__senden[aria-busy="true"] { color: transparent; }
.ma-tb .ma-tb__senden[aria-busy="true"]::after {
	content: ""; position: absolute; inset: 0; margin: auto; width: 1.2rem; height: 1.2rem;
	border: 2px solid var(--ma-tb-auf-knopf); border-right-color: transparent; border-radius: 50%; animation: ma-tb-dreh .7s linear infinite;
}
@keyframes ma-tb-dreh { to { transform: rotate(360deg); } }

/* Danke */
.ma-tb .ma-tb__danke { text-align: center; padding: .5rem 0; }
.ma-tb .ma-tb__danke::before {
	content: "✓"; display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0 auto .75rem;
	color: var(--ma-tb-auf-akzent); background: var(--ma-tb-akzent); border-radius: 50%; font-size: 1.5rem; font-weight: 700;
}
.ma-tb .ma-tb__danke p { margin: .4rem 0; }
.ma-tb .ma-tb__danke-termin { font-weight: 700; }

@container ma-tb (max-width: 40rem) {
	.ma-tb .ma-tb__buehne { padding: 1rem; }
	.ma-tb .ma-tb__wahl { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.ma-tb .ma-tb__monat, .ma-tb .ma-tb__raster { max-width: 26rem; }
	.ma-tb .ma-tb__felder { grid-template-columns: minmax(0, 1fr); }
	.ma-tb .ma-tb__punkt { font-size: .8rem; }
	.ma-tb .ma-tb__punkt span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@container ma-tb (max-width: 22rem) {
	.ma-tb .ma-tb__buehne { padding: .75rem; }
	.ma-tb .ma-tb__raster { gap: .2rem; }
	.ma-tb .ma-tb__tag { min-height: 0; font-size: .9rem; }
	.ma-tb .ma-tb__zusammenfassung { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
	.ma-tb { --ma-tb-dauer: 0s; }
	.ma-tb .ma-tb__panel, .ma-tb .ma-tb__raster--laedt .ma-tb__tag { animation: none; }
}