/* ---------------------------------------------------------------
   Firmenprofil (Filderguide)

   Basis und Premium entstehen aus einer Vorlage. Das Paket entscheidet
   ueber die Bausteine, nicht ueber das Layout - ein Basis-Profil soll
   aussehen wie dieselbe Seite mit weniger Inhalt, nicht wie eine andere.
   --------------------------------------------------------------- */
.fa-firma { background: var(--fa-papier); }

.fa-firma-titelbild { max-height: 340px; overflow: hidden; }
.fa-firma-titelbild img { display: block; width: 100%; height: auto; object-fit: cover; }

.fa-firma-innen {
	max-width: var(--fa-breite, 1200px);
	margin: 0 auto;
	padding: 0 24px 44px;
}

/* --- Kopf --- */
.fa-firma-kopf {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 24px 0 20px;
	border-bottom: 2px solid var(--fa-tinte);
}
.fa-firma-kopf--mit-logo { margin-top: -46px; }

.fa-firma-logo {
	width: 104px;
	height: 104px;
	flex: none;
	border-radius: 8px;
	overflow: hidden;
	background: var(--fa-karte);
	border: 4px solid var(--fa-karte);
	box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.fa-firma-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

.fa-firma-kopftext { flex: 1 1 18rem; }
.fa-firma-kopf--mit-logo .fa-firma-kopftext { padding-top: 52px; }

.fa-firma-branche {
	display: inline-block;
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--fa-text-sekund);
	text-decoration: none;
	border-bottom: 2px solid var(--fa-gelb);
	padding-bottom: 2px;
	margin-bottom: 10px;
}
.fa-firma-branche:hover { color: var(--fa-tinte); }

.fa-firma-name {
	font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
	font-size: clamp(27px, 3.6vw, 36px);
	font-weight: 800;
	letter-spacing: -.024em;
	line-height: 1.08;
	color: var(--fa-tinte);
	margin: 0 0 5px;
	text-wrap: balance;
}
.fa-firma-slogan { font-size: 16.5px; color: var(--fa-text-sekund); margin: 0 0 6px; }
.fa-firma-ort { font-size: 14px; color: var(--fa-text-sekund); margin: 0; }

.fa-firma-knoepfe { display: flex; gap: 9px; flex-wrap: wrap; align-self: flex-start; }
.fa-firma-kopf--mit-logo .fa-firma-knoepfe { padding-top: 52px; }

.fa-knopf {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fa-tinte);
	text-decoration: none;
	padding: 9px 17px;
	white-space: nowrap;
	border: 1px solid var(--fa-tinte);
	border-radius: 999px;
}
.fa-knopf:hover, .fa-knopf:focus-visible { background: var(--fa-gelb); border-color: var(--fa-gelb); }
.fa-knopf--voll { background: var(--fa-tinte); color: var(--fa-karte); }
.fa-knopf--voll:hover { color: var(--fa-tinte); }
.fa-knopf--breit { display: block; text-align: center; }

/* --- Zwei Spalten --- */
.fa-firma-spalten {
	display: grid;
	grid-template-columns: 1fr 19rem;
	gap: 34px;
	padding-top: 26px;
}

.fa-firma-beschreibung {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--fa-tinte);
	margin: 0;
	max-width: 62ch;
}

/* --- Merkmale --- */
.fa-merkmale {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}
.fa-merkmal {
	display: inline-block;
	font-size: 13px;
	color: var(--fa-tinte);
	text-decoration: none;
	padding: 5px 12px;
	border: 1px solid var(--fa-linie);
	border-radius: 999px;
	background: var(--fa-karte);
}
.fa-merkmal:hover, .fa-merkmal:focus-visible { border-color: var(--fa-tinte); }

/* --- Bloecke --- */
.fa-firma-block { margin-top: 30px; }
.fa-firma-block-titel {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--fa-text-sekund);
	margin: 0 0 13px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--fa-linie);
}

.fa-firma-galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fa-firma-galerie img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 3px;
	background: var(--fa-linie);
}

/* Weitere Betriebe - nur im Basis-Profil */
.fa-betriebe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fa-betrieb {
	display: block;
	border: 1px solid var(--fa-linie);
	border-radius: 5px;
	padding: 13px;
	background: var(--fa-karte);
	text-decoration: none;
}
.fa-betrieb:hover { border-color: var(--fa-tinte); }
.fa-betrieb-branche {
	display: block;
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fa-text-sekund);
	margin-bottom: 5px;
}
.fa-betrieb-name { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--fa-tinte); }
.fa-betrieb-ort { display: block; font-size: 12.5px; color: var(--fa-text-sekund); margin-top: 3px; }

/* Artikelverweise - ohne Datum, nur Titel */
.fa-firma-artikel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fa-verweis { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; }
.fa-verweis-bild { flex: none; width: 76px; }
.fa-verweis-bild img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 3px;
	background: var(--fa-linie);
}
.fa-verweis-titel { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--fa-tinte); }
@media (hover: hover) {
	.fa-verweis:hover .fa-verweis-titel {
		text-decoration: underline;
		text-decoration-color: var(--fa-gelb);
		text-decoration-thickness: 2px;
	}
}

/* Hinweis fuer den Inhaber - nur im Basis-Profil */
.fa-firma-hinweis {
	display: flex;
	gap: 18px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 30px;
	padding: 17px 19px;
	background: var(--fa-karte);
	border: 1px solid var(--fa-tinte);
	border-radius: 6px;
}
.fa-firma-hinweis > div { flex: 1 1 15rem; }
.fa-firma-hinweis-titel { font-size: 15.5px; font-weight: 700; color: var(--fa-tinte); margin: 0 0 4px; }
.fa-firma-hinweis-text { font-size: 14px; color: var(--fa-text-sekund); margin: 0; line-height: 1.5; }

/* --- Seitenspalte --- */
.fa-infobox {
	background: var(--fa-karte);
	border: 1px solid var(--fa-linie);
	border-radius: 6px;
	padding: 17px;
	margin-bottom: 16px;
}
.fa-infobox-titel {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 10.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--fa-text-sekund);
	margin: 0 0 11px;
}

.fa-jetzt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fa-text-sekund);
	margin: 0 0 10px;
}
.fa-jetzt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fa-jetzt--offen { color: #1a7a3c; }

.fa-zeiten { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 13.5px; }
.fa-zeit { display: flex; justify-content: space-between; gap: 12px; }
.fa-zeit dt, .fa-zeit dd { margin: 0; }
.fa-zeit dd { font-variant-numeric: tabular-nums; text-align: right; }
.fa-zeit--zu { color: var(--fa-text-sekund); }
.fa-zeit--heute { font-weight: 700; }
.fa-zeiten-hinweis { font-size: 12px; color: var(--fa-text-sekund); margin: 10px 0 0; line-height: 1.45; }

.fa-kontakt { display: flex; flex-direction: column; gap: 9px; margin: 0; font-size: 14px; }
.fa-kontakt > div { display: flex; gap: 8px; align-items: baseline; }
.fa-kontakt dt { width: 4.2rem; flex: none; font-size: 12px; color: var(--fa-text-sekund); margin: 0; }
.fa-kontakt dd { margin: 0; }
.fa-kontakt a { color: var(--fa-tinte); text-decoration-color: var(--fa-gelb); text-decoration-thickness: 2px; }

/* Statische Karte - eine eingebettete wuerde Daten an einen fremden
   Anbieter senden und braeuchte eine Einwilligung. */
.fa-firma-karte {
	display: grid;
	place-items: center;
	height: 130px;
	margin-bottom: 12px;
	border-radius: 4px;
	text-decoration: none;
	color: #46503f;
	background: #dfe3dc;
	background-image: linear-gradient(0deg, rgba(0,0,0,.06) 1px, transparent 1px),
	                  linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
	background-size: 24px 24px;
}
.fa-firma-karte-text {
	font-size: 13px;
	font-weight: 600;
	background: var(--fa-karte);
	padding: 6px 13px;
	border-radius: 999px;
}
.fa-firma-karte:hover .fa-firma-karte-text { background: var(--fa-gelb); }

.fa-sozial { display: flex; gap: 8px; list-style: none; margin: 13px 0 0; padding: 0; }
.fa-sozial a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--fa-linie);
	background: var(--fa-karte);
	font-size: 11px;
	font-weight: 600;
	color: var(--fa-text-sekund);
	text-decoration: none;
}
.fa-sozial a:hover { border-color: var(--fa-tinte); color: var(--fa-tinte); }

/* Vorteil */
.fa-firma-vorteil {
	background: var(--fa-gelb);
	border-radius: 6px;
	padding: 15px 17px;
	margin-bottom: 16px;
}
.fa-firma-vorteil-label {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 10px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--fa-tinte);
	opacity: .75;
	margin: 0 0 5px;
}
.fa-firma-vorteil-text { font-size: 16px; font-weight: 700; color: var(--fa-tinte); margin: 0; line-height: 1.3; }
.fa-firma-vorteil-frist { font-size: 12px; color: var(--fa-tinte); opacity: .7; margin: 6px 0 0; }

@media (max-width: 1023px) {
	.fa-firma-spalten { grid-template-columns: 1fr 17rem; gap: 26px; }
	.fa-firma-galerie { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	.fa-firma-innen { padding-inline: 20px; }
	.fa-firma-titelbild { max-height: 200px; }
	.fa-firma-kopf--mit-logo { margin-top: -34px; }
	.fa-firma-kopf--mit-logo .fa-firma-kopftext,
	.fa-firma-kopf--mit-logo .fa-firma-knoepfe { padding-top: 0; }
	.fa-firma-logo { width: 72px; height: 72px; }
	.fa-firma-spalten { grid-template-columns: 1fr; gap: 26px; padding-top: 20px; }
	.fa-firma-galerie { grid-template-columns: repeat(3, 1fr); }
	.fa-betriebe { grid-template-columns: 1fr; }
	.fa-firma-artikel { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Betriebskacheln

   Das Logo steht neben dem Namen, nicht darueber. Der erste Entwurf gab
   ihm eine eigene Flaeche ueber der ganzen Kachelbreite - das funktioniert
   nur, wenn fast jeder Betrieb eins hat. Zehn von zweiundzwanzig haben
   eins; die uebrigen Kacheln bestanden aus einem kleinen Kreis in einem
   grossen weissen Feld und sahen aus, als sei ein Bild nicht geladen
   worden. Und die mit Logo verloren es in derselben Flaeche.

   Ein Verzeichnis wird ausserdem nach Namen gelesen, nicht nach Logos.
   Also: Name zuerst, Logo als Zeichen daneben - in einer Groesse, in der
   auch der Anfangsbuchstabe wie Absicht aussieht und nicht wie eine Luecke.

   Die Leistungsbeschreibung verlangt quadratische Logos. Das Feld ist
   deshalb quadratisch, und ein quadratisches Logo fuellt es vollstaendig.
   Der Altbestand ist es nicht - Kofinks Logo steht hoch, das des Hirsch
   liegt quer -, deshalb bleibt es bei "contain": Ein zu breites Logo
   bekommt Rand statt Schnitt. Ein halbes Logo waere schlimmer als ein
   kleines.
   --------------------------------------------------------------- */
.fa-betriebe {
	display: grid;
	/* 320px, damit Name, Branche und Hinweis je auf eine Zeile passen. Bei
	   228px waeren es drei Spalten gewesen - dort brach der Name um und der
	   Hinweis lief ueber drei Zeilen. Neben der Seitenspalte ergibt das zwei
	   Spalten, auf breiteren Seiten von selbst mehr. */
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 12px;
}

.fa-betrieb {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 13px;
	align-items: start;
	padding: 14px 15px;
	border: 1px solid var(--fa-linie);
	border-radius: 6px;
	background: var(--fa-karte);
	text-decoration: none;
	color: var(--fa-tinte);
	transition: border-color .15s ease;
}
.fa-betrieb:hover, .fa-betrieb:focus-visible { border-color: var(--fa-tinte); }

.fa-betrieb-bild {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 5px;
	background: var(--fa-papier);
	overflow: hidden;
}
.fa-betrieb-bild img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	padding: 4px;
}

/* In dieser Groesse liest sich der Anfangsbuchstabe wie ein Zeichen und
   nicht wie ein fehlendes Bild. */
.fa-betrieb-monogramm {
	font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
	font-size: 25px;
	font-weight: 800;
	line-height: 1;
	color: var(--fa-text-sekund);
	opacity: .55;
}

.fa-betrieb-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fa-betrieb-name {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fa-betrieb:hover .fa-betrieb-name { text-decoration: underline; }

/* Bis zu zwei Zeilen. Vorher war es eine mit Abschnitt - dabei fiel bei
   "Regional & saisonal, Schwaebisch · Scharnhausen, Ostfildern" der Ort
   hinten weg, und der Ort ist in einem oertlichen Verzeichnis das
   Wichtigste an der Zeile. */
.fa-betrieb-zeile {
	font-size: 12px;
	line-height: 1.4;
	color: var(--fa-text-sekund);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Die Art der Kueche, eine Zeile unter Branche und Ort. Dunkler als die
   Zeile darueber: Branche und Ort ordnen ein, die Kueche ist eine Aussage
   ueber den Betrieb und darf das zeigen. */
.fa-betrieb-kueche {
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--fa-tinte);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Die eine Zeile, die sich selbst versorgt: laufende Aktion, sonst Vorteil,
   sonst Oeffnungsstatus, sonst nichts. */
.fa-betrieb-hinweis {
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fa-betrieb-hinweis--aktion,
.fa-betrieb-hinweis--vorteil,
.fa-betrieb-hinweis--zeiten { color: var(--fa-text-sekund); }

@media (max-width: 460px) {
	.fa-betriebe { grid-template-columns: 1fr; gap: 8px; }
}