/* =========================================================
   PC-J.MUELLER EVENTFOTOGRAFIE
   Datei: assets/eventfotografie.css
   Version: 2.1.0

   Diese Datei ersetzt den bisherigen CSS-Inhalt vollständig.
   ========================================================= */


/* =========================================================
   01. GRUNDWERTE
   ========================================================= */

:root {
    --pcjm-content-width: 980px;

    --pcjm-text: #111111;
    --pcjm-text-muted: rgba(17, 17, 17, 0.78);
    --pcjm-link: #124f78;

    --pcjm-card-background: rgba(255, 255, 255, 0.16);
    --pcjm-card-border: rgba(30, 30, 30, 0.26);
    --pcjm-card-radius: 16px;

    --pcjm-field-background: rgba(255, 255, 255, 0.88);
    --pcjm-field-border: rgba(20, 20, 20, 0.48);

    --pcjm-button: #1f5e8c;
    --pcjm-button-text: #ffffff;
}


/* =========================================================
   02. EVENT-SEITE ALS EIGENE LANDINGPAGE
   WordPress-Seiten-ID: 3836
   ========================================================= */

body.page-id-3836 {
    position: relative;

    min-height: 100vh;

    margin: 0;

    background: #111111 !important;

    isolation: isolate;
}


/* =========================================================
   03. FESTES HINTERGRUNDBILD
   Das Hintergrundbild liegt hinter Galerie und Formular.
   ========================================================= */

body.page-id-3836::before {
    content: "";

    position: fixed;
    inset: 0;
    z-index: -2;

    display: block;

    width: 100%;
    height: 100%;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08)
        ),
        url("https://foto.pcjmueller.com/wp-content/uploads/2026/08/B0A3997-Verbessert-RR.png");

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    pointer-events: none;
}

body.page-id-3836::after {
    content: "";

    position: fixed;
    inset: 0;
    z-index: -1;

    display: block;

    width: 100%;
    height: 100%;

    background: rgba(255, 255, 255, 0.05);

    pointer-events: none;
}


/* =========================================================
   04. THEME-BEREICHE AUSBLENDEN
   ========================================================= */

body.page-id-3836 #masthead,
body.page-id-3836 .breadcrumb-area,
body.page-id-3836 .entry-header,
body.page-id-3836 .shariff {
    display: none !important;
}


/* =========================================================
   05. THEME-CONTAINER TRANSPARENT HALTEN
   ========================================================= */

body.page-id-3836 #page,
body.page-id-3836 .site,
body.page-id-3836 .site-inner,
body.page-id-3836 #content,
body.page-id-3836 .site-content,
body.page-id-3836 .wrapper,
body.page-id-3836 .wrapper.singular-section,
body.page-id-3836 #primary,
body.page-id-3836 #main,
body.page-id-3836 article,
body.page-id-3836 .entry-container,
body.page-id-3836 .entry-content {
    position: relative;
    z-index: 1;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}

body.page-id-3836 .entry-content > p {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   06. ÜBERSCHRIFT „ARBEITSPROBEN“
   ========================================================= */

body.page-id-3836 .entry-content > h1,
body.page-id-3836 .entry-content > h2 {
    position: relative;
    z-index: 1;

    width: min(
        calc(100% - 2rem),
        var(--pcjm-content-width)
    );

    margin: 1rem auto !important;

    color: var(--pcjm-text) !important;

    text-align: center;
    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.65);
}


/* =========================================================
   07. GALERIE NORMAL ÜBER DEM HINTERGRUND ANZEIGEN
   ========================================================= */

body.page-id-3836 .pcjm-gallery {
    position: relative;
    z-index: 1;

    width: min(
        calc(100% - 2rem),
        1400px
    );

    margin-right: auto;
    margin-left: auto;

    color: var(--pcjm-text);
}

body.page-id-3836 .pcjm-gallery-grid,
body.page-id-3836 .pcjm-gallery-item,
body.page-id-3836 .pcjm-gallery-open,
body.page-id-3836 .pcjm-gallery-open img {
    position: relative;
    z-index: auto;
}


/* =========================================================
   08. GALERIE-GROSSANSICHT
   Nur die geöffnete Lightbox liegt über der gesamten Seite.
   ========================================================= */

body.page-id-3836 .pcjm-gallery-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
}


/* =========================================================
   09. HAUPTCONTAINER DES EVENTFORMULARS
   ========================================================= */

.pcjm-event-wrap {
    position: relative;
    z-index: 1;

    width: min(
        100%,
        var(--pcjm-content-width)
    );

    max-width: var(--pcjm-content-width);

    margin: 0 auto;
    padding: 1rem;

    color: var(--pcjm-text);

    text-align: center;
}

.pcjm-event-wrap,
.pcjm-event-wrap * {
    box-sizing: border-box;
}


/* =========================================================
   10. ALTE CONTAINER-HINTERGRÜNDE ABSCHALTEN
   ========================================================= */

.pcjm-event-wrap::before,
.pcjm-event-wrap::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   11. GEMEINSAMES DESIGN FÜR HERO UND KARTEN
   Transparent mit schwarzer Schrift.
   ========================================================= */

.pcjm-hero,
.pcjm-card {
    width: 100%;

    margin: 0 0 1.25rem;
    padding: 1.4rem;

    border: 1px solid var(--pcjm-card-border);
    border-radius: var(--pcjm-card-radius);

    background: var(--pcjm-card-background);

    color: var(--pcjm-text);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);

    text-align: center;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.pcjm-hero {
    margin-top: 0;
}


/* =========================================================
   12. SCHWARZE SCHRIFT VERBINDLICH
   ========================================================= */

.pcjm-event-wrap,
.pcjm-event-wrap h1,
.pcjm-event-wrap h2,
.pcjm-event-wrap h3,
.pcjm-event-wrap h4,
.pcjm-event-wrap p,
.pcjm-event-wrap li,
.pcjm-event-wrap label,
.pcjm-event-wrap legend,
.pcjm-event-wrap span,
.pcjm-event-wrap strong,
.pcjm-event-wrap small {
    color: var(--pcjm-text) !important;
}


/* =========================================================
   13. PORTRÄT
   ========================================================= */

.pcjm-personality {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    margin: 0 auto 1.25rem;
}

.pcjm-portrait {
    display: block;

    width: 155px;
    height: 155px;
    max-width: none;

    margin: 0 auto;

    border: 4px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;

    object-fit: cover;
    object-position: center;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.34),
        0 0 0 5px rgba(0, 0, 0, 0.16);
}


/* =========================================================
   14. HAUPTÜBERSCHRIFT
   ========================================================= */

.pcjm-hero h1 {
    display: block;

    width: 100%;

    margin: 0 auto 1.2rem;

    font-size: clamp(
        2.25rem,
        6vw,
        3.55rem
    );

    font-weight: 500;
    line-height: 1.08;
    letter-spacing: 0.015em;

    text-align: center;
}


/* =========================================================
   15. LOGO UND FOTOGRAFENNAME
   ========================================================= */

.pcjm-brand-row {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 0.95rem;

    width: 100%;

    margin: 0 auto 1.4rem;
}

.pcjm-logo {
    display: block;
    flex: 0 0 auto;

    width: 76px;
    height: auto;
    max-width: none;

    margin: 0;

    object-fit: contain;

    filter:
        drop-shadow(
            0 2px 3px rgba(0, 0, 0, 0.35)
        );
}

.pcjm-photographer {
    margin: 0;

    font-size: 1rem;
    line-height: 1.45;

    text-align: left;
}

.pcjm-photographer strong {
    font-size: 1.2rem;
    font-weight: 700;
}


/* =========================================================
   16. HERO-TEXTE
   ========================================================= */

.pcjm-lead {
    max-width: 800px;

    margin: 0 auto 1.3rem;

    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.6;
}

.pcjm-hero > p:last-child {
    max-width: 820px;

    margin: 0 auto;

    font-size: 1.02rem;
    line-height: 1.65;
}


/* =========================================================
   17. KARTENÜBERSCHRIFTEN
   ========================================================= */

.pcjm-card h2,
.pcjm-card h3 {
    margin-top: 0;

    text-align: center;
}


/* =========================================================
   18. LINKS
   ========================================================= */

.pcjm-event-wrap a {
    color: var(--pcjm-link) !important;

    font-weight: 600;

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}


/* =========================================================
   19. ABLAUF-LISTE
   ========================================================= */

.pcjm-steps {
    max-width: 800px;

    margin: 0 auto;
    padding-left: 1.3rem;

    text-align: left;
}

.pcjm-steps li {
    margin: 0.6rem 0;

    line-height: 1.55;
}


/* =========================================================
   20. HINWEISTEXTE
   ========================================================= */

.pcjm-note,
.pcjm-small,
.pcjm-required-note {
    color: var(--pcjm-text-muted) !important;

    font-size: 0.92rem;
    line-height: 1.55;

    text-align: center;
}

.pcjm-required-note {
    margin: 0 0 1.25rem;

    font-weight: 600;
}


/* =========================================================
   21. FORMULAR – ALLGEMEIN
   ========================================================= */

.pcjm-form label {
    display: block;

    margin-bottom: 1rem;
}

.pcjm-form label > span,
.pcjm-form legend {
    display: block;

    font-weight: 600;

    text-align: center;
}


/* =========================================================
   22. FORMULARRASTER
   ========================================================= */

.pcjm-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 1rem;
}


/* =========================================================
   23. EINGABEFELDER
   ========================================================= */

.pcjm-form input[type="text"],
.pcjm-form input[type="email"],
.pcjm-form input[type="tel"],
.pcjm-form input[type="date"],
.pcjm-form textarea {
    width: 100%;

    margin-top: 0.35rem;
    padding: 0.75rem;

    border: 1px solid var(--pcjm-field-border);
    border-radius: 8px;

    background: var(--pcjm-field-background);
    color: var(--pcjm-text) !important;

    font: inherit;

    text-align: left;

    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.07);
}

.pcjm-form textarea {
    resize: vertical;
}

.pcjm-form input::placeholder,
.pcjm-form textarea::placeholder {
    color: rgba(17, 17, 17, 0.62) !important;

    opacity: 1;
}

.pcjm-form input[type="text"]:focus,
.pcjm-form input[type="email"]:focus,
.pcjm-form input[type="tel"]:focus,
.pcjm-form input[type="date"]:focus,
.pcjm-form textarea:focus {
    border-color: #1f5e8c;

    outline:
        3px solid
        rgba(31, 94, 140, 0.24);

    outline-offset: 1px;
}


/* =========================================================
   24. AUSWAHLBEREICHE
   ========================================================= */

.pcjm-form fieldset {
    margin: 1.25rem 0;
    padding: 1rem;

    border:
        1px solid
        rgba(20, 20, 20, 0.34);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.13);

    text-align: center;
}

.pcjm-form legend {
    width: auto;
    max-width: 100%;

    padding: 0 0.5rem;
}


/* =========================================================
   25. RADIOBUTTONS UND CHECKBOXEN
   ========================================================= */

.pcjm-choice-list {
    width: min(
        100%,
        820px
    );

    margin: 0 auto;
}

.pcjm-choice {
    display: grid !important;
    grid-template-columns:
        24px
        minmax(0, 1fr);

    align-items: start;

    column-gap: 0.75rem;

    width: 100%;

    margin: 0.9rem 0 !important;

    text-align: left;
}

.pcjm-choice span {
    width: 100%;
    max-width: none;

    line-height: 1.5;

    text-align: left;
}

.pcjm-choice input[type="radio"],
.pcjm-choice input[type="checkbox"] {
    display: block !important;

    width: 19px !important;
    height: 19px !important;

    margin: 0.2rem 0 0 !important;
    padding: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;

    appearance: auto !important;
    -webkit-appearance: auto !important;

    accent-color: var(--pcjm-button) !important;
}


/* =========================================================
   26. ABSENDEBUTTON
   ========================================================= */

.pcjm-submit {
    display: inline-block;

    padding: 0.9rem 1.35rem;

    border: 0;
    border-radius: 9px;

    background: var(--pcjm-button);
    color: var(--pcjm-button-text) !important;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 6px 18px rgba(31, 94, 140, 0.3);

    transition:
        filter 0.2s ease,
        transform 0.2s ease;
}

.pcjm-submit:hover {
    filter: brightness(1.08);

    transform: translateY(-1px);
}

.pcjm-submit:focus-visible {
    outline:
        3px solid
        rgba(31, 94, 140, 0.45);

    outline-offset: 3px;
}


/* =========================================================
   27. ERFOLGS- UND FEHLERMELDUNGEN
   ========================================================= */

.pcjm-alert {
    margin: 0 0 1rem;
    padding: 1rem;

    border-radius: 10px;

    text-align: center;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.14);
}

.pcjm-alert-success,
.pcjm-alert-success * {
    color: #173e21 !important;
}

.pcjm-alert-success {
    border: 1px solid #6ab47c;

    background:
        rgba(232, 247, 236, 0.95);
}

.pcjm-alert-error,
.pcjm-alert-error * {
    color: #551b1b !important;
}

.pcjm-alert-error {
    border: 1px solid #d87a7a;

    background:
        rgba(253, 234, 234, 0.95);
}


/* =========================================================
   28. SPAMSCHUTZFELD VERSTECKEN
   ========================================================= */

.pcjm-honeypot {
    position: absolute !important;
    left: -9999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}


/* =========================================================
   29. TABLETS UND SMARTPHONES
   ========================================================= */

@media (max-width: 700px) {

    body.page-id-3836 .entry-content > h1,
    body.page-id-3836 .entry-content > h2 {
        width: calc(100% - 1rem);

        margin:
            0.65rem auto
            0.85rem !important;
    }

    body.page-id-3836 .pcjm-gallery {
        width: calc(100% - 0.7rem);
    }

    .pcjm-event-wrap {
        width: 100%;

        padding:
            0.35rem
            0.5rem
            0.75rem;
    }

    .pcjm-hero,
    .pcjm-card {
        margin-bottom: 0.85rem;
        padding: 1rem;

        border-radius: 14px;

        background:
            rgba(255, 255, 255, 0.18);

        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .pcjm-personality {
        margin-bottom: 1rem;
    }

    .pcjm-portrait {
        width: 126px;
        height: 126px;

        border-width: 3px;
    }

    .pcjm-hero h1 {
        margin-bottom: 1rem;

        font-size:
            clamp(
                2.05rem,
                11vw,
                2.8rem
            );
    }

    .pcjm-brand-row {
        gap: 0.7rem;

        margin-bottom: 1.2rem;
    }

    .pcjm-logo {
        width: 60px;
    }

    .pcjm-photographer {
        font-size: 0.94rem;
    }

    .pcjm-photographer strong {
        font-size: 1.08rem;
    }

    .pcjm-lead {
        margin-bottom: 1.05rem;

        font-size: 1.02rem;
        line-height: 1.55;
    }

    .pcjm-hero > p:last-child {
        font-size: 0.96rem;
        line-height: 1.55;
    }

    .pcjm-grid {
        grid-template-columns: 1fr;
    }

    .pcjm-steps {
        padding-left: 1.15rem;
    }

    .pcjm-choice-list {
        width: 100%;
    }

    .pcjm-choice {
        grid-template-columns:
            22px
            minmax(0, 1fr);

        column-gap: 0.65rem;
    }

    .pcjm-choice input[type="radio"],
    .pcjm-choice input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
    }
}


/* =========================================================
   30. KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 420px) {

    .pcjm-hero,
    .pcjm-card {
        padding-right: 0.85rem;
        padding-left: 0.85rem;
    }

    .pcjm-portrait {
        width: 112px;
        height: 112px;
    }

    .pcjm-logo {
        width: 54px;
    }

    .pcjm-photographer {
        font-size: 0.89rem;
    }

    .pcjm-photographer strong {
        font-size: 1rem;
    }

    .pcjm-form fieldset {
        padding: 0.85rem;
    }
}


/* =========================================================
   31. REDUZIERTE BEWEGUNGEN
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pcjm-submit {
        transition: none;
    }

    .pcjm-submit:hover {
        transform: none;
    }
}