﻿
:root {
	--brand-color1: #1592cf;
    --brand-color2: #ed7000;
    --brand-color3: #7d7d7d;
    --brand-color4: #eaeaea;
    --color-light: #ffffff;
    --color-darkest: #000000;
	--color-success: #028802;
    --primary: #1592cf;
	--primary-hover: #08769b;
	--primary-focus: rgba(16, 149, 193, 0.125);
	--primary-inverse: #fff;
	--invalid: #c62828;
	--gap-default: 1rem;
	--flex-wrap: wrap;
    --card-box-shadow: 0 2px 10px rgba(27, 40, 50, 0.226) !important;
	--border-radius: 3px;
    --border-width: 2px; /* Pico Error Correction for Chrome + FF Windows */
	--transition:0.2s ease-in-out;
    --font-family: "PT Sans Meta Nav",system-ui,-apple-system,"Segoe UI","Roboto","Ubuntu","Cantarell","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-narrow: "PT Sans Narrow",-apple-system,"Segoe UI","Roboto","Ubuntu","Cantarell","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; 
    --line-height: 1.5;
	--button-box-shadow:0 0 0 rgba(0,0,0,0);
	
	--primary-hover: #08769b;
	--spacing:1rem;
	--color: #415462;
	--font-size:18px;
	--font-weight:400;
	--font-style:normal;
	--outline-width:3px;

	--form-element-spacing-vertical:0.75rem;
	--form-element-focus-color:rgba(16, 149, 193, 0.125);

	--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
	--text-decoration:none;
	  
	 --icon-eye-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather-eye'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
	--icon-eye-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather-eye'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
	--icon-eye-off-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather-eye-off'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'%3E%3C/path%3E%3Cline x1='1' y1='1' x2='23' y2='23'%3E%3C/line%3E%3C/svg%3E");
	--icon-eye-off-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather-eye-off'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'%3E%3C/path%3E%3Cline x1='1' y1='1' x2='23' y2='23'%3E%3C/line%3E%3C/svg%3E");
	--icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather-download'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
}

:root:not([data-theme=dark]),
[data-theme=light] {
  color-scheme:light;
  --background-color:#fff;
  --color:#415462;
  --h1-color:#1b2832;
  --h2-color:#24333e;
  --h3-color:#2c3d49;
  --h4-color:#374956;
  --h5-color:#415462;
  --h6-color:#4d606d;
  --muted-color:#73828c;
  --muted-border-color:#edf0f3;
  --primary:#1592cf;
  --primary-hover:#08769b;
  --primary-focus:rgba(16, 149, 193, 0.125);
  --primary-inverse:#fff;
  --secondary:#596b78;
  --secondary-hover:#415462;
  --secondary-focus:rgba(89, 107, 120, 0.125);
  --secondary-inverse:#fff;
  --contrast:#1b2832;
  --contrast-hover:#000;
  --contrast-focus:rgba(89, 107, 120, 0.125);
  --contrast-inverse:#fff;
  --mark-background-color:#fff2ca;
  --mark-color:#543a26;
  --ins-color:#388e3c;
  --del-color:#c62828;
  --blockquote-border-color:var(--muted-border-color);
  --blockquote-footer-color:var(--muted-color);
  --button-box-shadow:0 0 0 rgba(0, 0, 0, 0);
  --button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);
  --form-element-background-color:transparent;
  --form-element-border-color:#a2afb9;
  --form-element-color:var(--color);
  --form-element-placeholder-color:var(--muted-color);
  --form-element-active-background-color:transparent;
  --form-element-active-border-color:var(--primary);
  --form-element-focus-color:var(--primary-focus);
  --form-element-disabled-background-color:#d5dce2;
  --form-element-disabled-border-color:#a2afb9;
  --form-element-disabled-opacity:0.5;
  --form-element-invalid-border-color:#c62828;
  --form-element-invalid-active-border-color:#b71c1c;
  --form-element-valid-border-color:#388e3c;
  --form-element-valid-active-border-color:#2e7d32;
  --switch-background-color:#bbc6ce;
  --switch-color:var(--primary-inverse);
  --switch-checked-background-color:var(--primary);
  --range-border-color:#d5dce2;
  --range-active-border-color:#bbc6ce;
  --range-thumb-border-color:var(--background-color);
  --range-thumb-color:var(--secondary);
  --range-thumb-hover-color:var(--secondary-hover);
  --range-thumb-active-color:var(--primary);
  --table-border-color:var(--muted-border-color);
  --table-row-stripped-background-color:#f6f8f9;
  --code-background-color:#edf0f3;
  --code-color:var(--muted-color);
  --code-kbd-background-color:var(--contrast);
  --code-kbd-color:var(--contrast-inverse);
  --code-tag-color:#b34d80;
  --code-property-color:#3d888f;
  --code-value-color:#998866;
  --code-comment-color:#a2afb9;
  --accordion-border-color:var(--muted-border-color);
  --accordion-close-summary-color:var(--color);
  --accordion-open-summary-color:var(--muted-color);
  --card-background-color:var(--background-color);
  --card-border-color:var(--muted-border-color);
  --card-box-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04),0 0.125rem 2rem rgba(27, 40, 50, 0.08),0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
  --card-sectionning-background-color:#fbfbfc;
  --progress-background-color:#d5dce2;
  --progress-color:var(--primary);
  --loading-spinner-opacity:0.5;
  --tooltip-background-color:var(--contrast);
  --tooltip-color:var(--contrast-inverse);
  --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  --icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  --icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  --icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")
}
@media only screen and (prefers-color-scheme:dark) {
  :root:not([data-theme=light]) {
    color-scheme:dark;
    --background-color:#11191f;
    --color:#bbc6ce;
    --h1-color:#edf0f3;
    --h2-color:#e1e6eb;
    --h3-color:#d5dce2;
    --h4-color:#c8d1d8;
    --h5-color:#bbc6ce;
    --h6-color:#afbbc4;
    --muted-color:#73828c;
    --muted-border-color:#1f2d38;
    --primary:#1592cf;
    --primary-hover:#1ab3e6;
    --primary-focus:rgba(16, 149, 193, 0.25);
    --primary-inverse:#fff;
    --secondary:#596b78;
    --secondary-hover:#73828c;
    --secondary-focus:rgba(115, 130, 140, 0.25);
    --secondary-inverse:#fff;
    --contrast:#edf0f3;
    --contrast-hover:#fff;
    --contrast-focus:rgba(115, 130, 140, 0.25);
    --contrast-inverse:#000;
    --mark-background-color:#d1c284;
    --mark-color:#11191f;
    --ins-color:#388e3c;
    --del-color:#c62828;
    --blockquote-border-color:var(--muted-border-color);
    --blockquote-footer-color:var(--muted-color);
    --button-box-shadow:0 0 0 rgba(0, 0, 0, 0);
    --button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);
    --form-element-background-color:#11191f;
    --form-element-border-color:#374956;
    --form-element-color:var(--color);
    --form-element-placeholder-color:var(--muted-color);
    --form-element-active-background-color:var(--form-element-background-color);
    --form-element-active-border-color:var(--primary);
    --form-element-focus-color:var(--primary-focus);
    --form-element-disabled-background-color:#2c3d49;
    --form-element-disabled-border-color:#415462;
    --form-element-disabled-opacity:0.5;
    --form-element-invalid-border-color:#b71c1c;
    --form-element-invalid-active-border-color:#c62828;
    --form-element-valid-border-color:#2e7d32;
    --form-element-valid-active-border-color:#388e3c;
    --switch-background-color:#374956;
    --switch-color:var(--primary-inverse);
    --switch-checked-background-color:var(--primary);
    --range-border-color:#24333e;
    --range-active-border-color:#2c3d49;
    --range-thumb-border-color:var(--background-color);
    --range-thumb-color:var(--secondary);
    --range-thumb-hover-color:var(--secondary-hover);
    --range-thumb-active-color:var(--primary);
    --table-border-color:var(--muted-border-color);
    --table-row-stripped-background-color:rgba(115, 130, 140, 0.05);
    --code-background-color:#18232c;
    --code-color:var(--muted-color);
    --code-kbd-background-color:var(--contrast);
    --code-kbd-color:var(--contrast-inverse);
    --code-tag-color:#a65980;
    --code-property-color:#599fa6;
    --code-value-color:#8c8473;
    --code-comment-color:#4d606d;
    --accordion-border-color:var(--muted-border-color);
    --accordion-active-summary-color:var(--primary);
    --accordion-close-summary-color:var(--color);
    --accordion-open-summary-color:var(--muted-color);
    --card-background-color:#141e26;
    --card-border-color:#11191f;
    --card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06),0 0.125rem 2rem rgba(0, 0, 0, 0.12),0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
    --card-sectionning-background-color:#18232c;
    --progress-background-color:#24333e;
    --progress-color:var(--primary);
    --loading-spinner-opacity:0.5;
    --tooltip-background-color:var(--contrast);
    --tooltip-color:var(--contrast-inverse);
    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    --icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    --icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    --icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")
  }
}

:root {
	--font-size:18px;
}

* {
	box-sizing:border-box;
}

:focus-visible {
	outline: 0;
}

::selection {
	background-color: var(--primary-focus);
}

svg:not([fill]) {
  fill: currentColor;
}

body {
	width: 100%;
	margin: 0;
	font-family:var(--font-family);
	font-size:18px;
}

.__meta-nav-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	z-index: 1000;
}

address, blockquote, dl, figure, form, ol, p, pre, table, ul {
	color: var(--color);
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	font-style: normal;
	
	@media only screen and (prefers-color-scheme:dark) {
		color:#fff;
	}
}

.text-center {
	text-align:center;
}

hgroup {
	max-width: 79ch;
	text-align:center;
}

h1, .h1 {
	font-size: 36px;
	font-weight: 400;
	color: var(--primary);
	line-height: 1.1;
}

a {
	--color: var(--primary);
	--background-color: transparent;
	outline: 0;
	background-color: var(--background-color);
	color: currentColor;
	-webkit-text-decoration: var(--text-decoration);
	text-decoration: var(--text-decoration);
	transition: background-color var(--transition),color var(--transition),box-shadow var(--transition),-webkit-text-decoration var(--transition);
	transition: background-color var(--transition),color var(--transition),text-decoration var(--transition),box-shadow var(--transition);
	transition: background-color var(--transition),color var(--transition),text-decoration var(--transition),box-shadow var(--transition),-webkit-text-decoration var(--transition);
}

.underline {
	text-decoration:underline;
}

	.underline:hover {
		text-decoration:none;
	}

header:not(.hero) {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding: var(--block-spacing-vertical) 0;
	min-height: 80px;
	padding: 0;
	position: absolute;
	top: 40px;
	z-index: 1;
}

body > main {
	position:relative;
	top:40px;
	margin-top: 126px;
	padding-top: 0;
}

.brand, 
header:not(.hero) 
.container {
	display: flex;
	justify-content: center;
	padding: var(--spacing) 0;
}

	header .brand  {
		background: url(/img/lugert-verlag-logo.png) no-repeat center;
		background-size: contain;
		min-height: 90px;
		height: auto;
		width: 100%;
		max-width: 143px;
		display: block;
		margin:auto;
	}
	
	@media (prefers-color-scheme: dark) {
		header .brand {
			background-image: url(/img/lugert-verlag-logo-white.png);
		}
	}
	
header.hero p {
	color:var(--muted-color);
	line-height:27px;
	
	@media only screen and (prefers-color-scheme:dark) {
		color:#fff;
	}
}
	
.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--spacing);
	padding-left: var(--spacing);
}

	@media (min-width: 576px) {
	  .container {
		max-width: 510px;
		padding-right: 0;
		padding-left: 0;
	  }
	}
	
	@media (min-width: 768px) {
	  .container {
		max-width: 700px;
	  }
	}
	
form {
	width: 100%;
	margin: 4rem auto;
}

label {
	display:block;
	margin-bottom: calc(var(--spacing) * .25);
}

input, optgroup, select, textarea {
	margin: 0;
	font-family: inherit;
	font-size: 1rem;
	letter-spacing: inherit;
	line-height: var(--line-height);
}

a[role="button"], 
button, 
input[type="button"], 
input[type="reset"], 
input[type="submit"] {
	width:100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0.75rem 1rem;
	vertical-align: middle;
	--background-color: var(--primary);
	--border-color: var(--primary);
	--color: var(--primary-inverse);
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--border-radius);
	outline: 0;
	background-color: var(--background-color);
	color: var(--color);
	font-size: 1rem;
	font-weight: 700;
	line-height: var(--line-height);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

	a[role="button"]:active, 
	a[role="button"]:focus, 
	a[role="button"]:hover, 
	button:active, 
	button:focus, 
	button:hover, 
	input[type="button"]:active, 
	input[type="button"]:focus, 
	input[type="button"]:hover, 
	input[type="reset"]:active, 
	input[type="reset"]:focus, 
	input[type="reset"]:hover, 
	input[type="submit"]:active, 
	input[type="submit"]:focus, 
	input[type="submit"]:hover {
		--background-color: var(--primary-hover);
		--border-color: var(--primary-hover);
		--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
	}
	
	
input[type=text],
input[type=password],
input[type=email] {
	--box-shadow:none;
	display:block;
	width:100%; height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
	margin-bottom: var(--spacing);
	padding:.5rem 2rem .5rem 1rem;
	border:2px solid var(--primary);
	border-radius:var(--border-radius);
	box-shadow: var(--box-shadow);
	transition: background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition);
}

@media (prefers-color-scheme: dark) {
	input[type=text],
	input[type=password],
	input[type=email] {
		background-color: #000000;
		color: #ffffff;
	}
}

input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus, 
select:focus, 
textarea:focus {
	--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}

.password {
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, auto);
	position: relative;
}
	.password .cb-pwd {
		background-color: transparent;
		background-image: var(--icon-eye-dark);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 15px;
		border: none;
		position: absolute;
		top: 2.8rem;
		right: .5rem;
	}
	
		.password .cb-pwd:checked {
			background-image: var(--icon-eye-off-dark);
		}
		
	@media (prefers-color-scheme: dark) {
		.password .cb-pwd {
			background-image: var(--icon-eye-light);
		}
	
		.password .cb-pwd:checked {
			background-image: var(--icon-eye-off-light);
		}
	}

	
[type="checkbox"], 
[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 1.25em;
	height: 1.25em;
	margin-top: -.125em;
	margin-right: .375em;
	margin-left: 0;
	-webkit-margin-end: .375em;
	margin-inline-end: .375em;
	-webkit-margin-start: 0;
	margin-inline-start: 0;
	border-width: var(--border-width);
	vertical-align: middle;
	cursor: pointer;
}

.field-validation-error {
	color: var(--invalid);
}

.lost-pwd {
	float:right;
}

.link {
	text-decoration:underline;
}

	.link:hover {
		text-decoration:none;
	}


.form-row {
	margin-bottom: calc(var(--spacing)*2);
}

	.form-row input:not([type="checkbox"]):not([type="radio"]) {
		margin-bottom: var(--spacing);
	}

.color-box {
	padding:40px 30px;
	margin-bottom:30px;
	background-image: linear-gradient(rgb(232,247,254),rgb(232,247,254)) !important;
	background-size: auto !important;
	background-attachment: scroll !important;
	background-position: 50% 50% !important;
	background-repeat: no-repeat !important;
	
	@media (prefers-color-scheme: dark) {
		color:#415462;
	}
}

/* PWA Download Teaser */
h3 {
	font-family: var(--font-family);
}
.grid {
	grid-column-gap: var(--grid-spacing-horizontal);
	grid-row-gap: var(--grid-spacing-vertical);
	display: grid;
	grid-template-columns: 1fr;
	margin: 0;
}
hgroup.pwa-headline {
	margin: 30px auto 0;
}
.pwa-teaser {
  max-width: 740px;
  margin: 0 auto 30px;
  box-shadow: 0 0 0 1px var(--brand-color3);
  border-radius: var(--border-radius);
}
.pwa-teaser-header {
  grid-template-columns: auto 1fr auto;
  justify-items: center;
  align-items: center;
  padding: .5rem 0;
  background: var(--brand-color3);
}
.pwa-teaser-header h3 {
  color: var(--color-light);
  font-size: 1.25rem;
  line-height: 1.1;
  text-align: center;
  margin-bottom: 0;
  margin-top:5px;
  /* padding: 1.5rem 0; */
}
.pwa-teaser-header h3 span {
  display: block;
  padding: .5em 0 0;
  font-size: calc(var(--font-size) / 1.5);
}
.pwa-teaser-logo {
  min-width: 4.5rem;
  min-height: 4.5rem;
  line-height: 4.5rem;
  text-align: center;
  text-transform: uppercase;
  align-self: center;
  margin-left: var(--spacing);
  border-radius: var(--border-radius);
  background: url(/img/pwa-icon-72.png) no-repeat center;
  background-size: contain;
}
.pwa-teaser-download {
  background-image: var(--icon-download);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 3.125rem;
  height: 3.125rem;
  margin-right: var(--spacing);
}
.pwa-teaser-body {
  /* background: url(/img/app/pwa-teaser.png) no-repeat left bottom;
  background-size: 50%; */
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2, 1fr);
  /* min-height: 17.75rem; */
}

@media (max-width: 430px) {
  .pwa-teaser-body.grid {
	  display:block;
  }
  
  .pwa-teaser-image {
	  display:block;
	  margin:auto;
  }
}


.pwa-teaser-image {
  grid-column: 1;
  grid-row: 1/-1;
  align-self: center;
  justify-self: center;
  padding: var(--spacing);
  width: 180px;
  height: auto;
}
.how-to-text {
  grid-column: 2/3;
  grid-row: 1/-1;
  color: var(--color-darkest);
  display: block;
  padding: var(--spacing);
  line-height: 1.2;
  font-family: var(--font-family);
  align-self: center;
}
html[data-theme="dark"] .how-to-text {
  color: var(--color-light);
}
@media (prefers-color-scheme: dark) {
  .how-to-text {
    color: var(--color-light);
  }
}
.android-more-vert {
  height: 1rem;
  width: 1rem;
}
.ios-share-icon {
  height: 1rem;
  width: 1rem;
}
.ios-add-to-homescreen {
  height: 1rem;
  width: 1rem;
}
	
.link-btn {
	display:inline-block;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0.75rem 1rem;
	vertical-align: middle;
	--background-color: var(--primary);
	--border-color: var(--primary);
	--color: var(--primary-inverse);
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--border-radius);
	outline: 0;
	background-color: var(--background-color);
	color: var(--color);
	font-size: 1rem;
	font-weight: 700;
	line-height: var(--line-height);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
	text-decoration:none !important;
}

	.link-btn:hover {
	    background-color: var(--primary-hover);
	}

.store-logo {
	height:55px; width:auto;
	border:1px solid #fff;
	border-radius:5px;
}

p > a {
	text-decoration:underline;
}

	p > a:hover {
		text-decoration:none;
	}
	
.container.last {
	margin-bottom:50px;
}

.app-teaser {
	margin-top:60px;
}







