/* ==========================================================================
   /locations – Hochzeitslocations, die Yvonne persoenlich empfiehlt
   --------------------------------------------------------------------------
   Alle Klassen tragen das Praefix "loc-". Das ist Absicht: style.css belegt
   generische Namen wie .cta, .btn, .card und .intro global, eine Seite mit
   eigenen Namen dieser Art sieht im Browser kaputt aus, obwohl der Quelltext
   sauber wirkt.
   ========================================================================== */

.loc-page {
    /* Die Farben der Seite. Sie zeigen auf die Variablen, die style.css schon
       fuer die ganze Website definiert – hier stehen nur die sprechenden Namen
       davor, damit die Regeln unten lesbar bleiben. Wird die Palette in
       style.css angepasst, wandert die Aenderung automatisch mit. */
    --creme:        var(--bg-light);        /* #f6ecee */
    --rose-braun:   var(--primary-color);   /* #c99383 */
    --altrosa:      var(--secondary-color); /* #d8b2a7 */
    --zartrosa:     var(--accent-light);    /* #e6c9cf */
    --terrakotta:   var(--primary-dark);    /* #ba745f */
    --mauve:        #7a5c5c;                /* in style.css nicht vorhanden */

    /* Terrakotta traegt auf Weiss nur einen Kontrast von 3.6 zu 1 und ist damit
       als Textfarbe zu schwach. Dieser dunklere Ton kommt auf 5.3 zu 1 und wird
       ueberall dort benutzt, wo weisse Schrift auf der Flaeche steht. */
    --terrakotta-dunkel: #9c5a46;

    --loc-linie: #e8d6d2;
    --loc-text:  var(--text-dark);          /* #5a4a4a, 7.2 zu 1 auf Creme */

    background: var(--creme);
    padding: 3rem 0 4.5rem;
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    color: var(--loc-text);
}

.loc-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* style.css setzt h1 bis h6 global auf letter-spacing -0.02em. Fuer eine
   Serifenschrift in dieser Groesse ist das zu eng, deshalb hier zurueckgenommen. */
.loc-page h1,
.loc-page h2,
.loc-page h3 {
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: 0;
    color: var(--loc-text);
}

/* Kleintext: Montserrat in Versalien mit Sperrung */
.loc-kleintext {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Sichtbarer Fokusrahmen fuer alles, was mit der Tastatur erreichbar ist */
.loc-page a:focus-visible,
.loc-page button:focus-visible {
    outline: 3px solid var(--terrakotta-dunkel);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Nur fuer Screenreader */
.loc-nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------- Kopfbereich */

.loc-kopf {
    max-width: 44rem;
    margin-bottom: 2.25rem;
}

.loc-kopf .loc-kleintext {
    color: var(--terrakotta-dunkel);
    display: block;
    margin-bottom: 0.75rem;
}

.loc-kopf h1 {
    font-size: clamp(1.75rem, 5vw, 2.6rem);
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 1rem;
}

.loc-kopf p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--mauve);
    margin-bottom: 0.75rem;
}

/* ------------------------------------------------------------- Filterleiste */

.loc-filter {
    background: #fff;
    border: 1px solid var(--loc-linie);
    border-radius: 16px;
    padding: 1.1rem 1.25rem 1.25rem;
    margin-bottom: 1.75rem;
}

/* fieldset bringt von Haus aus Rahmen und Innenabstand mit, beides weg. */
.loc-filter-gruppe {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.loc-filter-gruppe + .loc-filter-gruppe {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--loc-linie);
}

/* Ein <legend> sitzt im Browser normalerweise im Rahmen des <fieldset> und
   legt sich damit ueber die Trennlinie zwischen zwei Filtergruppen. Float
   plus volle Breite macht daraus ein normales Blockelement, die Linie bleibt
   durchgehend. Die Schalterreihe darunter muss den Float dann aufheben. */
.loc-filter-gruppe > legend,
.loc-filter-titel {
    float: left;
    width: 100%;
    color: var(--mauve);
    margin-bottom: 0.6rem;
    padding: 0;
}

.loc-schalter-reihe {
    clear: both;
}

.loc-schalter-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Die Filter sind echte Knoepfe, keine Auswahlmenues: mit dem Daumen am Handy
   bedienbar und fuer Screenreader ueber aria-pressed verstaendlich. */
.loc-schalter {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--loc-text);
    background: #fff;
    border: 1.5px solid var(--zartrosa);
    border-radius: 999px;
    padding: 0.65rem 1.05rem;
    min-height: 44px;              /* Daumenflaeche */
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.loc-schalter:hover {
    background: var(--creme);
    border-color: var(--altrosa);
}

.loc-schalter[aria-pressed="true"] {
    background: var(--terrakotta-dunkel);
    border-color: var(--terrakotta-dunkel);
    color: #fff;
}

.loc-filter-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--loc-linie);
}

.loc-zaehler {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mauve);
}

.loc-zaehler b {
    color: var(--terrakotta-dunkel);
}

.loc-zuruecksetzen {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--terrakotta-dunkel);
    background: none;
    border: none;
    border-bottom: 1.5px solid var(--zartrosa);
    padding: 0.35rem 0.1rem;
    min-height: 44px;
    cursor: pointer;
}

.loc-zuruecksetzen:hover {
    border-bottom-color: var(--terrakotta-dunkel);
}

.loc-zuruecksetzen[hidden] {
    display: none;
}

/* ------------------------------------------------------------------- Liste */

.loc-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
}

@media (max-width: 700px) {
    .loc-liste {
        grid-template-columns: 1fr;
    }
}

/* Am Handy zaehlt jeder Zentimeter: die Liste soll moeglichst frueh anfangen,
   ohne dass die Schalter kleiner werden als eine Daumenkuppe. */
@media (max-width: 700px) {
    .loc-page { padding-top: 2rem; }
    .loc-kopf { margin-bottom: 1.5rem; }
    .loc-filter { padding: 0.9rem 1rem 1rem; margin-bottom: 1.25rem; }
    .loc-filter-gruppe + .loc-filter-gruppe { margin-top: 0.8rem; padding-top: 0.8rem; }
    .loc-filter-fuss { margin-top: 0.8rem; padding-top: 0.8rem; }
}

/* Die Karten einer Reihe sollen unten auf gleicher Hoehe abschliessen, auch
   wenn Yvonnes Saetze unterschiedlich lang sind. Dafuer muss das <li> die
   volle Zeilenhoehe an die Karte durchreichen. */
.loc-liste > li {
    display: flex;
}

/* Wichtig: das display:flex oben schlaegt die eingebaute Regel des
   hidden-Attributs. Ohne diese Zeile bleiben ausgefilterte Karten als leere
   Luecken im Raster stehen, statt zu verschwinden. */
.loc-liste > li[hidden] {
    display: none;
}

.loc-karte {
    width: 100%;
    background: #fff;
    border: 1px solid var(--loc-linie);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Der einzige Bewegungseffekt der Seite: das weiche Ein- und Ausblenden
       beim Filtern. */
    transition: opacity .28s ease, transform .28s ease;
}

.loc-karte--aus {
    opacity: 0;
    transform: scale(.98);
}

.loc-karte--angesprungen {
    outline: 3px solid var(--terrakotta-dunkel);
    outline-offset: 3px;
}

.loc-karte-bild {
    aspect-ratio: 3 / 2;
    background: var(--creme);
    overflow: hidden;
}

.loc-karte-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fehlt ein Bild, steht hier eine ruhige Creme-Flaeche mit dem Ortsnamen.
   Kein kaputtes Bildsymbol, kein Platzhalter aus dem Netz. */
.loc-karte-bild--leer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-bottom: 1px solid var(--loc-linie);
}

.loc-karte-bild--leer span {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mauve);
    text-align: center;
}

.loc-karte-text {
    padding: 1.25rem 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.loc-karte-typ {
    color: var(--terrakotta-dunkel);
    margin-bottom: 0.5rem;
}

.loc-karte-name {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.15rem;
}

.loc-karte-ort {
    font-size: 0.95rem;
    color: var(--mauve);
    margin: 0 0 0.9rem;
}

/* Woher Yvonne den Ort kennt. Steht ueber ihrem Satz, bleibt aber leiser
   als dieser: der Satz soll die Karte tragen, nicht der Herkunftshinweis. */
.loc-karte-badge {
    color: var(--terrakotta-dunkel);
    margin: 0 0 0.45rem;
    font-size: 0.66rem;
}

/* Yvonnes Satz ist das Herz der Karte und muss vor den Kennwerten stehen,
   optisch wie inhaltlich. */
.loc-karte-yvonne {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.08rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--loc-text);
    border-left: 3px solid var(--altrosa);
    padding-left: 0.95rem;
    margin: 0 0 1.1rem;
}

.loc-marker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
}

.loc-marker li {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mauve);
    background: var(--creme);
    border: 1px solid var(--loc-linie);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
}

.loc-karte-links {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.9rem;
}

.loc-karte-links a {
    color: var(--terrakotta-dunkel);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.loc-karte-links a:hover {
    color: var(--mauve);
}

/* ---------------------------------------------------------- Keine Treffer */

.loc-leer {
    background: #fff;
    border: 1px solid var(--loc-linie);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: 2.5rem;
}

.loc-leer p {
    font-size: 1.05rem;
    color: var(--mauve);
    margin-bottom: 1.25rem;
}

.loc-leer[hidden] {
    display: none;
}

/* ------------------------------------------------------------------- Karte */

.loc-karte-abschnitt {
    margin-bottom: 3rem;
}

.loc-karte-abschnitt h2 {
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: 600;
    margin: 0 0 0.6rem;
}

.loc-karte-abschnitt > p {
    color: var(--mauve);
    margin-bottom: 1.25rem;
    max-width: 44rem;
}

.loc-kartenflaeche {
    position: relative;
    border: 1px solid var(--loc-linie);
    border-radius: 16px;
    overflow: hidden;
    background: var(--creme);
    min-height: 420px;
}

@media (max-width: 700px) {
    .loc-kartenflaeche { min-height: 340px; }
}

/* Vorschau statt Karte: die Kacheln von OpenStreetMap werden erst nach einem
   Klick geladen, vorher geht kein Aufruf an einen fremden Server. */
.loc-karte-vorschau {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    background:
        repeating-linear-gradient(45deg,
            rgba(216,178,167,.16) 0 14px,
            rgba(230,201,207,.16) 14px 28px),
        var(--creme);
}

.loc-karte-vorschau p {
    max-width: 30rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--mauve);
    margin: 0;
}

.loc-karte-behaelter {
    height: 480px;
    width: 100%;
}

@media (max-width: 700px) {
    .loc-karte-behaelter { height: 360px; }
}

.loc-karte-fehler {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--mauve);
}

/* Marker: eigene Form in Terrakotta, damit Leaflet keine Bilddateien
   nachladen muss. */
.loc-nadel {
    width: 26px;
    height: 26px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--terrakotta);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(90, 74, 74, .45);
}

.loc-page .leaflet-popup-content-wrapper {
    border-radius: 12px;
}

.loc-page .leaflet-popup-content {
    font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    margin: 0.9rem 1rem;
    color: var(--loc-text);
}

.loc-popup-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    display: block;
}

.loc-popup-ort {
    color: var(--mauve);
    font-size: 0.88rem;
    display: block;
    margin-bottom: 0.5rem;
}

.loc-popup-sprung {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--terrakotta-dunkel);
    background: none;
    border: none;
    border-bottom: 1.5px solid var(--zartrosa);
    padding: 0.25rem 0;
    cursor: pointer;
}

/* --------------------------------------------------------------- Abschluss */

.loc-abschluss {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.loc-weg {
    background: #fff;
    border: 1px solid var(--loc-linie);
    border-radius: 16px;
    padding: 1.75rem 1.6rem;
    display: flex;
    flex-direction: column;
}

.loc-weg h2 {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 0.6rem;
}

.loc-weg p {
    color: var(--mauve);
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0 0 1.4rem;
}

.loc-knopf {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.95rem 1.6rem;
    min-height: 44px;
    cursor: pointer;
    border: 1.5px solid var(--terrakotta-dunkel);
    transition: background-color .18s ease, color .18s ease;
}

.loc-knopf--voll {
    background: var(--terrakotta-dunkel);
    color: #fff;
}

.loc-knopf--voll:hover {
    background: var(--mauve);
    border-color: var(--mauve);
    color: #fff;
}

.loc-knopf--leer {
    background: #fff;
    color: var(--terrakotta-dunkel);
}

.loc-knopf--leer:hover {
    background: var(--creme);
    color: var(--terrakotta-dunkel);
}

/* ------------------------------------------------------- Regionen und Hinweis */

.loc-regionen {
    margin: 2.5rem 0 0;
    font-size: 0.95rem;
    color: var(--mauve);
}

.loc-regionen a {
    color: var(--terrakotta-dunkel);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.loc-ohne-js {
    background: #fff;
    border: 1px solid var(--loc-linie);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    color: var(--mauve);
    font-size: 0.95rem;
}

/* Wer Bewegung im System abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    .loc-page * {
        transition: none !important;
        animation: none !important;
    }
}