/* ===========================================================================
 * praesente.css -- Praesente auf Anfrage (Eugen, 08.10.2026).
 *
 * Entwurf C aus output/praesente/praesente-entwuerfe.html. Werte nur aus
 * tokens.css. Markup aus dem Plugin ams-shop (includes/praesente.php):
 *
 *   p.ams-praesent-knopf                  (Produktzusammenfassung, statt Kaufknopf)
 *   section.ams-praesent#anfrage          (unter der Produktzeile, vor den Tabs)
 *     form.ams-praesent__form.ams-kontakt (Felder im Kontaktformular-Stil, kontakt.css)
 *       .ams-praesent__raster > .ams-praesent__stufen + aside.ams-praesent__zusammen
 *
 * Die Felder (input, textarea, Hinweis, Meldung) kommen aus kontakt.css ueber
 * die Klasse ams-kontakt am Formular; hier nur, was die drei Schritte und die
 * Zusammenfassung brauchen.
 * ======================================================================== */

/* -- Zusammenfassung des Produkts ------------------------------------------- */

.ams-preis-anfrage {
	font-weight: 500;
	color: var(--ams-ink);
}

.ams-praesent-knopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ams-s-4) var(--ams-s-5);
	margin: var(--ams-s-5) 0;
}

.ams-praesent-knopf .button {
	margin: 0;
}

.ams-praesent-knopf span {
	font: var(--ams-t-small);
	color: var(--ams-ink-3);
}

/* -- Abschnitt: liegt im Flatsome-Container der Produktseite, der den Seitenrand
   schon traegt (layout.css) -- kein eigener Rand, sonst doppelt (gemessen 08.10.2026) ---- */

.ams-praesent {
	padding: var(--ams-s-7) 0 var(--ams-s-9);
	border-top: 1px solid var(--ams-line);
}

.ams-praesent .ams-sektion-kopf {
	margin-bottom: var(--ams-s-6);
}

.ams-praesent__lead {
	max-width: 720px;
	margin: var(--ams-s-3) 0 0;
	font: var(--ams-t-body);
	color: var(--ams-ink-2);
}

.ams-praesent .ams-kontakt__meldung {
	margin-bottom: var(--ams-s-5);
}

/* 70/30: Schritte links, Anfrage rechts (Eugen, 08.10.2026). */
.ams-praesent__raster {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
	gap: var(--ams-s-8);
	align-items: start;
}

/* -- Die drei Schritte ------------------------------------------------------ */

.ams-praesent__stufe {
	margin: 0;
	padding: var(--ams-s-6) 0;
	border: 0;
	border-top: 1px solid var(--ams-line);
}

.ams-praesent__stufe:first-child {
	padding-top: 0;
	border-top: 0;
}

.ams-praesent__stufe legend {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ams-s-4);
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	font: var(--ams-t-body);
}

.ams-praesent__nr {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ams-primary);
}

.ams-praesent__titel {
	font: var(--ams-t-h3);
	color: var(--ams-ink);
}

.ams-praesent__stufe legend small {
	margin-left: auto;
	font-size: 13px;
	color: var(--ams-ink-3);
}

/* Verpackung: fuenf Kacheln mit Bild, gewaehlt = roter Rahmen. */
.ams-praesent__optionen {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--ams-s-4);
	margin-top: var(--ams-s-5);
}

.ams-praesent__option {
	position: relative;
	display: block;
	margin: 0;
	border: 1px solid var(--ams-line);
	border-radius: var(--ams-r-card);
	background: var(--ams-white);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--ams-t-fast) var(--ams-ease-out), box-shadow var(--ams-t-fast) var(--ams-ease-out);
}

.ams-praesent__option:hover {
	border-color: var(--ams-primary);
}

/* Das Feld bleibt bedienbar (Tastatur, Screenreader), sichtbar ist die Kachel. */
.ams-praesent__option input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.ams-praesent__option:has(input:checked) {
	border-color: var(--ams-primary);
	box-shadow: 0 0 0 1px var(--ams-primary), var(--ams-shadow-card);
}

.ams-praesent__option:has(input:focus-visible) {
	outline: 2px solid var(--ams-primary);
	outline-offset: 2px;
}

.ams-praesent__option-bild {
	display: block;
	aspect-ratio: 1 / 1;
	border-bottom: 1px solid var(--ams-line);
}

.ams-praesent__option-bild img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--ams-s-3);
}

.ams-praesent__option-name {
	display: block;
	padding: var(--ams-s-3) var(--ams-s-4) var(--ams-s-4);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ams-ink);
}

.ams-praesent__option-name small {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--ams-ink-3);
}

/* Inhalt und Persoenlich: Haken als Pillen. */
.ams-praesent__haken,
.ams-praesent__antwort {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ams-s-3);
	margin-top: var(--ams-s-5);
}

.ams-praesent__hak {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 42px;
	margin: 0;
	padding: 0 var(--ams-s-4) 0 var(--ams-s-3);
	border: 1px solid var(--ams-line);
	border-radius: var(--ams-r-pill);
	background: var(--ams-white);
	font-size: 14.5px;
	line-height: 1;
	color: var(--ams-ink);
	cursor: pointer;
	transition: border-color var(--ams-t-fast) var(--ams-ease-out);
}

.ams-praesent__hak:hover,
.ams-praesent__hak:has(input:checked) {
	border-color: var(--ams-primary);
}

/* "Nicht dabei?": kein Haken, sondern ein Sprung zum Textfeld (Eugen, 08.10.2026). */
.ams-praesent__hak--frei {
	padding-left: var(--ams-s-4);
	border-style: dashed;
	color: var(--ams-primary);
	font-weight: 500;
}

.ams-praesent__hak--frei:hover {
	background: var(--ams-surface);
	color: var(--ams-primary-dark);
}

/* Flatsome versteckt Haken und gibt ihnen eigene Raender; hier das Kaestchen schlicht. */
.ams-praesent__hak input {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid var(--ams-line-2);
	border-radius: 4px;
	background: var(--ams-white);
	cursor: pointer;
}

.ams-praesent__hak--rund input {
	border-radius: 50%;
	border-width: 2px;
}

.ams-praesent__hak input:checked {
	border-color: var(--ams-primary);
	background: var(--ams-primary);
}

.ams-praesent__hak--rund input:checked {
	background: radial-gradient(var(--ams-primary) 45%, var(--ams-white) 50%);
}

.ams-praesent__hak input:focus-visible {
	outline: 2px solid var(--ams-primary);
	outline-offset: 2px;
}

/* Stueckzahl, Budget, Termin in einer Reihe; Nachricht darunter voll. */
.ams-praesent__angaben {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: var(--ams-s-5);
}

/* -- Zusammenfassung rechts, bleibt beim Scrollen stehen ------------------------- */

.ams-praesent__zusammen {
	position: sticky;
	top: var(--ams-s-5);
	display: flex;
	flex-direction: column;
	gap: var(--ams-s-4);   /* 24 -> 16: die Spalte wirkte in die Laenge gezogen (Eugen, 08.10.2026) */
	padding: var(--ams-s-6);
	border-radius: var(--ams-r-card);
	background: var(--ams-surface);
}

.ams-praesent__kopfzeile {
	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);
}

.ams-praesent__liste {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: var(--ams-s-3) var(--ams-s-4);
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
}

/* Flatsome setzt dt/dd in Grossbuchstaben (gemessen 08.10.2026) -- hier normal. */
.ams-praesent__liste dt {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ams-ink-3);
}

.ams-praesent__liste dd {
	margin: 0;
	text-transform: none;
	color: var(--ams-ink);
}

/* Flatsome gibt hr opacity .1 (unsichtbar auf Surface, gemessen 16.09.2026). */
.ams-praesent__zusammen hr {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--ams-line-2);
	opacity: 1;
}

.ams-praesent__kontakt {
	gap: var(--ams-s-3);
}

.ams-praesent__kontakt .ams-kontakt__feld input {
	height: 44px;
}

.ams-praesent__antwort {
	margin-top: 0;
}

.ams-praesent__zusammen .ams-praesent__hak {
	background: var(--ams-white);
}

.ams-praesent__senden.button {
	width: 100%;
	margin: 0;
}

/* kontakt.css gibt dem Hinweis flex: 1 1 320px (neben dem Knopf); in dieser Spalte
   wuerde das 320 px Hoehe (gemessen 08.10.2026). */
.ams-praesent__zusammen .ams-kontakt__hinweis {
	flex: none;
}

/* Telefon und E-Mail mit Symbol wie die Kontaktleiste der Kontaktseite (Klassen aus
   kontakt.css: .ams-kontakt-tel, .ams-kontakt-zeiten, .ams-kontakt-wege). Flatsome rueckt
   Listenpunkte ein, kontakt.css setzt das nur unter .ams-kontakt-leiste zurueck. */
.ams-praesent__zusammen .ams-kontakt-tel {
	margin-top: var(--ams-s-2);
	font-size: 26px;
}

.ams-praesent__zusammen ul li {
	margin-left: 0;
}

.ams-praesent__zusammen p {
	margin: 0;
}

/* -- Tablet und Mobil ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.ams-praesent__raster {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ams-s-6);
	}

	.ams-praesent__zusammen {
		position: static;
	}

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

@media (max-width: 849px) {
	.ams-praesent {
		padding-top: var(--ams-s-6);
		padding-bottom: var(--ams-s-8);
	}

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

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

	.ams-praesent__stufe legend small {
		margin-left: 0;
		flex-basis: 100%;
	}
}