/*
 * Gewerbeverein Meißen – individuelle Anpassungen
 *
 * Wird im Seitenlayout unter Creuva-Design › Eigene Stylesheets nach dem Creuva-CSS
 * geladen. Die Creuva-Styles liegen in Cascade-Layern, Regeln hier haben deshalb
 * immer Vorrang (ohne !important oder hohe Spezifität).
 *
 * Inhalt
 *   1. Corporate Design (Farben aus dem Logo, Typografie)
 *   2. Topbar
 *   3. Hero vollflächig (.gv-cover)
 *   4. Termine (Eventliste mit Template event_gv_card)
 *   5. Projekte & Highlights
 *   6. Kennzahlen, Partner, Arbeitsgruppen
 *   7. Projektfarben (Seiten-CSS-Klasse project-*)
 */

/* 1. Corporate Design ------------------------------------------------------ */

:root {
    /* Navy aus dem Schriftzug, Grün aus dem Burgberg des Logos */
    --scheme-primary: #0b2859;
    --scheme-accent: #2f7d32;
    --scheme-accent-text: #276b2a;
    --scheme-accent-contrast: #fff;
    --scheme-dark-accent: #9fd18a;

    --gv-green-light: #8db96b;
    --gv-blue: #5876a9;

    --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --font-weight-heading: 700;
}

h1, h2, h3, .c-hero__title {
    letter-spacing: -0.01em;
}

/* Abstand zwischen nebeneinanderliegenden Buttons */
.gv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-top: var(--space-l);
}

.gv-actions > * {
    margin: 0;
}

/* 2. Topbar ------------------------------------------------------------------ */

.l-top {
    background: var(--c-primary);
    color: #fff;
    font-size: var(--fs-small);
}

.gv-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-m);
    padding-block: var(--space-xs);
}

.gv-topbar p,
.gv-topbar ul {
    margin: 0;
}

.gv-topbar__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    padding: 0;
    list-style: none;
}

.gv-topbar__links li::before {
    display: none;
}

.gv-topbar a {
    color: inherit;
    text-decoration: none;
}

.gv-topbar a:hover,
.gv-topbar a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 40rem) {
    .gv-topbar__claim {
        display: none;
    }
}

/* 3. Hero vollflächig ------------------------------------------------------- */

.c-hero.gv-cover {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(28rem, 70vh, 42rem);
    padding-block: var(--space-xl);
    color: #fff;
}

.gv-cover .c-hero__inner {
    display: block;
}

.gv-cover .c-hero__content {
    max-width: 38rem;
}

.gv-cover .c-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.gv-cover .c-hero__media::before {
    display: none;
}

.gv-cover .c-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(6 22 51 / 0.82) 0%, rgb(6 22 51 / 0.55) 45%, rgb(6 22 51 / 0) 80%);
}

.gv-cover .c-hero__media figure,
.gv-cover .c-hero__media picture {
    height: 100%;
    margin: 0;
}

.gv-cover .c-hero__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
}

.gv-cover .c-kicker,
.gv-cover .c-hero__title,
.gv-cover .c-hero__accent,
.gv-cover .c-hero__text {
    color: #fff;
}

.gv-cover .c-hero__text {
    font-size: 1.125rem;
}

.gv-cover .c-hero__accent {
    color: var(--gv-green-light);
}

.gv-cover .c-button--secondary {
    border-color: #fff;
    background: #fff;
    color: var(--c-primary);
}

@media (max-width: 40rem) {
    .gv-cover .c-hero__media::after {
        background: linear-gradient(180deg, rgb(6 22 51 / 0.35) 0%, rgb(6 22 51 / 0.85) 100%);
    }
}

/* 4. Termine ---------------------------------------------------------------- */

.gv-events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-m);
    margin-bottom: var(--space-l);
}

.gv-events > :is(h2, h3) {
    grid-column: 1 / -1;
    margin: 0;
}

.gv-event {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    background: var(--c-surface);
    box-shadow: var(--shadow-s);
    transition: box-shadow var(--transition), transform var(--transition);
}

.gv-event:hover {
    box-shadow: var(--shadow-m);
    transform: translateY(-2px);
}

.gv-event__media {
    overflow: hidden;
}

.gv-event__media figure {
    margin: 0;
}

.gv-event__media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 0;
    object-fit: cover;
}

.gv-event__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-m);
}

.gv-event__date {
    order: -1;
    align-self: flex-start;
    margin: 0 0 var(--space-xs);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--c-accent-soft);
    color: var(--c-accent-text);
    font-size: var(--fs-small);
    font-weight: 700;
}

.gv-event__media + .gv-event__body .gv-event__date {
    margin-top: calc(-1 * var(--space-m) - 0.9rem);
    background: var(--c-surface);
    box-shadow: var(--shadow-s);
}

.gv-event__title {
    margin: 0 0 var(--space-2xs);
    font-size: 1.25rem;
}

.gv-event__location,
.gv-event__teaser {
    color: var(--c-text-muted);
    font-size: var(--fs-small);
}

.gv-event__location {
    margin: 0 0 var(--space-xs);
}

.gv-event__teaser p {
    margin: 0;
}

.gv-event__link {
    margin-top: auto;
    padding-top: var(--space-s);
    font-weight: 600;
    text-decoration: none;
}

.gv-event__link::after {
    content: " →";
}

.gv-event__media + .gv-event__body .gv-event__date {
    z-index: 1;
    pointer-events: none;
}

/* Die ganze Karte ist klickbar */
.gv-event__link::before {
    content: "";
    position: absolute;
    inset: 0;
}

/* Vergangene Termine: kompakt und zurückgenommen */
.gv-events--past {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-s);
}

.gv-events--past > :is(h2, h3) {
    color: var(--c-text-muted);
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.gv-events--past .gv-event {
    opacity: 0.7;
    box-shadow: none;
    filter: grayscale(0.8);
}

.gv-events--past .gv-event:hover {
    opacity: 1;
    filter: none;
}

.gv-events--past .gv-event__media,
.gv-events--past .gv-event__teaser,
.gv-events--past .gv-event__location {
    display: none;
}

.gv-events--past .gv-event__body {
    padding: var(--space-s);
}

.gv-events--past .gv-event__title {
    font-size: 1rem;
}

/* Bild ist ausgeblendet: Datum nicht wie bei Karten mit Bild nach oben ziehen */
.gv-events--past .gv-event .gv-event__date {
    margin-top: 0;
    background: var(--c-accent-soft);
    box-shadow: none;
}

.gv-events--past .gv-event__link {
    padding-top: var(--space-2xs);
    font-size: var(--fs-small);
}

/* Verkaufsoffene Sonntage (Template event_upcoming) */
.gv-sundays .layout_upcoming {
    display: flex;
    gap: var(--space-s);
    padding-block: var(--space-xs);
    border-bottom: 1px solid var(--c-border);
}

.gv-sundays .layout_upcoming .date {
    min-width: 6.5rem;
    font-weight: 700;
    color: var(--c-accent-text);
}

/* 5. Projekte & Highlights ---------------------------------------------------- */

.gv-project {
    border-top: 4px solid var(--gv-project-color, var(--c-accent));
}

.gv-project .c-card__category {
    color: var(--gv-project-color, var(--c-accent-text));
}

.gv-project--ostermarkt { --gv-project-color: #4f8a2b; }
.gv-project--toepfermarkt { --gv-project-color: #b5532c; }
.gv-project--strassentheater { --gv-project-color: #8a2a8f; }
.gv-project--modenacht { --gv-project-color: #8a6a1f; }
.gv-project--herbstmarkt { --gv-project-color: #b8441b; }
.gv-project--sommerfest { --gv-project-color: #0f7d7d; }

/* Große Teaser für Weinfest und Weihnacht: Text auf dem Bild */
.gv-highlight {
    min-height: 20rem;
    color: #fff;
}

.gv-highlight .c-card__media {
    position: absolute;
    inset: 0;
}

.gv-highlight .c-card__media :is(figure, picture),
.gv-highlight .c-card__media img {
    height: 100%;
}

.gv-highlight .c-card__media img {
    aspect-ratio: auto;
}

.gv-highlight .c-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

.gv-highlight .c-card__body {
    position: relative;
    justify-content: flex-end;
    padding: var(--space-l);
}

.gv-highlight :is(.c-card__category, .c-card__title, .c-card__text) {
    color: #fff;
}

.gv-highlight .c-card__title {
    font-size: var(--fs-h3);
}

.gv-highlight .c-card__text {
    flex: 0;
    font-size: var(--fs-base);
}

.gv-highlight .c-card__text > p:last-child > a:only-child {
    display: inline-flex;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--c-primary);
}

/* 6. Kennzahlen, Partner, Arbeitsgruppen --------------------------------------- */

.gv-stats {
    background-image: linear-gradient(rgb(11 40 89 / 0.92), rgb(11 40 89 / 0.92));
}

.gv-section-partner .gv-partner-intro {
    align-items: end;
}

/* Hauptpartner: zwei große Logos als Karte im Inhaltsbereich */
.gv-hauptpartner.c-logos {
    padding: var(--space-l);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-l);
}

.gv-hauptpartner .c-logos__list {
    justify-content: space-around;
    gap: var(--space-l) var(--space-xl);
}

.gv-hauptpartner .c-logos__item img {
    opacity: 1;
}

.gv-ag {
    scroll-margin-top: calc(var(--header-height) + var(--space-s));
}

/* 7. Projektfarben ---------------------------------------------------------- */

/*
 * Die Projektseiten tragen die Seiten-CSS-Klasse „project-page project-<name>“.
 * Im Inhaltsbereich werden Primär- und Akzentfarbe umgestellt; Header, Navigation,
 * Logo und Footer bleiben im Corporate Design.
 */
.project-page .l-main {
    --c-primary: var(--project-primary);
    --c-link: var(--project-primary);
    --c-accent: var(--project-accent);
    --c-accent-text: var(--project-accent-text, var(--project-primary));
    --c-accent-contrast: var(--project-accent-contrast, #fff);
    --c-accent-on-primary: color-mix(in srgb, var(--project-accent) 55%, #fff);
    --c-accent-soft: color-mix(in srgb, var(--project-accent) 16%, #fff);
    --c-accent-blob: color-mix(in srgb, var(--project-accent) 30%, #fff);
    --c-surface-muted: var(--project-muted, color-mix(in srgb, var(--project-accent) 8%, #fff));
}

.project-page .gv-cover .c-hero__accent {
    color: var(--project-highlight, var(--project-accent));
}

.project-page .gv-cover .c-hero__media::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--project-primary) 88%, transparent) 0%, color-mix(in srgb, var(--project-primary) 50%, transparent) 50%, transparent 85%);
}

/* Ostermarkt: Pastellgrün / Gelb */
.project-ostermarkt {
    --project-primary: #2f5b1c;
    --project-accent: #6aa84f;
    --project-accent-text: #3d7224;
    --project-highlight: #f4d35e;
    --project-muted: #f4f9ec;
}

/* Töpfermarkt: Terracotta / Creme */
.project-toepfermarkt {
    --project-primary: #6e3119;
    --project-accent: #c0613a;
    --project-accent-text: #9a4626;
    --project-highlight: #f1c9a5;
    --project-muted: #fbf3ea;
}

/* Straßentheater: Violett / Pink / Orange */
.project-strassentheater {
    --project-primary: #45166a;
    --project-accent: #c2307a;
    --project-accent-text: #a3245f;
    --project-highlight: #ff9f43;
    --project-muted: #f8eef7;
}

/* Modenacht: Schwarz / Gold */
.project-modenacht {
    --project-primary: #141414;
    --project-accent: #b8902f;
    --project-accent-text: #7f6119;
    --project-accent-contrast: #141414;
    --project-highlight: #e2c275;
    --project-muted: #f7f4ec;
}

/* Herbstmarkt: Rostrot / Orange / Beige */
.project-herbstmarkt {
    --project-primary: #6b2512;
    --project-accent: #d06a1c;
    --project-accent-text: #a14a10;
    --project-highlight: #f6b26b;
    --project-muted: #fbf1e6;
}

/* Sommerfest: Türkis / Gelb / Grün */
.project-sommerfest {
    --project-primary: #0b4f52;
    --project-accent: #1a9c9c;
    --project-accent-text: #0f7171;
    --project-highlight: #f7d548;
    --project-muted: #eaf7f5;
}

/* 8. Bewegung ---------------------------------------------------------------- */

/* Gesteuert über files/design/motion.js: html.gv-motion ist nur gesetzt, wenn
   „Bewegung reduzieren“ im Betriebssystem aus ist. Einblenden per Animation (nicht
   per Transition), damit die Hover-Effekte der Karten erhalten bleiben. */

@keyframes gv-rise {
    from {
        opacity: 0;
        translate: 0 1.5rem;
    }
}

@keyframes gv-fade {
    from {
        opacity: 0;
    }
}

@keyframes gv-zoom {
    from {
        scale: 1.08;
    }
}

/* Inhalte beim Hineinscrollen */
.gv-motion .gv-reveal {
    opacity: 0;
}

.gv-motion .gv-reveal.is-visible {
    opacity: 1;
    animation: gv-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--gv-delay, 0ms) both;
}

/* Hero: Text steigt nacheinander auf, das Bild zoomt langsam heraus */
.gv-motion .c-hero__content > * {
    animation: gv-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gv-motion .c-hero__content > :nth-child(2) { animation-delay: 0.12s; }
.gv-motion .c-hero__content > :nth-child(3) { animation-delay: 0.24s; }
.gv-motion .c-hero__content > :nth-child(n + 4) { animation-delay: 0.36s; }

.gv-motion .c-hero:not(.gv-cover) .c-hero__media {
    animation: gv-fade 1.2s ease-out 0.2s both;
}

.gv-cover .c-hero__media {
    overflow: hidden;
}

.gv-motion .gv-cover .c-hero__media img {
    animation: gv-zoom 12s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Kennzahlen zählen hoch: gleich breite Ziffern, damit nichts springt */
.c-stats dt,
.c-price__amount {
    font-variant-numeric: tabular-nums;
}

/* Termin-Karten: Bild zoomt beim Hover leicht wie bei den Projekt-Karten */
.gv-event__media img {
    transition: transform var(--transition);
}

.gv-event:hover .gv-event__media img {
    transform: scale(1.03);
}