/* ===========================================================================
 * home.css -- Startseite (Eugen, Phase 3, 14.09.2026).
 *
 * GENERIERT aus scripts/home.css.tpl (scripts/gen-css.py setzt die
 * Symbol-Masken --ams-icon-* aus dem Entwurf ein). Regeln in der .tpl
 * aendern, dann das Skript laufen lassen -- nicht hier.
 *
 * Entwurf: output/startseite/Main.dc.html. Werte nur aus tokens.css.
 *
 * MARKUP: Die Seite "Startseite" ist eine UX-Builder-Seite (Vorlage
 * page-blank.php, Sektionen mit Klassen). Angelegt von
 * scripts/startseite-anlegen.php -- dort steht das HTML, hier nur Stil.
 *
 *   section.ams-hero  > .ux-slider (Flickity) > .row.ams-slide
 *       .col (7) > .ams-slide-text        .col (5) > .ux-image.ams-slide-bild
 *   section.ams-sortiment > .ams-sektion-kopf, .ams-sortiment-leiste (Chips, "Alle ansehen"),
 *                           .ams-kachel-raster--produkte > a.ams-kachel  (Plugin, [ams_sortiment])
 *   section.ams-prozess   > .ams-sektion-kopf, .ams-prozess-raster > .ams-schritt
 *   section.ams-trust     > ul.ams-trustbar > li.ams-trust-*
 *
 * Gestaltungsattribute im Builder sind auf padding="0px" beschraenkt (die
 * Sektion setzt ihr Padding inline, das ist nur so zu neutralisieren).
 * ======================================================================== */

:root {
	--ams-icon-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
	--ams-icon-motiv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/svg%3E");
	--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-pruefen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zM288 368a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm211.3-43.3c-6.2-6.2-16.4-6.2-22.6 0L416 385.4l-28.7-28.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l40 40c6.2 6.2 16.4 6.2 22.6 0l72-72c6.2-6.2 6.2-16.4 0-22.6z'/%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-erfahrung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/svg%3E");
	--ams-icon-produktion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M64 32C46.3 32 32 46.3 32 64l0 240 0 48 0 80c0 26.5 21.5 48 48 48l416 0c26.5 0 48-21.5 48-48l0-128 0-151.8c0-18.2-19.4-29.7-35.4-21.1L352 215.4l0-63.2c0-18.2-19.4-29.7-35.4-21.1L160 215.4 160 64c0-17.7-14.3-32-32-32L64 32z'/%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-serienbrief: 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-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");
}

/* -- Bausteine, seitenweit wiederverwendbar --------------------------------- */

.ams-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ams-s-2);
	font-size: var(--ams-t-eyebrow-size);
	font-weight: 600;
	letter-spacing: var(--ams-t-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--ams-primary);
}

.ams-eyebrow::before {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	background: var(--ams-primary);
	flex-shrink: 0;
}

.ams-sektion-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ams-s-3) var(--ams-s-6);
	margin-bottom: var(--ams-s-6);
}

.ams-sektion-kopf h2 {
	margin: 0;
	font: var(--ams-t-h2);
	letter-spacing: -.01em;
	color: var(--ams-ink);
}

.ams-sektion-kopf .ams-eyebrow + h2 {
	margin-top: var(--ams-s-3);
}

.ams-sektion-hinweis {
	font: var(--ams-t-small);
	color: var(--ams-ink-3);
}

/* Sektionsabstand: Flatsome-Sektionen tragen ihr Padding inline (im
   Builder auf 0 gesetzt), der Rhythmus kommt von hier. */
.ams-sortiment > .section-content,
.ams-anleitung > .section-content,
.ams-prozess > .section-content {
	padding-top: var(--ams-s-9);
	padding-bottom: var(--ams-s-9);
}

/* Prozess und Trustbar liegen nah beieinander (Eugen, 30.09.2026): gleiche
   Flaeche, 56 px statt 128. section davor, damit es auch mobil gilt. */
section.ams-prozess > .section-content {
	padding-bottom: var(--ams-s-6);
}

.ams-trust > .section-content {
	padding-top: var(--ams-s-5);
	padding-bottom: var(--ams-s-7);
}

.ams-prozess {
	background: var(--ams-surface);
}

.ams-trust {
	background: var(--ams-surface);   /* wie "So bestellen Sie" (Eugen, 30.09.2026) */
	border-bottom: 1px solid var(--ams-line);
}

/* Mehr Luft zwischen Titel und Ablauf (Eugen, 14.09.2026). */
.ams-prozess .ams-sektion-kopf {
	margin-bottom: var(--ams-s-8);
}

/* -- Slider ------------------------------------------------------------------
 * Schmal genug, dass die Sortiment-Sektion bei 1440x900 anschneidet:
 * Kopf 72 + 56, Slider ~ 420, Rest sichtbar. Hoehe ueber min-height des
 * Slides, nicht ueber den Slider -- Flickity misst die Slides.
 */

.ams-hero {
	background: var(--ams-surface);
}

/* Flatsomes .row ist flex; align-items zentriert die Spalten. NICHT
   v_align="middle" im Builder: Flatsome setzt dann translateY(-50 %) ohne
   top:50 %, und der Slide haengt 210 px hinter dem Kopf (14.09.2026). */
/* Feste Hoehe (Eugen, 14.09.2026): bei 1440x900 bleiben Titel und Hinweis
   der Sortiment-Sektion sichtbar (Kopf 128 + 420 = 548). Bilder passen sich
   in die Hoehe ein, nicht umgekehrt -- sonst wuchs der Slider mit dem
   hoechsten Bild (Slide 2: 472 px). */
.ams-hero .row.ams-slide {
	height: 420px;
	margin: 0;
	/* Seitenrand wie der Container (layout.css): die Slides liegen im
	   Slider, nicht direkt in der Sektion, und bekommen ihn deshalb hier.
	   Ohne ihn stand der Text unter dem linken Pfeil (1920 px, 14.09.2026).
	   .row im Selektor ist noetig: Flatsome setzt
	   ".flickity-slider > div:not(.col) { padding: 0 }" mit (0,2,1), zwei
	   Klassen allein verlieren dagegen -- lautlos. */
	padding: var(--ams-s-7) calc(var(--ams-container-pad) - 15px);
	align-items: center;
}

/* Text und Bild stehen mittig in ihrer Spalte (Eugen, 14.09.2026), der
   Text bleibt linksbuendig. */
.ams-slide-text {
	display: flex;
	flex-direction: column;
	gap: var(--ams-s-4);
	max-width: 760px;   /* Zeilenlaenge der Ueberschrift auf breiten Monitoren */
	margin: 0 auto;
	padding-right: var(--ams-s-6);
}

/* Seit 30.09.2026 Freisteller der Grafik (2000 x 901, transparent, eigener
   Schatten), Spalten 6/6: breiter, ohne Kartenrundung. */
.ams-hero .ams-slide-bild {
	max-width: 760px;
	margin: 0 auto;
}

.ams-slide-text h1,
.ams-slide-text h2 {
	margin: 0;
	font: 500 clamp(2rem, 3vw, 2.75rem)/1.1 var(--ams-font);
	letter-spacing: -.02em;
	color: var(--ams-ink);
}

.ams-slide-text p {
	margin: 0;
	max-width: 560px;
	font: var(--ams-t-lead);
	color: var(--ams-ink-2);
}

.ams-slide-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ams-s-5);
	margin-top: var(--ams-s-1);
}

.ams-slide-cta .button {
	margin: 0;
	box-shadow: var(--ams-shadow-cta);
}

.ams-slide-cta .button:hover {
	box-shadow: var(--ams-shadow-cta-hover);
}

.ams-slide-hinweis {
	font: var(--ams-t-small);
	color: var(--ams-ink-3);
}

.ams-hero .ams-slide-bild .img-inner,
.ams-hero .ams-slide-bild img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 324px;   /* 420 minus 2 x 48 Innenabstand */
	margin: 0 auto;
}

/* Flickity gibt dem Slider tabindex=0 und fokussiert ihn nach einem Klick
   auf die Pfeile; der Fokusring aus tokens.css lag dann als roter Streifen
   unter dem Slider (14.09.2026). Die Pfeile behalten ihren eigenen Ring. */
.ams-hero .flickity-enabled:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Flickity-Bedienung: Pfeile als Kreislinie ohne Fuellung am Rand, Punkte
   unten -- der aktive als Strich in Rot. */
.ams-hero .flickity-prev-next-button {
	width: 44px;
	height: 44px;
	background: transparent;   /* Eugen, 14.09.2026: kein weisser Kreis */
	box-shadow: none;
	opacity: .35;   /* Eugen, 30.09.2026: in Ruhe schwach, dunkel erst mit der Maus im Slider */
	transition: opacity .2s;
	color: var(--ams-ink);
}

.ams-hero:hover .flickity-prev-next-button,
.ams-hero .flickity-prev-next-button:focus-visible {
	opacity: 1;
}

.ams-hero .flickity-prev-next-button:hover {
	background: transparent;
	color: var(--ams-primary);
}

/* Pfeile haengen am Inhalt, nicht am Fensterrand (Eugen, 30.09.2026): 16 px
   neben der Inhaltskante des Containers, auf Ultrawide also mit nach innen. */
.ams-hero .flickity-prev-next-button {
	--ams-pfeil-rand: max(4px, calc((100% - min(100%, var(--ams-container-max))) / 2 + var(--ams-container-pad) - 69px));   /* 44 Pfeil + 16 Luft + 9 Versatz von Flatsome */
}

.ams-hero .flickity-prev-next-button.previous { left: var(--ams-pfeil-rand); }
.ams-hero .flickity-prev-next-button.next     { right: var(--ams-pfeil-rand); }

.ams-hero .flickity-page-dots {
	bottom: var(--ams-s-5);
}

.ams-hero .flickity-page-dots .dot {
	width: 6px;
	height: 6px;
	margin: 0 4px;
	border: 0;
	border-radius: var(--ams-r-pill);
	background: var(--ams-line);
	opacity: 1;
	transition: width var(--ams-t-base) var(--ams-ease-out), background var(--ams-t-base) var(--ams-ease-out);
}

.ams-hero .flickity-page-dots .dot.is-selected {
	width: 24px;
	background: var(--ams-primary);
}

/* -- Sortiment: Kacheln im Rahmen ------------------------------------------- */

/* Fuenf Plaetze je Reihe, als Gruppe mittig (Eugen, 14.09.2026); die leeren
   Plaetze halten die Reihe, bis weitere Sortimente kommen, und verschwinden
   unter 1025 px. */
.ams-kachel-raster {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 320px));
	gap: var(--ams-s-5);   /* Luft zwischen den Kacheln (Eugen, 14.09.2026) */
	justify-content: center;
	/* ohne Rahmen und Trennlinien (Eugen, 14.09.2026) */
}

/* Hover: Rahmen in Kartenrundung statt Farbflaeche (Eugen, 14.09.2026).
   Der Rahmen ist immer da, nur transparent -- so springt beim Hover
   nichts. */
/* Badge "Individuell" oben links auf dem Kachelbild (Plugin sortiment.php, individuell.php, 08.10.2026) -
   dieselbe Form wie auf den Flatsome-Kacheln (product-card.css). */
.ams-kachel { position: relative; }
.ams-kachel-badge {
	position: absolute;
	top: calc(var(--ams-s-4) - 13px);   /* halb ueber der Oberkante des Bildes */
	left: calc(var(--ams-s-4) + 12px);
	z-index: 1;
	padding: 4px 12px;
	border-radius: var(--ams-r-pill);
	background: var(--ams-primary);
	color: var(--ams-white);
	font: 600 12px/1.4 var(--ams-font);
	letter-spacing: .02em;
}

.ams-kachel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ams-s-4);
	padding: var(--ams-s-4) var(--ams-s-4) var(--ams-s-5);
	border: 1px solid transparent;
	border-radius: var(--ams-r-card);
	background: var(--ams-white);
	color: var(--ams-ink);
	text-align: center;
	transition: border-color var(--ams-t-base) var(--ams-ease-out);
}

a.ams-kachel:hover {
	border-color: var(--ams-line);
	color: var(--ams-ink);
}

/* Bild fuellt die Kachel bis auf den Rand, 4:3, abgerundet (Eugen,
   14.09.2026: "groesser, rundlich"). cover statt contain, damit die Rundung
   am Bild sitzt und nicht an einer leeren Flaeche. */
.ams-kachel img {
	display: block;
	width: 100%;
	max-width: 420px;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	border-radius: var(--ams-r-image);
	transition: transform var(--ams-t-slow) var(--ams-ease-out);
}

.ams-kachel:hover img {
	transform: translateY(-4px);
}

.ams-kachel-name {
	display: block;
	font-size: 17px;
	font-weight: 600;
}

.ams-kachel-sub {
	display: block;
	margin-top: var(--ams-s-1);
	font-size: 13px;
	color: var(--ams-ink-3);
}

/* -- Sortiment, Entwurf A (Eugen, 18.09.2026): Chips der Bereiche ueber dem
   Raster, vier Produktkacheln je Reihe; Markup aus dem Plugin ams-shop
   ([ams_sortiment]), Wechsel in assets/js/sortiment.js. Aktiver Chip in der
   Akzentfarbe statt Schwarz (Eugen, 18.09.2026 -- anders als die FAQ-Chips). */
.ams-sortiment-leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ams-s-3) var(--ams-s-6);
	margin-bottom: var(--ams-s-6);
}

.ams-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ams-s-3);
}

/* Flatsome gibt jedem <button> Versalien, Laufweite, Rand und Schatten --
   hier alles zurueck auf die Chip-Form der FAQ-Seite. */
.ams-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 9px 18px;
	min-height: 0;
	border-radius: var(--ams-r-pill);
	border: 1px solid var(--ams-line);
	background: var(--ams-white);
	box-shadow: none;
	font: 500 14px/1.3 var(--ams-font);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ams-ink);
	cursor: pointer;
	transition: border-color var(--ams-t-fast) var(--ams-ease-out),
	            background var(--ams-t-fast) var(--ams-ease-out),
	            color var(--ams-t-fast) var(--ams-ease-out);
}

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

.ams-chip:hover {
	border-color: var(--ams-primary);
	background: var(--ams-white);
	color: var(--ams-primary);
}

.ams-chip.ist-aktiv,
.ams-chip.ist-aktiv:hover {
	background: var(--ams-primary);
	border-color: var(--ams-primary);
	color: var(--ams-white);
}

.ams-chip.ist-aktiv b {
	color: rgba(255, 255, 255, .75);
}

.ams-chip[disabled],
.ams-chip[disabled]:hover {
	background: var(--ams-surface);
	border-color: transparent;
	color: var(--ams-ink-3);
	cursor: default;
	opacity: 1;
}

.ams-chip[disabled] b {
	font-size: 12px;
}

.ams-sortiment-alle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ams-ink);
}

.ams-sortiment-alle::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
}

.ams-sortiment-alle:hover {
	color: var(--ams-primary);
}

/* Fuenf je Reihe statt vier wie im Entwurf: "Kacheln etwas kleiner"
   (Eugen, 18.09.2026) -- 1440: 240 statt 306 px. Tablet 3, mobil 2. */
.ams-kachel-raster--produkte {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ams-kachel-raster--produkte [hidden] {
	display: none !important;
}

/* Seite "Anlaesse" (Plugin-Shortcode [ams_anlaesse]): Textkacheln ohne Bild,
   gleiche Karte wie das Sortiment. */
.ams-anlaesse {
	grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
	gap: var(--ams-s-4);
	justify-content: center;
}

.ams-anlaesse .ams-kachel--anlass {
	padding: var(--ams-s-6) var(--ams-s-4);
	border-color: var(--ams-line);
	gap: var(--ams-s-1);
}

.ams-anlaesse .ams-kachel--anlass:hover {
	border-color: var(--ams-primary);
}

.ams-anlaesse .ams-kachel-name {
	font-size: 18px;
}

/* -- Prozess: vier Schritte als Ablauf --------------------------------------- */

/* Mehr Luft zwischen den Schritten und zum Rand (Eugen, 14.09.2026);
   der Sektionskopf bleibt in der Flucht der Seite, nur das Raster ist
   eingerueckt. */
.ams-prozess-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ams-s-8);
	padding: 0 var(--ams-s-6);
}

.ams-schritt {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ams-schritt-kopf {
	display: flex;
	align-items: center;
	gap: var(--ams-s-3);
}

.ams-schritt-nr {
	font-size: 32px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ams-primary);
	line-height: 1;
}

/* Graue Linie zum naechsten Schritt, nur der Pfeil am Ende in Akzentfarbe
   (Eugen, 14.09.2026). Linie = ::after im Fluss, Pfeil = ::before absolut
   am rechten Rand; der letzte Schritt hat nur die Linie. */
.ams-schritt-kopf {
	position: relative;
}

.ams-schritt-kopf::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--ams-line);
}

.ams-schritt:not(:last-child) .ams-schritt-kopf::after {
	margin-right: 26px;
}

.ams-schritt:not(:last-child) .ams-schritt-kopf::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 14px;
	height: 22px;
	transform: translateY(-50%);
	background-color: var(--ams-primary);
	-webkit-mask: var(--ams-icon-pfeil) center / contain no-repeat;
	mask: var(--ams-icon-pfeil) center / contain no-repeat;
}

.ams-schritt h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 19px;
	font-weight: 500;
	color: var(--ams-ink);
}

.ams-schritt h3::before {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 22px;
	background-color: var(--ams-primary);
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain;    mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

.ams-schritt--motiv h3::before     { -webkit-mask-image: var(--ams-icon-motiv);     mask-image: var(--ams-icon-motiv); }
.ams-schritt--text h3::before      { -webkit-mask-image: var(--ams-icon-stift);     mask-image: var(--ams-icon-stift); }
.ams-schritt--pruefen h3::before   { -webkit-mask-image: var(--ams-icon-pruefen);   mask-image: var(--ams-icon-pruefen); }
.ams-schritt--lieferung h3::before { -webkit-mask-image: var(--ams-icon-lieferung); mask-image: var(--ams-icon-lieferung); width: 28px; }

.ams-schritt p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ams-ink-2);
}

.ams-schritt p strong {
	font-weight: 600;
	color: var(--ams-ink);
}

/* -- Trustbar: fuenf Werte mit Trennlinien, keine Karten ------------------- */

/* Fuenf gleich breite Felder ueber die volle Breite, Inhalt je Feld
   mittig (Eugen, 14.09.2026). width 100 % gegen Flatsomes Listenpolster. */
/* .ams-trust davor: Flatsomes Listenregeln (Polster am ul, Rand am li)
   sind spezifischer als eine Klasse allein -- die Felder standen 20 px
   versetzt (gemessen 14.09.2026). */
.ams-trust .ams-trustbar {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));   /* vier seit 01.10.2026: Rechnung, Lieferzeit, Vorschau standen schon im Prozess */
	gap: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ams-trust .ams-trustbar > li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: var(--ams-s-2) var(--ams-s-4);
	border-right: 1px solid var(--ams-line);
	text-align: center;
}

.ams-trust .ams-trustbar > li:last-child {
	border-right: 0;
}

.ams-trustbar strong {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 27px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--ams-ink);
}

.ams-trustbar strong::before {
	content: "";
	width: 21px;
	height: 23px;
	background-color: var(--ams-primary);
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain;    mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

.ams-trust--erfahrung strong::before  { -webkit-mask-image: var(--ams-icon-erfahrung);    mask-image: var(--ams-icon-erfahrung); }
.ams-trust--produktion strong::before { -webkit-mask-image: var(--ams-icon-produktion);   mask-image: var(--ams-icon-produktion); width: 27px; }
.ams-trust--rechnung strong::before   { -webkit-mask-image: var(--ams-icon-rechnung);     mask-image: var(--ams-icon-rechnung); }
.ams-trust--lieferung strong::before  { -webkit-mask-image: var(--ams-icon-lieferung);    mask-image: var(--ams-icon-lieferung); width: 29px; }
.ams-trust--vorschau strong::before   { -webkit-mask-image: var(--ams-icon-pruefen);      mask-image: var(--ams-icon-pruefen); }   /* statt Musterkarten: keine Muster vorgesehen (Eugen, 30.09.2026) */
.ams-trust--serienbrief strong::before { -webkit-mask-image: var(--ams-icon-serienbrief); mask-image: var(--ams-icon-serienbrief); width: 24px; }
.ams-trust--papier strong::before     { -webkit-mask-image: var(--ams-icon-musterkarten); mask-image: var(--ams-icon-musterkarten); width: 26px; }   /* Bogenstapel */

.ams-trustbar span {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ams-ink-3);
}

/* Ab 850 px aussen nur leicht eingerueckt (32 px), die Luft zwischen den
   Punkten ueberall gleich (Eugen, 30.09.2026). Der freie Platz waechst in die
   Felder: aussen halb so viel wie innen, weil dort nur eine Seite Luft hat --
   so bleibt jede Trennlinie mittig zwischen zwei Inhalten. */
@media (min-width: 850px) {
	.ams-trust .ams-trustbar {
		display: flex;
	}

	.ams-trust .ams-trustbar > li {
		flex: 1 1 auto;
	}

	.ams-trust .ams-trustbar > li:first-child {
		flex-grow: .5;
		align-items: flex-start;
		padding-left: var(--ams-s-6);   /* in der Flucht der Prozessschritte */
	}

	.ams-trust .ams-trustbar > li:last-child {
		flex-grow: .5;
		align-items: flex-end;
		padding-right: var(--ams-s-6);
	}
}

/* -- Tablet und Mobil (Flatsome stapelt Spalten unter 850 px) -------------- */

@media (max-width: 849px) {
	.ams-hero .row.ams-slide {
		height: auto;
		padding: var(--ams-s-6) 0 var(--ams-s-8);
	}

	.ams-hero .ams-slide-bild .img-inner,
	.ams-hero .ams-slide-bild img {
		max-height: 260px;
	}

	.ams-slide-text {
		padding-right: 0;
		margin-bottom: var(--ams-s-5);
	}

	.ams-hero .flickity-prev-next-button {
		display: none;
	}

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

	/* Produktkacheln zu zweit, sonst wird die Sektion mit sieben Karten lang;
	   Namen kleiner, damit "Klappkarte DIN lang quer, Falz links" nicht
	   vierzeilig wird (gemessen 390 px, 18.09.2026). */
	.ams-kachel-raster--produkte {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ams-s-3);
	}

	.ams-kachel-raster--produkte .ams-kachel {
		padding: var(--ams-s-2) var(--ams-s-2) var(--ams-s-4);
	}

	.ams-kachel-raster--produkte .ams-kachel-name {
		font-size: 15px;
	}

	.ams-prozess-raster {
		gap: var(--ams-s-6);
		padding: 0;
	}

	/* .ams-trust davor: ohne sie verlor der Block gegen die Regel oben, die
	   fuenf Punkte standen mobil uebereinander (gemessen 30.09.2026). */
	.ams-trust .ams-trustbar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--ams-s-5);
	}

	.ams-trustbar strong {
		font-size: 22px;   /* "Serienbrief" passt sonst nicht in die halbe Breite */
	}

	.ams-trust .ams-trustbar > li:nth-child(2n) {
		border-right: 0;
	}

	.ams-sortiment > .section-content,
	.ams-anleitung > .section-content,
	.ams-prozess > .section-content {
		padding-top: var(--ams-s-8);
		padding-bottom: var(--ams-s-8);
	}
}

@media (max-width: 1024px) {
	.ams-kachel--leer {
		display: none;
	}
}

@media (min-width: 850px) and (max-width: 1024px) {
	.ams-prozess-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

/* -- Anleitung im Video (Eugen, 08.10.2026) ----------------------------------
 * Sektion zwischen Sortiment und "So bestellen Sie": Erklaervideo (Upload in
 * der Mediathek, Quelle Desktopmservice-shop-video) links, Inhaltsliste und
 * Knopf rechts. Weiss mit Linie oben, weil Sortiment und Prozess angrenzen.
 */

.ams-anleitung {
	border-top: 1px solid var(--ams-line);
}

.ams-anleitung-raster {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: var(--ams-s-7);
	align-items: center;
}

.ams-anleitung-film {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--ams-r-card);
	background: var(--ams-surface);
	box-shadow: var(--ams-shadow-card);
}

.ams-anleitung-video {
	display: block;
	cursor: pointer;   /* Klick = Play/Pause, assets/js/anleitung.js */
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ams-anleitung-untertitel {
	margin: 0 0 var(--ams-s-3);
	font: var(--ams-t-h3);
	color: var(--ams-ink);
}

.ams-anleitung-text p {
	margin: 0 0 var(--ams-s-5);
	font: var(--ams-t-lead);
	color: var(--ams-ink-2);
}

.ams-anleitung-liste {
	display: grid;
	gap: var(--ams-s-3);
	margin: 0 0 var(--ams-s-6);
	padding: 0;
	list-style: none;
	counter-reset: anleitung;
}

.ams-anleitung-liste li {
	display: flex;
	gap: var(--ams-s-3);
	align-items: baseline;
	margin: 0;
	font: var(--ams-t-body);
	color: var(--ams-ink);
	counter-increment: anleitung;
}

.ams-anleitung-liste li::before {
	content: counter(anleitung, decimal-leading-zero);
	min-width: 1.6em;
	font-weight: 600;
	color: var(--ams-primary);
}

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