/* event.canidex.cloud – Farben nach CI (CANIDEX Events #D99A14, Dunkelblau #0B1B3D) */
:root {
    --navy: #0B1B3D;
    --events: #D99A14;
    --events-dark: #A87410;
    --ink: #090D27;
    --white: #FFFFFF;
    --grey-50: #F5F6F8;
    --grey-200: #D9DDE4;
    --grey-600: #545C6B;
    --danger: #B00020;
    --font-brand: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-text: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { position: relative; margin: 0; font-family: var(--font-text); color: var(--ink); background: var(--grey-50); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--events-dark); }
h1, h2, h3 { font-family: var(--font-brand); margin: 0; line-height: 1.25; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.head { background: linear-gradient(115deg, var(--navy) 0%, #14274f 60%, #3b2d0c 120%); color: var(--white); padding: 2rem 0 2.4rem; }
/* Wasserzeichen wie in den CANIDEX-Produkten: Logo weiß, groß und angeschnitten rechts im Band */
.head { position: relative; overflow: hidden; }
.head::after { content: ""; position: absolute; top: 50%; right: -4rem; width: 620px; height: 730px; transform: translateY(-38%);
    background: image-set(url('../images/logos/canidex-events-weiss-watermark-1300.webp') type('image/webp'), url('../images/logos/canidex-events-weiss-watermark-1300.png') type('image/png')) no-repeat center / contain;
    opacity: .08; pointer-events: none; }
.head__account { position: relative; z-index: 2; display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: -1rem; margin-bottom: .6rem; font-size: .85rem; }
.head__account form { margin: 0; display: flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .85); }
.head__user { font-weight: 600; color: var(--white); }
.head__register { color: rgba(255, 255, 255, .85); font-weight: 600; text-decoration: none; }
.head__register:hover { color: var(--white); text-decoration: underline; }
.event__more { display: inline-flex; align-items: flex-start; gap: .4rem; max-width: 12rem; font-size: .78rem; line-height: 1.3; color: var(--grey-600); text-decoration: none; text-align: left; }
.event__more svg { flex: none; width: 13px; height: 13px; margin-top: .1em; fill: var(--events); }
.event__more:hover span { color: var(--navy); text-decoration: underline; }
.btn-login { display: inline-block; padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); color: var(--white); font-weight: 600; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.btn-login:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); }
.link-button { font: inherit; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .85); text-decoration: underline; cursor: pointer; }
.link-button:hover { color: var(--white); }
.notice { margin: 1rem 0 0; padding: .6rem .9rem; border: 1px solid var(--grey-200); border-radius: 10px; font-size: .9rem; }
.notice--warn { border-color: #F2C94C; background: #FFF8E1; color: var(--ink); }
.head__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.head__inner { gap: 2rem; }
.head__brand { flex: none; }
.head__text { flex: 1 1 22rem; min-width: 0; }
.head__brand img { display: block; height: 150px; width: auto; background: var(--white); border-radius: 20px; padding: .8rem 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.head h1 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: var(--white); hyphens: auto; overflow-wrap: break-word; }
.head p { margin: .4rem 0 0; color: rgba(255, 255, 255, .8); }

.filters { position: sticky; top: 0; z-index: 3; background: var(--white); border-bottom: 1px solid var(--grey-200); box-shadow: 0 4px 14px rgba(11, 27, 61, .06); }
.filters__inner { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; padding-top: .8rem; padding-bottom: .8rem; }
.filters input[type="search"], .filters select { font: inherit; padding: .55rem .7rem; border: 1px solid var(--grey-200); border-radius: 10px; background: var(--white); color: var(--ink); }
.filters__inner > label { min-width: 0; max-width: 100%; }
.filters select { max-width: 100%; text-overflow: ellipsis; }
.filters__search { flex: 1 1 260px; }
.filters__search input { width: 100%; }
.filters__check { display: flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--grey-600); }
.filters button { font: inherit; font-weight: 600; padding: .55rem 1.1rem; border: 0; border-radius: 10px; background: var(--events); color: var(--navy); cursor: pointer; }
.filters button:hover { background: #e7aa2a; }

.count { color: var(--grey-600); margin: 1.4rem 0 .4rem; }
.month { margin: 1.4rem 0 2rem; }
.month__title { position: sticky; top: 64px; z-index: 2; background: var(--grey-50); padding: .5rem 0; font-size: 1.25rem; color: var(--navy); text-transform: capitalize; border-bottom: 3px solid var(--events); }
.month__title span { font-family: var(--font-text); font-size: .85rem; font-weight: 500; color: var(--grey-600); margin-left: .4rem; }
.events { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .55rem; }
.event { --art: var(--grey-200); --art-bg: var(--grey-50); --art-ink: var(--grey-600); display: grid; grid-template-columns: 72px 1fr auto; gap: 1rem; align-items: start; background: var(--white); border: 1px solid var(--grey-200); border-left: 5px solid var(--art); border-radius: 12px; padding: .8rem 1rem; transition: box-shadow .15s ease; }
.event { position: relative; }
.event > .event__info { position: absolute; top: .8rem; right: .9rem; z-index: 4; }
.event__source { padding-top: 2rem; }
.event:hover { box-shadow: 0 8px 22px rgba(11, 27, 61, .08); }
.event__date { align-self: stretch; text-align: center; border-right: 1px solid var(--grey-200); padding-right: .8rem; }
.event__day { display: block; font-family: var(--font-brand); font-weight: 700; font-size: 1.6rem; color: var(--navy); line-height: 1; }
.event__weekday { display: block; font-size: .75rem; color: var(--grey-600); text-transform: uppercase; margin-bottom: .2rem; }
.event__month { display: block; font-size: .72rem; font-weight: 600; color: var(--navy); white-space: nowrap; margin-top: .25rem; }
.event__name { font-size: 1.05rem; color: var(--navy); }
.event__name a { color: inherit; text-decoration: none; }
.event__name a:hover { text-decoration: underline; }
.head p a { color: var(--white); }
.crumbs { font-size: .85rem; margin-bottom: .4rem; color: rgba(255, 255, 255, .6); }
.crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.event--page { margin-top: 1.6rem; grid-template-columns: 1fr auto; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: .8rem 0 0; font-size: .95rem; }
.facts dt { color: var(--grey-600); }
.facts dd { margin: 0; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.back { margin: 1.2rem 0 2.4rem; }
.event__organizer { margin: .15rem 0 0; font-size: .95rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.event__label { font-weight: 400; color: var(--grey-600); margin-right: .25rem; }
.event__meta { margin: .25rem 0 0; color: var(--grey-600); font-size: .9rem; display: flex; gap: .2rem 1rem; flex-wrap: wrap; }
.event__place { display: inline-flex; align-items: center; gap: .35rem; }
.flag { width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.event__tags { margin: .4rem 0 0; display: flex; gap: .35rem; flex-wrap: wrap; }
.tag { font-size: .75rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; background: #FBF1DC; color: var(--events-dark); }
.tag--art { background: var(--art-bg); color: var(--art-ink); }
/* eine Farbe je Ausstellungsart (data-art = Typcode aus Core); jagdliche Prüfungen in Grün- und Erdtönen */
.event[data-art="show"] { --art: #D99A14; --art-bg: #FBF1DC; --art-ink: #8A5A00; }
.event[data-art="breeding-event"] { --art: #E06A1F; --art-bg: #FDE8D9; --art-ink: #9A410C; }
.event[data-art="trial"] { --art: #3366CC; --art-bg: #E0EAFB; --art-ink: #1F4E9E; }
.event[data-art="hunting-trial"] { --art: #2E8B44; --art-bg: #E3F1E4; --art-ink: #1E6B2F; }
.event[data-art="vgp"] { --art: #1A8C7A; --art-bg: #DDF0EC; --art-ink: #11665A; }
.event[data-art="hzp"] { --art: #8A9A1E; --art-bg: #EEF0D8; --art-ink: #535B10; }
.event[data-art="vps"] { --art: #A0632E; --art-bg: #F1E6DC; --art-ink: #6E421D; }
.event[data-art="vswp"] { --art: #8C2F1F; --art-bg: #F6E0DC; --art-ink: #7A2819; }
.event[data-art="sport"] { --art: #7E4BC2; --art-bg: #ECE3F7; --art-ink: #5B2E91; }
.event[data-art="agility"] { --art: #D0388A; --art-bg: #FBE3F0; --art-ink: #941C5C; }
.event[data-art="coursing"] { --art: #1A9BB8; --art-bg: #DDF2F8; --art-ink: #0E6378; }
.event[data-art="race"] { --art: #4C59C9; --art-bg: #E2E4F8; --art-ink: #2F3A8F; }
.event[data-art="other"] { --art: #8A93A3; --art-bg: var(--grey-50); --art-ink: var(--grey-600); }
.tag--cancelled { background: #FDE2E4; color: var(--danger); }
.tag--full { background: #FDE2E4; color: var(--danger); }
.tag--closed { background: #FDE2E4; color: var(--danger); }
.tag--deadline { background: var(--grey-50); color: var(--grey-600); border: 1px solid var(--grey-200); }
.event__source { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.event__source--contact { width: 16rem; align-items: stretch; }
.event__source--contact .btn-entry { text-align: center; }
.contact { padding: .55rem .7rem; border-radius: 8px; background: var(--grey-50); font-size: .8rem; line-height: 1.35; color: var(--grey-600); }
.contact p { margin: 0; }
.contact__kind { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A93A3; margin-bottom: .15rem !important; }
.contact__name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.contact__address { overflow-wrap: anywhere; }
.contact__line { display: flex; align-items: flex-start; gap: .35rem; margin-top: .25rem; color: var(--navy); text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.contact__line span { min-width: 0; }
.contact__line svg { flex: none; width: 13px; height: 13px; margin-top: .15em; fill: var(--events-dark); }
.contact__line:hover span { text-decoration: underline; }
.contact-reveal { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .7rem; border-radius: 8px; border: 1px dashed var(--grey-200); background: var(--grey-50); font-size: .8rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.contact-reveal svg { flex: none; width: 14px; height: 14px; fill: var(--events-dark); }
.contact-reveal:hover { border-color: var(--events-dark); }
.contact-reveal[aria-busy="true"] { opacity: .6; cursor: progress; }
.contact-list { display: flex; flex-direction: column; gap: .5rem; }
.contact-page { max-width: 32rem; padding-top: 2rem; padding-bottom: 2rem; display: flex; flex-direction: column; gap: .75rem; }
.info { position: relative; }
.info summary { list-style: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--grey-200); color: #A3AAB6; font: italic 600 .7rem/1 Georgia, serif; cursor: pointer; user-select: none; }
.info summary::-webkit-details-marker { display: none; }
.info summary:hover, .info[open] summary { color: var(--grey-600); border-color: #A3AAB6; }
.info__box { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: max-content; max-width: 16rem; padding: .5rem .7rem; background: var(--white); border: 1px solid var(--grey-200); border-radius: 8px; box-shadow: 0 8px 22px rgba(11, 27, 61, .12); font-size: .8rem; color: var(--grey-600); text-align: left; }
.info__box a { color: var(--events-dark); font-weight: 600; text-decoration: none; }
.event__source .btn-entry { display: inline-block; font-size: .85rem; padding: .45rem 1rem; border-radius: 10px; background: var(--events); color: var(--navy); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s ease; }
.event__source .btn-entry:hover { background: var(--events-dark); color: var(--white); }
.event--cancelled .event__name { text-decoration: line-through; color: var(--grey-600); }
.event--cancelled { opacity: .75; }

.to-top-track { position: absolute; top: 100vh; bottom: 0; right: 1.25rem; width: 52px; pointer-events: none; }
.to-top { --p: 0; position: sticky; top: calc(100vh - 5rem); display: block; width: 52px; height: 52px; padding: 4px; border-radius: 50%; background: conic-gradient(var(--events) calc(var(--p) * 1turn), rgba(11, 27, 61, .15) 0); text-decoration: none; box-shadow: 0 6px 18px rgba(11, 27, 61, .3); pointer-events: auto; }
.to-top__icon { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 1.35rem; font-weight: 700; transition: background .15s ease, color .15s ease; }
.to-top:hover .to-top__icon, .to-top:focus-visible .to-top__icon { background: var(--events); color: var(--navy); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.empty { padding: 3rem 0; text-align: center; color: var(--grey-600); }
.pages { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin: 2rem 0 3rem; }
.pages a { font-weight: 600; text-decoration: none; padding: .5rem 1rem; border-radius: 10px; background: var(--white); border: 1px solid var(--grey-200); }

/* Kartenansicht (MapLibre GL) */
.map { height: min(72vh, 680px); min-height: 380px; border-radius: 14px; overflow: hidden; border: 1px solid var(--grey-200); background: var(--grey-200); }
.map__note { font-size: .8rem; color: var(--grey-600); margin: .6rem 0 2.4rem; }
.count a { margin-left: .4rem; font-weight: 600; }
.map-popup .maplibregl-popup-content { font-family: var(--font-text); padding: .8rem 1rem; border-radius: 10px; max-height: 340px; overflow-y: auto; }
.map-popup h3 { font-size: 1rem; color: var(--navy); padding-right: 1rem; }
.map-popup p { margin: .2rem 0; font-size: .8rem; color: var(--grey-600); }
.map-popup ol { list-style: none; margin: .4rem 0; padding: 0; }
.map-popup li { padding: .3rem 0; border-top: 1px solid var(--grey-200); font-size: .85rem; line-height: 1.35; }
.map-popup li a { color: var(--navy); font-weight: 600; text-decoration: none; }
.map-popup li a:hover { text-decoration: underline; }
.map-popup li span { display: block; color: var(--grey-600); font-size: .78rem; }
.map-popup li.is-cancelled a { text-decoration: line-through; }
.map-popup p a { font-weight: 600; }

.foot { background: var(--navy); color: rgba(255, 255, 255, .75); padding: 2rem 0; font-size: .85rem; }
.foot a { color: var(--white); }
.foot__links p { margin: .3rem 0; line-height: 1.7; }
.foot__links a { color: rgba(255, 255, 255, .85); text-decoration: none; white-space: nowrap; }
.foot__links a:hover { color: var(--white); text-decoration: underline; }
.foot__links strong { color: var(--white); }

@media (max-width: 680px) {
    .to-top-track { right: .75rem; }
    .filters { position: static; }
    .filters__inner > label:not(.filters__check) { flex: 1 1 100%; }
    .filters select { width: 100%; }
    .head::after { right: -9rem; width: 420px; height: 495px; }
    .head__brand img { height: 110px; border-radius: 16px; padding: .6rem .75rem; }
    .event { grid-template-columns: 68px 1fr; }
    .event__date { grid-row: 1 / span 2; }
    .event__source { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .event__source--contact { width: auto; flex-direction: column; align-items: stretch; }
    .event__source--contact .btn-entry { align-self: flex-start; }
    .event__main { padding-right: 1.4rem; }
    .event--page { grid-template-columns: 1fr; }
    .event--page .event__source { grid-column: 1; }
    .event__source { padding-top: 0; }
    .month__title { top: 0; position: static; }
}