/* ==========================================================================
   TerMed-Inhalt (Kalender Web-Plug-In) im Dialog an das Praxis-Design angleichen
   Wird nach theme.css geladen (functions.php, Handle pdb-termed-style).
   :is(#pdb-boost, div) hebt die Spezifität auf ID-Niveau, damit diese Regeln
   gegen das TerMed-eigene CSS (#plugin-id … !important) gewinnen.
   Nur Aussehen, keine Funktion: Ändert TerMed seine Klassennamen, sieht das
   Formular wieder aus wie im Original, funktioniert aber weiter.
   ========================================================================== */

.pdb-termed__inhalt > div {
	border: 0 !important; padding: 0 !important;
	font-family: var(--font-sans); color: var(--ink-900);
}
.pdb-termed__inhalt > div::after { content: ""; display: block; clear: both; }
.pdb-termed__inhalt > :is(#pdb-boost, div) termed label,
.pdb-termed__inhalt > :is(#pdb-boost, div) termed select,
.pdb-termed__inhalt > :is(#pdb-boost, div) termed p,
.pdb-termed__inhalt > :is(#pdb-boost, div) termed input[type="text"],
.pdb-termed__inhalt > :is(#pdb-boost, div) .treeContainer .text {
	font-family: var(--font-sans) !important;
}

/* Alle Schaltflächen gleich: Höhe, Schrift, Form, Farbe */
.pdb-termed__inhalt > :is(#pdb-boost, div) .request-button,
.pdb-termed__inhalt > :is(#pdb-boost, div) input[type="button"],
.pdb-termed__inhalt > :is(#pdb-boost, div) input[type="submit"] {
	display: inline-block; box-sizing: border-box !important;
	height: 48px !important; min-width: 0; margin: 0 !important; padding: 0 24px !important;
	border: 0 !important; border-radius: 999px !important;
	background: var(--wine-700) !important; color: var(--white) !important;
	font-family: var(--font-sans) !important; font-size: 13px !important; font-weight: 600 !important;
	line-height: 48px !important; letter-spacing: .08em !important; text-transform: uppercase !important;
	white-space: nowrap; box-shadow: none !important; cursor: pointer;
	transition: background-color var(--dur) var(--ease);
}
.pdb-termed__inhalt > :is(#pdb-boost, div) .request-button:hover,
.pdb-termed__inhalt > :is(#pdb-boost, div) input[type="button"]:hover,
.pdb-termed__inhalt > :is(#pdb-boost, div) input[type="submit"]:hover { background: var(--wine-800) !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .request-button:focus-visible,
.pdb-termed__inhalt > :is(#pdb-boost, div) input[type="button"]:focus-visible,
.pdb-termed__inhalt > :is(#pdb-boost, div) input[type="submit"]:focus-visible { outline: 3px solid var(--rose-200); outline-offset: 2px; }

/* Obere Zeile: Rezept & Überweisung links, Anmelden rechts */
.pdb-termed__inhalt > :is(#pdb-boost, div) termed .navContainer { float: right; margin: 0 0 0 12px !important; }

/* Frage + Antworten: Trennlinie, Auswahl als gleich große Karten im Raster */
.pdb-termed__inhalt > :is(#pdb-boost, div) .treeContainer {
	clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
	margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--bone-200);
}
.pdb-termed__inhalt > :is(#pdb-boost, div) .treeContainer > :not(input) { grid-column: 1 / -1; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .treeContainer > br,
.pdb-termed__inhalt > :is(#pdb-boost, div) .treeContainer > .text:empty { display: none; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .treeContainer .text {
	margin: 0 0 4px !important; font-size: 17px !important; line-height: 1.5 !important; color: var(--ink-900);
}
.pdb-termed__inhalt > :is(#pdb-boost, div) .treeContainer input[type="button"] {
	width: 100%; height: auto !important; min-height: 56px;
	padding: 12px 20px !important; border: 1.5px solid var(--bone-300) !important; border-radius: 12px !important;
	background: var(--white) !important; color: var(--wine-700) !important;
	font-size: 15px !important; font-weight: 500 !important; line-height: 1.35 !important;
	letter-spacing: .01em !important; text-transform: none !important; white-space: normal;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pdb-termed__inhalt > :is(#pdb-boost, div) .treeContainer input[type="button"]:hover {
	background: var(--rose-100) !important; border-color: var(--wine-700) !important;
}

/* „zurück“ dezent als Textlink */
.pdb-termed__inhalt > :is(#pdb-boost, div) .treeContainer input.treeBack[type="button"] {
	grid-column: 1 / -1; justify-self: start; width: auto; min-height: 44px;
	padding: 8px 4px !important; border: 0 !important; background: transparent !important;
	color: var(--ink-700) !important; font-size: 14px !important; text-decoration: underline; text-underline-offset: 3px;
}
.pdb-termed__inhalt > :is(#pdb-boost, div) .treeContainer input.treeBack[type="button"]:hover {
	background: transparent !important; color: var(--wine-700) !important;
}

@media (max-width: 520px) {
	.pdb-termed__inhalt > :is(#pdb-boost, div) .treeContainer { grid-template-columns: 1fr; }
	.pdb-termed__inhalt > :is(#pdb-boost, div) termed .navContainer { float: none; width: 100% !important; margin: 0 0 12px !important; }
	.pdb-termed__inhalt > :is(#pdb-boost, div) termed .navContainer input,
	.pdb-termed__inhalt > :is(#pdb-boost, div) .request-button { width: 100% !important; }
}

/* TerMed-Fenster (Anmelden, Buchen, Anfrage …) als Karte im Praxis-Stil -------- */
.pdb-termed__inhalt > :is(#pdb-boost, div) termed .backdrop { background: rgba(33, 37, 41, .55) !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) termed :is(.bookingContainer, .waitingRoomContainer, .eventListContainer, .messageContainer, .loginRegContainer, .loadingContainer, .requestContainer, .codeContainer, .overviewContainer) {
	width: min(480px, calc(100vw - 32px)) !important; max-width: none !important; max-height: min(640px, calc(100vh - 32px)) !important;
	padding: 24px !important; border: 0 !important; border-radius: 16px !important;
	background: var(--white) !important; color: var(--ink-900);
	box-shadow: 0 24px 60px -20px rgba(63, 23, 27, .45) !important; overflow-y: auto !important;
	font-family: var(--font-sans);
}
/* „schließen“ oben rechts, dezent */
.pdb-termed__inhalt > :is(#pdb-boost, div) termed :is(.bookingContainer, .waitingRoomContainer, .eventListContainer, .messageContainer, .loginRegContainer, .loadingContainer, .requestContainer, .codeContainer, .overviewContainer) > input[type="button"]:first-child {
	display: block; width: auto !important; margin: 0 0 16px auto !important; height: 36px !important; line-height: 36px !important;
	padding: 0 16px !important; background: transparent !important; color: var(--ink-700) !important;
	border: 1.5px solid var(--bone-300) !important; font-size: 12px !important;
}
.pdb-termed__inhalt > :is(#pdb-boost, div) termed :is(.bookingContainer, .waitingRoomContainer, .eventListContainer, .messageContainer, .loginRegContainer, .loadingContainer, .requestContainer, .codeContainer, .overviewContainer) > input[type="button"]:first-child:hover {
	background: var(--bone-100) !important; color: var(--wine-700) !important;
}
/* Reiter Anmelden / Registrieren */
.pdb-termed__inhalt > :is(#pdb-boost, div) termed .loginRegNav {
	display: flex !important; background: transparent !important; border-bottom: 1px solid var(--bone-200); margin: 0 0 8px !important; padding: 0 !important;
}
.pdb-termed__inhalt > :is(#pdb-boost, div) termed .loginRegNav > span {
	flex: 1 1 0; display: block !important; width: auto !important; height: auto !important; line-height: 1.4 !important; margin: 0 !important;
	padding: 10px 0 12px !important; border: 0 !important; margin-bottom: -1px;
	border-bottom: 2px solid transparent !important; background: transparent !important; outline: none !important;
	color: var(--ink-500) !important; font-family: var(--font-sans) !important; font-size: 13px !important; font-weight: 600 !important;
	letter-spacing: .08em; text-transform: uppercase; text-align: center; cursor: pointer;
}
.pdb-termed__inhalt > :is(#pdb-boost, div) termed .loginRegNav > span.active { color: var(--wine-700) !important; border-bottom-color: var(--wine-700) !important; }
/* Formularfelder */
.pdb-termed__inhalt > :is(#pdb-boost, div) termed :is(.loginContainer, .registrationContainer, form) { padding: 0 !important; margin: 0 !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) termed :is(.bookingContainer, .waitingRoomContainer, .eventListContainer, .messageContainer, .loginRegContainer, .loadingContainer, .requestContainer, .codeContainer, .overviewContainer) label {
	display: block; margin: 16px 0 6px !important; font-size: 14px !important; font-weight: 500; line-height: 1.4 !important; color: var(--ink-700) !important;
}
.pdb-termed__inhalt > :is(#pdb-boost, div) termed :is(.bookingContainer, .waitingRoomContainer, .eventListContainer, .messageContainer, .loginRegContainer, .loadingContainer, .requestContainer, .codeContainer, .overviewContainer) :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], input[type="number"], select, textarea) {
	width: 100% !important; box-sizing: border-box !important; min-height: 48px; margin: 0 !important; padding: 10px 14px !important;
	border: 1.5px solid var(--bone-300) !important; border-radius: 10px !important; background: var(--white) !important;
	font-family: var(--font-sans) !important; font-size: 16px !important; line-height: 1.4 !important; color: var(--ink-900) !important;
}
.pdb-termed__inhalt > :is(#pdb-boost, div) termed :is(.bookingContainer, .waitingRoomContainer, .eventListContainer, .messageContainer, .loginRegContainer, .loadingContainer, .requestContainer, .codeContainer, .overviewContainer) :is(input, select, textarea):focus {
	border-color: var(--wine-700) !important; outline: 3px solid var(--rose-100);
}
.pdb-termed__inhalt > :is(#pdb-boost, div) termed :is(.bookingContainer, .waitingRoomContainer, .eventListContainer, .messageContainer, .loginRegContainer, .loadingContainer, .requestContainer, .codeContainer, .overviewContainer) input[type="submit"] {
	display: block; width: 100%; margin-top: 24px !important;
}
.pdb-termed__inhalt > :is(#pdb-boost, div) termed :is(.bookingContainer, .waitingRoomContainer, .eventListContainer, .messageContainer, .loginRegContainer, .loadingContainer, .requestContainer, .codeContainer, .overviewContainer) a {
	display: inline-block; margin-top: 14px; font-size: 14px; color: var(--wine-700) !important; text-underline-offset: 3px;
}

/* === Ergänzung 2: Pillen, Terminketten, Kalenderansicht, E-Mail-Adresse === */
/* Auswahl-Buttons (Neupatient, Sprechstunde …) als rote Pillen im 2er-Raster */
.pdb-termed__inhalt > :is(#pdb-boost, div) .treeContainer input[type="button"]:not(.treeBack) {
	width: 100%; height: auto !important; min-height: 48px; padding: 12px 24px !important;
	border: 0 !important; border-radius: 999px !important;
	background: var(--wine-700) !important; color: var(--white) !important;
	font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important;
	letter-spacing: .08em !important; text-transform: uppercase !important; white-space: normal;
}
.pdb-termed__inhalt > :is(#pdb-boost, div) .treeContainer input[type="button"]:not(.treeBack):hover { background: var(--wine-800) !important; }

/* Terminketten (1. Termin, 2. Termin …) mit Abstand untereinander */
.pdb-termed__inhalt > :is(#pdb-boost, div) .events > div:has(> .chainButton) { margin: 0 0 12px !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .events input.chainButton[type="button"] {
	width: 100%; height: auto !important; min-height: 48px; padding: 12px 24px !important;
	line-height: 1.35 !important; white-space: normal; text-align: center;
}
/* Listen-Uhrzeiten (nur bei Terminketten) als kleine Pillen */
.pdb-termed__inhalt > :is(#pdb-boost, div) .events .group-date { margin: 20px 0 8px !important; font-size: 15px; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .events a.chainEventButton {
	display: inline-block; margin: 0 8px 8px 0 !important; padding: 8px 16px !important; border-radius: 999px !important;
	background: var(--wine-700) !important; color: var(--white) !important; box-shadow: none !important;
	font-family: var(--font-sans) !important; font-size: 14px !important; line-height: 1.3 !important; text-decoration: none !important;
}
.pdb-termed__inhalt > :is(#pdb-boost, div) .events a.chainEventButton:hover { background: var(--wine-800) !important; }

/* Kalenderansicht */
.pdb-termed__inhalt > :is(#pdb-boost, div) .events { margin-top: 16px; font-family: var(--font-sans) !important; color: var(--ink-900) !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .events * { font-family: var(--font-sans) !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .calControl {
	display: flex !important; align-items: center !important; justify-content: space-between !important;
	height: auto !important; padding: 0 !important; margin: 0 0 4px !important; background: transparent !important;
}
.pdb-termed__inhalt > :is(#pdb-boost, div) :is(.calControlBack, .calControlNext) {
	display: grid !important; place-items: center; width: 44px !important; height: 44px !important; padding: 0 !important;
	border: 1.5px solid var(--bone-300) !important; border-radius: 50% !important; background: var(--white) !important;
	cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pdb-termed__inhalt > :is(#pdb-boost, div) :is(.calControlBack, .calControlNext):hover { background: var(--rose-100) !important; border-color: var(--wine-700) !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) :is(.calControlBack, .calControlNext) span { font-size: 18px !important; line-height: 1 !important; color: var(--wine-700) !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .calControlDate span { font-size: 18px !important; font-weight: 600 !important; color: var(--ink-900) !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .calWeekWrapper { margin: 0 0 12px !important; text-align: center; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .calWeekWrapper span { font-size: 13px !important; color: var(--ink-500) !important; letter-spacing: .02em; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .calContent { gap: 6px; border: 0 !important; background: transparent !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .day-column {
	flex: 1 1 0; min-width: 0; padding: 0 0 6px !important; border: 0 !important; border-radius: 12px !important;
	background: var(--bone-50) !important;
}
.pdb-termed__inhalt > :is(#pdb-boost, div) .day-column .day {
	display: flex !important; flex-direction: column; align-items: center; gap: 0;
	height: auto !important; padding: 10px 0 8px !important; margin: 0 0 6px !important;
	border: 0 !important; border-bottom: 1px solid var(--bone-200) !important; background: transparent !important;
}
.pdb-termed__inhalt > :is(#pdb-boost, div) .day .weekday { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500) !important; float: none !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .day .date { font-size: 17px !important; font-weight: 600 !important; color: var(--ink-900) !important; float: none !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .day-column .app { padding: 0 6px !important; margin: 0 0 6px !important; background: transparent !important; border: 0 !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .day-column .app a.btn {
	display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 8px 4px !important;
	border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
	background: var(--wine-700) !important; color: var(--white) !important;
	font-size: 13px !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: center; text-decoration: none !important;
	white-space: nowrap; transition: background-color var(--dur) var(--ease);
}
.pdb-termed__inhalt > :is(#pdb-boost, div) .day-column .app a.btn:hover { background: var(--wine-800) !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) .no-apps p { font-size: 15px !important; color: var(--ink-700) !important; text-align: center; }

/* Anmeldefenster: „Emailadresse“ → „E-Mail-Adresse“ (Text kommt von TerMed, darum per CSS) */
.pdb-termed__inhalt > :is(#pdb-boost, div) termed form.loginForm > label:first-of-type { font-size: 0 !important; }
.pdb-termed__inhalt > :is(#pdb-boost, div) termed form.loginForm > label:first-of-type::after { content: "E-Mail-Adresse"; font-size: 14px; }

@media (max-width: 520px) {
	.pdb-termed__inhalt > :is(#pdb-boost, div) .calContent { gap: 3px; }
	.pdb-termed__inhalt > :is(#pdb-boost, div) .day-column .app { padding: 0 3px !important; }
	.pdb-termed__inhalt > :is(#pdb-boost, div) .day-column .app a.btn { font-size: 11px !important; padding: 6px 2px !important; }
}