/* Gästeführer auf /restaurants-bars/ – Karten im Stil der Gästeführer-PDFs */
.sl-gf { --gruen: #E8F5D3; --gruen-k: #cfe2b4; --blau: #29a8e0; --orange: #e5622c; --gelb: #fbc21b; --text: #1d1d1b; --grau: #5d6359;
  width: 100%; font-family: Outfit, sans-serif; color: var(--text); text-align: left; }
.sl-gf .sl-leiste { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin: 0 0 22px; }
.sl-gf .sl-tabs, .sl-gf .sl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-gf button { font: 500 14px/1.2 Parkinsans, sans-serif; color: var(--text); cursor: pointer; border-radius: 999px; transition: background .2s, border-color .2s; }
.sl-gf .sl-tab { background: #fff; border: 1px solid #0000001a; padding: 11px 20px; }
.sl-gf .sl-tab span { color: var(--grau); font-weight: 400; margin-left: 4px; }
.sl-gf .sl-tab.an { background: #9ed6f1; border-color: #9ed6f1; }
.sl-gf .sl-chip { background: transparent; border: 1px solid #00000026; padding: 8px 14px; font-size: 13px; }
.sl-gf .sl-chip[aria-pressed="true"] { background: #cfe2b4; border-color: #8fbf55; }
.sl-gf .sl-chip[aria-pressed="true"]::before { content: "✓ "; }
.sl-gf .sl-tab:hover, .sl-gf .sl-chip:hover { border-color: #9ed6f1; }
.sl-gf .sl-tab:focus-visible, .sl-gf .sl-chip:focus-visible, .sl-gf .sl-k:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

.sl-gf .sl-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .sl-gf .sl-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .sl-gf .sl-raster { grid-template-columns: 1fr; } .sl-gf .sl-leiste { gap: 12px; }
  .sl-gf .sl-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; width: calc(100% + 40px); }
  .sl-gf .sl-chips::-webkit-scrollbar { display: none; } .sl-gf .sl-chip { flex: 0 0 auto; } }

.sl-gf .sl-karte { background: var(--gruen); border-radius: 18px 32px 32px 32px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 12px;
  animation: sl-auf .35s ease both; }
.sl-gf .sl-karte[hidden] { display: none; }
@keyframes sl-auf { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .sl-gf .sl-karte { animation: none; } }
.sl-gf .sl-kopf { display: flex; gap: 14px; align-items: center; }
.sl-gf .sl-symbol { flex: 0 0 54px; height: 54px; border-radius: 14px; background: #fff; display: grid; place-items: center; }
.sl-gf .sl-art { margin: 0 0 2px; font: 400 11px/1.3 Parkinsans, sans-serif; letter-spacing: .1em; color: var(--text); }
.sl-gf .sl-art::after { content: " //"; color: #6fb03b; letter-spacing: 0; }
.sl-gf .sl-name { margin: 0; font: 400 22px/1.15 Parkinsans, sans-serif; color: #000; }
.sl-gf .sl-beschr { margin: 0; font-size: 15px; line-height: 1.45; color: var(--grau); }
.sl-gf .sl-zeit { margin: -6px 0 0; font-size: 13px; line-height: 1.45; color: var(--grau); }
.sl-gf .sl-hinweis-wetter { margin: -6px 0 0; font-size: 13px; color: #2f6b0f; }
.sl-gf .sl-hinweis-wetter::before { content: "☀ "; }

.sl-gf .sl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.sl-gf .sl-stat { background: #fff; border-radius: 14px; padding: 10px 6px 9px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sl-gf .sl-stat b { font: 400 15px/1.2 Parkinsans, sans-serif; color: #000; }
.sl-gf .sl-stat small { font-size: 11px; line-height: 1.25; color: var(--grau); }
.sl-gf .sl-stat-i { color: #000; margin-bottom: 2px; }
.sl-gf .sl-sterne { font-size: 14px; letter-spacing: 1px; line-height: 22px; margin-bottom: 2px; white-space: nowrap; }
.sl-gf .sl-stern { background: linear-gradient(90deg, var(--gelb) var(--f), #d9d9d9 var(--f)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.sl-gf .sl-merk { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 8px 10px; }
.sl-gf .sl-merk li { position: relative; padding-left: 28px; font-size: 13px; line-height: 1.3; min-height: 20px; display: flex; align-items: center; }
.sl-gf .sl-merk li::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  background: var(--blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 2.9 6-6.2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.sl-gf .sl-merk li.nein { color: var(--grau); }
.sl-gf .sl-merk li.nein::before { background-color: var(--orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }

.sl-gf .sl-besonders { margin: 2px 0 0; background: #fff; border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: var(--grau); }
.sl-gf .sl-besonders span { display: block; font: 400 10px/1.4 Parkinsans, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--text); margin-bottom: 2px; }

.sl-gf .sl-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.sl-gf .sl-k { font: 400 13px/1 Parkinsans, sans-serif; color: #000 !important; text-decoration: none !important; padding: 10px 12px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; transition: filter .2s, background .2s; }
.sl-gf .sl-k-gelb { background: var(--gelb); }
.sl-gf .sl-k-gruen { background: var(--gruen-k); border-color: #fff; }
.sl-gf .sl-k-weiss { background: #fff; }
.sl-gf .sl-k:hover { filter: brightness(.95); }

.sl-gf .sl-leer { margin: 20px 0 0; text-align: center; color: var(--grau); }
.sl-gf .sl-fuss { margin: 22px 0 0; font-size: 12px; line-height: 1.5; color: var(--grau); text-align: center; }
.sl-gf .sl-fuss a { color: inherit; text-decoration: underline; }