body {
    --main-color: #F3A7BA;
}

/* ── HERO ─────────────────────────────────────────── */
.fotobox-hero-wrapper {
    position: relative;
    width: 100%;
    overflow-x: clip;
    padding-top: 8rem;
    padding-bottom: 5rem;
}
.hero-background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.fotobox-hero-content{
    position: relative;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 3fr 1fr;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Fotobox-Produkt links */
.fotobox-hero-product {
    width: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Mittlere Spalte: Titel → Fotos → Button */
.fotobox-hero-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rem;
}

.fotobox-hero-titles {
    text-align: center;
}

.fotobox-hero-label {
    font-family: Lobster;
    color: white;
    margin: 0;
    font-size: var(--fs-150);
}

/* Kundenfotos nebeneinander */
.fotobox-hero-photos {
    display: flex;
    gap: 1.5vw;
    align-items: center;
    justify-content: center;
}

/* Wrapper-Div erzeugt den weißen Foto-Rahmen */
.fotobox-hero-photo-frame {
    background: white;
    padding: 0.5vw 0.5vw;
    box-shadow: 0 0.4vw 1.5vw rgba(0, 0, 0, 0.4);
    width: 20vw;
    flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fotobox-hero-photo-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.fotobox-hero-photo-1 {
    transform: rotate(-4deg);
}

.fotobox-hero-photo-2 {
    transform: rotate(3deg);
}

/* Preis-Badge (Starburst) */
.fotobox-hero-badge-wrapper {
    position: absolute;
    bottom: 0%;
    right: -10%;
    z-index: 3;
    width: 10vw;
    max-width: 160px;
    min-width: 70px;
    transform: rotate(10deg);
    filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.45));
}

.fotobox-hero-badge {
    aspect-ratio: 1;
    background-color: white;
    clip-path: polygon(
        50%  0%, 59% 16%, 75%  7%, 75% 25%, 93% 25%,
        84% 41%,100% 50%, 84% 59%, 93% 75%, 75% 75%,
        75% 93%, 59% 84%, 50%100%, 41% 84%, 25% 93%,
        25% 75%,  7% 75%, 16% 59%,  0% 50%, 16% 41%,
         7% 25%, 25% 25%, 25%  7%, 41% 16%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.badge-pre,
.badge-post {
    font-family: Comfortaa;
    font-size: 0.8em;
    color: var(--main-color);
    font-weight: bold;
}

.badge-price {
    font-family: Comfortaa;
    font-size: 2em;
    font-weight: bold;
    color: var(--main-color);
    line-height: 1.2;
}

@media (max-width: 700px) {
    .fotobox-hero-center {
        margin-left: 30%;
        margin-right: 4%;
        gap: 1vw;
    }
    .fotobox-hero-badge-wrapper {
        display: none;
    }
    .fotobox-hero-photo-frame {
        width: 20vw;
    }
}

@media (max-width: 480px) {
    .fotobox-hero-wrapper {
        padding-top: 6rem;
        padding-bottom: 3.5rem;
    }
    .fotobox-hero-content {
        grid-template-columns: 1fr;
    }
    .fotobox-hero-product {
        display: none;
    }
    .fotobox-hero-center {
        margin-left: 0;
        margin-right: 0;
        padding: 0 1rem;
        gap: 1.5rem;
    }
    .fotobox-hero-photos {
        gap: 3vw;
    }
    .fotobox-hero-photo-frame {
        width: 38vw;
        padding: 1.5vw;
    }
    /* Comfortable full-width tap targets on phones */
    .fotobox-hero-center .bt-simple-black,
    .fotobox-package-card .fotobox-bt-primary {
        width: 100%;
        max-width: 320px;
    }
}

h1 {
    color: white;
    text-align: center;
    font-family: 'Comfortaa';
}

.fotobox-hero-title {
    font-weight: lighter;
    font-size: var(--fs-400);
    margin: 0;
}


/* ── GLOBAL BUTTON ────────────────────────────────── */
.fotobox-bt-primary {
    display: inline-block;
    background-color: white;
    color: var(--main-color);
    font-family: Comfortaa;
    font-weight: bold;
    font-size: var(--fs-100);
    border: none;
    border-radius: 50px;
    padding: 0.8rem 2rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.fotobox-bt-primary:hover {
    background-color: var(--main-color);
    color: white;
    outline: 2px solid white;
}

/* On light backgrounds the button is filled pink */
.fotobox-section .fotobox-bt-primary,
.fotobox-section-tinted .fotobox-bt-primary {
    background-color: var(--main-color);
    color: white;
}

.fotobox-section .fotobox-bt-primary:hover,
.fotobox-section-tinted .fotobox-bt-primary:hover {
    background-color: #c94d8e;
    outline: none;
}

/* ── SECTIONS ─────────────────────────────────────── */
.fotobox-section {
    padding: 0 0 var(--fs-400);
}

.fotobox-section-tinted {
    background-color: #fdf2f8;
    padding-top: 1px;
    padding-bottom: var(--fs-400);
}

/* ── FEATURES ─────────────────────────────────────── */
.fotobox-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 4rem;
    max-width: 1000px;
}

.fotobox-feature-item {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.fotobox-feature-icon {
    flex-shrink: 0;
    width: var(--fs-400);
    height: var(--fs-400);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fotobox-feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fotobox-feature-item h3 {
    margin: 0 0 0.3rem;
    font-size: var(--fs-100);
}

.fotobox-feature-item p {
    margin: 0;
}

@media (max-width: 600px) {
    .fotobox-features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ── PAKETE ───────────────────────────────────────── */
.fotobox-packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    align-items: stretch;
}

.fotobox-package-card {
    background-color: white;
    border-radius: 20px;
    border: 2px solid #eee;
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    position: relative;
}

.fotobox-package-featured {
    border-color: var(--main-color);
    box-shadow: 0 4px 24px rgba(225, 90, 161, 0.2);
}

.package-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--main-color);
    color: white;
    font-family: Comfortaa;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.25rem 1rem;
    border-radius: 0 0 12px 12px;
}

.package-name {
    margin: 0.5rem 0 0;
    font-size: var(--fs-150);
}

.package-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
}

.package-features li {
    padding: 0.35rem 0;
    padding-left: 1.4rem;
    position: relative;
    line-height: 1.4;
}

.package-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--main-color);
    font-weight: bold;
}

.package-price {
    font-family: Comfortaa;
    font-size: var(--fs-250);
    font-weight: bold;
    color: var(--main-color);
    margin-top: auto;
}

@media (max-width: 700px) {
    .fotobox-packages-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

/* ── LIEFERUNG ────────────────────────────────────── */
.fotobox-delivery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 900px;
}

.fotobox-delivery-card {
    background-color: white;
    border-radius: 20px;
    border: 2px solid #eee;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
}

.fotobox-delivery-icon {
    width: var(--fs-400);
    height: var(--fs-400);
    background-color: #fce8f4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color);
}

.fotobox-delivery-icon svg {
    width: 50%;
    height: 50%;
}

.fotobox-delivery-card h3 {
    margin: 0;
}

.fotobox-delivery-card p {
    margin: 0;
}

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

/* ── ABLAUF ───────────────────────────────────────── */
.fotobox-steps {
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fotobox-step {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    position: relative;
    padding-bottom: 2rem;
}

.fotobox-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--fs-300) / 2 - 1px);
    top: var(--fs-300);
    bottom: 0;
    width: 2px;
    background-color: #f0c8e2;
}

.fotobox-step-number {
    flex-shrink: 0;
    width: var(--fs-300);
    height: var(--fs-300);
    background-color: var(--main-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Comfortaa;
    font-weight: bold;
    font-size: var(--fs-150);
    z-index: 1;
}

.fotobox-step-content {
    padding-top: 0.2rem;
}

.fotobox-step-content h3 {
    margin: 0 0 0.3rem;
    font-size: var(--fs-100);
}

.fotobox-step-content p {
    margin: 0;
}

/* ── CTA / KONTAKT ────────────────────────────────── */
.fotobox-bt-large {
    font-size: var(--fs-150);
    padding: 1rem 3rem;
}

.fotobox-contact-alt {
    text-align: center;
    margin-top: 2rem;
}

.fotobox-contact-alt p {
    margin-bottom: 1rem;
    color: #666;
}

/* ── MOTION & HOVER ───────────────────────────────── */

/* Buttons: subtle lift on hover */
.bt-simple-black {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bt-simple-black:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.fotobox-bt-primary {
    transition: background-color 0.2s, color 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
}
.fotobox-bt-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(225, 90, 161, 0.3);
}

/* Hero photos: straighten, lift and lift forward on hover */
.fotobox-hero-photo-1:hover,
.fotobox-hero-photo-2:hover {
    transform: rotate(0deg) scale(1.05) translateY(-4px);
    box-shadow: 0 0.8vw 2.2vw rgba(0, 0, 0, 0.45);
    z-index: 4;
}

/* Feature icons gently pop when hovering the item */
.fotobox-feature-icon {
    transition: transform 0.3s ease;
}
.fotobox-feature-item:hover .fotobox-feature-icon {
    transform: scale(1.12) rotate(-3deg);
}

/* Cards: lift + deepen shadow on hover */
.fotobox-package-card,
.fotobox-delivery-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.fotobox-package-card:hover,
.fotobox-delivery-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(225, 90, 161, 0.22);
    border-color: var(--main-color);
}
.fotobox-delivery-icon {
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.fotobox-delivery-card:hover .fotobox-delivery-icon {
    transform: scale(1.08);
    background-color: #f9d6e9;
}

/* Step number pulses outward on hover */
.fotobox-step-number {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fotobox-step:hover .fotobox-step-number {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(243, 167, 186, 0.25);
}

/* Hero entrance (staggered) */
@keyframes fb-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fb-rise-left {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fb-badge-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

.fotobox-hero-product { animation: fb-rise-left 0.8s ease-out both; }
.fotobox-hero-titles  { animation: fb-rise 0.7s ease-out 0.05s both; }
.fotobox-hero-photos  { animation: fb-rise 0.7s ease-out 0.20s both; }
.fotobox-hero-center > .bt-simple-black { animation: fb-rise 0.7s ease-out 0.35s both; }
/* Badge keeps its rotate() — only fade it in, pulse the inner shape */
.fotobox-hero-badge-wrapper { animation: fb-fade 0.6s ease-out 0.55s both; }
.fotobox-hero-badge { animation: fb-badge-pulse 2.8s ease-in-out 1.2s infinite; transform-origin: center; }

/* Scroll-reveal (classes added by fotobox.js) */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.reveal-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .fotobox-hero-product,
    .fotobox-hero-titles,
    .fotobox-hero-photos,
    .fotobox-hero-center > .bt-simple-black,
    .fotobox-hero-badge-wrapper,
    .fotobox-hero-badge {
        animation: none !important;
    }
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Kontaktformular-Modal: select-Felder wie input stylen */
#contact-form select {
    box-sizing: border-box;
    background-color: white;
    border: 2px solid black;
    border-radius: 20px;
    display: block;
    margin: 0.8rem auto 1.2rem;
    width: 80%;
    font-family: Comfortaa;
    font-size: var(--fs-100);
    min-height: var(--fs-300);
    padding: 0.2rem 1rem;
    color: black;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
}