/* =========================================================================
   Reiseführer Fränkische Schweiz – Design-Entwurf
   Frisch, editorial, reise-magazin. Bild-bereit (Fallback: Verlauf + Icon).
   ========================================================================= */

:root {
  --green-900: #1c3a26;
  --green-700: #2f5d3a;
  --green-600: #3a7048;
  --green-500: #4c8a5a;
  --amber-500: #d98a3d;
  --amber-400: #e6a35c;
  --paper:     #faf8f3;
  --paper-2:   #f3efe6;
  --card:      #ffffff;
  --ink:       #1f2421;
  --ink-soft:  #515a52;
  --line:      #e7e1d4;
  --shadow:    0 1px 2px rgba(28,58,38,.06), 0 8px 24px rgba(28,58,38,.08);
  --shadow-lg: 0 12px 40px rgba(28,58,38,.16);
  --radius:    18px;
  --radius-sm: 12px;
  --maxw:      1120px;
}

/* Dark-Mode: automatisch via OS oder explizit via data-theme="dark" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #14130f;
    --paper-2: #1c1b16;
    --card:    #211f19;
    --ink:     #efe9dc;
    --ink-soft:#a9a293;
    --line:    #322f27;
    --green-700:#5b9c6a;
    --green-600:#69ab78;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
  }
}
/* Explizites Dark-Theme (auch wenn OS = Light) */
:root[data-theme="dark"] {
  --paper:   #14130f;
  --paper-2: #1c1b16;
  --card:    #211f19;
  --ink:     #efe9dc;
  --ink-soft:#a9a293;
  --line:    #322f27;
  --green-700:#5b9c6a;
  --green-600:#69ab78;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}

a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- Header ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.4) blur(10px);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 10px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--green-600), var(--green-900));
  display: grid; place-items: center; color: #fff; font-size: 1.1rem;
  box-shadow: var(--shadow);
}
.brand small { display:block; font-weight:500; font-size:.72rem; color:var(--ink-soft); letter-spacing:.02em; }
.nav-spacer { flex: 1; }
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  color: var(--ink-soft); font-size: .85rem; font-weight: 500;
  padding: 6px 9px; border-radius: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 120px;
}
.nav-links a:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.menu-btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 10px; padding: 8px 14px; font: inherit; font-size:.9rem; font-weight:600;
  cursor: pointer; display:inline-flex; align-items:center; gap:8px;
}
.menu-btn:hover { background: var(--paper-2); }
.map-link { font-size:1.2rem; padding:6px 8px; border-radius:8px; text-decoration:none; line-height:1; }
.map-link:hover { background: var(--paper-2); }
.lang-switch {
  font-size:.82rem; font-weight:700; letter-spacing:.04em;
  padding:6px 10px; border-radius:8px; border:1px solid var(--line);
  color:var(--ink-soft); text-decoration:none; line-height:1;
}
.lang-switch:hover { background: var(--paper-2); color: var(--ink); text-decoration:none; }
@media (max-width: 760px) { .nav-links { display: none; } }

/* ---------- Hero ------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% -10%, #bfe0c6 0%, transparent 55%),
    linear-gradient(180deg, #cfe8d3 0%, #a9d4b1 38%, #7cbb8c 100%);
  padding: 84px 0 0;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .hero { background:
    radial-gradient(120% 90% at 80% -10%, #1d3a27 0%, transparent 55%),
    linear-gradient(180deg, #16241b 0%, #1b3022 45%, #234430 100%); }
}
html[data-theme="dark"] .hero { background:
  radial-gradient(120% 90% at 80% -10%, #1d3a27 0%, transparent 55%),
  linear-gradient(180deg, #16241b 0%, #1b3022 45%, #234430 100%); }
.hero-inner { position: relative; z-index: 2; text-align: center; max-width: 760px; margin: 0 auto; padding: 0 22px 18px; }
.hero .eyebrow {
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--green-900); background: rgba(255,255,255,.55); padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .hero .eyebrow{ color:#cdeccf; background:rgba(0,0,0,.3);} }
html[data-theme="dark"] .hero .eyebrow { color:#cdeccf; background:rgba(0,0,0,.3); }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); color: var(--green-900); margin: 0 0 14px; }
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .hero h1{ color:#eafaec; } }
html[data-theme="dark"] .hero h1 { color:#eafaec; }
.hero p { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: #2a4a33; margin: 0 auto 26px; max-width: 560px; }
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .hero p{ color:#bfe0c6; } }
html[data-theme="dark"] .hero p { color:#bfe0c6; }
.hero-search {
  display:flex; gap:8px; max-width: 440px; margin: 0 auto;
  background: var(--card); border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: var(--shadow-lg);
}
.hero-search input { flex:1; border:0; background:transparent; font: inherit; color: var(--ink); outline: none; }
.hero-search button {
  border:0; border-radius:999px; padding: 10px 18px; font:inherit; font-weight:600; cursor:pointer;
  background: linear-gradient(135deg, var(--green-600), var(--green-900)); color:#fff;
}
.hills { display:block; width:100%; height:auto; margin-top: 28px; }

/* ---------- Section heading ------------------------------------------ */
.section { padding: 56px 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom: 26px; }
.section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin:0; }
.section-head p { margin:.3rem 0 0; color: var(--ink-soft); }
.kicker { font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--amber-500); }

/* ---------- Card grid ------------------------------------------------- */
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 20px; }
.card {
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration:none; }
.card-media {
  height: 180px; display:grid; place-items:center; font-size: 2.6rem;
  position:relative; flex-shrink:0; overflow:hidden;
}
.card-media img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.card-body {
  padding: 14px 18px 18px; background: var(--card);
  border-top: 1px solid var(--line); flex:1; display:flex; flex-direction:column;
}
.card-body h3 { margin:0 0 5px; font-size: 1.05rem; color: var(--ink); line-height:1.3; }
.card-body p { margin:0; color: var(--ink-soft); font-size:.88rem; line-height:1.5; flex:1; }
.card-meta { margin-top:12px; display:flex; align-items:center; gap:6px; color: var(--green-700); font-weight:600; font-size:.86rem; }
.card-meta .arrow { transition: transform .18s ease; }
.card:hover .card-meta .arrow { transform: translateX(4px); }

/* gradient variants for media fallback */
.grad-1 { background: linear-gradient(135deg,#3a7048,#1c3a26); color:#eafaec; }
.grad-2 { background: linear-gradient(135deg,#d98a3d,#a85d1e); color:#fff5e9; }
.grad-3 { background: linear-gradient(135deg,#5a86b0,#274b6e); color:#eaf3fb; }
.grad-4 { background: linear-gradient(135deg,#b0683f,#6e3320); color:#fbeee7; }
.grad-5 { background: linear-gradient(135deg,#6fa36f,#33623a); color:#eef7ee; }
.grad-6 { background: linear-gradient(135deg,#9a6fb0,#4a2f6e); color:#f3eefb; }
.grad-7 { background: linear-gradient(135deg,#bdae54,#8a7a2a); color:#fbf8e9; }
.grad-8 { background: linear-gradient(135deg,#4fa3a0,#205e5c); color:#e9f7f6; }

/* ---------- Breadcrumb ------------------------------------------------ */
.crumbs { font-size:.86rem; color: var(--ink-soft); padding: 22px 0 0; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--green-700); }
.crumbs .sep { margin: 0 8px; opacity:.5; }

/* ---------- Article --------------------------------------------------- */
.article-hero {
  border-radius: var(--radius); padding: 40px; margin: 18px 0 0; color:#fff;
  background: linear-gradient(135deg,#3a7048,#1c3a26); box-shadow: var(--shadow);
  position: relative; overflow:hidden;
}
.article-hero .tag { font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.article-hero h1 { font-size: clamp(2rem,5vw,3rem); margin:.3rem 0 0; }
.layout { display:grid; grid-template-columns: 1fr; gap: 40px; padding: 36px 0 64px; }
@media (min-width: 940px){ .layout { grid-template-columns: minmax(0,1fr) 280px; } }

.prose { max-width: none; }
/* Fließtext auf Lesebreite begrenzen, Tabellen & Bilder dürfen volle Breite nutzen */
.prose > p,
.prose > h2, .prose > h3, .prose > h4,
.prose > ul, .prose > ol, .prose > dl,
.prose > blockquote, .prose > .callout, .prose > .facts { max-width: 70ch; }
.prose > p:first-of-type { font-size: 1.18rem; color: var(--ink); }
.prose h2 {
  font-size: 1.5rem; margin: 2.2rem 0 .8rem; padding-bottom:.4rem;
  border-bottom: 2px solid var(--line);
}
.prose h3 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
.prose ul { list-style: none; padding: 0; margin: 1rem 0; display:grid; gap: 8px; }
.prose ul li {
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 16px; position: relative; padding-left: 42px;
}
.prose ul li::before {
  content: ""; position:absolute; left:16px; top:50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 3px;
  background: linear-gradient(135deg, var(--amber-500), var(--green-600));
}
.prose strong { color: var(--ink); }
.prose img { max-width:100%; border-radius: var(--radius-sm); box-shadow: var(--shadow); margin: 1.2rem 0; }

/* ---------- Tabellen -------------------------------------------------- */
.prose table {
  width: 100%; border-collapse: collapse; border-radius: var(--radius-sm);
  overflow: hidden; font-size: .93rem; margin: 1.6rem 0;
  box-shadow: 0 1px 4px rgba(28,58,38,.08), 0 0 0 1px var(--line);
}
.prose thead tr { background: var(--green-900); color: #fff; }
.prose thead th {
  padding: 11px 16px; text-align: left; font-family:"Fraunces",serif;
  font-size: .85rem; font-weight: 600; letter-spacing: .04em;
  white-space: nowrap;
}
.prose tbody tr { border-bottom: 1px solid var(--line); transition: background .12s; }
.prose tbody tr:last-child { border-bottom: none; }
.prose tbody tr:nth-child(even) { background: var(--paper-2); }
.prose tbody tr:hover { background: color-mix(in srgb, var(--green-500) 8%, var(--paper)); }
.prose td { padding: 10px 16px; vertical-align: top; line-height: 1.5; }
.prose td a { color: var(--green-700); }
/* Scrollbar auf engen Screens */
.prose table { display: block; overflow-x: auto; }
@media (min-width: 700px) { .prose table { display: table; } }
.prose blockquote {
  margin: 1.4rem 0; padding: 14px 20px; border-left: 4px solid var(--amber-500);
  background: var(--paper-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-soft);
}

/* ---------- Editorial page hero (image band) -------------------------- */
.page-hero {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 360px; display: flex; align-items: flex-end; margin-top: 14px;
  box-shadow: var(--shadow);
  background:
    radial-gradient(120% 120% at 75% 0%, #6fae7e 0%, transparent 55%),
    linear-gradient(160deg, #4c8a5a 0%, #2f5d3a 45%, #1c3a26 100%);
}
.page-hero .ph-hills { position:absolute; inset:auto 0 0 0; width:100%; height:auto; opacity:.4; }
.page-hero .ph-scrim { position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(15,30,20,.55) 100%); }

/* Automatische Bildercollage für Kategorieseiten */
.ph-collage {
  position: absolute; inset: 0; display: grid; gap: 3px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.ph-collage img { width:100%; height:100%; object-fit:cover; display:block; }
/* 1. Bild nimmt linke Spalte ganz ein */
.ph-collage img:first-child { grid-row: 1 / 3; }
/* Bei nur 2 Bildern: rechts eine große Spalte */
.ph-collage-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.ph-collage-2 img:first-child { grid-row: auto; }
/* Bei 3 Bildern: rechts zwei Hälften übereinander */
.ph-collage-3 img:nth-child(2) { grid-row: 1; grid-column: 2 / 4; }
.ph-collage-3 img:nth-child(3) { grid-row: 2; grid-column: 2 / 4; }
.page-hero .ph-content { position: relative; z-index:2; padding: 32px 36px; color:#fff; }
.page-hero .ph-tag { font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.9; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin:.25rem 0 0; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.25); }
.page-hero .ph-sub { margin:.4rem 0 0; font-size:1.05rem; max-width: 46ch; opacity:.95; }
.photo-hint {
  position:absolute; z-index:3; top:14px; right:16px;
  background: rgba(255,255,255,.16); color:#fff; backdrop-filter: blur(4px);
  font-size:.74rem; padding:5px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
}

/* ---------- Prose: editorial touches ---------------------------------- */
.prose .lead { font-size: 1.22rem; line-height: 1.6; color: var(--ink); }
.prose .lead::first-letter {
  float: left; font-family: "Fraunces", serif; font-weight: 600;
  font-size: 3.6rem; line-height: .8; padding: 6px 12px 0 0; color: var(--green-700);
}
.prose .sec-kicker { font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--amber-500); margin-top: 2.4rem; }
.prose .sec-kicker + h2 { margin-top: .2rem; border:0; padding:0; }
.prose p { margin: 0 0 1.1rem; }
.pullquote {
  font-family:"Fraunces", serif; font-size: 1.5rem; line-height:1.35; color: var(--green-700);
  border: 0; margin: 2rem 0; padding: 0 0 0 22px; border-left: 4px solid var(--amber-500);
}
.callout {
  display:flex; gap:14px; background: var(--paper-2); border:1px solid var(--line);
  border-radius: var(--radius-sm); padding: 16px 18px; margin: 1.6rem 0;
}
.callout .ci { font-size:1.4rem; line-height:1; }
.callout strong { display:block; margin-bottom:2px; }
.callout p { margin:0; color: var(--ink-soft); font-size:.95rem; }

/* ---------- "Auf einen Blick" facts box ------------------------------- */
.facts { margin:0; }
.facts dt { font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); margin-top:12px; }
.facts dt:first-child { margin-top:0; }
.facts dd { margin:2px 0 0; font-weight:600; }

/* sidebar */
.aside-card {
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); position: sticky; top: 84px;
}
.aside-card h4 { margin:0 0 12px; font-family:"Fraunces",serif; font-size:1.05rem; }
.aside-card ul { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.aside-card li a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; color:var(--ink); font-size:.92rem; }
.aside-card li a:hover { background: var(--paper-2); text-decoration:none; }
.aside-card .ico { font-size:1.1rem; }

/* ---------- Standort-Box auf Einzelseiten ----------------------------- */
.loc-box { margin: 44px 0 8px; }
.loc-box .kicker { margin-bottom: 12px; }
.loc-map {
  height: 320px; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); margin-bottom: 16px;
  position: relative; z-index: 0;  /* eigener Stacking-Context, bleibt unter dem Header */
}
.loc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.loc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .92rem; font-weight: 600;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; transition: background .15s, border-color .15s, transform .1s;
}
.loc-btn:hover { background: var(--paper-2); border-color: var(--green-700); text-decoration: none; }
.loc-btn:active { transform: scale(.97); }
.loc-btn-primary { color: #fff; background: var(--green-700); border-color: var(--green-700); }
.loc-btn-primary:hover { background: var(--green-600); border-color: var(--green-600); color: #fff; }

/* ---------- Footer ---------------------------------------------------- */
/* ---------- Karte ----------------------------------------------------- */
#fs-map {
  height: 580px; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); margin-bottom: 48px;
}
/* Kategorie-Filter über der Karte */
.fs-filter { display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 14px; }
.fs-chip {
  display:inline-flex; align-items:center; gap:7px;
  font: inherit; font-size:.85rem; font-weight:600; line-height:1;
  color: var(--ink); background: var(--card);
  border:1px solid var(--line); border-radius:999px;
  padding:8px 13px; cursor:pointer;
  transition: background .14s, border-color .14s, opacity .14s, transform .1s;
}
.fs-chip:hover { border-color: var(--green-700); }
.fs-chip:active { transform: scale(.96); }
.fs-chip .fs-chip-ic { font-size:1rem; line-height:1; }
.fs-chip .fs-chip-n {
  font-size:.72rem; font-weight:700; color: var(--ink-soft);
  background: var(--paper-2); border-radius:999px; padding:2px 7px; margin-left:2px;
}
.fs-chip-all { font-weight:700; color:#fff; background: var(--green-700); border-color: var(--green-700); }
.fs-chip-all.off { color: var(--ink); background: var(--card); border-color: var(--line); }
/* abgewählte Kategorie: ausgegraut + durchgestrichene Anmutung */
.fs-chip.off { opacity:.45; }
.fs-chip.off .fs-chip-ic { filter: grayscale(1); }

.fs-marker { background: transparent; border: none; }
.fs-marker-inner {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--green-900); border: 2.5px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; cursor: pointer;
  transition: transform .15s;
}
.fs-marker-inner:hover { transform: scale(1.15); }
/* geteiltes Symbol: zwei (oder mehr) Icons nebeneinander, kompakter */
.fs-marker-inner.fs-marker-multi { gap: 1px; font-size: .8rem; letter-spacing: -1px; }
.fs-marker-inner span { line-height: 1; }
.leaflet-popup-content strong { font-family: "Fraunces", serif; font-size: 1rem; }
.leaflet-popup-content .fs-pop-cat { color: #666; font-size: .82rem; display: block; margin: 2px 0 4px; }
.leaflet-popup-content .fs-pop-link { color: var(--green-700); font-weight: 600; }

.site-footer { border-top:1px solid var(--line); background: var(--paper-2); margin-top: 40px; }
.site-footer .wrap { padding: 36px 22px; display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center; color: var(--ink-soft); font-size:.9rem; }
.site-footer strong { color: var(--ink); font-family:"Fraunces",serif; }

/* Theme-Toggle im Footer */
.theme-toggle {
  display:inline-flex; align-items:center; gap:2px;
  background: var(--paper); border:1px solid var(--line);
  border-radius: 999px; padding: 3px;
}
.theme-toggle button {
  font: inherit; font-size: .82rem; cursor: pointer;
  border: none; background: transparent; color: var(--ink-soft);
  padding: 5px 10px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle button.active {
  background: var(--card); color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  font-weight: 600;
}

/* ---------- Mega menu (alle Kategorien) ------------------------------- */
.menu-btn { display: inline-flex; }
.mega {
  display: none;
  position: fixed; top: 64px; left: 0; right: 0; z-index: 49;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(28,58,38,.15);
  overflow-y: auto;
  max-height: calc(100vh - 64px);
}
.mega.open { display: block; }
.mega-inner { padding: 12px 0 20px; }
.mega-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap:2px; }
.mega-grid a {
  display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:8px;
  color:var(--ink); font-weight:500; font-size:.91rem;
  transition: background .12s;
}
.mega-grid a:hover { background: var(--paper-2); text-decoration:none; }
.mega-grid a span { font-size:1.15rem; flex-shrink:0; }

/* ---------- Search dropdown ------------------------------------------- */
.search-results {
  max-width: 440px; margin: 10px auto 0; text-align:left;
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); overflow:hidden; display:none;
}
.search-results.open { display:block; }
.search-results a { display:flex; align-items:center; gap:10px; padding:11px 16px; color:var(--ink); border-bottom:1px solid var(--line); }
.search-results a:last-child { border-bottom:0; }
.search-results a:hover { background: var(--paper-2); text-decoration:none; }
.search-results .si { font-size:1.1rem; }
.search-results .sx { color:var(--ink-soft); font-size:.82rem; }
.search-empty { padding:14px 16px; color:var(--ink-soft); font-size:.9rem; }