/* ── Fonts ───────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
    --c-bg:        #ffffff;
    --c-surface:   #f8f9fa;
    --c-border:    #e9ecef;
    --c-text:      #212529;
    --c-muted:     #6c757d;
    --c-accent:    #2563eb;
    --c-accent-h:  #1d4ed8;
    --c-success:   #16a34a;

    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;

    --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);

    --font:        'Inter', system-ui, sans-serif;
    --max-w:       1100px;
    --px:          16px;
}

/* ── Base ────────────────────────────────────────────────────────── */
body {
    font-family:            var(--font);
    font-size:              15px;
    line-height:            1.6;
    color:                  var(--c-text);
    background:             var(--c-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x:             hidden;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 {
    font-size:      2rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    line-height:    1.2;
    color:          var(--c-text);
    margin-bottom:  24px;
}

h2 {
    font-size:      1.2rem;
    font-weight:    600;
    letter-spacing: -0.01em;
    line-height:    1.3;
    color:          var(--c-text);
    margin-top:     32px;
    margin-bottom:  12px;
}

/* ── Layout ──────────────────────────────────────────────────────── */
.container {
    width:     100%;
    max-width: var(--max-w);
    margin:    0 auto;
    padding:   0 var(--px);
}

/* ── Header ──────────────────────────────────────────────────────── */
.site-header {
    background:    var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    position:      sticky;
    top:           0;
    z-index:       100;
}

.site-header__inner {
    display:     flex;
    align-items: center;
    gap:         16px;
    height:      56px;
}

.site-logo {
    font-size:      1.1rem;
    font-weight:    600;
    color:          var(--c-text);
    letter-spacing: -0.02em;
    white-space:    nowrap;
    flex-shrink:    0;
}

.site-logo span {
    color: var(--c-accent);
}


/* ── Main ────────────────────────────────────────────────────────── */
.site-main {
    min-height: calc(100vh - 56px - 60px);
    padding:    32px 0 48px;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
    border-top:  1px solid var(--c-border);
    padding:     20px 0;
    font-size:   0.8rem;
    color:       var(--c-muted);
    text-align:  center;
}

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
    background:    var(--c-bg);
    border:        1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-card);
}

/* ── Business Card ───────────────────────────────────────────────── */
.location-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   12px;
}

@media (min-width: 640px) {
    .location-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.business-card {
    display:       flex;
    gap:           16px;
    padding:       20px;
    background:    var(--c-bg);
    border:        1px solid var(--c-border);
    border-radius: 10px;
    transition:    background 150ms ease, border-color 150ms ease;
}

.business-card:hover { background: var(--c-surface); border-color: var(--c-accent); }

.business-card__body { flex: 1; min-width: 0; }

.business-card__name {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--c-text);
    line-height: 1.3;
}

.business-card__name a {
    color:           inherit;
    text-decoration: none;
}

.business-card__name a:hover { color: var(--c-accent); }

.business-card__meta {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    margin-top:     6px;
    font-size:      0.82rem;
    color:          var(--c-muted);
}

.business-card__meta-item {
    display:     flex;
    align-items: center;
    gap:         4px;
}

/* ── Badge ───────────────────────────────────────────────────────── */
.badge {
    display:       inline-flex;
    align-items:   center;
    padding:       2px 8px;
    border-radius: 20px;
    font-size:     0.72rem;
    font-weight:   500;
    background:    #eff6ff;
    color:         #1d4ed8;
}

/* ── Page header ─────────────────────────────────────────────────── */
.page-header {
    margin-bottom: 24px;
}

.page-header__eyebrow {
    font-size:     0.78rem;
    color:         var(--c-muted);
    margin-bottom: 4px;
}

.page-header__eyebrow a {
    color: var(--c-muted);
}

.page-header__eyebrow a:hover { color: var(--c-accent); }

.page-header__title {
    margin-bottom: 0;
}

.page-header__subtitle {
    margin-top: 6px;
    font-size:  0.9rem;
    color:      var(--c-muted);
}

/* ── Grid ────────────────────────────────────────────────────────── */
.grid-2 {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   16px;
}

@media (min-width: 640px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    :root { --px: 24px; }
}

@media (min-width: 1024px) {
    .grid-2 { grid-template-columns: repeat(3, 1fr); }
    :root { --px: 32px; }
}

/* ── Detail layout ───────────────────────────────────────────────── */
.detail-layout {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   24px;
}

@media (min-width: 768px) {
    .detail-layout {
        grid-template-columns: 1fr 320px;
    }
}

/* ── Info list ───────────────────────────────────────────────────── */
.info-list { list-style: none; }

.info-list li {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       12px 0;
    border-bottom: 1px solid var(--c-border);
    font-size:     0.9rem;
}

.info-list li:last-child { border-bottom: none; }

.info-list__icon {
    color:       var(--c-muted);
    font-size:   1rem;
    flex-shrink: 0;
    margin-top:  2px;
}

.info-list__label {
    font-size: 0.75rem;
    color:     var(--c-muted);
    display:   block;
}

/* ── Section title ───────────────────────────────────────────────── */
.section-title {
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--c-muted);
    margin-bottom:  12px;
}

/* ── Breadcrumb ──────────────────────────────────────────────────── */
.breadcrumb {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   center;
    gap:           4px;
    font-size:     0.78rem;
    color:         var(--c-muted);
    margin-bottom: 20px;
}

.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-accent); text-decoration: none; }
.breadcrumb__sep { opacity: 0.4; }

/* ── Chip ────────────────────────────────────────────────────────── */
.chip {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       4px 10px;
    border-radius: var(--radius-sm);
    border:        1px solid var(--c-border);
    font-size:     0.8rem;
    color:         var(--c-text);
    background:    var(--c-bg);
    transition:    border-color 150ms, background 150ms;
}

.chip:hover {
    border-color:    var(--c-accent);
    color:           var(--c-accent);
    text-decoration: none;
}

/* ── Opening hours ───────────────────────────────────────────────── */
.hours-table { width: 100%; font-size: 0.85rem; }

.hours-table tr { border-bottom: 1px solid var(--c-border); }
.hours-table tr:last-child { border-bottom: none; }

.hours-table td { padding: 8px 0; }
.hours-table td:first-child { color: var(--c-muted); width: 100px; }
.hours-table td:last-child  { text-align: right; }

.hours-closed { color: var(--c-muted); font-size: 0.8rem; }

/* ── Button ──────────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         10px 18px;
    border-radius:   var(--radius-md);
    font-size:       0.875rem;
    font-weight:     500;
    font-family:     var(--font);
    border:          none;
    cursor:          pointer;
    text-decoration: none;
    transition:      background 150ms ease;
}

.btn-primary {
    background: var(--c-accent);
    color:      #fff;
}

.btn-primary:hover {
    background:      var(--c-accent-h);
    text-decoration: none;
    color:           #fff;
}

.btn-outline {
    background: transparent;
    color:      var(--c-text);
    border:     1px solid var(--c-border);
}

.btn-outline:hover {
    border-color:    var(--c-accent);
    color:           var(--c-accent);
    text-decoration: none;
}

.btn-block { width: 100%; }

/* ── Listing Layout ──────────────────────────────────────────────── */
.listing-layout {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   24px;
}

@media (min-width: 768px) {
    .listing-layout {
        grid-template-columns: 220px 1fr;
        align-items:           start;
    }
}

.listing-filter {
    position: sticky;
    top:      72px;
}

.filter-group {
    margin-bottom: 24px;
}

.filter-title {
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--c-muted);
    margin-bottom:  8px;
}

.filter-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         7px 10px;
    border-radius:   var(--radius-sm);
    font-size:       0.875rem;
    color:           var(--c-text);
    text-decoration: none;
    transition:      background 150ms ease;
    gap:             8px;
}

.filter-item:hover {
    background:      var(--c-surface);
    text-decoration: none;
}

.filter-item--active {
    background:  #eff6ff;
    color:       var(--c-accent);
    font-weight: 500;
}

.filter-item--active:hover { background: #dbeafe; }

.filter-item--reset {
    font-size:     0.78rem;
    color:         var(--c-muted);
    margin-bottom: 4px;
}

.filter-item--reset:hover { color: var(--c-text); }

.filter-item__name { flex: 1; }

.filter-item__count {
    font-size:     0.72rem;
    color:         var(--c-muted);
    font-family:   var(--font);
    background:    var(--c-surface);
    padding:       1px 6px;
    border-radius: 10px;
    border:        1px solid var(--c-border);
}

.filter-item--active .filter-item__count {
    background:   #dbeafe;
    border-color: #bfdbfe;
    color:        var(--c-accent);
}

/* ── Prose (Markdown Output) ─────────────────────────────────────── */
.prose { font-size: 0.9rem; line-height: 1.7; color: var(--c-text); }

.prose h2 {
    font-size:      1.05rem;
    font-weight:    600;
    margin:         2rem 0 0.75rem;
    padding-bottom: 6px;
    border-bottom:  1px solid var(--c-border);
    letter-spacing: -0.01em;
}

.prose h3 {
    font-size:   0.95rem;
    font-weight: 600;
    margin:      1.2rem 0 0.4rem;
}

.prose p { margin: 0 0 0.75rem; }

.prose ul, .prose ol {
    margin:      0 0 0.75rem 1.2rem;
    line-height: 1.6;
}

.prose li { margin-bottom: 0; }

.prose strong { font-weight: 600; }

.prose a { color: var(--c-accent); }
.prose a:hover { text-decoration: underline; }

.prose hr {
    border:     none;
    border-top: 1px solid var(--c-border);
    margin:     1.5rem 0;
}

.prose blockquote {
    background:    var(--c-surface);
    border-left:   3px solid var(--c-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding:       10px 14px;
    color:         var(--c-muted);
    font-size:     0.82rem;
    margin:        0 0 1rem;
}

.prose blockquote p { margin: 0; }

.prose table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.82rem;
    margin-bottom:   0.5rem;
    table-layout:    fixed;
}

.prose th:nth-child(1),
.prose td:nth-child(1) {
    width:     44px;
    color:     var(--c-muted);
    font-size: 0.75rem;
}

.prose th:nth-child(2),
.prose td:nth-child(2) {
    width:       35%;
    font-weight: 500;
}

.prose th:nth-child(3),
.prose td:nth-child(3) {
    color:     var(--c-muted);
    font-size: 0.78rem;
}

.prose th:last-child,
.prose td:last-child {
    width:       70px;
    text-align:  right;
    white-space: nowrap;
    font-weight: 500;
    color:       var(--c-text);
}

.prose tbody tr:nth-child(even) td {
    background: var(--c-surface);
}

.prose tr:hover td {
    background: none;
}

.prose td {
    padding:        5px 10px;
    border-bottom:  1px solid var(--c-border);
    vertical-align: middle;
    line-height:    1.4;
}

.prose th {
    padding:        5px 10px;
    border-bottom:  2px solid var(--c-border);
    font-weight:    600;
    color:          var(--c-muted);
    font-size:      0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.prose tr:last-child td { border-bottom: none; }

/* ── Listing Header ──────────────────────────────────────────────── */
.listing-header {
    display:       flex;
    align-items:   baseline;
    gap:           12px;
    margin-bottom: 16px;
    flex-wrap:     wrap;
}

.listing-title {
    margin-bottom: 0;
}

.listing-count {
    font-size: 0.85rem;
    color:     var(--c-muted);
}

/* ── Empty state ─────────────────────────────────────────────────── */
.empty {
    text-align: center;
    padding:    48px 20px;
    color:      var(--c-muted);
}

.empty__icon {
    font-size:     2.5rem;
    opacity:       0.3;
    margin-bottom: 12px;
}

.empty__text { font-size: 0.9rem; }

/* ── Content navigation (sticky, Detailseite) ───────────────────── */
.content-nav {
    position:              sticky;
    top:                   56px;
    z-index:               50;
    background:            rgba(255, 255, 255, 0.92);
    backdrop-filter:       blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom:         1px solid var(--c-border);
    display:               flex;
    overflow-x:            auto;
    scrollbar-width:       none;
    margin:                0 calc(-1 * var(--px)) 24px;
    padding:               0 var(--px);
}

.content-nav::-webkit-scrollbar { display: none; }

.content-nav__link {
    flex-shrink:     0;
    padding:         10px 16px;
    font-size:       0.82rem;
    font-weight:     500;
    color:           var(--c-muted);
    text-decoration: none;
    border-bottom:   2px solid transparent;
    white-space:     nowrap;
    transition:      color 150ms, border-color 150ms;
}

.content-nav__link:hover {
    color:           var(--c-text);
    text-decoration: none;
}

.content-nav__link.is-active {
    color:                var(--c-accent);
    border-bottom-color:  var(--c-accent);
}

/* Anker-Scrollziel: Platz für Site-Header (56px) + Content-Nav (~42px) + Luft */
.content-block[id] {
    scroll-margin-top: 114px;
}

/* ── Utilities ───────────────────────────────────────────────────── */
.mt-4  { margin-top:    16px; }
.mt-6  { margin-top:    24px; }
.mt-8  { margin-top:    32px; }
.mb-4  { margin-bottom: 16px; }
.mb-6  { margin-bottom: 24px; }
.gap-2 { gap: 8px; }
.flex  { display: flex; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.text-muted   { color: var(--c-muted); }
.text-sm      { font-size: 0.82rem; }
.font-medium  { font-weight: 500; }