/* =============================================================
   Café in der hofmarkt — styles.css
   Ein zentrales Stylesheet, alle Design-Tokens als CSS-Variablen.
   Reihenfolge: Tokens · Reset · Basis · Utilities · Komponenten · Responsive
   ============================================================= */

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Farben — Sage */
  --sage:#747A64; --sage-700:#5C6150; --sage-800:#474B3D; --sage-900:#33362B;
  --sage-300:#A7AB99; --sage-200:#C6C9BB; --sage-100:#E4E5DD; --sage-50:#F1F2EC;
  /* Farben — Kaffee/Akzent */
  --roast:#6B4A33; --roast-600:#855E43;
  --crema:#C9A57E; --crema-200:#E7D4BE;
  /* Flächen */
  --paper:#F7F2E7; --paper-card:#FCF9F1; --paper-deep:#EFE7D4;
  /* Text */
  --ink:#33362B; --ink-soft:#5C6150; --ink-faint:#8A8C7C;
  /* Linien & Status */
  --line:#DED6C2; --white:#FFFFFF;
  --success:#5E7A4E; --warning:#C98A2B; --danger:#B4503C; --info:#5E7488;

  /* Schrift */
  --font-display:"Baloo 2", system-ui, "Segoe UI", sans-serif;
  --font-hand:"Caveat", "Segoe Script", cursive;
  --font-body:"Nunito", system-ui, "Segoe UI", sans-serif;

  /* Typo-Skala */
  --fs-display:clamp(2.25rem, 7vw, 4.5rem);
  --fs-h1:clamp(2rem, 5vw, 2.5rem);
  --fs-h2:clamp(1.6rem, 3.6vw, 1.875rem);
  --fs-h3:1.375rem;
  --fs-lead:clamp(1.125rem, 2.2vw, 1.25rem);
  --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.75rem;

  /* Radien */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;
  /* Schatten */
  --shadow-sm:0 1px 2px rgba(51,54,43,.06), 0 1px 3px rgba(51,54,43,.08);
  --shadow-md:0 4px 12px rgba(51,54,43,.08), 0 2px 4px rgba(51,54,43,.06);
  --shadow-lg:0 14px 34px rgba(51,54,43,.12), 0 4px 10px rgba(51,54,43,.07);
  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* Layout */
  --container:1140px;
  --header-h:72px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }
body {
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img, picture, svg, video { display:block; max-width:100%; }
img { height:auto; }
a { color:var(--roast); text-underline-offset:3px; }
a:hover { color:var(--roast-600); }
ul, ol { padding:0; list-style:none; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
:focus-visible { outline:3px solid var(--sage); outline-offset:2px; border-radius:2px; }

/* ---------- 3. Basis-Typografie ---------- */
h1, h2, h3, h4 { font-family:var(--font-display); font-weight:700; line-height:1.12; color:var(--ink); letter-spacing:-.01em; }
h1 { font-size:var(--fs-h1); }
h2 { font-size:var(--fs-h2); }
h3 { font-size:var(--fs-h3); }
p { max-width:68ch; }

/* ---------- 4. Utilities ---------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px, 5vw, 40px); }
.section { padding-block:clamp(48px, 9vw, 96px); }
.section--tint { background:var(--sage-50); }
.section--deep { background:var(--paper-deep); }
.section__head { max-width:62ch; margin-bottom:var(--sp-7); }
.section--center .section__head { margin-inline:auto; text-align:center; }
.eyebrow { font-family:var(--font-hand); font-size:1.5rem; line-height:1; color:var(--roast-600); display:block; margin-bottom:var(--sp-2); }
.lead { font-size:var(--fs-lead); color:var(--ink-soft); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:var(--sp-3); top:-60px; z-index:1000; background:var(--roast); color:var(--white); padding:var(--sp-3) var(--sp-5); border-radius:var(--r-pill); box-shadow:var(--shadow-md); transition:top .2s ease; }
.skip-link:focus { top:var(--sp-3); color:var(--white); }

/* ---------- 5. Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-display); font-weight:600; font-size:1rem; line-height:1;
  padding:14px 26px; border-radius:var(--r-pill); border:2px solid transparent;
  text-decoration:none; white-space:nowrap; transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn--primary { background:var(--roast); color:var(--white); box-shadow:var(--shadow-sm); }
.btn--primary:hover { background:var(--roast-600); color:var(--white); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--ghost { background:transparent; color:var(--roast); border-color:var(--crema); }
.btn--ghost:hover { background:var(--paper-card); border-color:var(--roast); color:var(--roast); transform:translateY(-2px); }
.btn--light { background:var(--paper); color:var(--ink); box-shadow:var(--shadow-sm); }
.btn--light:hover { background:var(--white); color:var(--ink); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--sm { padding:10px 18px; font-size:var(--fs-sm); }

/* ---------- 6. Header / Navigation ---------- */
.site-header { position:sticky; top:0; z-index:100; transition:background-color .3s ease, box-shadow .3s ease, border-color .3s ease; border-bottom:1px solid transparent; }
.site-header.is-scrolled { background:rgba(247,242,231,.92); backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px); box-shadow:var(--shadow-sm); border-bottom-color:var(--line); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); min-height:var(--header-h); }
.brand { display:inline-flex; align-items:center; text-decoration:none; }
.brand__logo { height:44px; width:auto; display:block; }

.nav__links { display:flex; align-items:center; gap:var(--sp-2); }
.nav__links a:not(.btn) { font-family:var(--font-display); font-weight:500; font-size:1rem; color:var(--ink-soft); text-decoration:none; padding:8px 12px; border-radius:var(--r-pill); transition:color .15s ease, background-color .15s ease; }
.nav__links a:not(.btn):hover { color:var(--ink); background:var(--sage-100); }
.nav__links a:not(.btn).is-active { color:var(--roast); background:var(--crema-200); }
.nav__cta { margin-left:var(--sp-2); }

.nav__toggle { display:none; width:46px; height:46px; border-radius:12px; align-items:center; justify-content:center; }
.nav__toggle:hover { background:var(--sage-100); }
.nav__toggle .bars, .nav__toggle .bars::before, .nav__toggle .bars::after { content:""; display:block; width:24px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav__toggle .bars::before { transform:translateY(-7px); }
.nav__toggle .bars::after { transform:translateY(4.5px); }
.nav__toggle[aria-expanded="true"] .bars { background:transparent; }
.nav__toggle[aria-expanded="true"] .bars::before { transform:translateY(0) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .bars::after { transform:translateY(-2.5px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero { padding-block:clamp(40px, 7vw, 88px) clamp(48px, 9vw, 96px); }
.hero__grid { display:grid; gap:clamp(28px, 5vw, 56px); align-items:center; }
.hero__title { font-size:var(--fs-h1); margin-bottom:var(--sp-4); }
.hero__accent { display:block; font-family:var(--font-hand); font-weight:600; font-size:var(--fs-display); line-height:.95; color:var(--roast); margin-bottom:var(--sp-2); overflow-wrap:break-word; }
/* Grid-/Flex-Kinder dürfen unter ihre min-content-Breite schrumpfen (kein horizontaler Overflow auf schmalen Screens) */
.hero__grid > *, .story > *, .contact-grid > *, .offer-grid > *, .package-grid > *, .team-grid > *, .logo-grid > *, .foerder-grid > * { min-width:0; }
.hero__text { font-size:var(--fs-lead); color:var(--ink-soft); margin-bottom:var(--sp-6); }
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.hero__media { position:relative; }

/* ---------- 8. Foto-Platzhalter (bis Originalfotos vorliegen) ---------- */
.ph { display:grid; place-items:center; text-align:center; gap:var(--sp-2);
  background:linear-gradient(135deg, var(--crema-200), var(--sage-100));
  color:var(--ink-soft); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); padding:var(--sp-5); min-height:200px; }
.ph__note { font-family:var(--font-hand); font-size:1.4rem; color:var(--roast-600); }
.ph__cup { width:84px; height:84px; opacity:.9; }
.ph--hero { aspect-ratio:4/3; min-height:0; box-shadow:var(--shadow-lg); }
.ph--wide { aspect-ratio:16/9; min-height:0; }
.ph--tile { aspect-ratio:4/3; min-height:0; border-radius:0; border:none; }
.ph--round { aspect-ratio:1; border-radius:var(--r-pill); min-height:0; }

/* ---------- 8b. Echte Fotos ---------- */
.media-photo { width:100%; height:auto; display:block; border-radius:var(--r-lg); box-shadow:var(--shadow-md); object-fit:cover; }
.media-photo--hero { box-shadow:var(--shadow-lg); }
.team-banner { margin-bottom:var(--sp-7); }
.team-banner img { width:100%; height:auto; display:block; border-radius:var(--r-lg); box-shadow:var(--shadow-md); max-height:540px; object-fit:cover; object-position:center 30%; }
/* Team-Monogramm statt fremdem Gesicht (keine Falsch-Zuordnung) */
.avatar { width:92px; height:92px; border-radius:50%; display:grid; place-items:center; margin:0 auto var(--sp-3);
  font-family:var(--font-display); font-weight:800; font-size:2.2rem; line-height:1; color:var(--white);
  background:linear-gradient(135deg, var(--sage), var(--roast)); box-shadow:var(--shadow-sm); }
.avatar-photo { width:120px; height:120px; border-radius:50%; object-fit:cover; display:block; margin:0 auto var(--sp-3);
  box-shadow:var(--shadow-sm); background:var(--sage-100); }

/* ---------- 9. Angebot (Kacheln) ---------- */
.offer-grid { display:grid; gap:var(--sp-5); grid-template-columns:1fr; }
.offer-card { background:var(--paper-card); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:transform .2s ease, box-shadow .2s ease; }
.offer-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.offer-card__img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.offer-card__body { padding:var(--sp-5); }
.offer-card h3 { margin-bottom:var(--sp-2); }
.offer-card p { color:var(--ink-soft); font-size:var(--fs-sm); }

/* ---------- 10. Story-Blöcke ---------- */
.prose p + p { margin-top:var(--sp-4); }
.prose p { font-size:var(--fs-lead); color:var(--ink-soft); }
.story { display:grid; gap:clamp(24px,4vw,48px); align-items:center; }
.callout { background:var(--paper-card); border-left:5px solid var(--roast); border-radius:var(--r-md); padding:clamp(20px,4vw,36px); box-shadow:var(--shadow-sm); }

/* ---------- 11. Team ---------- */
.team-grid { display:grid; gap:var(--sp-5); grid-template-columns:repeat(2,1fr); }
.team-card { text-align:center; }
.team-card .ph { margin-bottom:var(--sp-3); }
.team-card h3 { font-size:1.15rem; }
.team-card p { color:var(--ink-soft); font-size:var(--fs-sm); max-width:none; }
.board { margin-top:var(--sp-7); background:var(--paper-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,4vw,36px); box-shadow:var(--shadow-sm); }
.board h3 { margin-bottom:var(--sp-4); }
.board__list { display:grid; gap:var(--sp-4) var(--sp-6); grid-template-columns:1fr; }
.board__list li { display:flex; flex-direction:column; gap:1px; padding-block:var(--sp-1); }
.board__list .name { font-weight:700; }
.board__list .role { color:var(--ink-soft); font-size:var(--fs-sm); }

/* ---------- 12. Mitglied-Band ---------- */
.member { background:linear-gradient(135deg, var(--sage-100), var(--crema-200)); border-radius:var(--r-xl); padding:clamp(28px,5vw,56px); text-align:center; box-shadow:var(--shadow-sm); }
.member__price { font-family:var(--font-display); font-weight:800; color:var(--roast); font-size:clamp(2rem,5vw,2.75rem); display:block; margin:var(--sp-4) 0; }
.member__price small { font-family:var(--font-body); font-weight:700; font-size:1rem; color:var(--ink-soft); }

/* ---------- 13. Sponsoren ---------- */
.sponsor-tier { margin-bottom:var(--sp-7); }
.sponsor-tier__label { display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-display); font-weight:700; font-size:1.15rem; margin-bottom:var(--sp-4); }
.dot { width:14px; height:14px; border-radius:50%; flex:0 0 auto; }
.dot--gold { background:#C9A02B; } .dot--silver { background:#9AA0A6; } .dot--bronze { background:#A9733F; }
.logo-grid { display:grid; gap:var(--sp-4); grid-template-columns:repeat(2,1fr); }
.logo-grid--gold { grid-template-columns:repeat(2,1fr); }
.sponsor-logo { background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); min-height:190px; display:grid; place-items:center; color:var(--ink-soft); font-size:var(--fs-sm); padding:var(--sp-4) var(--sp-5); text-align:center; box-shadow:var(--shadow-sm); }
.sponsor-logo img { max-height:150px; max-width:92%; width:auto; height:auto; object-fit:contain; }
.sponsor-name { font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink); line-height:1.25; overflow-wrap:break-word; word-break:break-word; }
.sponsor-name small { display:block; font-family:var(--font-body); font-weight:600; font-size:var(--fs-xs); color:var(--ink-soft); margin-top:2px; }

/* ---------- 13b. Förderung (LEADER) ---------- */
.section--foerderung { background:var(--sage-50); }
.foerder-grid { display:grid; gap:var(--sp-5); grid-template-columns:1fr; }
.foerder-card { background:var(--paper-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,4vw,32px); box-shadow:var(--shadow-sm); }
.foerder-card h3 { margin-bottom:var(--sp-4); }
.ziele { display:grid; gap:var(--sp-3); }
.ziele li { display:flex; gap:var(--sp-2); align-items:flex-start; color:var(--ink-soft); }
.ziele li::before { content:"✓"; color:var(--success); font-weight:800; flex:0 0 auto; }
.projektdaten { margin:0; }
.projektdaten dt { font-size:var(--fs-sm); color:var(--ink-soft); }
.projektdaten dd { margin:0 0 var(--sp-4); font-weight:600; overflow-wrap:break-word; }
.projektdaten dd:last-child { margin-bottom:0; }
.foerderlogoleiste { margin:var(--sp-5) 0 0; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-5); box-shadow:var(--shadow-sm); text-align:center; }
.foerderlogoleiste img { width:100%; height:auto; max-width:1000px; margin-inline:auto; display:block; }
.leader-hinweis { margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--ink-soft); }

/* ---------- 14. Sponsor-Pakete ---------- */
.package-grid { display:grid; gap:var(--sp-5); grid-template-columns:1fr; }
.package { display:flex; flex-direction:column; background:var(--paper-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,4vw,32px); box-shadow:var(--shadow-sm); }
.package--featured { border-color:var(--crema); box-shadow:var(--shadow-md); position:relative; }
.package__tier { font-family:var(--font-display); font-weight:700; font-size:1.3rem; }
.package__price { font-family:var(--font-display); font-weight:800; color:var(--roast); font-size:2rem; margin:var(--sp-2) 0 var(--sp-4); }
.package ul { display:grid; gap:var(--sp-3); margin-bottom:var(--sp-5); flex:1; }
.package li { display:flex; gap:var(--sp-2); align-items:flex-start; color:var(--ink-soft); font-size:var(--fs-sm); }
.package li::before { content:"✓"; color:var(--success); font-weight:800; flex:0 0 auto; }
.badge { position:absolute; top:-13px; right:24px; background:var(--roast); color:var(--white); font-family:var(--font-display); font-weight:600; font-size:var(--fs-xs); padding:6px 14px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm); }

/* ---------- 15. Öffnungszeiten ---------- */
.hours { max-width:520px; margin-inline:auto; background:var(--paper-card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.hours__row { display:flex; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-4) clamp(18px,4vw,28px); border-bottom:1px solid var(--line); }
.hours__row:last-child { border-bottom:none; }
.hours__row .day { font-weight:700; }
.hours__row .time { color:var(--ink-soft); text-align:right; white-space:nowrap; }
.hours__row--closed .time { white-space:normal; }
.hours__row--closed { background:var(--sage-50); }
.hours__row--closed .time { color:var(--danger); font-weight:700; }

/* ---------- 16. FAQ ---------- */
.faq { max-width:780px; }
.faq__item { background:var(--paper-card); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--sp-3); overflow:hidden; }
.faq__item summary { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-5); font-family:var(--font-display); font-weight:600; font-size:1.05rem; cursor:pointer; list-style:none; }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary::after { content:"+"; font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--roast); line-height:1; transition:transform .2s ease; flex:0 0 auto; }
.faq__item[open] summary::after { content:"–"; }
.faq__item summary:hover { background:var(--sage-50); }
.faq__answer { padding:0 var(--sp-5) var(--sp-5); color:var(--ink-soft); }
.faq__answer p { max-width:none; }

/* ---------- 17. Kontakt / Map / Footer ---------- */
.contact-grid { display:grid; gap:clamp(24px,4vw,48px); }
.contact-list { display:grid; gap:var(--sp-4); }
.contact-list li { display:flex; gap:var(--sp-3); align-items:flex-start; }
.contact-list .ic { width:24px; height:24px; flex:0 0 auto; color:var(--roast); margin-top:2px; }
.contact-list a { font-weight:700; text-decoration:none; }
.contact-list a:hover { text-decoration:underline; }
.map-card { background:var(--paper-card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.map-card .ph { border:none; border-radius:0; min-height:240px; }
.map-card__bar { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; justify-content:space-between; padding:var(--sp-4) var(--sp-5); }
.map-card__bar address { font-style:normal; color:var(--ink-soft); font-size:var(--fs-sm); }

.site-footer { background:var(--sage-900); color:var(--sage-200); padding-block:var(--sp-8) var(--sp-6); margin-top:var(--sp-2); }
.site-footer a { color:var(--sage-100); text-decoration:none; }
.site-footer a:hover { color:var(--white); text-decoration:underline; }
.footer-grid { display:grid; gap:var(--sp-7); grid-template-columns:1fr; margin-bottom:var(--sp-7); }
.footer-grid h2 { color:var(--white); font-size:1.1rem; margin-bottom:var(--sp-4); }
.footer-col p, .footer-col li { font-size:var(--fs-sm); margin-bottom:var(--sp-2); }
.footer-brand { display:inline-block; margin-bottom:var(--sp-4); }
.footer-logo { height:46px; width:auto; display:block; }
.social-row { display:flex; gap:var(--sp-3); margin-top:var(--sp-3); }
.social-row a { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--sage-800); }
.social-row a:hover { background:var(--roast); }
.social-row svg { width:22px; height:22px; }
.footer-bottom { border-top:1px solid var(--sage-800); padding-top:var(--sp-5); font-size:var(--fs-sm); display:grid; gap:var(--sp-2); }
.footer-bottom .credit { color:var(--sage-300); }

/* ---------- 18. Back-to-top ---------- */
.to-top { position:fixed; right:clamp(16px,4vw,28px); bottom:clamp(16px,4vw,28px); z-index:90; width:48px; height:48px; border-radius:50%; background:var(--roast); color:var(--white); display:grid; place-items:center; box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease; }
.to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover { background:var(--roast-600); }
.to-top svg { width:22px; height:22px; }

/* ---------- 19. Speisekarte ---------- */
.menu-intro { max-width:60ch; }
.menu-nav { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-7); }
.menu-nav a { font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm); text-decoration:none; color:var(--roast); background:var(--paper-card); border:1px solid var(--line); padding:8px 16px; border-radius:var(--r-pill); }
.menu-nav a:hover { background:var(--crema-200); }
.menu-section { margin-bottom:var(--sp-8); }
.menu-section > h2 { display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-5); padding-bottom:var(--sp-3); border-bottom:2px solid var(--crema); }
.menu-list { display:grid; gap:var(--sp-2); max-width:760px; }
.menu-item { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:var(--sp-2); padding:var(--sp-3) 0; border-bottom:1px dashed var(--line); }
.menu-item__name { font-family:var(--font-display); font-weight:600; }
.menu-item__desc { display:block; font-size:var(--fs-sm); color:var(--ink-soft); font-family:var(--font-body); font-weight:400; }
.menu-item__price { font-family:var(--font-display); font-weight:700; color:var(--roast); white-space:nowrap; }
.menu-empty { color:var(--ink-soft); font-style:italic; }
.menu-note { color:var(--ink-soft); font-size:var(--fs-sm); font-style:italic; margin-top:var(--sp-4); }
.menu-foot { color:var(--ink-faint); font-size:var(--fs-sm); margin-top:var(--sp-6); }

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .offer-card:hover, .btn:hover, .to-top { transform:none; }
}

/* ---------- 21. Responsive ---------- */
@media (max-width:859px) {
  .nav__links { position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:var(--sp-1);
    background:var(--paper-card); border-top:1px solid var(--line); box-shadow:var(--shadow-lg);
    padding:var(--sp-4) clamp(20px,5vw,40px) var(--sp-6); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
  .nav__links.is-open { opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav__links a:not(.btn) { padding:14px 12px; font-size:1.1rem; border-radius:var(--r-md); }
  .nav__cta .btn { width:100%; }
  .nav__cta { margin:var(--sp-2) 0 0; }
  .nav__toggle { display:inline-flex; }
}
@media (min-width:600px) {
  .offer-grid { grid-template-columns:repeat(2,1fr); }
  .logo-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
  .board__list { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:860px) {
  .hero__grid { grid-template-columns:1.05fr .95fr; }
  .offer-grid { grid-template-columns:repeat(4,1fr); }
  .team-grid { grid-template-columns:repeat(2,1fr); max-width:520px; margin-inline:auto; }
  .story { grid-template-columns:1fr 1fr; }
  .story--reverse > :first-child { order:2; }
  .package-grid { grid-template-columns:repeat(3,1fr); }
  .logo-grid--gold { grid-template-columns:repeat(4,1fr); }
  .contact-grid { grid-template-columns:1fr 1.1fr; align-items:start; }
  .foerder-grid { grid-template-columns:1fr 1fr; }
}