/*
 * Kopfbereich der Firmenseite — handgeschrieben, NICHT aus dem Tailwind-Build.
 *
 * WARUM NICHT ALS UTILITY-KLASSEN: site.<hash>.css faellt aus einem Tailwind-Lauf,
 * dessen Klassenliste beim Bauen aus den Quelldateien gelesen wird. Eine Klasse,
 * die zum Bauzeitpunkt nirgends stand — etwa
 * md:grid-cols-[minmax(0,1fr)_16rem] — steht deshalb nicht im Stylesheet und
 * wird vom Browser stillschweigend ignoriert. Das faellt nicht auf: Die Seite
 * bleibt heil, sie sieht nur falsch aus. Genau so ist der zweispaltige Kopf am
 * 2026-08-04 im ersten Anlauf wirkungslos geblieben.
 *
 * Neu bauen ist keine Loesung, solange `transformed.html` fehlt: Der
 * Tailwind-Lauf liest die Startseite dann nicht mit und wirft rund 8 KB
 * Klassen fuer Kopf, Fuss und Startseite weg.
 *
 * Deshalb hier echtes CSS auf den ohnehin vergebenen Klassennamen, geladen als
 * eigene Datei — dasselbe Vorgehen wie bei um.css, siehe functions.php.
 */

/* --- Raster: Text links, Bild rechts --------------------------------------
   Auf dem Telefon einspaltig. Die Bildspalte steht im Quelltext NACH dem Text,
   damit Vorlesewerkzeuge zuerst Name, Bewertung und "Anfrage stellen" hoeren. */
.w24dir-listing__head {
	display: grid;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

/*
 * ACHTUNG: .w24dir-listing__intro und .w24dir-listing__title gehoeren dem
 * PLUGIN, nicht dem Theme. Web24-Directory setzt in seiner frontend.css
 *
 *     .w24dir-listing__intro { flex: 1 1 320px; display: flex;
 *                              flex-wrap: wrap; gap: 0.5em;
 *                              align-items: center; }
 *     .w24dir-listing__title { flex: 1 1 100%; }
 *
 * fuer seine eigene, einspaltige Kopffassung. Nur die Richtung umzustellen
 * genuegt deshalb NICHT: flex-wrap: wrap wird bei flex-direction: column zum
 * SPALTEN-Umbruch, die Branchen-Chips kippten dadurch in eine zweite Spalte
 * weit rechts aus dem Bild heraus (gemessen am 2026-08-04: linke Kante 301 px
 * bei 375 px Fensterbreite, also Querscrollen auf dem Telefon).
 *
 * Jede von dort gesetzte Eigenschaft wird hier deshalb ausdruecklich
 * zurueckgenommen, auch die, die harmlos aussehen.
 */
.w24dir-listing__intro {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	min-width: 0;
}

.w24dir-listing__head .w24dir-listing__title {
	flex: 0 0 auto;
}

/* Handlungsleiste: auf dem Telefon fester Abstand, ab Tablet an den unteren
   Rand der Textspalte geschoben. Das greift, wenn das Bild daneben hoeher ist
   als der Text — bei kurzen Eintraegen ohne Bewertung und mit wenigen Chips. */
.w24dir-listing__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

/* --- Bildflaeche ----------------------------------------------------------
   Festes Seitenverhaeltnis auf JEDER Breite, bewusst ohne Ausnahme.

   Vorher streckte sich die Flaeche ab Tablet auf die Hoehe der Textspalte
   (gemessen 352 x 288, also 1,22:1). Bei object-fit: cover schnitt das knapp
   ein Fuenftel der Bildbreite weg. Gleiche Hoehe wie der Textblock UND
   unbeschnittenes Bild schliessen einander aus, solange die Texthoehe vom
   Eintrag abhaengt; die Vorgabe ist das ungeschnittene Bild.

   WARUM 16:9 UND NICHT 3:2: Am 2026-08-04 durchgezaehlt — alle zehn
   Branchenbilder in der Mediathek liegen als 1000 x 558 vor, also 16:9. Ein
   3:2-Rahmen haette aus jedem davon 163 Pixel Breite geschnitten oder Streifen
   gezeigt. Der Rahmen richtet sich deshalb nach den Bildern, nicht umgekehrt:
   So geht nichts verloren, es bleiben keine Streifen, und die volle Aufloesung
   wird genutzt. Sollten die Motive spaeter auf 3:2 umgestellt werden (der
   Hinweistext des Plugins empfiehlt 1600 x 1067), gehoert hier 3 / 2 hin —
   nachschneiden kann `wp w24dir branchenbilder`.

   align-self: start ist Pflicht: Das Raster steht auf align-items: stretch,
   was das Seitenverhaeltnis sonst wieder ueberginge. */
.w24dir-listing__media {
	display: grid;
	place-items: center;
	align-self: start;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	border-radius: 1.5rem;
	background: #fff;
}

.w24dir-listing__media img {
	width: 100%;
	height: 100%;
}

/* Platzhalterbild der Branche: VOLLSTAENDIG einpassen, nicht randfuellend.

   Beim jetzigen Bestand macht das keinen sichtbaren Unterschied — Rahmen und
   Motive sind beide 16:9, contain und cover sehen identisch aus. Der
   Unterschied zeigt sich erst bei einem Motiv, das aus der Reihe faellt: cover
   wuerde es beschneiden, contain laesst schmale Streifen stehen. Die Streifen
   sind das gewuenschte Verhalten. Sie kosten nichts und sind zugleich der
   sichtbare Hinweis, dass ein Bild nicht ins Format passt — ein stiller
   Anschnitt faellt dagegen niemandem auf, und genau darum ging es in der
   Beschwerde vom 2026-08-04.

   Nachschneiden lassen sich abweichende Motive mit
   `wp w24dir branchenbilder --dry-run` (Plugin ab 1.17.0). */
.w24dir-listing__media--placeholder img {
	object-fit: contain;
}

/* Firmenlogo: steht meist hochkant und darf nicht beschnitten werden. */
.w24dir-listing__media--logo img {
	object-fit: contain;
	padding: 1rem;
}

/* Rueckfall ohne jedes Bild (Platzhalterbilder abgeschaltet). */
.w24dir-listing__media--empty {
	border-color: transparent;
	background: #eaf5fe;
	color: #0f70ba;
	font-size: 3.75rem;
}

/* --- Dunkelmodus ----------------------------------------------------------
   Der Build laeuft mit darkMode: 'class', der Schalter setzt html.dark. */
html.dark .w24dir-listing__media {
	border-color: rgba(255, 255, 255, 0.1);
}

/* Das Platzhalterbild deckt die Flaeche selbst ab, dahinter genuegt ein
   leiser Ton. Ein Firmenlogo bleibt dagegen bewusst auf Weiss: Logos sind fast
   immer dunkel auf durchsichtigem Grund und wuerden auf dunkler Flaeche
   verschwinden. */
html.dark .w24dir-listing__media--placeholder {
	background: rgba(255, 255, 255, 0.03);
}

html.dark .w24dir-listing__media--empty {
	background: rgba(46, 163, 242, 0.15);
	color: #7cc4fb;
}

@media (min-width: 640px) {
	.w24dir-listing__media--logo img {
		padding: 1.5rem;
	}
}

@media (min-width: 768px) {
	.w24dir-listing__head {
		grid-template-columns: minmax(0, 1fr) 16rem;
		gap: 2rem;
		align-items: stretch;
	}

	.w24dir-listing__actions {
		margin-top: auto;
		padding-top: 2rem;
	}

	.w24dir-listing__media--empty {
		font-size: 4.5rem;
	}
}

@media (min-width: 1024px) {
	.w24dir-listing__head {
		grid-template-columns: minmax(0, 1fr) 22rem;
	}
}