/* ==========================================================================
   Unterkuenfte BSP/BJSP FH 2026 — Karte + Liste
   Nutzt ausschliesslich die Design-Tokens aus style.css. Der :root-Block
   unten ist ein Fallback, damit die chrome-freie Musterseite (die style.css
   nicht laedt) korrekt aussieht — auf Seiten mit Theme-Chrome ueberschreiben
   die echten Tokens aus style.css diese Werte ohnehin nicht (gleiche Werte).
   ========================================================================== */
:root {
    --green: #3dc372;
    --green-dark: #2d9e59;
    --green-gradient: linear-gradient(135deg, #3dc372 0%, #2d9e59 100%);
    --text: #1a1a2e;
    --text-secondary: #6c6d74;
    --bg: #ffffff;
    --bg-subtle: #f8faf9;
    --bg-dark: #1a1a2e;
    --border: #e8e8ec;
    --radius-sm: 8px;
    --radius: 16px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow: 0 4px 20px rgba(0,0,0,0.06);
    --shadow-hover: 0 16px 48px rgba(0,0,0,0.12);
    --font-heading: 'Montserrat', Arial, sans-serif;
    --font-body: 'PT Serif', Georgia, serif;
    --container: 1200px;
}

.uk-wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px 64px;
}

/* --- Musterband / Vorschauband --- */
.uk-musterband {
    background: var(--green-gradient);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    padding: 12px 16px;
    letter-spacing: .02em;
}

/* --- Kopfbereich --- */
.uk-hero {
    padding: 48px 0 20px;
}
.uk-hero h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 32px;
    color: var(--text);
    margin-bottom: 10px;
}
.uk-hero p {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 760px;
}

/* --- Karte --- */
.uk-karte {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
    margin: 24px 0 32px;
}
.uk-karte svg { display: block; width: 100%; height: auto; }

.uk-pin { cursor: pointer; }
.uk-pin-halo {
    fill: var(--green);
    fill-opacity: 0.22;
    transition: r .18s ease, fill-opacity .18s ease;
}
.uk-pin-dot {
    fill: #ffffff;
    stroke: var(--green-dark);
    stroke-width: 3;
    transition: fill .15s ease, r .15s ease, stroke-width .15s ease;
}
.uk-pin:hover .uk-pin-dot,
.uk-pin:focus-visible .uk-pin-dot,
.uk-pin.is-active .uk-pin-dot {
    fill: var(--green-dark);
    r: 8.5;
}
.uk-pin:hover .uk-pin-halo,
.uk-pin:focus-visible .uk-pin-halo,
.uk-pin.is-active .uk-pin-halo {
    r: 16;
    fill-opacity: .32;
}
.uk-pin:focus-visible { outline: none; }
.uk-pin:focus-visible .uk-pin-dot { stroke: var(--text); }

/* --- Cluster-Pins: mehrere Betriebe teilen sich einen Ortspunkt --- */
.uk-pin-cluster .uk-pin-dot {
    fill: var(--green-dark);
    stroke: #ffffff;
    stroke-width: 2.5;
}
.uk-pin-cluster .uk-pin-count {
    fill: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 10px;
    pointer-events: none;
}
.uk-pin-cluster:hover .uk-pin-dot,
.uk-pin-cluster:focus-visible .uk-pin-dot,
.uk-pin-cluster.is-active .uk-pin-dot {
    fill: var(--green-dark);
    r: 12;
}
.uk-pin-cluster:hover .uk-pin-halo,
.uk-pin-cluster:focus-visible .uk-pin-halo,
.uk-pin-cluster.is-active .uk-pin-halo {
    r: 20;
}

/* --- Kopfzeile / Hinweistext ueber der Liste --- */
.uk-liste-kopf { margin-bottom: 18px; }
.uk-liste-hinweis {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    background: var(--bg-subtle);
    border-left: 3px solid var(--green);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 12px 16px;
}
.uk-leer {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    padding: 40px 16px;
}

/* --- Liste / Karten-Raster --- */
.uk-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.uk-karte-eintrag {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    scroll-margin-top: 100px;
}
.uk-karte-eintrag:hover,
.uk-karte-eintrag.is-active {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    border-color: var(--green);
}

.uk-eintrag-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
.uk-eintrag-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    color: var(--text);
    margin: 0;
}
.uk-pill {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    color: var(--text-secondary);
}
.uk-pill-art { background: rgba(61,195,114,.13); color: var(--green-dark); }
.uk-pill-muster { background: #fff4e0; color: #b7791f; }

/* Bestaetigt gegen noch nicht bestaetigt.
   Der Unterschied muss auf einen Blick lesbar sein, ohne die unbestaetigten
   Haeuser abzuwerten - sie sind der derzeitige Inhalt der Seite. Deshalb
   gedaempft und gestrichelt statt ausgegraut, und das Gruen bleibt der
   Bestaetigung vorbehalten. */
.uk-pill-bestaetigt {
    background: rgba(61,195,114,.16);
    color: var(--green-dark);
}
.uk-pill-bestaetigt::before { content: "✓ "; }
.uk-pill-offen { background: #eef1f6; color: #5a6376; }

.uk-karte-eintrag.uk-unbestaetigt {
    border-style: dashed;
    background: #fcfcfd;
}
.uk-karte-eintrag.uk-unbestaetigt .uk-eintrag-name { color: var(--text-secondary); }

/* Haeuser, die geantwortet und dabei abgesagt haben.

   Sie bleiben sichtbar und behalten eine durchgezogene Kontur: Wer sich die
   Muehe einer Antwort macht, soll nicht aussehen wie jemand, der nicht
   reagiert hat - und ein Teilnehmer, der die Absage liest, ruft dort nicht
   noch einmal an. Der Zustand muss aber auf einen Blick erkennbar sein,
   deshalb bleibt die Karte ruhig und die Kennzeichnung traegt die Farbe. */
.uk-karte-eintrag.uk-abgesagt {
    border-style: solid;
    background: #fbfaf9;
}
.uk-karte-eintrag.uk-abgesagt .uk-eintrag-name { color: var(--text-secondary); }

.uk-pill-abgesagt {
    background: #f3e6e2;
    color: #99442e;
}
.uk-pill-abgesagt::before { content: "✕ "; }

/* Ausgebucht ist kein Ausschluss, sondern eine Momentaufnahme - deshalb
   zurueckhaltender als "nimmt keine Hunde". */
.uk-abgesagt-ausgebucht .uk-pill-abgesagt {
    background: #f6efe0;
    color: #8a6410;
}
.uk-abgesagt-ausgebucht .uk-pill-abgesagt::before { content: "◷ "; }

.uk-eintrag-absage {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: #4a4b52;
    margin-top: 12px;
    padding: 10px 12px;
    border-left: 3px solid #d8c8c2;
    background: #f7f3f1;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.uk-abgesagt-ausgebucht .uk-eintrag-absage {
    border-left-color: #e0cf9f;
    background: #faf6ec;
}
.uk-absage-datum {
    display: block;
    margin-top: 4px;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.uk-eintrag-herkunft {
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px dashed #dfe4ec;
}
.uk-eintrag-herkunft a { color: var(--green-dark); }

/* Pins unbestaetigter Haeuser: hohl statt gefuellt. */
.uk-pin.is-offen .uk-pin-dot {
    fill: #fff;
    stroke: var(--green-dark);
    stroke-width: 2;
    stroke-dasharray: 3 2;
}

.uk-eintrag-adresse {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text);
    margin: 2px 0;
}
.uk-eintrag-entfernung {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--green-dark);
    margin: 4px 0 12px;
}

.uk-eintrag-kontakt {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 10px;
}
.uk-eintrag-kontakt a {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    color: var(--green-dark);
    text-decoration: none;
}
.uk-eintrag-kontakt a:hover { text-decoration: underline; }

.uk-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
}
.uk-badge {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 4px 10px;
}

.uk-eintrag-bemerkung {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 8px 0 0;
}
.uk-eintrag-preis {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text);
    margin: 10px 0 0;
}

/* --- Responsive: Tablet --- */
@media (max-width: 959px) {
    .uk-wrap { padding: 0 18px 48px; }
    .uk-hero { padding: 36px 0 16px; }
    .uk-hero h1 { font-size: 26px; }
    .uk-liste { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* --- Responsive: Mobil --- */
@media (max-width: 639px) {
    .uk-wrap { padding: 0 14px 40px; }
    .uk-hero h1 { font-size: 22px; }
    .uk-hero p { font-size: 14.5px; }
    .uk-karte { padding: 8px; margin: 18px 0 24px; }
    .uk-liste { grid-template-columns: 1fr; gap: 14px; }
    .uk-karte-eintrag { padding: 16px; }
}

/* ==========================================================================
   Formularseite (template-unterkunft-eintrag.php) + Fuss der Live-Seite.
   Bewusst grosszuegige Klickflaechen: die Empfaenger sind Gastgeber, oft am
   Handy und selten geuebt im Ausfuellen von Web-Formularen.
   ========================================================================== */
.uk-form-wrap { max-width: 760px; }

.uk-f-info,
.uk-f-fehler {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 24px;
}
.uk-f-info { background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text-secondary); }
.uk-f-fehler { background: #fdecec; border: 1px solid #f3c2c2; color: #96281b; }

.uk-formular { margin-top: 8px; }

.uk-f-block {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px 8px;
    margin: 0 0 22px;
    background: #fff;
}
.uk-f-block legend {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    color: var(--green-dark);
    padding: 0 8px;
}

.uk-f-feld { margin-bottom: 20px; }
.uk-f-feld label,
.uk-f-label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 6px;
}
.uk-f-erklaerung {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 4px 0 8px;
}
.uk-f-recherche {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    color: #b7791f;
    margin-top: 6px;
}
.uk-f-recherche a { color: #b7791f; }

.uk-f-feld input[type="text"],
.uk-f-feld input[type="email"],
.uk-f-feld input[type="url"],
.uk-f-feld select,
.uk-f-feld textarea {
    width: 100%;
    max-width: 460px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text);
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}
.uk-f-feld input:focus,
.uk-f-feld select:focus,
.uk-f-feld textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(61,195,114,.16);
}

.uk-f-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.uk-f-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    cursor: pointer;
    margin-bottom: 0;
}
.uk-f-radio:hover { border-color: var(--green); }
.uk-f-radio input { accent-color: var(--green-dark); }

.uk-f-zustimmung { background: var(--bg-subtle); }
.uk-f-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 14px;
}
.uk-f-check input { margin-top: 4px; accent-color: var(--green-dark); }

.uk-f-recht,
.uk-f-dsgvo {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 16px;
}

.uk-f-btn {
    display: inline-block;
    background: var(--green-gradient);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    border: none;
    border-radius: var(--radius-full);
    padding: 14px 30px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}
.uk-f-btn:hover { box-shadow: var(--shadow-hover); color: #fff; }

.uk-f-btn-leise {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--text-secondary);
    padding: 9px 18px;
    cursor: pointer;
}
.uk-f-btn-leise:hover { border-color: #d88; color: #96281b; }

.uk-f-box {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    background: var(--bg-subtle);
}
.uk-f-klein {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 16px;
    word-break: break-word;
}
.uk-f-entfernen { margin-top: 18px; }

.uk-fuss {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 32px;
}

@media (max-width: 639px) {
    .uk-f-block { padding: 16px 14px 4px; }
    .uk-f-feld input[type="text"],
    .uk-f-feld input[type="email"],
    .uk-f-feld input[type="url"],
    .uk-f-feld select,
    .uk-f-feld textarea { max-width: 100%; }
    .uk-f-btn { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------------
   Filter- und Sortierleiste.
   Steht im HTML auf [hidden] und wird erst von unterkuenfte.js sichtbar
   gemacht — ohne JavaScript keine Bedienelemente, die nichts bewirken.
   --------------------------------------------------------------------- */
.uk-filter {
    background: var(--bg-subtle);
    border: 1px solid #e3e8e5;
    border-radius: var(--radius);
    padding: 18px 20px;
    margin: 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.uk-filter[hidden] { display: none; }

.uk-filter-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.uk-filter-feld { display: flex; flex-direction: column; gap: 7px; }
.uk-filter-umkreis { flex: 1 1 260px; min-width: 220px; }
.uk-filter-sortierung { flex: 1 1 240px; min-width: 220px; }

.uk-filter label,
.uk-filter-titel {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .01em;
}
.uk-filter-umkreis output {
    font-weight: 400;
    color: var(--green-dark);
}

.uk-filter input[type="range"] {
    width: 100%;
    accent-color: var(--green);
    height: 24px;
    cursor: pointer;
}

.uk-filter select {
    font-family: var(--font-heading);
    font-size: 15px;
    padding: 9px 12px;
    border: 1px solid #d6ded9;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text);
    width: 100%;
    cursor: pointer;
}
.uk-filter select:focus-visible,
.uk-filter input:focus-visible {
    outline: 2px solid var(--green-dark);
    outline-offset: 2px;
}

.uk-filter-schalter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Pillenform statt nackter Kästchen: auf dem Handy sicher zu treffen. */
.uk-schalter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #d6ded9;
    border-radius: var(--radius-full);
    padding: 7px 14px 7px 11px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    font-weight: 400 !important;
}
.uk-schalter span {
    font-family: var(--font-heading);
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.3;
}
.uk-schalter input { accent-color: var(--green-dark); margin: 0; cursor: pointer; }
.uk-schalter:hover { border-color: var(--green); }
.uk-schalter:has(input:checked) {
    border-color: var(--green-dark);
    background: #eefaf3;
}
.uk-schalter:has(input:checked) span { color: var(--green-dark); font-weight: 700; }
/* Rückfall für Browser ohne :has() — der Filter wirkt trotzdem. */
.uk-schalter input:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }

.uk-filter-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid #e3e8e5;
    padding-top: 13px;
}
.uk-filter-treffer {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.uk-filter-reset {
    font-family: var(--font-heading);
    font-size: 13.5px;
    color: var(--green-dark);
    background: none;
    border: 0;
    padding: 4px 2px;
    cursor: pointer;
    text-decoration: underline;
}
.uk-filter-reset[hidden] { display: none; }

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

/* Ausgefilterte Pins bleiben als blasse Andeutung stehen, damit die Karte
   ihre Form behält und nicht bei jeder Auswahl neu „springt". */
.uk-pin.is-ausgeblendet { opacity: .16; pointer-events: none; }
.uk-pin { transition: opacity .25s ease; }

@media (max-width: 639px) {
    .uk-filter { padding: 15px 14px; gap: 14px; }
    .uk-filter-zeile { gap: 14px; }
    .uk-filter-umkreis,
    .uk-filter-sortierung { flex: 1 1 100%; min-width: 0; }
    .uk-schalter { padding: 8px 13px 8px 10px; }
    .uk-schalter span { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .uk-pin { transition: none; }
}

.uk-herkunft-hinweis {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text);
    background: #f5f8fb;
    border-left: 3px solid var(--green);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin: 0 0 22px;
}
.uk-herkunft-hinweis a { color: var(--green-dark); }

/* Der Buchungshinweis ist die Zeile, die ein Teilnehmer wirklich lesen muss -
   deshalb waermer abgesetzt als der Herkunftsabsatz darueber. */
.uk-herkunft-buchung {
    background: #fff8ec;
    border-left-color: #e2a03f;
    margin-top: -10px;
}