/* =========================================
   1. GLOBALE VARIABLEN & FONTS
   ========================================= */
:root {
    --primary-color: #4D769E;
    --accent-color: #8DD18D;
    --text-color: #4D4D4D;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
    --link-color: #518F51;
    --font-heading: 'Rubik', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Poppins-Regular.woff2') format('woff2'); 
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/rubik-v7-latin-regular.woff2') format('woff2');
}

/* =========================================
   2. BODY & HINTERGRUND
   ========================================= */
body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* Wichtig für Sticky Footer */
    color: var(--text-color);
    text-align: center;
    
    /* NEU: Vollflächiger Hintergrund */
    background: url('/images/UNUN-Hintergrund-2.webp') no-repeat center center fixed;
    background-size: cover;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: #BD242F; /* Klassisches Rot */
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Wenn der Link bereits geklickt/besucht wurde */
a:visited {
    color: #cf2e2e; /* Vivid Red */
}

/* Beim Drüberfahren mit der Maus */
a:hover, a:active {
    color: #cf2e2e; /* Vivid Red */
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: bold;
    color: var(--primary-color); /* Überschriften im Primary Blau */
    margin: 0 0 1em 0;
}

p {
    margin: 0 auto 1.5em auto;
}

/* =========================================
   3. MINIMALISTISCHER HEADER
   ========================================= */
header {
    background: transparent; 
    box-shadow: none; 
    position: relative; /* Scrollt brav mit */
    z-index: 1000;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: bold;
    color: #BD242F !important; /* Striktes blutrot */
    text-decoration: none;
    letter-spacing: 1px;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6); 
    display: inline-block; /* Zwingend nötig, damit sich das Element bewegen (zittern) kann */
    transition: transform 0.2s ease;
    text-align: center;
}

/* Der unheimliche Hover-Effekt (Kein Grün mehr!) */
.site-name:hover, .site-name:focus {
    color: #BD242F !important; /* Bleibt blutrot */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), -2px -2px 4px rgba(189, 36, 47, 0.4); /* Dunkler, blutiger Schatten */
    animation: jitter 0.2s infinite; /* Startet das Zittern */
}

/* Die Zitter-Animation (bedrohlich & unruhig) */
@keyframes jitter {
    0%   { transform: scale(1.05) translate(0px, 0px) rotate(0deg); }
    25%  { transform: scale(1.05) translate(1px, -1px) rotate(-1deg); }
    50%  { transform: scale(1.05) translate(-1px, 1px) rotate(0deg); }
    75%  { transform: scale(1.05) translate(-1px, -1px) rotate(1deg); }
    100% { transform: scale(1.05) translate(1px, 1px) rotate(0deg); }
}

@media (max-width: 600px) {
    .site-name {
        font-size: 1.1rem;
    }
}

/* =========================================
   4. CONTENT-BEREICH & BUCHUNGS-MODUL
   ========================================= */
.content-wrapper {
    flex-grow: 1;
    width: 100%;
    padding: 40px 20px; /* Gibt dem Modul Luft zum Atmen */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Anzeige-Modul (Termin-Karten) */
.slot-container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.slot-card {
    background-color: rgba(255, 255, 255, 0.95); /* Leicht transparent, passend zum Bild */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    margin-bottom: 20px;
    text-align: left;
    border-left: 5px solid var(--accent-color); /* Grüner Akzent an der Seite */
}

/* Buchungs-Modul (Das Formular) */
.booking-form-container {
    background-color: rgba(255, 255, 255, 0.95);
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    text-align: left;
}

.booking-form-container label {
    font-weight: bold;
    color: var(--text-color);
    display: block;
    margin-bottom: 5px;
}

.booking-form-container input[type="text"],
.booking-form-container input[type="email"],
.booking-form-container input[type="number"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 1rem;
    margin-bottom: 20px;
}

.booking-form-container input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(77, 118, 158, 0.5);
}

/* Buttons */
button[type="submit"],
.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-family: var(--font-heading);
    font-weight: bold;
    display: inline-block;
    transition: background-color 0.3s;
    text-align: center;
    width: 100%; /* Button über die volle Breite im Formular */
}

button[type="submit"]:hover,
.btn-primary:hover {
    background-color: #3b5d7e; /* Etwas dunkler beim Hover */
    color: var(--white);
}

/* =========================================
   5. ORIGINAL THEATERSCHIFF FOOTER
   ========================================= */
.footer {
    background: #005566 url('/images/bg-footer.jpg') center top;
    background-size: cover;
    color: #ffffff;
    width: 100%;
    position: relative; 
    
    /* Höhe reduziert: Oben 80px, unten 40px */
    padding: 80px 20px 40px 20px; 
    margin-top: auto; 
    overflow: hidden; 
}

.footer a {
    color: #ffffff;
    font-weight: normal;
}

.footer a:hover {
    color: #cf2e2e; 
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative;
    z-index: 10; 
    
    /* Weniger Abstand nach oben zu den Fischen */
    margin-top: 20px; 
}

/* --- Die robusten Fische --- */
.footer__fish {
    /* WICHTIG: Achte hier auf den korrekten Pfad mit ../ */
    background: url('/images/fish.svg') no-repeat center center;
    background-size: contain;
    position: absolute;
    width: 6em;
    height: 6em; /* Feste Höhe, damit das div nicht kollabiert */
    z-index: 5;
}

.footer__fish--1 {
    top: 1.5rem;
    left: calc(50% + 10em);
}

.footer__fish--2 {
    top: 0.5rem;
    left: calc(50% + 18em);
}

@media (max-width: 768px) {
    .footer {
        padding: 60px 15px 30px 15px; /* Auf dem Handy noch kompakter */
    }
    .footer-links {
        margin-top: 15px;
        flex-direction: column;
        gap: 10px;
    }
    .footer__fish--1 {
        left: 65%;
        width: 4em;
        height: 4em;
    }
    .footer__fish--2 {
        left: 80%;
        top: 0.5rem;
        width: 3em;
        height: 3em;
    }
}
/* =========================================
   6. DAS SCHIFF (Unten Links & Überlappung)
   ========================================= */
.ship {
    position: relative; 
    margin-bottom: -4em; /* Zieht den Footer optisch nach oben unter das Schiff */
    left: 0;
    z-index: 20; /* Muss höher sein als der Footer (10) */
    
    display: flex;
    align-items: flex-end; /* Drückt die Logos nach unten */
    justify-content: flex-start; /* ZWINGT das Schiff und die Logos nach ganz links! */
    
    padding: 0 20px 20px 20px;
    height: 10em; 
    width: 100%;
    
    pointer-events: none; /* Verhindert, dass das Element Klicks blockiert */
}

/* Die eigentliche Schiff-Grafik */
.ship::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Hintergrund links unten andocken */
    background: url('/images/bg-ship.svg') no-repeat left bottom;
    
    /* Skaliert die Grafik auf die volle Höhe (10em), ohne sie zu verzerren */
    background-size: auto 100%; 
    
    /* WICHTIG: Positiver Z-Index, damit es VOR dem Footer, aber HINTER den Logos liegt */
    z-index: 1; 
}

/* Die Logos im Schiff */
.ship__logos {
    display: flex;
    align-items: center;
    gap: 15px;
    
    pointer-events: auto; /* Logos sind klickbar */
    position: relative; /* Wichtig, damit der Z-Index greift */
    z-index: 2; /* Liegt über der Schiff-Grafik */
}

.ship__logos img {
    max-height: 50px;
    width: auto;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    .ship {
        /* Container etwas niedriger machen, damit das verkleinerte Schiff gut reinpasst */
        height: 5.5em; 
        padding: 0 10px 15px 10px;
        margin-bottom: -2em; 
    }
    
    .ship::after {
        width: 60%; /* Geht bis maximal 60% der Bildschirmbreite (die Fische fangen erst bei 65% an) */
        
        /* DAS ist der Trick: Komplett sichtbar machen, ohne abzuschneiden! */
        background-size: contain; 
        background-position: left bottom; /* Sicherstellen, dass es links unten vor Anker liegt */
    }
    
    .ship__logos img {
        max-height: 35px;
    }
    
    .footer__signet, 
    .footer__secondary-logo {
        display: none; 
    }
}
/* =========================================
   7. WACHSSIEGEL-STEMPEL (Am letzten Slot)
   ========================================= */

Das bekommen wir hin! Ein größeres Siegel wirkt natürlich noch viel imposanter und "echter".

Wenn wir die Größe verdoppeln, müssen wir dem Stempel nach unten hin (außerhalb der Karte) etwas mehr Platz geben, damit er nicht in den Footer rauscht. Das habe ich über margin-bottom am Container gelöst.

Um ihn weiter nach rechts und gleichzeitig ein Stück höher (also weiter in die Karte hinein) zu schieben, passen wir die right- und bottom-Werte entsprechend an. Den Schatten habe ich auch minimal vergrößert, damit die Tiefe bei dem riesigen Stempel noch realistischer wirkt.

Hier ist das angepasste Update für den Stempel-Block (Block 7):

CSS
/* =========================================
   7. WACHSSIEGEL-STEMPEL (Am letzten Slot)
   ========================================= */

.slot-container {
    /* Mehr Platz nach unten, damit der riesige Stempel nicht den Footer berührt */
    margin-bottom: 160px; 
}

.slot-card:last-of-type {
    position: relative; 
}

.slot-card:last-of-type::after {
    content: "";
    position: absolute;
    
    /* POSITIONIERUNG */
    bottom: -140px; /* Schiebt ihn etwas höher in die Karte rein */
    right: -70px;   /* Schiebt ihn deutlich weiter nach rechts raus */
    
    /* DOPPELTE GRÖSSE */
    width: 260px;  
    height: 260px;
    
    background-image: url('/images/Fremdistan-Stempel-Wachssiegel-scaled.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    
    z-index: 15; 
    pointer-events: none; 
    transform: rotate(-12deg); 
    
    /* Schatten leicht verstärkt für das größere Element */
    filter: drop-shadow(3px 6px 10px rgba(0, 0, 0, 0.3)); 
}

/* Mobile Anpassung für das größere Siegel */
@media (max-width: 768px) {
    .slot-container {
        margin-bottom: 100px; 
    }
    .slot-card:last-of-type::after {
        width: 150px;
        height: 150px;
        bottom: -80px;
        right: -30px;
    }
}
/* =========================================
   ATMOSPHÄRE: Düster, Befremdlich (Fremdistan)
   ========================================= */

/* Harte, rote Überschriften (jetzt überall) */
.intro-block h2, 
.slots-headline, 
.slot-card h3,
.booking-form-container h3 {
    color: #BD242F !important;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Konsequent schwarzer Text auf den Modulen */
.intro-content p,
.slot-card p,
.text-empty {
    color: #000000 !important;
    font-family: var(--font-body);
}

/* --- Der Intro-Baustein --- */
.intro-block {
    max-width: 800px;
    margin: 0 auto 40px auto;
    background-color: #d9d4d4; /* Schmutziges Grau für Kontrast */
    border: 1px solid #000000;
    border-bottom: 4px solid #BD242F; /* Harter roter Abschluss */
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.intro-image {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(40%) contrast(120%); /* Zieht Farbe raus, macht es rauer */
    border-bottom: 2px solid #000000;
}

.intro-content {
    padding: 30px;
    text-align: center;
}

/* --- Die Termin-Karten --- */
.slot-card {
    background-color: #d9d4d4; 
    border: 1px solid #4a4a4a; 
    border-left: 5px solid #BD242F; /* Rote Flanke */
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
    text-align: left;
}

.slot-card:hover {
    border-color: #BD242F;
    box-shadow: 0 5px 25px rgba(189, 36, 47, 0.4);
}

/* Status-Texte */
.text-available {
    color: #000000 !important;
    font-weight: bold;
    margin-bottom: 20px;
}
.text-booked {
    color: #BD242F !important;
    font-weight: bold;
}

/* --- Brutalismus-Buttons (Eckig, Hart, Rot/Schwarz) --- */
.btn-primary {
    display: inline-block;
    background-color: #BD242F !important;
    color: #ffffff !important;
    padding: 12px 25px;
    border: 1px solid #000000;
    text-decoration: none !important;
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 0; /* Keine weichen Kanten mehr! */
    box-shadow: 3px 3px 0px #000000; /* Harter Schlagschatten */
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #000000 !important;
    color: #BD242F !important;
    transform: translate(3px, 3px); /* Button drückt sich nach unten rechts */
    box-shadow: 0px 0px 0px #000000; /* Schatten verschwindet beim "Drücken" */
}