/*
 * Tanzschule Hieble – Kontaktformular im Design von hieble.at
 * Nimbuscloud: Stammdaten › Vorlagen › Webseitendesign › form-20 (aufgerufen mit &site=20)
 * Nur Optik: Schriften, Farben und Abstände wie auf der Website. Felder, Pflichtangaben und Ablauf bleiben unverändert.
 */

/* Schriften der Website */
@font-face {
	font-family: 'Matter';
	src: url('https://www.hieble.at/wp-content/themes/hieble/assets/css/webfonts/Matter-Regular.woff2') format('woff2'),
		url('https://www.hieble.at/wp-content/themes/hieble/assets/css/webfonts/Matter-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--hb-dark: #181716;
	--hb-gold: #be9b52;
	--hb-line-strong: rgba(24, 23, 22, .35);
	--hb-muted: rgba(24, 23, 22, .7);
	--hb-soft: #f8f6f1;
	--hb-text: 'Matter', Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------------------------
 * Seite
 * ------------------------------------------------------------------------- */

html {
	font-size: 62.5%;
}

body.nimbuscloud-custom-form {
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--hb-dark);
	font-family: var(--hb-text);
	font-size: 1.7rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.nimbuscloud-custom-form #nimbuscloud-public-form {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Nimbuscloud meldet der Website die Höhe bis zu dieser Markierung (+20 px) – als Textzeile war sie höher,
   dann blieb im Formular ein Scrollbalken stehen */
body.nimbuscloud-custom-form #by-nimbuscloud {
	display: block;
	height: 0;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}

/* ---------------------------------------------------------------------------
 * Felder
 * ------------------------------------------------------------------------- */

body.nimbuscloud-custom-form .form-group {
	margin: 0 0 2.2rem;
}

body.nimbuscloud-custom-form .form-group > label {
	display: inline-block;
	margin: 0 0 .6rem;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1.4;
	color: var(--hb-dark);
}

body.nimbuscloud-custom-form .required-item {
	margin-left: .2rem;
	font-weight: normal;
	color: var(--hb-gold);
}

/* Kontrollkästchen-Gruppen haben eine leere Beschriftung – samt einzelnem Sternchen ausblenden */
body.nimbuscloud-custom-form .form-group > label:empty,
body.nimbuscloud-custom-form .form-group > label:empty + .required-item {
	display: none;
}

body.nimbuscloud-custom-form .form-control {
	display: block;
	width: 100%;
	height: auto;
	min-height: 5.2rem;
	padding: 1.2rem 1.6rem;
	background-color: #fff;
	border: 1px solid var(--hb-line-strong);
	border-radius: 0;
	box-shadow: none;
	color: var(--hb-dark);
	font-family: var(--hb-text);
	font-size: 1.7rem;
	line-height: 1.5;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

body.nimbuscloud-custom-form .form-control:focus {
	border-color: var(--hb-dark);
	box-shadow: inset 0 0 0 1px var(--hb-dark);
	outline: 0;
}

body.nimbuscloud-custom-form textarea.form-control {
	min-height: 14rem;
	resize: vertical;
}

/* Kontrollkästchen (Rückruf, AGB/Datenschutz) */
body.nimbuscloud-custom-form .checkbox {
	margin: 0;
	padding: 0;
}

body.nimbuscloud-custom-form label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	min-height: 0;
	padding: 0;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1.5;
	color: var(--hb-dark);
	cursor: pointer;
}

body.nimbuscloud-custom-form label.checkbox input[type='checkbox'] {
	position: static;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	margin: .2rem 0 0;
	accent-color: var(--hb-dark);
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * „Du bist kein Roboter?“ – Symbol wählen
 * ------------------------------------------------------------------------- */

body.nimbuscloud-custom-form .form-icon-choice {
	margin: .6rem 0 2.4rem;
	padding: 2rem 2.2rem 2.2rem;
	background: var(--hb-soft);
}

body.nimbuscloud-custom-form .form-icon-choice:empty,
body.nimbuscloud-custom-form .form-icon-choice-header:empty {
	display: none;
}

body.nimbuscloud-custom-form .form-icon-choice-header {
	margin: 0 0 1.4rem;
	font-size: 1.5rem;
	line-height: 1.5;
	color: var(--hb-muted);
}

body.nimbuscloud-custom-form .form-icon-choice-header strong {
	padding: 0;
	border: 0;
	font-weight: bold;
	color: var(--hb-dark);
}

body.nimbuscloud-custom-form .form-icon-choice-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

body.nimbuscloud-custom-form .form-icon-choice-container a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.8rem;
	height: 4.8rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--hb-line-strong);
	border-radius: 50%;
	background: #fff;
	color: var(--hb-dark);
	font-size: 1.8rem;
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

body.nimbuscloud-custom-form .form-icon-choice-container a:hover,
body.nimbuscloud-custom-form .form-icon-choice-container a:focus {
	border-color: var(--hb-dark);
	outline: 0;
}

body.nimbuscloud-custom-form .form-icon-choice-container a.selected {
	border-color: var(--hb-dark);
	background: var(--hb-dark);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Absenden – goldener Button wie auf der Website („full-gold“)
 * ------------------------------------------------------------------------- */

/* Nimbuscloud setzt den Button in ein zusätzliches .form-group – ohne doppelten Abstand darunter */
body.nimbuscloud-custom-form .form-submit-container,
body.nimbuscloud-custom-form .form-submit-container .form-group {
	margin-bottom: 0;
}

body.nimbuscloud-custom-form .form-submit-container .btn {
	display: inline-block;
	padding: 1.2rem 3.5rem;
	border: 1px solid var(--hb-gold);
	border-radius: 100px;
	background: var(--hb-gold);
	box-shadow: none;
	text-shadow: none;
	color: #fff;
	font-family: var(--hb-text);
	font-size: 2rem;
	line-height: 1.6;
	transition: opacity 300ms ease;
}

body.nimbuscloud-custom-form .form-submit-container .btn:hover,
body.nimbuscloud-custom-form .form-submit-container .btn:focus,
body.nimbuscloud-custom-form .form-submit-container .btn:active {
	background: var(--hb-gold);
	border-color: var(--hb-gold);
	box-shadow: none;
	color: #fff;
	opacity: .75;
	outline: 0;
}

body.nimbuscloud-custom-form .form-submit-container .btn .fa,
body.nimbuscloud-custom-form .form-submit-container .btn .fas {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Bestätigung und Hinweise nach dem Absenden
 * ------------------------------------------------------------------------- */

body.nimbuscloud-custom-form .form-result {
	max-width: none;
	margin: 0;
	padding: 2.4rem 2.6rem;
	border: 0;
	border-left: 3px solid var(--hb-gold);
	border-radius: 0;
	background: var(--hb-soft);
	font-size: 1.7rem;
	font-weight: normal;
	line-height: 1.6;
	text-align: left;
	color: var(--hb-dark);
}

body.nimbuscloud-custom-form .alert {
	border-radius: 0;
	font-size: 1.6rem;
}

body.nimbuscloud-custom-form .help-block,
body.nimbuscloud-custom-form .help-description {
	font-size: 1.4rem;
	color: var(--hb-muted);
}

body.nimbuscloud-custom-form .has-error .form-control {
	border-color: #b3261e;
}

/* ---------------------------------------------------------------------------
 * Ab mittlerer Breite: Anrede, Vorname und Nachname in einer Zeile, E-Mail und Telefon in einer Zeile.
 * Zuordnung über die Feld-IDs aus Nimbuscloud – kommen Felder dazu oder ändern sich, stehen sie
 * einfach wieder untereinander in voller Breite.
 * ------------------------------------------------------------------------- */

@media (min-width: 560px) {
	body.nimbuscloud-custom-form #nimbuscloud-public-form {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		column-gap: 2rem;
	}

	body.nimbuscloud-custom-form #nimbuscloud-public-form > * {
		grid-column: 1 / -1;
	}

	body.nimbuscloud-custom-form #nimbuscloud-public-form > .form-group:has(#form_text-1719852485200),
	body.nimbuscloud-custom-form #nimbuscloud-public-form > .form-group:has(#form_text-1719852660971),
	body.nimbuscloud-custom-form #nimbuscloud-public-form > .form-group:has(#form_text-1719852664907) {
		grid-column: span 2;
	}

	body.nimbuscloud-custom-form #nimbuscloud-public-form > .form-group:has(#form_customer-email),
	body.nimbuscloud-custom-form #nimbuscloud-public-form > .form-group:has(#form_text-1719852689851) {
		grid-column: span 3;
	}
}

/* ---------------------------------------------------------------------------
 * Handy
 * ------------------------------------------------------------------------- */

@media (max-width: 600px) {
	body.nimbuscloud-custom-form .form-icon-choice {
		padding: 1.6rem 1.6rem 1.8rem;
	}

	body.nimbuscloud-custom-form .form-submit-container .btn {
		display: block;
		width: 100%;
	}
}