/*
 * Mitgliederverzeichnis: Werkzeugleiste (Ortsplan, Sortieren, Ansicht) und Listenansicht (Chris, 05.10.2026).
 * Markup: wir_theme_verzeichnis_ansicht() und wir_mitglied_kachel() in
 * inc/mitglieder-darstellung.php; Umschalten in assets/js/verzeichnis.js.
 *
 * Die Liste ist keine neue Komponente, sondern die Mitglieder-Kachel in
 * kompakter Form: dieselben Teile (Logo, Name, Branchen-Chips, Adresse,
 * Anruf-Knopf, Zum Profil), nur als Zeilen in EINER Box mit Linien dazwischen.
 * Vorgabe bleibt die Kartenansicht.
 */

/* ── Werkzeugleiste: Ortsplan links, Sortieren und Ansicht rechts ────────
   Dezent wie in einem Shop (Chris, 05.10.2026: „kein Input wie bei den anderen“): Textwerkzeuge
   mit Symbol davor, zwischen zwei Linien – klar getrennt von „Liste herunterladen“ darüber.
   Textstil wie die Sprungleiste (.wir-profil-kapitel): 600 in Textfarbe, Symbol Primär,
   Darüberfahren Primär + Unterstreichung 2 px, keine Fläche. */
.wir-ansicht { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; margin-top: .6rem; padding-block: .2rem; border-block: 1px solid var(--wp--preset--color--linie); }
.wir-ansicht__rechts { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; margin-left: auto; }
.wir-ansicht__rechts[hidden] { display: none; }
.wir-werkzeug { display: inline-flex; align-items: center; gap: .45rem; min-height: var(--wp--custom--ziel); color: var(--wp--preset--color--text); font: 600 var(--wp--preset--font-size--meta)/1.2 var(--wp--preset--font-family--text); text-decoration: none; cursor: pointer; }
.wir-werkzeug .wir-symbol { width: 18px; height: 18px; flex: none; color: var(--wp--preset--color--primaer); }
a.wir-werkzeug:hover { color: var(--wp--preset--color--primaer); text-decoration: underline 2px; text-underline-offset: .2em; }
/* Ortsplan: ein echter Knopf (Chris, 05.10.2026: „eine coole Funktion“), Download-Werkzeuge dagegen
   nur Text mit Symbol (Zusatzfunktion, „minimalistischer“). */
.wir-ergebnisse__export { gap: 0 1.25rem; }
/* Mini-Dropdown: das Auswahlfeld ohne Rahmen und Fläche, nur Text und Pfeil */
.wir-ansicht__sortierung select { appearance: none; -webkit-appearance: none; min-height: var(--wp--custom--ziel); margin: 0; padding: 0 1.5rem 0 0; border: 0; border-radius: 0; background: transparent var(--wir-symbol-aufklappen-text) no-repeat right center / 16px; color: inherit; font: inherit; cursor: pointer; }
.wir-ansicht__sortierung:hover select { color: var(--wp--preset--color--primaer); text-decoration: underline 2px; text-underline-offset: .2em; }
.wir-ansicht__sortierung select:focus-visible { outline: 3px solid var(--wir-fokus-ring); outline-offset: 3px; border-radius: 2px; }
/* Ansicht: zwei kleine Knöpfe in einem Rahmen (Umschalter), gewählt Primär */
.wir-ansicht__wahl { display: inline-flex; gap: 2px; padding: 2px; border: 1.5px solid var(--wp--preset--color--linie-stark); border-radius: var(--wp--custom--radius--knopf); background: var(--wp--preset--color--flaeche); }
.wir-ansicht__wahl button { display: inline-flex; align-items: center; gap: .35rem; min-height: calc(var(--wp--custom--ziel) - 7px); /* Rahmen genau ziel (44 px): 2 × 2 px Innenabstand + 2 × 1,5 px Rand */ padding: 0 .7rem; border: 0; border-radius: var(--wp--custom--radius--klein); background: transparent; color: var(--wp--preset--color--text); font: 600 var(--wp--preset--font-size--meta)/1 var(--wp--preset--font-family--text); cursor: pointer; }
.wir-ansicht__wahl .wir-symbol { width: 18px; height: 18px; flex: none; }
.wir-ansicht__wahl button:hover { background: var(--wp--preset--color--primaer-hell); color: var(--wp--preset--color--primaer); }
.wir-ansicht__wahl button[aria-pressed="true"] { background: var(--wp--preset--color--primaer); color: var(--wp--preset--color--flaeche); }
.wir-ansicht__wahl button:focus-visible { outline: 3px solid var(--wir-fokus-ring); outline-offset: 2px; }

/* ── Listenansicht ───────────────────────────────────────────────────── */
/* Jeder Betrieb eine eigene Zeile mit kleinem Abstand (Chris, 05.10.2026) – dieselbe Kachel wie im Raster, nur flach. */
.wir-kacheln--liste { grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-top: .9rem; padding: 0; } /* Abstand zur Leiste wie bei den Karten (14 px, gemessen) */
.wir-kacheln--liste > .wir-kachel {
	display: grid;
	/* Eine Zeile je Betrieb: Logo, Name, Branchen, Adresse, Knöpfe nebeneinander. Name, Chips und
	   Adresse beginnen auf einer Linie; die leeren 1fr-Reihen oben und unten mitteln den Inhalt,
	   Logo und Knöpfe stehen mittig über die ganze Höhe. */
	grid-template-columns: 60px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) auto;
	grid-template-rows: 1fr auto auto auto 1fr;
	gap: 0 1.25rem; /* row-gap 0: die Kachel hat sonst .45rem, das zählte zwischen allen sechs Reihen */
	align-items: start;
	padding: .55rem 1.25rem; /* Rand, Radius, Fläche, Premium-Rand, Darüberfahren und Fokus wie die Karte (mitglieder.css) */
}
.wir-kacheln--liste > .wir-kachel[hidden] { display: none; }
/* Kopf und Titel lösen sich auf, ihre Teile stehen direkt im Zeilenraster */
.wir-kacheln--liste .wir-kachel__kopf, .wir-kacheln--liste .wir-kachel__titel { display: contents; }
.wir-kacheln--liste .wir-logo { --wir-logo-breite: 60px; padding: 3px; grid-column: 1; grid-row: 1 / -1; align-self: center; }
.wir-kacheln--liste .wir-logo--initialen { font-size: 1.05rem; } /* schrift-ok: groesse Initialen sind Logo-Ersatz, Größe folgt der Logo-Box */
.wir-kacheln--liste .wir-kachel__name { grid-column: 2; grid-row: 2; font-family: var(--wp--preset--font-family--text); font-size: var(--wp--preset--font-size--normal); font-weight: 600; line-height: 1.25; }
.wir-kacheln--liste .wir-kachel__zusatz { grid-column: 2; grid-row: 3; }
.wir-kacheln--liste .wir-kachel .wir-abzeichen { position: relative; top: auto; right: auto; grid-column: 2; grid-row: 4; justify-self: start; margin: .15rem 0 .1rem; }
.wir-kacheln--liste .wir-kachel__branche { grid-column: 3; grid-row: 2 / span 3; margin: 0; }
.wir-kacheln--liste .wir-kachel__adresse { grid-column: 4; margin: 0; }
.wir-kacheln--liste .wir-kachel__adresse:first-of-type { grid-row: 2; }
.wir-kacheln--liste .wir-kachel__adresse + .wir-kachel__adresse { grid-row: 3; }
.wir-kacheln--liste .wir-kachel__adresse + .wir-kachel__adresse + .wir-kachel__adresse { grid-row: 4; }
.wir-kacheln--liste .wir-kachel__name a { min-height: 0; }
.wir-kacheln--liste .wir-kachel__aktionen { grid-column: 5; grid-row: 1 / -1; align-self: center; display: flex; gap: .5rem; margin: 0; padding: 0; }
/* Anrufknopf gleich breit, damit die Knopfspalte über alle Zeilen fluchtet */
.wir-kacheln--liste .wir-kachel__aktionen .wir-knopf--leise { min-width: 13rem; }
/* „Zum Profil“ nur als Pfeil: die ganze Zeile führt schon hin, der Name nennt das Ziel */
.wir-kacheln--liste .wir-kachel__mehr { width: var(--wp--custom--knopfhoehe); padding: 0; justify-content: center; }
.wir-kacheln--liste .wir-kachel__mehr > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Werbe- und Beitrittskachel als Zeile: Titel, Text, Knopf nebeneinander */
.wir-kacheln--liste > :is(.wir-kachel--werbung, .wir-kachel--beitritt) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: none; align-items: center; column-gap: 1.5rem; padding-block: 1rem; }
.wir-kacheln--liste .wir-kachel__werbetitel { font-size: var(--wp--preset--font-size--titel-3); }
.wir-kacheln--liste > :is(.wir-kachel--werbung, .wir-kachel--beitritt) .wir-kachel__werbetext { font-size: var(--wp--preset--font-size--meta); }
.wir-kacheln--liste > :is(.wir-kachel--werbung, .wir-kachel--beitritt) .wir-kachel__aktionen { grid-column: 3; grid-row: 1; }

/* Tablet: Name, Chips und Adresse untereinander, Knöpfe rechts mittig */
@media (max-width: 1100px) {
	.wir-kacheln--liste > .wir-kachel { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: 1fr repeat(7, auto) 1fr; gap: 0 1rem; }
	.wir-kacheln--liste .wir-logo { --wir-logo-breite: 64px; }
	.wir-kacheln--liste .wir-kachel__branche { grid-column: 2; grid-row: 4; margin: .3rem 0; }
	.wir-kacheln--liste .wir-kachel__name { grid-row: 2; }
	.wir-kacheln--liste .wir-kachel__adresse { grid-column: 2; }
	.wir-kacheln--liste .wir-kachel__adresse:first-of-type { grid-row: 5; }
	.wir-kacheln--liste .wir-kachel__adresse + .wir-kachel__adresse { grid-row: 6; }
	.wir-kacheln--liste .wir-kachel__adresse + .wir-kachel__adresse + .wir-kachel__adresse { grid-row: 7; }
	.wir-kacheln--liste .wir-kachel .wir-abzeichen { grid-row: 8; margin-top: .4rem; }
	.wir-kacheln--liste .wir-kachel__aktionen { grid-column: 3; grid-row: 1 / -1; }
	.wir-kacheln--liste .wir-kachel__aktionen .wir-knopf--leise { min-width: 12rem; }
	.wir-kacheln--liste > :is(.wir-kachel--werbung, .wir-kachel--beitritt) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; gap: .3rem 1rem; }
	.wir-kacheln--liste > :is(.wir-kachel--werbung, .wir-kachel--beitritt) .wir-kachel__werbetitel, .wir-kacheln--liste > :is(.wir-kachel--werbung, .wir-kachel--beitritt) .wir-kachel__werbetext { grid-column: 1; }
	.wir-kacheln--liste > :is(.wir-kachel--werbung, .wir-kachel--beitritt) .wir-kachel__aktionen { grid-column: 2; grid-row: 1 / span 2; }
}

/* Handy: Anrufen nur als Hörer (die Nummer bleibt im aria-label), kein Pfeil – die Zeile selbst führt zum Profil */
@media (max-width: 600px) {
	.wir-ansicht__rechts { margin-left: 0; width: 100%; justify-content: space-between; }
	.wir-ansicht__wahl button { padding: 0 .6rem; }
	.wir-ansicht__wahl button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* nur Symbole, Wort bleibt für Screenreader */
	.wir-kacheln--liste > .wir-kachel { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 0 .8rem; padding: .75rem 1rem; }
	.wir-kacheln--liste .wir-logo { --wir-logo-breite: 52px; padding: 3px; }
	.wir-kacheln--liste .wir-kachel__adresse .wir-symbol { display: none; }
	.wir-kacheln--liste .wir-kachel__mehr { display: none; }
	.wir-kacheln--liste > .wir-kachel:not(.wir-kachel--werbung) .wir-kachel__aktionen .wir-knopf--leise { min-width: 0; width: var(--wp--custom--knopfhoehe); padding: 0; justify-content: center; }
	.wir-kacheln--liste > .wir-kachel:not(.wir-kachel--werbung) .wir-kachel__aktionen .wir-knopf--leise > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.wir-kacheln--liste > :is(.wir-kachel--werbung, .wir-kachel--beitritt) { grid-template-columns: minmax(0, 1fr); }
	.wir-kacheln--liste > :is(.wir-kachel--werbung, .wir-kachel--beitritt) .wir-kachel__aktionen { grid-column: 1; grid-row: auto; margin-top: .4rem; }
}

/* ── Beitrittskachel: „Hier könnte Ihr Betrieb stehen“ ───────────────────
   Chris, 05.10.2026: bei vorgefilterten Ergebnissen (Branche, Buchstabe, Suche) eine zusätzliche
   Kachel am Ende, „ein klein bisschen anders … mit diesem Hellgrün“. Dieselbe Kachel wie die
   Werbekachel (Titel, Text, ein Knopf), aber hell: Hinweis-Grün, gestrichelter Rand in Primär –
   der Platz, den der eigene Betrieb füllen würde. Markup: wir_theme_verzeichnis_beitrittskachel(). */
.wir-kachel--beitritt { justify-content: center; gap: .6rem; background: var(--wp--preset--color--hinweis); border: 2px dashed var(--wp--preset--color--primaer); }
.wir-kachel--beitritt .wir-kachel__werbetitel { color: var(--wp--preset--color--wald); }
.wir-kachel--beitritt .wir-kachel__werbetitel .wir-symbol { color: var(--wp--preset--color--primaer); }
.wir-kachel--beitritt .wir-kachel__werbetext { color: var(--wp--preset--color--text); }

/* ── Premium-Störer im Kartenraster: volle Breite, waagerecht ────────────
   Chris, 05.10.2026: „der Premium-Bereich, der immer hundert Prozent diese Breite als Störer
   einnimmt“ – wie die Zeile in der Liste; die Karte ist der Beitrittskachel vorbehalten.
   Steht nach dem 9., dann jedem 18. Mitglied und am Ende (inc/mitglieder-darstellung.php,
   assets/js/verzeichnis.js). */
/* dense: Bei zwei Spalten geht 9 nicht auf – die nächste Karte füllt die Lücke vor dem Balken. */
.wir-kacheln:not(.wir-kacheln--liste) { grid-auto-flow: row dense; }
.wir-kacheln:not(.wir-kacheln--liste) > .wir-kachel--werbung { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .3rem 1.5rem; }
.wir-kacheln:not(.wir-kacheln--liste) > .wir-kachel--werbung .wir-kachel__werbetext { font-size: var(--wp--preset--font-size--meta); }
.wir-kacheln:not(.wir-kacheln--liste) > .wir-kachel--werbung .wir-kachel__aktionen { grid-column: 3; grid-row: 1; display: block; margin: 0; padding: 0; }
@media (max-width: 1100px) {
	.wir-kacheln:not(.wir-kacheln--liste) > .wir-kachel--werbung { grid-template-columns: minmax(0, 1fr) auto; }
	.wir-kacheln:not(.wir-kacheln--liste) > .wir-kachel--werbung :is(.wir-kachel__werbetitel, .wir-kachel__werbetext) { grid-column: 1; }
	.wir-kacheln:not(.wir-kacheln--liste) > .wir-kachel--werbung .wir-kachel__aktionen { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 600px) {
	.wir-kacheln:not(.wir-kacheln--liste) > .wir-kachel--werbung { grid-template-columns: minmax(0, 1fr); }
	.wir-kacheln:not(.wir-kacheln--liste) > .wir-kachel--werbung .wir-kachel__aktionen { grid-column: 1; grid-row: auto; margin-top: .5rem; }
}