/* About us and local services: shared by all three language versions. */
.info-hero h1 {
  max-width: 100%;
  font-size: clamp(32px, 5.7vw, 72px);
}
.about-story { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.about-copy h2 { margin-bottom: 28px; font-size: clamp(28px, 3.7vw, 46px); }
.about-copy p { margin: 0 0 24px; font-size: 18px; line-height: 1.8; color: #425e56; }
.about-copy .about-mission { margin: 32px 0; padding: 24px; border-left: 4px solid var(--coral); border-radius: 0 12px 12px 0; background: #edf3ed; color: var(--forest); font-weight: 600; }
/* Keep the complete 3:4 photo below the header, including on short screens. */
.about-landscape { position: sticky; top: var(--anchor-offset); justify-self: end; width: 100%; max-width: calc((100svh - var(--anchor-offset) - 24px) * .75); margin: 0; }
.about-landscape img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
.world-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.world-card { grid-column: span 2; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.world-card:nth-child(n+4) { grid-column: span 3; }
.world-card > img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.world-card-copy { flex: 1; display: flex; flex-direction: column; align-items: start; padding: clamp(20px, 2vw, 28px); }
.world-card-copy .section-kicker { margin-bottom: 12px; font-size: 12px; color: #b4422c; }
.world-card h3 { font-size: clamp(22px, 2.2vw, 28px); }
.world-card-copy > p:not(.section-kicker) { color: var(--muted); margin: 18px 0; }
.world-card-actions { display: flex; flex-wrap: wrap; gap: 4px 20px; width: 100%; margin-top: auto; }
.world-card-actions .text-link { max-width: 100%; min-height: 44px; padding: 10px 0; }
.local-services-section { background: linear-gradient(180deg, #fffaf0, #f1f5ef); }
.service-category-card { min-width: 0; }
.service-category-count { color: var(--muted); font-size: 14px; }
.service-category-card small { line-height: 1.5; }
.service-jump-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.service-jump-links a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 10px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--forest); font-size: 14px; font-weight: 700; }
.service-jump-links a:hover { border-color: var(--lake); background: #e8f2ed; }
.service-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.service-detail { display: flex; flex-direction: column; min-width: 0; padding: clamp(18px, 2.5vw, 32px); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(16, 35, 31, .05); }
.service-detail-copy { margin-bottom: 24px; }
.service-detail h2 { font-size: clamp(23px, 2.5vw, 30px); }
.service-detail address { margin: 16px 0; font-style: normal; color: var(--muted); }
.service-contacts { display: grid; gap: 10px; margin: 20px 0; }
.service-contacts > div { min-width: 0; }
.service-contacts dt { color: var(--muted); font-size: 13px; font-weight: 600; }
.service-contacts dd { margin: 0; min-width: 0; }
.service-contacts a { display: inline-block; max-width: 100%; padding: 5px 0; color: var(--forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.service-detail .text-link { padding: 10px 0; }
/* Let whole day names reserve their space before the opening-hour column. */
.opening-hours { width: 100%; margin-top: auto; border-collapse: collapse; table-layout: auto; font-size: 15px; }
.opening-hours caption { padding: 0 0 12px; text-align: left; color: var(--forest); font-size: 19px; font-weight: 800; }
.opening-hours th, .opening-hours td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.opening-hours th:first-child { width: 34%; padding-right: 12px; }
.opening-hours thead th { color: var(--muted); font-size: 12px; font-weight: 600; }
.opening-hours tbody th { font-weight: 600; }
.hours-slots { display: flex; flex-wrap: wrap; gap: 3px 16px; }
.hours-slot { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hours-closed { color: #855448; }
.service-detail:target { border-color: var(--lake); }
.service-jump-links a:focus-visible, .world-card a:focus-visible, .service-detail a:focus-visible { outline: 3px solid var(--lake); outline-offset: 4px; border-radius: 4px; }
.planning-page .directory-card { min-width: 0; }
.directory-status { margin: 0 0 24px; padding: 18px; border-left: 3px solid var(--lake); border-radius: 0 8px 8px 0; background: #edf3ed; color: var(--forest); }
.directory-status:empty { display: none; }
@media (max-width: 980px) {
  .about-story { grid-template-columns: minmax(0, 1fr); }
  .about-landscape { position: static; max-width: none; }
  .about-landscape img { max-height: 400px; aspect-ratio: 16 / 9; }
  .world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .world-card, .world-card:nth-child(n+4) { grid-column: auto; }
  .world-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .world-card:last-child > img { height: 100%; }
}
@media (max-width: 760px) {
  .service-detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  /* Fit long German service names without splitting or clipping words. */
  html[lang="de"] .services-page .info-hero h1 { font-size: clamp(20px, 7.5vw, 44px); }
}
@media (max-width: 600px) {
  .world-grid { grid-template-columns: minmax(0, 1fr); }
  .world-card:last-child { display: flex; grid-column: auto; }
  .world-card:last-child > img { height: auto; }
  .about-copy p { font-size: 17px; }
  .about-copy .about-mission { padding: 18px; }
  .service-list-section { padding-top: 36px; }
  .service-jump-links { gap: 8px; }
  .service-jump-links a { font-size: 13px; padding: 8px 12px; }
}
@media (max-width: 360px) {
  .opening-hours { font-size: 14px; }
  .opening-hours th:first-child { width: 38%; padding-right: 8px; }
}
@media (max-width: 279px) {
  html[lang="de"] .services-page .info-hero h1 { font-size: clamp(18px, 7.5vw, 20px); }
  .service-detail { padding: 12px; }
  .service-contacts a { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-category-card { transition: none; }
}