/* =======================
   HEADER – NUR STARTSEITE
   ======================= */
.home .header-main {
    display: flex;
    align-items: center;
    justify-content: center;   /* Menü in die Mitte */
    position: relative;
}

/* Container als Bezugspunkt, falls noch nicht so */
/* Bezugspunkt */
.hero-area {
    position: relative;
}



.home p.homepage_left_menuheader,
.home p.homepage_left_mobile {
    margin: 0;
    padding: 0;
}


.home .header-left{
	display: block !important;
}

/* "Dresden-Mails" links entfernen */
.home .header-left .logo-text a {
    display: none;
}

/* Hauptnavigation mittig ausrichten */
.home .header-left .main-nav {
    margin: 0 auto;
}

.home .header-left .main-nav ul {
    display: flex;
    gap: 1.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: center;
    align-items: center;
}

.home .header-left .main-nav ul li:first-child {
    display: none;
}


/* Grundeinstellungen für LI */
.home .header-left .main-nav ul li {
    position: relative;
    padding: 0 0.75rem;
}

/* Ab dem 2. Element: Trennstrich links */
/* Mehr Abstand zwischen Strich und Text */
.home .header-left .main-nav ul li + li {
    border-right: 1px solid #6F767E;
    padding-right: 1.5rem;   /* hier kannst du mit dem Wert spielen */
}

.home .header-left .main-nav ul li:last-child {
    border-right: 0px;
}



/* Login/Darkmode an den rechten Rand holen */
.home .header-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 1rem;
}


/* ==================================
   STARTSEITE – 3-SPALTIGES LAYOUT
   ================================== */
.home .hero-main {
    display: flex;
   /* align-items: flex-start;*/
    gap: 24px;
	
	  align-items: stretch;
}

/* Spalte 1: linke Grafik */
.home .hero-left {
    flex: 0 0 160px;   /* fix 160px breit */
    max-width: 160px;
    margin-top: 50px; /* dein gewünschter Start auf Höhe hero-right-middle1 */
	margin-left: 10px;
	
	
}


.home .hero-right {
    flex: 1 1 auto;    /* bekommt alles, was neben den 160px übrig bleibt */
}


.home .hero-left .werbebanner {
    width: 100%;
    max-width: 160px;
    height: auto;
}

/* Spalten 2 und 3 liegen in .hero-right nebeneinander */
.home .hero-right {
    flex: 1 1 auto;
}

/* Überschreibt das Bootstrap-Grid nur in diesem Bereich,
   damit wir sauber 2 Spalten innerhalb von .hero-right haben */
.home .hero-right-top-side > .row {
    display: flex;
    gap: 24px;
    margin: 0;
}


.home .hero-right-btm-side {
  background: var(--bg-hero-right-btm-side);
  box-shadow: 1px 0 0 0 var(--shadow-hero-right-btm-side) inset;
  display: grid;
  grid-template-columns: none;
  justify-content: initial;
  padding: 25px 40px;
margin-top: auto;
}

/* Mittlere Content-Spalte (eigentliche Inhalte, inkl. Headergrafik/Eyecatcher) */
.home .hero-right-top-side .con {
    flex: 1 1 auto;
}

/* Rechte Banner-Spalte */
.home .hero-right-top-side .advertise {
    flex: 0 0 160px;          /* auch hier mindestens 160px */
	margin-top: 30px;
}

.home .hero-right-top-side .advertise .werbebanner {
    width: 112px;
	top: -188px;
	position: relative;
}

.home .hero-right-middle1 {
	
}

.home .advertise {
    display: flex;
    flex-direction: column;
}

.home .advertise .hero-right-middle1 {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
	min-width: 160px;
	max-width: 160px;
}

/* FOOTER — Container über gesamte Breite */
.home .hero-right-btm-side {
    flex: 0 0 100%;
    margin-top: 24px;
	height: 100px;
    /* KEIN text-align hier! */
}

/* Footer-Menü zentriert */
.home .hero-right-btm-side > div:first-child {
    text-align: center;
}

.home .hero-right-btm-side > div:first-child ul {
    list-style: none;
    margin: 0 auto 4px auto;    /* kleiner Abstand nach unten */
    padding: 0;
    display: inline-flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Copyright: links und näher dran */
.home .hero-right-btm-side > div:last-child {
    margin-top: 20px;              /* direkt unter dem Menü */
}

.home .hero-right-btm-side > div:last-child p {
    margin: 0;
    padding-left: 10px;         /* kleiner Einzug von links */
    text-align: center !important;
}



/* Responsiv: untereinander auf kleineren Screens */
@media (max-width: 991.98px) {

.home .header-main {
        justify-content: space-between;
    }

    .home .header-right {
        position: static;
        transform: none;
    }

    /* Desktop-Menü ausblenden – Mobil übernimmt die Sidebar */
    .home .header-left .main-nav ul {
        display: none;
    }
	
    /* Grid auf Handy abschalten – alles untereinander */
    .home .hero-main {
        display: block;      /* statt grid */
    }

    /* Linke Spalte wieder normal */
    .home .hero-left {
        margin-top: 0;       /* kein künstlicher Abstand nach unten */
        max-width: 100%;
		display: none;
    }

    /* Rechte Seite wieder normal untereinander */
    .home .hero-right-top-side > .row {
        display: block;      /* kein Flex, damit con und advertise untereinander kommen */
    }

    .home .hero-right-top-side .con,
    .home .hero-right-top-side .advertise {
        flex: none;
        max-width: 100%;
    }

    
    
}


/* Nur Desktop */
@media (min-width: 992px) {

    /* Eltern-Container, in dem .right-bg-item und .row sitzen */
    .home .hero-right-top-side {
        position: relative;
    }

    /* Box soll exakt die Content-Breite haben (mittlere Spalte) */
    .home .right-bg-item {
        /*width: calc(100% - 160px - 65px); /* Gesamtbreite minus Werbespalte minus Abstand */
        margin: 0 0 5px 0;               /* links bündig, unten etwas Abstand */
        box-sizing: border-box;
		margin-left: 10px;
		margin-right: 10px;
    }
}

.home .hero-left .line {
	display: none;
}