/* --- BASIS STYLES --- */
body {
    margin:0px; font-family: Arial, Verdana, Helvetica; font-size: 14px; line-height: 20px; 
}

/* ... (Hier kannst du deine .PageMaster, .HeaderTab, .Logo etc. lassen) ... */
.PageMaster
{
font-family: Arial,Verdana,Helvetica;
height: 100%;
width: 100%;
background-color: #ffffff;
}



.arrow-up {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #000;
    border-radius: 50%;
    text-decoration: none;
    position: relative;
}

.arrow-up::before {
    content: "";
    width: 12px;
    height: 12px;
    border-left: 3px solid #fff;
    border-top: 3px solid #fff;
    transform: rotate(45deg);
    margin-top: 5px;
}
.DNNEmptyPane { display: none; }

#sdmenue { display:block; z-index:100; width:100%; min-height:54px; background-color:#ffffff; }

.sdContent-Width { width: 100%; max-width: 980px; margin: 0 auto; }

/* Abstände und Inhaltsbreite */
.sdMarginTop { margin-top: 30px; }
.sdmbottom { margin-bottom: 40px; }

/* Spaltensystem */
.sdTwo-Thirds {
    float: left;
   
    box-sizing: border-box;
    padding-right: 20px;
}

.sdOne-Third {
    float: left;
   
    box-sizing: border-box;
}

/* Responsive Anpassung für Spalten */
@media (max-width: 999px) {
    .sdTwo-Thirds, .sdOne-Third {
        width: 100%;
        float: none;
        padding-right: 0;
    }
}


.sdMenue-Width {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* In deiner skin.css im Bereich @media (min-width: 1000px) anpassen oder ergänzen: */
@media (min-width: 1000px) {
    .sdMenue-Width {
        display: flex !important;
        flex-direction: row;      /* Erzwingt die Nebeneinander-Ausrichtung */
        align-items: center;      /* Zentriert Logo und Menü vertikal zueinander */
        justify-content:space-between; /* Schiebt Logo nach links und Menü nach rechts */
    }

    /* Das Logo-Control von DNN rendert oft ein umschließendes Div oder Span */
    #dnnLOGOMenue {
        flex-shrink: 0;           /* Verhindert, dass das Logo gequetscht wird */
        margin-right: 20px;       /* Abstand zwischen Logo und Menü */
    }

    #nav_box {
        flex-grow: 1;             /* Lässt die Nav-Box den verfügbaren Platz füllen */
        display: flex !important;
        justify-content: flex-end; /* Richtet die Menüpunkte rechtsbündig aus */
		width: auto !important;
    }
	
	.navarrow {
        display: none !important; /* Pfeil am Desktop ausblenden */
    }
}



.all-link {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    color: #990e1d !important; /* Passend zum roten Mobile-Trigger */
    text-decoration: underline !important;
}



.sdClr { clear: both; }
.RahmenUnten { border-bottom: 1px solid #666; margin-bottom: 35px; }


/* Footer Grundlayout */
#sdFooter {
    background-color: #444; /* Beispielfarbe */
    padding-top: 40px;
    border-top: 1px solid #ddd;
}
.FooterWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;

    max-width: 1200px;
    margin: 0 auto;
}

.footermenu {
    flex: 1 1 350px;   /* flexibel aber nicht Vollbreite */
    max-width: 350px;  /* optional Begrenzung */
      min-width: 200px; /* Verhindert zu schmale Spalten auf Tablets */
    margin-bottom: 20px;
}


.footermenu h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #FFF;
}

/* Links untereinander ohne <br> */
#sdFooter .footermenu a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 3px 0;
    font-size: 14px;
}

#sdFooter .footermenu a:hover {
    text-decoration: underline;
    color: #990e1d;
}

/* Kleiner Abstandhalter innerhalb der Listen */
.footermenu .spacer {
    display: block;
    height: 15px;
}

/* Copyright Bereich */
#sdCopyRight {
    background-color: #eee;
    margin-top: 30px;
}

.CopyrightText {
    color: #000;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    padding: 20px 0;
    line-height: 1.6;
    text-align: center; /* Optional: Zentriert auf Mobile besser */
}

.CopyrightText a {
    color: #000;
    text-decoration: none;
}

/* Responsive Anpassung für Mobile */
@media (max-width: 600px) {
    .FooterWrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .footermenu {
        width: 100%;
    }
}

.menu-title {
    display: block;
    font-size: 14px; /* Entspricht in etwa h5 */
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    text-transform: uppercase;
}

/* Button-Reset damit er wie ein Link aussieht */
.xmenu-button-trigger {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    width: 100%;       /* Damit der klickbare Bereich die volle Breite nutzt */
    text-align: left;
    display: block;
	outline: none;
}

/* Integration in dein bestehendes Design */
#nav_box ul.root > li > .menu-button-trigger {
    display: block;
    padding: 18px 20px; /* Gleiches Padding wie deine Links  */
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

/* Mobile Anpassung */
@media (max-width: 999px) {
    #nav_box ul.root > li > .menu-button-trigger {
        border-bottom: 1px solid #eee;
        /* RECHTS mehr Padding (60px bis 70px), damit der Text nicht hinter den Pfeil läuft */
        padding: 15px 70px 15px 20px; 
        color: #000;
        line-height: 24px;
        font-weight: bold;
        position: relative;
        width: 100%;       /* Volle Breite sicherstellen */
        display: block;    /* Sicherstellen, dass der Button ein Block-Element ist */
        text-align: left;  /* Text linksbündig */
    }

    /* Sicherstellen, dass der Pfeil-Container die richtige Größe hat */
    .navarrow {
        position: absolute;
        right: 0;
        top: 0;
        width: 60px;       /* Breite des Klick-Bereichs für den Pfeil */
        height: 100%;      /* Volle Höhe des Buttons nutzen */
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #eee; /* Optische Trennung zum Text */
    }
}


* ============================================================
   Scroll-To-Top Button
Die ID für den Container des Pfeils
   ============================================================ */

#sdGotoTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}



/* ============================================================
   NEUES MENÜ SYSTEM
   ============================================================ */

#nav_box { position: relative; z-index: 1000; }
#nav_box ul.root { list-style: none; margin: 0; padding: 0; }
#nav_box .category { display: none; } 

/* --- DESKTOP (ab 1000px) --- */
@media (min-width: 1000px) {
    .mobile_display { display: none !important; }
    #nav_box { display: block !important; }
    #nav_box ul.root { display: flex; justify-content: flex-start; }
    #nav_box ul.root > li { position: relative; list-style: none; }

    #nav_box ul.root > li > a,
	#nav_box ul.root > li > .menu-button-trigger { 
        display: block; padding: 18px 20px; color: #333;
        font-weight: bold; text-decoration: none; text-transform: uppercase;
		background: none; /* Wichtig für Button */
        border: none;     /* Wichtig für Button */
    }

    /* Hover am PC */
    #nav_box ul.root > li:hover > .category {
        display: block !important;
        position: absolute; top: 100%; left: 0;
        background: #fff; border: 1px solid #ddd;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); padding: 20px;
        z-index: 1100; min-width: 250px;
    }

    .scontainer-3 { display: flex !important; width: 800px; gap: 30px; background: #fff !important; }
    .scol { flex: 1; width: 33% !important; }

    /* Zeilenhöhe der Untermenü-Einträge am PC verringern */
    #sdHeader #nav #nav_box ul.megaMenu li.item a {
        padding: 6px 10px !important; 
        line-height: 18px !important; 
        background-position: left bottom !important;
    }

    #sdHeader #nav #nav_box ul.megaMenu li.item a span {
        line-height: 18px !important; 
        font-size: 13px !important;
    }
}

/* --- MOBILE (bis 999px) --- */
@media (max-width: 999px) {
    .mobile_display { 
        display: block !important; float: right; background: #990e1d;
        padding: 10px 15px; border-radius: 4px; margin: 8px 10px 0 0;
        cursor: pointer; border: none;
    }

    .click_img {
        display: block; width: 22px; height: 2px; background: #fff;
        position: relative; margin: 8px 0;
    }
    .click_img::before, .click_img::after {
        content: ""; position: absolute; width: 22px; height: 2px; background: #fff; left: 0;
    }
    .click_img::before { top: -7px; }
    .click_img::after { bottom: -7px; }

    #nav_box { display: none; width: 100%; clear: both; background: #fff; border-top: 2px solid #990e1d; }

    #nav_box ul.root > li { position: relative; } /* WICHTIG für Pfeil-Positionierung */

    #nav_box ul.root > li > a {
        border-bottom: 1px solid #eee; padding: 15px 20px;
        color: #000; font-weight: bold; line-height: 24px; display: block;
    }

    #nav_box .category {
        position: static; width: 100% !important; padding: 10px 20px;
        background: #f9f9f9; border: none;
    }

    /* Der Pfeil (Touch-Bereich) */
    .navarrow {
        display: block !important;
        width: 60px; height: 54px; line-height: 54px;
        text-align: center; cursor: pointer;
        position: absolute; right: 0; top: 0;
        z-index: 100; color: #000;
        border-left: 1px solid #eee;
    }

    .navarrow::before {
        content: '▼'; font-family: Arial, sans-serif;
        font-size: 12px; font-style: normal;
        display: inline-block; transition: transform 0.3s ease;
    }

    .navarrow2::before { transform: rotate(180deg); }

    .scontainer-3 { display: block !important; width: 100% !important; }
    .scol { width: 100% !important; margin-bottom: 15px; }
}

/* --- RESET & FORMATIERUNG (Überschreibt Portal.css) --- */
#sdHeader #nav #nav_box ul.megaMenu li {
    list-style: none !important; background-image: none !important;
    padding: 0 !important; margin: 0 !important;
}

#sdHeader #nav #nav_box ul.megaMenu li a {
    border: none !important; padding: 10px 20px !important;
    display: block !important; text-decoration: none !important;
}

#sdHeader #nav #nav_box ul.megaMenu li a span {
    font-size: 13px !important; color: #535353 !important;
    font-weight: bold !important; line-height: 16px !important;
}

#sdHeader #nav #nav_box ul.megaMenu li a:hover {
    background-color: #f5f5f5 !important;
}