:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #5a5a5a;
  --card: #f5f5f5;
  --line: #e0e0e0;
  --accent: #1a1a1a;
  --gold: #b49b57;
  --serif: "Segoe UI", system-ui, -apple-system, sans-serif;
}
[data-theme="schwarz"] {
  --bg: #000000;
  --fg: #f5f5f5;
  --muted: #bdbdbd;
  --card: #0d0d0d;
  --line: #262626;
  --accent: #f5f5f5;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
html[data-theme="schwarz"] { color-scheme: dark; }
html[data-theme="weiss"] { color-scheme: light; }
section[id], div[id] { scroll-margin-top: 140px; }
.img-title[id] { scroll-margin-top: 140px; }
/* Unsichtbarer Ankerpunkt: nimmt keinen Platz weg, ist aber anspringbar.
   Feinjustierung pro Anker per --anker-dy (z. B. style="--anker-dy: 120px"). */
.anker { display: block; height: 0; line-height: 0; overflow: hidden; visibility: hidden; scroll-margin-top: 140px; position: relative; top: var(--anker-dy, 0); }
/* Anker auf Bildhöhe: absolut im Bildcontainer, --anker-at ab Bildoberkante */
.anker-wrap { position: relative; }
.overlay-img .anker, .anker-wrap .anker { position: absolute; left: 0; top: var(--anker-at, 0); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.6; overflow-x: clip;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.2rem; }
header.top {
  padding: 0.9rem 0 0.6rem; position: sticky; top: 0;
  background: var(--bg); z-index: 10;
  transition: padding 0.25s ease-out, box-shadow 0.25s ease-out;
  will-change: padding;
}
header.top .wrap { display: flex; align-items: center; gap: 1rem; }
header.top .brand { flex-direction: column; align-items: center; text-align: center; position: relative; min-height: 100px; justify-content: center; transition: min-height 0.25s ease-out; }
.logo-link { display: inline-block; line-height: 0; }
.logo {
  height: 60px; width: auto; max-width: min(560px, 80vw);
  object-fit: contain; border-radius: 0;
  transition: height 0.25s ease-out, max-width 0.25s ease-out;
  will-change: height;
}
/* Dunkle Darstellung im Schwarz-Theme: Weiss->Schwarz, Schwarz->Weiss, Gold bleibt (Hue-Rotation). */
[data-theme="schwarz"] .logo { filter: invert(1) hue-rotate(180deg); }
.topbar {
  position: absolute; top: 0.4rem; right: 1.2rem;
  display: flex; align-items: center; gap: 0.5rem;
}
#siteSearch {
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
  border-radius: 999px; height: 2rem; padding: 0 0.8rem; width: 140px; font-size: 0.85rem;
}
nav.main { display: flex; gap: 1.4rem; margin-left: auto; flex-wrap: wrap; justify-content: center; }
header.top .brand nav.main { margin-left: 0; margin-top: 0.5rem; }
nav.main a { color: var(--fg); text-decoration: none; font-weight: 500; }
nav.main a:hover { text-decoration: underline; }
#themeBtn {
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
  border-radius: 999px; width: 2rem; height: 2rem;
  cursor: pointer; font-size: 1.25rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-emoji: text;
}
#menueBtn {
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
  border-radius: 999px; width: 2rem; height: 2rem;
  cursor: pointer; font-size: 1.1rem; line-height: 1;
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 3px;
}
#menueBtn span { display: block; width: 14px; height: 2px; border-radius: 2px; background: currentColor; }
/* Verkleinerte Kopfzeile beim Scrollen: Logo kleiner + nach links.
   Hysterese im JS (an >90, aus <40) verhindert Flackern. */
header.top.scrolled { padding: 0.3rem 0; box-shadow: 0 2px 12px rgba(0,0,0,0.12); }
header.top.scrolled .brand { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 56px; }
header.top.scrolled .logo { height: 32px; max-width: 260px; }
header.top.scrolled nav.main { margin-top: 0; margin-left: 1rem; gap: 1rem; font-size: 0.95rem; }
.social { margin: 1em 0; }
.social a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none;
}
.social a:hover { text-decoration: underline; }
.social svg { width: 1.2em; height: 1.2em; flex: none; }
header.top { position: sticky; top: 0; }
.hero { position: relative; max-width: 1100px; margin: 0 auto; padding: 0 1.2rem; }
.hero img { width: 100%; height: auto; display: block; border-radius: 0; }
.hero-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem;
}
.hero-text h1 {
  color: #fff; font-family: var(--serif); font-size: 2rem; margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.overlay-img { position: relative; }
.overlay-img h2.img-title {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--serif); font-size: 2rem; margin: 0; border: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.gbadge {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 20;
  width: 340px; max-width: calc(100vw - 2rem);
  background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 0; padding: 0.6rem 0.9rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25); font-size: 0.85rem;
  line-height: 1.35; display: flex; align-items: center; gap: 0.6rem;
}
.gbadge .stars { color: #fb8c00; letter-spacing: 0.1em; }
.g-logo { display: inline-flex; line-height: 0; }
.g-logo svg { width: 36px; height: 36px; }
.g-logo-link { display: inline-flex; line-height: 0; border-radius: 50%; outline: 2px solid var(--line); outline-offset: 5px; }
.g-logo-link:hover, .g-logo-link:focus-visible { outline-color: #b49b57; }
.g-text { color: var(--fg); text-decoration: none; }
.g-text:hover strong { text-decoration: underline; }
/* Kleines Bewertungs-Fenster */
.rmodal {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(0,0,0,0.55);
}
.rmodal[hidden] { display: none; }
.rbox {
  position: fixed; right: 1rem; bottom: 5.2rem; width: 340px; max-width: calc(100vw - 2rem);
  max-height: 60vh; overflow: auto;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3); padding: 1rem 1.1rem;
}
.rhead { display: flex; align-items: center; gap: 0.6rem; }
.rhead a { margin-left: auto; font-size: 0.85rem; white-space: nowrap; }
#reviewClose {
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
  border-radius: 0; width: 2rem; height: 2rem; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
#reviewRefresh {
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
  border-radius: 0; padding: 0.3rem 0.8rem; cursor: pointer; font-size: 0.85rem; margin-top: 0.3rem;
}
.rcard .rtext {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rcard.open .rtext { display: block; }
.rdots {
  background: none; border: 0; color: var(--fg);
  cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0.2rem 0;
}
.rdate { color: var(--muted); font-size: 0.8rem; }
.rmeta .stars { color: #fb8c00; }
.rsync { color: var(--muted); font-size: 0.8rem; }
.rlist { display: grid; gap: 0.7rem; margin-top: 0.6rem; }
.rcard { background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 0.6rem 0.8rem; }
.rcard p { margin: 0.3em 0; }
.rcard .stars { color: #fb8c00; }
.rnote { color: var(--muted); font-size: 0.9rem; }
.center { text-align: center; }
section { padding: 0.5cm 0; }
main > section:first-child { padding-top: 1cm; }
#ueber-uns h2 { margin-bottom: 1cm; }
h1 { font-size: 1.9rem; margin: 0.4rem 0; font-family: var(--serif); }
h2 { font-size: 1.4rem; border-bottom: 3px solid var(--accent); padding-bottom: 0.25rem; font-family: var(--serif); }
h2.plain { border-bottom: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: center; }
/* Mobil-Regeln stehen am Dateiende, damit sie immer gewinnen. */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 0; padding: 1rem 1.2rem;
}
img.block { width: 100%; height: auto; border-radius: 0; }
.gap-top { margin-top: 1cm; }
img.block.img-10 {
  width: min(378px, 100%); aspect-ratio: 1 / 1; object-fit: cover;
  display: block; margin-left: auto; margin-right: auto;
}
.kontakt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
/* Wisch-Galerie: Touch nativ, schmale Buttons für Desktop */
.galerie-wrap { position: relative; }
.galerie {
  display: flex; gap: 0.8rem; overflow-x: auto; flex: 1; align-items: center;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  padding-bottom: 0.3rem;
}
.galerie::-webkit-scrollbar { height: 8px; }
.galerie::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; }
.galerie::-webkit-scrollbar-track { background: transparent; }
.gabstand { flex: none; scroll-snap-align: none; }
.galerie img {
  flex: none; height: 300px; width: auto;
  border-radius: 0; scroll-snap-align: center;
}
.gprev, .gnext {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 1.7rem; height: 3.4rem; border-radius: 0; border: 0;
  background: rgba(0,0,0,0.45); color: #fff; opacity: 0.65;
  cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.gprev:hover, .gnext:hover { opacity: 1; }
.gprev { left: 0.4rem; }
.gnext { right: 0.4rem; }
a { color: var(--fg); }
.btn {
  display: inline-block; border: 2px solid var(--accent); border-radius: 0;
  padding: 0.45rem 1rem; text-decoration: none; font-weight: 700; margin-top: 0.5rem;
}
footer {
  border-top: 2px solid var(--accent); margin-top: 0.5cm;
  padding: 1rem 0 2rem; color: var(--muted); font-size: 0.9rem;
}
footer nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
footer nav a { color: var(--muted); text-decoration: none; }
footer nav a:hover { text-decoration: underline; }
.hinweis {
  border: 2px dashed var(--accent); border-radius: 0;
  padding: 1rem 1.2rem; margin: 1rem 0;
}
/* Rechtseiten: keine Trennlinien, dafür Luft und klare Abstufung */
.recht h2 { border-bottom: none; padding-bottom: 0; margin: 2.2rem 0 0.6rem; }
.recht h2.plain { border-bottom: none; }
.recht h3 { margin: 1.6rem 0 0.5rem; }
.recht p, .recht ul { margin: 0.6rem 0; }
.recht ul { padding-left: 1.4rem; }
.recht main section { max-width: 820px; }

/* Weiche Seitenwechsel: nur der Mittelteil blendet um, Kopf und Fuss bleiben stehen. */
.hero, main { transition: opacity 0.18s ease; }
body.seiten-wechsel .hero, body.seiten-wechsel main { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero, main { transition: none; } }
html.seiten-starr header.top, html.seiten-starr header.top .brand, html.seiten-starr .logo { transition: none !important; }

/* Mobil bis 760px, am Dateiende damit jede Regel gewinnt. */
@media (max-width: 760px) {
  .grid2 { grid-template-columns: 1fr; }
  .hero-text h1, .overlay-img h2.img-title { font-size: 1.5rem; }
  /* Kopfzeile mobil: Logo links, Suche + Schalter + Burger rechts, Menü als Panel */
  header.top .brand { min-height: 0; padding-top: 0; gap: 0.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .logo-link { justify-self: start; min-width: 0; grid-column: 1; grid-row: 1; }
  .logo { height: 52px; max-width: 100%; }
  .topbar { position: static; order: 0; margin: 0; justify-self: end; grid-column: 2; grid-row: 1; }
  #siteSearch { width: 80px; flex: none; }
  #menueBtn { display: inline-flex; }
  /* Mehr Luft zwischen Kopfzeile und Willkommen-Bild */
  .hero { padding-top: 1.1rem; }
  /* Anker mobil auf Bildoberkante, Landung direkt unter der Kopfzeile */
  .overlay-img .anker, .anker-wrap .anker { top: 0; }
  section[id], div[id], .img-title[id], .anker { scroll-margin-top: 80px; }
  /* Menü-Panel: zu, öffnet per Burger */
  nav.main, header.top .brand nav.main, header.top.scrolled nav.main {
    display: none; grid-column: 1 / -1; grid-template-columns: 1fr;
    gap: 0; margin: 0.2rem 0 0; text-align: center; font-size: 1.05rem;
  }
  nav.main.offen, header.top .brand nav.main.offen, header.top.scrolled nav.main.offen { display: grid; }
  nav.main a { padding: 0.55rem 0; }
  .galerie img { height: 200px; }
  /* Fusszeile bleibt wie sie ist, nur Luft fürs Badge */
  footer { padding-bottom: 5.75rem; }
  .gbadge { left: 50%; right: auto; transform: translateX(-50%); }
  .rbox { left: 50%; right: auto; transform: translateX(-50%); }
}

/* ===== Runde Ecken und Glas, 23.10.2026 =====
   Farben und Schriften bleiben original, Gold aus dem Logo als feiner Akzent. Block als Einheit entfernbar. */
:root {
  --radius: 22px; --radius-s: 14px;
  --glas: rgba(255, 255, 255, 0.50); --glas-rand: rgba(255, 255, 255, 0.95);
  --glas-glanz: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0) 100%);
  --glas-schatten: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 14px 40px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 1);
  --glas-blur: saturate(170%) blur(26px);
  --glow: rgba(180, 155, 87, 0.40); --glow2: rgba(90, 90, 90, 0.14);
  --kopf: rgba(255, 255, 255, 0.72); --rand-klein: rgba(0, 0, 0, 0.10);
}
[data-theme="schwarz"] {
  --glas: rgba(28, 28, 28, 0.45); --glas-rand: rgba(255, 255, 255, 0.14);
  --glas-glanz: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0) 100%);
  --glas-schatten: 0 12px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --glow: rgba(180, 155, 87, 0.24); --glow2: rgba(127, 127, 127, 0.12);
  --kopf: rgba(0, 0, 0, 0.62); --rand-klein: rgba(255, 255, 255, 0.16);
}
/* Runde Ecken */
.hero img, img.block, .card, .rbox { border-radius: var(--radius); }
.galerie img, .rcard { border-radius: var(--radius-s); }
.overlay-img, .anker-wrap { border-radius: var(--radius); overflow: hidden; }
.overlay-img img, .anker-wrap img { display: block; }
#siteSearch, #themeBtn, #menueBtn, #reviewRefresh, .btn { border-radius: 999px; }
#reviewClose, .gprev, .gnext { border-radius: 50%; }
/* Glas für alles Schwebende: durchscheinend, unscharf, heller Rand, feiner Glanz */
/* Echte Unschärfe nur, wo etwas dahinter vorbeizieht; das hält das Scrollen flüssig. */
header.top, .gbadge, .rbox, .gprev, .gnext {
  -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur);
}
header.top { background: var(--kopf); border-bottom: 1px solid var(--rand-klein); }
[data-theme="weiss"] .logo { mix-blend-mode: multiply; }
[data-theme="schwarz"] .logo { mix-blend-mode: screen; }
/* Hell-Dunkel und Menü wie das Google-Feld: Glanz, heller Rand, schwebender Schatten */
#themeBtn, #menueBtn, #reviewClose {
  background: var(--glas-glanz), var(--glas); border: 1px solid var(--glas-rand);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
[data-theme="schwarz"] #themeBtn, [data-theme="schwarz"] #menueBtn, [data-theme="schwarz"] #reviewClose {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.gbadge, .rbox, .kontakt-grid .card {
  background: var(--glas-glanz), var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--glas-schatten);
}
.gbadge { border-radius: 18px; }
.rcard { background: var(--glas); border: 1px solid var(--glas-rand); }
.gprev, .gnext {
  width: 2.6rem; height: 2.6rem; opacity: 0.9; color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.08)), rgba(20, 20, 20, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 6px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.5);
}
/* Kontakt: sanfter goldener Schimmer hinter den Glaskästen, damit das Glas sichtbar wird */
.kontakt-grid { position: relative; isolation: isolate; }
.kontakt-grid::before {
  content: ""; position: absolute; inset: -12% -4%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 60% at 18% 40%, var(--glow), transparent 70%),
    radial-gradient(35% 55% at 82% 65%, var(--glow), transparent 70%),
    radial-gradient(30% 50% at 50% 20%, var(--glow2), transparent 70%);
}
/* Startbild: Titel mit zwei Glasknöpfen darunter */
.hero-text { flex-direction: column; gap: 1.1rem; }
.hero-cta { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin: 0; }
.glas-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-width: 11rem; padding: 0.85rem 1.7rem; border-radius: 999px;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 1.15rem; letter-spacing: 0.01em;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%), rgba(255,255,255,0.08);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 26px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(255,255,255,0.10);
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
.glas-knopf svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glas-knopf:hover { border-color: var(--gold); background: linear-gradient(135deg, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.06) 100%), rgba(255,255,255,0.12); }
.glas-knopf:active { transform: scale(0.97); }
.glas-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .glas-knopf { transition: none; } }
@media (max-width: 760px) {
  :root { --radius: 16px; --radius-s: 12px; }
  /* Handy: Kopfleiste und Menü als Glas wie das Google-Feld */
  header.top { background: var(--glas-glanz), var(--glas); border-bottom: 1px solid var(--glas-rand); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); }
  [data-theme="schwarz"] header.top { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
  nav.main.offen, header.top .brand nav.main.offen, header.top.scrolled nav.main.offen {
    background: var(--glas-glanz), var(--glas); border: 1px solid var(--glas-rand);
    border-radius: var(--radius); box-shadow: var(--glas-schatten); padding: 0.4rem 0; margin-bottom: 0.4rem;
  }
  /* Knöpfe im gleichen Verhältnis zum Bild wie am Laptop, das Foto bleibt sichtbar */
  .hero-text { gap: 0.4rem; }
  .hero-cta { gap: 0.4rem; }
  .glas-knopf { min-width: 0; padding: 0.2rem 0.5rem; gap: 0.25rem; font-size: 0.56rem; box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.6); }
  .glas-knopf svg { width: 1em; height: 1em; }
}

/* Kein Blitzen beim Antippen oder Anklicken, Tastatur-Fokus bleibt sichtbar */
a, button { -webkit-tap-highlight-color: transparent; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible), main:focus { outline: none; }
/* Große Bildschirme: etwas breiter und größer, bleibt aber ruhig in der Mitte */
@media (min-width: 1700px) { .wrap, .hero { max-width: 1240px; } }
@media (min-width: 2200px) { html { font-size: 17.5px; } .wrap, .hero { max-width: 1400px; } }

/* Heller Modus: klares Glas auf Weiß, ohne Gelbstich.
   Weißer Grund, darunter nur ein sehr feiner kühler Grauschimmer, die Kästen wie Milchglasplatten. */
[data-theme="weiss"] .kontakt-grid::before {
  inset: -10% -3%;
  background:
    radial-gradient(38% 60% at 16% 45%, rgba(120, 130, 145, 0.10), transparent 70%),
    radial-gradient(34% 55% at 84% 60%, rgba(120, 130, 145, 0.09), transparent 70%);
}
[data-theme="weiss"] .kontakt-grid .card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 249, 251, 0.78) 55%, rgba(242, 244, 247, 0.70) 100%);
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow:
    0 0 0 1px rgba(20, 30, 45, 0.06),
    0 18px 44px rgba(20, 30, 45, 0.09),
    0 2px 6px rgba(20, 30, 45, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(20, 30, 45, 0.03);
}