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

html{
    scroll-behavior:smooth;
    overflow-x: hidden;
}

body{
    font-family:'Open Sans',sans-serif;
    overflow-x: hidden;
    background:#f7f3ee;
    color:#2e2e2e;
    line-height:1.7;
}


/* =====================================================
   VARIABLEN
===================================================== */
:root{
    --background: #f5efe6;   /* warmes Papier */
    --background-dark: #270103;
    --light: #fffaf2;        /* helle Karten */
    --accent: #971529;       /* Samtrot / Vorhang */
    --accent-dark: #530d17;  /* dunkles Bühnenrot */
    --text: #2b2523;         /* dunkles Braun-Schwarz */
    --title: #530d17;        /* tiefes Rotbraun */
    --gold: #c8a45d;         /* Bühnen-Gold */
    --white: #ffffff;
}



/* =====================================================
   NAVIGATION
===================================================== */
.header{
    position:fixed;
    top:0;
    width:100%;
    z-index:1000;
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 8%;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.logo{
    font-family:serif;
    font-size:2.2rem;
    font-weight:700;
    color:var(--title);
    text-decoration:none;
}

.nav-links{
    display:flex;
    gap:35px;
    list-style:none;
}

.nav-links a{
    text-decoration:none;
    color:var(--text);
    font-weight:600;
    transition:.3s;
}

.nav-links a:hover{
    color:var(--accent);
}


/* Hamburger */
.hamburger{
    display:none;
    cursor:pointer;
}

.hamburger span{
    display:block;
    width:30px;
    height:3px;
    margin:6px;
    background:var(--title);
    transition:.3s;
}




/* =====================================================
   SEKTIONEN
===================================================== */
section{
    padding:100px 25px;
    max-width:1100px;
    margin:auto;
    animation:fadeUp .9s ease;
}

section h2{
    font-family: serif; 
    color:var(--light);
    font-size:3.2rem;
    line-height: 1.1;
    background-color: var(--background-dark);
    margin: 0 -40px 40px -40px;
    padding: 4px 40px;
}
section h3{
    color:var(--accent);
    font-size:1.5rem;
    margin-bottom:7px;
    line-height: 1.15;
    margin-top:40px;
}




/* =====================================================
   WELCOME
===================================================== */
.welcome-section {
    text-align: center;
    margin-top: 60px;
}
.welcome-title {
    font-size: clamp(3rem, 7vw, 4.5rem);
    font-family: "Limelight", Arial, sans-serif;
    color: var(--accent-dark);
    font-weight: 400;
    text-transform: uppercase;
}
.welcome-cont{
    margin: 0 auto;
    text-align: left;
}
.welcome-quote{
    font-family: Arial, sans-serif;
    font-weight:900;
    color: var(--accent);
    letter-spacing: 0.02em;
    padding:4rem 0 1.4rem 0;
}



/* =====================================================
   ABOUT
===================================================== */
.two-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.about{
    display: flex;
    align-items: center;
    gap: 2rem;
}

.about img {
    width: 400px;
    max-width: 100%;
    border-radius: 5px;
}

.about ul {
    flex: 1;
    margin: 0;
    padding-left: 20px;
}





/* =====================================================
   CARD
===================================================== */
.card-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));
    gap:35px;
}

.card{
    background:white;
    padding:30px;
    border-radius:20px;
    box-shadow:
    0 10px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.card:hover{
    transform:translateY(-10px);
}

.card img{
    width:100%;
    object-fit:cover;
    border-radius:15px;
}

.card h3{
    font-family:'Cormorant Garamond',serif;
    font-size:2rem;
    margin:0;
    color:var(--title);
}






/* =====================================================
   AUDIO
===================================================== */


.audio-box{
    margin-top:20px;
    background:white;
    padding:30px;
    border-radius:20px;

}

.audio-box h3{
    margin:0;
}

.audio-box audio{
    width:100%;
    margin-top:20px;
}

/*
#lesungen li {
    margin-left: 30px;
    color: var(--text);
    font-size: 1.05rem;
}
*/

#lesungen ul {
    list-style: none;
    padding: 30px 10px;
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#lesungen li {
    color: var(--accent);
    padding: 6px 6px;
    font-size: 1.5rem;
    font-weight:800;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: rotate(var(--rotation));
    margin: -5px;
}


/* unterschiedliche Drehungen */
#lesungen li:nth-child(1) {
    --rotation: -6deg;
}

#lesungen li:nth-child(2) {
    --rotation: 4deg;
}

#lesungen li:nth-child(3) {
    --rotation: -3deg;
}

#lesungen li:nth-child(4) {
    --rotation: 7deg;
}

#lesungen li:nth-child(5) {
    --rotation: -5deg;
}

#lesungen li:nth-child(6) {
    --rotation: 3deg;
}

#lesungen li:nth-child(7) {
    --rotation: -8deg;
}


.zitat {
    margin-top: 20px;
    padding: 20px;
    background: #fff8f5;
    border-left: 5px solid var(--accent);
    font-style: italic;
    color: var(--text);
}

.zitat strong {
    display: block;
    color: var(--accent);
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-style: normal;
}

/* =====================================================
   Workshops
===================================================== */
.verweis {
    text-align: center;
    margin: 40px auto;
    padding: 20px;
}

.event-images {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.event-images img {
    width: 45%;
    border-radius: 5px;
}

.verweis a {
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    font-size: 1.2rem;
    color: var(--accent);
}


/* =====================================================
   KONTAKT
===================================================== */

.button {
    align-items: center;
    gap: 12px;
    background-color: var(--accent);
    color: white;
    padding: 12px 20px;
    margin: 10px 0;
    border-radius: 12px;
    text-decoration: none;
    font-size: 1.1rem;
    transition: transform 0.2s, opacity 0.2s;
}

.button:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

.button .icon {
    font-size: 1.5rem;
}

.kontaktCont{
    display: inline-flex;
    width:fit-content;
    flex-direction:column;
}








/* =====================================================
   FOOTER
===================================================== */


footer{
    background:var(--background-dark);
    color:var(--white);
    padding:60px 20px;
    text-align:center;
}

footer *{
    margin:10px;
}





/* =====================================================
   ANIMATIONEN
===================================================== */



@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:none;
    }
}



@keyframes fadeLeft{
    from{
        opacity:0;
        transform:translateX(-50px);
    }

    to{
        opacity:1;
        transform:none;
    }

}



/* =====================================================
   TABLET + MOBILE NAVIGATION
===================================================== */


@media(max-width:1024px){

.verweis {
    padding: 5px;
}
.event-images {
    gap: 5px;
}
.event-images img {
    width: calc(50% - 5px);
    border-radius: 4px;
}

.nav-links{
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:white;
    flex-direction:column;
    align-items:center;
    padding:30px;
    gap:25px;
    transform:translateY(-150%);
    transition:.4s;
}

.nav-links.active{
    transform:translateY(0);
}

.hamburger{
    display:block;
}

.two-columns{
    grid-template-columns:1fr;
}

.welcome-title {
    font-size: clamp(2rem, 10vw, 4.3rem);
}

}




/* =====================================================
   KLEINE SMARTPHONES
===================================================== */


@media(max-width:600px){

.navbar{
    padding:15px 5%;
}


section{
    padding:70px 20px;
}

section h2{
    font-size:2.4rem;
}

.card{
    padding:25px;
}


}