/* ============================================================
   utilities.css – Responsive Breakpoints & sonstige Helfer
   Hospiz Sankt Katharina
   ============================================================ */

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb             { background: rgba(0,0,0,.06); padding: .75rem 0; font-size: .82rem; }
.breadcrumb__list       { list-style: none; padding: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.breadcrumb__list li + li::before { content: '›'; color: var(--color-text-muted); }
.breadcrumb__list a     { color: var(--color-amber); }

/* ── Responsive ──────────────────────────────────────────────── */

/* Tablet / kleiner Desktop */
@media (max-width: 1100px) {
  .footer-grid                   { grid-template-columns: 1fr 1fr; }
  .footer-grid > *:first-child   { grid-column: 1 / -1; }
}

/* Tablet */
@media (max-width: 900px) {
  :root { --section-py: 60px; }

  .nav-menu, .nav-cta { display: none; }
  .nav-toggle          { display: flex; }

  .grid-4              { grid-template-columns: repeat(2, 1fr); }
  .grid-3              { grid-template-columns: repeat(2, 1fr); }
  .split               { grid-template-columns: 1fr; }
  .split__img img      { height: 300px; }
  .split--reverse      { direction: ltr; }
  .steps               { grid-template-columns: 1fr; }
  .membership-cards    { grid-template-columns: 1fr; }
  .quote-layout        { grid-template-columns: 1fr; }
  .quote-layout__img   { width: 100%; }
  .quote-layout__img img { width: 100%; height: 260px; object-fit: cover; }
}

/* Mobil */
@media (max-width: 640px) {
  :root { --nav-height: 68px; --section-py: 48px; }

  .grid-2, .grid-3, .grid-4    { grid-template-columns: 1fr; }
  .footer-grid                  { grid-template-columns: 1fr; }
  .footer-grid > *:first-child  { grid-column: auto; }

  .home-hero    { max-height: 600px; }
  .page-hero    { height: 260px; }
  .page-hero--tall { height: 320px; }

  .bank-detail               { grid-template-columns: 1fr; }
  .bank-detail dt            { margin-top: .75rem; }
  .bank-detail dt:first-child { margin-top: 0; }

  .footer-bottom  { flex-direction: column; text-align: center; }
  #back-to-top    { bottom: 20px; right: 20px; }

  .carousel-track img   { height: 260px; }

  .cookie-inner   { padding: 0 20px; }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1; justify-content: center; }
}