/*
|--------------------------------------------------------------------------
| Project Pierre – Kerzenseiten
|--------------------------------------------------------------------------
|
| Diese Datei enthält ausschließlich die Gestaltung der öffentlichen
| Kerzenseiten.
|
*/

/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.candle-navigation {
    position: relative;
    z-index: 10;

    width: 100%;

    border-bottom:
        var(--border-width)
        solid
        var(--color-border-soft);

    background-color: rgba(7, 9, 13, 0.96);
}

.candle-navigation .main-navigation {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );

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

.candle-navigation .main-navigation__list {
    min-height: 72px;
}

.candle-navigation .main-navigation__link {
    padding:
        var(--space-4)
        0;

    font-size: 0.95rem;
}

/*
|--------------------------------------------------------------------------
| Kopfbereich
|--------------------------------------------------------------------------
*/

.candle-page-header {
    position: relative;

    width: 100%;

    padding:
        20px
        0
        40px;

    overflow: hidden;

    border-bottom:
        var(--border-width)
        solid
        var(--color-border-soft);

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(214, 170, 98, 0.09),
            transparent 32rem
        ),
        linear-gradient(
            180deg,
            rgba(7, 9, 13, 0.98) 0%,
            rgba(10, 18, 34, 0.96) 100%
        );
}

.candle-page-header__inner {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        850px
    );

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

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.candle-page-header__symbol {
    margin-bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-10px);
}

.candle-page-header__image {
    width: 90px;
    height: auto;

    display: block;

    filter:
        drop-shadow(
            0
            8px
            24px
            rgba(0, 0, 0, 0.45)
        );
}

.candle-page-header__title {
    margin: 0;

    color: var(--color-white-soft);

    font-family: var(--font-family-heading);
	font-size: clamp(
		2.3rem,
		4vw,
		3.6rem
	);   
 font-weight: var(--font-weight-normal);
    letter-spacing: 0.01em;
    line-height: var(--line-height-tight);

    text-shadow:
        0
        4px
        18px
        rgba(0, 0, 0, 0.38);
}

.candle-page-header__divider {
    width: min(420px, 78%);

    margin:
        24px
        auto
        26px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.candle-page-header__line {
    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-accent-light)
        );

    opacity: 0.72;
}

.candle-page-header__line:last-child {
    background:
        linear-gradient(
            90deg,
            var(--color-accent-light),
            transparent
        );
}

.candle-page-header__heart {
    color: var(--color-accent);

    font-family: var(--font-family-heading);
    font-size: 1.15rem;
    line-height: 1;

    text-shadow:
        0
        0
        12px
        rgba(214, 170, 98, 0.48);
}

.candle-page-header__text {
    max-width: 720px;

    color: var(--color-text-soft);

font-size: 1rem;
line-height: 1.8;
}

/*
|--------------------------------------------------------------------------
| Formularbereich
|--------------------------------------------------------------------------
*/

.candle-form-section {
    padding:
        20px
        0
        80px;
}

.candle-form-container {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        1200px
    );

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

.candle-form-types {
    text-align: center;
}

.candle-form-types__title {
    margin: 0;

    color: var(--color-white-soft);

    font-family: var(--font-family-heading);
	font-size: clamp(
		1.8rem,
		3vw,
		2.5rem
	);

}

/*
|--------------------------------------------------------------------------
| Kerzenmotivauswahl
|--------------------------------------------------------------------------
*/

.candle-form-types__divider {
    width: min(320px, 76%);

    margin:
        14px
        auto
        30px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.candle-form-types__divider > span:not(
    .candle-form-types__heart
) {
    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214, 170, 98, 0.65)
        );
}

.candle-form-types__divider > span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(214, 170, 98, 0.65),
            transparent
        );
}

.candle-form-types__heart {
    color: var(--color-accent);

    font-family: var(--font-family-heading);
    font-size: 0.9rem;
    line-height: 1;
}

.candle-type-grid {
    width: min(100%, 1200px);

    margin:
        0
        auto;

    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 24px;
}

.candle-type-option {
    position: relative;

    min-width: 0;

    display: block;

    cursor: pointer;
}

.candle-type-option__input {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    border: 0;

    white-space: nowrap;
}

.candle-type-option__card {
    position: relative;

    min-height: 310px;

    padding:
        30px
        22px
        24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    overflow: hidden;

    border:
        1px
        solid
        var(--color-border-soft);

    border-radius: var(--border-radius-md);

    background:
        linear-gradient(
            180deg,
            rgba(16, 28, 51, 0.42),
            rgba(7, 9, 13, 0.72)
        );

    transition:
        border-color var(--transition-normal),
        background-color var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.candle-type-option:hover
.candle-type-option__card {
    border-color:
        rgba(214, 170, 98, 0.48);

    transform: translateY(-2px);
}

.candle-type-option__input:focus-visible
+ .candle-type-option__card {
    outline:
        2px
        solid
        var(--color-accent-light);

    outline-offset: 4px;
}

.candle-type-option__input:checked
+ .candle-type-option__card {
    border-color:
        var(--color-accent);

    background:
        linear-gradient(
            180deg,
            rgba(214, 170, 98, 0.08),
            rgba(10, 18, 34, 0.72)
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(214, 170, 98, 0.16),
        var(--shadow-soft);
}

.candle-type-option__image-wrapper {
    width: 100%;
    height: 235px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.candle-type-option__image {
    width: auto;
    max-width: 180px;
    max-height: 225px;

    object-fit: contain;

    filter:
        drop-shadow(
            0
            16px
            24px
            rgba(0, 0, 0, 0.42)
        );
}

.candle-type-option__name {
    color: var(--color-white-soft);

    font-family: var(--font-family-heading);
    font-size: 1.05rem;
    line-height: 1.4;
    text-align: center;
}

.candle-type-option__mark {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px
        solid
        var(--color-border-soft);

    border-radius: 50%;

    background:
        rgba(7, 9, 13, 0.72);

    color: transparent;

    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;

    transition:
        color var(--transition-normal),
        border-color var(--transition-normal),
        background-color var(--transition-normal);
}

.candle-type-option__input:checked
+ .candle-type-option__card
.candle-type-option__mark {
    border-color:
        var(--color-accent);

    background:
        var(--color-accent);

    color:
        var(--color-black);
}

/*
|--------------------------------------------------------------------------
| Formularfelder
|--------------------------------------------------------------------------
*/

.candle-form-fields {
    width: min(100%, 820px);

    margin:
        78px
        auto
        0;

    display: grid;
    gap: 48px;
}

.candle-form-field {
    display: grid;
    gap: 14px;

    text-align: left;
}

.candle-form-label {
    color: var(--color-white-soft);

    font-family: var(--font-family-heading);
    font-size: 1.2rem;
    line-height: 1.4;
}

.candle-form-input,
.candle-form-textarea {
    width: 100%;

    border: 0;
    border-bottom:
        1px
        solid
        rgba(214, 170, 98, 0.42);

    border-radius: 0;

    background: transparent;

    color: var(--color-white-soft);

    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);

    transition:
        border-color var(--transition-normal),
        background-color var(--transition-normal);
}

.candle-form-input {
    min-height: 54px;

    padding:
        12px
        4px;
}

.candle-form-textarea {
    min-height: 190px;

    padding:
        16px
        4px;

    resize: vertical;
}

.candle-form-input:hover,
.candle-form-textarea:hover {
    border-bottom-color:
        rgba(214, 170, 98, 0.72);
}

.candle-form-input:focus,
.candle-form-textarea:focus {
    outline: 0;

    border-bottom-color:
        var(--color-accent-light);

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(214, 170, 98, 0.025)
        );
}

.candle-form-field__help {
    margin: 0;

    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/*
|--------------------------------------------------------------------------
| Datenschutz und Absenden
|--------------------------------------------------------------------------
*/

.candle-form-consent {
    width: min(100%, 820px);

    margin:
        52px
        auto
        0;
}

.candle-form-consent__label {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    cursor: pointer;
}

.candle-form-consent__input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.candle-form-consent__checkbox {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px
        solid
        var(--color-border);

    border-radius:
        var(--border-radius-sm);

    color: transparent;

    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
}

.candle-form-consent__input:checked
+ .candle-form-consent__checkbox {
    border-color:
        var(--color-accent);

    background:
        var(--color-accent);

    color:
        var(--color-black);
}

.candle-form-consent__input:focus-visible
+ .candle-form-consent__checkbox {
    outline:
        2px
        solid
        var(--color-accent-light);

    outline-offset:
        4px;
}

.candle-form-consent__text {
    color: var(--color-text-soft);

    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

.candle-form-actions {
    margin-top: 44px;

    display: flex;
    justify-content: center;
}

.candle-form-submit {
    min-height: 52px;

    padding:
        15px
        34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border:
        1px
        solid
        var(--color-accent);

    border-radius: 999px;

    background: transparent;

    color: var(--color-white-soft);

    cursor: pointer;

    font: inherit;

    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        border-color var(--transition-normal);
}

.candle-form-submit:hover,
.candle-form-submit:focus-visible {
    background: var(--color-accent);

    color: var(--color-black);
}

/*
|--------------------------------------------------------------------------
| Formularmeldungen
|--------------------------------------------------------------------------
*/

.candle-form-message {
    width: min(100%, 820px);

    margin:
        0
        auto
        54px;

    padding:
        22px
        24px;

    border:
        1px
        solid
        var(--color-border-soft);

    border-radius:
        var(--border-radius-md);

    color: var(--color-text-soft);

    line-height: var(--line-height-relaxed);
}

.candle-form-message strong {
    color: var(--color-white-soft);

    font-family: var(--font-family-heading);
    font-size: 1.15rem;
}

.candle-form-message p {
    margin:
        6px
        0
        0;
}

.candle-form-message ul {
    margin:
        12px
        0
        0;

    padding-left: 22px;
}

.candle-form-message__symbol {
    display: block;

    margin-bottom: 10px;

    color: var(--color-accent-light);

    font-size: 1.5rem;
}

.candle-form-message--success {
    border-color:
        rgba(214, 170, 98, 0.58);

    background:
        rgba(214, 170, 98, 0.055);
}

.candle-form-message--error {
    border-color:
        rgba(210, 118, 118, 0.55);

    background:
        rgba(210, 118, 118, 0.055);
}

.candle-form-empty {
    padding: 28px;

    border:
        1px
        solid
        var(--color-border-soft);

    border-radius:
        var(--border-radius-md);

    color: var(--color-text-soft);

    line-height: var(--line-height-relaxed);

    text-align: center;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .candle-navigation .main-navigation__list {
        min-height: auto;

        padding:
            var(--space-4)
            0;
    }

    .candle-page-header {
        padding:
            80px
            0
            90px;
    }

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

        max-width: 650px;
    }

}

/*
|--------------------------------------------------------------------------
| Smartphone
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .candle-navigation .main-navigation__list {
        padding:
            var(--space-3)
            0;

        gap:
            var(--space-1)
            var(--space-4);
    }

    .candle-page-header {
        padding:
            65px
            0
            72px;
    }

    .candle-page-header__symbol {
        margin-bottom: 20px;
    }

    .candle-page-header__title {
        font-size: clamp(
            2.25rem,
            12vw,
            3.15rem
        );
    }

    .candle-page-header__divider {
        width: 260px;

        margin:
            24px
            auto
            20px;

        gap: 12px;
    }

    .candle-page-header__text {
        font-size: var(--font-size-base);
        line-height: 1.75;
    }

    .candle-form-section {
        padding:
            50px
            0
            85px;
    }

    .candle-form-types__divider {
        margin-bottom: 34px;
    }

    .candle-type-grid {
        grid-template-columns: 1fr;

        max-width: 340px;

        gap: 20px;
    }

    .candle-type-option__card {
        min-height: 280px;
    }

    .candle-type-option__image-wrapper {
        height: 185px;
    }

    .candle-type-option__image {
        max-height: 180px;
    }

    .candle-form-fields {
        margin-top: 58px;

        gap: 38px;
    }

    .candle-form-label {
        font-size: 1.08rem;
    }

    .candle-form-textarea {
        min-height: 165px;
    }

    .candle-form-submit {
        width: 100%;
    }

}

/*
|--------------------------------------------------------------------------
| Feinschliff – Seite „Kerze anzünden“
|--------------------------------------------------------------------------
|
| Diese Regeln veredeln ausschließlich die bestehende Darstellung.
| Die vorhandene Struktur und Funktion bleiben unverändert.
|
*/

/* Formularbereich etwas großzügiger und klarer vom Hero absetzen */
.candle-form-section {
    padding:
        20px
        0
        132px;
}

/* Motivauswahl */
.candle-form-types__title {
    letter-spacing: 0.01em;
    text-shadow:
        0
        3px
        14px
        rgba(0, 0, 0, 0.28);
}

.candle-type-grid {
    gap: 22px;
}

.candle-type-option__card {
    min-height: 320px;

    border-color:
        rgba(214, 170, 98, 0.16);

    background:
        linear-gradient(
            180deg,
            rgba(16, 28, 51, 0.5),
            rgba(7, 9, 13, 0.78)
        );
}

.candle-type-option:hover
.candle-type-option__card {
    border-color:
        rgba(214, 170, 98, 0.58);

    box-shadow:
        0
        16px
        34px
        rgba(0, 0, 0, 0.2);
}

.candle-type-option__input:checked
+ .candle-type-option__card {
    box-shadow:
        0
        0
        0
        1px
        rgba(214, 170, 98, 0.2),
        0
        18px
        38px
        rgba(0, 0, 0, 0.25);
}

/* Übergang von der Motivauswahl zu den persönlichen Angaben */
.candle-form-fields {
    position: relative;

    margin-top: 50px;

    gap: 40px;
}

.candle-form-fields::before {
    content: "";

    position: absolute;
    top: -48px;
    left: 50%;

    width: min(100%, 620px);
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214, 170, 98, 0.32),
            transparent
        );
}

/* Feldbeschriftungen */
.candle-form-label {
    color:
        rgba(247, 244, 237, 0.94);

    font-size: 1.08rem;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.015em;
}

/* Eingabefelder */
.candle-form-input,
.candle-form-textarea {
    border-bottom-color:
        rgba(214, 170, 98, 0.34);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.008),
            rgba(214, 170, 98, 0.012)
        );

    caret-color:
        var(--color-accent-light);
}

.candle-form-input {
    min-height: 58px;

    padding:
        14px
        6px;
}

.candle-form-textarea {
    min-height: 150px;

    padding:
        18px
        6px;

    line-height:
        var(--line-height-relaxed);
}

.candle-form-input:hover,
.candle-form-textarea:hover {
    border-bottom-color:
        rgba(214, 170, 98, 0.62);
}

.candle-form-input:focus,
.candle-form-textarea:focus {
    border-bottom-color:
        var(--color-accent-light);

    background:
        linear-gradient(
            180deg,
            rgba(214, 170, 98, 0.012),
            rgba(214, 170, 98, 0.04)
        );

    box-shadow:
        0
        8px
        22px
        -18px
        rgba(214, 170, 98, 0.45);
}

.candle-form-field__help {
    color:
        rgba(194, 198, 208, 0.72);

    font-size: 0.84rem;
}

/* Datenschutz */
.candle-form-consent {
    margin-top: 28px;

    padding:
        20px
        22px;

    border:
        1px
        solid
        rgba(214, 170, 98, 0.16);

    border-radius:
        var(--border-radius-md);

    background:
        rgba(255, 255, 255, 0.012);
}

.candle-form-consent__label {
    align-items: center;

    gap: 16px;
}

.candle-form-consent__checkbox {
    width: 26px;
    height: 26px;

    flex-basis: 26px;

    border-color:
        rgba(214, 170, 98, 0.46);

    background:
        rgba(7, 9, 13, 0.54);

    transition:
        border-color var(--transition-normal),
        background-color var(--transition-normal),
        color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.candle-form-consent__label:hover
.candle-form-consent__checkbox {
    border-color:
        var(--color-accent);
}

.candle-form-consent__input:checked
+ .candle-form-consent__checkbox {
    box-shadow:
        0
        0
        18px
        rgba(214, 170, 98, 0.18);
}

.candle-form-consent__text {
    color:
        rgba(226, 226, 226, 0.84);

    font-size: 0.9rem;
}

/* Absende-Button */
.candle-form-actions {
    margin-top: 25px;
}

.candle-form-submit {
    min-height: 56px;

    padding:
        16px
        38px;

    border-color:
        rgba(214, 170, 98, 0.74);

    background:
        linear-gradient(
            180deg,
            rgba(214, 170, 98, 0.055),
            rgba(214, 170, 98, 0.015)
        );

    box-shadow:
        0
        12px
        28px
        rgba(0, 0, 0, 0.18);

    letter-spacing: 0.01em;

    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.candle-form-submit:hover,
.candle-form-submit:focus-visible {
    border-color:
        var(--color-accent-light);

    background:
        var(--color-accent);

    box-shadow:
        0
        16px
        32px
        rgba(0, 0, 0, 0.24),
        0
        0
        20px
        rgba(214, 170, 98, 0.14);

    transform:
        translateY(-2px);
}

.candle-form-submit:active {
    transform:
        translateY(0);
}

/* Erfolgs- und Fehlermeldungen */
.candle-form-message {
    position: relative;

    margin-bottom: 64px;

    padding:
        28px
        30px;

    overflow: hidden;

    text-align: center;
}

.candle-form-message::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 140px;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-accent-light),
            transparent
        );
}

.candle-form-message strong {
    display: block;

    font-size: 1.32rem;
    font-weight: var(--font-weight-normal);
}

.candle-form-message p {
    margin-top: 10px;

    color:
        rgba(226, 226, 226, 0.84);
}

.candle-form-message__symbol {
    margin-bottom: 14px;

    font-size: 1.8rem;

    text-shadow:
        0
        0
        16px
        rgba(214, 170, 98, 0.3);
}

.candle-form-message--success {
    border-color:
        rgba(214, 170, 98, 0.46);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(214, 170, 98, 0.08),
            transparent 65%
        ),
        rgba(214, 170, 98, 0.025);
}

.candle-form-message--error {
    text-align: left;
}

/*
|--------------------------------------------------------------------------
| Feinschliff – Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .candle-form-section {
        padding:
            62px
            0
            108px;
    }

    .candle-form-fields {
        margin-top: 86px;
    }

}

/*
|--------------------------------------------------------------------------
| Feinschliff – Smartphone
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .candle-form-section {
        padding:
            48px
            0
            82px;
    }

    .candle-form-types__title {
        font-size: clamp(
            1.9rem,
            10vw,
            2.55rem
        );
    }

    .candle-type-option__card {
        min-height: 290px;
    }

    .candle-form-fields {
        margin-top: 76px;

        gap: 42px;
    }

    .candle-form-fields::before {
        top: -38px;
    }

    .candle-form-textarea {
        min-height: 190px;
    }

    .candle-form-consent {
        margin-top: 46px;

        padding:
            18px;
    }

    .candle-form-consent__label {
        align-items: flex-start;
    }

    .candle-form-consent__text {
        font-size: 0.86rem;
    }

    .candle-form-actions {
        margin-top: 40px;
    }

    .candle-form-message {
        padding:
            24px
            20px;

        margin-bottom: 48px;
    }

}