/* Live-Puls für die ganze Website (03.10.2026): die Bildsprache der Startseite auf allen öffentlichen Seiten.
   Wird in base.html nach allen anderen Stylesheets geladen und überschreibt nur das Erscheinungsbild:
   Schriften (selbst gehostet, CSP font-src 'self', SIL OFL 1.1), dunkle Navigation, Pill-Buttons, Eyebrows in
   Klammern, schmale Display-Überschriften mit kursivem Akzentwort, Seitenköpfe mit Festivalfoto
   (components/page_photo.html), das ruhige Festival-Band (components/festival_band.html) und ein Lime-Schluss.
   Bewegung nur ohne «Bewegung reduzieren»; was läuft, endet nach höchstens 4.5 s oder folgt dem Scrollen. */

/* Hauptschrift Archivo (Omnibus-Type, SIL OFL 1.1, 05.10.2026): kostenlose Alternative zur CI-Schrift Halyard Micro
   (Black für Titel, Regular für Text, Marketing-Konzept Bamert.io). Variabel zugeschnitten auf Breite 100–125 % und
   Gewicht 400–900 (scratchpad fonts/, fontTools): breit und schwarz für Titel wie Halyard Micro Black. */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 900;
    font-stretch: 100% 125%;
    font-display: swap;
    src: url("/static/fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 900;
    font-stretch: 100% 125%;
    font-display: swap;
    src: url("/static/fonts/archivo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/instrument-serif-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Michael, 03.10.2026: eine Hauptschrift (seit 05.10.2026 Archivo, serifenlos, wie die CI-Schrift Halyard Micro) und höchstens eine Akzentschrift
   (Instrument Serif, nur für das eine Akzentwort eines Titels); Schwarz/Weiss mit Lime als SENS7-Akzent, die Farben
   der Sinne erst weiter unten im Sinnes-Teil der Startseite. Die Magenta-Variablen behalten ihre Namen, weil Admin
   und Portal (eigene Vorlagen, ohne site.css) sie weiter nutzen; auf der Website zeigen sie Ink bzw. Lime. */
:root {
    --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    /* Breite der Titel: breit wie Halyard Micro Black; Grössen der früher schmalen Titel sind darauf umgerechnet */
    --display-stretch: 110%;
    --font-accent: "Instrument Serif", Georgia, "Times New Roman", serif;
    --color-soft: #f3f3f1;           /* fast weiss, ohne Beige */
    --color-line: #dcdcd8;
    --color-muted: #646469;          /* 5.9:1 auf Weiss, 5.3:1 auf --color-soft */
    --color-muted-on-dark: #b6b6bb;  /* 8.8:1 auf Ink */
    --color-magenta: var(--color-ink);
    --color-magenta-brand: var(--color-ink);
    --color-magenta-on-dark: var(--color-lime);
    --color-error: #b8174f;          /* nur für Fehler in Formularen: 6.4:1 auf Weiss */
    --radius-sm: 10px;
    --radius-md: 16px;
    --s7-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Fehler bleiben als Fehler erkennbar (sie nutzten bisher Magenta) */
.field-error,
.form-status[data-state="error"] {
    color: var(--color-error);
}

body {
    font-family: var(--font-display);
}

/* ── Überschriften: breit und schwarz wie Halyard Micro Black (CI), das letzte Wort im Seitenkopf kursiv (|accent) ── */
h1,
h2,
.section__title {
    font-stretch: var(--display-stretch);
    font-weight: 900;
    letter-spacing: -0.01em;
}

h3 {
    font-weight: 700;
}

/* Archivo breit und schwarz ist rund 15 % breiter als die alte Systemschrift: die Grössen der Abschnitts- und
   Seitentitel sind darauf eingestellt, damit lange Wörter («Standflächen», «marketingu,») ganz auf eine Zeile passen */
.section__title,
:is(.section__intro, .audience-layout, .stand-layout, .proof-layout, .faq-layout, .section-heading) h2 {
    font-size: clamp(1.75rem, 4.1vw, 3.45rem);
}

@media (min-width: 621px) {
    .has-photo:not(.exhibitor-hero) h1 {
        font-size: clamp(2.2rem, 5.2vw, 4.8rem);
    }
}

/* dieselben Obergrenzen für die Titel, die sich an ihre Spalte anpassen (--fit-em, base.css und exhibitors.css) */
@supports (width: 1cqi) {
    .section__header .section__title,
    .section__intro h2 {
        font-size: clamp(1.25rem, 100cqi / var(--fit-em, 0.01), clamp(1.75rem, 4.1vw, 3.45rem));
    }

    .form-section__info h2 {
        font-size: clamp(1.25rem, 100cqi / var(--fit-em, 0.01), clamp(1.9rem, 4.2vw, 3.8rem));
    }

    .exhibitor-hero h1 {
        font-size: clamp(1.25rem, min(100cqi / var(--fit-em, 0.01), 300cqi / var(--fit-len, 0.01)), clamp(2.1rem, 5.8vw, 4.8rem));
    }

    .profile-heading h1 {
        font-size: clamp(1.25rem, 100cqi / var(--fit-em, 0.01), clamp(2.3rem, 5.8vw, 5rem));
    }
}

/* Akzentschrift gezielt (Michael, 07.10.2026): die kursive Instrument Serif nur noch im Seitentitel (h1) und im
   Hero der Startseite – einmal pro Seite. In Abschnittstiteln ist das Akzentwort nur noch farbig bzw. markiert. */
.accent {
    color: var(--accent-color, var(--color-lime));
    /* das Akzentwort bleibt ganz («er-leben» sah live zerrissen aus); nur im Notfall bricht es ohne Strich */
    hyphens: manual;
}

h1 .accent {
    font-family: var(--font-accent);
    font-stretch: 100%;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
}

/* Die schmale Schrift braucht ab Tablet-Breite keine Silbentrennung mehr (base.css trennt für schmale Handys);
   «Marketing-Ent-scheider» oder «kon-zentriert» in grossen Titeln wirkten zerhackt. */
@media (min-width: 621px) {
    body :is(h1, h2, .section__title),
    .faq-layout .section__title {
        hyphens: manual;
    }
}

/* ── Navigation: dunkel auf allen Seiten, auf der Startseite durchscheinend über dem Foto ── */
.nav {
    --focus-ring: var(--color-lime);
    background: rgba(23, 23, 32, 0.94);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.page-home .nav {
    background: rgba(23, 23, 32, 0.55);
}

.nav__logo,
.lang-switcher__toggle,
.nav__hamburger {
    color: var(--color-white);
}

.lang-switcher__toggle,
.nav__hamburger {
    border-color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 941px) {
    .nav__link {
        color: rgba(255, 255, 255, 0.88);
    }

    .nav__link:hover,
    .nav__link--active {
        color: var(--color-lime);
    }
}

@media (max-width: 940px) {
    .nav__menu {
        background: var(--color-ink);
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }

    .nav__menu .nav__link {
        color: var(--color-white);
    }

    .nav__menu .nav__link--active {
        color: var(--color-lime);
    }

    .nav__langs-label {
        color: var(--color-muted-on-dark);
    }

    .nav__item--langs {
        border-top-color: rgba(255, 255, 255, 0.12);
    }

    .nav__lang {
        border-color: rgba(255, 255, 255, 0.4);
        color: var(--color-white);
    }

    .nav__lang--active {
        background: var(--color-lime);
        border-color: var(--color-lime);
        color: var(--color-ink);
    }
}

/* ── Buttons und Eyebrows ── */
.btn {
    border-radius: 999px;
    font-weight: 700;
}

.btn--lg {
    min-height: 52px;
    padding-inline: 26px;
}

.btn--sm {
    padding-inline: 16px;
}

.eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.eyebrow::before {
    content: "[\00a0";
}

.eyebrow::after {
    content: "\00a0]";
}

/* ── Seitenköpfe mit Festivalfoto ── */
.has-photo {
    --eyebrow-color: var(--color-lime);
    --muted-color: var(--color-muted-on-dark);
    --focus-ring: var(--color-lime);
    background: var(--color-ink);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    isolation: isolate;
    justify-content: flex-end;
    min-height: clamp(520px, 64vh, 720px);
    overflow: hidden;
    /* unten Platz für das Festival-Band, das gedreht 20–40 px in den Kopf ragt */
    padding-bottom: clamp(56px, 7vw, 100px);
    position: relative;
}

/* der Aussteller-Kopf behält sein knappes Mass oben (Titel, Text und Knopf im ersten Bildschirm, E2E R3 N-04) */
.has-photo:not(.exhibitor-hero) {
    padding-top: clamp(56px, 8vw, 128px);
}

.page-photo {
    background: var(--color-ink);
    inset: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.page-photo picture,
.page-photo img {
    display: block;
    height: 100%;
    width: 100%;
}

.page-photo img {
    filter: brightness(0.42) saturate(1.12) contrast(1.05);
    max-width: none;
    object-fit: cover;
}

/* Raster wie im Hero der Startseite nur noch angedeutet (07.10.2026; 10.10.2026 nochmals halbiert) */
.page-photo::after {
    background:
        radial-gradient(rgba(23, 23, 32, 0.07) 0.9px, transparent 1.3px) 0 0 / 4px 4px,
        linear-gradient(180deg, rgba(23, 23, 32, 0.35) 0%, rgba(23, 23, 32, 0.05) 30%, rgba(23, 23, 32, 0.4) 60%, rgba(23, 23, 32, 0.92) 100%);
    content: "";
    inset: 0;
    position: absolute;
}

.page-photo__credit {
    bottom: 10px;
    color: var(--color-muted-on-dark);
    font-size: 0.72rem;
    margin: 0;
    position: absolute;
    right: 16px;
}

.has-photo h1 {
    color: var(--color-white);
}

.has-photo .hero__subtitle,
.has-photo .hero__lead,
.has-photo .exhibitor-hero__text,
.has-photo .directory-hero__intro,
.has-photo .register-hero__intro,
.has-photo.content-hero p {
    color: rgba(255, 255, 255, 0.86);
}

.has-photo .event-strip {
    border-color: rgba(255, 255, 255, 0.28);
}

.has-photo .btn--secondary {
    background: var(--color-white);
    color: var(--color-ink);
}

/* Karten im Seitenkopf: Glas über dem Foto */
.has-photo :is(.visitor-status, .programme-status, .blog-status, .source-card, .registration-status, .directory-status, .hero__media) {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(23, 23, 32, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    box-shadow: none;
    color: var(--color-white);
}

/* Titel der Seitenkarten in derselben schmalen Schrift wie die Überschriften */
:is(.visitor-status, .programme-status, .blog-status, .source-card, .registration-status, .directory-status) strong {
    font-stretch: var(--display-stretch);
    font-weight: 700;
}

/* ── Festival-Band unter dem Seitenkopf ── */
/* der leicht gedrehte Streifen ragt seitlich über den Rand; der Rahmen schneidet ihn waagrecht ab */
.festival-band-frame {
    overflow-x: clip;
    position: relative;
    z-index: 2;
}

.festival-band {
    background: var(--color-lime);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    color: var(--color-ink);
    font-size: clamp(0.71rem, 1.28vw, 1.06rem);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    line-height: 1.1;
    margin: -18px -3% -8px;
    overflow: hidden;
    padding: 12px 0;
    position: relative;
    text-transform: uppercase;
    transform: rotate(-1.4deg);
    white-space: nowrap;
    z-index: 2;
}

.festival-band__track,
.festival-band__set {
    display: flex;
    flex: none;
}

.festival-band__set {
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
    padding-right: clamp(16px, 2vw, 28px);
}

.festival-band__mark {
    fill: currentColor;
    flex: none;
    height: 0.8em;
    width: auto;
}

/* ── Abschnitte und Karten ── */
.section__title {
    line-height: 0.96;
}

.section--dark .accent,
.content-hero .accent {
    color: var(--color-lime);
}

/* Schluss jeder Seite in Lime wie auf der Startseite */
.action-section {
    --eyebrow-color: var(--color-ink);
    --muted-color: rgba(23, 23, 32, 0.78);
    --focus-ring: var(--color-ink);
    background: var(--color-lime);
    color: var(--color-ink);
}

.action-section .eyebrow,
.action-section .eyebrow--light {
    color: var(--color-ink);
}

.action-section p:not(.eyebrow) {
    color: rgba(23, 23, 32, 0.8);
}

.action-section__title {
    font-size: clamp(1.75rem, 4.7vw, 4.03rem);
    font-stretch: var(--display-stretch);
    line-height: 0.9;
}

.action-section .btn--primary {
    background: var(--color-ink);
    color: var(--color-white);
}

.action-section .btn--outline,
.action-section .btn--outline:hover {
    border-color: var(--color-ink);
    color: var(--color-ink);
}

/* ── Bewegung ── */
@keyframes s7-photo-in {
    from { transform: scale(1.1); }
    to { transform: none; }
}

@keyframes s7-site-rise {
    from { opacity: 0; translate: 0 32px; }
    to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
    /* das Foto setzt sich in 4.5 s, danach steht es (keine Dauerbewegung, WCAG 2.2.2) */
    .page-photo img {
        animation: s7-photo-in 4.5s var(--s7-ease) both;
    }
}

/* Auftauchen beim Scrollen, rein in CSS; ohne Unterstützung bleibt alles sichtbar */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        main .section__header,
        main :is(.content-card, .contact-card, .path-card, .experience-card, .format-card, .topic-item, .blog-card, .benefit-card, .segment-card) {
            animation: s7-site-rise linear both;
            animation-range: entry 0% cover 22%;
            animation-timeline: view();
        }
    }
}

@media (max-width: 940px) {
    .has-photo {
        min-height: clamp(480px, 78vh, 680px);
    }
}

/* Handy: wie der Hero der Startseite heller und klarer, ohne Raster (Matthias, 03.10.2026); dunkel bleibt der
   Verlauf unten, wo Titel und Text stehen, die Schrift bekommt einen weichen Schatten */
@media (max-width: 700px) {
    .page-photo img {
        filter: brightness(0.62) saturate(1.2) contrast(1.15);
    }

    .page-photo::after {
        background: linear-gradient(180deg, rgba(23, 23, 32, 0.4) 0%, rgba(23, 23, 32, 0.08) 22%, rgba(23, 23, 32, 0.45) 50%, rgba(23, 23, 32, 0.9) 100%);
    }

    .has-photo :is(h1, .eyebrow, p):not(.exhibitor-hero__panel *) {
        text-shadow: 0 1px 2px rgba(23, 23, 32, 0.55), 0 2px 16px rgba(23, 23, 32, 0.6);
    }
}

@media (max-width: 620px) {
    .festival-band {
        margin-top: -14px;
    }

    /* Seitenköpfe am Handy: die schmale Schrift erlaubt grössere Titel (der Aussteller-Titel passt sich
       weiter selbst an, exhibitors.css --fit-em) */
    .has-photo:not(.exhibitor-hero) h1 {
        font-size: clamp(1.64rem, 8.19vw, 2.26rem);
        line-height: 0.98;
        max-width: 100%;
    }
}

/* ── Blog ohne Beitragsbild: das Logo (Wortmarke, ohne Klammern) in Weiss auf Ink ── */
:is(.blog-featured__media, .blog-card__media, .article-hero__media):has(> .media-logo) {
    background: var(--color-ink);
}

:is(.blog-featured__media, .blog-card__media, .article-hero__media) > .media-logo {
    color: var(--color-white);
    height: clamp(18px, 2.4vw, 30px);
    width: auto;
}

/* ── Momente mit Menschen (components/moments.html) ── */
.moments {
    --eyebrow-color: var(--color-lime);
    --muted-color: var(--color-muted-on-dark);
    --focus-ring: var(--color-lime);
    background: var(--color-ink);
    color: var(--color-white);
    padding: clamp(64px, 8vw, 112px) 0;
}

.moments__head {
    margin-bottom: 32px;
    max-width: 760px;
}

.moments .section__title {
    color: var(--color-white);
}

.moments__grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.moments__grid--12 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.moments__item figure {
    aspect-ratio: 4 / 3;
    background: #1e1e29;
    border-radius: var(--radius-md);
    margin: 0;
    overflow: hidden;
    position: relative;
}

.moments__item img {
    display: block;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 0.9s var(--s7-ease);
    width: 100%;
}

.moments__item:hover img {
    transform: scale(1.06);
}

.moments__item figure::after {
    background: linear-gradient(180deg, transparent 50%, rgba(23, 23, 32, 0.82));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.moments__item figcaption {
    bottom: 12px;
    color: var(--color-white);
    /* Hauptschrift: die Akzentschrift bleibt dem einen Akzentwort eines Titels vorbehalten */
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 700;
    left: 16px;
    line-height: 1.15;
    position: absolute;
    right: 16px;
    z-index: 1;
}

.moments__credit {
    color: var(--color-muted-on-dark);
    font-size: 0.75rem;
    margin-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .moments__item img {
        transition: none;
    }
}

@media (max-width: 940px) {
    .moments__grid--12 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .moments__grid,
    .moments__grid--12 {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .moments__grid--3 .moments__item:first-child {
        grid-column: 1 / -1;
    }

    .moments__item figcaption {
        bottom: 8px;
        font-size: 1.05rem;
        left: 10px;
        right: 10px;
    }
}

/* Blog: der Seitenkopf bekommt dieselbe Titelgrösse wie die anderen Seiten */
.hero--blog h1 {
    font-size: clamp(2.03rem, 4.68vw, 4.21rem);
    line-height: 0.95;
}

.hero--blog .hero__lead {
    margin-top: 18px;
}

.hero--blog .hero__actions {
    margin-top: 24px;
}

/* ── Teilnehmende Partner (Logos von sens7.ch, 06.10.2026) ── */
.partners-section {
    background: var(--color-white);
    color: var(--color-ink);
    padding: clamp(64px, 8vw, 112px) 0;
}

.partners-section__inner {
    display: grid;
    gap: clamp(28px, 4vw, 48px);
}

.partners-section .section__title {
    margin-top: 8px;
}

/* Akzentwort auf Weiss: Lime als Marker statt als Schriftfarbe (Kontrast) */
.partners-section .accent {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: linear-gradient(transparent 58%, var(--color-lime) 58%, var(--color-lime) 92%, transparent 92%);
    color: var(--color-ink);
    padding-inline: 0.06em;
}

/* Three groups side by side (Experience, Genuss, Verband), each with its own logos. */
.partners-groups {
    display: grid;
    gap: clamp(28px, 4vw, 40px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
    .partners-groups {
        grid-template-columns: minmax(0, 1fr);
    }
}

.partners-group__title {
    border-top: 1px solid var(--color-ink);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0 0 14px;
    padding-top: 12px;
    text-transform: uppercase;
}

.partners-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

/* «Bereits dabei»: a wider logo wall, same tiles as the partners. */
.already-in__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 960px) {
    .already-in__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .already-in__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.already-in + .partners-section {
    border-top: 1px solid var(--color-line);
}

.already-in__more {
    margin: 0;
}

.already-in__more a {
    color: var(--color-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--color-lime);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

.partners-grid__link {
    color: var(--color-ink);
    text-decoration: none;
}

.partners-grid__name {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.partners-grid__link {
    align-items: center;
    aspect-ratio: 16 / 9;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    padding: 14px 18px;
    transition: border-color 0.2s, transform 0.2s;
}

a.partners-grid__link:hover,
a.partners-grid__link:focus-visible {
    border-color: var(--color-ink);
    transform: translateY(-2px);
}

.partners-grid__link img.is-square {
    max-height: 68px; /* fits the 16:9 tile of a two-column group */
}

.partners-grid__link img {
    height: auto;
    max-height: 64px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

/* ── Impressionsfilme (YouTube, neues Fenster) ── */
.films-section {
    background: var(--color-ink);
    color: var(--color-white);
}

.films-section .section__title,
.films-section .eyebrow {
    color: var(--color-white);
}

.films-section .section__lead {
    color: rgba(255, 255, 255, 0.78);
}

.films-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    list-style: none;
    margin: clamp(28px, 4vw, 44px) 0 0;
    padding: 0;
}

.film-card--lead {
    grid-row: span 2;
}

.films-grid:has(> .film-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.films-grid:has(> .film-card:nth-child(2):last-child) .film-card--lead {
    grid-row: auto;
}

.film-card__link {
    background: #1e1e29;
    border-radius: 18px;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
}

.film-card__media {
    aspect-ratio: 16 / 9;
    display: block;
    overflow: hidden;
    position: relative;
}

.film-card__media img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
    width: 100%;
}

.film-card--lead .film-card__media {
    aspect-ratio: auto;
    flex: 1;
    min-height: 260px;
}

.film-card__play {
    align-items: center;
    background: var(--color-lime);
    border-radius: 999px;
    color: var(--color-ink);
    display: flex;
    bottom: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    height: 56px;
    justify-content: center;
    left: 16px;
    position: absolute;
    transition: transform 0.2s;
    width: 56px;
}

.film-card__play svg {
    fill: currentColor;
    height: 24px;
    margin-left: 3px;
    width: 24px;
}

.film-card__link:hover .film-card__media img,
.film-card__link:focus-visible .film-card__media img {
    transform: scale(1.03);
}

.film-card__link:hover .film-card__play,
.film-card__link:focus-visible .film-card__play {
    transform: scale(1.08);
}

.film-card__body {
    display: grid;
    gap: 4px;
    padding: 18px 20px 20px;
}

.film-card__title {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-stretch: var(--display-stretch);
    font-weight: 900;
    line-height: 1.05;
}

.film-card__date {
    color: rgba(255, 255, 255, 0.7);
}

.film-card__cta {
    color: var(--color-lime);
    font-weight: 700;
    margin-top: 6px;
}

@media (max-width: 760px) {
    .films-grid,
    .films-grid:has(> .film-card:nth-child(2):last-child) {
        grid-template-columns: minmax(0, 1fr);
    }

    .film-card--lead {
        grid-row: auto;
    }

    .film-card--lead .film-card__media {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }
}

/* Seitentexte: Hinweis in der Vorschau mit Entwürfen (nur Admins) */
.drafts-preview {
    background: var(--color-lime);
    bottom: 16px;
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
    color: var(--color-ink);
    font-size: 0.95rem;
    font-weight: 700;
    left: 50%;
    max-width: calc(100vw - 32px);
    padding: 10px 18px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 1000;
}

.drafts-preview a {
    color: inherit;
    margin-left: 8px;
}

/* ══ Ruhigere Typografie (Michael, 10.10.2026: «die unterschiedlichen Grössen, Schnitte und Versalien etwas
   reduzieren»; Archivo und Instrument Serif bleiben, Schwarz/Weiss/Lime als Basis). Steht am Schluss, damit sie
   über den Seiten-Stylesheets gilt. Regeln:
   - Schnitte: Titel und grosse Zahlen 800 (statt 900), Auszeichnungen 700, Text 400. Die kursive Instrument
     Serif bleibt das eine Akzentwort im Seitentitel.
   - Grössen: die grössten Titel rund 20 % kleiner, alle Abschnittstitel auf einer Stufe (höchstens 3.5rem).
   - Versalien nur noch in den Eyebrows in Klammern («Botschaften»); Etiketten, Bänder und Fusszeile in normaler
     Schreibung.
   - Sinnesfarben stehen nur im Sinnes-Code der Startseite (so bleibt es). ══ */

h1,
h2,
.section__title,
.lp-h2,
.lp-hero__title,
.lp-final__title,
.lp-band,
.festival-band,
.lp-stat__value,
.lp-count__n,
.lp-seventh__no,
.lp-panel__time,
.lp-sense__name,
.lp-fact__value,
.lp-way__title,
.lp-reason__title,
.lp-reasons__lead,
.film-card__title,
.speaker-detail__photo-placeholder {
    font-weight: 800;
}

:is(.lp-reason__no, .lp-steps__n, .benefit-card__index, .audience-item__label, .stand-list li,
    .directory-search span, .directory-filter, .taxonomy-grid li, .profile-contact-list a, .profile-socials a,
    .text-link, .legal-nav > a[aria-current="page"], .visitor-status__link,
    .visitor-timeline__item time, .visitor-timeline__time, .time-slot__time, .programme-topic__time,
    .session-card__speaker-link, .share-buttons a, .share-buttons span, .sense-tile__name, .sense-tile__mark,
    .calendar-link, .next-step-card, .next-step-card__icon, .step-dot span,
    .btn--form-primary, .btn--form-secondary, .btn--form-ghost,
    .blog-featured__media span, .blog-card__media span, .article-hero__media span) {
    font-weight: 700;
}

.venue-steps li::before {
    font-weight: 700;
}

.lp-hero__title {
    font-size: clamp(2.6rem, 6.4vw, 5.6rem);
}

.lp-h2 {
    font-size: clamp(1.75rem, 4vw, 3.5rem);
}

/* der Satz «Ein Festival, das Marken …» ist länger als die anderen Titel: eine Stufe kleiner */
.lp-about .section__title {
    font-size: clamp(1.6rem, 3.3vw, 2.8rem);
}

.lp-final__title {
    font-size: clamp(2.1rem, 5vw, 4rem);
}

/* grosse Zahlen auf einer Stufe */
.lp-stat__value,
.lp-count__n,
.lp-panel__time {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

/* Kartentitel auf einer Stufe */
.lp-way__title,
.lp-reason__title,
.lp-fact__value {
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
}

.lp-sense__name {
    font-size: clamp(1.2rem, 2vw, 1.75rem);
}

.lp-reasons__lead {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.section__title,
:is(.section__intro, .audience-layout, .stand-layout, .proof-layout, .faq-layout, .section-heading) h2 {
    font-size: clamp(1.75rem, 4vw, 3.5rem);
}

@media (min-width: 621px) {
    .has-photo:not(.exhibitor-hero) h1 {
        font-size: clamp(2.1rem, 4.6vw, 4.2rem);
    }
}

@supports (width: 1cqi) {
    .section__header .section__title,
    .section__intro h2 {
        font-size: clamp(1.25rem, 100cqi / var(--fit-em, 0.01), clamp(1.75rem, 4vw, 3.5rem));
    }

    .form-section__info h2 {
        font-size: clamp(1.25rem, 100cqi / var(--fit-em, 0.01), clamp(1.8rem, 3.8vw, 3.3rem));
    }

    .exhibitor-hero h1 {
        font-size: clamp(1.25rem, min(100cqi / var(--fit-em, 0.01), 300cqi / var(--fit-len, 0.01)), clamp(2rem, 5vw, 4.2rem));
    }

    .profile-heading h1 {
        font-size: clamp(1.25rem, 100cqi / var(--fit-em, 0.01), clamp(2.1rem, 5vw, 4.3rem));
    }
}

/* Versalien: nur die Eyebrows bleiben in Grossbuchstaben */
.lp-band,
.festival-band {
    letter-spacing: 0;
    text-transform: none;
}

:is(.lp-fact dt, .lp-place__label, .lp-sticker, .lp-count__l, .fact-list dt, .footer__heading, .partners-group__title,
    .programme-status span, .visitor-status__label, .programme-topic__details dt, .source-card span, .legal-meta span,
    .path-card__kicker, .topic-item span, .form-card__header > span, .blog-status span, .speaker-detail__back,
    .directory-status span, .directory-card__meta, .profile-tags, .profile-back, .directory-card__cta) {
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
}

/* ── Handy (10.10.2026) ── */
@media (max-width: 620px) {
    /* Sinnes-Kacheln: «Geschmack», «Interaktion», «Dźwięk» passen ganz in die halbe Breite */
    .lp-sense__name {
        font-size: clamp(1.05rem, 5.4vw, 1.3rem);
        overflow-wrap: anywhere;
    }
}

@media (max-width: 760px) {
    /* Fusszeile kürzer: Brand oben, die drei Linklisten in zwei Spalten, Rechtliches und Sprachen in Zeilen */
    .footer__grid {
        gap: 28px 20px;
        grid-template-columns: 1fr 1fr;
    }

    .footer__brand {
        grid-column: 1 / -1;
    }

    .footer__legal-links,
    .footer__lang-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 18px;
    }
}