/* ==================================================================
   lindwerk.css – CMS LiNDWERK
   ------------------------------------------------------------------
   Teil 1: Login (neu, Glass Design)  – ersetzt den alten Login-Block
   Teil 2: CMS und Editor             – unverändert übernommen
   ================================================================== */

/* ==================================================================
   TEIL 1 – LOGIN
   ================================================================== */

/* CSS Style login.php – Glass Design (LiNDWERK)
   ------------------------------------------------------------------
   Überschreibt die Basis-Styles des CMS. Es wurde kein HTML/PHP
   geändert – alle Selektoren greifen auf die vorhandenen Klassen
   (body.login, div.loginLogo, div.loginFields, .loginTitle,
   p.loginInfo, p.loginName, p.loginPass, input.loginButton,
   p.loginCopyright). !important ist nötig, weil die Basis-CSS des
   CMS die Felder absolut positioniert.
   ------------------------------------------------------------------ */

body.login {
	--lw-green: #82cd27;
	--lw-green-dark: #3f8f16;
	--lw-text: #f4f6ff;
	--lw-muted: rgba(244, 246, 255, 0.62);
	--lw-field: rgba(255, 255, 255, 0.06);
	--lw-field-border: rgba(255, 255, 255, 0.16);

	margin: 0;
	min-height: 100vh;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--lw-text);
	background-color: #0b1020 !important;
	background-image:
		radial-gradient(460px 460px at 12% 8%, rgba(130, 205, 39, 0.55), transparent 70%),
		radial-gradient(420px 420px at 88% 92%, rgba(31, 122, 92, 0.55), transparent 70%),
		radial-gradient(320px 320px at 65% 55%, rgba(74, 90, 138, 0.45), transparent 70%),
		radial-gradient(120% 120% at 0% 0%, #141a33 0%, #0b1020 60%) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-attachment: fixed !important;
	-webkit-font-smoothing: antialiased;
}

/* Kopfbalken des CMS auf der Loginseite ausblenden */
body.login div.topline { display: none !important; }

/* Logo-Container wird nicht gebraucht – das Logo sitzt als
   Hintergrundbild oben in der Glaskarte (siehe div.loginFields) */
body.login div.loginLogo { display: none !important; }

/* ---------- Glaskarte ---------- */
body.login div.loginFields {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%);
	width: 420px !important;
	max-width: calc(100% - 32px);
	height: auto !important;
	min-height: 0 !important;
	box-sizing: border-box;
	padding: 170px 36px 36px !important;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 24px;
	background-color: rgba(255, 255, 255, 0.08);
	background-image: url(images/lindwerk-logo-hell.svg);
	background-repeat: no-repeat;
	background-position: center 40px;
	background-size: 190px auto;
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	backdrop-filter: blur(24px) saturate(160%);
	box-shadow:
		0 30px 60px -20px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
	animation: lwRise 0.6s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes lwRise {
	from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Falls der Browser kein backdrop-filter kann */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.login div.loginFields { background-color: rgba(20, 26, 51, 0.92); }
}

/* ---------- Überschrift und Untertitel ---------- */
body.login .loginTitle {
	display: none !important;
	margin: 0 0 6px 0 !important;
	font-family: AvantGarde, system-ui, sans-serif;
	font-size: 30px;
	font-weight: 200;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	color: #ffffff;
}

body.login p.loginInfo {
	display: none !important;
	margin: 28px 0 6px 0 !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	color: var(--lw-muted);
}

/* ---------- Feldzeilen ---------- */
body.login p.loginName,
body.login p.loginPass {
	display: block;
	margin: 18 0 9px 0 !important;
	padding: 0 !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--lw-muted);
}

body.login p.loginName br,
body.login p.loginPass br { display: none; }

/* ---------- Eingabefelder ---------- */
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"] {
	display: block;
	width: 100% !important;
	height: 52px !important;
	margin: 8px 0 0 0 !important;
	padding: 0 16px !important;
	box-sizing: border-box !important;
	font-family: inherit;
	font-size: 16px;
	color: var(--lw-text);
	background: var(--lw-field) !important;
	border: 1px solid var(--lw-field-border) !important;
	border-radius: 14px !important;
	outline: none;
	transition: border-color .2s, background .2s, box-shadow .2s;
}

body.login input[type="text"]::placeholder,
body.login input[type="email"]::placeholder,
body.login input[type="password"]::placeholder { color: rgba(244, 246, 255, 0.35); }

body.login input[type="text"]:hover,
body.login input[type="email"]:hover,
body.login input[type="password"]:hover { border-color: rgba(255, 255, 255, 0.28) !important; }

body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus {
	border-color: #9bdc4a !important;
	background: rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 0 0 4px rgba(130, 205, 39, 0.2);
}

/* Autofill (Chrome, Safari) an die Glasoptik anpassen */
body.login input:-webkit-autofill,
body.login input:-webkit-autofill:hover,
body.login input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--lw-text);
	-webkit-box-shadow: 0 0 0 1000px #1c2340 inset;
	caret-color: var(--lw-text);
}

body.login input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	accent-color: var(--lw-green);
	vertical-align: -3px;
}

/* ---------- Button ---------- */
body.login input.loginButton,
body.login input[type="submit"],
body.login button[type="submit"] {
	position: static !important;
	display: block;
	width: 100% !important;
	height: 54px !important;
	margin: 26px 0 0 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 16px !important;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	background: linear-gradient(135deg, var(--lw-green), var(--lw-green-dark)) !important;
	background-size: 160% 160% !important;
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: 0 12px 30px -10px rgba(130, 205, 39, 0.55);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform .15s, box-shadow .2s, background-position .5s;
}

body.login input.loginButton:hover,
body.login input[type="submit"]:hover,
body.login button[type="submit"]:hover {
	background-position: 100% 50% !important;
	box-shadow: 0 16px 36px -10px rgba(130, 205, 39, 0.7);
	transform: translateY(-1px);
}

body.login input.loginButton:active,
body.login input[type="submit"]:active,
body.login button[type="submit"]:active { transform: translateY(1px); }

body.login input.loginButton:focus-visible,
body.login input[type="submit"]:focus-visible,
body.login button[type="submit"]:focus-visible {
	outline: 3px solid #9bdc4a;
	outline-offset: 3px;
}

/* ---------- Links in der Karte (z. B. Passwort vergessen) ---------- */
body.login div.loginFields a {
	text-align: end;
	display: inline-block;
	margin-top: 18px;
	font-size: 14px;
	color: var(--lw-text);
	text-decoration: none;
	opacity: 0.8;
	border-bottom: 1px solid transparent;
	transition: opacity .2s, border-color .2s;
}
body.login div.loginFields a:hover { opacity: 1; border-bottom-color: currentColor; }

/* ---------- Meldungen ---------- */
body.login div.alert,
body.login .error,
body.login .loginError {
	margin: 0 0 20px 0;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.45;
	color: #ffd5da !important;
	background-color: rgba(255, 122, 138, 0.12) !important;
	border: 1px solid rgba(255, 122, 138, 0.35);
	border-radius: 12px;
}

/* ---------- Fußzeile ----------
   Copyright links, Impressum rechts – beide auf gleicher Höhe.
   Beide Elemente sind unten fixiert und haben dieselbe Schriftgröße,
   Zeilenhöhe und denselben unteren Abstand. Dadurch stehen sie auf
   einer Linie, egal ob span.impressum innerhalb von p.loginCopyright
   steht oder daneben. */
body.login p.loginCopyright,
body.login span.impressum {
	position: fixed !important;
	bottom: 0 !important;
	top: auto !important;
	margin: 0 !important;
	padding: 18px 24px !important;
	box-sizing: border-box;
	font-size: 13px !important;
	line-height: 20px !important;
	color: var(--lw-muted) !important;
	float: none !important;
}

body.login p.loginCopyright {
	left: 0 !important;
	right: auto !important;
	text-align: left;
}

body.login span.impressum {
	left: auto !important;
	right: 0 !important;
	display: block;
	text-align: right;
}

body.login p.loginCopyright a,
body.login span.impressum a {
	color: inherit;
	text-decoration: none;
}
body.login p.loginCopyright a:hover,
body.login span.impressum a:hover { color: var(--lw-green); }

/* ---------- Kleine Bildschirme ----------
   Die Karte füllt den kompletten Viewport: keine Ränder, keine
   Rundungen. Unten bleibt Platz für die Fußzeile. */
@media (max-width: 600px) {
	body.login div.loginFields {
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100% !important;
		max-width: none;
		height: 100% !important;
		height: 100dvh !important;
		transform: none;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow-y: auto;
		padding: 200px 24px 80px !important;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background-size: 210px auto;
		background-position: center 56px;
	}

	@keyframes lwRiseMobile {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	body.login div.loginFields { animation-name: lwRiseMobile; }

	body.login input[type="text"],
	body.login input[type="email"],
	body.login input[type="password"] { height: 56px !important; }

	body.login input.loginButton,
	body.login input[type="submit"],
	body.login button[type="submit"] { height: 58px !important; }

	body.login .loginTitle { font-size: 26px; }

	/* Fußzeile über der Karte */
	body.login p.loginCopyright,
	body.login span.impressum {
		z-index: 2;
		padding: 16px 20px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.login div.loginFields { animation: none; }
	body.login input.loginButton,
	body.login input[type="submit"] { transition: none; }
}

/* Ende CSS Style login.php */

/* ==================================================================
   TEIL 2 – CMS UND EDITOR (unverändert aus der bisherigen Datei)
   ================================================================== */

/* CSS Style CMS */
body.start {
	background: rgb(247,247,247); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(247,247,247,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(247,247,247,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(247,247,247,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(247,247,247,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(247,247,247,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
    background-image: url(images/bilddatenbank2.jpg);
    background-position: right bottom;
    background-repeat: no-repeat; 
}
body.start div.topline {
	width: 100%;
    top: 10px;
    background-color: #58585a; 
}
body.control {
	background-color: #58585a;
	color: white; 
}
body.start p.selection {
	color: #333333;
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px; 
	-khtml-border-radius: 4px; 
	border-radius: 4px;
	margin-bottom: 17px;
	padding: 2px 4px 2px 4px;
	border: solid 1px silver;
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
}
body.start h1 {
	font-family: AvantGarde;
	font-size: 32px;
	color: #9ac00a;
	font-weight: 200;
	text-transform: uppercase;
}
body.start h2 {
	font-family: Mathilde;
	font-size: 36px;
	color: #58585a;
	font-weight: normal;
}
table.mOTypeHead,
tr.mOListHead {
	background-color: #58585a;
	background-image: none;
	color: white;
	border-bottom: solid 1px white; 
}
table.mOList tr.mOListItemH {
    background-color: #8ec934;
}
tr.mOListHead td {
	background-color: #58585a;
}
span.listFromTo {
    color: white;
}
body.cmshead {
    background-color: #f7f7f7;
    background-image: url(images/Wortbildmarke.png), url(images/header_grey.jpg) ;
    background-repeat: no-repeat, repeat-x;
    background-position: 20px 12px, top left ;
}
div.cmsheadlogo {
    background-image: none;
}
div.statusline {
    background-color: #58585a;
}
.menu {
    background-color: #8ec934;
}
td.mOTypeFootRight {
	color: black;
}
td.mOListSearch, td.mOListSearchControls {
    background-color: #8ec934;
}
td.mOListSearchControls .searchButton {
    background-color: #58585a;	
}
body.search {
    background-color: #8ec934;
}
body.search .extSearchSubmit {
    background-color: #58585a;	
}

/* Ende CSS Style CMS */


/* CSS Style CMS-Editor */
div.editGroup, div.alert {
    background-color: rgb(184, 207, 239);
}
div.sectionBar {
    height: 20px;
    padding-left: 0px;
    background-color: #58585a;
    background-image: url("images/greensphere.gif");
    background-position: 3px;
    color: white;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-repeat: no-repeat;
}
tr.mOListItemH td.mOListBlock {
    background-color: #8ec934;
    color: black;
}
div.groupLine .groupSelected {
    background-color: #8ec934;
}
div.mOListBlock {
    border-bottom: 1px solid rgb(88, 88, 90)!important;
}
tr.mOListItemRoH {
    background-color: orange;
}
div.mOListImage {
	background-color: white;
    border: 1px solid #d2d2d2 !important;
}

/* Editor */
div.editGroup, div.alert {
    background-color: #e6e6e6;
}

div.editGroupNameLoc {
    border-radius: 5px 5px 0px 0px;
	color: #3f3f3f;
	background-color: rgb(142, 201, 52);
	margin-bottom: 10px;
	padding-left: 5px;
}
td.mOTypeFootRight .listFromTo {
	color: #58585a;
}
.menu {
	color: #1f1f1f;
}
div.abort, div.preview, div.save {
    background-color: rgb(230, 230, 230);
    background-image: none;
    border-color: White Silver Silver White;
}
div.headline {
    background-color: #8ec934;
    color: black;
}
table.conditions tr th {
    background-color: #d2d2d2;
}

/* Ende CMS-Editor */



/* Font-Family der Schriftart wird festgelegt */

@font-face {
	font-family: Mathilde;
	font-style: normal;
	font-weight: normal;
	src: url('fonts/mathilde.eot');
	src: local('Mathilde'), 
		url('fonts/mathilde.eot#') format('eot'), 
		url('fonts/mathilde.svg#Mathilde') format('svg'),
		url('fonts/mathilde.woff') format('woff');
}
@font-face {
	font-family: AvantGarde; 
	font-style: normal;
	font-weight: normal;
	src: local('AvantGarde'), 
		url('fonts/DINWeb.eot#') format('eot'), 
		url('fonts/DINWeb.woff') format('woff');
}

/* Mini-Preview eines Verkaufsangebotes */
div.refPreview[refObject=shopCharacteristic] div.miniPreview {  } 
div.refPreview[refObject=shopCharacteristic] div.miniPreview div[attr] { display: inline-block; }
div.refPreview[refObject=shopCharacteristic] div.miniPreview div[attr=group_id] { width: 110px; }
div.refPreview[refObject=shopCharacteristic] div.miniPreview div[attr=name] { width: 670px; }