/* Weinfestfinder: Ergaenzungen zum Basis-Stylesheet. */
.wt { font-size: .72rem; text-transform: uppercase; display: block; opacity: .85; }
.tag-eintrag { padding: .35rem 0; border-top: 1px solid var(--line); }
.tag-eintrag:first-child { border-top: 0; padding-top: 0; }
.zeit { font-weight: 600; }
.badge.typ { border-color: var(--typ, var(--line)); color: var(--fg); }
.badge.typ::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--typ, #888); margin-right: .3rem; }
.filterbar { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; }
.filtergruppe { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.filterlabel { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-right: .2rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip--wahl input { position: absolute; opacity: 0; pointer-events: none; }
.chip--wahl { position: relative; cursor: pointer; }
.chip--wahl:has(input:checked) { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.chip--wahl .punkt { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .25rem; }
.chip--leer { opacity: .55; }
.filterbar input[type=text], .filterbar select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); }
.ansicht-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .8rem 0; }
.umschalter { display: flex; gap: .4rem; }
.umschalter .chip[aria-pressed=true] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.karte-wrap { margin: .5rem 0 1rem; }
.karte { width: 100%; border: 1px solid var(--line); border-radius: 10px; z-index: 0; }
.phasen { list-style: none; padding: 0; margin: 0; }
.phasen li { padding: .5rem 0; border-top: 1px solid var(--line); }
.phasen li:first-child { border-top: 0; }
.phasen li.vorbei { opacity: .6; }
.pin { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
[hidden] { display: none !important; }

/* Heller Weinlook: Elfenbein, Bordeaux, Gold, Blattgruen */
body { background: linear-gradient(180deg, #fff 0, var(--bg) 14rem) no-repeat, var(--bg); }
h1, h2, .logo { font-family: Georgia, "Times New Roman", serif; letter-spacing: .005em; }
h1 { font-size: 2.1rem; color: var(--accent); }
h2 { color: #4a2a31; }
.site-header { border-bottom: 3px double var(--gold); background: #fff; max-width: none; padding: .9rem max(1rem, calc((100% - 64rem) / 2 + 1rem)); }
.logo { color: var(--accent); font-size: 1.35rem; }
.site-nav a { color: var(--fg); }
.site-nav a:hover { color: var(--accent); }
.card { box-shadow: 0 1px 2px rgba(80, 40, 40, .05); border-color: var(--line); }
.event-list__date { background: var(--accent); border-radius: 8px; }
.event-list__week-divider { color: var(--gold); font-family: Georgia, serif; border-top-color: var(--line); }
.event-list__title { color: var(--accent); }
.badge.typ { background: #fff; }
.chip { background: #fff; }
.chip:hover { border-color: var(--gold); }
.chip--wahl:has(input:checked), .umschalter .chip[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; }
.filterbar { background: #fff; border-color: var(--line); }
.btn { background: var(--accent); }
.btn--ghost { background: transparent; color: var(--accent); }
.site-footer { border-top: 1px solid var(--line); text-align: center; padding: 1.5rem 1rem 2.5rem; }
.leaflet-container { font-family: inherit; }
@media (max-width: 40rem) { h1 { font-size: 1.7rem; } }

.tage-kompakt { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .2rem .8rem; font-size: .92rem; }
.tage-kompakt .tag { font-weight: 600; display: inline-block; min-width: 5.6rem; }


/* ===== Startseite: Hero und Tageszeilen ===== */
.hero-band { background: linear-gradient(135deg, #f6e6e2 0%, #fbf1e2 55%, #fffdf8 100%); border: 1px solid var(--line); border-radius: 16px; padding: 1.8rem 1.6rem 1.4rem; margin-bottom: 1.2rem; position: relative; overflow: hidden; }
.hero-band::after { content: "🍇"; position: absolute; right: 1.2rem; top: .4rem; font-size: 4.5rem; opacity: .13; transform: rotate(12deg); }
.hero-band h1 { margin: 0 0 .4rem; font-size: 2.4rem; }
.hero-band .lead { max-width: 40rem; margin: 0 0 1rem; color: #4a3a3e; }
.hero-band__regionen { align-items: center; }
.hero-band .chip { background: rgba(255,255,255,.85); }
.chip__count { background: var(--gold); color: #fff; }

.event-list__item { padding: .8rem 1rem; align-items: stretch; }
.event-list__body { flex: 1 1 auto; min-width: 0; }
.tag-eintrag { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) 13.5rem; gap: .2rem 1rem; align-items: center; padding: .55rem 0; }
.tag-eintrag .te-haupt { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.tag-eintrag .te-ort { color: var(--muted); font-size: .92rem; }
.tag-eintrag .te-ort a { color: inherit; }
.tag-eintrag .te-zeit { text-align: right; white-space: nowrap; }
@media (max-width: 42rem) {
    .tag-eintrag { grid-template-columns: 1fr; }
    .tag-eintrag .te-zeit { text-align: left; }
    .hero-band h1 { font-size: 1.9rem; }
}

/* ===== Eventseite ===== */
.event-hero { padding: .4rem 0 1.2rem; }
.event-hero h1 { font-size: 2.6rem; margin: .5rem 0 .2rem; }
.event-hero__ort { margin: 0; font-size: 1.1rem; color: var(--muted); font-family: Georgia, serif; }
.event-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; align-items: start; }
.event-layout--einspaltig { grid-template-columns: minmax(0, 40rem); }
.event-side { display: flex; flex-direction: column; gap: 1rem; }
.event-side .card { margin: 0; }
.event-side h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
.event-side h3 { margin: 1rem 0 .4rem; }
.event-side .hinweis { margin-top: .8rem; }
.event-text { padding: 1.8rem 2rem; margin: 0; }
.event-text section + section { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.event-text h2 { font-size: 1.3rem; margin: 0 0 .6rem; color: var(--accent); }
.event-text p { margin: 0 0 .8rem; font-size: 1.04rem; line-height: 1.7; }
.event-text__stand { margin-top: 1.6rem !important; padding-top: 1rem; border-top: 1px dashed var(--line); font-size: .85rem !important; }
.ortinfo { padding: 0; overflow: hidden; }
.ortinfo .karte-wrap { margin: 0; }
.ortinfo .karte { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.ortinfo .fakten { margin: 0; padding: .4rem 1rem .6rem; }
.tage-kompakt { grid-template-columns: 1fr 1fr; }
@media (max-width: 56rem) {
    .event-layout { grid-template-columns: 1fr; }
    .event-side { position: static; order: -1; }
    .event-hero h1 { font-size: 2rem; }
    .event-text { padding: 1.2rem 1.1rem; }
}

.event-list__date { align-self: flex-start; }

.tage-kompakt { gap: .25rem .4rem; }
.tage-kompakt .tag { min-width: 0; margin-right: .25rem; }
.ortinfo .fakten > div { display: grid; grid-template-columns: 6.2rem 1fr; gap: .5rem; }

.region-lead { max-width: 44rem; margin: .5rem 0 0; }
span.chip--leer { cursor: default; }
span.chip--leer:hover { border-color: var(--line); }

/* ===== Regionsseite ===== */
.region-hero { background: linear-gradient(135deg, #f3dfda 0%, #fbeedd 55%, #fffdf8 100%); border: 1px solid var(--line); border-radius: 18px; padding: 1.6rem 1.8rem 1.6rem; margin: .4rem 0 1.8rem; position: relative; overflow: hidden; }
.region-hero::after { content: "🍇"; position: absolute; right: 1.4rem; top: .6rem; font-size: 5rem; opacity: .12; transform: rotate(12deg); }
.region-hero h1 { font-size: 3rem; margin: .5rem 0 .3rem; }
.region-hero .lead { max-width: 42rem; margin: 0 0 1.4rem; font-size: 1.15rem; color: #4a3a3e; }
.steckbrief { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem; margin: 0; }
.steckbrief > div { background: rgba(255,255,255,.85); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; }
.steckbrief dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 .15rem; }
.steckbrief dd { margin: 0; font-family: Georgia, serif; font-size: 1.1rem; color: var(--accent); font-weight: 600; }
.region-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2.4rem; align-items: start; }
.region-text section { margin-bottom: 1.8rem; }
.region-text h2 { margin: 0 0 .5rem; font-size: 1.45rem; color: var(--accent); }
.region-text h2::before { content: ""; display: block; width: 2.6rem; height: 2px; background: var(--gold); margin-bottom: .8rem; }
.region-text p { font-size: 1.06rem; line-height: 1.75; margin: 0 0 .9rem; max-width: 42rem; }
.region-side .card h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
.orteliste { list-style: none; margin: 0; padding: 0; }
.orteliste li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.orteliste li:first-child { border-top: 0; }
.orteliste a { font-weight: 600; }
.region-kalender { margin-top: 1.5rem; padding-top: .5rem; border-top: 3px double var(--gold); }
.region-kalender > h2 { font-size: 1.7rem; }
.mehr { text-align: center; margin: 1.2rem 0 0; }
@media (max-width: 56rem) {
    .region-layout { grid-template-columns: 1fr; gap: 1.2rem; }
    .region-side { order: -1; }
    .region-hero { padding: 1.2rem 1.1rem; }
    .region-hero h1 { font-size: 2.2rem; }
}

.orteliste .badge.typ { flex: 0 0 auto; }
a.badge { text-decoration: none; color: var(--muted); }
a.badge:hover { border-color: var(--gold); }
.orteliste li { flex-wrap: wrap; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: .5rem 1rem; z-index: 1000; }
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, .chip--wahl:has(input:focus-visible), input:focus-visible, select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.start-text { margin-top: 3rem; padding-top: 1.5rem; border-top: 3px double var(--gold); }

/* Navigation bleibt auch am Handy sichtbar (zwei Links, kein Menue-Knopf noetig). */
@media (max-width: 640px) {
    .site-nav { display: flex; width: auto; flex-direction: row; gap: .9rem; }
}

/* Orteliste mit PLZ: PLZ links, Ortsname daneben (volle Breite, darf umbrechen), Anzahl darunter */
.orteliste--plz li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: baseline; gap: .1rem .6rem; }
.orteliste--plz .plz { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.orteliste--plz .meta { grid-column: 2; font-size: .85rem; white-space: nowrap; }