/* ===========================================================================
 * faq.css -- Seite "Haeufige Fragen" (Eugen, 16.09.2026).
 *
 * GENERIERT aus scripts/faq.css.tpl (scripts/gen-css.py setzt die
 * Themen-Symbole --ams-icon-* ein). Regeln in der .tpl aendern, dann das
 * Skript laufen lassen -- nicht hier.
 *
 * Entwurf B aus output/faq/faq-entwuerfe.html. Werte nur aus tokens.css;
 * das Telefonsymbol (--ams-icon-telefon) kommt aus header.css, das auf
 * jeder Seite laedt. Markup aus scripts/faq-anlegen.php (Seite 292):
 *
 *   section.ams-faq-seite
 *     .row.ams-faq-kopf    > .col > nav.ams-brot, h1, p.ams-lead, .ams-faq-chips
 *     .row.ams-faq-thema   > .col > h2.ams-faq-titel, .accordion.ams-faq-akk (Flatsome)
 *     .row.ams-faq-schluss > .col > .ams-nicht-dabei
 *
 * Filter und Anker: assets/js/faq.js. Brotkrumen: layout.css (.ams-brot).
 * ======================================================================== */

:root {
	--ams-icon-stift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/svg%3E");
	--ams-icon-lieferung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M112 0C85.5 0 64 21.5 64 48l0 48L16 96c-8.8 0-16 7.2-16 16s7.2 16 16 16l48 0 208 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L64 160l-16 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l16 0 176 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L64 224l-48 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l48 0 144 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L64 288l0 128c0 53 43 96 96 96s96-43 96-96l128 0c0 53 43 96 96 96s96-43 96-96l32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l0-64 0-32 0-18.7c0-17-6.7-33.3-18.7-45.3L512 114.7c-12-12-28.3-18.7-45.3-18.7L416 96l0-48c0-26.5-21.5-48-48-48L112 0zM544 237.3l0 18.7-128 0 0-96 50.7 0L544 237.3zM160 368a48 48 0 1 1 0 96 48 48 0 1 1 0-96zm272 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0z'/%3E%3C/svg%3E");
	--ams-icon-rechnung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-288-128 0c-17.7 0-32-14.3-32-32L224 0 64 0zM256 0l0 128 128 0L256 0zM80 64l64 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L80 96c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l64 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm16 96l192 0c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32L96 352c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32zm0 32l0 64 192 0 0-64L96 256zM240 416l64 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E");
	--ams-icon-musterkarten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M58.9 42.1c3-6.1 9.6-9.6 16.3-8.7L320 64 564.8 33.4c6.7-.8 13.3 2.7 16.3 8.7l41.7 83.4c9 17.9-.6 39.6-19.8 45.1L439.6 217.3c-13.9 4-28.8-1.9-36.2-14.3L320 64 236.6 203c-7.4 12.4-22.3 18.3-36.2 14.3L37.1 170.6c-19.3-5.5-28.8-27.2-19.8-45.1L58.9 42.1zM321.1 128l54.9 91.4c14.9 24.8 44.6 36.6 72.5 28.6L576 211.6l0 167c0 22-15 41.2-36.4 46.6l-204.1 51c-10.2 2.6-20.9 2.6-31 0l-204.1-51C79 419.7 64 400.5 64 378.5l0-167L191.6 248c27.8 8 57.6-3.8 72.5-28.6L318.9 128l2.2 0z'/%3E%3C/svg%3E");
	--ams-icon-datei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-288-128 0c-17.7 0-32-14.3-32-32L224 0 64 0zM256 0l0 128 128 0L256 0zM112 256l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E");
}

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

/* -- Kopf ---------------------------------------------------------------------- */

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

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

/* Themen-Chips: Pillen, die aktive dunkel. */
.ams-faq-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ams-s-3);
	margin-top: var(--ams-s-6);
}

.ams-faq-chips a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: var(--ams-r-pill);
	border: 1px solid var(--ams-line);
	background: var(--ams-white);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ams-ink);
	transition: border-color var(--ams-t-fast) var(--ams-ease-out),
	            background var(--ams-t-fast) var(--ams-ease-out);
}

.ams-faq-chips a b {
	font-weight: 400;
	color: var(--ams-ink-3);
}

.ams-faq-chips a:hover {
	border-color: var(--ams-primary);
	color: var(--ams-primary);
}

.ams-faq-chips a.ist-aktiv {
	background: var(--ams-ink);
	border-color: var(--ams-ink);
	color: var(--ams-white);
}

.ams-faq-chips a.ist-aktiv b {
	color: rgba(255, 255, 255, .7);
}

/* -- Themen mit Aufklappern ------------------------------------------------------ */

.ams-faq-seite {
	--ams-faq-einzug: 36px;  /* 24 px Symbol + 12 px Luft */
}

.ams-faq-thema {
	margin-top: var(--ams-s-7);
}

/* margin 0 auto 0 0: Flatsome zentriert .col-inner bei max-width (gemessen
   16.09.2026, der Strang stand rechts); hier links wie der Kopf. */
.ams-faq-thema > .col > .col-inner,
.ams-faq-schluss > .col > .col-inner {
	max-width: 880px;
	margin: 0 auto 0 0;
}

.ams-faq-thema[hidden] {
	display: none;
}

/* Symbol vor dem Thementitel, 24 px, Text und Fragen dahinter buendig
   eingerueckt (Eugen, 16.09.2026). */
.ams-faq-titel {
	position: relative;
	margin: 0 0 var(--ams-s-3);
	padding-left: var(--ams-faq-einzug);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--ams-ink);
	scroll-margin-top: var(--ams-s-6);
}

.ams-faq-titel::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 24px;
	height: 24px;
	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-faq-thema--bestellen  .ams-faq-titel::before { -webkit-mask-image: var(--ams-icon-stift);        mask-image: var(--ams-icon-stift); }
.ams-faq-thema--druckdaten .ams-faq-titel::before { -webkit-mask-image: var(--ams-icon-datei);        mask-image: var(--ams-icon-datei); }
.ams-faq-thema--lieferung  .ams-faq-titel::before { -webkit-mask-image: var(--ams-icon-lieferung);    mask-image: var(--ams-icon-lieferung); }
.ams-faq-thema--zahlung    .ams-faq-titel::before { -webkit-mask-image: var(--ams-icon-rechnung);     mask-image: var(--ams-icon-rechnung); }
.ams-faq-thema--muster     .ams-faq-titel::before { -webkit-mask-image: var(--ams-icon-musterkarten); mask-image: var(--ams-icon-musterkarten); }

/* Fragenbereich buendig mit dem Titeltext. */
.ams-faq-seite .ams-faq-akk {
	margin-left: var(--ams-faq-einzug);
}

.ams-faq-titel small {
	display: block;
	margin-top: var(--ams-s-1);
	font-size: 14px;
	font-weight: 400;
	color: var(--ams-ink-3);
}

/* Flatsome-Aufklapper: Frage als Zeile mit Linie, Plus rechts als Kreis,
   offene Frage dunkelrot. Flatsome setzt border-top an .accordion-title
   und das Symbol links (.toggle) -- hier gespiegelt. */
.ams-faq-seite .accordion {
	border-top: 1px solid var(--ams-line);
}

.ams-faq-seite .accordion-item {
	border-bottom: 1px solid var(--ams-line);
}

.ams-faq-seite .accordion-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ams-s-5);
	padding: 18px 0;
	border: 0;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ams-ink);
	transition: color var(--ams-t-fast) var(--ams-ease-out);
}

/* Flatsome legt der offenen Frage eine graue Flaeche unter (gemessen 16.09.2026). */
.ams-faq-seite .accordion-title:hover,
.ams-faq-seite .accordion-title.active {
	background: transparent;
	color: var(--ams-primary-dark);
}

/* Feste 28 x 28 mit min-height 0 und flex: Flatsomes Knopf wurde 28 x 39
   (gemessen 16.09.2026), die Rundung damit oval. */
.ams-faq-seite .accordion-title .toggle {
	order: 2;
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	min-height: 0;
	padding: 0;
	margin: 0;
	line-height: 1;
	border: 1px solid var(--ams-line);
	border-radius: 50%;
	background: var(--ams-white);
	color: var(--ams-primary);
	opacity: 1;
	transition: background var(--ams-t-fast) var(--ams-ease-out),
	            color var(--ams-t-fast) var(--ams-ease-out),
	            transform var(--ams-t-base) var(--ams-ease-out);
}

.ams-faq-seite .accordion-title .toggle i {
	width: auto;
	font-size: 16px;
	line-height: 1;
}

.ams-faq-seite .accordion-title.active .toggle {
	background: var(--ams-primary);
	border-color: var(--ams-primary);
	color: var(--ams-white);
}

/* Antwort leicht eingerueckt (Eugen, 16.09.2026). */
.ams-faq-seite .accordion-inner {
	max-width: 744px;
	padding: 0 44px var(--ams-s-5) var(--ams-s-5);
	font: var(--ams-t-body);
	font-size: 15px;
	color: var(--ams-ink-2);
}

.ams-faq-seite .accordion-inner p:last-child {
	margin-bottom: 0;
}

/* Platzhalter grau, bis die Antwort da ist (Brief). */
.ams-platzhalter {
	color: var(--ams-ink-3);
}

/* -- Schluss: Nicht dabei? ------------------------------------------------------ */

.ams-nicht-dabei {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ams-s-6);
	margin-top: var(--ams-s-8);
	padding: var(--ams-s-6) var(--ams-s-7);
	border-radius: var(--ams-r-card);
	background: var(--ams-surface);
}

.ams-nicht-dabei h2 {
	margin: 0;
	font-size: 22px;
	font-weight: 500;
	color: var(--ams-ink);
}

.ams-nicht-dabei p {
	margin: var(--ams-s-2) 0 0;
	font-size: 15px;
	color: var(--ams-ink-2);
}

.ams-nicht-dabei__aktionen {
	display: flex;
	align-items: center;
	gap: var(--ams-s-4);
}

.ams-nicht-dabei__aktionen .button {
	margin: 0;
}

.ams-nicht-dabei__tel {
	display: inline-flex;
	align-items: center;
	gap: var(--ams-s-3);
	font-size: 18px;
	font-weight: 500;
	color: var(--ams-ink);
}

.ams-nicht-dabei__tel::before {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--ams-primary);
	-webkit-mask-image: var(--ams-icon-telefon);
	mask-image: var(--ams-icon-telefon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.ams-nicht-dabei__tel:hover {
	color: var(--ams-primary);
}

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

	.ams-faq-thema {
		margin-top: var(--ams-s-6);
	}

	.ams-faq-seite .accordion-inner {
		padding-right: 0;
	}

	.ams-nicht-dabei {
		padding: var(--ams-s-5);
	}
}