/*
 * CI Custom Registration — Front-end Styles  v1.2.0
 *
 * HOW TO CUSTOMISE
 * ----------------
 * Override CSS custom properties in your theme stylesheet:
 *
 *   .ci-form-wrap {
 *       --ci-color-primary: #1a3a6e;
 *       --ci-color-green:   #7ba600;
 *       --ci-max-width:     520px;
 *   }
 */

/* =====================================================================
   DESIGN TOKENS
   ===================================================================== */
.ci-form-wrap {
	--ci-color-primary:      #091a36;
	--ci-color-primary-dark: #0d2347;
	--ci-color-green:        #96c11f;
	--ci-color-red:          #d32f2f;

	--ci-color-text:         #333333;
	--ci-color-label:        #091a36;
	--ci-color-placeholder:  #aaaaaa;
	--ci-color-border:       #cccccc;
	--ci-color-border-focus: #091a36;
	--ci-color-bg:           #ffffff;
	--ci-color-btn-sec-bg:   #eeeeee;
	--ci-color-btn-sec-hover:#e0e0e0;

	--ci-max-width:          520px;
	--ci-input-height:       46px;
	--ci-input-radius:       3px;
	--ci-btn-radius:         4px;
	--ci-field-gap:          18px;
	--ci-btn-gap:            12px;

	--ci-font-base:          14px;
	--ci-font-label:         13px;
	--ci-title-size:         28px;
}

/* =====================================================================
   CENTERING — forces a fixed-width centered column regardless of theme
   ===================================================================== */
.ci-form-wrap {
	display: block !important;
	max-width: var(--ci-max-width) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* =====================================================================
   TITLE
   ===================================================================== */
.ci-form-wrap .ci-form-title {
	font-size: var(--ci-title-size) !important;
	font-weight: 700 !important;
	color: var(--ci-color-primary) !important;
	text-align: center !important;
	margin: 0 0 28px !important;
	line-height: 1.2 !important;
	border: none !important;
	padding: 0 !important;
	letter-spacing: -0.01em !important;
	text-align: left !important;

}

/* =====================================================================
   FIELD GROUPS
   ===================================================================== */
.ci-form-wrap .ci-field-group {
	margin-bottom: var(--ci-field-gap) !important;
	position: relative !important;
}

/* =====================================================================
   LABELS
   ===================================================================== */
.ci-form-wrap .ci-label {
	display: block !important;
	font-size: var(--ci-font-label) !important;
	font-weight: 600 !important;
	color: var(--ci-color-label) !important;
	margin-bottom: 6px !important;
	line-height: 1.4 !important;
}

/* Required asterisk in green */
.ci-form-wrap .ci-required::after {
	content: ' *' !important;
	color: var(--ci-color-green) !important;
	font-weight: 600 !important;
}

/* =====================================================================
   INPUT WRAPPER
   ===================================================================== */
.ci-form-wrap .ci-input-wrap {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
}

/* =====================================================================
   TEXT / EMAIL / PASSWORD INPUTS
   High-specificity selectors beat common theme resets.
   ===================================================================== */
.ci-form-wrap .ci-input,
.ci-form-wrap input.ci-input[type="text"],
.ci-form-wrap input.ci-input[type="email"],
.ci-form-wrap input.ci-input[type="password"],
.ci-form-wrap input.ci-input[type="url"] {
	width: 100% !important;
	height: var(--ci-input-height) !important;
	padding: 0 12px !important;          /* no badge — simple side padding */
	border: 1px solid var(--ci-color-border) !important;
	border-radius: var(--ci-input-radius) !important;
	font-size: var(--ci-font-base) !important;
	color: var(--ci-color-text) !important;
	background-color: var(--ci-color-bg) !important;
	box-sizing: border-box !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
}

.ci-form-wrap .ci-input::placeholder {
	color: var(--ci-color-placeholder) !important;
	opacity: 1 !important;
}

.ci-form-wrap .ci-input:focus,
.ci-form-wrap input.ci-input:focus {
	border-color: var(--ci-color-border-focus) !important;
	box-shadow: 0 0 0 2px rgba(9, 26, 54, 0.08) !important;
	outline: none !important;
}

/* Password fields need right padding for the eye toggle */
.ci-form-wrap .ci-has-toggle .ci-input,
.ci-form-wrap .ci-has-toggle input.ci-input {
	padding-right: 42px !important;
}

/* =====================================================================
   PASSWORD TOGGLE BUTTON (eye icon) — no badge alongside it now
   ===================================================================== */
.ci-form-wrap .ci-pw-toggle {
	position: absolute !important;
	right: 8px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	padding: 4px !important;
	margin: 0 !important;
	color: #888888 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	transition: color 0.18s ease !important;
	z-index: 3 !important;
	width: auto !important;
	height: auto !important;
	min-height: unset !important;
	border-radius: 0 !important;
	-webkit-tap-highlight-color: transparent !important;
}

.ci-form-wrap .ci-pw-toggle:hover,
.ci-form-wrap .ci-pw-toggle:focus-visible {
	color: var(--ci-color-primary) !important;
	outline: none !important;
	background: none !important;
}

.ci-form-wrap .ci-pw-toggle svg {
	display: block !important;
	pointer-events: none !important;
}

/* =====================================================================
   BUTTON ROW
   ===================================================================== */
.ci-form-wrap .ci-btn-row {
	display: flex !important;
	flex-direction: row !important;
	gap: var(--ci-btn-gap) !important;
	margin-top: 22px !important;
	align-items: stretch !important;
}

/* =====================================================================
   BUTTONS — heavily forced to override any theme
   ===================================================================== */
.ci-form-wrap .ci-btn,
.ci-form-wrap a.ci-btn,
.ci-form-wrap button.ci-btn {
	flex: 1 1 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: var(--ci-input-height) !important;
	min-height: var(--ci-input-height) !important;
	padding: 0 20px !important;
	border-radius: var(--ci-btn-radius) !important;
	font-size: var(--ci-font-base) !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	border: 1px solid transparent !important;
	box-shadow: none !important;
	transition:
		background-color 0.18s ease,
		border-color     0.18s ease,
		color            0.18s ease !important;
	box-sizing: border-box !important;
	line-height: 1 !important;
	text-align: center !important;
	-webkit-tap-highlight-color: transparent !important;
	vertical-align: middle !important;
}

/* Primary — dark navy */
.ci-form-wrap .ci-btn-primary,
.ci-form-wrap button.ci-btn-primary,
.ci-form-wrap a.ci-btn-primary {
	background-color: #091a36 !important;
	background: #091a36 !important;
	color: #ffffff !important;
	border-color: #091a36 !important;
}

.ci-form-wrap .ci-btn-primary:hover,
.ci-form-wrap button.ci-btn-primary:hover,
.ci-form-wrap a.ci-btn-primary:hover,
.ci-form-wrap .ci-btn-primary:focus-visible {
	background-color: #0d2347 !important;
	background: #0d2347 !important;
	border-color: #0d2347 !important;
	color: #ffffff !important;
	outline: none !important;
}

.ci-form-wrap .ci-btn-primary:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

/* Secondary — light grey */
.ci-form-wrap .ci-btn-secondary,
.ci-form-wrap button.ci-btn-secondary,
.ci-form-wrap a.ci-btn-secondary {
	background-color: #eeeeee !important;
	background: #eeeeee !important;
	color: #555555 !important;
	border-color: #dddddd !important;
}

.ci-form-wrap .ci-btn-secondary:hover,
.ci-form-wrap button.ci-btn-secondary:hover,
.ci-form-wrap a.ci-btn-secondary:hover,
.ci-form-wrap .ci-btn-secondary:focus-visible {
	background-color: #e0e0e0 !important;
	background: #e0e0e0 !important;
	color: #333333 !important;
	outline: none !important;
}

/* Standalone logout button — don't stretch to full flex width */
.ci-logout-btn {
	flex: 0 auto !important;
	display: inline-flex !important;
}

/* =====================================================================
   FORM LINKS  (Haben Sie Ihr Passwort vergessen?)
   ===================================================================== */
.ci-form-wrap .ci-form-links {
	text-align: center !important;
	margin-top: 16px !important;
}

.ci-form-wrap .ci-link,
.ci-form-wrap a.ci-link {
	font-size: var(--ci-font-label) !important;
	color: #888888 !important;
	text-decoration: none !important;
	transition: color 0.18s ease !important;
}

.ci-form-wrap .ci-link:hover,
.ci-form-wrap a.ci-link:hover {
	color: var(--ci-color-primary) !important;
	text-decoration: underline !important;
}

/* =====================================================================
   NOTICES
   ===================================================================== */
.ci-form-wrap .ci-notice {
	padding: 10px 14px !important;
	border-radius: var(--ci-input-radius) !important;
	margin-bottom: 18px !important;
	font-size: var(--ci-font-label) !important;
	line-height: 1.55 !important;
}

.ci-form-wrap .ci-error {
	background-color: #fdecea !important;
	border-left: 3px solid #d32f2f !important;
	color: #b71c1c !important;
}

.ci-form-wrap .ci-success {
	background-color: #f1f8e9 !important;
	border-left: 3px solid #96c11f !important;
	color: #33691e !important;
}

/* =====================================================================
   FORM DESCRIPTION (forgot password intro text)
   ===================================================================== */
.ci-form-wrap .ci-form-desc {
	font-size: var(--ci-font-label) !important;
	color: #666666 !important;
	text-align: center !important;
	margin-bottom: 22px !important;
	line-height: 1.6 !important;
	text-align : left !important;
}

/* =====================================================================
   ALREADY LOGGED IN
   ===================================================================== */
.ci-form-wrap.ci-logged-in {
	text-align: center !important;
}

.ci-form-wrap.ci-logged-in p {
	margin-bottom: 16px !important;
	font-size: var(--ci-font-base) !important;
	color: #555555 !important;
	line-height: 1.6 !important;
}


.page-id-489  header.entry-header .entry-title, .page-id-490  header.entry-header .entry-title  {
    display: none !important;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media ( max-width: 560px ) {
	.ci-form-wrap {
		padding: 0 4px !important;
	}

	.ci-form-wrap .ci-btn-row {
		flex-direction: column !important;
	}

	.ci-form-wrap .ci-btn,
	.ci-form-wrap a.ci-btn,
	.ci-form-wrap button.ci-btn {
		width: 100% !important;
		flex: 1 1 auto !important;
	}
}