* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Erika-Bold';
    src: url('fonts/G2Erika-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
    font-family: 'Erika-Bold', Arial, sans-serif;
    background-color: #ffffff;
    color: #000000;
}

/* 1. HINTERGRUNDBILD AUF DEN BODY LEGEN */
body {
    background-image: url('image/Studio12_Stammcafe_Film-6-2.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    background-repeat: no-repeat;
}

/* 2. SEKTIONEN TRANSPARENT MACHEN (damit das Bild sichtbar ist) */
.section {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 2px none #000000;
    background-color: transparent;
}

/* SECTION CONTAINER SETUP */
.section {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 6px none #000000;
}

/* ==========================================
   VEREINHEITLICHTE TYPOGRAPHIE & SVG-HEADINGS
   ========================================== */

/* VEKTOR-SVG STYLES FÜR SPIKE-FREIE KONTUREN */
.heading-svg {
    width: 100%;
    height: 4.5rem;
    /* Gibt dem SVG eine feste Höhe für exakt einheitliche Schrift */
    overflow: visible;
    display: block;
}

.heading-svg-multiline {
height: 4.5rem;
}



.heading-svg text {
    font-family: 'Erika-Bold', Arial, sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    text-transform: uppercase;
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 0.20em;
    stroke-linejoin: round;
    stroke-linecap: round;
    paint-order: stroke fill;
    filter: blur(0px);
    transition: none;
}

@keyframes blurSwitch {
    0% {
        filter: blur(0px);
        fill: #ffffff;
        stroke: #000000;
    }

    50% {
        filter: blur(4px);
        fill: #000000;
        stroke: #ffffff;
    }

    100% {
        filter: blur(0px);
        fill: #000000;
        stroke: #ffffff;
    }
}

/* EBENE 2: FLIESSTEXTE & DETAILS */
.text-sub {
    font-family: 'Erika-Bold', Arial, sans-serif;
    font-size: 1.8rem;
    line-height: 1;
    color: #000000;
    text-align: center;
    margin-top: 0em;
}

.text-sub a,
.text-content a {
    color: #000000;
    text-decoration: underline;
}


.fixed-nav-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 100;
}

.floating-btn {
    position: absolute;
    pointer-events: auto;
    text-decoration: none;
    padding: 10px 15px;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.floating-btn:hover {
    transform: scale(1) rotate(0deg) !important;

}

.floating-btn.active .heading-svg text {

    animation: blurSwitch 0.5s ease-in-out forwards;
    fill: #000000;
    stroke: #ffffff;
}

.link-about {
    top: 8%;
    right: 3%;
    transform: rotate(18deg);
}

.link-kontakt {
    top: 18%;
    left: -2%;
    transform: rotate(-20deg);
}

.link-projekte {
    bottom: 7%;
    right: 14%;
    transform: rotate(-8deg);
}


.hero-section {
    justify-content: center;
}


.text-content {
    max-width: 85vw;
    padding: 0 10vw;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.contact-grid,
.projects-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 100%;
    max-width: 85vw;
    padding: 0 10vw;
}

.contact-block,
.project-card {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.contact-block:hover,
.project-card:hover {
    transform: scale(1) rotate(0deg) !important;
}

/* ROTATION CLASSES */
.rot-left {
    transform: rotate(-8deg);
}

.rot-right {
    transform: rotate(9deg);
}

.rot-slight {
    transform: rotate(-4deg);
}

/* FOOTER SECTION */
/* 1. FULL SITE COMING SOON BADGE */
.badge-coming-soon {
    position: absolute;
    /* Macht die freie Positionierung möglich */
    top: 10%;
    /* Abstand von oben innerhalb des Footers */
    left: 4%;
    /* Abstand von links */
    text-decoration: none;
    transition: transform 0.2s ease;
    /* Die Rotation kannst du hier oder über deine .rot-Klasse steuern */
}

.badge-coming-soon:hover {
    transform: scale(1) rotate(0deg) !important;
}

/* 2. IMPRESSUM BUTTON */
.badge-impressum {
    position: absolute;
    /* Macht die freie Positionierung möglich */
    bottom: 15%;
    /* Abstand von unten innerhalb des Footers */
    right: 5%;
    /* Abstand von rechts */
    text-decoration: none;
    transition: transform 0.2s ease;
}

.badge-impressum:hover {
    transform: scale(1) rotate(0deg) !important;
}



/* ==========================================
   IMPRESSUM FULLSCREEN STYLES (WEISS & VOLLFLÄCHIG)
   ========================================== */

/* Vollflächiger weißer Container über den gesamten Bildschirm */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: #ffffff;
    display: none;
    /* Standardmäßig ausgeblendet */
    z-index: 1000;
    overflow-y: auto;
}

/* Öffnet das Vollbild-Impressum sofort bei Klick */
.modal-overlay:target {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 'flex-start' sorgt dafür, dass lange Seiten von oben sauber gescrollt werden können */
    align-items: center;
}

/* Inhalt-Zentrierung & Breitenbegrenzung */
.modal-content-full {
    width: 100%;
    max-width: 85vw;
    padding: 40px 10vw 100px 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Schließen-Button (X) oben rechts */
.modal-close {
    position: fixed;
    top: 25px;
    right: 35px;
    font-size: 3rem;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    line-height: 1;
    z-index: 1001;
}

.modal-close:hover {
    filter: blur(3px);
}

/* Modal Überschrift Abstand */
.modal-header {
    width: 100%;
    margin-bottom: 2rem;
}

/* Modal Inhaltsabstände */
.modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;
}


/* Alle <strong>-Elemente automatisch in GROSSBUCHSTABEN umwandeln */
strong {
    text-transform: uppercase;
}

/* ==========================================
   MOBILE SCHRIFTGRÖSSEN & POSITIONEN (RESPONSIVE)
   ========================================== */

@media (max-width: 768px) {

    /* Ebene 1: SVG Headings für Mobile */
    .heading-svg {
        height: 3rem;
    }

     .heading-svg-multiline {
        height: 3.8rem;
    }

    .heading-svg text {
        font-size: 2rem;
        stroke-width: 0.2em;
    }

    /* Ebene 2: Fließtexte / Unterüberschriften für Mobile */
    .text-sub {
        font-size: 1.3rem;
    }

    .text-content {
        padding: 0 5vw;
    }

    .contact-grid,
    .projects-grid {
        padding: 0 5vw;
    }

    .modal-content-full {
        padding: 0 5vw;
    }

    /* ==========================================
       MOBILE POSITIONIERUNG DER NAV-BUTTONS & BADGES
       ========================================== */

    /* 1. Über den Verein */
    .link-about {
        top: 5%;
        right: -5%;
        transform: rotate(15deg);
    } 

    /* 2. Kontakt */
    .link-kontakt {
        top: 15%;
        left: -15%;
        transform: rotate(-12deg);
    }

    /* 3. Projekte */
    .link-projekte {
        bottom: 20%;
        right: -10%;
        transform: rotate(-10deg);
    }

    /* 4. Full Site Coming Soon Badge */
    .badge-coming-soon {
        top: 20%;
        left: 5%;
        transform: rotate(2deg);
    }

    /* 5. Impressum Button */
    .badge-impressum {
        bottom: 30%;
        right: -5%;
        transform: rotate(6deg);
    }


    .modal-content-full {
    padding: 30px 8px 100px 8px;
}
}