/* ===========================================================================
 * kontakt.css -- Kontaktseite (Eugen, 16.09.2026).
 *
 * GENERIERT aus scripts/kontakt.css.tpl (scripts/gen-css.py setzt die
 * Symbol-Masken --ams-icon-* ein). Regeln in der .tpl aendern, dann das
 * Skript laufen lassen -- nicht hier.
 *
 * Entwurf B aus output/kontakt/kontakt-entwuerfe.html. Werte nur aus
 * tokens.css. Markup kommt aus scripts/kontakt-anlegen.php (Seite 294,
 * UX-Builder-Shortcodes) und dem Kurzcode [ams_kontaktformular] im Plugin
 * ams-shop (includes/kontaktformular.php):
 *
 *   section.ams-kontakt-seite
 *     .row.ams-kontakt-kopf  > .col > nav.ams-brot, h1, p.ams-lead
 *     .row.ams-kontakt-zeile > .col(7) > .ams-eyebrow, form.ams-kontakt
 *                            > .col(5) > aside.ams-kontakt-leiste
 *
 * Der Seitenrand kommt aus layout.css (.section-content > .row), gleich
 * wie auf der Startseite.
 * ======================================================================== */

:root {
	--ams-icon-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
	--ams-icon-kontakt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E");
	--ams-icon-ort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");
}

.ams-kontakt-seite > .section-content {
	padding-top: var(--ams-s-7);
	padding-bottom: var(--ams-s-10);
}


/* -- Kopf: Titel, Lead (Brotkrumen .ams-brot: layout.css, wie Katalog) ---- */

.ams-kontakt-kopf h1 {
	margin: var(--ams-s-5) 0 0;
	font: var(--ams-t-h1);
	letter-spacing: -.02em;
	color: var(--ams-ink);
}

.ams-kontakt-kopf .ams-lead {
	max-width: 720px;
	margin: var(--ams-s-4) 0 0;
	font: var(--ams-t-lead);
	color: var(--ams-ink-2);
}

.ams-kontakt-zeile {
	margin-top: var(--ams-s-6);
}

.ams-kontakt-zeile .ams-eyebrow {
	margin-bottom: var(--ams-s-5);
}

/* -- Formular ----------------------------------------------------------------
 * Flatsome gibt Feldern einen Innenschatten und 2.507em Hoehe; hier die
 * Kartenform aus dem CI. Selektoren mit Formularklasse, damit nichts auf
 * Kasse oder Konto durchschlaegt.
 */

.ams-kontakt__reihe {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ams-s-4) var(--ams-s-5);
}

.ams-kontakt__feld {
	display: flex;
	flex-direction: column;
	gap: var(--ams-s-2);
	margin: 0;
}

.ams-kontakt__feld--voll {
	grid-column: 1 / -1;
}

.ams-kontakt__feld label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ams-ink-2);
}

.ams-kontakt__pflicht {
	color: var(--ams-primary);
}

.ams-kontakt input[type="text"],
.ams-kontakt input[type="email"],
.ams-kontakt input[type="tel"],   /* Praesente-Anfrage (09.10.2026) */
.ams-kontakt textarea {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 var(--ams-s-4);
	border: 1px solid var(--ams-line);
	border-radius: var(--ams-r-image);
	background: var(--ams-white);
	box-shadow: none;
	font: var(--ams-t-body);
	font-size: 15px;
	color: var(--ams-ink);
	transition: border-color var(--ams-t-fast) var(--ams-ease-out),
	            box-shadow var(--ams-t-fast) var(--ams-ease-out);
}

.ams-kontakt textarea {
	height: auto;
	min-height: 160px;
	padding-top: var(--ams-s-3);
	padding-bottom: var(--ams-s-3);
	line-height: 1.55;
	resize: vertical;
}

.ams-kontakt input::placeholder,
.ams-kontakt textarea::placeholder {
	color: var(--ams-ink-3);
	opacity: 1;
}

.ams-kontakt input:focus,
.ams-kontakt textarea:focus {
	outline: 0;
	border-color: var(--ams-primary);
	box-shadow: var(--ams-focus-ring);
}

/* Honigtopf: aus dem Sichtfeld, nicht display:none (das lesen Skripte). */
.ams-kontakt__topf {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ams-kontakt__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ams-s-5);
	margin-top: var(--ams-s-5);
}

.ams-kontakt__hinweis {
	flex: 1 1 320px;  /* nimmt die ganze Breite neben dem Knopf (Eugen, 16.09.2026) */
	margin: 0;
	font: var(--ams-t-small);
	font-size: 13px;
	color: var(--ams-ink-3);
}

.ams-kontakt__senden.button {
	margin: 0;
}

.ams-kontakt__meldung {
	padding: var(--ams-s-4) var(--ams-s-5);
	border-radius: var(--ams-r-image);
	background: var(--ams-surface);
	border-left: 3px solid var(--ams-primary);
	font: var(--ams-t-body);
	color: var(--ams-ink);
}

.ams-kontakt__meldung--fehler {
	border-left-color: var(--ams-primary);
}

/* -- Kontaktleiste rechts, hell (Eugen, 16.09.2026) --------------------------- */

/* Rechte Spalte: Karte kompakt (max. 400 px) und mittig im Bereich, mit
   Luft zum Formular (Eugen, 16.09.2026: "zu gross, zu nah am Formular"). */
@media (min-width: 850px) {
	/* Formular (mit Eyebrow) mittig in seiner Spalte, max. 900 px
	   (Eugen, 16.09.2026); .col-inner, weil Flatsome es um den Inhalt legt. */
	.ams-kontakt-zeile > .col:first-child > .col-inner {
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;
	}

	.ams-kontakt-zeile > .col:last-child {
		padding-left: var(--ams-s-8);
	}

	/* margin auto, nicht justify-content an der Spalte: Flatsome legt
	   .col-inner dazwischen, die Spalte sieht die Karte nicht (gemessen
	   16.09.2026). Karte mittig im rechten Bereich (Eugen). */
	.ams-kontakt-leiste {
		margin-left: auto;
		margin-right: auto;
	}
}

.ams-kontakt-leiste {
	display: flex;
	flex-direction: column;
	gap: var(--ams-s-5);
	width: 100%;
	max-width: 460px;  /* 400 -> 460 (Eugen, 16.09.2026) */
	padding: var(--ams-s-6);
	border-radius: var(--ams-r-card);
	background: var(--ams-surface);
	font: var(--ams-t-body);
	font-size: 15px;
	color: var(--ams-ink);
}

.ams-kontakt-leiste__titel {
	margin: 0;
	font-size: var(--ams-t-eyebrow-size);
	font-weight: 600;
	letter-spacing: var(--ams-t-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--ams-ink-3);
}

/* Trennlinien: Flatsome gibt hr opacity .1 (gemessen 16.09.2026, unsichtbar
   auf Surface), deshalb opacity 1 und die kraeftigere Linie. */
.ams-kontakt-leiste hr {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--ams-line-2);
	opacity: 1;
}

/* Telefon: Symbol links neben der Nummer, Zeiten darunter eingerueckt. */
.ams-kontakt-tel {
	display: inline-flex;
	align-items: center;
	gap: var(--ams-s-4);
	margin-top: var(--ams-s-3);
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.1;
	color: var(--ams-ink);
}

.ams-kontakt-tel:hover {
	color: var(--ams-primary);
}

.ams-kontakt-tel::before,
.ams-kontakt-wege li::before {
	content: "";
	flex-shrink: 0;
	display: block;
	background: var(--ams-primary);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.ams-kontakt-tel::before {
	width: 24px;
	height: 24px;
	-webkit-mask-image: var(--ams-icon-telefon);
	mask-image: var(--ams-icon-telefon);
}

/* wpautop packt die Nummer in ein <p> mit 19,5 px Unterrand (gemessen
   16.09.2026) -- der Abstand zu den Zeiten kommt allein von hier. */
.ams-kontakt-leiste p:has(> .ams-kontakt-tel) {
	margin-bottom: 0;
}

.ams-kontakt-zeiten {
	margin: var(--ams-s-1) 0 0 calc(24px + var(--ams-s-4));
	color: var(--ams-ink-2);
}

.ams-kontakt-wege,
.ams-kontakt-fragen {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Flatsome rueckt jeden Listenpunkt 1.3em ein, mit hoeherer Spezifitaet als
   die Listenklasse allein (gemessen 16.09.2026: 19,5 px). */
.ams-kontakt-leiste ul li {
	margin-left: 0;
}

/* margin-left 0: Flatsome rueckt Listenpunkte ein (gemessen 16.09.2026, 18 px). */
.ams-kontakt-wege li {
	display: flex;
	gap: var(--ams-s-4);
	align-items: flex-start;
	margin: 0 0 var(--ams-s-4) 0;
	line-height: 1.55;
}

.ams-kontakt-wege li:last-child {
	margin-bottom: 0;
}

/* Auch zwischen E-Mail und Anschrift eine Linie (Eugen, 16.09.2026). */
.ams-kontakt-wege li + li {
	padding-top: var(--ams-s-4);
	border-top: 1px solid var(--ams-line-2);
}

.ams-kontakt-wege li::before {
	width: 16px;
	height: 16px;
	margin-top: 4px;
}

.ams-kontakt-weg--mail::before { -webkit-mask-image: var(--ams-icon-kontakt); mask-image: var(--ams-icon-kontakt); }
.ams-kontakt-weg--ort::before  { -webkit-mask-image: var(--ams-icon-ort);     mask-image: var(--ams-icon-ort); }

.ams-kontakt-wege a {
	font-weight: 500;
	color: var(--ams-ink);
}

.ams-kontakt-wege a:hover {
	color: var(--ams-primary);
}

.ams-kontakt-wege span {
	display: block;
	color: var(--ams-ink-2);
}

.ams-kontakt-fragen {
	margin-top: var(--ams-s-3);
}

.ams-kontakt-fragen li {
	margin: 0 0 var(--ams-s-2) 0;
}

.ams-kontakt-fragen a {
	color: var(--ams-ink);
}

.ams-kontakt-fragen a:hover {
	color: var(--ams-primary);
}

/* Helle Pille, Gegenstueck zum roten Primaerknopf. */
.ams-kontakt-leiste .button.ams-btn-hell {
	margin: var(--ams-s-4) 0 0;
	align-self: flex-start;
	background: var(--ams-white);
	color: var(--ams-ink);
	border: 1px solid var(--ams-line);
	box-shadow: none;
}

.ams-kontakt-leiste .button.ams-btn-hell:hover {
	border-color: var(--ams-primary);
	color: var(--ams-primary);
}

@media (max-width: 849px) {
	.ams-kontakt-seite > .section-content {
		padding-top: var(--ams-s-5);
		padding-bottom: var(--ams-s-8);
	}

	.ams-kontakt__reihe {
		grid-template-columns: minmax(0, 1fr);
	}

	.ams-kontakt-leiste {
		margin: var(--ams-s-6) auto 0;
		padding: var(--ams-s-5);
	}

	.ams-kontakt-tel {
		font-size: 26px;
	}
}