*{

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

body
{

      display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
}

a {
 text-decoration: none;
 color:black
 

}

a:hover{

    color:red;
}
.top-bar{

display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
width: 100vw;
height: auto;
background-color: rgb(240, 238, 238);
justify-content: space-between;
padding:5px 20px;
position:fixed;
z-index: 1000; 

}



.bildschirm-wrapper {
    display: flex;
    flex-grow: 1; 
    width: 100vw;
    flex-direction: column;
    justify-content: flex-start; /* Zentriert die Inhalte perfekt von links nach rechts */
    
    /* HIER WAR DER FEHLER: */
    align-items: center;  /* Setzt den Inhalt an den OBEREN Rand (nicht in die Mitte) */
    
    /* WICHTIG: Schutzabstand, damit Betty nicht unter der fixierten top-bar klebt */
    padding-top: 40px;        
    padding-bottom: 70px;     /* Abstand für die boden-bar */
}

.navbar{

display: flex;
flex-wrap: wrap;
width: 100vw;
height: auto;
flex-direction: row;
gap:20px;
justify-content: center;
align-items: center;
padding-top:7vh;


}

.boden-bar
{
display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    width: 100vw;
    height: auto;
    background-color: rgb(226, 226, 226);
    justify-content: center;
    padding: 5px 0; /* Etwas Abstand für die Links */
    gap: 20px;
    position: fixed;
    z-index: 1000;   
    bottom: 0;   /* Zwingt die Leiste an den ganz unteren Bildschirmrand */
    left: 0;           
    
}

.responsive-logo {
    /* 1. Die Wunschgröße auf großen Bildschirmen */
    width: 350px;       /* Ändere diesen Wert, bis dir das Logo am PC gefällt (z.B. 200px oder 300px) */
    height: auto;       /* WICHTIG: Hält das proportionale Verhältnis von Breite zu Höhe bei */
    /* 2. Der Schutz für kleine Bildschirme (Smartphones) */
    max-width: 30%;     /* Das Logo nimmt auf dem Handy maximal 80% der Bildschirmbreite ein */
    min-width: 120px; 
    margin-top:30vh;   /* Es wird NIEMALS kleiner als 120px, egal wie klein das Display ist */
}


.responsive-links {
    /* 1. Die Wunschgröße auf großen Bildschirmen */
    width: 300px;       /* Ändere diesen Wert, bis dir das Logo am PC gefällt (z.B. 200px oder 300px) */
    height: auto;       /* WICHTIG: Hält das proportionale Verhältnis von Breite zu Höhe bei */
    /* 2. Der Schutz für kleine Bildschirme (Smartphones) */
    max-width: 30%;     /* Das Logo nimmt auf dem Handy maximal 80% der Bildschirmbreite ein */
    min-width: 120px; 
    display: block;     /* Macht das Bild zu einem Block-Element */
    margin-right: auto; /* Trick: Schiebt das Bild nach ganz links, indem der rechte Abstand maximal gedehnt wird */
    margin-left: 0;     /* Stellt sicher, dass links kein Abstand ist */

   
}



.responsive-rechts {
    /* 1. Die Wunschgröße auf großen Bildschirmen */
    width: 300px;       /* Ändere diesen Wert, bis dir das Logo am PC gefällt (z.B. 200px oder 300px) */
    height: auto;       /* WICHTIG: Hält das proportionale Verhältnis von Breite zu Höhe bei */
    /* 2. Der Schutz für kleine Bildschirme (Smartphones) */
    max-width: 30%;     /* Das Logo nimmt auf dem Handy maximal 80% der Bildschirmbreite ein */
    min-width: 120px; 
    display: block;     /* Macht das Bild zu einem Block-Element */
    margin-right: 0; /* Trick: Schiebt das Bild nach ganz links, indem der rechte Abstand maximal gedehnt wird */
    margin-left: auto;     /* Stellt sicher, dass links kein Abstand ist */

   
}



.formular {
    display: flex;
    flex-grow: 1;
    width: 100vw;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 60px;       /* Schutzabstand für deine top-bar */
    padding-bottom: 80px;    /* Schutzabstand für deine boden-bar */
    
}

/* Die Formular-Box selbst */
.kontakt-formular {
    display: flex;
    flex-direction: column;
    align-items: center;     /* Zentriert die Eingabegruppen im Formular */
    gap: 15px;               /* Abstand zwischen den einzelnen Feldern */
}

/* Die einzelnen Gruppen (Label + Input) */
.form-gruppe {
    width: 100%;
    text-align: left;        /* Die Beschriftung (Label) bleibt linksbündig über dem Feld */
}

/* HIER IST DIE GRÖSSENEINSTELLUNG: */
.kontakt-formular input,
.kontakt-formular textarea {
    width: 15vw;             /* Exakt 15% der Bildschirmbreite (Viewport Width) */
    min-width: 280px;        /* SCHUTZ: Auf Handys wird das Feld nicht kleiner als 280px, damit man tippen kann */
    padding: 10px;           /* Schöner Innenabstand für den Text */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;  /* Garantiert, dass Padding die Breite nicht verfälscht */
    font-family: inherit;
}

/* HIER IST DER TRANSPARENTE BUTTON: */
.kontakt-formular button[type="submit"] {
    width: 15vw;             /* Gleiche Breite wie die Eingabefelder */
    min-width: 280px;
    padding: 12px;
    
    background-color: transparent; /* Macht den Hintergrund unsichtbar (transparent) */
    color: #000000;                /* Schwarze Schriftfarbe */
    border: 2px solid #000000;     /* Schwarzer Rahmen */
    border-radius: 4px;
    
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;     /* Macht den Hover-Effekt geschmeidig */
}

/* Kleiner Bonus: Effekt, wenn man mit der Maus über den Button fährt */
.kontakt-formular button[type="submit"]:hover {
    background-color: #000000;     /* Invertiert die Farben beim Drüberfahren */
    color: #ffffff;                /* Schrift wird weiß */
}


.text {
    display: flex;
    width: 50%;
    height: auto;
    flex-direction: column;
    align-items: start;
    justify-content: left;
    
    /* Schiebt den Inhalt im oberen Bereich noch ein Stück elegant nach unten */
    margin-top: 5vh;          
    margin-bottom: 80px;
    
    /* Sorgt dafür, dass die Box selbst schön in der Bildschirm-Mitte sitzt */
    margin-left: auto;
    margin-right: auto;
}

.text h2 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 20px;
    color: #777;
}

.text h3 {
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #777;
}

.text h4 {
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #777;
}
.text.quelle {
    margin-top: 40px;
    font-size: 12px;
    color: #777;
}
.BiText {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;        /* WICHTIG: Erlaubt dem Text auf Handys, unter das Bild zu springen, statt zu quetschen */
    width: 50%;             /* Nutzt 50% der Bildschirmbreite, genau wie deine .text-Klasse */
    height: auto;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;              /* Erzeugt einen schönen, sauberen Abstand zwischen Bild und Text */
    margin-top: 5vh;
    margin-bottom: 30px;    /* Abstand zur fixierten boden-bar */
    
}

.BiText .text-inhalt {
    flex: 1;                /* Sagt der Textbox, dass sie den restlichen verfügbaren Platz rechts einnehmen soll */
    min-width: 250px;       /* Verhindert, dass die Textbox auf kleinen Displays zu schmal wird */
}
.BiText .responsive-links {
    width: 350px;           /* Feste Wunschbreite für das Bild neben dem Text */
    height: auto;
    display: block;
}
.BiText  h2{

 margin-top: 30px;
    margin-bottom: 15px;
    font-size: 20px;
    color: #777;

}

.BiText  h3{
 margin-top: 25px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #777;

}
.BiText .responsive-rechts {
    width: 350px;           /* Feste Wunschbreite für das Bild neben dem Text */
    height: auto;
    display: block;
}

.vid{

display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100vw;
height: auto;
justify-content: center;
align-items: center;
gap:30px;
margin-top: 20vh;


}

@media (max-width: 800px) {
    .BiText {
        flex-direction: column; /* Wechselt von Reihe zu Spalte */
    }
    
    .BiText .responsive-rechts {
        order: 1; /* Das Bild bekommt Position 1 (oben) */
    }
    
    .BiText .text-inhalt {
        order: 2; /* Der Text bekommt Position 2 (darunter) */
    }
}