/* ===========================================================================
 * home.css -- Startseite, insbesondere die runden Rubrikkacheln.
 *
 * GEGEN WELCHES MARKUP HIER GESTYLT WIRD
 *
 *   section.shop-round-cats            <- Klasse am [section] gesetzt
 *     div.product-category.col
 *       div.col-inner
 *         a
 *           div.box.box-normal
 *             div.box-image > img
 *             div.box-text.text-center
 *               div.box-text-inner > h5.header-title
 *
 * Der Kachelstil "normal" -- Beschriftung UNTER dem Bild -- kommt aus dem
 * Customizer (cat_style). Ab Werk stand dort "badge", was die Beschriftung
 * ueber das Bild legt. Deshalb steht hier nichts dazu: Das Theme besitzt die
 * Einstellung.
 * ======================================================================== */

/* -- Runde Rubrikkacheln ------------------------------------------------- */

.shop-round-cats .product-category .box-image {
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 50%;
	/* Ruhiger Ton hinter dem Bild -- Begruendung weiter unten. Ein echtes,
	   deckendes Motiv verdeckt ihn vollstaendig. */
	background: #e6ebe8;
	transition: box-shadow var(--shop-transition);
}

.shop-round-cats .product-category .box-image img {
	display: block;
	width: 100%;
	/* Die Motive sind querformatig (1600 x 1015 px). Mit width allein bliebe
	   im Kreis oben und unten eine Luecke -- object-fit schneidet mittig zu,
	   sodass das Motiv den Kreis fuellt. */
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.shop-round-cats .product-category .col-inner:hover .box-image {
	box-shadow: var(--shop-shadow-hover);
}

/*
 * SOLANGE ES KEINE KATEGORIEBILDER GIBT
 *
 * Keine der elf Rubriken hat ein eigenes Bild (F2). WooCommerce liefert dann
 * seinen Platzhalter -- elf identische graue Kreise mit Bildsymbol, was nach
 * Fehler aussieht statt nach Absicht.
 *
 * Der Platzhalter wird deshalb ueber den Dateinamen erkannt und ausgeblendet;
 * uebrig bleibt ein ruhiger Kreis in einem hellen Ton der Markenfarbe. Kommt
 * spaeter ein echtes Bild dazu, greift die Regel fuer dieses Motiv nicht mehr
 * und das Bild erscheint -- ohne dass hier etwas geaendert werden muss.
 *
 * Der Selektor haengt am Dateinamen, nicht an einer Klasse: WooCommerce
 * vergibt fuer den Platzhalter keine eigene. Sollte sich der Name in einer
 * kuenftigen WooCommerce-Fassung aendern, faellt die Regel aus -- dann sind
 * wieder graue Kreise zu sehen. Das ist der sichtbare, harmlose Fehlerfall.
 */
.shop-round-cats .product-category .box-image img[src*="woocommerce-placeholder"] {
	opacity: 0;
}

/* -- Beschriftung -------------------------------------------------------- */

.shop-round-cats .product-category .box-text {
	padding-top: var(--shop-space-2);
}

.shop-round-cats .product-category .header-title {
	margin: 0;
	color: var(--shop-text);
	font-size: 1em;
}

/* Die Rubriknamen sind ungleich lang -- "Dank" gegen "Glueck und
   Glueckseligkeit". Ohne feste Hoehe stehen die Kreise einer Reihe auf
   verschiedenen Grundlinien. */
.shop-round-cats .product-category .col-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* ===========================================================================
 * AUFMACHER-VIDEO  (Startseite, erste Section, rechte Spalte)
 *
 * Die Datei liegt in Originalaufloesung (1296 x 1080) in der Mediathek --
 * verkleinert wird nur die ANZEIGE. 75 % der Spaltenbreite entspricht der
 * Vorgabe "etwa ein Viertel kleiner"; die Hoehe folgt ueber height:auto im
 * selben Verhaeltnis, weil das Seitenverhaeltnis erhalten bleibt.
 *
 * Die Bedienelemente sind im Markup beschnitten (controlslist), nicht hier:
 * Vollbild, Download, Wiedergabetempo und Streaming-Ziel sind abgeschaltet,
 * die Tonspur ist gar nicht erst kodiert. Seit 21.08.2026 startet es
 * ausserdem von allein und laeuft in der Schleife: autoplay muted loop
 * playsinline. Das "muted" ist Bedingung, nicht Hoeflichkeit -- ohne es
 * verweigert jeder Browser den automatischen Start.
 *
 * CONTROLS DUERFEN NICHT WEG. WCAG 2.2, Kriterium 2.2.2: Bewegung, die von
 * allein startet und laenger als fuenf Sekunden laeuft, braucht eine
 * Moeglichkeit zum Anhalten. Das Video laeuft 17,9 s und wiederholt sich.
 *
 * DAS LANGSAMERE TEMPO STECKT IN DER DATEI, nicht in einer Zeile Javascript.
 * Die Quelle laeuft mit 30 B/s, ausgeliefert wird sie mit 24 B/s bei
 * gestreckten Zeitstempeln -- 30 / 1,25 = 24 geht glatt auf, also traegt
 * jedes Bild der Quelle genau ein Bild der Ausgabe. Kein verdoppeltes Bild,
 * kein Ruckeln. Ueber playbackRate waere dasselbe nur mit Javascript zu
 * haben, und das haette gegen controlslist="noplaybackrate" gearbeitet.
 *
 * ACHTUNG, controlslist ist eine BITTE, keine Sperre. Chrome und Edge halten
 * sich daran, Firefox nur teilweise, und ueber das Kontextmenue oder die
 * Entwicklerwerkzeuge kommt man immer an die Datei. Wirksam ist allein, dass
 * die Datei keine Tonspur enthaelt -- das laesst sich nicht umgehen.
 * ======================================================================== */

.startseite-video {
	display: block;
	width: 75%;
	height: auto;
	margin-inline: auto;
	border-radius: var(--shop-radius-image);
}

/* Auf schmalen Schirmen steht das Video ohnehin allein unter dem Text --
   dort waeren 75 % verschenkte Flaeche. */
@media (max-width: 549px) {
	.startseite-video {
		width: 100%;
	}
}

/* ===========================================================================
 * VORTEILE  ("Warum Gemeinden bei uns bestellen")
 *
 * DIE KLASSE TRAEGT ZWEI SEKTIONEN, nicht eine: hier auf der Startseite und
 * "Worauf wir Wert legen" auf der Seite "Ueber uns" (seit 21.08.2026). Beide
 * sind dieselbe Figur -- featured_box mit pos="center" und einem Symbol
 * darueber --, und beide sollen gleich aussehen. Deshalb dieselbe Klasse und
 * KEINE zweite, fast gleiche Regelgruppe. Der Name ist etwas eng geraten;
 * gemeint ist "Kachelreihe mit Symbol", nicht nur "Vorteile".
 *
 * Diese Datei heisst home.css, wird aber auf JEDER Seite geladen (siehe
 * functions.php) -- die Regeln greifen also auch auf "Ueber uns".
 *
 * Vier featured_box mit pos="center": Flatsome stapelt Symbol ueber Titel und
 * zentriert beides. Die Symbole sind SVG-Anhaenge (Mediathek 242-245) und
 * werden von Flatsome INLINE eingesetzt (inline_svg, Vorgabe der Kurzform).
 * Genau darum funktioniert currentColor -- die Farbe wird hier einmal am
 * Container gesetzt und faerbt die Strichzeichnung mit.
 *
 * Deshalb steht hier auch KEIN Hexwert: --fs-color-primary gehoert dem
 * Customizer. Der Ersatzwert ist nur die Notbremse, falls Flatsome die
 * Variable einmal nicht ausgibt.
 * ======================================================================== */

.shop-vorteile .icon-box-img {
	margin-inline: auto;
	margin-bottom: var(--shop-space-2);
	color: var(--fs-color-primary, #325645);
}

/* Die Datei bringt width/height="100%" mit; ohne height:auto zoege ein
   Browser sie im 1:1-Kasten auseinander. */
.shop-vorteile .icon-box-img svg {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * FLATSOME ERZWINGT GEFUELLTE SYMBOLE -- deshalb muss das hier stehen.
 *
 * In flatsome.css:
 *
 *   .icon-box-img svg      { fill: currentColor; ... }
 *   .icon-box-img svg path { fill: currentColor }
 *
 * Unsere Dateien tragen fill="none" stroke="currentColor". Das sind
 * PRAESENTATIONSATTRIBUTE, und die stehen in der Kaskade unter jeder
 * CSS-Regel -- Flatsome gewinnt also, und aus den Strichzeichnungen werden
 * ausgefuellte Silhouetten. Am 20.08.2026 genau so live gewesen.
 *
 * Die Gegenregel braucht kein !important, nur mehr Spezifitaet: (0,2,1)
 * gegen Flatsomes (0,1,1) am svg und (0,2,1) gegen (0,1,2) an den Formen --
 * die Zahl der Klassen entscheidet zuerst. Zusaetzlich laedt home.css ohnehin
 * spaeter.
 *
 * "svg *" STATT EINER LISTE VON FORMEN: Bis zum 21.08.2026 standen hier
 * path und rect einzeln. Dann kam ein Symbol mit einem <circle> dazu (der
 * Kopf beim Ansprechpartner) -- der stand nicht in der Liste. Er waere
 * gefuellt geblieben, ohne dass irgendetwas meldet. Der Universalselektor
 * hat Spezifitaet 0 und aendert an der Rechnung oben nichts.
 *
 * WER DIE SYMBOLE AUSTAUSCHT, MUSS DAS WISSEN: Ein gefuelltes Symbol braucht
 * diese Regel nicht und wird von ihr unsichtbar gemacht.
 */
.shop-vorteile .icon-box-img svg,
.shop-vorteile .icon-box-img svg * {
	fill: none;
	stroke: currentColor;
}

.shop-vorteile .icon-box-text h5 {
	margin-bottom: var(--shop-space-1);
}

/* Zwei Kacheln je Zeile auf dem Telefon (span__sm="6") stehen sonst ohne
   Luft untereinander. */
@media (max-width: 849px) {
	.shop-vorteile .icon-box {
		padding-bottom: var(--shop-space-3);
	}
}