@font-face {
    font-family: "LemonMilk";
	src:url(../fonts/LemonMilk.otf) format("opentype");
}

@font-face {
    font-family: "LemonMilkbold";
	font-weight: bold;
	src:url(../fonts/LemonMilkbold.otf) format("opentype");
}

@font-face {
    font-family: "LemonMilklight";
	font-weight: lighter;
	src:url(../fonts/LemonMilklight.otf) format("opentype");
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body {
    background-color: #28272c;
    color: #e6e6e4;
    margin: 0;
	font-family: Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5em;
    max-width: 100%;
	overflow-x: hidden;
}

html {
	overflow-y: scroll;
	scroll-behavior: smooth;
	container-type: scroll-state;
	container-name: scroller;
}

main { border: 1px solid transparent; }
*:focus {
	outline: none;
}

h2 {
	font-family: "LemonMilk", Arial, sans-serif;
	letter-spacing: 1px;
	font-weight: bold;
	width: 100%;
	margin: 60px 0 10px;
	color: #d4b179;
	line-height: 1.5em;
}
#loggedinuser_area + h2 { margin-top: 70px; }

h3.likeHeading2 { font-family: "LemonMilk", Arial, sans-serif;
	letter-spacing: 1px;
	font-weight: bold;
	color: #d4b179;
	line-height: 1.5em;
	font-size: 22px;}

p {
	margin-bottom: 10px;
}
p span.highlight, h2 { font-family: "LemonMilk", Arial, sans-serif; font-size: 22px; font-weight: bold; color: #d4b179; letter-spacing: 1px; }
span.numberCircle {
    background: #e6e6e4;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    display:inline-block;
    color: black;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    vertical-align: text-top;
    line-height: 20px;
    position: absolute;
}

.pagination-next {
	text-align: right;
	font-family: "LemonMilk", Arial, sans-serif;
	letter-spacing: 1px;
	font-weight: bold;
	color: #d4b179;
	line-height: 1.5em;
	font-size: 22px;
	padding-top: 35px;

	a {
		text-decoration: none;

		i { color: #d4b179; font-size: 44px; padding: 0 10px; transition: padding 0.2s ease-in-out; }

		&:hover { color: #d4b179;

			i { padding: 0 0 0 20px; }
		}

		span {
			display: inline-block;
			vertical-align: middle;
			padding-bottom: 13px;
		}
	}

	button {
		display: inline-block;
		width: auto;
		height: auto;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		font: inherit;
		letter-spacing: inherit;
		color: #d4b179;

		i { color: #d4b179; font-size: 44px; padding: 0 10px; transition: padding 0.2s ease-in-out; }

		&:hover:not(:disabled) { color: #d4b179;

			i { padding: 0 0 0 20px; }
		}

		span {
			display: inline-block;
			vertical-align: middle;
			padding-bottom: 13px;
		}

		&:disabled {
			color: #aaa;
			cursor: not-allowed;

			i { color: #aaa; }
		}
	}
}
.pagination-prev {
	text-align: left;
	font-family: "LemonMilk", Arial, sans-serif;
	letter-spacing: 1px;
	font-weight: bold;
	color: #d4b179;
	line-height: 1.5em;
	font-size: 22px;
	padding-top: 35px;

	a {
		text-decoration: none;

		i { color: #d4b179; font-size: 44px; padding: 0 10px; transition: padding 0.2s ease-in-out; }

		&:hover { color: #d4b179;

			i { padding: 0 20px 0 0; }
		}

		span {
			display: inline-block;
			vertical-align: middle;
			padding-bottom: 13px;
		}
	}
}
.pagination-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;

	.pagination-prev,
	.pagination-next {
		padding-top: 35px;
		margin: 0;
	}
}
ul.pagination-next {
	list-style: none;

	li {
		margin-bottom: 20px;
	}

	li:last-child {
		margin-bottom: 0;
	}
}
ul.domains span.numberCircle {
    margin: 0 12px 0 -32px;
}
h2 a, h2 span { text-decoration: none; color: #aaa; }
h2 span { font-weight: normal; }
/* Zwischenstation der Brotkrumen ohne Link: grau wie die verlinkten Stationen,
   aber im Schriftschnitt der Überschrift – nur die letzte Station bleibt gold */
h2 span.breadcrumb-step { font-weight: inherit; }
h2 a:hover { text-decoration: none; color: #d4b179; }
a { color: #e6e6e4; }
a:hover { text-decoration: none; }
strong { font-weight: bold; }
.center { text-align: center; }
.right { text-align: right; }
ul { margin-bottom: 10px; list-style-position: inside; }
ol { margin-bottom: 10px; margin-left: 19px; }
blockquote { font-style: italic; margin: 40px 80px; }
blockquote::before, blockquote::after { content: '"'; }
i { font-style: italic; }
/* das Reset oben nimmt auch <em> seinen Schriftschnitt – ohne diese Zeile
   bliebe kursiver Text aufrecht, egal ob er aus einem Quill-Editor kommt oder
   aus den Sternchen eines Klartext-Feldes (cf. Support/PlainText) */
em { font-style: italic; }

/* Form Styles - General */
button, a.button {
	display: block;
	height: 74px;
	background: #d4b179;
	border: 4px solid #d4b179;
	font-size: 24px;
	width: 100%;
	font-family: "LemonMilk", Arial, "Sans-Serif";
	letter-spacing: 1px;
}
button:hover:enabled, a.button:hover {
	color: #e6e6e4;
	cursor: pointer;
}
button.disabled {
	background: #ccc;
	border-color: #ccc;
	color: #28272c;
	cursor: not-allowed;
}

button.btn-new,
button.btn-ki {
    width: auto;
    border-radius: 10px;
    height: auto;
    font-size: 16px;
    display: inline;
}

button.btn-ki  {
	background: #fff;
	color: #28272c;
	border: none;

	:hover {
		color: #d4b179;
	}
}

button.btn-new:disabled {
    background: grey;
    border-color: grey;
    cursor: not-allowed;
}

button.btn-ki:disabled {
    color: grey;
}

a.button { text-align: center; color: #28272c; text-decoration: none; padding: 20px 0; height: auto; border: none; margin-bottom: 8px; }


/* Form Styles - Specific Forms */

/** Feedback Code Form **/
#feedbackCodeForm {
	margin-top: 25px;
}
#feedbackCodeForm button {
	width: 74px;
	margin-top: -10px;
	float: right;
	margin: 0;
	background: #d4b179 url('../img/btn_check_black.png') 8px 8px no-repeat;
	margin-bottom: 15px;
}
#feedbackCodeForm button:hover {
	background-image: url('../img/btn_check_white.png');
}
#feedbackCodeForm input {
	padding: 15px;
	font-size: 30px;
	color: #28272c;
	width: 62%;
	display: block;
	float: left;
	border: 4px solid #d4b179;
	text-align: center;
	margin-bottom: 15px;
	text-transform: uppercase;
}


#welcome_feedback, .rightOrBottom, .rightOrTop {
	width: 360px;
	margin: 0 20px;
	float: right;
}
#welcome_facebook, .leftOrTop {
	width: 360px;
	margin: 0 20px;
	float: left;
}
#welcome_feedback h2, #welcome_facebook h2, .leftOrTop h2, .rightOrBottom h2, .rightOrTop h2 { text-align: center; }


#feedbackForm textarea {
	width: 96%;
	height: 200px;
	font-family: Arial;
	font-size: 18px;
	padding: 2%;
	margin-bottom: 18px;
    border: 2px solid #d4b179;
    width: 766px;
}

header {
	width: 320px;
	text-align: center;
	margin: 20px auto 0 auto;
}

main {
	margin: 0 auto;
	max-width: 800px;
	min-height: calc(100vh - 221px - 198px);
}

#loggedinuser_area {
    p {
        padding-top: 30px;

        span {
            color: #d4b179;
            font-weight: bold;
        }
    }

    form {
        display: none;
    }
}

footer {
	clear: both;
	margin: 0 auto 10px auto;
	max-width: 760px;
	min-height: 66px;
	padding-top: 100px;
	text-align: center;

	p { margin-bottom: 0; }
	ul { list-style: none; text-align: center; }
	li { display: inline; }
	li::after { content: " | "; }
	li:last-child::after { content: ""; }
}

ul.answers {
	list-style: none;
	width: auto;
}
ul.answers li { display: block; width: 17%; float: left; }
ul.answers li.middle { width: 10%; }
ul.answers li.spacer { width: 9%; }
ul.answers label { display: block; text-align: center; }
ul.answers input { width: 100%; }
ul.answers span { width: 100%; clear: both; display: none; margin-right: 5px; }



p.error { clear: both; text-align: center; color: #d4b179; font-family: "LemonMilklight", Arial, "Sans-Serif"; }
p.error a { color: #d4b179; }
form p.error { width: calc(100% - 10px);
	min-width: 320px;
	max-width: 790px; margin: 0 auto; text-align: left; padding-top: 5px; }

table.question {
	width: 100%;
	margin-top: 60px;
}

table.question h2 {
	text-align: left;
}

table.question tr.legend td {
	color: #aaa;
	padding-bottom: 10px;
}

table.question tr.answer td {
	text-align: center;
}

table.question tr.answer td input {
	width: 20px !important;
	height: 20px !important;
}

table.summary_barcharts {
    float: left;
    width: 60%;
}

table.summary_barcharts div {
    height: 100%;
    background: #d4b179;
    margin: 1px 0 4px 10px;
    float: left;
}

table.summary_barcharts span { margin-left: 10px; }

div.summary_kpis { text-align: center; float:right; width: 20%; }
div.summary_kpis p.average { font-size: 50px; color: #d4b179; margin: 46px 0 20px 0; }

.messagebox {
	color: #d4b179;
	margin: 50px 100px 50px;
	text-align: center;

	a {
		color: #d4b179;
	}

	p.title {
		font-family: "LemonMilklight", Arial, "Sans-Serif";
		font-weight: bold;
	}
}

h3, form fieldset legend {
	font-weight: bold;
	margin: 60px 0 10px 0;
}

h4 {
	font-weight: bold;
	margin: 30px 0 10px 0;
}

h3 + h4 { margin-top: 0; }

table.admintable,
table.performancetest {
    width: 100%;
    margin-top: 50px;
	margin-bottom: 30px;
}

table.admintable {
	margin-bottom: 60px;
}

h3 + table.admintable {
	margin-top: 0;
}

p + table.admintable {
	margin-top: 20px;
}

table.admintable tr,
table.performancetest tr {
    border-bottom: 1px solid #202020;
}

table.admintable tr.multiline {
	border-bottom: none;
}

table.admintable td,
table.performancetest td {
    padding: 5px;
}

table.admintable tr.multiline td {
	padding-bottom: 0;
}

table.admintable tr:last-child td,
table.performancetest tr:last-child td,
table.admintable tr.multiline td {
    border: none;
}

table.admintable th,
table.performancetest th {
	font-weight: bold;
	font-style: italic;
	border-bottom: 1px solid #e6e6e4;
}

/* die Breite gilt auch für die Zellen selbst, damit Tabellen ohne Kopfzeile
   (z. B. die Trefferliste der Benutzersuche) dieselbe Spaltenbreite bekommen
   und mit der Tabelle darüber auf einer Flucht liegen */
table.admintable th.adminoptions,
table.admintable td.adminoptions   { width: 35px; }
table.admintable th.adminoptions-2,
table.admintable td.adminoptions-2 { width: 60px; }
table.admintable th.adminoptions-3,
table.admintable td.adminoptions-3 { width: 85px; }
table.admintable th.adminoptions-4,
table.admintable td.adminoptions-4 { width: 110px; }

/* Teilnehmerlisten von Terminen: Name und E-Mail-Adresse teilen sich zu
   gleichen Teilen den Platz, der neben der Datumsspalte übrig bleibt. Die
   Breiten stehen hier und nicht am Element, weil sie auf Papier andere sind
   (siehe den Druck-Block weiter unten).
   "table-layout: fixed" ist nötig, damit die Breiten überhaupt gelten: in der
   voreingestellten automatischen Berechnung sind sie nur ein Vorschlag, den
   der längste Inhalt einer Spalte überstimmt. Und jede sichtbare Spalte muss
   eine Breite mitbringen: neben einer Spalte ohne Breitenangabe verwirft
   Chrome die calc()-Breiten und verteilt gleichmäßig */
table.participantlist { table-layout: fixed; }

table.participantlist th.column-name,
table.participantlist th.column-email { width: calc((100% - 200px) / 2); }
table.participantlist th.column-date   { width: 200px; }

/* links and icon buttons (incl. their FontAwesome icons) inside admintables: white by default, gold on hover/focus;
   the icons are styled explicitly so context rules targeting icons directly cannot override them */
table.admintable button {
	width: auto;
}

/* icon buttons in option columns (td class "adminoptions" or "adminoptions-N"):
   shrink to their icon; the selector is specific enough to win against the
   general form button sizing (width/min-width) of "form div.row button" */
table.admintable td[class^="adminoptions"] button {
	display: inline-block;
	width: auto;
	min-width: 0;
	max-width: none;
	height: 18px;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	font: inherit;
	cursor: pointer;
	color: inherit;
}

table.admintable a,
table.admintable a i,
table.admintable button i {
	color: #fff;
}

table.admintable a:hover,
table.admintable a:focus,
table.admintable a:hover i,
table.admintable a:focus i,
table.admintable button:hover i,
table.admintable button:focus i {
	color: #d4b179;
}

/* verlinkte Anzahl-Tags (z. B. die Mitglieder einer Rolle): der Tag steht für
   sich, deshalb ohne Unterstrich. Der Hover liegt auf dem Tag selbst, weil
   dessen eigene Schriftfarbe die des Links überschreibt */
table.admintable a.tag-link {
	text-decoration: none;
}

table.admintable a.tag-link:hover span.tag-grey,
table.admintable a.tag-link:focus span.tag-grey {
	border-color: #d4b179;
	background: #d4b179;
}

table.admintable tr.details.hidden {
    display: none;
}

/* blocked rows: strike through the data cells, but not the icons in the last column */
table.admintable tr.blocked td:not(:last-child) {
	text-decoration: line-through;
}

table.admintable td p:last-child { margin-bottom: 0; }

table.admintable tr:has(+ tr.details) { border-bottom: none; }
table.admintable tr:has(+ tr.details.hidden) { border-bottom: 1px solid #202020; }
table.admintable tr:last-child { border-bottom: none; }

ul.adminoptions { list-style-type: none; padding: 0; }

#loginForm { width: 80%; margin: 0 auto; }
#loginForm label, #resetPasswordForm label { clear: both; width: calc(100% - 10px);
	min-width: 320px;
	max-width: 790px; display: block; margin: 30px auto 0; }
#loginForm input, #resetPasswordForm input { padding: 15px; color: #28272c; border: 2px solid #d4b179; font-size: 18px;  display: block;
	width: calc(100% - 34px);
	min-width: 300px;
	max-width: 770px; margin: 0; text-align: center; }
/* the "Angemeldet bleiben" toggle in the look of the .checkbox-wrapper switches
   of the administration area – the rules above would otherwise break it, they
   give every input of the form a padding, a gold border and a min-width of
   300px, and every label a width of its own on a line of its own */
#loginForm .checkbox-wrapper { margin-top: 30px; text-align: left; }
#loginForm .checkbox-wrapper input[type=checkbox] { display: inline-block; padding: 0; border: none;
	height: 20px; width: 30px; min-width: 30px; margin: 0 8px -3px 0; }
#loginForm .checkbox-wrapper label { display: inline; width: auto; min-width: 0; margin: 0; }
#loginForm button, #resetPasswordForm button {
	width: 100%;
	min-width: 330px;
	max-width: 800px;
	height: 56px;
	background: #d4b179;
	border: 4px solid #d4b179;
	font-size: 24px;
	font-family: "LemonMilk", Arial, "Sans-Serif";
	letter-spacing: 1px;
    display: block;
    margin: 50px auto 10px;
}
#loginForm p { width: 100%;
	min-width: 330px;
	max-width: 800px; margin: 0 auto; }
#loginForm p.right { margin-bottom: 49px; }

#registrationForm { width: 80%; margin: 0 auto; }

form div.row label {
	clear: both;
	width: calc(100% - 10px);
	min-width: 320px;
	max-width: 790px;
	display: block;
	margin: 30px auto 0;

	&.required::after {
		content: " *";
	}
}
form div.row input,
form div.row textarea {
	padding: 15px;
	color: #28272c;
	border: 2px solid #d4b179;
	font-size: 18px;
	display: block;
	width: calc(100% - 34px);
	min-width: 300px;
	max-width: 770px;
	margin: 0 auto;
	text-align: center;
	font-family: Arial, "Sans-Serif";
}
form div.row input[type=file] { border: none; }
form div.row select {
	padding: 15px;
	color: #28272c;
	border: 2px solid #d4b179;
	font-size: 18px;
	display: block;
	width: 100%;
	min-width: 300px;
	margin: 0;
	font-family: Arial, "Sans-Serif";
}
form div.row textarea {
	height: 150px;
	resize: vertical;
	text-align: left;
}
form div.row input[type=checkbox],
form div.row input[type=radio] {
	display: inline;
	min-width: 25px;
	width: 25px;
}
form div.row input[type=checkbox] + label,
form div.row input[type=radio] + label {
	display: inline;
	width: auto;
}
form div.row button {
	width: 100%;
	min-width: 330px;
	max-width: 800px;
	height: 56px;
	background: #d4b179;
	border: 4px solid #d4b179;
	font-size: 24px;
}

/* place two form rows side by side (e.g. start and end date); on narrow
   screens the columns wrap back to full width */
form div.form-group-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 0 10px;
	max-width: 800px;
}
form div.form-group-columns > div.row {
	flex: 1 1 300px;
	min-width: 0;
}
form div.form-group-columns > div.row label {
	min-width: 0;
	width: calc(100% - 10px);
}
form div.form-group-columns > div.row input {
	min-width: 0;
}

/* place multiple submit buttons of a form row side by side */
form div.row.buttons-inline {
	display: flex;
	gap: 10px;
	align-items: center;
	max-width: 800px;
}
form div.row.buttons-inline button {
	min-width: 0;
	flex: 1;
}

#registrationForm_group div { float: left; width: 25%; }
#registrationForm_group div input[type='radio'] { width: 25px; min-width: 25px; float: left; margin: 6px 5px 30px 0px; }
#registrationForm_group div label { clear: none; width: auto; margin: 10px 0 0 0; }
form ul.radio { padding-left: 0; display: flex; width: calc(100% - 50px); margin: 10px 0 0 50px; }
form ul.radio li { display: block; flex: 1 1 auto; list-style-type: none; }
form ul.radio label { min-width: auto; display: inline; }
form ul.radio input[type='radio'] { width: 25px; min-width: 25px; margin: 0; float: left; margin: 6px 5px 0 0; }
form ul.tags { padding: 0; margin-top: 15px; }
form ul.tags li { list-style: none; display: inline-block; padding-bottom: 10px; margin-right: -5px; }
form ul.tags input[type='checkbox'] { width: 0; min-width: 0; margin: 0; display: inline; opacity: 0; }
form ul.tags input[type='checkbox'] + label { padding: 2px 12px; border: 1px solid #fff; border-radius: 12px; width: auto; min-width: 0; display: inline; margin-left: -2px; cursor: pointer; margin-right: 5px; }
form ul.tags input[type='checkbox']:checked + label { background: #fff; color: #000; }
form ul.tags span.tag { cursor: no-drop; }
form div.row input.left,
form div.row textarea.left { text-align: left; }

.checkbox-wrapper input[type=checkbox] {
    appearance: none;
    background-color: #aaa;
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px;
    margin: 0 8px -3px 0;
    position: relative;
    width: 30px;
}

.checkbox-wrapper input[type=checkbox],
.checkbox-wrapper input[type=checkbox]::after {
    transition: all 100ms ease-out;
}

.checkbox-wrapper input[type=checkbox]::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 14px;
}

.checkbox-wrapper input[type=checkbox] {
    cursor: default;
}

.checkbox-wrapper input[type=checkbox]:hover {
    background-color: #aaa;
    transition-duration: 0s;
}

.checkbox-wrapper input[type=checkbox]:checked {
    background-color: #d4b179;
}

.checkbox-wrapper input[type=checkbox]:checked::after {
    background-color: #fff;
    left: 13px;
}

.checkbox-wrapper :focus:not(.focus-visible) {
    outline: 0;
}

.checkbox-wrapper input[type=checkbox]:checked:hover {
    background-color: #d4b179;
}

/* keep the toggle dimensions when the checkbox sits inside a form row, where
   the generic input rules (padding, width, display: inline) would break it */
form div.row .checkbox-wrapper input[type=checkbox] {
    display: inline-block;
    padding: 0;
    height: 20px;
    width: 30px;
    min-width: 30px;
}

/* radio group in the look of the .checkbox-wrapper toggles: round radios,
   grey when unchecked, gold with a white dot when checked */
.radio-wrapper > div {
    margin-bottom: 8px;
}

.radio-wrapper input[type=radio] {
    appearance: none;
    background-color: #aaa;
    border-radius: 50%;
    border-style: none;
    flex-shrink: 0;
    display: inline-block;
    padding: 0;
    height: 20px;
    width: 20px;
    min-width: 20px;
    margin: 0 8px -3px 0;
    position: relative;
    cursor: default;
}

.radio-wrapper input[type=radio],
.radio-wrapper input[type=radio]::after {
    transition: all 100ms ease-out;
}

.radio-wrapper input[type=radio]::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 8px;
    width: 8px;
    left: 6px;
    top: 6px;
    position: absolute;
    opacity: 0;
}

.radio-wrapper input[type=radio]:checked {
    background-color: #d4b179;
}

.radio-wrapper input[type=radio]:checked::after {
    opacity: 1;
}

.radio-wrapper :focus:not(.focus-visible) {
    outline: 0;
}

/* response form in the calendar ("Um Rückmeldung wird gebeten"): it lives
   directly in a list item, not in the site's usual "form div.row" wrapper, so
   the few fields it has are styled here to match the other form fields */
.event-response-form {
    margin: 0 0 30px 65px;
}
.event-response-form label[for^="remark_"] {
    display: block;
    margin: 15px 0 5px;
}
/* width/padding mit !important, weil eine projektweite Regel unter 820px
   "textarea { width: 93% !important; padding: 3% !important; }" setzt — hier
   soll das Feld exakt so breit sein wie die Buttons darunter. */
.event-response-form textarea {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    padding: 10px !important;
    /* keine Breitenbegrenzung: das Feld reicht bis zum rechten Rand des
       Termin-Abschnitts (der linke Einzug kommt vom Formular-Margin) */
    max-width: none;
    height: 80px;
    border: 2px solid #d4b179;
    background: #fff;
    color: #28272c;
    font-family: Arial, "Sans-Serif";
    font-size: 16px;
    line-height: 1.4em;
    resize: vertical;
    text-align: left;
}
/* Die Buttons füllen gemeinsam die Formularbreite (wie das Bemerkungsfeld
   darüber, also bis zum rechten Rand des Abschnitts): auf großen Bildschirmen
   nebeneinander, auf kleinen untereinander — jeweils über die ganze Breite. */
.event-response-form .event-response-actions {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    width: 100%;
}
.event-response-form .event-response-actions button.btn-outline {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
}

@media (max-width: 799px) {
    .event-response-form .event-response-actions {
        flex-direction: column;
    }
    .event-response-form .event-response-actions button.btn-outline {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Outline-Button: normal goldene Fläche, bei Hover bleibt nur der goldene
   Rahmen übrig (Hintergrund wird transparent) */
button.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    padding: 10px 16px;
    background: #d4b179;
    border: 2px solid #d4b179;
    border-radius: 10px;
    color: #28272c;
    font-family: "LemonMilk", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.3em;
    cursor: pointer;
    transition: background-color 150ms ease-out, color 150ms ease-out;
}
/* Das Icon im Button darf nicht die große, links gefloatete Optik der
   Listen-Icons erben (vgl. "ul.events li i"), daher hier zurückgesetzt. */
button.btn-outline i,
.event-response-form button.btn-outline i {
    display: inline;
    float: none;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    font-size: inherit;
    color: #28272c;
}
/* Icon und Beschriftung bleiben als Gruppe zusammen, auch wenn der Text im
   breiten Button auf zwei Zeilen umbricht */
button.btn-outline span {
    flex: 0 1 auto;
}
button.btn-outline:hover:enabled {
    background: none;
    color: #e6e6e4;
}
button.btn-outline:hover:enabled i,
.event-response-form button.btn-outline:hover:enabled i {
    color: #d4b179;
}
/* deaktiviert: komplett grau gefüllt (nicht nur der Rahmen) */
button.btn-outline:disabled {
    background: #6b6b6b;
    border-color: #6b6b6b;
    color: #e6e6e4;
    cursor: not-allowed;
}
button.btn-outline:disabled i,
.event-response-form button.btn-outline:disabled i {
    color: #e6e6e4;
}

/* ---------------------------------------------------------------------------
   Terminkalender: die Terminliste im Look der Tagesliste der Kalenderansicht —
   großes goldenes Termin-Icon links, Texte rechts daneben, kein Rahmen. Jeder
   Termin ist ein Akkordion-Abschnitt: der Formularteil (.submenu) ist
   standardmäßig eingeklappt, Aufklapper ist der als Link dargestellte Hinweis
   (.event-response-toggle). Die Regeln sind auf "#accordion.events-accordion"
   gehängt, damit sie die allgemeinen Akkordion-Regeln der Adminformulare
   überschreiben, ohne diese zu verändern.
   --------------------------------------------------------------------------- */
#accordion.events-accordion > li {
    position: relative;
    /* flow-root umschließt das gleitende Icon auch dann, wenn die Texte
       daneben kürzer sind als das Icon hoch ist */
    display: flow-root;
    /* rundum derselbe Innenabstand: oben wie unten (die Ränder der letzten
       Elemente sind dafür unten auf null gesetzt — sonst wären es oben 0 und
       unten je nach Zustand 0 bis 10 Pixel) und links vor dem Termin-Icon */
    padding: 20px 20px 20px 9px;
    margin-bottom: 25px;
}
/* auf einen im Kalender angeklickten Tag gefiltert: die übrigen Termine sind
   ausgeblendet. Die Regel ist nötig, weil das "display" oben sonst das
   hidden-Attribut überstimmt */
#accordion.events-accordion > li[hidden] {
    display: none;
}
/* Titel und Texte bleiben hell lesbar, gold ist nur das Termin-Icon */
#accordion.events-accordion .event-head,
#accordion.events-accordion .event-head h3,
#accordion.events-accordion .event-head p {
    color: #e6e6e4;
}
/* großes Termin-Icon links, Texte rechts daneben (wie in der Tagesliste) */
#accordion.events-accordion .event-head > i:first-child {
    position: static;
    display: block;
    float: left;
    width: 60px;
    min-width: 60px;
    margin: 0;
    text-align: center;
    font-size: 40px;
    line-height: 1.1em;
    color: #d4b179;
}
#accordion.events-accordion .event-head h3,
#accordion.events-accordion .event-head p,
#accordion.events-accordion .event-response-toggle {
    margin-left: 65px;
    font-size: 18px;
    font-weight: normal;
}
#accordion.events-accordion .event-head > *:last-child {
    margin-bottom: 0;
}
#accordion.events-accordion .event-head h3 {
    margin-top: 0;
    font-weight: bold;
    /* Platz für das Auge rechts oben lassen, damit lange Titel nicht
       darunter laufen */
    padding-right: 30px;
}
/* Inline-Icons in den Hinweisen bleiben inline (nicht die absolute
   Akkordion-Optik) und weiß wie in der Tagesliste der Kalenderansicht */
#accordion.events-accordion .event-head p i,
#accordion.events-accordion .event-response-toggle i {
    position: static;
    float: none;
    display: inline;
    width: auto;
    min-width: 0;
    margin: 0 3px 0 0;
    font-size: inherit;
    color: #fff;
}
/* Der Hinweis hinter dem Info-Icon klappt das Formular auf und zu; der als
   Link dienende Teil ist unterstrichen dargestellt — hell statt des goldenen
   ".link"-Looks der Adminformulare, und nur er wird beim Überfahren golden */
#accordion.events-accordion .event-response-toggle,
#accordion.events-accordion > li.open .event-response-toggle {
    color: #e6e6e4;
    /* der Absatzabstand zum Kopf darüber steht am Hinweis selbst (der Kopf
       endet randlos), nach unten schließt der Hinweis bündig ab — im
       eingeklappten Zustand kommt der Abstand dort vom Innenabstand des
       Abschnitts */
    margin-top: 10px;
    margin-bottom: 0;
    /* die allgemeine ".link"-Regel macht die ganze Zeile zum Zeiger-Cursor —
       hier zeigt nur der unterstrichene Teil an, dass er klickbar ist */
    cursor: default;
}
#accordion.events-accordion .event-response-toggle__link {
    text-decoration: underline;
    cursor: pointer;
}
#accordion.events-accordion .event-response-toggle__link:hover {
    color: #d4b179;
}
/* Auge zum Aus-/Einblenden des Termins rechts oben im Abschnitt */
#accordion.events-accordion .event-hide-form {
    position: absolute;
    top: 24px;
    right: 20px;
    z-index: 1;
}
#accordion.events-accordion .event-hide-form button {
    display: block;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    font-size: 16px;
    letter-spacing: 0;
    color: #d4b179;
    cursor: pointer;
}
#accordion.events-accordion .event-hide-form button:hover:enabled {
    background: none;
    color: #fff;
}
/* ausgeblendete Termine (nur bei aktivierter Checkbox sichtbar) sind gedimmt */
#accordion.events-accordion > li.event-hidden {
    opacity: 0.55;
}
/* das aufgeklappte Formular nutzt ohne Einrückung die volle Breite; unten
   schließt es mit demselben Abstand ab wie der eingeklappte Zustand */
#accordion.events-accordion .submenu {
    padding-top: 15px;
}
#accordion.events-accordion .submenu > p {
    font-size: 18px;
    font-weight: normal;
}
#accordion.events-accordion .submenu > *:last-child {
    margin-bottom: 0;
}

/* Checkbox "Auch ausgeblendete Termine anzeigen" über der Kalenderansicht */
.events-show-hidden {
    margin-bottom: 10px;
}
.events-show-hidden .checkbox-wrapper {
    cursor: pointer;
}

/* Toast-Benachrichtigung (z. B. nach dem Speichern einer Rückmeldung):
   schwebt unten rechts, blendet sich ein und wird per JavaScript wieder
   ausgeblendet. */
.toast {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 420px;
    padding: 15px 18px;
    background: #34333a;
    border-left: 4px solid #d4b179;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    color: #e6e6e4;
    animation: toast-in 300ms ease-out;
}
/* mehrere Meldungen werden untereinander gestapelt, der Container übernimmt
   dann die Positionierung */
.toast-container {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 420px;
}
.toast-container .toast {
    position: static;
    right: auto;
    top: auto;
    max-width: none;
}
.toast i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #d4b179;
}
.toast > div {
    flex: 1 1 auto;
}
.toast p {
    flex: 1 1 auto;
    margin: 0;
    line-height: 1.4em;
}
.toast p.title {
    font-family: "LemonMilklight", Arial, "Sans-Serif";
    font-weight: bold;
    color: #d4b179;
}
.toast p + p,
.toast ul {
    margin-top: 5px;
}
.toast ul {
    margin-bottom: 0;
    padding-left: 18px;
    line-height: 1.4em;
}
.toast .toast-close {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0 0 0 6px;
    margin: -2px 0 0;
    background: none;
    border: none;
    color: #aaa;
    font-family: Arial, "Sans-Serif";
    font-size: 26px;
    line-height: 1;
    letter-spacing: normal;
    cursor: pointer;
}
.toast .toast-close:hover {
    color: #d4b179;
}
.toast.toast-hidden {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
}

/* fliegt von oben ein und blendet dorthin auch wieder aus */
@keyframes toast-in {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* auf schmalen Viewports über die volle Breite */
@media (max-width: 599px) {
    .toast,
    .toast-container {
        right: 10px;
        left: 10px;
        top: 10px;
        max-width: none;
    }
}

/* Nutzer, die Bewegung reduzieren möchten, bekommen keine Animation */
@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
    .toast.toast-hidden { transition: none; }
}

/* answer option rows (flex): the text input takes all available width, the
   "richtig" toggle incl. label only as much space as it needs */
form div.row .answer-option-row input[type=text] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    text-align: left;
}
form div.row .answer-option-row label {
    flex: 0 0 auto;
    display: inline-block;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
}

span.tag { padding: 2px 12px; border: 1px solid #fff; border-radius: 12px; width: auto; min-width: 0; display: inline; margin-left: -2px; color: #fff; white-space: nowrap; margin-right: 5px; }
span.tag-grey { border-color: #aaa; background: #aaa; color: #000; }
span.tag-gold { border-color: #d4b179; background: #d4b179; color: #000; }

/* date + time pairs: label on its own line, below it the two inputs side by
   side, centered like the other (max 804px wide) form fields; border-box with
   a fixed height so the native date input and the masked time text input
   render at exactly the same size */
.form-group-datetime {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 12px;
}

.form-group-datetime label,
.form-group-datetime p.error {
	flex: 0 0 100%;
}

.form-group-datetime br {
	display: none;
}

.form-group-datetime .form-control {
	box-sizing: border-box;
	height: 57px;
	width: calc(50% - 6px);
	min-width: 250px;
	max-width: 396px;
	margin: 0;
}

@media (max-width: 799px) {
    body { padding: 0 20px; }
	#registrationForm_group div { width: 150px; float: none; margin: 0 auto; clear: both; }
	#registrationForm_group div input[type='radio'] { margin: 11px 10px 0 0; padding: 10px; }
	#registrationForm_group #group_rastatt { margin-left: 0; }
	#registrationForm_group div label { padding-top: 10px; }
	#registrationForm_group #group_rastatt { margin-bottom: 30px; }
}


form div.row button {
	width: 100%;
	min-width: 330px;
	max-width: 800px;
	height: 56px;
	background: #d4b179;
	border: 4px solid #d4b179;
	font-size: 24px;
	font-family: "LemonMilk", Arial, "Sans-Serif";
	letter-spacing: 1px;
	display: block;
	margin: 50px auto 10px;
}


#addNewCourseForm {
    margin-top: 30px;
    margin-top: 30px;
}
#addNewCourseForm input {
	padding: 15px;
    color: #28272c;
    border: 2px solid #d4b179;
    font-size: 18px;
    display: block;
    width: 360px;
    margin: 0 auto;
    text-align: center;
}
#addNewCourseForm button {
    width: 394px;
	height: 74px;
	background: #d4b179;
	border: 4px solid #d4b179;
	font-size: 24px;
	font-family: "LemonMilk", Arial, "Sans-Serif";
	letter-spacing: 1px;
    display: block;
    margin: 20px auto 10px;
}
#addNewCourseForm button:hover {
	color: #e6e6e4;
	cursor: pointer;
}

dl.faq dt { font-weight: bold; color: #d4b179; padding-top: 30px; }
dl.faq dt:first-child { padding-top: 20px; }

ul.downloads, ul.events, ul.links { list-style: none; padding-left: 0; }
ul.downloads h3, ul.links h3 { margin-top: 0; color: #d4b179; margin-top: 30px; }
ul.downloads ul, ul.links ul { list-style-type: disc; }
/* Dateityp und Größe stehen zurückhaltend hinter dem Titel – überall gleich,
   von der Startseite bis zu den Downloads im Kurs-Bereich */
.download-meta { color: #aaa; }
ul.downloads-2-columns {
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
}

ul { list-style-position: outside; padding-left: 16px; }

ul.domains { list-style: none; padding-left: 0; }
/* the icon sits in a uniform 60px column and is centred within it, i.e. it
   keeps (60px - actual icon width) / 2 of space on each side regardless of the
   icon. text-align centring is used because margin-left cannot reference the
   element's own rendered width. */
ul.domains li i, ul.downloads li i,
ul.events li i, ul.links li i { display: block; float: left; width: 60px; text-align: center; font-size: 40px; margin-top: 6px; color: #d4b179; }
/* inline icons inside a list-item paragraph (e.g. the info hint) must not
   inherit the big floated leading-icon style above; keep them at line height */
ul.domains li p i, ul.downloads li p i,
ul.events li p i, ul.links li p i { display: inline; float: none; width: auto; font-size: inherit; margin-top: 0; margin-right: 3px; }
/* das kleine Info-Icon vor einem Hinweis ist weiß, nicht gold */
ul.domains li p i.fa-circle-info, ul.downloads li p i.fa-circle-info,
ul.events li p i.fa-circle-info, ul.links li p i.fa-circle-info { color: #fff; }
ul.domains li, ul.downloads li, ul.events li, ul.links li { margin-bottom: 30px; }
/* ein Eintrag ist mindestens so hoch wie sein Icon (40px Glyphe plus dessen
   6px margin-top), damit auch ein einzeiliger Eintrag ohne Beschreibung das
   gefloatete Icon noch vollständig umschließt */
ul.domains li, ul.downloads li,
ul.events li, ul.links li { min-height: 46px; }
ul.domains li h3, ul.downloads li h3, ul.events li h3, ul.links li h3,
ul.domains li p, ul.downloads li p, ul.events li p, ul.links li p{ margin-left: 65px; }
ul.domains li p:last-child, ul.downloads li p:last-child, ul.events li p:last-child, ul.links li p:last-child { margin-bottom: 0; }


ul.cards { list-style: none; padding-left: 0; margin: 0 70px; }
ul.cards li .ribbon { display: block; float: left; font-size: 40px; color: #d4b179; width: 50px; line-height: 60px; text-align: center; }
ul.cards li i { margin-bottom: 10px; }
ul.cards li p, ul.cards li h3, ul.cards li li { margin-left: 70px }
ul.cards li h3 { margin-bottom: 0; }
/* auch die Links, die Kursverantwortliche in der Vorschau eines noch nicht
   freigeschalteten Moduls sehen, bleiben ausgegraut (als Link erkennbar
   bleiben sie durch die Unterstreichung) */
ul.cards li.disabled, ul.cards li.disabled i, ul.cards li.disabled h3.likeHeading2,
ul.cards li.disabled a { color: #aaa; }
ul.cards li li { min-height: auto; list-style: disc; }

/* die Ueberschrift ueber den Dateien und Links eines Moduls steht in derselben
   Flucht wie der uebrige Text der Karte (die Regel darueber nennt nur h3) */
ul.cards li h4 { margin-left: 70px; }

/* die schlichte Liste der Dateien und Links: ein Aufzaehlungspunkt statt des
   goldenen Icons und keine Mindesthoehe – die Eintraege stehen wie die Seiten
   eines Moduls darueber. Eine Beschreibung gehoert zu ihrem Eintrag und wird
   deshalb nicht wie ein Absatz der Karte eingerueckt
   (cf. _partials/trainingCourseDownloadsList) */
ul.downloads-plain { list-style: disc; }
ul.downloads-plain li { min-height: auto; }
ul.downloads-plain li p { margin: 0; }

/* der Hinweis, ab oder bis wann ein Modul freigeschaltet ist, setzt sich nach
   oben genauso ab wie die Ueberschrift ueber den Dateien und Links (h4) */
ul.cards li p.module-availability { margin-top: 30px; }

ul.contactpersons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px; /* Abstand zwischen den Spalten */
	list-style: none;
	padding-left: 0;
}

/* Die Terminlisten unter /termine sind schlichte Aufzählungen mit Punkt und
   engem Zeilenabstand – nicht die Karten-Optik von "ul.events" (Startseite). */
ul.event-dates { list-style: disc; list-style-position: outside; padding-left: 16px; }
ul.event-dates li { margin-bottom: 0; }
ul.event-dates li.passed { text-decoration: line-through; }

div.excercise { clear: both; padding-top: 50px; }
.contactpersons div { margin-bottom: 25px; }
h3.likeHeading2 + div.excercise { padding-top: 0; }
div.excercise div.answeroptions { float: left; width: 30%; padding-right: 5%; }
div.excercise div.answeroptions:nth-child(5) { padding-right: 0; }
div.excercise h3 { margin-top: 0; }
div.excercise h4 { font-weight: bold; margin-top: 10px; }
form.knowledge-excercise button { margin-top: 50px; }
p.incorrect span { color: red; font-weight: bold; }
p.correct span { color: green; font-weight: bold; }

p.videocomment_toggle { display: none; }
div.video { margin-top: 100px; }
p + div.video { margin-top: 50px; }
div.video h4 { margin-top: 0; padding-top: 0; }

@media (max-width: 820px) {
	#body { width: auto; margin: 0 20px; }
	#welcome_feedback, #welcome_facebook { width: 400px; float: none; margin: 0 auto; }
	#welcome_facebook { clear: both; padding-top: 10px; }
	#footer { width: auto; margin: 60px 20px 25px 20px; }
	#footer span { display: block; }
	#footer p { margin-bottom: 10px; }
	ul.answers li.spacer { display: none; }
	ul.answers { margin: 0 20%; }
	ul.answers li, ul.answers li.middle { width: 100%; margin-bottom: 10px; float: none; }
	ul.answers label { text-align: left; }
	ul.answers li.moreInfo label:after { content: ")"; }
	ul.answers li.moreInfo span:after { content: " ("; }
	ul.answers input { width: auto; }
	ul.answers span { display: inline; width: auto; margin-right: 0; }
	textarea { width: 93% !important; padding: 3% !important; }
	input[type=checkbox] {
		-ms-transform: scale(1); /* IE */
		-moz-transform: scale(1); /* FF */
		-webkit-transform: scale(1); /* Safari and Chrome */
		-o-transform: scale(1); /* Opera */
	}
	div.excercise div.answeroptions { width: 50%; padding: 0; }
	.contactpersons div { text-aligbn: center; width: 100%; margin: 25px 0 0 0; }
	.contactpersons div:last-child { margin-bottom: 40px; }
}
@media (max-width: 550px) {
	div.excercise div.answeroptions { width: 100%; padding: 0; }
	div.excercise h4 { margin-top: 20px; }
	form p + div.excercise h4 { margin-top: 10px; }
	ul.downloads-2-columns { columns: 1; -webkit-columns: 1; -moz-columns: 1; }
}

@media (max-width: 440px) {
	#welcome_feedback, #welcome_facebook { width: 100%; float: none; margin: 0; }
	#welcome_feedback { padding-top: 35px; }
	#welcome_facebook { clear: both; padding-top: 50px; }
	#footer { width: auto; margin-left: auto; margin-right: auto; }
}

@media (max-width: 320px) {
	#feedbackCodeForm input { width: 160px; }
}

table.selfassessment { width: calc(100%); margin-top: 0; }
table.selfassessment th { border-bottom: 1px solid #fff; }
form table.selfassessment th { border-bottom: none; }
table.selfassessment th:nth-child(1) { width: 95px; padding-right: 5px; }
table.selfassessment textarea { padding: 5px; font-family: Arial, "Sans-Serif"; font-size: 18px; line-height: 1.5em; resize: none; }
table.selfassessment tr td:nth-child(1) textarea { width: calc(100% - 5px); }
table.selfassessment tr td:nth-child(2) textarea { width: 100%; }

table.selfassessment-summary { width: 100%; }
table.selfassessment-summary tr td:nth-child(1) { width: 239px; padding-right: 22px; text-align: right; font-weight: bold; }

form.selfassessment { width: 100%; }
form.selfassessment label { display: block; width: 219px; text-align: right; float: left; padding: 1px 22px 0 0; }
form.selfassessment label.mandatory { padding-right: 10px; width: 230px; }
form.selfassessment label.mandatory:after { content: " *"; color: #d4b179; }
form.selfassessment div input { float: left; font-size: 16px; font-family: Arial, "Sans-Serif"; }
form.selfassessment div input#referee { width: calc(100% - 260px); }
form.selfassessment div input#match_number,
form.selfassessment div input#match_competition,
form.selfassessment div input#match_date,
form.selfassessment div input#club_host,
form.selfassessment div input#club_guest,
form.selfassessment div input#referee_assistent_1,
form.selfassessment div input#referee_assistent_2,
form.selfassessment div input#referee_coach { width: calc((100% - 337px)/2); }
form.selfassessment div span { display: block; float: left; width: 65px; text-align: center; }
form.selfassessment div { width: 100%; height: 40px; }
form.selfassessment input[type='checkbox'] { margin: 7px 5px 0 10px; }
form.selfassessment input[type='checkbox'] + label { text-align: center; width: auto; }
form.selfassessment table.grades { width: 100%; text-align: center; }
form.selfassessment table.grades thead th { width: calc(100%/7); }
form.selfassessment table.grades label { text-align: center; width: 100%; }
form.selfassessment textarea,
form.selfassessment input { background: #aaa; border: 1px solid #fff; padding: 5px; font-size: 18px; }
form.selfassessment textarea:focus,
form.selfassessment input:focus{ background: #fff; }

p.selfassessment-no-situations { text-align: center; font-style: italic; }

table.selfassessment textarea {
	padding: 5px; box-sizing: border-box;
	height: 36px;
	min-height: 36px;
	overflow: hidden;
	font-size: 16px;
}

.slider span { font-size: 40px; padding-top: 44px; }
.slider span:hover {
	cursor: pointer;
	color: #d4b179;
}

.accordion {
	width: 100%;
	max-width: 360px;
	margin: 20px auto 0;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	list-style-type: none;
	padding-left: 0;
}

.accordion .link {
	cursor: pointer;
	display: block;
	color: #d4b179;
	position: relative;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.accordion .link p { padding-right: 25px; }

.accordion li:last-child .link { border-bottom: 0; }

.accordion li .link i {
	position: absolute;
	top: 0px;
	left: 12px;
	font-size: 18px;
	color: #d4b179;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.accordion li .link i.fa-chevron-down {
	padding-top: 6px;
	right: 12px;
	left: auto;
	font-size: 16px;
}

.accordion li.open .link { color: #d4b179; }

.accordion li.open .link i { color: #d4b179; }

.accordion li.open .link i.fa-chevron-down {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

/**
 * Submenu
 -----------------------------*/
.submenu {
	display: none;
	list-style-type: none;
}

.submenu a {
	color: #fff;
	padding: 3px 0;
	-webkit-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.submenu li:before {
	content: "- ";
}

.submenu li.no-before:before {
	content: none;
}



/* tabs */
.tabs {
    margin-top: 60px;

    .tabs__pills .btn {
        box-sizing: border-box;
        display: inline;
        width: auto;
        font-size: 18px;
        height: auto;
        padding: 0 25px 2px;
        background: transparent;
        color: #fff;
        outline: transparent;
        border: transparent;
        transition: 300ms click ease-in-out;
        font-weight: normal;
        @media only screen and (max-width: 576px) {
            padding: 10px 8px;
        }

        &:hover {
            color: #d4b179;
        }

        &.active {
            color: #d4b179;
            border-bottom: 2px solid #d4b179;

            &::after {
                content: '';
                width: 100%;
                height: 2px;
                position: absolute;
                bottom: -2px;
                left: 0;
            }
        }
    }
}

.tabs {
    .tabs__pills {
        border-bottom: 1px solid #fff;
        /* eine feste Höhe ließe die Reiter, sobald sie auf schmalen Geräten
           umbrechen, in den Inhalt darunter laufen */
        min-height: 26px;
    }

    .tabs__panels {
        padding: 20px 0;
        > div {
            width: 100%;
            display: none;
            gap: 20px;

            > div {
                > h4 {
                    font-size: 24px;
                    margin: 10px 0;
                }
            }
        }

        > div.active {
            display: block;

            @media only screen and (max-width: 978px) {
                flex-direction: column;
            }
        }
    }
}



/* Monatskalender der Terminverwaltung */
.event-calendar {
    margin: 30px 0 60px;

    /* die beiden Monate stehen nebeneinander. Jeder bringt seine eigene
       Beschriftung mit, damit sie bei ihrem Monat bleibt */
    .event-calendar__months {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;

        /* auf schmalen Geräten ist für den zweiten Monat kein Platz; statt ihn
           umbrechen zu lassen, bleibt nur der angezeigte Monat stehen. Zu ihm
           lässt sich mit dem Pfeil nach rechts ohnehin weiterblättern */
        @media only screen and (max-width: 700px) {
            grid-template-columns: minmax(0, 1fr);

            .event-calendar__month + .event-calendar__month { display: none; }
        }
    }

    .event-calendar__monthname {
        display: block;
        margin-bottom: 15px;
        font-family: "LemonMilk", Arial, sans-serif;
        font-size: 22px;
        font-weight: bold;
        line-height: 40px;
        text-align: center;

        @media only screen and (max-width: 576px) {
            font-size: 18px;
        }
    }

    /* die Pfeile sind wie im Quiz bloße Symbole: kein Rahmen, keine Fläche.
       Als Schaltflächen brauchen sie dafür die Formularbutton-Maße abgeräumt.
       Sie liegen an den Außenkanten auf Höhe der Monatsnamen — dort ist neben
       der mittigen Beschriftung Platz genug */
    .event-calendar__nav {
        position: absolute;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        width: auto;
        min-width: 0;
        height: 40px;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        color: #fff;
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
        transition: color 150ms ease-out;

        &[data-step="-1"] { left: 0; }
        &[data-step="1"] { right: 0; }

        &:hover,
        &:focus { color: #d4b179; }
    }

    .event-calendar__grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        /* zwischen den Spalten bleibt kein Abstand, sonst zerfiele die Linie
           unter den Wochentagen in sieben Striche */
        row-gap: 4px;
    }

    .event-calendar__weekday {
        padding: 5px;
        font-style: italic;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px solid #e6e6e4;
    }

    /* ein Tag ist nur seine Zahl; die Zellen der Nachbarmonate bleiben leer und
       füllen lediglich die angebrochenen Wochen auf */
    .event-calendar__day {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;

        /* der heutige Tag trägt immer einen weißen Ring — ob mit oder ohne
           Termin. Der Ring liegt als innerer Schatten über der Fläche und
           bleibt deshalb auch auf dem gefüllten Kreis sichtbar */
        &.is-today .event-calendar__daynumber { box-shadow: inset 0 0 0 2px #fff; }

        /* Tage mit einem zugesagten Termin (persönlicher Terminkalender)
           tragen einen goldenen Ring; die Regel steht nach der des heutigen
           Tages und gewinnt deshalb, wenn beides zutrifft */
        &.has-accepted .event-calendar__daynumber { box-shadow: inset 0 0 0 2px #d4b179; }

        /* nur Tage mit Terminen lassen sich anklicken: sie tragen einen grauen
           Kreis, der beim Überfahren golden wird */
        &.is-clickable {
            cursor: pointer;

            .event-calendar__daynumber { background: #6b6b6b; }

            &:hover .event-calendar__daynumber,
            &:focus-visible .event-calendar__daynumber {
                background: #d4b179;
                color: #28272c;
            }
        }

        /* der Tag, dessen Termine unter dem Kalender stehen */
        &.is-selected .event-calendar__daynumber {
            background: #d4b179;
            color: #28272c;
        }
    }

    /* die Zahl ist zugleich der Kreis: als Kasten mit gleicher Höhe und Breite
       und rundem Rand, gefüllt nur an Tagen mit Terminen */
    .event-calendar__daynumber {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 15px;
        transition: background-color 150ms ease-out, color 150ms ease-out;
    }

    /* die Termine des angeklickten Tages unter dem Kalender */
    .event-calendar__details { margin-top: 70px; }

    /* der Aufbau eines Termins entspricht dem persönlichen Terminkalender —
       großes goldenes Termin-Icon links, Texte rechts daneben —, nur ohne
       dessen goldenen Rahmen */
    .event-calendar__detailslist {
        list-style: none;
        margin: 0;
        padding: 0;

        > li {
            /* der Abschnitt umschließt das gleitende Icon auch dann, wenn die
               Texte daneben kürzer sind als das Icon hoch ist */
            display: flow-root;
            /* dieselbe Box wie die Terminabschnitte der Terminliste: heller
               Rahmen, runde Ecken und rundum derselbe Innenabstand */
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 24px;
            padding: 20px 20px 20px 9px;
            margin-bottom: 25px;

            &:last-child { margin-bottom: 0; }

            /* der letzte Absatz schließt bündig ab, damit unten derselbe
               Innenabstand steht wie oben */
            > *:last-child { margin-bottom: 0; }
        }

        > li > i:first-child {
            display: block;
            float: left;
            width: 60px;
            min-width: 60px;
            text-align: center;
            font-size: 40px;
            line-height: 1.1em;
            color: #d4b179;
        }

        h3,
        p,
        div {
            margin-left: 65px;
            font-size: 18px;
            font-weight: normal;
        }

        h3 {
            margin-top: 0;
            font-weight: bold;
        }

        /* das Icon im Hinweis steht in der Zeile, nicht als Blockmarke davor */
        p i {
            float: none;
            display: inline;
            width: auto;
            min-width: 0;
            margin-right: 3px;
            font-size: inherit;
            color: #fff;
        }

        a {
            color: #e6e6e4;

            &:hover,
            &:focus { color: #d4b179; }
        }
    }
}



.only-print { display: none; }

@media print {
	/* der Kopf bleibt bewusst stehen, er trägt das Logo; die Fußzeile gehört
	   dagegen nicht aufs Papier */
	.no-print,
	footer { display: none; }

	/* der Cookie-Hinweis wird vom Plugin per JavaScript eingehängt und kann
	   deshalb keine "no-print"-Klasse aus dem Markup mitbringen. Beim Einblenden
	   schreibt das Plugin ein "display: block" direkt ans Element, dagegen kommt
	   nur ein !important an */
	.eupopup-container { display: none !important; }

	/* auf Papier bleibt der Grund weiß – auch wenn im Druckdialog
	   "Hintergrundgrafiken drucken" eingeschaltet ist, sonst stünde der
	   schwarze Text auf dem dunklen Grund des Bildschirmlayouts */
	*,
	*::before,
	*::after {
		background: none !important;
	}

	.only-print { display: block; }

	/* das Logo im Kopf ist ein Bild in einer Zeile und bleibt es auch beim
	   Druck – als Block stünde die schwarz-weiße Fassung nicht mehr mittig */
	header .only-print { display: inline; }

	/* eine Tabellenzelle bleibt eine Tabellenzelle: als Block fiele sie aus dem
	   Tabellenlayout heraus, und bei "table-layout: fixed" stimmten damit die
	   Spaltenbreiten der ganzen Tabelle nicht mehr */
	th.only-print,
	td.only-print { display: table-cell; }

	h2,
	div.messagebox {
		color: #000;
	}

	/* Seiten, die zum Ausdrucken gedacht sind (Teilnehmerlisten von Terminen),
	   drucken jeden Text schwarz: Überschriften, Tabellen, Ankreuzkästchen und
	   Hinweisboxen gleichermaßen. Das !important ist hier nötig, weil die
	   Farben des Bildschirmlayouts teils spezifischer gesetzt sind als eine
	   Regel am body (z.B. ".messagebox a") und teils direkt am Element stehen */
	body.print-black,
	body.print-black * {
		color: #000 !important;
	}

	.admintable thead tr th { border-bottom: 1px solid #000; }
	.admintable tbody tr td { border-bottom: 1px solid #aaa; }

	/* auf Papier entfällt die Datumsspalte, an ihre Stelle tritt die Spalte zum
	   Abhaken. Die braucht nur so viel Platz, wie das Kästchen samt Zellenpolster
	   einnimmt; der ganze Rest gehört Name und E-Mail-Adresse. Weil alle drei
	   Abschnitte (Zusagen, Absagen, keine Rückmeldung) dieselben Breiten
	   bekommen, stehen ihre Spalten weiterhin in einer Flucht */
	table.participantlist th.column-name,
	table.participantlist th.column-email { width: calc((100% - 25px) / 2); }
	table.participantlist th.column-check  { width: 25px; }
}

.to-top {
	position: fixed;
	bottom: 20px;
	color: #ffffff;
	text-decoration: none;
	right: 20px;
	translate: 80px 0;
	transition: all 0.4s ease, border-color 0.4s ease;
	font-size: 40px;

	&:hover {
		color: #d4b179;
	}
}

@container scroller scroll-state(scrollable: top) {
	.to-top {
		translate: 0 0;
	}
}

.answers_or_options, .explanation {
	margin-top: 35px;
}

.test_result {
	text-align: center;
	font-family: "LemonMilk", Arial, sans-serif;
	letter-spacing: 1px;
	font-weight: bold;
	line-height: 1.5em;
	font-size: 22px;
	margin-bottom: 22px;
	margin-top: 22px;
}

.grid-card-container {
	display: grid;
	gap: 20px;
}

.grid-card-container-2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid-card-container-3 {
	grid-template-columns: repeat(3, 1fr);
}

ol > li::marker {
	font-weight: bold;
}

ol li {
	margin-bottom: 10px;
}

.box-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 70px;
	align-items: stretch;

	.box {
		margin-top: 0;
	}

	/* spacing inside the grid is handled by "gap"; override the global
	   ".box + .box" top margin so the boxes in a row stay aligned and the
	   grid can stretch them to the tallest box's height */
	.box + .box {
		margin-top: 0;
	}

	/* on small screens two columns get too narrow, the boxes are stacked
	   there – same breakpoint the rest of the content switches at */
	@media (max-width: 820px) {
		grid-template-columns: 1fr;
	}
}

.box {
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 24px;
	padding: 20px 35px;
	margin-top: 70px;
	border-left: 5px solid rgba(255, 255, 255, 0.07);

	h3 {
		margin-top: 0;
	}

	.contactpersons {
		margin-bottom: 0;

		li p:last-child {
			margin-bottom: 0;
		}
	}

	i {
		font-size: 48px;
		float: left;
		color: rgba(255, 255, 255, 0.07);
	}

	p:last-child { margin-bottom: 0; }
}

.box + .box {
	margin-top: 35px;
}

.box-highlight, .box:hover {
	border-left: 5px solid #d4b179;

	i {
		color: #d4b179;
	}

	li {
		margin-bottom: 10px;
	}

	li:last-child, ul:last-child {
		margin-bottom: 0;
	}
}

.box:has(i) {
	min-height: 52px;

	p {
		margin-left: 80px;
	}
}

/* Die Downloads-Box der Teilnehmer-Ansicht (der Downloads-Block einer Kursseite
   ebenso wie die Anhänge eines Moduls oder Kurses) enthält Icons, aber nicht als einzelnes
   Symbol neben dem Text, sondern eines je Listeneintrag. Die Einleitung über
   der Liste darf deshalb nicht wie in einem Hinweis-Kasten eingerückt werden –
   der Einzug der Einträge kommt aus der ul.downloads-Regel. */
.box.box-downloads > p {
	margin-left: 0;
}

/* Abstand der Einträge wie in den Listen der Startseite: die 10px, die
   .box-highlight seinen Listen gibt, sind hier zu wenig, sobald ein Eintrag
   noch eine Beschreibung mitbringt. Derselbe Abstand trennt die Liste von der
   Einleitung darüber – er fällt mit deren unterem Rand zusammen, es zählt also
   der größere der beiden Werte. */
.box.box-downloads ul.downloads {
	margin-top: 30px;
}

.box.box-downloads ul.downloads > li {
	margin-bottom: 30px;
}

.box.box-downloads ul.downloads > li:last-child {
	margin-bottom: 0;
}

/* die Beschreibung schließt direkt an die Titelzeile an; getrennt werden erst
   die Einträge untereinander */
.box.box-downloads ul.downloads > li p {
	margin-bottom: 0;
}

div.video-container {
	margin-top: 50px;
	width: 100%;
	height: 600px;
	background: rgba(170, 170, 170, 0.1);
	color: rgb(170, 170, 170);
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "LemonMilk", Arial, sans-serif;
	font-size: 22px;
}

#accordion .submenu i { position: static; left: auto; right: auto; font-size: inherit; padding-top: 0; }
#accordion .submenu .messagebox a { color: #d4b179; }
#accordion .submenu .adminoptions i { color: #fff; }
#accordion .submenu .adminoptions a { color: #fff; }
#accordion .submenu li:before { content: none; }
#accordion > li > .link p { font-weight: bold; font-size: 18px; }
#accordion > li {
	border: 1px solid rgba(255, 255, 255, 0.07);
	padding: 10px 20px;
	margin-bottom: 20px;
	border-radius: 24px;
}
#accordion h3 { margin-top: 10px; }
/* keeps child margins contained after the slide animation removes its inline
   overflow, otherwise they collapse through the padding-less submenu and the
   content jumps up in the last frame */
#accordion .submenu { overflow: hidden; }
/* module sections styled like the participant's course view (ul.cards) */
#accordion > li > .ribbon { display: block; float: left; font-size: 40px; color: #d4b179; width: 50px; line-height: 60px; text-align: center; }
#accordion > li > .ribbon i { margin-bottom: 10px; }
#accordion > li.disabled, #accordion > li.disabled i, #accordion > li.disabled h3.likeHeading2 { color: #aaa; }

/* Lückentext-Block einer Kursseite: der Text steht zunächst mit Lücken da, das
   Auge hinter jeder Lücke blendet genau deren Lösung ein und wieder aus,
   gesteuert über die Klasse "cloze-gap--revealed" an der jeweiligen Lücke
   (cf. _partials/trainingCourseClozeBlock). */
.cloze {
	margin-bottom: 35px;

	/* Lücke und Auge gehören zusammen und dürfen nicht auf zwei Zeilen
	   auseinandergerissen werden. Im Markup steht zwischen beiden kein
	   Leerzeichen, das nowrap sichert es zusätzlich ab */
	.cloze-gap { white-space: nowrap; }

	/* Die Lösung steckt schon in der Lücke und wird nur unsichtbar geschaltet:
	   so ist der Strich genau so lang wie das gesuchte Wort und beim Aufdecken
	   rückt kein Zeichen und keine Zeile nach. Alles, was die Breite bestimmt
	   (Schriftschnitt, Innenabstand, Mindestbreite), muss deshalb in beiden
	   Zuständen gleich bleiben – nur die Farbe darf wechseln. */
	.cloze-blank {
		display: inline-block;
		min-width: 3ch;
		margin: 0 2px;
		border-bottom: 2px solid #d4b179;
		font-weight: bold;
		text-align: center;
	}

	.cloze-solution {
		visibility: hidden;
	}

	/* der Schalter ist nur das Auge: die allgemeinen Button-Regeln (goldener
	   Block über die ganze Breite) werden dafür zurückgenommen. Beide Augen
	   stehen im Markup, das fa-fw gibt ihnen dieselbe Breite – so bleibt der
	   Schalter beim Umschalten genau gleich breit und der Text rückt nicht */
	.cloze-reveal {
		display: inline-block;
		vertical-align: baseline;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0 0 0 2px;
		background: none;
		border: none;
		font: inherit;
		font-size: 0.85em;
		color: #d4b179;
		cursor: pointer;
	}

	.cloze-reveal:hover:enabled { color: #e6e6e4; }

	.cloze-reveal .fa-eye-slash { display: none; }
}

.cloze-gap--revealed {
	/* der Strich wird nur durchsichtig, nicht entfernt: der Rahmen bleibt so
	   Teil des Layouts und die Zeilen behalten ihre Höhe */
	.cloze-blank {
		border-bottom-color: transparent;
	}

	.cloze-solution {
		visibility: visible;
		color: #d4b179;
	}

	.cloze-reveal .fa-eye { display: none; }
	.cloze-reveal .fa-eye-slash { display: inline-block; }
}

/* FAQ-Block einer Kursseite: Frage-Antwort-Paare als Definitionsliste. Die
   Frage ist ein Schalter, der genau ihre eigene Antwort auf- und wieder
   zuklappt – andere offene Antworten bleiben offen
   (cf. _partials/trainingCourseFaqBlock). */
.faq {
	margin-bottom: 35px;

	/* derselbe Abstand wie zwischen zwei Eintraegen: der Abstand nach dem
	   Einleitungstext faellt mit diesem zusammen, es zaehlt also der groessere
	   der beiden Werte */
	.faq-list { margin: 20px 0 0 0; }

	.faq-entry { margin-bottom: 20px; }

	/* Frage und Antwort stehen in einer Flucht: das Icon sitzt links daneben in
	   einer eigenen Spalte von 14px, danach 10px Abstand – dieselben 24px
	   ruecken die Antwort ein. Schrift wie im Fliesstext, nur fett. */
	.faq-question {
		display: flex;
		align-items: baseline;
		gap: 10px;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		background: none;
		border: none;
		font: inherit;
		font-weight: bold;
		color: #e6e6e4;
		text-align: left;
		cursor: pointer;
	}

	.faq-question:hover { color: #d4b179; }

	/* die Absaetze einer Frage sind Spans (ein Button vertraegt kein <p>), sie
	   werden hier zu Bloecken. Eine einzeilige Frage sieht damit aus wie zuvor:
	   Abstand steht nur zwischen zwei Absaetzen, nicht darueber oder darunter */
	.faq-question-text span { display: block; }
	.faq-question-text span + span { margin-top: 10px; }

	.faq-question i {
		flex: 0 0 14px;
		color: #d4b179;
		font-size: 14px;
		text-align: center;
		transition: transform 0.2s ease-in-out;
	}

	.faq-answer { margin: 10px 0 0 24px; }

	/* der Abstand unter der letzten Zeile kommt vom Eintrag selbst, sonst
	   stuende hier mehr Luft als zwischen zwei Eintraegen. Gilt fuer den
	   letzten Absatz ebenso wie fuer eine Liste, mit der die Antwort endet */
	.faq-answer > :last-child { margin-bottom: 0; }
}

/* nur wenn das Skript des Blocks gelaufen ist, sind die Antworten zugeklappt –
   ohne JavaScript bleiben sie sichtbar statt unerreichbar */
.faq--interactive {
	.faq-answer { display: none; }

	.faq-entry--open .faq-answer { display: block; }

	.faq-entry--open .faq-question i { transform: rotate(90deg); }
}

/* Checklisten-Block einer Kursseite: abzuhakende Punkte und darunter ein
   Aufruf, der erst freigeschaltet wird, wenn alle Haken gesetzt sind
   (cf. _partials/trainingCourseChecklistBlock). */
.checklist {
	margin-bottom: 35px;

	/* das padding-left der allgemeinen ul-Regel muss weg, sonst stuenden die
	   Schalter gegenueber dem uebrigen Text eingerueckt (wie bei ul.domains) */
	.checklist-items {
		list-style: none;
		padding-left: 0;
		margin: 15px 0 25px 0;

		li { margin-bottom: 15px; }
		li:before { content: none; }
	}

	/* die ganze Zeile schaltet den Punkt, nicht nur der Schalter davor */
	.checkbox-wrapper {
		display: flex;
		align-items: flex-start;
		cursor: pointer;
	}

	/* der Abstand zum Text ist doppelt so gross wie der der allgemeinen
	   .checkbox-wrapper-Regel (8px), die Zeilen stehen hier luftiger */
	.checkbox-wrapper input[type=checkbox] {
		cursor: pointer;
		margin-top: 3px;
		margin-right: 16px;
	}

	/* die Absaetze eines Punktes sind Spans (ein Label vertraegt kein <p>), sie
	   werden hier zu Bloecken. Ein einzeiliger Punkt sieht damit aus wie zuvor:
	   Abstand steht nur zwischen zwei Absaetzen, nicht darueber oder darunter
	   (wie bei der Frage eines FAQ-Blocks) */
	.checklist-item-text span { display: block; }
	.checklist-item-text span + span { margin-top: 10px; }

	/* wie der Button des Lückentexts, nur als Link */
	.checklist-cta {
		display: inline-block;
		width: auto;
		height: auto;
		padding: 10px 25px;
		border-radius: 10px;
		font-size: 16px;
		color: #28272c;
		text-decoration: none;
	}

	/* solange nicht alles abgehakt ist, ist der Aufruf grau und tot. Die Maße
	   bleiben dieselben, damit beim Freischalten nichts springt – es wechseln
	   nur die Farben. */
	.checklist-cta--disabled,
	.checklist-cta--disabled:hover {
		background: #ccc;
		border-color: #ccc;
		color: #28272c;
		cursor: not-allowed;
	}
}