/* --- Grundlayout --- */

body {
    margin: 0;
    background: #000;
    font-family: sans-serif;
}

/* --- Fixer Header & Footer --- */

.fixed-header,
.fixed-footer {
    position: fixed;
    left: 0;
    width: 100vw;
    height: auto;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.fixed-header {
    top: 0;
}

.fixed-footer {
    bottom: 0;
}

.fixed-header img,
.fixed-footer img {
    width: 100vw;   /* nimmt IMMER die volle Viewport-Breite */
    height: auto;   /* behält Proportionen */
    min-height: 10px;   /* Mindesthöhe */
    max-height: 30px;   /* Maximalhöhe */
    object-fit: cover; /* Bild füllt den Bereich, ohne verzerrt zu werden */
    display: block;
}

/* --- Scrollbarer Bereich --- */

.content {
    padding-top: 80px;   /* Abstand unter Header */
    padding-bottom: 80px; /* Abstand über Footer */
}

/* --- Wrapper --- */

.wrapper-large {
    width: 80%;
    margin: 0 auto;
    align-items: center;
}

.wrapper-small {
    width: 60%;
    margin: 0 auto;
    align-items: center;
}

.center {
    text-align: center;
}

/* --- Bilder --- */

.image-small {
    width: 50%;
    max-width: 200px;
}

.image-large {
    width: 100%;
    max-width: 1200px;
    display: block;
    margin: 40px auto; /* oben/unten 40px, links/rechts auto */
}

/* --- Section Divider --- */

.section-divider {
    height: clamp(50px, 20vw, 300px);
}


/* Handy / kleine Screens */
@media (max-width: 600px) {
    .section-divider {
        max-height: 500px; /* oder 80px oder 50px – was du willst */
    }
}


/* --- Bild-Buttons --- */

.img-button img {
    width: 180px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    cursor: pointer;
}

.img-button:hover img {
    transform: scale(1.05);
}

.img-button:active img {
    transform: scale(0.95);
}

/* --- Text --- */

.warning {
    margin-top: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
}





/* --- Flip Card (minimal & sauber) --- */

.flip-card {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


.flip-card-inner {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}

/* Flip bei Hover oder Klick – je nachdem, was du nutzt */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;                /* ersetzt top/right/bottom/left */
    backface-visibility: hidden;
    margin: 0 auto;          /* zentriert */
}

.flip-card-front img,
.flip-card-back img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;          /* zentriert */
}

.flip-card-back {
    transform: rotateY(180deg);
}


.section-divider {
    height: clamp(50px, 20vw, 300px);
}

@media (max-width: 600px) {
    .section-divider {
        height: 120px; /* oder 100px oder 80px */
    }
}