/**
 * home_controls.css - einheitliche Bedienelemente der Startseite (wird nach home.css/home_overlays.css geladen).
 *
 * Design "Leuchtkante" mit Glanz: eine Rundung (4px) fuer alles, Toolbar-Elemente 40px, Chips 28px, leicht
 * gelaeserne Flaechen (backdrop-filter), beim Hover laeuft ein goldenes Licht um den Rand und ein heller Glanzstreifen
 * gleitet ueber den Button. Eingabefelder leuchten im Fokus, "Aktualisieren" atmet waehrend der Auto-Such-Wartezeit.
 *
 * Pseudoelemente: ::before = umlaufender Lichtrand, ::after = Glanzstreifen; "Aktualisieren" nutzt ::before fuer
 * den Glanz, weil ::after dort der Auto-Such-Balken ist (home.css).
 */
@property --hc-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
    --hc-r: 4px;
    --hc-glass: rgba(190, 220, 110, .075);
    --hc-glass-hi: rgba(255, 199, 82, .09);
    --hc-ring: rgba(255, 255, 255, .11);
    --hc-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}

/* Etwas Struktur hinter der Suche, damit das Glas ueberhaupt etwas zu "brechen" hat */
.home-search-section {
    background:
        radial-gradient(520px 280px at 8% 4%, rgba(122, 156, 48, .20), transparent 70%),
        radial-gradient(460px 320px at 94% 58%, rgba(237, 130, 8, .10), transparent 70%);
    background-repeat: no-repeat;
}

/* ---------- Glas-Buttons ---------- */
.home-collapsible-toggle, .home-toolbar-btn, .home-results-more.manual, .hv-btn, .hv-pill-btn, .hv-route,
.home-lightbox-close, .home-fullscreen-close, .home-fullscreen-info-btn {
    border-radius: var(--hc-r);
    border: 1px solid transparent;
    background: var(--hc-glass);
    -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
    color: #e4d9b4;
    box-shadow: inset 0 0 0 1px var(--hc-ring), var(--hc-shadow);
    isolation: isolate;
    overflow: hidden;
    transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .2s ease, opacity .2s ease;
}
/* Position nur dort setzen, wo sie nicht schon absolut ist (Overlay-Knoepfe) */
.home-collapsible-toggle, .home-toolbar-btn, .home-results-more.manual, .hv-route { position: relative; }

.home-collapsible-toggle::before, .home-toolbar-btn::before, .home-results-more.manual::before, .hv-btn::before,
.hv-pill-btn::before, .hv-route::before, .home-lightbox-close::before, .home-fullscreen-close::before,
.home-fullscreen-info-btn::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--hc-ang), transparent 0 60%, var(--home-gold, #FFC752) 80%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .3s ease; animation: hc-spin 2.4s linear infinite;
}
.home-collapsible-toggle::after, .home-toolbar-btn::after, .home-results-more.manual::after, .hv-btn::after,
.hv-pill-btn::after, .hv-route::after, .home-lightbox-close::after, .home-fullscreen-close::after,
.home-fullscreen-info-btn::after, .home-toolbar-submit::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .24), transparent);
    transform: skewX(-18deg); transition: left .6s ease;
}
.home-collapsible-toggle:hover::before, .home-toolbar-btn:hover::before, .home-results-more.manual:hover::before,
.hv-btn:hover::before, .hv-pill-btn:hover::before, .hv-route:hover::before, .home-lightbox-close:hover::before,
.home-fullscreen-close:hover::before, .home-fullscreen-info-btn:hover::before, .home-toolbar-btn.active::before,
.hv-i.on::before { opacity: 1; }
.home-collapsible-toggle:hover::after, .home-toolbar-btn:hover::after, .home-results-more.manual:hover::after,
.hv-btn:hover::after, .hv-pill-btn:hover::after, .hv-route:hover::after, .home-lightbox-close:hover::after,
.home-fullscreen-close:hover::after, .home-fullscreen-info-btn:hover::after, .home-toolbar-submit:hover::before { left: 130%; }
@keyframes hc-spin { to { --hc-ang: 360deg; } }

.home-collapsible-toggle:hover, .home-toolbar-btn:hover, .home-results-more.manual:hover, .hv-btn:hover, .hv-pill-btn:hover,
.hv-route:hover, .home-lightbox-close:hover, .home-fullscreen-close:hover, .home-fullscreen-info-btn:hover {
    background: var(--hc-glass-hi); color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 199, 82, .15), 0 10px 26px rgba(0, 0, 0, .34), 0 0 24px rgba(255, 199, 82, .08);
}
.home-toolbar-btn.active, .hv-i.on { background: var(--hc-glass); box-shadow: inset 0 0 0 1px rgba(159, 194, 79, .4), var(--hc-shadow); }
.home-collapsible-toggle:focus-visible, .home-toolbar-btn:focus-visible, .home-results-more:focus-visible, .hv-btn:focus-visible,
.hv-route:focus-visible, .home-toolbar-submit:focus-visible { outline: 2px solid var(--home-gold, #FFC752); outline-offset: 2px; }

/* gleiche Hoehe fuer alle Bedienelemente der Zeile (Toolbar) */
.home-collapsible-toggle { height: 40px; padding: 0 16px; }
.home-toolbar-btn { height: var(--ctl-h, 40px); }

/* ---------- Overlay-Knoepfe: eckig statt rund ---------- */
.hv-x, .hv-i, .hv-arrow, .home-fullscreen-close, .home-fullscreen-info-btn { border-radius: var(--hc-r); }
.hv-btn:hover, .hv-pill-btn:hover { background: var(--hc-glass-hi); }
.hv-arrow[disabled] { background: var(--hc-glass); box-shadow: inset 0 0 0 1px var(--hc-ring); }
.hv-arrow[disabled]::before, .hv-arrow[disabled]::after { display: none; }
.hv-pill { border-radius: var(--hc-r); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.home-lightbox-close { width: 40px; height: 40px; display: grid; place-items: center; font-size: 24px; }
.hv-route { padding: 8px 12px 8px 10px; }
.hv-route i { border-radius: var(--hc-r); position: relative; z-index: 1; }
.hv-route > span { position: relative; z-index: 1; }
.hv-route:hover { border-color: transparent; }
.hv-map, .hv-tile, .hv-fig img { border-radius: var(--hc-r); }

/* ---------- "Aktualisieren" ---------- */
.home-toolbar-submit {
    border-radius: var(--hc-r);
    border: 1px solid rgba(200, 235, 120, .7);
    background: linear-gradient(135deg, #a9cf55, #7ea533);
    color: var(--home-bg, #0d1400);
    box-shadow: 0 0 0 0 rgba(159, 194, 79, .5), 0 8px 20px rgba(90, 130, 20, .3);
    transition: box-shadow .3s ease, transform .2s ease, filter .25s ease;
}
.home-toolbar-submit:hover { filter: brightness(1.08); box-shadow: 0 0 0 4px rgba(159, 194, 79, .18), 0 12px 28px rgba(110, 160, 30, .4); }
.home-toolbar-submit:active { transform: scale(.98); }
.home-toolbar-submit::before { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent); z-index: 1; }
.home-toolbar-submit.counting { animation: hc-pulse 2s ease-in-out infinite; }
@keyframes hc-pulse { 50% { box-shadow: 0 0 0 5px rgba(159, 194, 79, .14), 0 8px 20px rgba(90, 130, 20, .3); } }

/* ---------- Eingabefelder ---------- */
.home-toolbar-search, .home-input, .home-where-input {
    margin: 0; /* style.css gibt allen Inputs margin-top 5px / margin-left 10px: das versetzte das Namensfeld */
    border-radius: var(--hc-r);
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--home-gold, #FFC752);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.home-toolbar-search:hover, .home-input:hover, .home-where-input:hover { border-color: rgba(255, 199, 82, .35); }
.home-toolbar-search:focus, .home-input:focus, .home-where-input:focus {
    outline: 0; border-color: var(--home-gold, #FFC752);
    box-shadow: 0 0 0 3px rgba(255, 199, 82, .13), inset 0 0 18px rgba(255, 199, 82, .06);
}

/* ---------- Panels der Toolbar ---------- */
.home-toolbar-panel {
    border-radius: var(--hc-r);
    background: rgba(22, 34, 8, .92);
    border-color: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.home-toolbar-check input { border-radius: 2px; }

/* ---------- Chips (28px, gleiche Rundung) ---------- */
.home-sum-item, .hd-chip, .home-date-presets button, .home-toolbar-suggestion, .home-toolbar-chip {
    border-radius: var(--hc-r);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.home-sum-item { height: 28px; padding: 0 5px 0 11px; background: rgba(159, 194, 79, .14); border-color: rgba(159, 194, 79, .4); color: #e4efc2; }
.home-sum-item:not(:has(.home-sum-x)) { padding-right: 11px; }
.home-sum-item:hover { border-color: var(--home-gold, #FFC752); box-shadow: 0 0 14px rgba(255, 199, 82, .18); }
.home-sum-x { width: 18px; height: 18px; padding: 0; margin-left: 4px; border-radius: 3px; display: inline-grid; place-items: center; font-size: 14px; line-height: 1; }
.hd-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; line-height: 1; }
.hd-chip:hover { border-color: var(--home-gold, #FFC752); box-shadow: 0 0 14px rgba(255, 199, 82, .18); }
.hd-chip-ort::before { width: 6px; height: 6px; margin-right: 7px; border-radius: 1px; transform: rotate(45deg); }
.hd-chip-plus { border-radius: 3px; }
.home-date-presets button:hover { border-color: var(--home-gold, #FFC752); box-shadow: 0 0 12px rgba(255, 199, 82, .16); }
.home-toolbar-suggestion { border-radius: var(--hc-r); }
.home-profil-photo-tag { border-radius: var(--hc-r); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------- "Weitere laden" ---------- */
.home-results-more { border-radius: var(--hc-r); }
.home-results-more.manual { padding: 8px 20px 8px 10px; }
.home-results-more.manual .more-ring { border-radius: var(--hc-r); position: relative; z-index: 1; }
.home-results-more.manual .more-text { position: relative; z-index: 1; }
.home-results-more.loading .more-ring { border-radius: 50%; } /* Ladeanzeige bleibt rund */

/* ---------- Hinweisleiste ---------- */
.home-notice {
    border-radius: var(--hc-r); background: rgba(34, 49, 8, .82);
    -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
}
.home-notice-close { border-radius: 3px; }

/* ---------- Karten/Boxen: gleiche Rundung ---------- */
.entity-element, .home-map-box, .home-hover-detail, .home-static-page, .home-lightbox-panel, .home-lightbox-gallery,
.home-fullscreen-info-panel, .home-masonry-item { border-radius: var(--hc-r); }

@media (prefers-reduced-motion: reduce) {
    .home-collapsible-toggle::before, .home-toolbar-btn::before, .home-results-more.manual::before, .hv-btn::before,
    .hv-pill-btn::before, .hv-route::before, .home-lightbox-close::before, .home-fullscreen-close::before,
    .home-fullscreen-info-btn::before { animation: none; }
    .home-collapsible-toggle::after, .home-toolbar-btn::after, .home-results-more.manual::after, .hv-btn::after,
    .hv-pill-btn::after, .hv-route::after, .home-lightbox-close::after, .home-fullscreen-close::after,
    .home-fullscreen-info-btn::after, .home-toolbar-submit::before { display: none; }
    .home-toolbar-submit.counting { animation: none; }
}

/* ---------- "Nach unten"-Knopf (home.js initDownButton) ---------- */
.home-down {
    position: fixed; z-index: 40; right: 16px; bottom: 28px; width: 40px; height: 40px; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid transparent; border-radius: var(--hc-r);
    background: var(--hc-glass); color: #e4d9b4; opacity: .55;
    -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
    box-shadow: inset 0 0 0 1px var(--hc-ring), var(--hc-shadow);
    transition: opacity .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.home-down svg { transition: transform .35s ease; }
.home-down.up svg { transform: rotate(180deg); }
.home-down:hover, .home-down:focus-visible { opacity: 1; background: var(--hc-glass-hi); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 199, 82, .35), 0 10px 26px rgba(0, 0, 0, .34), 0 0 24px rgba(255, 199, 82, .08); outline: 0; }
.home-down:focus-visible { outline: 2px solid var(--home-gold, #FFC752); outline-offset: 2px; }
html.hv-open .home-down, body:has(.home-lightbox) .home-down { display: none; }
@media (max-width: 766px) { .home-down { right: 12px; bottom: 16px; width: 44px; height: 44px; } }