@import 'fonts/assistant/stylesheet.css';

:root {
	/* Die beiden Grundfarben setzt jede Installation selbst (Einstellungen →
	   Erscheinungsbild, siehe brand_head_html); alle uebrigen Toene werden
	   daraus abgeleitet. */
	--brand-primary: #2f5d8a;
	--brand-header: #1f2a3c;
	--brand-primary-dark: color-mix(in srgb, var(--brand-primary) 62%, black);
	--brand-accent: color-mix(in srgb, var(--brand-primary) 40%, white);
	--brand-tint: color-mix(in srgb, var(--brand-primary) 12%, transparent);
	--brand-bg: color-mix(in srgb, var(--brand-primary) 5%, #f6f6f8);
	--brand-bg-top: color-mix(in srgb, var(--brand-primary) 2%, white);
	--brand-surface: #ffffff;
	--brand-surface-soft: color-mix(in srgb, var(--brand-primary) 7%, white);
	--brand-surface-hover: color-mix(in srgb, var(--brand-primary) 9%, white);
	--brand-row-hover: color-mix(in srgb, var(--brand-primary) 4%, white);
	--brand-border: color-mix(in srgb, var(--brand-primary) 14%, #e2e2e6);
	--brand-text: color-mix(in srgb, var(--brand-primary) 12%, #2b2b33);
	--brand-muted: color-mix(in srgb, var(--brand-primary) 25%, #66666f);
	--brand-shadow: 0 10px 30px rgba(40, 40, 64, 0.08);
}

html {
	font-family: 'Assistant', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.25;
}

html, body {
	margin: 0;
	padding: 0;
	background:
		radial-gradient(circle at top right, var(--brand-tint), transparent 28%),
		linear-gradient(180deg, var(--brand-bg-top) 0%, var(--brand-bg) 100%);
	color: var(--brand-text);
}

a {
	color: var(--brand-primary-dark);
}


b, h1, h2, h3 {
	font-weight: 600;
}

img {
	border: 0;
}

input {
	font-family: 'Assistant', sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1;
	border: 1px solid var(--brand-border);
	outline: 0;
	padding: .65em .8em;
	border-radius: .55em;
	color: var(--brand-text);
}

section {
	margin-bottom: 1.5rem;
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-radius: .9rem;
	box-shadow: var(--brand-shadow);
	padding: 1.15rem 1.25rem;
}

.portal-section__title {
	margin: 0 0 1rem;
	font-size: 1.45rem;
	letter-spacing: .01em;
}

.portal-section--filtered {
	padding-top: 1rem;
}

.portal-section--filtered .portal-section__title {
	display: none;
}

.a-box {
	text-align: center;
	padding: 1rem;
	border-radius: .7rem;
	border: 1px solid var(--brand-border);
}

.a-box--filled {
	border: 0;
	background: linear-gradient(180deg, #fff 0%, var(--brand-surface-soft) 100%);
}

.a-box--small {
	font-size: .875rem;
}

.a-box--highlight {
	background: var(--brand-surface-soft);
	border: 1px solid var(--brand-primary);
}

.a-box--new {
	position: relative;
	border: 1px solid var(--brand-primary);
}

.a-box--new::before {
	content: 'neu';
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	text-transform: uppercase;
	position: absolute;
	left: .75rem;
	top: .75rem;
	transform: rotate(-5deg);
	padding: .125em .5em;
	border-radius: 2px;
	background: var(--brand-primary);
}

.a-button {
	font-family: 'Assistant', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	padding: .5em 1em;
	border: 0;
	outline: 0;
	background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark));
	border-radius: .55rem;
	cursor: pointer;
}


.a-button:hover {
}

.a-button--large {
	font-size: 1.25rem;
}

.a-hint {
	display: block;
	padding: 1rem 1.25rem;
	background: var(--brand-surface-soft);
	border-radius: .7rem;
	border: 1px solid var(--brand-border);
}

.a-hint--highlight {
	color: #004085;
	background-color: #cce5ff;
	border-color: #b8daff;
}

.a-hint--success {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}

.a-hint--warning {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
}

.a-hint--error {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

.l-body,
.l-header {
	box-sizing: border-box;
	width: 100%;
	max-width: 1510px;
	/*vorher --> 1010px*/
	margin: 0 auto;
	padding: 0 20px;
}

.l-header {
	padding-top: 1.5rem;
}

.l-footer {
	min-height: 2rem;
}

.o-form {
	text-align: center;
}

.o-form__form {
	padding-top: 1rem;
}

.m-birthdays {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.m-birthdays__birthday {
	width: 33%;
	list-style: none;
	margin: 0;
	padding: .5rem 0;
}

.m-birthdays__birthday--highlight {
	font-weight: 600;
}

.m-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg, var(--brand-header), var(--brand-primary-dark));
	border-radius: 1rem;
	padding: 1rem 1.25rem;
	box-shadow: 0 8px 24px rgba(40, 40, 64, 0.18);
/* 	padding-bottom: 1rem; */
/* 	border-bottom: 1px solid #c0c6c8; */
}

.m-header__title {
	font-weight: 600;
	font-size: 2rem;
	color: #fff;
}

.m-header__logo {
	display: block;
	width: auto;
	max-width: 260px;
	background: rgba(255, 255, 255, .97);
	border-radius: .8rem;
	padding: .45rem .7rem;
}

.m-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin-left: -20px;
}

.m-links__link {
	font-weight: 500;
	text-decoration: none;
	display: flex;
/* 	color: #fff; */
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 145px;
	/*9 Spalten --> 90px*/
	height: 80px;
	margin: 0 0 20px 20px;
	padding: 0 .5rem;
	border-width: 0 0 .25rem 0;
	border-style: solid;
	border-color: var(--brand-border);
	transition: background .25s;
}

.m-links__link:hover {
	background: var(--brand-surface-hover);
/* 	background: #0091dd;  #d0d6d8 */
}

.m-news {
}

.m-news__alert {
	font-size: 1.25rem;
	text-align: center;
	text-decoration: none;
	color: var(--brand-primary-dark);
	display: block;
	padding: .75rem 1rem;
	margin-bottom: 1rem;
	border-radius: .25rem;
	background-color: var(--brand-surface-soft);
}

.m-news__alert--highlight {
	font-weight: 600;
	color: #fff;
	background-color: var(--brand-primary-dark);
}

.m-news__alert-icon {
	font-size: 2rem;
	vertical-align: middle;
	margin-right: .5rem;
}

.m-news__posts {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	margin-left: -20px;
}

.m-news__post {
	box-sizing: border-box;
	width: 310px;
	margin: 0 0 20px 20px;
	padding: 0 1rem .25rem;
/* 	transition: background .3s; */
}

.m-phone-numbers {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
}

.m-phone-numbers__row {
}

.m-phone-numbers__col {
	padding: .65rem 1rem;
	border-top: 1px solid var(--brand-border);
	vertical-align: top;
}

.m-phone-numbers tr:hover .m-phone-numbers__col,
.m-ips tr:hover .m-ips__col {
	background: var(--brand-row-hover);
}

.m-phone-numbers__col--header {
	text-align: left;
	border-width: 0;
	padding: 0 1rem .75rem;
	color: var(--brand-primary-dark);
	font-size: 1.05rem;
}

.m-phone-numbers__col:nth-child(2),
.m-phone-numbers__col:nth-child(3) {
	width: 22%;
}

.m-ips {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.m-ips__row {
}

.m-ips__col {
	padding: .65rem 1rem;
	border-top: 1px solid var(--brand-border);
}

.m-ips__col--header {
	text-align: left;
	border-width: 0;
	padding: 0 1rem .75rem;
	color: var(--brand-primary-dark);
	font-size: 1.05rem;
}

.m-search {
	display: flex;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	gap: .75rem;
	padding-bottom: 0;
}

.m-search__input {
	font-family: 'Assistant', sans-serif;
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1;
	box-sizing: border-box;
	width: 100%;
	flex-shrink: 1;
	margin-right: 0;
	padding: .85em 1em;
	outline: 0;
	border: 1px solid var(--brand-border);
	border-radius: .8rem;
	box-shadow: inset 0 1px 2px rgba(40, 40, 64, .05);
}

.m-search__input:focus {
	border-color: var(--brand-primary);
}


.m-search__submit {
}

.m-table {
	width: 100%;
	border-collapse: collapse;
}

.m-table__cell {
	text-align: left;
	padding: .25em .5em .25em 0;
	border-bottom: 1px solid #ccc;
}

.m-table__cell--header {
	font-weight: 600;
	border-bottom: 1px solid #000;
}

/* --- Anmeldung, Profil und Formulare ------------------------------------ */

.a-input {
	font-family: 'Assistant', sans-serif;
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1;
	box-sizing: border-box;
	width: 100%;
	padding: .8em 1em;
	outline: 0;
	color: var(--brand-text);
	border: 1px solid var(--brand-border);
	border-radius: .8rem;
	box-shadow: inset 0 1px 2px rgba(40, 40, 64, .05);
}

.a-input:focus {
	border-color: var(--brand-primary);
}

.a-button--block {
	width: 100%;
	margin-top: .5rem;
}

.a-button--secondary {
	background: linear-gradient(180deg, var(--brand-header), color-mix(in srgb, var(--brand-header) 70%, black));
}

.a-button--danger {
	background: linear-gradient(180deg, #b23a48, #8a2733);
}

.o-form__form {
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	text-align: left;
}

.o-form__form--left {
	margin-left: 0;
	margin-top: 1rem;
}

.o-form__field {
	margin-bottom: 1rem;
}

.o-form__label {
	font-size: .9375rem;
	font-weight: 600;
	color: var(--brand-text);
	display: block;
	margin-bottom: .35rem;
}

.o-form__check {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-size: .9375rem;
	color: var(--brand-muted);
	margin-bottom: 1rem;
}

.o-form__check input {
	margin-top: .15rem;
	accent-color: var(--brand-primary);
}

.o-form__hint {
	box-sizing: border-box;
	max-width: 420px;
	margin: 1rem auto 0;
	text-align: left;
}

.o-form__note {
	font-size: .9375rem;
	color: var(--brand-muted);
	max-width: 420px;
	margin: 1.25rem auto 0;
}

.m-table--narrow {
	width: auto;
	min-width: 320px;
}

.m-table--narrow .m-table__cell--header {
	padding-right: 2rem;
	white-space: nowrap;
}

/* Einrichtungsassistent und Fusszeile */

.o-form--wide .o-form__form,
.o-form--wide .o-form__hint,
.o-form--wide .o-form__note {
	max-width: 640px;
}

.o-form__group {
	border: 1px solid var(--brand-border);
	border-radius: .8rem;
	padding: 1rem 1.25rem .25rem;
	margin: 0 0 1.25rem;
}

.o-form__group legend {
	font-weight: 600;
	color: var(--brand-primary-dark);
	padding: 0 .4rem;
}

.o-form__group .o-form__note {
	margin: 0 0 1rem;
}

.o-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
	align-items: center;
}

.a-input--color {
	height: 3rem;
	padding: .3rem;
	cursor: pointer;
}

.l-footer__text {
	text-align: center;
	color: var(--brand-muted);
	font-size: .9375rem;
	margin: 0 0 1.5rem;
}

@media (max-width: 640px) {
	.o-form__row {
		grid-template-columns: 1fr;
	}
}