/* Grundlayout: volle Inhaltsbreite auf der Startseite. */
.hgn { margin: 36px auto; width: 100%; max-width: none; min-width: 0; color: #17212d; }
.hgn, .hgn * { box-sizing: border-box; }
.hgn h2 { text-align: center; font-size: 24px; margin: 0 0 20px; }
.hgn .hgn-note, .hgn .hgn-status { font-size: 13px; text-align: center; }
.hgn .hgn-note { margin: 8px 0 20px; }
.hgn .hgn-status:empty { display: none; }
/* Standort erst auf Knopfdruck bestimmen. */
.hgn .hgn-locate { display: block; width: fit-content; max-width: 100%; margin: 16px auto 0; background: #1e73be; color: #fff; border: 0; border-radius: 10px; padding: 12px 18px; font: inherit; cursor: pointer; }
.hgn .hgn-locate:disabled { opacity: .65; cursor: wait; }
/* Horizontale Scrollspur mit natürlicher Wischbedienung. */
.hgn .hgn-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 12px; scrollbar-width: thin; }
.hgn .hgn-card { display: block; flex: 0 0 calc((100% - 32px) / 3); min-width: 0; scroll-snap-align: start; background: #fff; color: inherit; border-radius: 14px; overflow: hidden; text-decoration: none; border: 1px solid #e5e9ed; }
/* Kleine Bilder; Titel darunter bleibt auch bei langen Ortsnamen lesbar. */
.hgn .hgn-media { height: 200px; background: #1e73be; }
.hgn .hgn-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hgn .hgn-placeholder { display: grid; place-items: center; height: 100%; font-size: 64px; color: #fff; }
.hgn .hgn-body { padding: 12px 14px; }
.hgn .hgn-body h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.35; color: #17212d; overflow-wrap: anywhere; }
.hgn .hgn-body p { margin: 0 0 6px; font-size: 13px; overflow-wrap: anywhere; }
.hgn .hgn-category { color: #596874; }
.hgn .hgn-distance { color: #1e73be; font-weight: 600; }
.hgn .hgn-card:hover { border-color: #1e73be; }
/* Pfeile nur anzeigen, wenn wirklich horizontal geblättert werden kann. */
.hgn .hgn-controls { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.hgn .hgn-controls[hidden] { display: none; }
.hgn .hgn-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #1e73be; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.hgn .hgn-controls button:disabled { opacity: .35; cursor: default; }
.hgn a:focus-visible, .hgn button:focus-visible, .hgn .hgn-grid:focus-visible { outline: 3px solid #1e73be; outline-offset: 2px; }
/* Handy: angeschnittene nächste Karte zeigt die Wischmöglichkeit. */
@media (max-width: 700px) {
    .hgn .hgn-card { flex-basis: min(280px,85%); }
    .hgn .hgn-media { height: 125px; }
}

/* Ortsdetailseiten am Desktop: gleiche Außenbreite und Innenabstände wie .hg-single. */
@media (min-width: 769px) {
    body.single-orte .hgn {
        max-width: 1100px;
        padding-left: 18px;
        padding-right: 18px;
    }
}