/*

********************************************************************************

forms.css

Stylesheets für Hueber.de Formulare

Version: 	1.5
Datum: 		13.12.2023

Erfordert: 	-

Hinweise: 	-

Historie:

1.5 (13.12.2023)	- Container-Query statt Media-Query
					- Optimierungen für deaktivierte Felder
					- :is()-Selektor

1.2 (13.04.2023)	- Optimierungen in den Buttonleisten

1.1 (20.02.2023)	- Kleine Optimierungen

1.0 (07.02.2023) 	- Ausgegliedert aus master.css

********************************************************************************

*/

:root
{
	--global-input-border-color: var(--mediumlight-line-color);
	--global-input-hover-border-color: var(--medium-line-color);

	--global-uibutton-color: #444;
	--global-uibutton-float-bg-color: rgba(74, 74, 74, .8);
	--global-uibutton-bg-color: rgba(255, 255, 255, .8);
	--global-uibutton-border-color: rgba(0, 0, 0, .4);
	--global-uibutton-boxshadow: none;

	--global-uibutton-selected-color: white;
	--global-uibutton-selected-bg-color: #e11138;
	--global-uibutton-selected-border-color: #e11138;
	--global-uibutton-selected-boxshadow: none;

	--global-uibutton-hover-color: #222;
	--global-uibutton-hover-bg-color: rgb(255, 255, 255, .9);
	--global-uibutton-hover-border-color: rgba(0, 0, 0, .6);
	--global-uibutton-hover-boxshadow: none;

	--global-uibutton-active-border-color: rgba(150, 150, 150, .85);
	--global-uibutton-active-boxshadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.35);

	--input-border-color: var(--global-input-border-color);
	--input-hover-border-color: var(--global-input-hover-border-color);

	--input-hairlineborder: var(--thin-line-width) solid var(--input-border-color);
	--input-border: var(--light-line-width) solid var(--input-border-color);
	--input-transparent-border: var(--light-line-width) solid transparent;

	--uibutton-color: var(--global-uibutton-color);
	--uibutton-bg-color: var(--global-uibutton-bg-color);
	--uibutton-border-color: var(--global-uibutton-border-color);
	--uibutton-boxshadow: var(--global-uibutton-boxshadow);

	--uibutton-selected-color: var(--global-uibutton-selected-color);
	--uibutton-selected-bg-color: var(--global-uibutton-selected-bg-color);
	--uibutton-selected-border-color: var(--global-uibutton-selected-border-color);
	--uibutton-selected-boxshadow: var(--global-uibutton-selected-boxshadow);

	--uibutton-hover-color: var(--global-uibutton-hover-color);
	--uibutton-hover-bg-color: var(--global-uibutton-hover-bg-color);
	--uibutton-hover-border-color: var(--global-uibutton-hover-border-color);
	--uibutton-hover-boxshadow: var(--global-uibutton-hover-boxshadow);

	--uibutton-active-border-color: var(--global-uibutton-active-border-color);
	--uibutton-active-boxshadow: var(--global-uibutton-active-boxshadow);

	--uibutton-horizontal-padding: 1.4em;
	--uibutton-vertical-padding: 1em;
}

/* Formularfelder */

input:is([type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]),
select,
textarea
{
	border: var(--input-border);
	font-family: var(--body-font);
	font-size: .9rem;
	text-align: left;
}

input:is([type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]),
textarea
{
	border-radius: var(--small-border-radius);
	padding: .1rem .5rem;
}

input:is([type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]),
select,
select:is([size="0"], [size="1"])
{
	height: 2.4em;
}

input[type="search"] 
{
	border-radius: var(--round-button-border-radius);
	padding: .2rem .6rem;
}

input[type="search"] ~ button[name="submitbt"]
{
	position: absolute;
	right: 4px;
	z-index: 1;
}

select 
{
	border-radius: var(--medium-border-radius);
}

select, 
select:is([size="0"], [size="1"])
{
	appearance: none;
	background-image: url(/assets/images/openselectbt.svg);
	background-position: right .5em center;
	background-repeat: no-repeat;
	padding: .4em 1.8em .4em .8em;
}

select::-ms-expand 
{
	display: none;
}

.formfieldh 
{
	display: none !important;
}


/* Buttons */

.uibutton
{
	align-items: center;
	background: var(--uibutton-bg-color);
	border: 1px solid var(--uibutton-border-color);
	border-radius: var(--squarish-button-border-radius);
	box-shadow: var(--uibutton-boxshadow);
	color: var(--uibutton-color);
	display: inline-flex;
	flex-flow: row wrap;
	font-family: "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
	font-size: 1em;
	font-weight: normal;
	gap: .2em .3em;
	justify-content: center;
	line-height: 1.1;
	min-height: 1.7em;
	min-width: 1.7em;
	padding-bottom: var(--uibutton-vertical-padding);
	padding-left: var(--uibutton-horizontal-padding);
	padding-right: var(--uibutton-horizontal-padding);
	padding-top: var(--uibutton-vertical-padding);
	text-decoration: none;
	text-shadow: none;
}

.uibutton.icon
{
	--uibutton-horizontal-padding: .4em;
	--uibutton-vertical-padding: .2em;
}

.uibutton.xs
{
	--uibutton-horizontal-padding: .2em;
	--uibutton-vertical-padding: .1em;

	font-size: var(--small-font-size);
}

.uibutton.large
{
	--uibutton-horizontal-padding: .8em;
	--uibutton-vertical-padding: .4em;
}

@media (max-width: 767px)
{
	.uibutton.large
	{
		font-size: 1.2em;
	}

	.uibutton.largeicon > .wui
	{
		font-size: 1.65em;
	}
}

@media (min-width: 768px)
{
	.uibutton.large
	{
		font-size: 1.3em;
	}

	.uibutton.largeicon > .wui
	{
		font-size: 1.85em;
	}
}

.uibutton.round
{
	border-radius: var(--round-button-border-radius);
	height: 3em;
	width: 3em;
}

.uibutton.global
{
	border-color: var(--global-uibutton-border-color);
	box-shadow: var(--global-uibutton-boxshadow);
	color: var(--global-uibutton-color);
}

.uibutton:not(.global),
button:not(.global),
input[type="submit"]:not(.global)
{
	box-shadow: var(--uibutton-boxshadow);
	color: var(--uibutton-color);
}

.uibutton:not(:disabled)
{
	cursor: pointer;
}

.uibutton:hover
{
	text-decoration: none;
}

.uibutton.invisible
{
	min-width: initial;
}

.uibutton:not(.invisible):disabled
{
	opacity: .4;
	pointer-events: none;
}

.uibutton:not(.invisible):not(.nohover):not(:disabled):hover
{
	background-color: var(--uibutton-hover-bg-color);
	border-color: var(--uibutton-hover-border-color);
	box-shadow: var(--uibutton-hover-boxshadow);
	color: var(--uibutton-hover-color);
}

.uibutton:not(.invisible):active:not(:disabled)
{
	-webkit-backdrop-filter: brightness(85%);
	backdrop-filter: brightness(85%);
	border-color: var(--uibutton-active-border-color);
	box-shadow: var(--uibutton-active-boxshadow);
}

.uibutton,
.uibutton > *
{
	transition: transform .1s ease-in-out;
	transform: scale(1);
}

.uibutton:active:not(:disabled),
.uibutton:active:not(:disabled) > *
{
	transform: scale(.95);
}

.uibutton.invisible,
.uibutton.invisible.nohover:not(.selected):hover
{
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: var(--global-uibutton-color);
}

.uibutton > .wui
{
	font-size: 1.65em;
}

.uibutton.round > .wui
{
	line-height: .5;
}

.uibutton > span + .wui
{
	order: 1;
}

.uibutton > span
{
	text-align: center;
}

.uibutton > .wui
{
	display: inline-block;
}

.uibutton > span:not(:only-child)
{
	order: 2;
}

.uibutton.global:not(.invisible),
button.global:not(.invisible),
input[type="submit"].global:not(.invisible)
{
	background: var(--global-uibutton-bg-color);
	border: 1px solid var(--global-uibutton-border-color);
}

.uibutton:not(.global):not(.invisible),
button:not(.global):not(.invisible),
input[type="submit"]:not(.global):not(.invisible)
{
	background: var(--uibutton-bg-color);
	border: 1px solid var(--uibutton-border-color);
}

.uibutton:not(.invisible):active:not(:disabled),
button:not(.invisible):active:not(:disabled),
input[type="submit"]:not(.invisible):active:not(:disabled)
{
	-webkit-backdrop-filter: brightness(85%);
	backdrop-filter: brightness(85%);
	border-color: var(--uibutton-active-border-color);
	box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.35);
}

.uibutton.selected:not(:disabled),
button.selected:not(:disabled),
input[type="submit"].selected:not(:disabled),
.uibutton.selected:hover,
button.selected:hover:not(:disabled),
input[type="submit"].selected:hover:not(:disabled)
{
	background-color: var(--uibutton-selected-bg-color) !important;
	border-color: var(--uibutton-selected-border-color) !important;
	color: var(--uibutton-selected-color) !important;
}

.uibutton,
.uibutton > *,
button,
button > *,
input[type="submit"],
input[type="submit"] > *
{
	transition: transform .1s ease-in-out;
	transform: scale(1);
}

.uibutton:active:not(:disabled),
.uibutton:active:not(:disabled) > *,
button:active:not(:disabled),
button:active:not(:disabled) > *,
input[type="submit"]:active:not(:disabled),
input[type="submit"]:active:not(:disabled) > *
{
	transform: scale(.95);
}

.uibutton.invisible:active:not(:disabled),
button.invisible:active:not(:disabled),
input[type="submit"].invisible:active:not(:disabled)
{
	border-color: transparent;
	box-shadow: none;
}

.uibutton > img,
button > img,
button.submitbt > img,
input[type="submit"].submitbt > img
{
	height: 23px;
	max-width: none;
	padding: 0;
	width: 23px;
}

.uibutton.additem,
.uibutton.additem:hover
{
	background-color: rgb(29, 131, 12);
	border-color: rgb(29, 131, 12);
}

.extendedtextbt
{
	background-color: var(--light-content-color) !important;
	border-color: var(--light-content-color) !important;
	border-radius: var(--small-border-radius) !important;
	color: white !important;
	padding: .1em;
}

/* Formulare */

.form
{
	line-height: var(--p-line-height);
	position: relative;
}

.form .formintro .interaction:not(.error) > .artikel:first-child
{
	margin-top: 0;
}

.form .formintro .interaction:not(.error) > .artikel:last-child
{
	margin-bottom: 0;
}

.form ul
{
	margin-top: 0;
}

.form > .artikel > ul:not(:first-child),
div.formintro > div + div,
div.formintro + form,
div.formintro + ul
{
	margin-top: var(--p-margin-top);
}

.form ul:not(.list)
{
	container-name: in-parent in-form;
	list-style: none;
	list-style-position: outside;
	margin: 0;
	padding: 0;
	position: relative;
}

.form ul:not(.list),
.form ul:not(.list) > li
{
	padding-left: 0 !important;
}

.form ul:not(.list) li
{
	display: block;
}

.form.top ul li,
.form ul:not(.list) li:is(.top, .vertical),
.form ul:not(.list) li:not(.sectionlabel):not(.buttonbar):not(.line):not(.floatingcontent),
.form ul:not(.list) li.grid > :is(.content, .group)
{
	display: grid;
}

.form.top ul li,
.form ul:not(.list) li:is(.top, .vertical)
{
	grid-template-rows: auto;
}

.form ul:not(.list) li.searchbar
{
	grid-template-columns: 1fr fit-content(100%);
}

@container (width < 420px)
{
	.form ul:not(.list) li .uibutton,
	.form ul:not(.list) li button
	{
		width: 100%;
	}
}

@container (width > 375px) and (width < 500px)
{
	.form ul:not(.list) li.grid > :is(.content, .group)
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@container (width > 499px)
{
	.form ul:not(.list) li.grid > :is(.content, .group)
	{
		grid-template-columns: repeat(3, 1fr);
	}
}

@container (width > 567px)
{
	.form:not(.top) ul:not(.list) li:not(.searchbar):not(.top)
	{
		grid-template-columns: minmax(150px, 25%) auto;
	}

	.form.top li
	.form li:is(.top, .vertical, .sectionlabel, .line, .floatingcontent)
	{
		grid-template-columns: 100%;
	}

	.form ul.orderlist > li,
	.form ul:not(.list) li.orderitem
	{
		grid-template-columns: minmax(3em, 15%) auto;
	}

	.form ul:not(.list) li > ul
	{
		grid-column: 1/-1;
	}
}

.form ul:not(.list) li.searchbar .uibutton span
{
	display: none !important;
}

.form.lightui ul:not(.list) li:not(.sectionlabel):not(.buttonbar)
{
	padding: .1em 0;
}

.form:not(.lightui) ul:not(.list) li:not(.sectionlabel):not(.buttonbar)
{
	padding: .3em .4em;
	background-color: #f4f4f4;
}

.form ul:not(.list) li.floatingcontent
{
	display: flex;
	flex-flow: row wrap;
	gap: .8em var(--p-margin-top);
}

.form ul:not(.list) li.floatingcontent:empty
{
	display: none;
}

.form ul:not(.list) li.floatingcontent.alignright
{
	justify-content: flex-end;
}

.form ul:not(.list) li.floatingcontent > *
{
	align-items: center;
	column-gap: 1.2em;
	/* display: inline-block; */
	display: inline-flex;
	flex-flow: row wrap;
}

.form ul.fsection
{
	border-top: var(--thinline);
	/* padding-top: var(--p-margin-bottom); */
}

.form ul.fsection:not(:first-of-type)
{
	margin-top: var(--p-margin-top);
}

.form ul.fsection:has(li.buttonbar:only-child)
{
	border-top: none;
}

.form ul.fsection.bottomline
{
	border-bottom: var(--thinline);
	padding-bottom: var(--p-margin-bottom);
}

.form.lightui ul.fsection li.sectionlabel
{
	padding: .4em .4em 0 0;
}

.form:not(.lightui) ul.fsection li.sectionlabel
{
	background-color: #eee;
	padding: .4em;
}

.form ul:not(.list) li.buttonbar
{
	align-items: center;
	display: flex;
	flex-flow: row wrap;
	gap: .8em 1.2em;
	justify-content: end;
}

.form ul:not(.list) li.buttonbar.margintop
{
	padding-top: .5em;
}

.form ul:not(.list) li.buttonbar.bordertop
{
	border-top: var(--thinline);
}

.form.lightui ul:not(.list) li.buttonbar.bordertop
{
	margin-top: var(--p-margin-top) !important;
	padding-top: var(--p-margin-top) !important;
}

.form:not(.lightui) ul:not(.list) li.buttonbar.bordertop
{
	margin-top: calc(var(--p-margin-top) * 1.5) !important;
	padding-top: calc(var(--p-margin-top) * 1.5) !important;
}

.form ul:not(.list) li.buttonbar.hidesubmit [value="submit"],
.form ul:not(.list) li.buttonbar.hidereset :is([value="reset"], .resetform),
.form ul:not(.list) li.buttonbar.hidesubmit.hidereset:not(.hassort),
.form ul:not(.list) li.buttonbar.hidesubmit.hidereset.hassort.hidesort
{
	display: none;
}

.form ul:not(.orderlist) > li:not(.follow):not(.orderitem):not(.sectionlabel),
.form ul + ul > li:not(.follow):not(.orderitem):not(.sectionlabel),
.form ul.fsection > li.follow:first-child
{
	margin-top: var(--p-margin-top);
}

.form ul:not(.orderlist) > li:not(.follow):not(.orderitem):not(.sectionlabel):not(:last-child),
.form ul + ul > li:not(.follow):not(.orderitem):not(.sectionlabel):not(:last-child),
.form ul.fsection > li.follow:first-child:not(:last-child)
{
	margin-bottom: var(--p-margin-bottom);
}

.form ul:not(.list) li.gap
{
	margin-top: var(--article-margin-top);
}

.form ul:not(.list) li.orderitem
{
	display: flex;
	margin-top: .2em;
}

.form ul:not(.list) li:not(.orderitem) + li.orderitem
{
	margin-top: .6em;
}

.form ul:not(.list) li fieldset
{
	border-bottom: none;
	border-left: none;
	border-right: none;
	border-top: 1px solid #aaa;
	margin: .5em 0 0 0;
	padding: .5em 0 0 0;
}

.form ul:not(.list) li > label
{
	--text-color: var(--medium-content-color);

	display: inline-block;
}

.form ul:not(.list) li > label.required::after,
.form ul:not(.list) li > div > label.required::after,
.form ul:not(.list) li > span:only-child > input[type="checkbox"] + label.required::after
{
	color: inherit;
	content: "\00a0*";
}

.form ul:not(.list) li.orderitem > input:is([type="number"], [type="text"]) + label
{
	margin-left: .8em;
	margin-right: 0;
}

.form ul:not(.list) li > div.descr
{
	margin-top: .5em;
	padding-right: 1em;
}

.form ul:not(.list) li > div.licensebox
{
	background-color: white;
	border: 1px solid #ccc;
	font-size: .9em;
	height: 260px;
	line-height: 1.3;
	overflow-y: scroll;
	padding: .2em .5em;
	width: calc(100% - 1em - 2px);
}

.form ul:not(.list) li.vertical > label
{
	display: block;
	margin-bottom: .5em;
}

.form ul:not(.list) li .formelement:is(.checkbox, .radio)
{
	display: inline-flex;
	column-gap: 1em;
	flex-flow: row wrap;
}

.form ul:not(.list) li span:is([class=""], [class="error"], :not([class]))
{
	display: inline-flex;
	column-gap: .35em;
}

.form ul:not(.list) li span.group
{
	display: flex;
	column-gap: 1em;
}

.form ul:not(.list) li.vertical > span.group
{
	flex-direction: column;
}

.form ul:not(.list) li.vertical.extendedpadding > span.group
{
	row-gap: 1em;
}

.form ul:not(.list) li > span:is([class=""], :not([class]))
{
	align-items: start;
}

.form ul:not(.list) li span:is([class=""], :not([class])) > input:is([type="checkbox"], [type="radio"])
{
	flex: 0 0 auto;
	height: 19px;
	margin: 4px;
	width: 19px;
}

@container (width > 567px)
{
	.form ul:not(.list) li.emptylabel > :first-child
	{
		grid-column: 2 / -1;
	}

	.form:not(.top) ul:not(.list) li:not(:is(.emptylabel, .nofield, .top, .vertical, .sectionlabel, .line, .floatingcontent)) > :only-child,
	.form ul:not(.list) li > div.descr
	{
		grid-column: 1 / -1;
	}

	.form ul:not(.list) li.nofield > :first-child
	{
		grid-column: 1 / 1;
	}
}

.form ul:not(.list) li > div:is(:only-child, input:only-child, select:only-child, span:only-child, textarea:only-child, div.descr)
{
	grid-column: 1 / -1;
}

.form ul:not(.list) li:not(.floatingcontent) input:is([type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="range"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]),
.form ul:not(.list) li:not(.floatingcontent):not(.buttonbar) select,
.form ul:not(.list) li:not(.floatingcontent) textarea
{
	width: 100%;
}

.form ul:not(.list) ul.orderlist li input:is([type="number"], [type="text"]),
.form ul:not(.list) li.orderitem > input:is([type="number"], [type="text"])
{
	margin-right: .6em;
}

.form:not(.grid) ul:not(.list) li.file input:is([type="checkbox"], [type="radio"])
{
	margin-right: 4.8em;
}

.form ul:not(.list) li.file input:is([type="checkbox"], [type="radio"]) + label > div.text
{
	display: none;
}

.form ul:not(.list) li.file input:is([type="checkbox"], [type="radio"]):checked + label > div.text
{
	display: block;
}



/* Deaktivierte Felder */

.form textarea:disabled, 
.form select:disabled, 
.form input:is([type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="range"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"]):disabled,
.form ul:not(.list) li.hasvalueindicator.disabled .valueindicator
{
	opacity: .4;
}

.form ul:not(.list) li.disabled > label:first-child,
.form ul:not(.list) li span:is([class=""], :not([class])) > input:is([type="checkbox"], [type="radio"]):disabled + label,
.form ul:not(.list) li.disabled > div.descr
{
	opacity: .6;
}

/* Password-Feld */

.form div.passwordcnt:has( > input:is([type="password"], [type="text"]).sh)
{
	position: relative;
}

.form div.passwordcnt > input:is([type="password"], [type="text"]).sh
{
	padding-right: 2.5em;
}

.form div.passwordcnt > button.shpwd
{
	--uibutton-color: var(--global-uibutton-color);
	--uibutton-border-color: var(--global-uibutton-border-color);
	--uibutton-bg-color: var(--global-uibutton-bg-color);

	font-size: .6rem;
	height: 1.35rem;
	padding: .2rem .1rem;
	position: absolute;
	right: .9em;
	top: 50%;
	transform: translateY(-50%);
	width: 1.35rem;
}

.form div.passwordcnt > input:is([type="password"], [type="text"]).sh:disabled + button.shpwd
{
	display: none;
	pointer-events: none;
}

/* Feld mit zusätzlichem numerischem Indikator für den Wert */

.form ul:not(.list) li.hasvalueindicator
{
	align-items: baseline;
	display: grid;
	grid-template-columns: minmax(150px, 25%) auto minmax(60px, max-content);
	justify-items: left;
}

.form ul:not(.list) li.hasvalueindicator:is(.nolabel, .nofield)
{
	grid-template-columns: auto minmax(60px, max-content);
}

.valueindicator
{
	background-color: rgba(0, 0, 0, .15);
	border-radius: var(--small-border-radius);
	font-size: .85em;
	justify-self: end;
	line-height: 1;
	margin-left: 1em;
	padding: .2em .3em;
}

.valueindicator.warning
{
	background-color: var(--warning-color);
}

.valueindicator.error
{	
	background-color: var(--error-color);
	color: white;
	font-weight: bold;
	outline: 0px !important;
}



.tinymcearea
{
	margin: 0 .5em;
	width: calc(100% - 1em);
}



/* Fehler */

article.artikel.error :is(.headarea, .headarea .head, p),
div:is(.error, .important),
p.error,
.form li > label.error,
.errormsg 
{
	color: var(--error-color) !important;
}

div:is(.error, .important, .warning)
{
	border-radius: var(--medium-border-radius);
	margin-bottom: var(--p-margin-bottom);
	margin-top: var(--p-margin-top);
	padding: var(--bg-text-indent-vertical) var(--bg-text-indent-horizontal);
}

div:is(.error, .important)
{
	--article-bg-color: var(--error-bg-color);
	background-color: var(--error-bg-color);
	border: var(--thin-line-width) solid var(--error-color);
}

div.important
{
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
}

div.warning
{
	border: var(--thin-line-width) solid var(--warning-color);
}

div:is(.error, .important) > article:is(:first-child, > :first-child)
{
	--article-margin-bottom: 0;
	--article-margin-top: 0;
}

div:is(.error, .important, .warning) > .artikel:not(:first-child)
{
	margin-top: .5rem !important;
	padding-top: .5rem !important;
}

div:is(.error, .important) > .artikel:not(:first-child)
{
	border-top: var(--thin-line-width) solid var(--error-color) !important;
}

div.warning > .artikel:not(:first-child)
{
	border-top: var(--thin-line-width) solid var(--warning-color) !important;
}

.form li :is(input, select).error
{
	border-color: var(--error-color);
	background-color: var(--error-bg-color);
}

.form li :is(span, textarea).error,
.form ul.error
{
	outline: var(--light-line-width) solid var(--error-color);
	outline-offset: 1px;
}


/* Freischwebende Buttons (Kontakt und Seitenanfang) */

.uibutton.global.float
{
	border-color: transparent !important;
	background-color: var(--global-uibutton-float-bg-color) !important;
	box-shadow: none !important;
	color: white !important;
	position: fixed;
	z-index: 99999;
}

#contactformbt
{
	height: 50px;
	transition: opacity 1.5s ease;
	width: 50px;
}

#topofpagebt
{
	bottom: 1rem;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%);
	transition: opacity 1.5s ease;
}

body.topb #topofpagebt
{
	opacity: 1;
	pointer-events: auto;
	transition: opacity 1s ease;
}

@media (max-width: 567px)
{
	#contactformbt,
	#topofpagebt
	{
		display: none;
	}
}

@media (min-width: 568px) and (max-width: 1279px)
{
	#contactformbt
	{
		bottom: 5rem;
		right: 20px;
	}
}

@media (min-width: 1280px)
{
	#contactformbt
	{
		bottom: 5rem;
		right: 2rem;
	}
}




/* */

.genclosebutton
{
	border-radius: var(--round-button-border-radius);
	cursor: pointer;
	font-family: var(--symbol-font);
	height: 28px;
	line-height: 28px;
	text-align: center;
	width: 28px;
}

.genclosebutton.white
{
	background-color: white;
	box-shadow: var(--boxshadow-large);
}

.genclosebutton:not(.white)
{
	border: var(--thinline);
	color: var(--text-color);
}

.genclosebutton::after
{
	content: "\F0011";
}

#layerclosebutton
{
	pointer-events: none;
	position: absolute;
}

body.drawer.modal #layerclosebutton
{
	display: none;
}

@media (max-width: 461px)
{
	body.navi #layerclosebutton
	{
		display: none;
	}
}

@media (max-width: 567px)
{
	#layerclosebutton
	{
		right: 8px;
		top: 6px;
	}
}

@media (min-width: 768px)
{
	#layerclosebutton
	{
		right: 1rem;
		top: 1rem;
	}
}

@media (min-width: 568px) and (max-width: 767px)
{
	#layerclosebutton
	{
		right: 1em;
		top: 1.4em;
	}
}

@media (min-width: 768px)
{
	.form li:not(.top) > label:not(:only-child)
	{
		color: #666;
	}

	.form li:not(.top) > label:not(:only-child),
	.form li:not(.top) > label + span.group
	{
		padding: .35em 0;
	}

	.form li.top > label:not(:only-child),
	.form li.vertical > label:not(:only-child)
	{
		padding: 0 0 .35em 0;
	}

	.form li:not(.orderitem):not(.top):not(.vertical) > label:not(:only-child)
	{
		margin-right: .5em;
		/* width: 20%; */
	}

	.form li > div.halfhalf::after,
	.form li > div.twothirdonethird::after
	{
	  content: "";
	  clear: both;
	  display: table;
	}

	.form li > div.halfhalf > :first-child
	{
		float: left;
		width: 50%;
	}
	.form li > div.halfhalf > :last-child
	{
		float: right;
		width: 50%;
	}

	.form li > div.twothirdonethird > :first-child
	{
		float: left;
		width: 66%;
	}

	.form li > div.twothirdonethird > :last-child
	{
		float: right;
		width: 33%;
	}
}

@media (max-width: 767px) 
{
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
	select,
	textarea
	{
		font-size: 1.1em;
	}
}

@media (min-width: 768px)
{
	.form .floatingcontent .formelement.select + .formelement.select::before
	{
		content: '\F0082';
		display: inline-block;
		font-family: var(--symbol-font);
		font-size: 1.3em;
		font-style: normal;
		font-weight: normal;
		height: 100%;
		line-height: 1.7;
	}
}

@media (max-width: 767px) 
{
	.form li:not(.top) .formelement.select,
	.form li:not(.top) .formelement.select select
	{
		width: 100%;
	}
}





/* Hack prüfen */

.form ul.liste > li.file
{
	background-position: 1.7em .5em;
	padding: 1em 0 !important;
}

.form ul.liste > li.file > span:first-child
{
	text-indent: -5em;
}

.form ul.liste > li.file > span:first-child *
{
	text-indent: 0;
}



/* Mediathek-Interaktionsfelder */

.interactionsbox
{
	background-color: var(--light-bg-color);
	border-radius: var(--medium-border-radius);
	clear: both;
	padding: var(--large-bg-text-indent-vertical) var(--large-bg-text-indent-horizontal);
	position: relative;
}

.body > .artikel.interactionsbox
{
	--article-margin-bottom: var(--p-margin-bottom);
}

.artikel.interactionsbox form
{
	margin: 0;
}

.body.invisibleinteractionsbox .artikel.interactionsbox .searchbox
{
	background-color: transparent;
	padding: 0;
}

.interactionsbox ul > li:first-child
{
	margin-top: 0 !important;
}

.interactionsbox ul > li:last-child,
.interactionsbox ul > li:has(+ li.buttonbar.hidesubmit.hidereset:last-child:not(.hassort:not(.hidesort)))
{
	margin-bottom: 0 !important;
}

.interactionsbox .form ul.fsection:first-of-type
{
	border-top: none;
}

.interactionsbox .form ul.fsection:first-of-type > li:first-child
{
	margin-top: 0;
}