/* BeeSite.dk — Forside 2.0 (kanban o#140).
   Login-kolonnen: hvide kort med overskrift INDE i kassen (klar til
   baggrundsgrafik i bjælken) og rigtige boxede formfelter med ikoner.
   BeeSite-accent: orange (#e8951c). */

* { margin: 0; padding: 0; }

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
}

.fs-wrapper {
	display: flex;
	min-height: 100vh;
}

/* ── Venstre: CMS-indhold ─────────────────────────────────────────────────── */

.fs-indhold {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
	padding: 40px;
	box-sizing: border-box;
}

.fs-indhold-inder {
	max-width: 720px;
	width: 100%;
	font-size: 16px;
	line-height: 1.6;
	color: #666666;
}

.fs-indhold-inder h1 { font-size: 34px; color: #483A2D; margin: 0 0 16px; }
.fs-indhold-inder h2 { font-size: 24px; color: #483A2D; margin: 22px 0 10px; }
.fs-indhold-inder p  { margin: 0 0 14px; }
.fs-indhold-inder a  { color: #b8860b; }
.fs-indhold-inder img { max-width: 100%; height: auto; }

.fs-cms-blok { margin-bottom: 18px; }

/* ── Højre: login-kolonne (svagt grå bjælke, hvide kort ovenpå) ───────────── */

.fs-login {
	flex: 0 0 460px;
	width: 460px;
	box-sizing: border-box;
	padding: 48px 44px;

	background-color: #f6f7f9;         /* svag grå så de hvide kort træder frem
	                                      (her kan der senere lægges baggrundsgrafik) */
	border-left: 1px solid #e6e8eb;
}

/* ── Logo: HTML/CSS-wordmark (samme klasser som logo.html — juster dér og
      kopiér herover, så preview og forside altid følges ad) ──────────────── */

.beesite-logo {
	display: inline-block;
	color: #3f4247;
	line-height: 1;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.beesite-wordmark {
	position: relative;
	display: inline-block;
	font-size: 55px;      /* +20% oveni (42 -> 46 -> 55px) efter Bees ønske */
	font-weight: 300;
	letter-spacing: -2.2px;
	margin-left:-5px;
}

.beesite-wordmark strong { font-weight: 390; }

.beesite-registered {
	position: relative;
	top: -1.08em;
	margin-left: 2px;
	font-size: 0.38em;
	font-weight: 420;
	letter-spacing: 0;
	display: inline-block;
}

.beesite-tagline {
	margin-top: 7px;
	font-size: 18px;      /* fulgt med wordmarket op (55px-niveau, som version 1) */
	font-weight: 300;
	letter-spacing: 0.15px;
	color: #686d73;
	padding-left: 30px;
}

.fs-logo { margin-bottom: 36px; }

/* Fallback-logoet i venstre kolonne må gerne fylde mere (58px som version 1). */
.fs-fallback-logo { margin-bottom: 26px; }
.fs-fallback-logo .beesite-wordmark { font-size: 58px; letter-spacing: -2.3px; }
.fs-fallback-logo .beesite-tagline  { margin-top: 8px; font-size: 18px; }

.fs-login-inder {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* ── Kort med overskrift inde i kassen ────────────────────────────────────── */
.fs-boks {
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #ffffff;
	padding: 22px 24px 24px;
	margin: 0 0 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.fs-boks-header {
	font-size: 21px;
	font-weight: bold;
	color: #e8951c;
	margin: 0 0 16px;
}

.fs-fejl { color: #c0392b; font-size: 13.5px; margin: 0 0 14px; line-height: 1.5; }

/* Label over feltet */
.fs-label { display: block; font-size: 13px; color: #555555; margin: 0 0 6px; }

/* Formfelt-wrapper (til ikon inde i feltet) */
.fs-felt { position: relative; margin-bottom: 16px; }
.fs-felt-ikon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #b0b0b0;
	font-size: 14px;
	pointer-events: none;
}

/* Boxede inputs: ramme + runde hjørner (Bees ønske — ikke streg-underlinjer) */
.fs-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #dcdfe3;
	border-radius: 8px;
	background: #ffffff;
	padding: 12px 14px;
	font-size: 15px;
	color: #333333;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.fs-input-ikon { padding-left: 40px; }
.fs-input-oeje { padding-right: 40px; }
.fs-input:focus {
	outline: none;
	border-color: #e8951c;
	box-shadow: 0 0 0 3px rgba(232, 149, 28, 0.15);
}
.fs-input::placeholder { color: #b0b0b0; }

/* Autofill: tving font/farve så Chrome ikke render'er udfyldte felter for småt. */
.fs-input:-webkit-autofill,
.fs-input:-webkit-autofill:hover,
.fs-input:-webkit-autofill:focus,
.fs-input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	box-shadow: 0 0 0 1000px #ffffff inset !important;
	-webkit-text-fill-color: #333333 !important;
	caret-color: #333333;
	font-size: 15px !important;
	font-family: Arial, Helvetica, sans-serif !important;
}

.fs-kode-oeje {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	cursor: pointer;
	color: #b0b0b0;
	font-size: 15px;
	padding: 0;
}
.fs-kode-oeje:hover { color: #e8951c; }

/* Husk mig + glemt-link på samme linje */
.fs-login-bund {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 4px 0 18px;
}
.fs-husk {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #555555;
	font-size: 14px;
	cursor: pointer;
	user-select: none;
}
.fs-husk input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: #e8951c; }

.fs-glemt-link { color: #888888; font-size: 14px; text-decoration: none; }
.fs-glemt-link:hover { color: #e8951c; text-decoration: underline; }

/* Log ind: fuld bredde, orange, hvid tekst */
.fs-submit {
	width: 100%;
	background: #e8951c;
	color: #ffffff;
	border: 0;
	border-radius: 8px;
	padding: 13px;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.15s;
}
.fs-submit:hover { background: #d1820f; }

.fs-glemt-info { color: #888888; font-size: 14px; line-height: 1.5; margin: 0 0 16px; }

/* ── Nyheder + "Vidste du at ..." under login ─────────────────────────────── */

.fs-sektion { margin-top: 0; }   /* afstanden styres af .fs-boks margin-bottom */

.fs-nyhed { padding: 0 0 13px; font-size: 14px; line-height: 1.5; color: #777777; }
.fs-nyhed + .fs-nyhed { padding-top: 13px; border-top: 1px solid #f0f0f0; }
.fs-nyhed:last-child { padding-bottom: 0; }
.fs-nyhed-dato { display: block; font-size: 12px; color: #aaaaaa; }
.fs-nyhed strong { display: block; color: #333333; font-size: 14.5px; margin: 2px 0; }
.fs-nyhed p { margin: 3px 0 0; }

/* Vidste du at: pære i orange cirkel + tekst */
.fs-vidste { display: flex; align-items: flex-start; gap: 14px; }
.fs-vidste-ikon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fbe4c4;
	color: #e8951c;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
.fs-tip { font-size: 14px; line-height: 1.6; color: #777777; margin: 0; }

/* ── Mobil: stak kolonnerne, login øverst (som e-siness) ──────────────────── */

@media (max-width: 700px) {
	.fs-wrapper { flex-direction: column; }
	.fs-login   { flex: none; width: 100%; order: 1; border-left: 0; border-bottom: 1px solid #e6e8eb; }
	.fs-indhold { order: 2; }
}