/**
 * Download-Abschnitt "UseCase als PDF downloaden": Text und Formular links, Handy-Mockup rechts.
 * Wird nur geladen, wo [boc_download] steht (inc/download/init.php). Farben und Masse nach dem
 * Miro-Entwurf; die Schrift kommt unveraendert vom Theme.
 */
.boc-download {
	--boc-dl-bg: #fff0d9;
	--boc-dl-text: #4e5455;
	--boc-dl-blau: #095494;
	--boc-dl-blau-hover: #073f70;
	--boc-dl-radius: 10px;
	/* So weit ragt das Handy oben aus dem Kasten; der Aussenabstand oben haelt den Platz frei. */
	--boc-dl-ueberstand: 60px;
	box-sizing: border-box;
	max-width: 888px;
	margin: var(--boc-dl-ueberstand) auto 1.5rem;
	padding: 0 40px;
	border-radius: var(--boc-dl-radius);
	background: var(--boc-dl-bg);
	color: var(--boc-dl-text);
}

/* minmax(0, ...): eine nackte 1fr-Spur laesst sich nicht unter die Mindestbreite ihres Inhalts
   schrumpfen, ein Fluent Form mit langem Label wuerde die Bildspalte sonst aus dem Raster druecken.
   stretch: Die Bildspalte muss bis zur Unterkante reichen, dort wird das Handy abgeschnitten. */
.boc-download__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 80px;
	align-items: stretch;
}

.boc-download__spalte {
	min-width: 0;
}

.boc-download__spalte--text {
	align-self: center;
	padding: 30px 0 40px;
}

.boc-download__spalte--bild {
	position: relative;
}

/* ------------------------------------------------------------------ Texte */

.boc-download__kicker {
	margin: 0 0 .5rem;
	color: var(--boc-dl-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

.boc-download__heading {
	margin: 0 0 1rem;
	color: var(--boc-dl-text);
	font-size: 33px;
	font-weight: 700;
	line-height: 1.2;
}

.boc-download__text {
	margin: 0 0 1.5rem;
	font-size: 18px;
	line-height: 1.5;
}

.boc-download__text > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------- Bild */

/* Das Handy beginnt ueber dem Kasten und wird an dessen Unterkante abgeschnitten (Miro-Entwurf).
   Die Bildhoehe folgt der Kastenhoehe plus festem Schnitt, damit der Schnitt bei jeder Textlaenge
   bleibt. Das Handy darf dabei breiter als seine Spalte werden: clip-path schneidet nur oben und
   unten, overflow: hidden wuerde auch die Seiten kappen. */
.boc-download__vorschau {
	--boc-dl-schnitt: 70px;
	position: absolute;
	top: calc(-1 * var(--boc-dl-ueberstand));
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	clip-path: inset(0 -100vw);
}

.boc-download__bild {
	position: absolute;
	top: 0;
	left: 50%;
	width: auto;
	max-width: none;
	height: calc(100% + var(--boc-dl-schnitt));
	transform: translateX(-50%);
}

/* Hinweise, die nur der Builder sieht (boc_download_builder_hinweis). */
.boc-download__hinweis {
	margin: .75rem 0 0;
	padding: .5rem .75rem;
	border: 1px solid #e56100;
	border-radius: 5px;
	background: #fff;
	font-size: .85em;
}

/* ------------------------------------------------------------ Fluent Form */

/* Nur das, was der Abschnitt braucht: Der Rest bleibt Plugin-Stil, damit andere Formulare der
   Seite unberuehrt sind. Das Formular nimmt die Spaltenbreite ein. */
.boc-download .fluentform .ff-el-group {
	margin-bottom: 1rem;
}

/* Fluent Forms setzt unter Formular, letzte Gruppe und Button eigene Abstaende; der Kasten hat
   seinen Innenabstand schon, sonst summiert sich das unter dem Button auf fast 90px. */
.boc-download form.frm-fluent-form,
.boc-download .fluentform .ff-el-group:last-child,
.boc-download form.frm-fluent-form .ff-btn-submit {
	margin-bottom: 0;
}

.boc-download .fluentform .ff-el-input--label label {
	color: var(--boc-dl-text);
	font-size: 18px;
	font-weight: 700;
}

.boc-download .fluentform input[type="text"],
.boc-download .fluentform input[type="email"],
.boc-download .fluentform textarea {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 0;
	border-radius: 5px;
	box-shadow: none;
	color: var(--boc-dl-text);
}

.boc-download .fluentform input[type="email"]:focus,
.boc-download .fluentform input[type="text"]:focus {
	outline: 2px solid var(--boc-dl-blau);
	outline-offset: 1px;
}

/* Einwilligung: klein, aber lesbar. #6b7275 auf #fff0d9 hat rund 4,4:1 und liegt damit knapp
   unter AA; deshalb das etwas dunklere #5f6668 (rund 5,2:1). Der hellere Grauton der Vorlage
   (#b0b0b0) kaeme nur auf etwa 1,9:1. */
.boc-download .fluentform .ff-el-form-check-label,
.boc-download .fluentform .ff_t_c {
	color: #5f6668;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}

.boc-download .fluentform .ff-el-form-check-label a {
	color: inherit;
	text-decoration: underline;
}

/* Absende-Button: Dmitry setzt die Klassen boc-btn boc-btn--blau im Formular. Fluent Forms
   faerbt .ff-btn-submit mit eigenen Regeln (inline und Plugin-CSS), die gegen die Klassen aus
   buttons.css gewinnen; wie beim Popup (homepage-popup.css) hilft hier nur !important. */
.boc-download form.frm-fluent-form .ff-btn-submit.boc-btn--blau,
.boc-download form.frm-fluent-form .ff-btn-submit.boc-btn--blau:not(.ff_btn_no_style) {
	border: 0;
	border-radius: 10px;
	background-color: var(--boc-dl-blau) !important;
	box-shadow: none;
	color: #fff !important;
	font-size: 16px;
	font-weight: 600 !important;
	line-height: 1.2;
	text-transform: none;
	opacity: 1;
}

.boc-download form.frm-fluent-form .ff-btn-submit.boc-btn--blau:hover,
.boc-download form.frm-fluent-form .ff-btn-submit.boc-btn--blau:focus-visible {
	background-color: var(--boc-dl-blau-hover) !important;
	box-shadow: none;
	color: #fff !important;
	opacity: 1;
}

.boc-download form.frm-fluent-form .ff-btn-submit.boc-btn--blau:disabled,
.boc-download form.frm-fluent-form .ff-btn-submit.boc-btn--blau.ff-btn-loading {
	cursor: wait;
	opacity: .7;
}

/* Button "PDF oeffnen" unter der Bestaetigung (assets/js/download.js). */
.boc-download .boc-download__pdf.boc-btn {
	margin: 1rem 0 0;
}

.boc-download .ff-message-success {
	margin: 0;
	border: 0;
	border-radius: 5px;
	background: #fff;
	box-shadow: none;
	color: var(--boc-dl-text);
}

/* ------------------------------------------------------------- Responsive */

/* Tablet und kleiner (Flatsomes Umbruch bei 849px): eine Spalte, das Handy ragt weiter oben aus
   dem Kasten, zeigt aber nur seinen oberen Teil und laeuft zum Text hin aus. So bleibt die
   Wirkung des Entwurfs und das Formular ist ohne langes Scrollen erreichbar. */
@media (max-width: 849px) {
	.boc-download {
		--boc-dl-ueberstand: 40px;
		padding: 0 1.5rem;
	}

	.boc-download__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.boc-download__spalte--bild {
		order: -1;
		height: 160px;
	}

	.boc-download__vorschau {
		-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
		mask-image: linear-gradient(to bottom, #000 60%, transparent);
	}

	.boc-download__bild {
		width: 200px;
		height: auto;
	}

	.boc-download__spalte--text {
		padding: 1rem 0 1.5rem;
	}
}

@media (max-width: 549px) {
	.boc-download {
		padding: 0 1rem;
	}

	.boc-download__heading {
		font-size: 26px;
	}

	.boc-download__kicker,
	.boc-download__text {
		font-size: 16px;
	}

	/* Der Button soll in der schmalen Spalte nicht schmaler als sein Text werden. */
	.boc-download form.frm-fluent-form .ff-btn-submit.boc-btn--blau {
		width: 100%;
	}
}