/*
Mobile (bis 768px): Einspalten-Flex mit Nav über Content
*/
@media (max-width: 768px) {
    /* Container als Spalten-Flex, kein Padding außen */
    .grid-container {
        display: flex;
        flex-direction: column; /* Nav, Bild, Text untereinander */
        background-color: #fff; /* füllt den Zwischenraum (gap) weiß */
        gap: 1rem;
        padding: 0;
    }

    /* Position absolute/relative ausschalten */
    .vet-position-relative,
    .vet-position-absolute {
        position: static;
    }

    /* Alte Grid-Definition im Content entfernen */
    .vet-grid-content {
        display: block; /* kein Inner-Grid mehr */
        width: 100%;
        background: transparent; /* hat keinen Hintergrund/durchsichtig */
    }

    /* Void-Container verstecken */
    .vet-grid-void-one,
    .vet-grid-void-two,
    .vet-grid-void-three,
    .vet-grid-void-four {
        display: none;
    }

    /* NAV */
    .vet-grid-nav {
        width: 100%;
        background-color: #fff;
        padding: 1rem;
        box-sizing: border-box;
        /*margin: 0;*/
        margin: 0 0 1rem; /* nur unten Abstand */
    }

    /* sicherstellen, dass Wrapper im Nav 100% nehmen */
    .vet-grid-nav .vet-grid-item-content,
    .vet-grid-nav .vet-content-nav-style {
        width: 100%;
        display: block;
    }

    /* Menü als Flexbox, Items nach rechts schieben */
    .vet-grid-nav nav {
        display: flex;
        justify-content: flex-end; /* alle Items nach rechts schieben */
        align-items: center;
    }

    /* ul-Defaults entfernen */
    .vet-grid-nav nav .vet-menu {
        margin: 0; /* <ul> löscht StandardAbstände/Ränder */
        padding: 0;
        list-style: none; /*keine Aufzählungs-Punkte */
    }

    /* Links als Block, damit gesamte Fläche klickbar ist */
    .vet-grid-nav nav .vet-menu a {
        display: block; /* Jeder Link bekommt volle ContainerFläche */
        padding: 0.5rem 1rem;
    }

    /* Hintergrund/Padding entfernen */
    .vet-content-top-style {
        display: block;
        height: auto;
        background: transparent;
        padding: 0;
        margin: 0;
    }

    /* Bild skalieren */
    .vet-grid-content-top img {
        max-width: 100%;
        height: auto;
        display: block; /* kein Inline-Abstand */
        object-fit: contain; /* skaliert vollständig ohne zuschneiden */
    }

    /* TEXT bleibt Sand*/
    .vet-grid-content-bottom {
        width: 100%;
        background-color: #F3F1E9;
        padding: 1rem;
        box-sizing: border-box;
    }
	
	  .slide_main_container {
			width: 100vw;
		}
	
	
		.vet-menu-sub li { /* gw */
			display: inline-block;
		}
	.vet-menu-sub { /* gw */
			background-color: white;
		}
	
	
}


@media (max-width: 1255px) {

	
    /* BILD */
    .vet-grid-content-top {
        width: 100%;
        background-color: #fff;
        padding: 1rem;
        box-sizing: border-box;
        /*margin: 0;*/
        margin: 0 0 1rem;
    }

	
		.vet-grid-content-bottom:has(div:empty),
		.vet-grid-content-top:has(div:empty) {
			display: none;
		}
	
	.vet-grid-content-full img {
		margin: 0;
		}
	
	.splide.slide_main_container,
	#primary-slider {
		background-color: white;
		margin: 0;
		padding: 30px 0;
		}
	
	#active_sub_menu {

  position: absolute;
  right: 0;
  width: 100%; 
		}
	
	
}

/*
Tablet (769px–1024px): Zwei-Spalten-Flex
*/
@media (min-width: 769px) and (max-width: 1255px) {
	
	
	 .vet-menu-sub li { /* gw */
		 	display: inline-block;
		}
	.vet-menu-sub { /* gw */
			background-color: white;
		}

	
	
	
	.vet-grid-content-full img {
		margin: 0;
		}
	
	.splide.slide_main_container,
	#primary-slider {
		background-color: white;
		margin: 0;
		padding: 30px 0;
		}
	
	  .slide_main_container {
			width: 100vw;
		}
	
    /* Layout-Container als Flex */
    .grid-container {
        display: flex;
        flex-wrap: wrap; /* erlaubt Umbruch der Kinder in neue Zeilen */
        gap: 1.25rem; /* Abstand zwischen den Flex-Items */
        padding: 0; /* entfernt Innenabstand, um bündig zu bleiben */
        height: auto;
    }

    /* Positionierungen zurücksetzen */
    .grid-container .vet-position-relative,
    .grid-container .vet-position-absolute {
        position: static; /* alle Elemente wieder normal im Flow platzieren */
    }

    /* Wrapper-Größen(Nav-Content) zurücksetzen auf Auto  */
    .grid-container .vet-grid-item-content,
    .grid-container .vet-content-nav-style {
        width: auto;
        height: auto;

    }

    /* NAV-Bereich: linke Spalte als Flexbox-Kind */
    .grid-container .vet-grid-nav {
        flex: 1 1 100%; /* wächst und schrumpft, Basisbreite 100% */
        min-width: 250px;
        padding: 0;
        box-sizing: border-box;
        overflow: visible; /* UnterMenüs nicht abschneiden */
        /*margin-bottom: 1rem; /* Abstand zur Content-Spalte */
    }

    /* CONTENT-Bereich: rechte Spalte als Flexbox-Kind */
    .grid-container .vet-grid-content {
        flex: 1 1 auto; /* nimmt übrigen Platz ein */
        min-width: 0; /* verhindert horizontalen Scroll bei langen Inhalten */
        display: flex; /* Innen-Layout: Bild oben, Text unten */
        flex-direction: column;
        /*background: #F3F1E9;*/
        padding: 0;
        box-sizing: border-box;
    }

    /* Beide Wrapper transparent */
    .grid-container .vet-grid-content-top,
    .grid-container .vet-content-top-style {
        min-height: 0; /* verhindert fixe Höhen */
    }

    /* Bild zentriert, abgerundet */
    .grid-container .vet-grid-content-top img {
        display: block;
        width: 75%;
        height: auto;
        object-fit: contain;
        margin: 0 auto 0.5rem; /* zentriert, Abstand unten */
        border-radius: 0.5rem; /* weiche Ecken */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    }

    /* Tabellen und Text */
    .grid-container .vet-grid-content-bottom {
        padding: 1rem;
    }

    .grid-container .vet-grid-content-bottom table {
        width: 100%;
        border-collapse: collapse; /* benachbarte Zellrahmen zusammenführen */
    }

    .grid-container .vet-grid-content-bottom td {
        padding: 0.5rem 1rem;
        word-wrap: break-word; /* lange Wörter umbrechen */
    }

    /* Alle Void-Container ausblenden */
    .grid-container .vet-grid-void-one,
    .grid-container .vet-grid-void-two,
    .grid-container .vet-grid-void-three,
    .grid-container .vet-grid-void-four {
        display: none;
    }

    /* Weiße Navi-Box: Override für Sand-Hintergrund (Child-Combinator >: sorgt  dafür, dass nur oberstes Nav-Element getroffen wird.) */
    .grid-container > .vet-grid-nav {
        background-color: #fff; /* ersetzt den Sandton */
        padding: 1rem 1rem 0rem 1rem;
        box-sizing: border-box;
    }

    .grid-container > .vet-grid-nav .vet-grid-item-content,
    .grid-container > .vet-grid-nav .vet-content-nav-style {
        background-color: #fff; /* stellt sicher, dass innerer Wrapper auch weiß ist */
        width: 100%;
    }

    /* Links im Menü als Flex und klickbare Blöcke */
    .grid-container > .vet-grid-nav nav .vet-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end; /* rechtsbündig*/
        margin: 0;
    }

    .grid-container > .vet-grid-nav nav .vet-menu a {
        display: block;
        padding: 0.5rem 1rem;
    }
}


/* Desktop (ab 1025px) */
@media (min-width: 1256px) {
    .grid-container {
        display: grid; /* zurück zu CSS Grid */
        grid-template-columns: 526px 729px 1fr; /* feste Breiten für Spalten */
        grid-template-rows:    380px 380px auto; /* fixe Höhen für Header-Zeilen */
        gap: 0; /* keine Zwischenräume */
        padding: 0; /* kein Innenabstand */
        box-sizing: border-box;
    }

    /* Leere void wieder an  ursprünglichen Grid-Plätzen anzeigen */
    .grid-container .vet-grid-void-one {
        display: block; /* sichtbar machen */
        grid-column: 3;
        grid-row: 1;
    }

    .grid-container .vet-grid-void-two {
        display: block;
        grid-column: 1;
        grid-row: 2;
    }

    .grid-container .vet-grid-void-three {
        display: block;
        grid-column: 3;
        grid-row: 2;
    }

    .grid-container .vet-grid-void-four {
        display: block;
        grid-column: 1 / -1; /* Item spannt sich von ganz links bis ganz rechts über alle definierten Spalten. */
        margin-top: 16px; /* kleiner Abstand oben */
    }
	
	
	
}