/* ==========================================================================
   Public homepage — Just Gospel Frankfurt
   ========================================================================== */

:root {
    --brand: #c14468;
    /* Von --brand abgeleitet, nicht literal — seit die Startseite
       _brand_boot.html einbindet, zieht eine konfigurierte BRAND_FARBE hier
       durch. Vorbild ist intern.css, das dieselbe Ableitung führt. */
    --brand-dark: color-mix(in srgb, var(--brand) 85%, black);
    --brand-soft: color-mix(in srgb, var(--brand) 8%, white);

    /* Zweitfarbe: die Schals im Chor-Foto tragen Gold und Orange. Bewusst NICHT
       aus --brand abgeleitet — bei einer anders konfigurierten Marke soll der
       Kontrapunkt bleiben. --gold trägt nur Flächen und Ränder (2,7:1 auf Weiß),
       Schrift braucht --gold-text; --gold-band ist für das Roséband gerechnet
       (4,6:1 darauf). --gold ist derselbe Wert, den intern.css als --stimme-s
       führt („Sopran — Gold"). */
    --gold: #c28500;
    --gold-text: color-mix(in srgb, var(--gold) 78%, black);
    --gold-soft: color-mix(in srgb, var(--gold) 45%, white);
    --gold-band: color-mix(in srgb, var(--gold) 22%, white);

    /* Warm statt neutral: das alte Violett-Schwarz wirkte neben Creme grau. */
    --ink: #241d1a;
    --ink-soft: #4b433e;
    --muted: #6f665f;
    --line: #e8dfd4;
    --paper: #ffffff;
    --paper-alt: #fbf6ef;

    /* Das Kontaktband. Der Abschlag von 10 % ist kein Geschmack: auf reinem
       --brand trägt Weiß nur 4,89:1, dann dürfte kein Zeichen mehr transparent
       sein; bei 90 % sind es 5,79:1 und die Fläche bleibt rosé. */
    --band: color-mix(in srgb, var(--brand) 90%, black);

    /* Warmes Dunkel für den Hero — Hintergrund hinter dem Foto (Ladezustand)
       und die Fläche des Ghost-Buttons. Über dem Bild selbst liegt kein
       Schleier mehr; ersetzt das kalte rgba(12,10,14,…), das dem Bild Rosa und
       Gold ausgesogen hat. */
    --hero-shade: #2a1a12;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
        "Times New Roman", serif;
    --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica,
        Arial, sans-serif;

    --shell: 1160px;
    --pad: clamp(1.25rem, 5vw, 2.5rem);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-soft);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--brand);
}

/* === Header ============================================================== */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem var(--pad);
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease,
        padding 0.3s ease;
}

.site-header .brand {
    display: flex;
    align-items: center;
}

/* Über dem Foto die runde Bildmarke, im weissen Zustand der Schriftzug — und
   zwar die markenfarbene Wortmarke (JG-Frankfurt-color.svg): die schwarze
   stünde neben der farbigen Bildmarke als Bruch, und die helle des Heros
   (JG-Frankfurt-transparent.svg) verläuft nach rechts ins Weiße und verlöre
   auf dem weißen Kopf „FRANKFURT" und das Ausrufezeichen. */
.site-header .brand-word {
    display: none;
    width: 132px;
}

.site-header.is-solid .brand-mark {
    display: none;
}

.site-header.is-solid .brand-word {
    display: block;
}

.site-header .brand-mark {
    width: 52px;
    height: auto;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
    transition:
        width 0.3s ease,
        filter 0.3s ease;
}

.site-nav {
    display: flex;
    align-items: center;
}

.site-nav a {
    color: var(--ink);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Milchglas statt Kopfschleier, und seit das Band nur noch das Login trägt
   sitzt das Glas am Knopf selbst. Die Leiste liegt mal über der dunklen Decke,
   mal über dem hellen Giebel; unter dem Glas ist der Grund hell und ruhig, und
   markendunkle Schrift trägt über beiden. Kein dunkler Verlauf über dem Foto
   mehr — nur die Fläche hinter dem Knopf. */
.site-nav .nav-login {
    padding: 0.55rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    color: var(--brand-dark);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.25s ease;
}

.site-nav .nav-login:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* solid state — set by a small inline script once the page is scrolled */
.site-header.is-solid {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 1px 0 var(--line);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.site-header.is-solid .brand-mark {
    width: 40px;
    filter: none;
}

/* Auf weißem Grund trägt der Kopf selbst — das Glas hätte dort nichts mehr zu
   tun und würde nur als milchiger Fleck stehen; der Knopf wird wieder Rahmen. */
.site-header.is-solid .site-nav .nav-login {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--brand);
}

.site-header.is-solid .site-nav .nav-login:hover {
    background: var(--brand);
    color: #fff;
}

/* === Hero ================================================================ */

.hero {
    position: relative;
    min-height: min(92vh, 900px);
    display: flex;
    align-items: flex-end;
    padding: 8rem var(--pad) clamp(3rem, 8vh, 6rem);
    overflow: hidden;
    background: var(--hero-shade);
}

.hero-media,
.hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
}

/* Das Foto steht ungeschleiert im Hero: der Kopf trägt sein Glas an der
   Navigation selbst, die beiden Buttons ihre eigene Fläche, und sonst liegt
   nichts mehr über dem Bild. Was bleibt, ist die Wortmarke — sie ist ein
   Logotyp und trägt sich mit ihrem Schlagschatten von allein. */
.hero-inner {
    position: relative;
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    color: #fff;
}

.eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    padding-bottom: 0.9rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid var(--gold);
}

.hero h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.4rem, 6.5vw, 4.5rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #fff;
    max-width: 16ch;
}

/* Wortmarke statt gesetzter Headline — der Schriftzug des Logos */
.hero-wordmark img {
    width: clamp(240px, 38vw, 480px);
    height: auto;
    filter: drop-shadow(0 6px 22px rgba(26, 12, 6, 0.7));
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2.25rem;
}

/* === Buttons ============================================================= */

.btn {
    display: inline-block;
    padding: 0.85rem 1.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    border: 1px solid transparent;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.btn-primary {
    background: var(--brand);
    color: #fff;
}

.btn-primary:hover {
    background: var(--brand-dark);
}

.btn-ghost {
    /* Der einzige Schutz, den ein Button selbst trägt: über dem hellen Holzboden
       wäre ein weißer Rand ohne Fläche nicht zu sehen. Das Glas ist dunkel, weil
       die Schrift weiß bleibt — helles Glas hieße dunkle Schrift nur hier. */
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
    background: color-mix(in srgb, var(--hero-shade) 42%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.btn-ghost:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
}

/* === Sections ============================================================ */

section {
    padding: clamp(3.5rem, 9vw, 6.5rem) var(--pad);
}

.content {
    max-width: var(--shell);
    margin: 0 auto;
}

.section-alt {
    background: var(--paper-alt);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section-head {
    max-width: 46rem;
    margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.section-head .eyebrow {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    line-height: 1.15;
    color: var(--ink);
}

h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.35rem;
    color: var(--ink);
}

/* === About =============================================================== */

.about {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
}

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--brand);
    border-radius: 2px;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    box-shadow: 0 12px 30px rgba(42, 26, 20, 0.06);
}

.card h2 {
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    margin-bottom: 0.9rem;
}

.card a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
}

.card a:hover {
    border-bottom-color: var(--brand);
}

/* Die Karte, die zum Mitmachen einlädt, trägt Gold statt Markenrosa: sie ist die
   einzige Stelle im Fließteil, die eine Einladung ausspricht, und soll nicht wie
   eine weitere Textkarte aussehen. Nur die Oberkante — drei Pixel sind ein
   Akzent, kein Anstrich. */
.card-aufnahme {
    border-top-color: var(--gold);
}

/* === Concerts ============================================================ */

.concert-list {
    border-top: 1px solid var(--line);
}

.concert-item {
    display: grid;
    grid-template-columns: 9.75rem 1fr;
    align-items: baseline;
    gap: 0 2rem;
    padding: 1.6rem 0.75rem;
    border-bottom: 1px solid var(--line);
    transition: background 0.25s ease;
}

.concert-item:hover {
    background: color-mix(in srgb, var(--brand) 4%, transparent);
}

.concert-item .date {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
}

.concert-item h3 {
    margin: 0;
}

.concert-item .location {
    grid-column: 2;
    color: var(--muted);
    font-size: 0.95rem;
}

/* Der öffentliche Ankündigungstext aus `Termin.extern`. `grid-column: 2` wie
   `.location` — ohne das rutscht der Block in Spalte 1 unter das Datum. Die
   Altdaten enthalten URLs von über 100 Zeichen. */
.concert-info {
    grid-column: 2;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.no-events {
    padding: 1.6rem 0.75rem;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

/* Aufruf zur Auftritts-Mailingliste unter der Terminliste */
.concert-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(1.5rem, 4vw, 2.25rem);
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--paper);
}

.concert-cta p {
    margin: 0;
    color: var(--muted);
}

/* === Gallery band ======================================================== */

.gallery-band {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 2px;
    overflow: hidden;
    background: var(--hero-shade);
}

.gallery-band img {
    width: 100%;
    height: clamp(240px, 42vw, 520px);
    object-fit: cover;
    object-position: 50% 45%;
    transition: transform 6s ease;
}

.gallery-band:hover img {
    transform: scale(1.03);
}

/* === Contact ============================================================= */

/* Ein warmes Markenband statt der schwarzen Fläche. Alle Werte sind auf Weiß
   gerechnet: --band trägt 5,79:1, deshalb steht hier durchgehend volles Weiß.
   Die alte 0,78-Deckung wäre auf dem Band nur 4,39:1 gewesen. */
#contact {
    background: var(--band);
    color: #fff;
}

#contact h2,
#contact h3 {
    color: #fff;
}

/* Gold als Zweitfarbe. Als Schrift braucht es hier das sehr helle --gold-band
   (4,6:1); die Linie darf kräftiger sein — --gold-soft liegt mit 3,57:1 über
   der 3:1-Schwelle für Nicht-Text. */
#contact .eyebrow {
    color: var(--gold-band);
    border-bottom-color: var(--gold-soft);
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
}

.contact-card {
    padding-top: 1.5rem;
    /* 0,16 war schon gegen Schwarz kaum zu sehen, gegen Rosé erst recht nicht. */
    border-top: 2px solid rgba(255, 255, 255, 0.3);
}

.contact-card h3 {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.6rem;
}

.contact-card a {
    color: #fff;
    text-decoration: none;
    /* war var(--brand) — auf einem Markenband unsichtbar */
    border-bottom: 1px solid var(--gold-soft);
}

.contact-card a:hover {
    /* war var(--brand) — auf einem Markenband unsichtbar */
    color: var(--gold-band);
    border-bottom-color: var(--gold-band);
}

/* === Footer ============================================================== */

/* Hell statt schwarz: Foto und Roséband tragen den Auftritt, der Fuß ist der
   ruhige Abschluss — Creme wie .section-alt, damit die Seite mit einer Fläche
   endet, die sie oben schon zeigt. */
footer {
    background: var(--paper-alt);
    color: var(--ink-soft);
    padding: 2.5rem var(--pad);
    border-top: 1px solid var(--line);
}

.footer-content {
    max-width: var(--shell);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

/* Die schwarze Wortmarke (JG-Frankfurt.svg) — die helle des Heros wäre auf
   Creme unsichtbar. Voll deckend statt 0,85: die Transparenz war für Weiß auf
   Schwarz gedacht und macht Schwarz auf Creme nur grau. */
.footer-logo img {
    width: 150px;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
}

.footer-links a {
    color: var(--ink-soft);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--brand);
}

.copyright {
    font-size: 0.8rem;
    /* 5,22:1 auf Creme — das alte rgba(255,255,255,0.45) auf Schwarz stand
       bei 3,4:1 und damit unter WCAG AA. */
    color: var(--muted);
    width: 100%;
    text-align: center;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

/* === Responsive ========================================================== */

@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }

    .site-header {
        padding: 0.75rem 1.1rem;
    }

    .site-nav a {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }

    .site-nav .nav-login {
        padding: 0.45rem 1.1rem;
    }

    .hero {
        min-height: 84vh;
        padding-top: 6rem;
    }

    .concert-item {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .concert-item .date {
        flex-direction: row;
        gap: 0.5rem;
    }

    .concert-item .location {
        grid-column: 1;
    }

    .concert-info {
        grid-column: 1;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 460px) {
    .site-header .brand-mark,
    .site-header.is-solid .brand-mark {
        display: block;
        width: 38px;
    }

    /* auf schmalen Displays bleibt es bei der Bildmarke */
    .site-header .brand-word,
    .site-header.is-solid .brand-word {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .gallery-band img,
    .site-header {
        transition: none;
    }
}