/*
	Formulare (FormBuilder) — Auffrischung
	--------------------------------------
	Wird nach main.css geladen (siehe _base-template.twig) und ueberschreibt
	deshalb ohne !important. Bewusst eine eigene Datei: main.css ist ein
	Webpack-Build, dessen Quellen nicht im Repository liegen.

	Aenderung gegenueber vorher: Beschriftung stand links neben dem Feld
	(40 % / 60 %) und wurde zusaetzlich als Placeholder wiederholt. Jetzt
	steht sie ueber dem Feld, die Felder sind groesser, und Fokus-, Pflicht-
	und Fehlerzustaende sind sichtbar.
*/

.FormBuilder {
	--form-text:   #4c4c4c;
	--form-linie:  #cfd9de;
	--form-fokus:  #8fa3b2;
	--form-fehler: #a90101;
	color: var(--form-text);
}

/* ---------------------------------------------------------------- Raster */

/*
	main.css gibt dem Formular 20px Innenabstand und nimmt ihn ab 850px links
	und rechts wieder weg. Auf dem Handy stand das Formular dadurch eingerueckt
	neben dem uebrigen Text. Abstand nach oben und unten regelt die Umgebung.
*/
.FormBuilder {
	padding: 0;
}

.FormBuilder .Inputfield {
	box-sizing: border-box;
	margin-bottom: 22px;
	line-height: 1.4;
}

/* Beschriftung ueber das Feld statt daneben. */
@media screen and (min-width: 850px) {
	.FormBuilder .Inputfield {
		flex-direction: column;
	}
	.FormBuilder .InputfieldHeader,
	.FormBuilder .InputfieldContent {
		width: 100%;
	}
}

/*
	Rinne zwischen nebeneinander liegenden Feldern.

	Die Spaltenbreiten setzt der FormBuilder inline (style="width: 50%"), da
	kommt weder gap noch calc dran. Also: jede Spalte bekommt beidseitig
	Innenabstand, und der Container zieht die Aussenkanten mit negativen
	Aussenabstaenden wieder buendig.

	Bewusst nicht ueber .InputfieldColumnWidthFirst geloest: diese Klasse sagt,
	welches Feld in der *urspruenglich gedachten* Zeile das erste war. Im
	Kontaktformular liegt dazwischen ein ausgeblendetes Umbruch-Feld, dadurch
	stimmt die Markierung nicht mehr mit der tatsaechlichen Spalte ueberein und
	der Innenabstand landete auf der falschen Seite.

	Nur ab 850px: darunter setzt main.css alle Felder auf width:100%!important,
	es liegt also nichts nebeneinander und es gibt keine Rinne zu ueberbruecken.
	Die negativen Aussenabstaende haben dort nur das Formular 4px ueber den
	rechten Bildschirmrand geschoben - auf /kontakt/ liess sich die Seite
	dadurch am Handy seitlich verschieben.
*/
@media screen and (min-width: 850px) {
	.FormBuilder .Inputfields {
		margin-left: -12px;
		margin-right: -12px;
	}

	.FormBuilder .Inputfields .Inputfield {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/*
	:not(.InputfieldHeaderHidden) ist zwingend. Checkbox-Felder tragen ihre
	Beschriftung im Kasten selbst und blenden die Kopfzeile per
	.InputfieldHeaderHidden aus - ein pauschales display:block haette den
	Text doppelt angezeigt.
*/
.FormBuilder .InputfieldHeader:not(.InputfieldHeaderHidden) {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	line-height: 1.3;
}

.FormBuilder .InputfieldHeader strong {
	font-weight: 400;
}

/*
	Pflichtfeld-Sternchen. main.css setzt es bereits ueber
	.InputfieldStateRequired .InputfieldHeader:after in Orange - hier nur
	umgefaerbt und mit Abstand versehen. Eine zweite eigene Regel haette
	zwei Sternchen ergeben.
*/
.FormBuilder .InputfieldStateRequired > .InputfieldHeader:after {
	content: " *";
	color: var(--form-fehler);
}

/* ---------------------------------------------------------------- Felder */

.FormBuilder .InputfieldContent input[type=text],
.FormBuilder .InputfieldContent input[type=email],
.FormBuilder .InputfieldContent input[type=tel],
.FormBuilder .InputfieldContent input[type=number],
.FormBuilder .InputfieldContent select,
.FormBuilder .InputfieldContent textarea {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--form-linie);
	border-radius: 0;
	background: #fff;
	color: var(--form-text);
	font-size: 16px; /* unter 16px zoomt iOS beim Fokus hinein */
	line-height: 1.4;
	transition: border-color .15s ease-out, box-shadow .15s ease-out;
}

.FormBuilder .InputfieldContent textarea {
	height: auto;
	min-height: 168px;
	padding: 12px 14px;
	resize: vertical;
}

.FormBuilder .InputfieldContent input:focus,
.FormBuilder .InputfieldContent select:focus,
.FormBuilder .InputfieldContent textarea:focus {
	border-color: var(--form-fokus);
	box-shadow: 0 0 0 3px rgba(143, 163, 178, .35);
	outline: none;
}

/* Tastaturbedienung muss sichtbar bleiben, auch am Button. */
.FormBuilder .InputfieldSubmit button:focus-visible,
.FormBuilder .InputfieldContent input[type=checkbox]:focus-visible {
	outline: 2px solid var(--form-fokus);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ Checkboxen */

.FormBuilder .InputfieldCheckbox .InputfieldContent label {
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.FormBuilder .InputfieldCheckbox .InputfieldContent input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	top: 0;
	accent-color: var(--form-fokus);
}

.FormBuilder .InputfieldCheckbox .InputfieldContent label span {
	padding-left: 0;
	line-height: 1.45;
}

.FormBuilder .InputfieldCheckbox.InputfieldStateRequired .InputfieldContent label > span:after {
	content: " *";
	color: var(--form-fehler);
}

/* --------------------------------------------------------------- Fehler */

.FormBuilder .InputfieldStateError .InputfieldContent input,
.FormBuilder .InputfieldStateError .InputfieldContent select,
.FormBuilder .InputfieldStateError .InputfieldContent textarea {
	border-color: var(--form-fehler);
}

.FormBuilder .InputfieldStateError .InputfieldHeader {
	color: var(--form-fehler);
}

.FormBuilder .InputfieldContent .error,
.FormBuilder .InputfieldContent p.error {
	margin: 6px 0 0;
	color: var(--form-fehler);
	font-size: 14px;
}

.FormBuilderErrors,
.FormBuilder .FormBuilderErrors {
	margin: 0 0 24px;
	padding: 16px 20px;
	border-left: 4px solid var(--form-fehler);
	background: #fdf2f2;
	color: var(--form-fehler);
	list-style: none;
	font-size: 16px;
	line-height: 1.5;
}

/* Erfolgsmeldung: .message--error war gestaltet, das Gegenstueck fehlte. */
.message--success {
	margin: 0 0 24px;
	padding: 20px;
	background: #8fa3b2;
	color: #fff;
	font-family: Aller, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

/* ------------------------------------------------------------- Absenden */

.FormBuilder .InputfieldSubmit {
	margin-top: 8px;
}

.FormBuilder .InputfieldSubmit button {
	transition: background-color .2s ease-out;
}

/*
	Turnstile-Widget sitzt direkt ueber dem Button. Es haengt als direktes Kind
	in .Inputfields, ist aber kein .Inputfield - es bekommt den Innenabstand
	der Spalten also nicht ab und stuende sonst 12px zu weit links.
*/
.FormBuilder .cf-turnstile {
	margin-bottom: 20px;
}

/* Gleicht den Spalten-Innenabstand aus - nur dort, wo es ihn gibt. */
@media screen and (min-width: 850px) {
	.FormBuilder .cf-turnstile {
		margin-left: 12px;
	}
}


/* ------------------------------------------------- Altlast Kontaktformular

	main.css enthaelt einen ID-gebundenen Sonderblock fuer das Kontaktformular:

		#FormBuilder_kontakt .InputfieldHeader  { display: none }
		#FormBuilder_kontakt .InputfieldContent { width: 100%; margin-right: 20px }

	Die Beschriftungen waren dort bewusst ausgeblendet, weil das alte Layout
	allein mit Placeholdern gearbeitet hat. ID-Selektoren lassen sich nur mit
	ID-Selektoren ueberschreiben, deshalb dieser Spiegelblock.

	:not(.InputfieldHeaderHidden) ist wichtig: die Kopfzeilen der Checkboxen
	muessen ausgeblendet bleiben, sonst steht ihr Text doppelt da.
*/

#FormBuilder_kontakt .InputfieldHeader:not(.InputfieldHeaderHidden) {
	display: block;
}

/* Die Rinne zwischen zwei Spalten kommt jetzt aus dem Innenabstand der
   Spalte, nicht mehr aus einem Aussenabstand am Inhalt. */
#FormBuilder_kontakt .InputfieldContent {
	width: 100%;
	margin-right: 0;
}


/* ================================================== Kontaktseite: Zweispalter

	Adressdaten links, Formular rechts. Ab 850px - das ist der Breakpoint des
	Stylesheets - nebeneinander, darunter gestapelt mit der Adresse zuerst.

	.article__content ist siteweit auf 980px begrenzt. Fuer zwei Spalten ist
	das zu eng: das Formular hat selbst zweispaltige Zeilen und die Felder
	wuerden auf rund 290px schrumpfen. Deshalb bekommt nur diese Seite etwas
	mehr Breite.
*/

.contact .article__content {
	max-width: 1080px;
}

@media screen and (min-width: 850px) {
	.contact__grid {
		display: grid;
		grid-template-columns: minmax(240px, 300px) 1fr;
		column-gap: 56px;
		align-items: start;
	}
}

/* Die Adresse ist kurz - sie soll beim Scrollen neben dem Formular stehen
   bleiben, statt oben allein zurueckzubleiben. */
@media screen and (min-width: 850px) {
	.contact__adresse {
		position: sticky;
		top: 100px;
	}
}

/* Ohne das setzt .article__content h2 einen Abstand nach oben und das
   Formular startet tiefer als die Adresse. */
.contact__formular .contact__subheadline:first-child {
	margin-top: 0;
}

.contact__adresse p:last-child {
	margin-bottom: 20px;
}

.contact__adresse .larger {
	display: block;
}


/* ========================================== Kontakt-Flyout: .kontakt--open

	Der Absenden-Button war im Flyout nicht erreichbar.

	Ursache steckt in main.css: das Panel .kontakt__inner liegt als
	position:absolute im fixierten Flyout und bekommt height:100vh mit
	overflow-y:auto - so weit richtig. Ab 1200px Breite UND 850px Hoehe wird
	daraus aber height:auto. Ein absolut positioniertes Element mit
	automatischer Hoehe waechst dann einfach aus dem Flyout heraus, statt zu
	scrollen: alles unterhalb der Fensterkante war abgeschnitten.

	Alles hier haengt an .kontakt--open, gilt also nur fuer das geoeffnete
	Flyout - die Kontaktseite (/kontakt) mit demselben Formular bleibt
	unberuehrt. Der Klassenselektor hebt zugleich die Spezifitaet ueber die
	Regeln aus main.css, ohne !important.

	Zwei Schritte:
	1. Das Panel scrollt wieder zuverlaessig.
	2. Der Inhalt wird kompakter, damit er auf ueblichen Bildschirmen ganz
	   ohne Scrollen hineinpasst. Das Scrollen bleibt als Rueckfall fuer
	   niedrige Fenster, Fehlermeldungen und grosse Schriftgroessen.
*/

/* ------------------------------------------------------- 0. Panelbreite */

/*
	Rechts im Panel stand eine breite tote Flaeche: .kontakt ist 60% des
	Fensters breit, .kontakt__inner hoert aber bei max-width 700px auf
	(ab 1600px: 850px) und sitzt linksbuendig. Bei 1800px Fensterbreite
	waren das 201px Weissraum, bei 2560px sogar 657px.

	Statt eines festen Prozentsatzes deshalb ein Deckel auf der tatsaechlichen
	Inhaltsbreite: max-width des Inhalts plus die 20px Rahmen links. Der
	Weissraum ist damit bei jeder Fensterbreite weg, und unterhalb des Deckels
	bleibt es bei 60% - dort sind die Felder ohnehin knapp, weil der
	FormBuilder ab 850px zweispaltig setzt. Ein pauschales 50% haette die
	Felder bei 860px Fensterbreite auf 174px gedrueckt (statt 202px) und bei
	2560px immer noch 403px Weissraum stehen lassen.

	Bewusst an .kontakt und nicht an .kontakt--open: main.css animiert das
	Panel mit transition:all, eine an den Zustand gebundene Breite wuerde beim
	Ein- und Ausfahren mitanimieren.
*/
@media screen and (min-width: 850px) {
	.kontakt {
		width: min(60%, 720px);
	}
}

@media screen and (min-width: 1600px) {
	.kontakt {
		width: min(60%, 870px);
	}
}

/* -------------------------------------------------- 1. Scrollbares Panel */

.kontakt--open .kontakt__inner {
	/* Aus dem absoluten Fluss heraus: so ist die Hoehe an den Flyout
	   gebunden und der Ueberlauf landet in der eigenen Scrollflaeche. */
	position: relative;
	top: auto;
	height: 100%;
	max-height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-top: 28px;
	/* Luft unter dem Button, auf iOS zusaetzlich um die Home-Leiste. */
	padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

/*
	Solange das Flyout offen ist, soll das Mausrad nicht die Seite dahinter
	bewegen. Passt der Inhalt ins Panel, gibt es dort nichts zu scrollen und
	der Browser reicht das Ereignis sonst an das Dokument weiter - es sah so
	aus, als liesse sich das Formular nicht scrollen.

	Browser ohne :has() ignorieren die Regel; dann bleibt es beim bisherigen
	Verhalten. overscroll-behavior oben deckt zusaetzlich den Fall ab, dass
	das Panel selbst scrollt und am Ende angekommen ist.
*/
html:has(.kontakt--open),
body:has(.kontakt--open) {
	overflow: hidden;
	/* Ohne das verschwindet beim Sperren die Bildlaufleiste und der Inhalt
	   dahinter rutscht um deren Breite zur Seite. */
	scrollbar-gutter: stable;
}

/* Der Schliessen-Knopf scrollt mit dem Panel - er soll oben stehen
   bleiben, sonst ist er nach dem Scrollen weg. */
.kontakt--open .kontakt__close {
	position: sticky;
	top: 0;
	float: right;
	margin-top: -8px;
	margin-right: -8px;
}

/* --------------------------------- 2. Kompakter: passt ohne Scrollen */

.kontakt--open .default__content p {
	margin: 0 0 10px;
}

.kontakt--open .default__content p:last-child {
	margin-bottom: 0;
}

.kontakt--open .headline--form {
	margin-top: 22px;
	margin-bottom: 14px;
}

.kontakt--open .FormBuilder .Inputfield {
	margin-bottom: 14px;
}

.kontakt--open .FormBuilder .InputfieldHeader:not(.InputfieldHeaderHidden) {
	margin-bottom: 4px;
	font-size: 14px;
}

.kontakt--open .FormBuilder .InputfieldContent input[type=text],
.kontakt--open .FormBuilder .InputfieldContent input[type=email],
.kontakt--open .FormBuilder .InputfieldContent input[type=tel],
.kontakt--open .FormBuilder .InputfieldContent input[type=number],
.kontakt--open .FormBuilder .InputfieldContent select {
	height: 42px;
}

.kontakt--open .FormBuilder .InputfieldContent textarea {
	min-height: 110px;
}

.kontakt--open .FormBuilder .cf-turnstile {
	margin-bottom: 12px;
}

.kontakt--open .FormBuilder .InputfieldSubmit {
	margin-top: 0;
}

.kontakt--open .FormBuilder .InputfieldSubmit button {
	width: 100%;
}

/* Niedrige Fenster: noch enger, damit der Button moeglichst oft ohne
   Scrollen sichtbar bleibt. */
@media screen and (max-height: 800px) {
	.kontakt--open .kontakt__inner {
		padding-top: 20px;
	}

	.kontakt--open .headline--form {
		margin-top: 16px;
		margin-bottom: 10px;
	}

	.kontakt--open .FormBuilder .Inputfield {
		margin-bottom: 10px;
	}

	.kontakt--open .FormBuilder .InputfieldContent textarea {
		min-height: 80px;
	}
}