/* ========================================
   EVENTKLICKS - Custom Styling
   ======================================== */

:root {
    --eventklicks-accent: #ff6b6b;
    --eventklicks-accent-dark: #ee5a52;
}

/* ========================================
   ATMOSPHÄRE - Hero & Slider teilen sich einen
   durchgehenden Verlauf, damit kein harter
   Farb-/Bereichswechsel entsteht.
   ======================================== */

.eventklicks-atmosphere {
    position: relative;
    /* Neutrales, fast schwarzes Grundklima statt des früheren
       Lila-Türkis-Verlaufs (derselbe "KI-Palette"-Fehler wie die
       globale Akzentfarbe) - geht nahtlos in den Header und den
       Body-Hintergrund über, kein harter Schnitt mehr. */
    background: linear-gradient(160deg, #0a0a0a 0%, #050505 55%, #0a0a0a 100%);
}

/* Die eigene Hero-Gradientenebene wird hier deaktiviert,
   da der Wrapper den Verlauf jetzt durchgehend übernimmt. */
.eventklicks-atmosphere .hero__gradient {
    background: none;
}

/* Alles (Menü, Headline, Subtext, Slider) soll gemeinsam
   above-the-fold passen - Abstände dafür deutlich reduziert. */
.eventklicks-atmosphere .hero {
    min-height: auto;
}

.eventklicks-atmosphere .hero__container {
    padding: 32px var(--spacing-xl) 8px;
}

.eventklicks-atmosphere .hero__tag {
    margin-bottom: 1rem;
}

.eventklicks-atmosphere .hero__title {
    margin-bottom: 1rem;
}

.eventklicks-atmosphere .hero__subtitle {
    margin-bottom: 0;
}

/* Menü ohne eigenen Hintergrund - nur auf der Startseite, dort
   verschmilzt es mit dem durchgehenden Verlauf. Auf den Unterseiten
   (Portfolio, Über uns, Kontakt) behält der Header seinen normalen
   Hintergrund, da dort kein Verlauf hinter ihm liegt. */
.page-eventklicks-home .category-header {
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}

/* Sobald über den Verlauf hinausgescrollt wurde (Klasse per JS gesetzt),
   bekommt der sticky Header wieder einen festen Hintergrund, damit er
   nicht mit dem darunterliegenden Content kollidiert. */
.page-eventklicks-home .category-header.is-scrolled {
    background-color: rgba(10, 10, 20, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--color-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Der letzte Kontakt-Banner soll direkt in den Footer übergehen,
   ohne Lücke dazwischen. */
.footer {
    margin-top: 0;
}

/* ========================================
   OVERLAPPING CARD SLIDER
   ======================================== */

.image-slider {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: transparent;
    padding: 16px 0 40px;
    margin-top: 0;
    overflow: hidden;
}

.image-slider__track {
    position: relative;
    width: 100%;
    height: 520px;
    perspective: 1400px;
    transform-style: preserve-3d;
}

/*
 * Jede Kachel wird per JavaScript (inline transform/opacity/z-index)
 * relativ zu ihrer Distanz zur aktuell mittigen Kachel positioniert.
 * Dadurch können 10 Kacheln zirkulär durch 5 sichtbare Slots rotieren,
 * ohne dass CSS :nth-child auf eine feste Anzahl angewiesen ist.
 */
.image-slider__item {
    width: 340px;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    background: white;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.9s ease, box-shadow 0.9s ease;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    /* Basis-Zentrierung; die eigentliche Slot-Position kommt per JS als
       zusätzliche translateX/scale/rotate-Werte on top of this hinzu */
    margin-top: -225px;
    margin-left: -170px;
}

.image-slider__item.is-center {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.image-slider__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-slider__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Responsive - Breite/Höhe der Kacheln passen sich an;
   die Slot-Transforms selbst kommen per JS in %-Werten (relativ zur
   eigenen Kachelgröße) und skalieren dadurch automatisch mit. */
@media (max-width: 1400px) {
    .image-slider {
        padding: 12px 0 32px;
    }

    .image-slider__track {
        height: 480px;
    }

    .image-slider__item {
        width: 320px;
        height: 420px;
        margin-top: -210px;
        margin-left: -160px;
    }
}

@media (max-width: 1024px) {
    .image-slider {
        padding: 10px 0 28px;
    }

    .image-slider__track {
        height: 420px;
    }

    .image-slider__item {
        width: 260px;
        height: 360px;
        margin-top: -180px;
        margin-left: -130px;
    }
}

@media (max-width: 768px) {
    .image-slider {
        padding: 8px 0 24px;
    }

    .image-slider__track {
        height: 340px;
    }

    .image-slider__item {
        width: 200px;
        height: 280px;
        margin-top: -140px;
        margin-left: -100px;
    }
}

@media (max-width: 480px) {
    .image-slider {
        padding: 8px 0 20px;
    }

    .image-slider__track {
        height: 260px;
    }

    .image-slider__item {
        width: 150px;
        height: 210px;
        margin-top: -105px;
        margin-left: -75px;
    }
}

/* ========================================
   EVENTKLICKS CONTENT-SEITEN
   Gemeinsame Bausteine für Intro, Textsektionen,
   Karten, Prozess-Timeline, FAQ und Abschluss-CTA.
   ======================================== */

.ek-section {
    padding: 80px 0;
}

.ek-section--panel {
    background: rgba(255, 255, 255, 0.025);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ek-section__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.ek-section__container--narrow {
    max-width: 820px;
}

.ek-section__container--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.ek-section__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

/* Handschriftlicher Akzent über Section-Überschriften - Ersatz für die
   entfernten Eyebrow-Labels. Bewusst klein eingesetzt (nicht auf jeder
   Section), damit es ein besonderer Moment bleibt statt Schablone. */
.ek-accent {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: 2rem;
    font-weight: 400;
    color: var(--color-primary-light);
    margin-bottom: 2px;
    line-height: 1;
}

.ek-section__title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: #fff;
    margin-bottom: 1rem;
}

.ek-section__body p {
    margin-bottom: 1rem;
}

.ek-section__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.ek-section__media--portrait {
    aspect-ratio: 3 / 4;
}

/* Echte Fotos (im Unterschied zu den Platzhaltern) bekommen ihr
   object-fit nicht inline von render_image() mitgegeben - ohne diese
   Regel rendert ein <img> mit echtem src in Originalgröße und wird vom
   umgebenden overflow:hidden einfach oben-links angeschnitten. */
.ek-section__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   INTRO
   ======================================== */

.ek-intro {
    padding: 56px 0 48px;
    text-align: center;
}

.ek-intro__container {
    max-width: 760px;
}

.ek-intro__lead {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}

.ek-intro__text {
    color: var(--color-text-secondary);
    margin-bottom: 32px;
}

.ek-intro__actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   LEISTUNGEN-TEASER - kurzer "Was ich mache"-
   Überblick auf der Startseite mit Link zur
   ausführlichen Leistungen-Seite
   ======================================== */

.ek-services-teaser__container {
    max-width: 960px;
    text-align: center;
}

.ek-services-teaser {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 32px 0 36px;
    text-align: left;
}

.ek-services-teaser__item {
    padding: 22px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.ek-services-teaser__item:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 90, 60, 0.4);
}

.ek-services-teaser__title {
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: 8px;
}

.ek-services-teaser__text {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .ek-services-teaser {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ek-services-teaser {
        grid-template-columns: 1fr;
    }

    .ek-services-teaser__item {
        padding: 18px;
    }
}

/* ========================================
   BUTTON-VARIANTEN
   ======================================== */

.btn--sunset {
    background: linear-gradient(135deg, #ff8c42, #ff6b6b, #d946a0);
    background-size: 160% 160%;
    /* Dunkler statt weißer Text: Weiß auf den helleren Verlaufstönen
       (z.B. #ff8c42) fällt bis auf 2.3:1 Kontrast - deutlich unter dem
       WCAG-AA-Minimum von 4.5:1. Dunkler Text schafft überall 4.9:1+. */
    color: var(--color-bg-dark);
    border: none;
    transition: background-position 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn--sunset:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    color: var(--color-bg-dark);
}

.btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.btn--ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* ========================================
   KARTEN - Leistungen
   ======================================== */

/* Bento-Grid statt gleichförmigem Raster: die beiden inhaltsreicheren
   Karten (mit Aufzählungen) sind breiter, die beiden kürzeren schmaler.
   Dadurch entsteht ein Zick-Zack-Layout ohne einsam wirkende letzte
   Karte und ohne stures 2x2. */
.ek-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.ek-card--wide {
    grid-column: span 2;
}

.ek-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 620px;
}

.ek-card:hover {
    transform: translateY(-4px);
    border-color: rgba(217, 70, 160, 0.4);
}

/* Feste statt proportionale Höhe, damit schmale und breite Karten
   exakt dieselbe Bildhöhe haben, unabhängig von der Kartenbreite. */
.ek-card__image {
    height: 200px;
    flex-shrink: 0;
}

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

.ek-card:hover .ek-card__image img {
    transform: scale(1.05);
}

.ek-card__body {
    padding: 28px 32px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ek-card__title {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 10px;
}

.ek-card__text {
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.ek-card__label {
    font-weight: 600;
    color: var(--color-text);
    margin: 12px 0 8px;
    font-size: 0.9rem;
}

.ek-card__list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 8px;
}

/* Breite Karten nutzen den zusätzlichen Platz für eine zweispaltige Liste */
.ek-card--wide .ek-card__list {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
}

@media (max-width: 560px) {
    .ek-card--wide .ek-card__list {
        grid-template-columns: 1fr;
    }
}

.ek-card__list li {
    padding-left: 20px;
    position: relative;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.ek-card__list li::before {
    content: '✦';
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 0.7rem;
    color: #ff8c62;
}

/* ========================================
   EINFACHE LISTEN - Zielgruppen & Nutzen
   ======================================== */

.ek-plain-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 10px;
    margin: 16px 0;
}

.ek-plain-list li {
    padding-left: 26px;
    position: relative;
}

.ek-plain-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-primary-light);
    font-weight: 700;
}

.ek-plain-list--compact {
    gap: 6px;
    margin: 12px 0;
}

.ek-plain-list--compact li {
    font-size: 0.92rem;
}

/* ========================================
   FEATURES - Was Eventklicks ausmacht
   ======================================== */

.ek-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 36px;
}

.ek-feature__title {
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 14px;
}

.ek-feature__title::before {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ff8c42, #d946a0);
    margin-bottom: 14px;
}

/* ========================================
   EINSATZBEREICHE - horizontaler Endlos-Slider
   Statt eines Rasters (bei 5 Karten immer eine "Waise" in eigener
   Zeile) läuft das jetzt als Slider durch: automatisch von links nach
   rechts, per CSS-transform bewegt (kein natives Scrollen/Scroll-Snap -
   das führte in Kombination mit Padding zu einem Browser-Eigenleben
   beim Ruhezustand). Die Kacheln füllen die Breite dadurch immer exakt,
   ohne Rest-Leerraum. */

.ek-areas-slider {
    overflow: hidden;
    margin-top: 40px;
}

.ek-areas-slider__track {
    display: flex;
    gap: 28px;
    transition: transform 0.6s ease;
    will-change: transform;
}

.ek-area {
    flex: 0 0 calc(25% - 21px);
    min-width: 220px;
}

.ek-area__image {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
}

.ek-area__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ek-area__title {
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 8px;
}

.ek-area p {
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .ek-area {
        flex: 0 0 calc(50% - 14px);
    }
}

@media (max-width: 560px) {
    .ek-area {
        flex: 0 0 85%;
    }
}

/* ========================================
   ABLAUF - Prozess-Timeline
   ======================================== */

.ek-process {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 36px;
    max-width: 780px;
    margin: 0 auto;
}

.ek-process__step {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.ek-process__number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8c42, #d946a0);
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ek-process__title {
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 6px;
}

/* ========================================
   INLINE LINK
   ======================================== */

.ek-inline-link {
    display: inline-block;
    margin-top: 8px;
    font-weight: 600;
    color: var(--color-primary-light);
}

/* Handschriftliche Unterschrift am Ende der Bio - persönlicher
   Abschluss statt eines weiteren Fließtext-Absatzes. */
.ek-signature {
    font-family: var(--font-accent);
    font-size: 2.75rem;
    font-weight: 400;
    color: #fff;
    margin: 4px 0 16px;
    line-height: 1;
    transform: rotate(-3deg);
    transform-origin: left center;
}

.ek-inline-link:hover {
    color: #fff;
}

/* ========================================
   TEAM-GRID - zwei Personen nebeneinander statt als
   separate, gleich aufgebaute Vollbreite-Sections
   hintereinander (das wirkte wie "Kachel an Kachel").
   Bewusst kleineres Bildformat als bei den übrigen
   Split-Sections, damit sich die Vorstellung kompakt
   statt blockig anfühlt.
   ======================================== */

.ek-team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    margin-top: 40px;
}

.ek-team-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    margin-bottom: 24px;
}

.ek-team-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ek-team-card__name {
    font-size: 1.6rem;
    color: #fff;
    margin: 2px 0 12px;
}

.ek-team-card p {
    margin-bottom: 1rem;
}

@media (max-width: 700px) {
    .ek-team-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ========================================
   FAQ - Accordion (nativ, ohne JS)
   ======================================== */

.ek-faq {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.ek-faq__item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px 28px;
}

.ek-faq__question {
    cursor: pointer;
    list-style: none;
    padding: 20px 36px 20px 0;
    position: relative;
    font-weight: 600;
    color: #fff;
}

.ek-faq__question::-webkit-details-marker {
    display: none;
}

.ek-faq__question::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 16px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-primary-light);
    transition: transform 0.3s ease;
}

.ek-faq__item[open] .ek-faq__question::after {
    transform: rotate(45deg);
}

.ek-faq__answer {
    padding-bottom: 20px;
    margin-top: -4px;
    color: var(--color-text-secondary);
}

/* ========================================
   RESPONSIVE - Content-Sektionen
   ======================================== */

@media (max-width: 900px) {
    .ek-section__container--split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ek-cards-grid {
        grid-template-columns: 1fr;
    }

    .ek-card--wide {
        grid-column: auto;
    }

    .ek-card {
        min-height: 0;
    }

    .ek-section {
        padding: 56px 0;
    }

    .ek-masonry {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }

    .ek-masonry__item--large {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (max-width: 600px) {
    .ek-masonry {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }

    .ek-masonry__item--wide,
    .ek-masonry__item--large {
        grid-column: span 1;
    }

    .ek-masonry__item--large {
        grid-row: span 2;
    }

    .ek-lightbox {
        padding: 20px;
    }

    .ek-lightbox__close {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
    }

    .ek-lightbox__nav {
        width: 42px;
        height: 42px;
    }

    .ek-lightbox__nav--prev {
        left: 8px;
    }

    .ek-lightbox__nav--next {
        right: 8px;
    }

    .ek-process__step {
        gap: 16px;
    }

    .ek-process__number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .ek-faq__item {
        padding: 4px 18px;
    }
}

/* ========================================
   PAGE-HERO - Kompakter Kopfbereich für
   Unterseiten (Portfolio, Über uns, Kontakt)
   ======================================== */

.ek-page-hero {
    background: linear-gradient(160deg, #0a0a0a 0%, #050505 55%, #0a0a0a 100%);
    padding: 64px 0 56px;
    text-align: center;
}

.ek-page-hero__container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
}

.ek-page-hero__title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    color: #fff;
    margin: 16px 0;
    line-height: 1.2;
}

.ek-page-hero__subtitle {
    color: var(--color-text-secondary);
    font-size: 1.05rem;
}

/* Foto-Variante des Page-Hero (z.B. Kontaktseite) - gleiches
   Parallax-Prinzip wie Atmosphäre-Break/Kontakt-Banner, aber mit einem
   deutlich dunkleren Overlay, weil hier Titel UND Untertitel zuverlässig
   lesbar bleiben müssen statt nur eines kurzen Zitats. */
.ek-page-hero--photo {
    position: relative;
    overflow: hidden;
    padding: 96px 0 88px;
}

.ek-page-hero__bg {
    position: absolute;
    inset: 0;
    background-color: #a855f7;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.ek-page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(10, 10, 10, 0.88) 0%, rgba(5, 5, 5, 0.78) 55%, rgba(10, 10, 10, 0.92) 100%);
}

.ek-page-hero--photo .ek-page-hero__container {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px), (hover: none) {
    .ek-page-hero__bg {
        background-attachment: scroll;
    }
}

/* ========================================
   PORTFOLIO - Kapitel-Header
   ======================================== */

.ek-chapter-header {
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
}

.ek-chapter-header p {
    color: var(--color-text-secondary);
}

/* ========================================
   PORTFOLIO - Editorial-Masonry
   Bewusst unterschiedlich große Kacheln statt eines starren
   Rasters - erzeugt einen redaktionellen Rhythmus, der auch mit
   Platzhaltern schon "kuratiert" statt "generiert" wirkt.
   ======================================== */

.ek-masonry {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px;
    gap: 16px;
}

.ek-masonry__item {
    position: relative;
    grid-column: span 1;
    grid-row: span 1;
    border: none;
    padding: 0;
    background: none;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ek-masonry__item:hover,
.ek-masonry__item:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
}

.ek-masonry__item:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 3px;
}

.ek-masonry__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.ek-masonry__item:hover img {
    transform: scale(1.06);
}

.ek-masonry__item--wide {
    grid-column: span 2;
}

.ek-masonry__item--tall {
    grid-row: span 2;
}

.ek-masonry__item--large {
    grid-column: span 2;
    grid-row: span 2;
}

/* ========================================
   PORTFOLIO - Zitat-Break
   Unterbricht den Bildfluss mit einem persönlichen Moment -
   die Art Pause, die ein reines Bildraster nicht bieten kann.
   ======================================== */

.ek-portfolio-quote {
    padding: 80px 0;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(255, 90, 60, 0.06), transparent 70%);
}

.ek-portfolio-quote__text {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
    max-width: 720px;
    margin: 0 auto 16px;
}

.ek-portfolio-quote__signature {
    font-family: var(--font-accent);
    font-size: 2.25rem;
    font-weight: 400;
    color: var(--color-primary-light);
    transform: rotate(-3deg);
}

/* ========================================
   PORTFOLIO - Lightbox
   ======================================== */

.ek-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #050505;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.ek-lightbox[hidden] {
    display: none;
}

.ek-lightbox__stage {
    max-width: min(1100px, 90vw);
    max-height: 78vh;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ek-lightbox__stage img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.ek-lightbox__close,
.ek-lightbox__nav {
    position: fixed;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ek-lightbox__close:hover,
.ek-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.18);
}

.ek-lightbox__close:focus-visible,
.ek-lightbox__nav:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 3px;
}

.ek-lightbox__close {
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    line-height: 1;
}

.ek-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 1.1rem;
}

.ek-lightbox__nav--prev {
    left: 24px;
}

.ek-lightbox__nav--next {
    right: 24px;
}

/* ========================================
   KONTAKT-KARTE
   ======================================== */

.ek-contact-card {
    margin-top: 40px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    text-align: center;
}

.ek-contact-card__title {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 12px;
}

.ek-contact-card__text {
    margin-bottom: 24px;
}

.ek-contact-card__meta {
    margin-top: 24px;
    font-size: 0.9rem;
    color: var(--color-text-tertiary);
}

.ek-contact-card__privacy {
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
}

@media (max-width: 600px) {
    .ek-contact-card {
        padding: 28px 20px;
    }
}

/* ========================================
   KONTAKTFORMULAR
   ======================================== */

.ek-form {
    margin-top: 32px;
    text-align: left;
    display: grid;
    gap: 20px;
}

.ek-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ek-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ek-form__field label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.ek-form__field input,
.ek-form__field textarea,
.ek-form__field select {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.ek-form__field select {
    cursor: pointer;
}

.ek-form__field textarea {
    resize: vertical;
    min-height: 120px;
}

.ek-form__field input:focus,
.ek-form__field textarea:focus,
.ek-form__field select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(255, 90, 60, 0.18);
}

.ek-form__field input[aria-invalid="true"],
.ek-form__field textarea[aria-invalid="true"] {
    border-color: #ff6b6b;
}

.ek-form__error {
    font-size: 0.85rem;
    color: #ff8080;
}

.ek-form__field--checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.ek-form__field--checkbox input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.ek-form__field--checkbox label {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-tertiary);
    text-align: left;
}

.ek-form__field--checkbox label a {
    color: var(--color-text-secondary);
}

/* Für Menschen unsichtbar, für Bots ausfüllbar - Spam-Schutz ohne
   externen Dienst (z.B. reCAPTCHA), passend zum DSGVO-Ansatz der Seite. */
.ek-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.ek-form button[type="submit"] {
    justify-self: start;
    margin-top: 4px;
}

.ek-form-success {
    margin-top: 8px;
    padding: 20px;
    background: rgba(76, 217, 123, 0.1);
    border: 1px solid rgba(76, 217, 123, 0.3);
    border-radius: var(--radius-md);
    color: #a4f0c1;
}

.ek-form-errors {
    margin-top: 8px;
    padding: 18px 20px;
    background: rgba(255, 90, 90, 0.08);
    border: 1px solid rgba(255, 90, 90, 0.3);
    border-radius: var(--radius-md);
    text-align: left;
}

.ek-form-errors p {
    font-weight: 600;
    margin-bottom: 8px;
    color: #fff;
}

.ek-form-errors ul {
    list-style: none;
    display: grid;
    gap: 4px;
}

.ek-form-errors a,
.ek-form-errors li {
    color: #ff8080;
    font-size: 0.9rem;
}

.ek-form-errors a {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .ek-form__row {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ATMOSPHÄRE-BREAK - Bild-Moment mit Spruch, trennt zwei
   inhaltlich unterschiedliche Kapitel klar voneinander,
   statt dass sie optisch verschmelzen. Dieselbe Parallax-
   Technik wie beim Kontakt-Banner, aber großzügiger in der
   Höhe, damit der Scroll-Parallax-Effekt deutlich wirkt.
   ======================================== */

.ek-atmosphere-break {
    position: relative;
    height: clamp(340px, 46vw, 520px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ek-atmosphere-break__bg {
    position: absolute;
    inset: 0;
    background-color: #a855f7;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.ek-atmosphere-break__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.45) 0%, rgba(5, 5, 5, 0.2) 50%, rgba(5, 5, 5, 0.6) 100%);
}

.ek-atmosphere-break__quote {
    position: relative;
    z-index: 2;
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    color: #fff;
    text-align: center;
    max-width: 800px;
    padding: 0 24px;
    line-height: 1.3;
}

@media (max-width: 768px), (hover: none) {
    .ek-atmosphere-break__bg {
        background-attachment: scroll;
    }
}

/* ========================================
   KONTAKT-BANNER - Parallax-Bildbanner,
   der auf jeder Eventklicks-Seite direkt vor
   dem Footer zum Kontakt aufruft. Der Hintergrund
   ist bewusst als CSS-Background (statt <img>)
   umgesetzt, da nur so ein reiner CSS-Parallax-Effekt
   (background-attachment: fixed) möglich ist - sobald
   echte Fotos vorliegen, reicht ein background-image
   in .ek-contact-banner__bg.
   ======================================== */

.ek-contact-banner {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    text-align: center;
}

.ek-contact-banner__bg {
    position: absolute;
    inset: 0;
    background-color: #a855f7;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.ek-contact-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(5, 5, 5, 0.92), rgba(10, 10, 10, 0.8));
}

.ek-contact-banner__container {
    position: relative;
    z-index: 2;
    max-width: 680px;
}

.ek-contact-banner__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: #fff;
    margin-bottom: 20px;
}

.ek-contact-banner__text {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 32px;
}

.ek-contact-banner__actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* background-attachment:fixed wird auf Touch-Geräten (v.a. iOS)
   oft nicht unterstützt bzw. verursacht Ruckler - dort normal scrollen */
@media (max-width: 768px), (hover: none) {
    .ek-contact-banner__bg {
        background-attachment: scroll;
    }
}

@media (max-width: 600px) {
    .ek-contact-banner {
        padding: 72px 0;
    }
}