/* ==========================================================================
   felogin (tx_felogin_pi1) — modernes, kontrastreiches Styling
   passend zum Such-/Detail-/Registrierungs-Layout
   Scope: .felogin-card  (neuer Wrapper im Template)
   ========================================================================== */

.felogin-card {
	--fel-primary: #65bc7b;
	--fel-primary-dark: #5c9d6c;
	--fel-accent: #d97706;
	--fel-error: #b91c1c;
	--fel-error-bg: #fee2e2;
	--fel-success: #047857;
	--fel-success-bg: #d1fae5;
	--fel-text: #0f172a;
	--fel-muted: #374151;
	--fel-border-soft: #9ca3af;
	--fel-bg-soft: #f9fafb;
	--fel-radius: 8px;
	--fel-shadow: 0 4px 14px rgba(0,0,0,.12);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--fel-text);
	max-width: 420px;
	margin: 1.5rem auto;
	background: #fff;
	border: 2px solid var(--fel-primary-dark);
	border-radius: var(--fel-radius);
	box-shadow: var(--fel-shadow);
	overflow: hidden;
}

.felogin-card .felogin-header {
	background: var(--fel-primary);
	color: #fff;
	padding: 1rem 1.5rem;
	font-weight: 700;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Status-Meldungen (Login fehlgeschlagen, etc.) */
.felogin-card .form-alert,
.felogin-card .alert {
	background: var(--fel-error-bg);
	color: var(--fel-error);
	border-left: 4px solid var(--fel-error);
	padding: .65rem 1rem;
	margin: 1rem 1rem 0;
	border-radius: 4px;
	font-size: .9rem;
	font-weight: 600;
}

.felogin-card .form-alert:empty,
.felogin-card .alert:empty {
	display: none;
}

/* Reset Bootstrap-artige .login-form Reste */
.felogin-card .login-form {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	max-width: none;
}

.felogin-card form {
	margin: 0;
}

.felogin-card fieldset {
	border: 0;
	padding: 1.5rem;
	margin: 0;
	background: transparent;
	box-shadow: none;
}

.felogin-card legend {
	display: block;
	width: 100%;
	background: transparent;
	color: var(--fel-primary-dark);
	padding: 0 0 .75rem;
	margin: 0 0 1rem;
	border: 0;
	border-bottom: 2px solid var(--fel-primary);
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: none;
	letter-spacing: 0;
}

/* Form-Gruppen mit Icon */
.felogin-card .form-group {
	position: relative;
	margin: 0 0 .85rem;
}

.felogin-card .form-group i.fa,
.felogin-card .form-group .fa {
	position: absolute;
	right: .85rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--fel-muted);
	pointer-events: none;
	font-size: 1rem;
}

/* Inputs */
.felogin-card input[type=text],
.felogin-card input[type=email],
.felogin-card input[type=password],
.felogin-card .form-control {
	width: 100%;
	padding: .7rem 2.5rem .7rem .9rem;
	border: 2px solid var(--fel-border-soft);
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--fel-text);
	background: #fff;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}

.felogin-card input[type=text]:focus,
.felogin-card input[type=email]:focus,
.felogin-card input[type=password]:focus,
.felogin-card .form-control:focus {
	outline: none;
	border-color: var(--fel-primary);
	box-shadow: 0 0 0 3px rgba(11,61,102,.2);
}

/* Permalogin / Checkboxen */
.felogin-card input[type=checkbox] {
	width: 1.1rem;
	height: 1.1rem;
	margin-right: .4rem;
	accent-color: var(--fel-primary);
	vertical-align: middle;
	cursor: pointer;
}

.felogin-card label {
	font-size: .92rem;
	font-weight: 600;
	color: var(--fel-muted);
	cursor: pointer;
}

/* Submit-Button */
.felogin-card input[type=submit],
.felogin-card .log-btn,
.felogin-card button {
	width: 100%;
	display: inline-block;
	background: var(--fel-primary);
	color: #fff;
	border: 0;
	padding: .8rem 1.5rem;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: .04em;
	box-shadow: 0 2px 6px rgba(11,61,102,.3);
	transition: background .15s, box-shadow .15s, transform .05s;
	margin-top: .5rem;
}

.felogin-card input[type=submit]:hover,
.felogin-card .log-btn:hover,
.felogin-card button:hover {
	background: var(--fel-primary-dark);
	box-shadow: 0 4px 10px rgba(11,61,102,.4);
}

.felogin-card input[type=submit]:active,
.felogin-card .log-btn:active,
.felogin-card button:active {
	transform: translateY(1px);
}

/* Links unter dem Formular (Passwort vergessen, zurück zum Login) */
.felogin-card p {
	margin: .85rem 1.5rem 0;
	font-size: .9rem;
	text-align: center;
}

.felogin-card p:last-child {
	margin-bottom: 1.25rem;
}

.felogin-card a {
	color: var(--fel-primary);
	font-weight: 600;
	text-decoration: underline;
}

.felogin-card a:hover {
	color: var(--fel-accent);
}

/* Versteckte Felder definitv unsichtbar */
.felogin-card .felogin-hidden {
	display: none;
}

/* Logout-/Status-Header */
.felogin-card h2,
.felogin-card h3 {
	color: var(--fel-primary-dark);
	margin: 1rem 1.5rem .25rem;
	font-size: 1.05rem;
}

/* ==========================================================================
   TYPO3 v11+ Extbase-Felogin — direkt am gerenderten <form> ansetzen
   (greift unabhängig vom .felogin-card-Wrapper)
   ========================================================================== */

form[action*="tx_felogin_login"] {
	    --fel-primary: #0b3d66;
    --fel-primary-dark: #072744;
    --fel-accent: #d97706;
    --fel-error: #b91c1c;
    --fel-text: #0f172a;
    --fel-muted: #374151;
    --fel-border-soft: #9ca3af;
    --fel-radius: 8px;
    --fel-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--fel-text);
    display: block;
    min-width: 420px;
    /* margin: 1.5rem auto; */
    background: #fff;
    border: 1px solid var(--fel-primary-dark);
    border-radius: var(--fel-radius);
    box-shadow: var(--fel-shadow);
    overflow: hidden;
    box-sizing: border-box;
	    margin-bottom: 13px;
}

form[action*="tx_felogin_login"] fieldset {
	border: 0;
	padding: 1.5rem;
	margin: 0;
	background: transparent;
}

form[action*="tx_felogin_login"] legend {
	display: block;
    width: 100%;
    background: #dedede;
    color: #fff;
    padding: .75rem 1rem;
    margin: -1.5rem -1.5rem 1.25rem;
    border: 0;
    border-radius: 0;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-sizing: border-box;
    width: calc(100% + 3rem);
}

form[action*="tx_felogin_login"] fieldset > div {
	margin-bottom: .9rem;
}

form[action*="tx_felogin_login"] label {
	display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fel-primary-dark);
    /* text-transform: uppercase; */
    letter-spacing: .04em;
    margin-bottom: .35rem;
    cursor: pointer;
}

form[action*="tx_felogin_login"] input[type=text],
form[action*="tx_felogin_login"] input[type=email],
form[action*="tx_felogin_login"] input[type=password] {
	display: block;
	width: 100%;
	padding: 0.6rem 0.45rem;
	border: 2px solid var(--fel-border-soft);
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--fel-text);
	background: #fff;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
	margin-top: .35rem;
}

form[action*="tx_felogin_login"] input[type=text]:focus,
form[action*="tx_felogin_login"] input[type=email]:focus,
form[action*="tx_felogin_login"] input[type=password]:focus {
	outline: none;
	border-color: var(--fel-primary);
	box-shadow: 0 0 0 3px rgba(11,61,102,.2);
}

form[action*="tx_felogin_login"] input[type=checkbox] {
	width: 1.1rem;
	height: 1.1rem;
	margin-right: .4rem;
	accent-color: var(--fel-primary);
	vertical-align: middle;
	cursor: pointer;
}

form[action*="tx_felogin_login"] input[type=submit] {
	width: 100%;
	background: #198754;
	color: #fff;
	border: 0;
	padding: .8rem 1.5rem;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: .04em;
	box-shadow: 0 2px 6px rgba(11,61,102,.3);
	transition: background .15s, box-shadow .15s, transform .05s;
	margin-top: .5rem;
}

form[action*="tx_felogin_login"] input[type=submit]:hover {
	background: var(--fel-primary-dark);
	box-shadow: 0 4px 10px rgba(11,61,102,.4);
}

form[action*="tx_felogin_login"] input[type=submit]:active {
	transform: translateY(1px);
}

form[action*="tx_felogin_login"] .felogin-hidden {
	display: none;
}

/* Status-/Fehlermeldungen, die TYPO3 außerhalb des Forms rendert */
.typo3-messages,
.typo3-message,
.alert-danger,
.alert-success,
.alert-warning {
	max-width: 420px;
	margin: 1rem auto;
	padding: .75rem 1rem;
	border-radius: 6px;
	font-size: .92rem;
	font-weight: 600;
}

.alert-danger { background:#fee2e2; color:#b91c1c; border-left:4px solid #b91c1c; }
.alert-success { background:#d1fae5; color:#047857; border-left:4px solid #047857; }
.alert-warning { background:#fef3c7; color:#92400e; border-left:4px solid #d97706; }


.frame-type-felogin_login h3 {
	display: none;
}

.frame-type-felogin_login a {
	font-size: 16px;
	
	text-decoration: none;
	color:#000;
}