@font-face {
  font-family: "CamingoDosProSCd";
  src: url("/fonts/CamingoDosProSCd-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "CamingoDos Pro SCd SemiBold", Tahoma, arial, sans-serif;
}

/* =========================================================
   Start-Page Layout / Header / Footer
   ========================================================= */

.CustomHeaderWrapper img {
  float: none;
  display: inline-block;
  margin-top: -10px;
  margin-bottom: 5px;
  max-width: 100%;
  height: auto;
}

.CustomFooterWrapper {
  text-align: center;
}

.ContentWrapper,
.BottomWrapper {
  padding-top: 10px;
  border-color: #787878;
}

.MainTitle {
  color: #ff6900;
  font-size: clamp(10px, 2vw, 20px);
  max-width: 100%;
  height: auto;
}

.CenteredContainer {
  width: 1000px;
  max-width: 95%;
}

.TitleSeparator {
  border-color: #787878;
}

.EventTable {
  font-weight: bold;
  font-size: clamp(10px, 2vw, 16px);
  border-bottom: 1px solid #787878;
  border-collapse: separate;
  padding-bottom: 11px;
}

.EventTable td:first-child {
  padding-right: 20px;
}

.NotesArea {
  font-size: clamp(10px, 2vw, 16px);
  padding-top: 11px;
}

.eventOnlineLink {
  font-size: clamp(10px, 2vw, 25px);
}

#LOADING,
.InvitationInfo,
.MandatoryLabel,
.InvitationInfo,
.InvitationDatas td,
.Appointments td,
.FormDatas,
.FormDatasHeader,
.SubtitleAppointment,
.SubtitleAppointmentStartPage,
.gwt-Label {
	font-size: clamp(10px, 2vw, 16px) !important;
}

.InvitationDatas label {
  margin-top: -1px;
}

.AppointmentGroup .Separator {
  top: -10px;
  border-color: #787878;
}

.AppointmentGroupAppointmentSeparator td .Separator {
	  border-color: #787878;
}

.Appointments .Date {
  max-width: 100%;
  height: auto;
  padding-top: 5px;
}

.Appointments .Time {
  padding-left: 0;
}

.AppointmentGroupAppointment .Title {
  padding-left: 0;
}

.AppointmentGroup td {
  padding-left: 0;
  padding-top: 20px;
}

.RegisterPage .Appointment .Title,
.RegisterPage .AppointmentGroupAppointment .Title {
  width: 100%;
  padding-left: 0;
}

.AppointmentGroupAppointment .eventOnlineRadioButton {
  margin-top: 5px;
  margin-left: 0;
}

.RegisterPage .AppointmentGroupTitle {
  padding-left: 0;
}

.AppointmentGroupTitle .Title .TitleText .eventOnlineCheckBox {
  margin-left: 0;
}

.EmptyIntervalSmall {
  height: 15px;
}

.BottomWrapper .eventOnlineButton {
	padding: 12px 14px;
	font-size: 16px;
}

.eventOnlineCheckBox {
    margin: 2px 0 0 0 !important;
    vertical-align: middle;
}


#QUESTIONNAIREPAGE_TITLE_DEMOINTEREST {
	display: inline-block;
    vertical-align: middle;
    margin: 0;
    line-height: 1.2;
    padding-left: 0px;
}

/*
=========================================================
   Inputs / Selects
=========================================================
*/

.eventOnlineTextfield,
.eventOnlineCombobox {
  margin: 5px 0;
  font-size: 12pt;
  line-height: 1.3;
  padding: 8px 10px;
  height: auto;
  box-sizing: border-box;
}

/*
=========================================================
   GDPR + Marketing Checkboxen (Desktop)
=========================================================
*/

#REGISTERPAGE_CHECKBOX_GDPR,
#REGISTERPAGE_CHECKBOX_MARKETING,
#REGISTERPAGE_CHECKBOX_DATASHARING,
#CONTACTPAGE_CHECKBOX_GDPR,
#CONTACTPAGE_CHECKBOX_MARKETING {
  margin: 2px 0 0 0 !important;
  vertical-align: top;
}

#REGISTERPAGE_CHECKBOX_GDPR + label,
#REGISTERPAGE_CHECKBOX_MARKETING + label,
#REGISTERPAGE_CHECKBOX_DATASHARING + label,
#CONTACTPAGE_CHECKBOX_GDPR + label,
#CONTACTPAGE_CHECKBOX_MARKETING + label {
  display: inline-block !important;
  padding-left: 0 !important;
  margin-left: 8px !important;
  width: calc(100% - 28px);
  vertical-align: -webkit-baseline-middle;
  line-height: 1.35;
}

/*
=========================================================
   Mobile (<= 600px)
=========================================================
*/

@media (max-width: 600px) {
	/* --- Form: Tabellen-Spaltenbreiten neutralisieren --- */
	.InvitationDatas colgroup,
	.InvitationDatas col {
		display: none !important;
	}
  
	.MainTitle {
		font-size: clamp(10px, 6vw, 20px);
	}
  
	#registerOthersDataTable.FormDatas {
		font-size: 16px;
		line-height: 1.25;
	}
	
	.FormDatasHeader
	.SubtitleAppointment {
		font-size: 16px;
		line-height: 1.25;
	}		

	#LOADING,
	.EventTable,
	.NotesArea,
	.MandatoryLabel,
	.InvitationInfo,
	.InvitationDatas td,
	.FormDatas,
	.FormDatasHeader,
	.SubtitleAppointment,
	.SubtitleAppointmentStartPage,
	.Appointments td,
	.gwt-Label	{
		font-size: clamp(10px, 6vw, 16px) !important;
	}
	
	.eventOnlineLink {
		font-size: clamp(10px, 6vw, 25px);
	}

	.InvitationDatas tr {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 10px;
		margin-bottom: 12px;
	}

	.InvitationDatas tr > td {
		flex: 1 1 100%;
		width: auto !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}

	.InvitationDatas tr > td > label:not(#QUESTIONNAIREPAGE_TITLE_DEMOINTEREST) {
		display: block;
		/*margin: 0 0 4px 0;*/
		padding-left: 0 !important;
		text-align: left;
	}

	.InvitationDatas .eventOnlineTextfield,
	.InvitationDatas .eventOnlineCombobox,
	.InvitationDatas input,
	.InvitationDatas select {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;

		/* iOS: verhindert Zoom + bessere Proportionen */
		font-size: 16px;
		line-height: 1.25;
		padding: 10px 12px;
	}

	/* Buttons untereinander (nur im BottomWrapper) */
	.EventOnlineButtonsWrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.BottomWrapper .eventOnlineButton {
		width: 100%;
		padding: 12px 14px;
		font-size: 16px;
		box-sizing: border-box;
	}

	.BottomWrapper {
		position: static !important;
		/*margin-top: 14px;*/
		clear: both;
	}

	/* PLZ/Ort-Zeile stapeln (Ort nicht rechts einger ckt) */
	.InvitationDatas tr:has(#REGISTERPAGE_TEXTFIELD_ZIP) > td {
		flex: 1 1 100% !important;
		width: auto !important;
	}

	/* Extra: Ort-Label explizit links (falls eigenes TD) */
	.InvitationDatas td:has(label[for="REGISTERPAGE_TEXTFIELD_PLACE"]) {
		text-align: left !important;
		margin-left: 0 !important;
	}

	/* --- Checkboxen: 2-Spalten-Grid im TD (Checkbox | Text) --- */
	.InvitationDatas td:has(#REGISTERPAGE_CHECKBOX_GDPR),
	.InvitationDatas td:has(#REGISTERPAGE_CHECKBOX_MARKETING),
	.InvitationDatas td:has(#REGISTERPAGE_CHECKBOX_DATASHARING),
	.InvitationDatas td:has(#CONTACTPAGE_CHECKBOX_GDPR),
	.InvitationDatas td:has(#CONTACTPAGE_CHECKBOX_MARKETING),
	.InvitationDatas td:has(.eventOnlineCheckBox) {
		display: grid !important;
		grid-template-columns: 20px minmax(0, 1fr);
		column-gap: 10px;
		align-items: start;
	}

	#REGISTERPAGE_CHECKBOX_GDPR,
	#REGISTERPAGE_CHECKBOX_MARKETING,
	#REGISTERPAGE_CHECKBOX_DATASHARING,
	#CONTACTPAGE_CHECKBOX_GDPR,
	#CONTACTPAGE_CHECKBOX_MARKETING,
	#QUESTIONNAIREPAGE_CHECKBOX_AMATECHNICA,
	#QUESTIONNAIREPAGE_CHECKBOX_ÜBERNACHTUNG,
	#QUESTIONNAIREPAGE_CHECKBOX_VERSUCHSPARTNERTREFFEN {
		margin: 5px 0 0 0 !important;
	}

	#REGISTERPAGE_CHECKBOX_GDPR + label,
	#REGISTERPAGE_CHECKBOX_MARKETING + label,
	#REGISTERPAGE_CHECKBOX_DATASHARING + label,
	#CONTACTPAGE_CHECKBOX_GDPR + label,
	#CONTACTPAGE_CHECKBOX_MARKETING + label,
	#QUESTIONNAIREPAGE_CHECKBOX_AMATECHNICA + label,
	#QUESTIONNAIREPAGE_CHECKBOX_ÜBERNACHTUNG + label,
	#QUESTIONNAIREPAGE_CHECKBOX_VERSUCHSPARTNERTREFFEN + label {
		display: block !important;
		margin: 0 !important;
		padding-left: 0 !important;
		width: auto !important;
		line-height: 1.35;
	}

	/* --- Dialog: Ja/Nein Buttons nebeneinander, gro , nicht abgeschnitten --- */
	.gwt-DialogBox,
	.gwt-PopupPanel {
		width: 92vw !important;
		max-width: 420px !important;
		box-sizing: border-box;
	}

	.gwt-DialogBox .dialogMiddleCenter,
	.gwt-DialogBox .dialogMiddleCenterInner,
	.gwt-DialogBox .dialogContent,
	.gwt-PopupPanel .dialogMiddleCenter,
	.gwt-PopupPanel .dialogMiddleCenterInner,
	.gwt-PopupPanel .dialogContent {
		width: 100% !important;
		box-sizing: border-box;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	/* echter Button-Container: <div style="position:absolute; inset:0px;"> ... */
	.gwt-DialogBox .dialogContent div[style*="position: absolute"][style*="inset: 0px"],
	.gwt-PopupPanel .dialogContent div[style*="position: absolute"][style*="inset: 0px"] {
		position: static !important;

		inset: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;

		display: flex !important;
		gap: 10px;
		width: 100% !important;
		justify-content: center;
		align-items: stretch;

		margin-top: 18px;
		padding: 0 12px 12px 12px;
		box-sizing: border-box;
	}

	/* Buttons im Dialog (robust: Klasse oder button direkt) */
	.gwt-DialogBox .dialogContent div[style*="position: absolute"][style*="inset: 0px"] > .eventOnlineButton,
	.gwt-PopupPanel .dialogContent div[style*="position: absolute"][style*="inset: 0px"] > .eventOnlineButton,
	.gwt-DialogBox .dialogContent div[style*="position: absolute"][style*="inset: 0px"] > button,
	.gwt-PopupPanel .dialogContent div[style*="position: absolute"][style*="inset: 0px"] > button {
		flex: 1 1 0;
		width: auto !important;
		min-width: 0;
		min-height: 44px;
		padding: 12px 10px !important;
		font-size: 16px !important;
		box-sizing: border-box;
	}
  
	/* FIX: Parent des Button-Wrappers ist zu klein (height:25px) und clippt (overflow:hidden) */
	.gwt-DialogBox .dialogContent div[style*="bottom: 10px"][style*="height: 25px"],
	.gwt-PopupPanel .dialogContent div[style*="bottom: 10px"][style*="height: 25px"] {
		height: auto !important;
		min-height: 44px; /* genug f r mobile Buttons */
		overflow: visible !important;
	}

	/* Innerer Wrapper (inset:0) bleibt Flex */
	.gwt-DialogBox .dialogContent div[style*="bottom: 10px"][style*="height: 25px"] > div[style*="inset: 0px"],
	.gwt-PopupPanel .dialogContent div[style*="bottom: 10px"][style*="height: 25px"] > div[style*="inset: 0px"] {
		position: static !important;
		display: flex !important;
		gap: 10px;
		justify-content: center;
	}

	/* FIX: Dialog-Inhalt  berlappt, weil Text & Buttons absolut positioniert sind */
	.gwt-DialogBox .dialogContent > div[style*="position: relative"][style*="height: 125px"],
	.gwt-PopupPanel .dialogContent > div[style*="position: relative"][style*="height: 125px"] {
		height: auto !important;
		min-height: 125px;
		padding: 16px 10px 14px;
		box-sizing: border-box;
	}

	/* Textblock: nicht absolut + nicht clippen */
	.gwt-DialogBox .dialogContent div[style*="top: 16px"][style*="height: 64px"],
	.gwt-PopupPanel .dialogContent div[style*="top: 16px"][style*="height: 64px"] {
		position: static !important;
		height: auto !important;
		overflow: visible !important;
		margin: 8px 0 14px 0;
	}

	/* Buttonblock: nicht absolut (damit er unter dem Text sitzt) */
	.gwt-DialogBox .dialogContent div[style*="bottom: 10px"][style*="height: 25px"],
	.gwt-PopupPanel .dialogContent div[style*="bottom: 10px"][style*="height: 25px"] {
		position: static !important;
		margin-top: 0;
	}

	/* FIX: fehlende Ecke oben rechts -> Header/Corner bekommt Fallback-Hintergrund + sauberer Abschluss */
	.gwt-DialogBox > div > table,
	.gwt-PopupPanel > div > table {
		border-collapse: separate !important;
		border-spacing: 0 !important;
		border-radius: 4px;
		overflow: hidden; /* damit die Ecken nicht "ausfransen" */
	}

	/* Fallback-Farbe f r die komplette Kopfzeile (inkl. rechter Ecke) */
	.gwt-DialogBox .dialogTopLeftInner,
	.gwt-DialogBox .dialogTopCenterInner,
	.gwt-DialogBox .dialogTopRightInner,
	.gwt-PopupPanel .dialogTopLeftInner,
	.gwt-PopupPanel .dialogTopCenterInner,
	.gwt-PopupPanel .dialogTopRightInner {
		background: #E3E8F3 !important; /* ggf. an deine Kopfzeilen-Farbe anpassen */
	}
	
	/* Buttons im Dialog */
	.gwt-DialogBox .dialogContent div[style*="position: absolute"][style*="inset: 0px"] > .eventOnlineButton,
	.gwt-PopupPanel .dialogContent div[style*="position: absolute"][style*="inset: 0px"] > .eventOnlineButton,
	.gwt-DialogBox .dialogContent div[style*="position: absolute"][style*="inset: 0px"] > button,
	.gwt-PopupPanel .dialogContent div[style*="position: absolute"][style*="inset: 0px"] > button {
		flex: 0 0 auto;
		width: auto !important;
		min-width: 0;
		min-height: 34px;
		padding: 15px 50px !important;
		font-size: 14px !important;
		box-sizing: border-box;
	}
	
	.gwt-DialogBox .Caption {
		width: 100%;
		max-width: 92vw;
		font-size: clamp(10px, 6vw, 16px) !important;
	}
	
	.eventOnlineCheckBox{
		vertical-align: middle !important;
		margin: 0 8px 0 0 !important;
	}

	#QUESTIONNAIREPAGE_TITLE_DEMOINTEREST{
	  display: inline-block !important;
	  vertical-align: middle !important;
	  margin: 0 !important;
	  line-height: 1.2 !important;
	  width: auto !important;
	  height: auto !important;
	}
	
	.InvitationDatas #QUESTIONNAIREPAGE_TITLE_DEMOINTEREST {
		display: inline-block !important;
		vertical-align: middle !important;
		margin: 0 !important;
		line-height: 1.2 !important;
	}
	
	td:has(#QUESTIONNAIREPAGE_CHECKBOX_DEMOINTEREST) {
	  display: grid !important;
	  grid-template-columns: 20px minmax(0, 1fr);
	  column-gap: 10px;
	  align-items: center;
	}
	
}

/* =========================================================
   Dialog (Desktop + generell)
   ========================================================= */

.gwt-DialogBox,
.gwt-PopupPanel {
  width: 520px !important;
  max-width: 92vw !important;
  box-sizing: border-box;
}

.gwt-DialogBox .dialogMiddleCenter,
.gwt-DialogBox .dialogMiddleCenterInner,
.gwt-DialogBox .dialogContent,
.gwt-PopupPanel .dialogMiddleCenter,
.gwt-PopupPanel .dialogMiddleCenterInner,
.gwt-PopupPanel .dialogContent {
  width: 100% !important;
  box-sizing: border-box;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* FIX: Dialog-Inhalt nicht auf fixe Höhe/Absolute-Layout festnageln */
.gwt-DialogBox .dialogContent > div[style*="position: relative"][style*="height: 125px"],
.gwt-PopupPanel .dialogContent > div[style*="position: relative"][style*="height: 125px"] {
  height: auto !important;
  min-height: 125px;
  padding: 16px 10px 14px;
  box-sizing: border-box;
}

/* Textblock: nicht absolut, damit Buttons darunter sitzen */
.gwt-DialogBox .dialogContent div[style*="top: 16px"][style*="height: 64px"],
.gwt-PopupPanel .dialogContent div[style*="top: 16px"][style*="height: 64px"] {
  position: static !important;
  height: auto !important;
  overflow: visible !important;
  margin: 8px 0 14px 0;
}

/* Parent des Button-Wrappers ist zu klein (height:25px) und clippt */
.gwt-DialogBox .dialogContent div[style*="bottom: 10px"][style*="height: 25px"],
.gwt-PopupPanel .dialogContent div[style*="bottom: 10px"][style*="height: 25px"] {
  height: auto !important;
  overflow: visible !important;
  position: static !important;
}

/* echter Button-Container: <div style="position:absolute; inset:0px;"> ... */
.gwt-DialogBox .dialogContent div[style*="position: absolute"][style*="inset: 0px"],
.gwt-PopupPanel .dialogContent div[style*="position: absolute"][style*="inset: 0px"] {
  position: static !important;

  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: flex !important;
  gap: 10px;
  width: 100% !important;

  /* Desktop: rechtsbündig, ohne Überlappung */
  justify-content: center;
  align-items: stretch;

  margin-top: 18px;
  padding: 0 12px 12px 12px;
  box-sizing: border-box;
}

/* Buttons im Dialog */
.gwt-DialogBox .dialogContent div[style*="position: absolute"][style*="inset: 0px"] > .eventOnlineButton,
.gwt-PopupPanel .dialogContent div[style*="position: absolute"][style*="inset: 0px"] > .eventOnlineButton,
.gwt-DialogBox .dialogContent div[style*="position: absolute"][style*="inset: 0px"] > button,
.gwt-PopupPanel .dialogContent div[style*="position: absolute"][style*="inset: 0px"] > button {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0;
  min-height: 34px;
  padding: 15px 50px !important;
  font-size: 14px !important;
  box-sizing: border-box;
}

/* FIX: fehlende Ecke oben rechts -> Header/Corner bekommt Fallback-Hintergrund + sauberer Abschluss */
.gwt-DialogBox > div > table,
.gwt-PopupPanel > div > table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 4px;
  overflow: hidden;
}

.gwt-DialogBox .dialogTopLeftInner,
.gwt-DialogBox .dialogTopCenterInner,
.gwt-DialogBox .dialogTopRightInner,
.gwt-PopupPanel .dialogTopLeftInner,
.gwt-PopupPanel .dialogTopCenterInner,
.gwt-PopupPanel .dialogTopRightInner {
  background: #E3E8F3 !important;
}

.gwt-DialogBox .Caption {
	width: 100%;
}

.gwt-DialogBox .gwt-Label,
.gwt-PopupPanel .gwt-Label {
  width: 100% !important;
  text-align: center !important;
  position: static !important;
}

.gwt-DialogBox .dialogContent > div[style*="position: relative; width"],
.gwt-DialogBox .dialogContent > div[style*="width: 301px"],
.gwt-PopupPanel .dialogContent > div[style*="position: relative; width"],
.gwt-PopupPanel .dialogContent > div[style*="width: 301px"] {
	width: 400px !important;      /* gewünschte Breite: anpassen */
	max-width: 92vw !important;   /* verhindert Überschreiten des Viewports */
	box-sizing: border-box !important;
	margin: 0 auto !important;    /* zentriert den Dialog-Inhalt horizontal */
}