/* ==========================================================
   INVI CAMPUS – ANMELDUNG
   anmeldung.css
   Gutenberg + Fluent Forms Pro
   ========================================================== */


/* ==========================================================
   01. DESIGN TOKENS / ROOT
   ========================================================== */

.invi-registration-page {
	--rp-blue: #06038D;
	--rp-blue-dark: #04026F;
	--rp-lavender: #D5D4EC;

	--rp-ink: #172033;
	--rp-text: #425A82;
	--rp-muted: #667085;

	--rp-soft: #F5F7FB;
	--rp-soft-blue: #EEF5FF;
	--rp-warm: #F8F4ED;

	--rp-border: #DCE6F3;
	--rp-border-dark: #C7D3E3;

	--rp-white: #FFFFFF;

	--rp-width: 1200px;

	width: 100%;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--rp-ink);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.invi-registration-page *,
.invi-registration-page *::before,
.invi-registration-page *::after {
	box-sizing: border-box;
}


.invi-registration-page .wp-block-group,
.invi-registration-page .wp-block-columns {
	margin-block-start: 0;
	margin-block-end: 0;
}


.invi-registration-page a {
	text-decoration: none;
}


/* ==========================================================
   02. TYPOGRAFIE
   ========================================================== */

.invi-registration-page h1,
.invi-registration-page h2,
.invi-registration-page h3 {
	font-family: "Source Serif Pro", Georgia, serif;
	font-weight: 500;
	letter-spacing: -.03em;
}


.invi-rp-kicker {
	margin: 0 0 11px !important;

	color: var(--rp-blue);

	font-family: Inter, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: .19em;
	text-transform: uppercase;
}


.invi-rp-section-title {
	margin: 0 !important;

	color: var(--rp-blue);

	font-size: clamp(38px, 4.5vw, 58px);
	line-height: 1;
}


/* ==========================================================
   03. HERO – GUTENBERG COVER
   ========================================================== */

.invi-rp-hero {
	width: 100%;
	min-height: 360px !important;

	margin: 0 !important;

	background: #F7F9FD;
}


.invi-rp-hero .wp-block-cover__image-background {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center center;
}


.invi-rp-hero .wp-block-cover__background {
	background:
		linear-gradient(
			90deg,
			rgba(247,249,253,.98) 0%,
			rgba(247,249,253,.93) 34%,
			rgba(247,249,253,.68) 60%,
			rgba(247,249,253,.18) 100%
		) !important;

	opacity: 1 !important;
}


.invi-rp-hero .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;
}


.invi-rp-hero-inner {
	width: calc(100% - 48px) !important;
	max-width: var(--rp-width) !important;
	min-height: 360px;

	margin-left: auto !important;
	margin-right: auto !important;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}


.invi-rp-hero-title {
	max-width: 680px;

	margin: 0 0 12px !important;

	color: var(--rp-blue);

	font-size: clamp(54px, 5vw, 76px);
	line-height: .94;
}


.invi-rp-hero-text {
	max-width: 620px;

	margin: 0 !important;

	color: var(--rp-blue);

	font-family: Inter, Arial, sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
}


/* ==========================================================
   04. ALLGEMEINE SECTIONS
   ========================================================== */

.invi-rp-section {
	width: 100% !important;
	max-width: none !important;

	padding: 76px 24px !important;
}


.invi-rp-container {
	width: 100% !important;
	max-width: var(--rp-width) !important;

	margin-left: auto !important;
	margin-right: auto !important;
}


/*
 * Gutenberg darf unsere Haupt-Grids nicht wieder
 * auf die normale Content-Breite zusammendrücken.
 */

.invi-rp-intro-grid,
.invi-rp-info-grid,
.invi-rp-doc-grid {
	width: 100% !important;
	max-width: none !important;
}


/* ==========================================================
   05. INTRO
   ========================================================== */

.invi-rp-intro-section {
	background: var(--rp-white);
}


.invi-rp-intro-grid {
	display: grid !important;

	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(0, .95fr);

	gap: clamp(40px, 7vw, 96px) !important;

	align-items: end !important;

	margin-bottom: 48px !important;
}


.invi-rp-intro-grid > .wp-block-column {
	min-width: 0;
	flex-basis: auto !important;
}


.invi-rp-intro-copy {
	color: var(--rp-text);

	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.75;
}


.invi-rp-intro-copy p {
	margin: 0 0 12px !important;
}


.invi-rp-intro-copy p:last-child {
	margin-bottom: 0 !important;
}


/* ==========================================================
   06. DREI INFO-KARTEN
   ========================================================== */

.invi-rp-info-grid {
	display: grid !important;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 18px !important;
}


.invi-rp-info-grid > .wp-block-column {
	min-width: 0;
	flex-basis: auto !important;
}


.invi-rp-info-card {
	position: relative;

	height: 100%;
	min-height: 250px;

	padding: 30px !important;

	border: 1px solid var(--rp-border);
	border-radius: 10px;

	background: var(--rp-soft);
}


.invi-rp-info-card--upload {
	background: var(--rp-warm);
}


.invi-rp-info-card--send {
	background: var(--rp-white);
}


.invi-rp-info-card::before {
	content: "";

	display: block;

	width: 48px;
	height: 48px;

	margin-bottom: 27px;

	border-radius: 999px;

	background-color: var(--rp-soft-blue);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 25px 25px;
}


.invi-rp-info-card--choose::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9 12 4l9.5 5L12 14 2.5 9Z'/%3E%3Cpath d='M6 11.2V16c2.8 2.2 9.2 2.2 12 0v-4.8'/%3E%3C/svg%3E");
}


.invi-rp-info-card--upload::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h6l2 2h8v10H4V7Z'/%3E%3Cpath d='M12 16V11M9.5 13.5 12 11l2.5 2.5'/%3E%3C/svg%3E");
}


.invi-rp-info-card--send::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.7 2.7L16.5 9'/%3E%3C/svg%3E");
}


.invi-rp-card-number {
	position: absolute;

	top: 25px;
	right: 27px;

	margin: 0 !important;

	color: rgba(6,3,141,.25);

	font-family: Inter, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
}


.invi-rp-card-kicker {
	margin: 0 0 8px !important;

	color: var(--rp-blue);

	font-family: Inter, Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;

	letter-spacing: .15em;
	text-transform: uppercase;
}


.invi-rp-info-card h3 {
	margin: 0 0 10px !important;

	color: var(--rp-blue);

	font-size: 25px;
	line-height: 1.05;
}


.invi-rp-info-card > p:last-child {
	margin: 0 !important;

	color: var(--rp-text);

	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.65;
}


/* ==========================================================
   07. FORMULAR-SEKTION
   ========================================================== */

.invi-rp-form-section {
	background: var(--rp-soft);
}


.invi-rp-form-card {
	width: 100% !important;
	max-width: 1080px !important;

	height: auto !important;
	min-height: 0 !important;

	margin: 0 auto !important;

	padding: clamp(32px, 5vw, 56px) !important;

	border: 1px solid var(--rp-border);
	border-radius: 14px;

	background: var(--rp-white);

	box-shadow:
		0 18px 50px
		rgba(23,32,51,.07);
}


.invi-rp-form-head {
	width: 100% !important;
	max-width: 760px !important;

	margin: 0 0 38px !important;
}


.invi-rp-form-title {
	margin: 0 0 12px !important;

	color: var(--rp-blue);

	font-size: clamp(38px, 4vw, 54px);
	line-height: 1;
}


.invi-rp-form-intro {
	margin: 0 !important;

	color: var(--rp-muted);

	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.65;
}


.invi-rp-form-shell {
	width: 100% !important;
	max-width: none !important;

	height: auto !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}


.invi-rp-form-shell > * {
	width: 100% !important;
	max-width: none !important;
}


/* ==========================================================
   08. FLUENT FORMS – BASIS
   ========================================================== */

.invi-rp-form-shell .fluentform,
.invi-rp-form-shell .frm-fluent-form,
.invi-rp-form-shell fieldset {
	width: 100% !important;
	max-width: none !important;

	height: auto;
	min-height: 0;

	margin: 0 !important;
}


.invi-rp-form-shell .frm-fluent-form {
	display: block;

	font-family: Inter, Arial, sans-serif;
}


.invi-rp-form-shell .frm-fluent-form > fieldset {
	padding: 0 !important;

	border: 0 !important;

	background: transparent !important;
	box-shadow: none !important;
}


.invi-rp-form-shell .ff-step-container {
	width: 100% !important;
	max-width: none !important;
}


.invi-rp-form-shell .ff-step-body {
	width: 100% !important;
	max-width: none !important;

	min-height: 0 !important;
}


/*
 * Nur der AKTIVE Fluent-Step bekommt natürliche Höhe.
 * Wir bauen KEIN eigenes Grid und greifen nicht
 * in versteckte Steps ein.
 */

.invi-rp-form-shell .fluentform-step.active {
	height: auto !important;
	min-height: 0 !important;

	overflow: visible !important;
}


/* ==========================================================
   09. NATIVER FLUENT STEP-INDIKATOR
   ========================================================== */

.invi-rp-form-shell .ff-step-header {
	width: 100%;

	margin: 0 0 38px !important;
}


.invi-rp-form-shell .ff-step-titles {
	display: grid !important;

	grid-template-columns:
		repeat(5, minmax(0, 1fr));

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;

	overflow: visible;
}


.invi-rp-form-shell .ff-step-titles li {
	position: relative;

	min-width: 0;

	padding:
		44px 8px 0 !important;

	color: #7B8495 !important;

	background: transparent !important;

	border: 0 !important;

	font-family: Inter, Arial, sans-serif;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;

	text-align: center;
}


/* Kreis */

.invi-rp-form-shell .ff-step-titles li::before {
	position: absolute !important;

	top: 0 !important;
	left: 50% !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 32px !important;
	height: 32px !important;

	padding: 0 !important;

	transform: translateX(-50%);

	border: 1px solid #CBD4E1 !important;
	border-radius: 999px !important;

	background: var(--rp-white) !important;
	color: #7B8495 !important;

	font-family: Inter, Arial, sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 32px !important;

	z-index: 2;
}


/* Verbindungslinie */

.invi-rp-form-shell .ff-step-titles li::after {
	position: absolute !important;

	top: 15px !important;
	left: calc(50% + 16px) !important;

	width: calc(100% - 32px) !important;
	height: 1px !important;

	border: 0 !important;

	background: #D9E0EA !important;

	z-index: 1;
}


.invi-rp-form-shell .ff-step-titles li:last-child::after {
	display: none !important;
}


/* aktiver Schritt */

.invi-rp-form-shell
.ff-step-titles li.ff_active,

.invi-rp-form-shell
.ff-step-titles li.active {
	color: var(--rp-blue) !important;
	font-weight: 700 !important;
}


.invi-rp-form-shell
.ff-step-titles li.ff_active::before,

.invi-rp-form-shell
.ff-step-titles li.active::before {
	border-color: var(--rp-blue) !important;

	background: var(--rp-blue) !important;
	color: var(--rp-white) !important;
}


/* erledigter Schritt */

.invi-rp-form-shell
.ff-step-titles li.ff_completed {
	color: var(--rp-blue) !important;
}


.invi-rp-form-shell
.ff-step-titles li.ff_completed::before {
	border-color: var(--rp-blue) !important;

	background: var(--rp-blue) !important;
	color: var(--rp-white) !important;
}


.invi-rp-form-shell
.ff-step-titles li.ff_completed::after {
	background: var(--rp-blue) !important;
}


/* ==========================================================
   10. FLUENT CONTAINER / FELDER
   ========================================================== */

.invi-rp-form-shell .ff-t-container {
	width: 100% !important;

	gap: 18px;
}


.invi-rp-form-shell .ff-t-cell {
	min-width: 0 !important;
}


.invi-rp-form-shell .ff-el-group {
	min-width: 0;

	margin-bottom: 20px;
}


.invi-rp-form-shell .ff-el-input--label {
	margin-bottom: 7px;
}


.invi-rp-form-shell .ff-el-input--label label {
	color: var(--rp-ink);

	font-family: Inter, Arial, sans-serif;
	font-size: 13px;
	font-weight: 650;
	line-height: 1.4;
}


.invi-rp-form-shell .ff-el-section-title,
.invi-rp-form-shell .ff-el-group h3 {
	margin: 0 0 8px !important;

	color: var(--rp-blue);

	font-family: "Source Serif Pro", Georgia, serif;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.1;
}


/* ==========================================================
   11. INPUTS
   ========================================================== */

.invi-rp-form-shell .ff-el-form-control {
	width: 100% !important;
	min-height: 50px;

	padding: 11px 14px !important;

	border: 1px solid #D5DDE9 !important;
	border-radius: 8px !important;

	background: var(--rp-white) !important;
	color: var(--rp-ink) !important;

	box-shadow: none !important;

	font-family: Inter, Arial, sans-serif !important;
	font-size: 14px !important;

	transition:
		border-color .18s ease,
		box-shadow .18s ease;
}


.invi-rp-form-shell textarea.ff-el-form-control {
	min-height: 120px;
	resize: vertical;
}


.invi-rp-form-shell .ff-el-form-control:focus {
	outline: none !important;

	border-color: var(--rp-blue) !important;

	box-shadow:
		0 0 0 3px
		rgba(6,3,141,.08) !important;
}


.invi-rp-form-shell input[type="radio"],
.invi-rp-form-shell input[type="checkbox"] {
	accent-color: var(--rp-blue);
}


.invi-rp-form-shell .ff-el-form-check {
	margin-bottom: 9px;
}


.invi-rp-form-shell .ff-el-form-check-label {
	color: var(--rp-ink) !important;

	font-family: Inter, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.5;
}


.invi-rp-form-shell .ff-el-help-message {
	margin-top: 6px;

	color: var(--rp-muted);

	font-size: 12px;
	line-height: 1.5;
}


/* ==========================================================
   12. DATEI-UPLOAD
   ========================================================== */

.invi-rp-form-shell .ff_file_upload_field_wrap {
	width: 100%;

	padding: 18px !important;

	border: 1px dashed #B8C5D7 !important;
	border-radius: 9px !important;

	background: #FAFBFD !important;
}


.invi-rp-form-shell .ff_file_upload_field_wrap:hover {
	border-color: var(--rp-blue) !important;

	background: var(--rp-soft-blue) !important;
}


/* ==========================================================
   13. BUTTONS
   ========================================================== */

.invi-rp-form-shell .step-nav {
	display: flex !important;

	align-items: center;
	justify-content: space-between;

	width: 100% !important;

	gap: 12px;

	margin-top: 26px !important;

	padding-top: 24px;

	border-top: 1px solid var(--rp-border);
}


.invi-rp-form-shell .step-nav button,
.invi-rp-form-shell .ff-btn-submit {
	float: none !important;

	min-height: 46px !important;

	margin: 0 !important;
	padding: 11px 20px !important;

	border-radius: 7px !important;

	box-shadow: none !important;

	font-family: Inter, Arial, sans-serif !important;
	font-size: 13px !important;
	font-weight: 650 !important;

	opacity: 1 !important;
}


.invi-rp-form-shell .ff-btn-next,
.invi-rp-form-shell .ff-btn-submit {
	border: 1px solid var(--rp-blue) !important;

	background: var(--rp-blue) !important;
	color: var(--rp-white) !important;
}


.invi-rp-form-shell .ff-btn-next:hover,
.invi-rp-form-shell .ff-btn-submit:hover {
	border-color: var(--rp-blue-dark) !important;

	background: var(--rp-blue-dark) !important;
}


.invi-rp-form-shell .ff-btn-prev {
	border: 1px solid #CAD3E0 !important;

	background: var(--rp-white) !important;
	color: var(--rp-blue) !important;
}


.invi-rp-form-shell .ff-btn-prev:hover {
	background: var(--rp-soft) !important;
}


/* ==========================================================
   14. VALIDIERUNG
   ========================================================== */

.invi-rp-form-shell .text-danger {
	margin-top: 5px;

	font-size: 12px !important;
	line-height: 1.4;
}


/* ==========================================================
   15. ERFOLG NACH ABSENDEN
   ========================================================== */

/*
 * Fluent setzt die Erfolgsmeldung direkt hinter das Formular.
 * Sobald sie existiert, zeigen wir innerhalb dieser Seite
 * ausschließlich die kompakte Erfolgsbox.
 */

.invi-rp-form-shell
.fluentform:has(.ff-message-success)
.frm-fluent-form {
	display: none !important;
}


.invi-rp-form-shell
.fluentform:has(.ff-message-success) {
	height: auto !important;
	min-height: 0 !important;
}


.invi-rp-form-card:has(.ff-message-success) {
	height: auto !important;
	min-height: 0 !important;
}


.invi-rp-form-shell .ff-message-success {
	position: relative;

	width: 100%;
	max-width: 760px;

	margin: 0 !important;
	padding: 22px 24px 22px 64px !important;

	border: 1px solid #CAD8EC !important;
	border-radius: 9px !important;

	background: #F4F8FF !important;
	color: var(--rp-ink) !important;

	box-shadow: none !important;

	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}


.invi-rp-form-shell .ff-message-success::before {
	content: "✓";

	position: absolute;

	top: 19px;
	left: 22px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 28px;
	height: 28px;

	border-radius: 999px;

	background: var(--rp-blue);
	color: var(--rp-white);

	font-family: Inter, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
}


/* ==========================================================
   16. DOKUMENTE & HINWEISE
   ========================================================== */

.invi-rp-doc-section {
	background: var(--rp-white);
}


.invi-rp-doc-head {
	width: 100% !important;
	max-width: 760px !important;

	margin: 0 0 38px !important;
}


.invi-rp-doc-head > p:last-child {
	margin: 15px 0 0 !important;

	color: var(--rp-text);

	font-family: Inter, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.65;
}


/*
 * Desktop groß: 4 Karten.
 * Normale Desktop-/Laptopbreite: 2 x 2.
 */

.invi-rp-doc-grid {
	display: grid !important;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 16px !important;

	align-items: stretch !important;
}


.invi-rp-doc-grid > .wp-block-column {
	min-width: 0 !important;

	width: auto !important;

	flex-basis: auto !important;
	flex-grow: 0 !important;
}


.invi-rp-doc-card {
	position: relative;

	display: flex !important;
	flex-direction: column !important;

	width: 100% !important;
	height: 100% !important;
	min-height: 235px;

	padding: 24px !important;

	overflow: hidden;

	border: 1px solid var(--rp-border);
	border-radius: 10px;

	background: var(--rp-white);

	transition:
		transform .18s ease,
		border-color .18s ease,
		box-shadow .18s ease;
}


.invi-rp-doc-card:hover {
	transform: translateY(-2px);

	border-color: #B9C7DB;

	box-shadow:
		0 12px 32px
		rgba(23,32,51,.06);
}


.invi-rp-doc-card::before {
	content: "";

	display: block;

	flex: 0 0 auto;

	width: 44px;
	height: 44px;

	margin-bottom: 27px;

	border-radius: 999px;

	background-color: var(--rp-soft-blue);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}


.invi-rp-doc-card--document::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7V3Z'/%3E%3Cpath d='M14 3v5h5M10 13h5M10 17h5'/%3E%3C/svg%3E");
}


.invi-rp-doc-card--location::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}


.invi-rp-doc-card--train::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='15' rx='3'/%3E%3Cpath d='M8 21l2-3M16 18l2 3M8 8h8M9 13h.01M15 13h.01'/%3E%3C/svg%3E");
}


.invi-rp-doc-card h3 {
	margin: 0 0 9px !important;

	color: var(--rp-blue);

	font-size: 22px;
	line-height: 1.08;

	overflow-wrap: anywhere;
	hyphens: auto;
}


.invi-rp-doc-card > p:not(.invi-rp-doc-link) {
	margin: 0 0 20px !important;

	color: var(--rp-muted);

	font-family: Inter, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.6;
}


.invi-rp-doc-link {
	margin: auto 0 0 !important;

	padding-top: 10px;
}


.invi-rp-doc-link a {
	display: inline-block;

	color: var(--rp-blue);

	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}


.invi-rp-doc-link a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}


/* ==========================================================
   17. MITTLERE DESKTOPBREITE
   ========================================================== */

@media (max-width: 1180px) {

	.invi-rp-doc-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	.invi-rp-doc-card {
		min-height: 215px;
	}

}


/* ==========================================================
   18. TABLET
   ========================================================== */

@media (max-width: 900px) {

	.invi-rp-intro-grid {
		grid-template-columns: 1fr;

		gap: 22px !important;
	}


	.invi-rp-info-grid {
		grid-template-columns: 1fr;
	}


	.invi-rp-info-card {
		min-height: 0;
	}


	.invi-rp-form-card {
		max-width: none !important;
	}


	.invi-rp-form-shell .ff-step-titles li {
		font-size: 10px !important;

		padding-left: 4px !important;
		padding-right: 4px !important;
	}

}


/* ==========================================================
   19. MOBILE
   ========================================================== */

@media (max-width: 700px) {

	.invi-rp-hero {
		min-height: 500px !important;
	}


	.invi-rp-hero .wp-block-cover__image-background {
		object-position: 68% center;
	}


	.invi-rp-hero .wp-block-cover__background {
		background:
			linear-gradient(
				180deg,
				rgba(247,249,253,.15) 0%,
				rgba(247,249,253,.62) 42%,
				rgba(247,249,253,.98) 100%
			) !important;
	}


	.invi-rp-hero-inner {
		width: calc(100% - 32px) !important;
		min-height: 500px;

		justify-content: flex-end;

		padding-bottom: 44px;
	}


	.invi-rp-hero-title {
		font-size: clamp(46px, 13vw, 62px);
	}


	.invi-rp-hero-text br {
		display: none;
	}


	.invi-rp-section {
		padding: 54px 16px !important;
	}


	.invi-rp-form-card {
		padding: 28px 18px !important;

		border-radius: 10px;
	}


	/*
	 * Der native Stepper bleibt horizontal.
	 * Bei kleinen Displays darf er seitlich scrollen,
	 * statt die Titel übereinander zu quetschen.
	 */

	.invi-rp-form-shell .ff-step-titles {
		grid-template-columns:
			repeat(5, minmax(105px, 1fr));

		overflow-x: auto;

		padding-bottom: 8px !important;

		scrollbar-width: thin;
	}


	.invi-rp-form-shell .ff-step-titles li {
		font-size: 10px !important;
	}


	.invi-rp-form-shell .ff-t-container {
		display: block !important;
	}


	.invi-rp-form-shell .ff-t-cell {
		width: 100% !important;

		margin-bottom: 0 !important;
	}


	.invi-rp-form-shell .step-nav {
		flex-direction: column;

		align-items: stretch;
	}


	.invi-rp-form-shell .step-nav button,
	.invi-rp-form-shell .ff-btn-submit {
		width: 100% !important;
	}


	.invi-rp-form-shell .ff-message-success {
		padding:
			56px 20px 20px !important;
	}


	.invi-rp-form-shell .ff-message-success::before {
		top: 18px;
		left: 20px;
	}


	.invi-rp-doc-grid {
		grid-template-columns: 1fr;
	}


	.invi-rp-doc-card {
		min-height: 0;
	}

}


/* ==========================================================
   20. GUTENBERG EDITOR
   ========================================================== */

.editor-styles-wrapper .invi-registration-page {
	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
}


.editor-styles-wrapper .invi-rp-container,
.editor-styles-wrapper .invi-rp-hero-inner {
	max-width: var(--rp-width) !important;
}


.editor-styles-wrapper .invi-rp-intro-grid,
.editor-styles-wrapper .invi-rp-info-grid,
.editor-styles-wrapper .invi-rp-doc-grid {
	width: 100% !important;
	max-width: none !important;
}