/* Basis-Stylesheet. Bewusst schlank, nur Struktur. */
:root {
    color-scheme: light;
    --bg: #fcfaf5;
    --fg: #2b2224;
    --muted: #6d6266;
    --card: #ffffff;
    --line: #e9e0d3;
    --accent: #8a2c3b;
    --accent-fg: #ffffff;
    --gold: #b8892b;
    --leaf: #5f7d3a;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--fg);
}
a { color: var(--accent); }
h1 { font-size: 1.8rem; line-height: 1.2; margin: 0 0 .6rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 .8rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
main { max-width: 64rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.lead { font-size: 1.08rem; }
.meta { color: var(--muted); font-size: .9rem; margin: .3rem 0; }

/* Abschnitts-Kopf mit "alle ansehen"-Link rechts */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 .8rem; }
.section-head h2 { margin: 0; }
.section-head a { font-size: .9rem; white-space: nowrap; }

/* Städte-Chips */
.chip-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg); text-decoration: none; color: var(--fg); font-size: .92rem;
}
.chip:hover { border-color: var(--accent); }
.chip__count {
    background: var(--accent); color: var(--accent-fg); border-radius: 999px;
    padding: 0 .4rem; font-size: .78rem; font-weight: 600;
}
details.frueher { margin-top: .8rem; }
details.frueher ul { margin: .3rem 0 0; padding-left: 1.2rem; }

/* Header / Nav */
.site-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem;
    max-width: 64rem; margin: 0 auto; padding: 1rem;
}
.logo { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--fg); }
.site-nav { display: flex; gap: 1rem; }
.site-nav a { text-decoration: none; color: var(--fg); }
.site-nav a.is-active { color: var(--accent); font-weight: 600; }
.site-nav-toggle { display: none; }

@media (max-width: 640px) {
    .site-nav-toggle {
        display: block; width: 2.4rem; height: 2.4rem; border: 1px solid var(--line);
        background: var(--card); border-radius: 6px; cursor: pointer;
    }
    .site-nav-toggle span { display: block; width: 1.1rem; height: 2px; margin: 3px auto; background: var(--fg); }
    .site-nav { display: none; width: 100%; flex-direction: column; gap: .3rem; }
    .site-nav.is-open { display: flex; }
}

/* Breadcrumbs */
.breadcrumbs { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--muted); }

/* Cards & Listen */
.card {
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: 1rem; margin: 0 0 .8rem;
}
.hero { position: relative; margin: 0 0 1.4rem; }
.hero img { display: block; width: 100%; height: auto; border-radius: 12px; }
.hero figcaption {
    position: absolute; right: .5rem; bottom: .5rem;
    font-size: .68rem; line-height: 1; color: #fff;
    background: rgba(0, 0, 0, .38); border-radius: 4px;
    padding: .2rem .4rem; letter-spacing: .02em; pointer-events: none;
}

.startseite-info { margin-top: 2.5rem; }
.startseite-info h2 { font-size: 1.15rem; }
.startseite-info h3 {
    font-size: 1rem; color: var(--fg); text-transform: none; letter-spacing: 0;
    margin: 1.4rem 0 .4rem;
}
.startseite-info p { margin: 0 0 .9rem; }
.startseite-info details { margin: 0 0 .6rem; }
.startseite-info summary { cursor: pointer; font-weight: 600; }
.startseite-info details[open] summary { margin-bottom: .4rem; }

.card h2 { margin-top: 0; font-size: 1.15rem; }
.card h2 + p, .card address { margin-top: 0; }
address { line-height: 1.7; }
ul.event-list, ul.termin-list, ul.stand-list { list-style: none; padding: 0; margin: 0; }

.event-list__item { display: flex; gap: 1rem; align-items: flex-start; }
.event-list__date {
    flex: 0 0 auto; text-align: center; background: var(--accent); color: var(--accent-fg);
    border-radius: 8px; padding: .4rem .6rem; min-width: 3rem;
}
.event-list__day { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.event-list__month { display: block; font-size: .75rem; text-transform: uppercase; }
.event-list__title { font-weight: 600; font-size: 1.05rem; text-decoration: none; }

.event-list__week-divider {
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: var(--muted); border-top: 1px solid var(--line); padding-top: .8rem; margin: 1rem 0 .5rem;
}
.event-list__week-divider:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

.badge {
    display: inline-block; background: var(--bg); border: 1px solid var(--line);
    border-radius: 999px; padding: .05rem .55rem; font-size: .8rem; color: var(--muted);
    margin-right: .3rem;
}

/* Fakten-Definitionsliste */
.fakten { display: grid; grid-template-columns: 1fr; gap: .1rem; margin: 0; }
.fakten > div {
    display: grid; grid-template-columns: 10rem 1fr; gap: .5rem;
    padding: .5rem 0; border-bottom: 1px solid var(--line);
}
.fakten dt { color: var(--muted); margin: 0; }
.fakten dd { margin: 0; }
@media (max-width: 520px) { .fakten > div { grid-template-columns: 1fr; } }

/* Filterbar */
.filterbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.filterbar label { display: block; font-size: .85rem; color: var(--muted); }
.btn {
    background: var(--accent); color: var(--accent-fg); border: 0; border-radius: 6px;
    padding: .5rem .9rem; font: inherit; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn--ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
input[type="date"] {
    font: inherit; padding: .45rem .5rem; border: 1px solid var(--line);
    border-radius: 6px; background: var(--card); color: var(--fg);
}

details.card summary { cursor: pointer; font-weight: 600; }
details.card[open] summary { margin-bottom: .5rem; }

.site-footer {
    max-width: 52rem; margin: 0 auto; padding: 2rem 1rem 3rem;
    border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem;
}
.site-footer a { color: var(--muted); }

/* Formulare (Veranstaltung eintragen / Fehler melden) */
.formular label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
.formular label .opt { font-weight: 400; color: var(--muted); }
.formular input[type="text"],
.formular input[type="email"],
.formular input[type="url"],
.formular select,
.formular textarea {
    width: 100%; font: inherit; padding: .5rem .6rem;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--card); color: var(--fg);
}
.formular textarea { min-height: 7rem; resize: vertical; }
.formular .hinweis { font-size: .85rem; color: var(--muted); margin: .2rem 0 0; }
.formular .btn { margin-top: 1.4rem; }
.formular-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.flash {
    background: var(--card); border: 1px solid var(--accent); border-left: 4px solid var(--accent);
    border-radius: 8px; padding: .8rem 1rem; margin: 0 0 1.2rem;
}

/* Teilen-/Aktionsbuttons (Veranstaltungsdetailseite): normale Sektion wie
   "Infos auf einen Blick"/"Veranstalter" (h2 + Inhalt, kein umschliessendes
   Kaestchen) - ein Kaestchen um die ganze Sektion waere hier das einzige
   seiner Art auf der Seite (sonst bekommt entweder jedes Listenelement sein
   eigenes Kaestchen, oder gar keins). Ein gemeinsamer, neutraler Button-Stil
   (wie .badge: var(--card)/var(--line)/var(--fg)) statt Kanalfarben - faellt
   so nicht aus dem sonst zurueckhaltenden Farbschema der Seite, WhatsApp-Gruen
   und Navigation-Gruen verwechseln sich nicht mehr, und Teilen/Navigation/
   Melden lesen sich als eine Werkzeugleiste. Icons pro Button reichen zur
   Unterscheidung. Weitere Kanaele (Telegram, ...) brauchen nur ein
   zusaetzliches <a class="btn-share"> - kein neuer Modifier. */
.share-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn-share {
    -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 6px;
    background: var(--card); color: var(--fg);
    text-decoration: none; font-weight: 600; font-size: .85rem;
    font-family: inherit; cursor: pointer;
}
.btn-share:hover { background: var(--line); }
/* Der native Share-Button ist per JS nur bedingt sichtbar - die
   [hidden]-Regel muss hier stehen, sonst gewinnt obige .btn-share-Regel
   die Kaskade gegen den Browser-Default und das Attribut wirkt nicht. */
.btn-share[hidden] { display: none; }

/* Dezente Amazon-Partner-Karte unter "Teilen & mehr" (veranstaltung/detail.php).
   Nutzt die normale .card-Rahmenoptik; hier nur Innenlayout + Abstand nach oben,
   damit sie nicht an den Teilen-Block stoesst. Als "Werbung" gekennzeichnet,
   Akzentfarbe der Seite statt Amazon-Gelb. */
.amazon-tipp { margin-top: 2rem; }
.amazon-tipp__label {
    margin: 0 0 .55rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted);
}
.amazon-tipp__body {
    display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .85rem;
}
.amazon-tipp__icon { flex: none; font-size: 1.4rem; line-height: 1; }
.amazon-tipp__text { flex: 1 1 12rem; margin: 0; font-size: .92rem; color: var(--fg); }
.amazon-tipp__cta {
    flex: none; display: inline-flex; align-items: center;
    background: var(--accent); color: var(--accent-fg);
    border-radius: 6px; padding: .4rem .85rem;
    font-weight: 600; font-size: .85rem; text-decoration: none; white-space: nowrap;
}
.amazon-tipp__cta:hover { filter: brightness(.94); }
.amazon-tipp__hinweis {
    margin: .7rem 0 0; padding-top: .6rem; border-top: 1px solid var(--line);
    font-size: .72rem; color: var(--muted);
}

/* Werbeplatz: feste
   300x250-Groesse (IAB Medium Rectangle) - funktioniert unveraendert auf
   Mobil wie Desktop, kein separates Format noetig. */
.werbeplatz { margin-top: 2rem; text-align: center; }
.werbeplatz__label {
    margin: 0 0 .55rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted);
}
.werbeplatz__flaeche {
    width: 300px; height: 250px; margin: 0 auto;
    max-width: 100%; border-radius: 10px; overflow: hidden;
}
.werbeplatz__flaeche img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Mediadaten-Tabelle (/werbung.php) - echtes <table>, damit Zahl und
   Bezeichnung auch beim Kopieren/Vorlesen als Text sauber getrennt bleiben
   (vorher liefen z.B. "152Festivals" als reiner Text ohne Leerzeichen zusammen).
   Eigener Rahmen ums ganze Kaestchen statt nur Zeilenlinien, damit es wie eine
   richtige Tabelle wirkt statt "schwebender" Zahlen. */
.mediadaten-tabelle {
    width: 100%; max-width: 30rem; border-collapse: collapse; margin: 0 0 .3rem;
    border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.mediadaten-tabelle th, .mediadaten-tabelle td {
    padding: .65rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.mediadaten-tabelle tr:last-child th, .mediadaten-tabelle tr:last-child td { border-bottom: 0; }
.mediadaten-tabelle tr:nth-child(even) { background: var(--bg); }
.mediadaten-tabelle th { text-align: left; font-weight: 400; color: var(--muted); }
.mediadaten-tabelle td { text-align: right; font-size: 1.2rem; font-weight: 700; color: var(--accent); white-space: nowrap; }