/* Globale CSS-Best Practice: Damit Padding und Border zur Breite gehören */
*, *::before, *::after {
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: roboto;
    padding-top: 65px; /* Platz für die fixe Navigationsleiste schaffen */
}

#logo {
    float: left;
    margin:0;
}

.oswald-medium {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* Der Container für die Positionierung */
.title {
    float: left;
    margin-top: -10px;
    margin-left: 2px;
    text-decoration: none;
}

/* WICHTIG: Die Link-Styles, um Unterstreichung und Größe zu erzwingen */
.title a {
    color: white; /* Setzt die Textfarbe für den Link */
    text-decoration: none; /* Entfernt die Unterstreichung */
    font-size: 28px !important;/* Setzt die korrekte Größe direkt auf den Link */
    display: inline-block; /* Hilft bei der korrekten Platzierung */
    line-height: 35px; /* Kann helfen, den Link vertikal zu zentrieren */
}

.topnav {
    background-color: #b80303;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    height: 65px;
    transition: top 0.3s;
    /* NEU/WICHTIG: Stellt sicher, dass die Navigation über allem anderen liegt */
    z-index: 1000;
}

/* 1. Burger-Icon standardmäßig (Desktop) IMMER ausblenden */
.topnav .icon {
    display: none;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    background-color: #b80303;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    margin-top: 10px;
}

.topnav a:hover {
    color: #0704b1;
}

.topnav a.active {
    background-color: #0704b1;
    color: white;
}

.topnav-right {
    float: right;
}

.logo {
    display: flex;
    align-items: left;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
    float: left; 
    margin: 15px 0 0 15px;
}

.logo img {
    height: 35px;
}

/* Grundzustand Desktop */
.logo-link {
    float: left;
    display: block;
    padding: 10px;
}

.nav-logo {
    height: 45px; /* Größe des Logos */;
    margin-top: -10px;
}

.montserrat {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 3;
    font-style: normal;
}
.header-image{
    height: 40vh;
    width: 100%;
    object-fit: cover;
    filter: brightness(1.0);
}
.header-image-sub{
    height: 30vh;
    width: 100%;
    object-fit: cover;
    filter: brightness(1.0);
    filter:blur(4px);
    -webkit-filter: blur(4px);
}

.headline {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 2px 2px rgba(0,0,0, 0.5);
    font-family: Oswald, sans-serif;
    font-size: 50px;
    font-weight: 700;

}

.hero-title {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 2px 2px rgba(0,0,0, 0.5);
    font-family: Oswald, sans-serif;
    font-size: 50px;
    font-weight: 700;

}

.header {
    position: relative;
    text-align: center;
    color: white;
}

.red{
    color: rgb(255, 1, 1);
}
h1{
    text-align: center;
    font-family: Oswald, sans-serif;
    font-size: xx-large;
    font-weight: 500;
}

h2{
    text-align: center;
    color: rgb(2, 2, 189);
    font-family: Oswald, sans-serif;
    font-size: xx-large;
    font-weight: 500;
}

h4{
    text-align: center;
    color: rgb(2, 2, 189);
    font-family: Oswald, sans-serif;
    font-size: 300%;
    font-weight: 500;
    margin-top: 30px;
}

h6{
    text-align: center;
    font-family: Oswald, sans-serif;
    font-size: x-large;
    font-weight: 500;
    margin-bottom: 15px;
}

.ctext{
    text-align: center;
    color: black;
    margin-top: -35px;
    margin-bottom: 25px;
}

.ntext{
    text-align: center;
    color: black;
    margin-top: 0px;
    margin-bottom: 25px;
    line-height: 1.7;
}

.img_text{
    text-align: center;
    color: black;
    margin-top: -20px;
    margin-bottom: 25px;
    font-size: small;
}

.his_img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Optionale: leichter Schatten */
    border-style: solid;
}

.blog_img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Optionale: leichter Schatten */
}

.aligned {
    display: flex;
    align-items: center;   /* Text oben beginnen lassen */
    gap: 20px;                 /* Abstand zwischen Bild und Text */
    margin: 20px 0;            /* Etwas Außenabstand */
    max-width: 1000px;
}

.alignedSponsors {
    display: flex;
    align-items: center;   /* Text oben beginnen lassen */
    gap: 260px;                 /* Abstand zwischen Bild und Text */
    margin: 20px 0;            /* Etwas Außenabstand */
    max-width: 1000px;
}

.aligned img {
    display: block;
    margin: 0;
    padding: 0;
    /*width: 40%;                /* Bild verkleinern – anpassen nach Bedarf */
    /*height: auto;              /* korrektes Skalieren */
    /*border-radius: 8px;        /* optional, sieht moderner aus */
}

.textblock {
    flex: 1;                   /* Text bekommt den restlichen Platz */
    line-height: 1.6;
    font-size: 18px;
    text-align: justify;
}

.aligned-wrapper {
    display: flex;
    justify-content: center;   /* horizontal zentrieren */
    margin-top: 20px;          /* optionaler Abstand nach oben */
    margin-bottom: 60px;      /* optionaler Abstand nach unten */;
}

.center-textblock {
    display: flex;
    max-width: 1200px;
    justify-content: center;   /* horizontal zentrieren */
    margin-top: 20px;          /* optionaler Abstand nach oben */
    margin-bottom: 60px;      /* optionaler Abstand nach unten */;
    margin-left: auto;
    margin-right: auto;
}

.span {
    padding: 10px;
}

/* Hauptcontainer des Footers */
.footer {
    background-color: #b80303; /* Dunkelroter Hintergrund */
    color: #fff; /* Weiße Schriftfarbe */
    padding: 0; /* Vertikaler Abstand innen */
    font-family: Arial, sans-serif; /* Schriftart anpassen */
    /*position: relative;*/
}

/* Wrapper für den Hauptinhalt, um die maximale Breite zu begrenzen */
.footer-content-wrapper {
    /*max-width: 1200px; /* Beispielbreite, anpassen nach Bedarf */
    margin: 0 auto; /* Zentrierung */
    padding: 20px 20px; /* Horizontaler Abstand innen */
    display: flex;
    justify-content: space-between; /* Elemente verteilen */
    align-items: flex-start; /* Elemente oben ausrichten */
    flex-wrap: wrap; /* Zeilenumbruch für kleinere Bildschirme */
}

/* Logo und Info-Gruppe */
.footer-logo-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* Logo-Bild */
.footer-logo {
    width: 110px; /* Breite des Logos anpassen */
    height: auto;
    margin-right: 15px;
}

/* Text-Gruppe (Name, Adresse, Social Media) */
.footer-text-group {
    display: flex;
    flex-direction: column;
}

.footer-title {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 5px 0;
    font-family: Oswald, sans-serif;
    font-size: x-large;
    font-weight: 650;
}

.footer-address {
    font-style: normal; /* Adresse nicht kursiv darstellen */
    font-size: 0.9em;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

/* Social Media Icons */
.footer-social-media a {
    color: #fff;
    font-size: 1.5em;
    margin-right: 15px;
    text-decoration: none;
    transition: opacity 0.3s;
}

.footer-social-media a:hover {
    opacity: 0.8;
}

/* Impressum/Datenschutz-Links (obere rechte Ecke) */
.footer-meta-links {
    text-align: right;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.footer-meta-links a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9em;
    margin-bottom: 5px;
    transition: text-decoration 0.3s;
}

.footer-meta-links a:hover {
    text-decoration: underline;
}

/* Copyright (rechte untere Ecke) */
.footer-copyright {
    font-size: 0.8em;
    /*position: absolute; /* Positionierung relativ zum footer-content-wrapper */
    /*right: 20px; /* Rechter Abstand */
    /*bottom: 25px; /* Abstand zur unteren blauen Leiste */
    margin: 0;
}

/* Blaue Leiste ganz unten */
.footer-bottom-bar {
    background-color: #000080; /* Dunkelblau */
    height: 30px; /* Höhe der Leiste */
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
    /*margin-top: 20px; /* Abstand zur oberen roten Fläche */
}

/* Haupt-Container: Verwende Grid für das Layout */
.team-gallery {
    display: grid;
    /* Definiert die Spalten: 3 gleich breite Spalten */
    grid-template-columns: repeat(3, 1fr);
    gap: 15px; /* Abstand zwischen den Bildern */
    
    /* Zentriert den Container und setzt eine maximale Breite */
    max-width: 1200px;
    margin: 40px auto; /* 40px Abstand oben/unten, Auto für Zentrierung */
    padding: 0 15px; /* Kleiner Abstand an den Seiten für Ränder */
}

/* Stil für jedes einzelne Bildelement */
.gallery-item {
    background-color: transparent;
    overflow: hidden; /* Stellt sicher, dass das Bild innerhalb des Rahmens bleibt */
    position: relative;
    border-radius: 4px; /* Optionale: leicht abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optionale: leichter Schatten */
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Stil für den Spielernamen (h3) und Position (p) */
.gallery-item h3,
.gallery-item p {
    position: absolute; /* WICHTIG: Positioniert den Text über das Bild */
    left: 10px;
    text-align: left;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: center;
    color: white; /* Name soll weiß sein für besseren Kontrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); /* Für bessere Lesbarkeit auf dem Bild */
    /*z-index: 10; /* Stellt sicher, dass der Text über dem Bild liegt */
}

/* Positionierung des Namens (h3) */
.gallery-item h3 {
    top: auto; 
    bottom: 18px;
    transform: translateY(-50%); /* Korrekte vertikale Zentrierung */
    font-size: 1.8em;
    font-family: 'Oswald', sans-serif; /* Beispiel: Etwas auffälliger */
    font-weight: 500;
    /*z-index: 10; /* Stellt sicher, dass der Text über dem Bild liegt */
}

/* Positionierung der Position (p) */
.gallery-item p {
    top: auto; 
    bottom: 10px; /* Unten im Bild positionieren */
    margin-top: 1.8em; /* Platz unterhalb des Namens lassen */
    font-size: 1.1em;
    font-weight: 500;
    /*z-index: 10;*/ 
}

/* Stil für die Bilder selbst */
.gallery-item img {
    display: block;
    width: 100%; /* Bild füllt immer die gesamte Breite seines Containers */
    height: 400px; /* Feste Höhe für alle Bilder in dieser Reihe */
    object-fit: cover; /* Stellt sicher, dass das Bild den Raum füllt, ohne verzerrt zu werden (wird ggf. beschnitten) */
    transition: transform 0.3s ease; /* Sanfte Animation beim Hover */
    filter: brightness(0.9);
}

/* Zoom-Effekt beim Überfahren mit der Maus (Optional) */
.gallery-item img:hover {
    transform: scale(1.05);
    filter: brightness(1); /* Optional: Bild beim Hover leicht abdunkeln, um den Text hervorzuheben */
}

/* Haupt-Container: Verwende Grid für das Layout */
.vorstand-gallery {
    display: grid;
    /* Definiert die Spalten: 3 gleich breite Spalten */
    grid-template-columns: repeat(4, 1fr);
    gap: 15px; /* Abstand zwischen den Bildern */
    
    /* Zentriert den Container und setzt eine maximale Breite */
    max-width: 1200px;
    margin: 40px auto; /* 40px Abstand oben/unten, Auto für Zentrierung */
    padding: 0 15px; /* Kleiner Abstand an den Seiten für Ränder */
}

/* Stil für jedes einzelne Bildelement */
.gallery-item {
    background-color: transparent;
    overflow: hidden; /* Stellt sicher, dass das Bild innerhalb des Rahmens bleibt */
    position: relative;
    border-radius: 4px; /* Optionale: leicht abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optionale: leichter Schatten */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.vs-gallery-item {
    background-color: transparent;
    overflow: hidden; /* Stellt sicher, dass das Bild innerhalb des Rahmens bleibt */
    position: relative;
    display: flex;
    flex-direction: column;
}

.vs-gallery-item img {
    display: block;
    width: 80%; /* Bild füllt immer die gesamte Breite seines Containers */
    height: 200px; /* Feste Höhe für alle Bilder in dieser Reihe */
    object-fit: contain; /* Stellt sicher, dass das Bild den Raum füllt, ohne verzerrt zu werden (wird ggf. beschnitten) */
    margin: 0 auto; /* Zentriert das Bild horizontal */
}

.vs-gallery-item h3 {
    top: auto;
    bottom: 18px;
    font-size: 1.4em;
    font-weight: 600;
    text-align: center;
    z-index: 10; /* Stellt sicher, dass der Text über dem Bild liegt */
}

/* Positionierung der Position (p) */
.vs-gallery-item p {
    top: auto; 
    margin-top: -12px;
    font-size: 1.1em;
    font-weight: 300;
    z-index: 10; 
    text-align: center;
}

.red_button {
  background-color: #b80303;
  border-radius: 40px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 6px;
  transition-duration: 0.4s;
}

.blue_button {
  background-color: rgb(1, 1, 167);
  border-radius: 40px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 6px;
  transition-duration: 0.4s;
}

.red_button:hover {
  background-color: rgb(1, 1, 167);
  color: white;
}

.blue_button:hover {
  background-color: #b80303;
  color: white;
}

/* Layout für den Haupt-Container */
.blog-grid {
    /* Zeigt die Kacheln als flexibles Raster an */
    display: grid; 
    
    /* Definiert 3 Spalten gleicher Breite (1fr = 1 fraction) */
    grid-template-columns: repeat(3, 1fr); 
    
    /* Abstand zwischen den Kacheln (Spalten- und Zeilenabstand) */
    gap: 30px; 
    
    /* Stellt sicher, dass das Grid zentriert und begrenzt ist (optional) */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.post-card {
    background: #dddddd;
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    overflow: hidden; /* Wichtig: Das Bild passt sich an die Kachel an */
    transition: transform 0.3s ease; /* Für Hover-Effekt */
    display: flex; /* Flexbox für die innere Anordnung */
    flex-direction: column;
    height: 100%; /* Kachel füllt die gesamte Höhe */
    position: relative;
}

/* Hover-Effekt: Kachel hebt sich leicht ab, wenn man mit der Maus darüber fährt */
.post-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Optional: Hellt das Bild beim Hover leicht auf */
.post-card:hover .post-link img {
    filter: brightness(0.85); /* Oder z.B. 0.95 für nur eine leichte Aufhellung */
}

.post-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: blur(0.5px) brightness(0.55);
    transition: filter 0.3s ease;
}

/* Definiert das Styling für den Link, der die Überschrift umgibt */
.post-title-link {
    /* NEU: Entfernt die Unterstreichung vom Link */
    text-decoration: none; 
    position: absolute;
    /* Dehnt den Link auf die gesamte Fläche */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* NEU: Bild-Link-Container auf feste Höhe beschränken */
.post-card .post-link {
    /* Wichtig: Definieren Sie eine feste Höhe für den Bildbereich. 
       Wählen Sie einen Wert, der für Ihre Vorschaubilder gut aussieht. */
    height: 200px; /* Beispielhöhe: Passen Sie diesen Wert an! */
    overflow: hidden; /* **WICHTIG:** Schneidet alles ab, was über diese 200px hinausgeht */
    display: block;
}

.post-title-link h3 {
    padding: 10px 15px 5px;
    font-size: 1.25rem;
    color: #fcfcfc;
    text-decoration: none;
    font-weight: 700;
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.3), /* Dunkler und leicht versetzt */
        -1px -1px 2px rgba(139, 0, 0, 0.9); /* Optional: Weißer Lichtschein */
    position: relative;
    z-index: 3;
}

.post-meta {
    padding: 5px 15px;
    font-size: 0.85rem;
    color: #7f8c8d;
    display: flex;
    justify-content: space-between;
}

/* NEU: Den Textauszug auf maximal 3 Zeilen begrenzen */
.excerpt {
    margin-top: auto; /* NEU: Schiebt den Auszug nach ganz unten im .post-content */
    padding: 0 15px 15px; /* Abstand unten */
    font-size: 0.95rem;
    color: #34495e;

    /* WICHTIG: Begrenzung auf 3 Zeilen mit Ellipse (...) */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/* Anpassung für kleinere Bildschirme (Responsive Design) */
@media (max-width: 900px) {
    .blog-grid {
        /* Reduziert auf 2 Spalten auf mittleren Bildschirmen */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .blog-grid {
        /* Reduziert auf 1 Spalte auf sehr kleinen Bildschirmen */
        grid-template-columns: 1fr;
    }
}

/* Anpassungen für kleinere Bildschirme (Optional) */
@media (max-width: 768px) {

    /* Nur die Klasse .hero-title wird kleiner, andere h1 bleiben unberührt */
    .hero-title {
        font-size: 35px !important;
        line-height: 1.3;
        padding: 0 15px;
    }

    .topnav {
        display: flex;
        justify-content: space-between; /* Logo links, Burger rechts */
        align-items: center;
        padding: 0 10px;
        height: 65px; /* Fixe Höhe im geschlossenen Zustand */
    }

/* Den Text/Titel komplett ausblenden */
    .topnav .title {
        display: none;
    }

    /* Das Logo-Container-Styling anpassen, damit es kompakt bleibt */
    .logo {
        margin: 15px 0 0 15px; /* Behält den Abstand links bei */
    }

    /* Sicherstellen, dass das Logo-Bild selbst sichtbar bleibt */
    .logo img {
        height: 35px;
        display: block;
    }

    /* Den Burger-Button rechts positionieren */
    .topnav .icon {
        float: right;
        display: block;
        margin-right: 15px;
        margin-top: 5px; /* Feinjustierung für die vertikale Zentrierung */
    }
    /* Alle Links in der rechten Navigation ausblenden... */
    .topnav-right a {
        display: none;
    }
    
    /* ...außer das Burger-Icon, das wird jetzt angezeigt */
    .topnav .icon {
        float: right;
        display: block;
        font-size: 25px;
        margin-top: 5px;
    }

    /* Wenn das Menü aufgeklappt wird, soll es untereinander fließen */
    .topnav.responsive {
        height: auto !important; /* Erlaubt der Navigation, sich an den Inhalt anzupassen */
        display: block; /* Zurück zu Block für das Untereinander-Listen der Links */
        padding-top: 65px;
        overflow: visible !important;
    }

    /* Sicherstellen, dass die Links untereinander angezeigt werden */
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    .topnav.responsive .topnav-right {
        float: none;
        display: block;
        width: 100%;
    }

    .topnav.responsive .topnav-right a {
        float: none;
        display: block;
        text-align: left;
        padding: 10px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .footer-content-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .footer-logo-info {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-logo {
        margin: 0 0 10px 0;
    }
    
    .footer-text-group {
        align-items: center;
        text-align: center;
    }
    
    .footer-meta-links {
        text-align: center;
        align-items: center;
        margin-top: 15px;
    }

    .footer-copyright {
    font-size: 0.8em;
    margin: 0; /* Wichtig: margin auf 0 setzen */
    }


    /*.footer-copyright {
        position: static; /* Positionierung für Mobile anpassen */
        /*text-align: center;
        width: 100%;
        margin-top: 15px;
    }*/

    /* 1. Den äußeren Wrapper auf vertikal umstellen */
    .aligned-wrapper, .aligned {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }

    /* 2. Das Klimaschutz-Bild anpassen */
    .aligned img {
        width: 100% !important; /* Nutzt die volle Breite des Handys */
        max-width: 400px; /* Verhindert, dass es auf Tablets zu riesig wird */
        height: auto;
        margin-bottom: 20px;
    }

    /* 3. Den Textblock zentrieren und Abstände korrigieren */
    .textblock {
        padding: 0 15px;
        width: 100%;
    }

    /* 4. Sponsoren-Logos untereinander stapeln */
    .alignedSponsors {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px; /* Abstand zwischen den Logos */
    }

    .alignedSponsors img {
        width: 80% !important; /* Logos schön groß untereinander */
        max-width: 300px;
        height: auto;
    }

    /* Die Galerie auf eine Spalte umstellen */
    .team-gallery {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px; /* Abstand zwischen den Spielern */
        padding: 10px;
    }

    /* Die einzelnen Items auf volle Breite setzen */
    .gallery-item {
        width: 90% !important; /* Etwas Platz zum Rand lassen */
        max-width: 350px; /* Verhindert, dass die Bilder zu riesig werden */
    }

    .gallery-item img {
        width: 100%;
        height: auto;
        border-radius: 8px; /* Optional: für einen moderneren Look */
    }

    /* Spezifisch für die Namen in der Vorstandsgalerie */
    .vs-gallery-item h3 {
        font-size: 18px; /* Oder eine andere gewünschte Größe */
        margin-top: -50px;
        margin-bottom: 20px;
    }

    .vs-gallery-item p {
        font-size: 12px; /* Oder eine andere gewünschte Größe */
        margin-top: -10px;
        margin-bottom: 20px;
    }
}
/* Media Query: Anpassung für kleinere Bildschirme (z.B. Tablets) */
@media (max-width: 900px) {
    .gallery-container {
        /* Reduziert auf 2 Spalten */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Media Query: Anpassung für sehr kleine Bildschirme (z.B. Smartphones) */
@media (max-width: 600px) {
    .gallery-container {
        /* Reduziert auf 1 Spalte */
        grid-template-columns: 1fr;
    }
}