/* ***************DEFINITIONEN **********/

:root {
    /* ----- Hintergrundfarben ---------  */
    /* ----- Hintergrundfarben ---------  */
    /* ----- Hintergrundfarben ---------  */
    --global-WebBGCol: #F7F7F7;
    --Defglobal-WebBGCol: #F7F7F7;
    --Defglobal-WebBGCol_invers: #031135;
    /* --------------  */
    --global-WebBGCol_1: #E8E8E8;
    --Defglobal-WebBGCol_1: #C8C8C8;
    --Defglobal-WebBGCol_invers_1: #041165;
    /* --------------  */
    --global-WebBGCol_2: #B7B7FF;
    --Defglobal-WebBGCol_2: #B7B7FF;
    --Defglobal-WebBGCol_invers_2: #091199;
    /* --------Textfarben ------  */
    /* --------Textfarben ------  */
    /* --------Textfarben ------  */
    --global-WebTxtCol: #031133;
    --Defglobal-WebTxtCol: #031133;
    --Defglobal-WebTxtCol_invers: #F7F7F7;
    /* --------------  */
    --global-WebTxtCol_1: #041166;
    --Defglobal-WebTxtCol_1: #041166;
    --Defglobal-WebTxtCol_invers_1: #E0E0FF;
    /* --------------  */
    --global-WebTxtCol_2: #051199;
    --Defglobal-WebTxtCol_2: #051199;
    --Defglobal-WebTxtCol_invers_2: #E7E7FF;
    /* ----- Zwischentitel - BG ---------  */
    --global-ZwTiBGCol: #031133;
    --Defglobal-ZwTiBGCol: #031135;
    --Defglobal-ZwTiBGCol_invers: #134aad;
    /* ----- Zwischentitel - TG ---------  */
    --global-ZwTiTxtCol: #F7F7F7;
    --Defglobal-ZwTiTxtCol: #F7F7F7;
    --Defglobal-ZwTiTxtCol_invers: #F7F7F7;
    /* ------- Fusszeile -------- */
    --global-FussZeileHintergrundfarbe: #031135;
    --global-FussZeileTextfarbe: #F0F0F0;
    --global-MobileTogglePointPixel: -1;
    --global-SchriftgroesseAuswahldialog: 16;
    --global-KorrekturwertScrollbarRechts: 0;
    /*scrfollbars*/
    --scrollbar-thumb-color: var(--global-WebTxtCol_1); /* Farbe des Thumbs */
    --scrollbar-track-color: var(--global-WebBGCol); /* Farbe des Tracks */

    /*2025 02 01 Ergänzung Mobile Ansicht - Setzen einer eigenen Variable */
    --CSSmobileView: "false"; /* Standardwert für Desktop */
}


/* Grundeinstellung: keine Abstände */
* {
    padding: 0px;       /* innerhalb  von  einem  Rahmen  */
    margin: 0px;        /* Abstanbd außerhalb des Elements */
}


/* 2024 07 22 **************************************************************************************

    Grundstruktur der Webseite an sich

    wichtig: Das von -1000px aus ausgeklappt FlyBridge-Menü hat einen Z-Index von 5;
    Daher muss zB das LöschDiv 4 haben, der Content < 4

****************************************************************************************************/

._MainLayout_WebSeitenBase {
    width: 100%; /*calc(100vw - 13px)*/
    height: calc(100vh - 1px);
    background-color: var(--global-WebBGCol);
    color: var(--global-WebTxtCol);
    font-size: 16px;
    z-index: 0; /* Z-Index! */
    overflow: scroll;
}

.Text_Select_unterbrinden {
    user-select: none;
    -webkit-user-select: none; /* Für Safari */
    -moz-user-select: none; /* Für Firefox */
    -ms-user-select: none; /* Für IE/Edge */
}

.Text_Select_zulassen {
    user-select: text; /* Text kann markiert werden */
    cursor: text; /* Zeigt den Textcursor an */
}

h1:focus {/* störenden Rahmen bei h1... unterbeinden*/
    outline: none;
}
h2:focus { /* störenden Rahmen bei h1... unterbeinden*/
    outline: none;
}
h3:focus { /* störenden Rahmen bei h1... unterbeinden*/
    outline: none;
}

/* 2025 01 25 Divs/Buttons aufpeppen */
.HoverEffekt {     
    transition: background-color 0.3s ease; /* Weicher Übergang bei Farbe */
}
    .HoverEffekt:hover {
        background-color: rgba(0,0,0,0.1); /* Abdunkeln der Farbe */
        cursor: pointer; /* Fingerzeiger anzeigen */
    }


/* für JS-tests usw */
._MainLayout_technischeÜberzeile {
    width: 100%;
    height: 12px;
    position: sticky;
    top: 0px;
    left: 0px;
    padding: 2px;
    margin: 0px;
    margin: 0px;
    background-color: var(--global-WebBGCol);
    color: var(--global-WebTxtCol);
    color: dimgray;
    font-family: 'Courier New';
    font-size: 10px;
 
    z-index: 10; /* Z-Index ! */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}



._MainLayout_WebSeitenInhalt {
    width: 100%;
    position: relative;
    top: 0px;
    font-family: Arial;
    font-size: inherit;
    background-color: var(--global-WebBGCol);
    color: var(--global-WebTxtCol);
    z-index: 1; /* Z-Index ! */
    padding: 0px; /* Bei der Weite oben berücksichtigen! */
    margin: 0px;
    transition: 0.36s;
}

._MainLayout_UeberZeile {
    width: calc( 100% - 20px);
    height: 20px;
    margin-top: auto;
    color: dimgray;
    padding: 6px;
    font-family: Arial Narrow;
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    padding-right: 50px;
    background-color: var(--global-FussZeileHintergrundfarbe);
}
._MainLayout_FussZeile {
    width: 100vw;
    position: sticky;
    height: 20px;
    margin-top: auto;
    bottom: 0px;
    padding: 6px;
    font-family: Arial;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    background-color: var(--global-FussZeileHintergrundfarbe);
    color: var(--global-FussZeileTextfarbe);
}

._MainLayout_Schrift_fett {
    font-weight: 600;
}

._MainLayout_Schrift_Medium {
    font-size: 16px;
    padding: 2px;
}

._MainLayout_Schrift_Gross {
    font-size: 25px;
    padding: 2px;
}

._MainLayout_Schrift_SehrGross {
    font-size: 30px;
    padding: 2px;
}

._MainLayout_HeaderNavigationsZeile {
    width: 100%;
    height: 50px;
    position: sticky;
    top: 13px;
    left: 0px;
    font-family: 'Arial';
    font-size: inherit;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 10; /* Z-Index ! */
    /* Subtle linear gradient with rounded edge illusion */
    background: linear-gradient(180deg, #e0e0e0 0%, /* Top edge lighter */
    #f0f0f0 10%, /* Near top */
    #f0f0f0 90%, /* Near bottom */
    #e0e0e0 100% /* Bottom edge lighter */
    );
    /* Subtle shadow to enhance the rounded effect */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1), /* Bottom shadow */
    0px -2px 5px rgba(0, 0, 0, 0.1); /* Top shadow */

    border-radius: 10px; /* Optional: If you want actual rounded corners */
}

._MainLayout_HeaderNavigationsZeile_invers {
    width: 100%;
    height: 50px;
    position: sticky;
    top: 13px;
    left: 0px;
    font-family: 'Arial';
    font-size: inherit;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 10; /* Z-Index ! */
    /* Inverse linear gradient with rounded edge illusion */
    background: linear-gradient(180deg, #1a1f3d 0%, /* Top edge darker blue */
    #2b3256 10%, /* Near top */
    #2b3256 90%, /* Near bottom */
    #1a1f3d 100% /* Bottom edge darker blue */
    );
    /* Subtle shadow to enhance the rounded effect */
    box-shadow: 0px -2px 5px rgba(255, 255, 255, 0.1), /* Top shadow (lighter) */
    0px 2px 5px rgba(255, 255, 255, 0.1); /* Bottom shadow (lighter) */

    border-radius: 10px; /* Optional: For actual rounded corners */
}

._MainLayout_Erleichterte_Beidienung {
    color: var(--global-WebTxtCol);
    background-color: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    padding-right: 20px;
}

._MainLayout_MenuFlybridge {
    position: unset;
    top: unset;
    left: unset;
    font-family: 'Arial';
    font-size: inherit;
    color: var(--global-WebTxtCol);
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 4; /* Z-Index ! */
    padding: unset;
    transition: none;
}

._MainLayout_MenuFlybridge_Mobile {
    position: absolute;
    font-family: 'Arial';
    color: var(--global-WebTxtCol);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 4; /* Z-Index ! */
    transition: 0.36s;
    top: 54px;
    left: -500px;
    border-radius: 0px 12px 12px 0px;
    /*Glas-Hintergrund*/
    background: rgba(165, 142, 142, 0.28);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.8px);
    -webkit-backdrop-filter: blur(6.8px);
    border: 1px solid rgba(165, 142, 142, 0.2);
}

._MainLayout_MenuFlybridge_Item {
    font-family: 'Arial';
    font-size: inherit;
    color: var(--global-WebTxtCol);
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    z-index: 4; /* Z-Index ! */
 
    
}
    ._MainLayout_MenuFlybridge_Item:hover { 
        background: rgba(194, 177, 177, 0.68);
    }

._MainLayout_MenuFlybridge_Item_MenuUnderTile {
    display: flex; /*Anzeigen: display: flex;*/
    position: absolute;
    top: -1000px;
    font-family: 'Arial';
    font-size: inherit;
    color: var(--global-WebTxtCol);
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 6; /* Z-Index ! */
    /*Glas-Hintergrund*/    
    background: rgba(165, 142, 142, 0.28);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.8px);
    -webkit-backdrop-filter: blur(6.8px);
    border: 1px solid rgba(165, 142, 142, 0.2);
     /*  --------- */
    transition: 0.36s;
    left: 25vw;
    width: 75vw;
    border-radius: 0px 0px 12px 12px;
    padding-bottom: 10px;
}



._MainLayout_SingleMenuItem_Header{
    width:100%;
    cursor:default;
    text-align:left;
    background-color:transparent;
    font-family:inherit;
    font-size:inherit;
    font-weight:600;
}


._MainLayout_SingleMenuItem_Item {
    width: calc(100% - 30px);
    padding-left: 30px;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    font-weight: 300;
    cursor: pointer;
}

    ._MainLayout_SingleMenuItem_Item:hover {
        width: calc(100% - 30px);
        background-color: rgba(194, 177, 177, 0.68);
    }

._MainLayout_SingleMenuItem_Leerzeile {
    width: 100%;
    cursor: default;
    height:20px;
}


._MainLayout_LoginBG {
    display:none;
    z-index: 300;
    height: 100%;
    width: 100%;
    position:absolute;
    color:inherit;
    
    /*Glas-Hintergrund*/
    background: rgba(165, 142, 142, 0.28);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.8px);
    -webkit-backdrop-filter: blur(6.8px);
    border: 1px solid rgba(165, 142, 142, 0.2);
}



._MainLayout_LoginBox {
    display: none;
    position: absolute;
    z-index: 401;
    left: calc(50vw - 150px);
    top: calc(50vh - 150px);
    top: 30px;
    margin:15px;
    width: 300px;
    padding: 15px;
    opacity: 1;
    background: none;
    background-color: var(--global-WebBGCol);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 3px solid;
    border-radius: 12px;
    border-collapse: collapse;
    border-color: var(--global-WebTxtCol);
    color: var(--global-WebTxtCol);
    font-family: 'Arial';
    font-size: inherit;
}

._MainLayout_3DButtonEffekt_ohneHover {
    background: linear-gradient(to bottom, var(--global-WebBGCol_1), var(--global-WebBGCol), var(--global-WebBGCol_1)); /* Verlauf von hell nach dunkel */
    border-radius: 15px; /* Abgerundete Ecken für weichen Look */
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: inherit; /* Dunkle Schriftfarbe für besseren Kontrast */
    border: 1px solid rgba(255, 255, 255, 0.7); /* Heller Rand */
    box-shadow: inset 2px 2px 8px rgba(255, 255, 255, 0.8), /* Innerer heller Schatten für Tiefeneffekt */
    4px 4px 10px rgba(0, 0, 0, 0.3), /* Äußerer Schatten */
    1px 1px 3px rgba(255, 255, 255, 0.5); /* Glanz an den Rändern */
}

._MainLayout_3DButtonEffekt_mitHover {
    background: linear-gradient(to bottom, var(--global-WebBGCol_1), var(--global-WebBGCol), var(--global-WebBGCol_1)); /* Verlauf von hell nach dunkel */
    border-radius: 15px; /* Abgerundete Ecken für weichen Look */
    padding: 10px;
    text-align: center;
    font-weight: bold;
   
    color: inherit; /* Dunkle Schriftfarbe für besseren Kontrast */
    border: 1px solid rgba(255, 255, 255, 0.7); /* Heller Rand */
    box-shadow: inset 2px 2px 8px rgba(255, 255, 255, 0.8), /* Innerer heller Schatten für Tiefeneffekt */
    4px 4px 10px rgba(0, 0, 0, 0.3), /* Äußerer Schatten */
    1px 1px 3px rgba(255, 255, 255, 0.5); /* Glanz an den Rändern */
}
._MainLayout_3DButtonEffekt_mitHover:hover {
    background: linear-gradient(to bottom, var(--global-WebBGCol), var(--global-WebBGCol_1), var(--global-WebBGCol)); /* Verlauf von hell nach dunkel */
    border-radius: 15px; /* Abgerundete Ecken für weichen Look */
    padding: 10px;
    text-align: center;
    font-weight: bold;
  
    color: inherit; /* Dunkle Schriftfarbe für besseren Kontrast */
    border: 1px solid rgba(255, 255, 255, 0.7); /* Heller Rand */
    box-shadow: inset 2px 2px 8px rgba(255, 255, 255, 0.8), /* Innerer heller Schatten für Tiefeneffekt */
    4px 4px 10px rgba(0, 0, 0, 0.3), /* Äußerer Schatten */
    1px 1px 3px rgba(255, 255, 255, 0.5); /* Glanz an den Rändern */
    cursor:pointer;
}


._MainLayout_EinfacheBoxHell {
    color:inherit;
    border: 2px solid #dcdcdc; /* Etwas heller als der Hintergrund */
    border-radius: 10px;
    padding: 10px;
    background-color: inherit;
    border-color:rgba(0,0,0,0.1);
    margin-bottom:10px;
}

._MainLayout_DynamischeFrabenTextHintergrund {
    background-color: var(--global-WebBGCol);
    color: var(--global-WebTxtCol);
}


/* ---- fließendes Ein und ausblenden von Divs ----------- */
@keyframes fadeInExpand {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: scaleY(0);
        height: 0;
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: scaleY(1);
        height: auto;
    }
}

@keyframes fadeOutCollapse {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: scaleY(1);
        height: auto;
    }

    100% {
        opacity: 0;
        filter: blur(10px);
        transform: scaleY(0);
        height: 0;
    }
}

._MainLayout_animated-div {
    display: block;
    overflow: hidden;
    transform-origin: top;
    animation: fadeInExpand 0.5s ease-out forwards;
}

    /* Ausblend-Animation */
    ._MainLayout_animated-div.hide {
        animation: fadeOutCollapse 0.5s ease-out forwards;
    }


.MainLayoutLogoNeu
{
    display: block;
}

/* ----------------------------------------------*/



/* Layout Haupt / Scheiber -------------------------------------------------------------------------------------------------------*/
/* Hauptcontainer */
.HauptScheiber_Main {
    width: calc(100%-15px);
    background-color: var(--global-WebBGCol);
    color: var(--global-WebTxtCol);
    font-family: Verdana, sans-serif;
    font-size: 16px;
    z-index: 0; /* Z-Index! */
    overflow: clip;
}

/* Container für das Grid Layout */
.grid-container {
    display: grid;
    grid-template-areas:
        'header header header header header header'
        'left left middle middle right right'
        'footer footer footer footer footer footer';
    /* Optionale Lücke zwischen den Spalten */
   
    font-size: inherit;
    color: inherit;
    background-color: inherit;
}

.grid-containerDatenraum {
    display: grid;
    grid-template-areas:
        'header header   header header'
        'left left   right right'
        'footer footer footer footer';
    /* Optionale Lücke zwischen den Spalten */
    
    font-size: inherit;
    background-color: inherit;
}

/* Style der linken Spalte */
.left {
    grid-area: left;
    text-align: justify;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 12px;
    margin: 5px;
    transition: 0.2s;
 
    display: block;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    color: inherit;
    background-color: rgba(0, 0, 0, 0.1);
}


/* Style der mittleren Spalte */
.middle {
    grid-area: middle;
    text-align: justify;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 12px;
    margin: 5px;
    transition: 0.2s;
 
    display: block;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    color: inherit;
    background-color: rgba(0, 0, 0, 0.125);
}

/* Style der rechten Spalte */
.right {
    grid-area: right;
    text-align: justify;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 12px;
    margin: 5px;
    transition: 0.2s;

    display: block;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    color: inherit;
    background-color: rgba(0, 0, 0, 0.15);
}

    .left:hover, .middle:hover, .right:hover {
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.2);
        border: 1px solid #ccc;
        transition: background-color 0.3s ease; /* Übergangseffekt für Hintergrundfarbe */
    }


/* Style des Headers */
.grid-header {
    grid-area: header;
    background-color:inherit;
    padding: 30px;
    text-align: center;
    font-size: 35px;
    font-family: Arial, sans-serif;
}

/* Style des Footers */
.footer {
    grid-area: footer;
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
}


/*Scrollbars*/
/* WebKit-basierte Browser (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 10px;
    border: 2px solid transparent; /* Optional: Border um den Thumb, transparent wenn nicht erwünscht */
}

    ::-webkit-scrollbar-thumb:active {
        background-color: rgba(0,0,0,0.2);
    }

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}


/* Responsive Layout - macht die drei Spalten in der mobilen Ansicht untereinander statt nebeneinander */
/* Grid Layout für größere Bildschirme ab 1023px Breite */
@media (min-width: 1023px) {
    .grid-container {
        grid-template-areas:
            'header header'
            'left right'
            'footer footer';
        /* grid-template-columns: 80vw 20vw;  Linke Spalte 20%, rechte Spalte 80% */
    }

    .left {
        grid-area: left;
        width:77vw;
        /* Keine explizite Breite setzen */
    }

    .right {
        grid-area: right;
        /* Keine explizite Breite setzen */
    }
     
}

/* Responsive Layout für Bildschirme unter 1023px Breite */
@media (max-width: 1023px) {
    .grid-containerDatenraum {
        grid-template-areas:
            'header header'
            'left left'
            'right right'
            'footer footer';
        grid-template-columns: 1fr; /* Beide Spalten nehmen 100% der Breite */
    }

    .left, .right {
        width: 87vw; /* Stellt sicher, dass beide Spalten die volle Breite einnehmen */
        box-sizing: border-box; /* Sorgt dafür, dass Padding und Border in die Breite einbezogen werden */
    }

   
}


/* -----------------------------------------------------------------------------*/
    
    
/*    Spezial-Layouts zB Scheiber_Haupt     */


/*   dreispaltiges Layout   */
.grid-container-HeadDreiSpalten {
    display: grid;
    grid-template-columns: 1fr; /* Standard: eine Spalte */
    grid-template-rows: auto auto; /* Header und Inhalte */
    gap: 16px; /* Abstand zwischen Header und Inhalt */
}

.grid-header-HeadDreiSpalten {
    grid-column: 1 / -1; /* Header über die gesamte Breite */
    text-align: center;
    background-color: #f8f8f8;
    padding: 16px;
    font-weight: bold;
    border: 1px solid #ddd;
}

.grid-content-HeadDreiSpalten {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Drei Spalten nebeneinander */
    gap: 16px;
}

@media (max-width: 1000px) {
    .grid-content-HeadDreiSpalten {
        grid-template-columns: 1fr; /* Eine Spalte in der mobilen Ansicht */
    }
}



/* zewispaltiges Layout schmal-breit */

.grid-container_ZweiSpalten {
    display: grid;
    grid-template-rows: auto auto; /* Header und Inhalt */
    grid-template-columns: 1fr; /* Standard: Eine Spalte */
    gap: 6px; /* Abstand zwischen den Elementen */
    width: 100%; /* Begrenze die maximale Breite */
    overflow-x: hidden; /* Verhindere horizontale Überläufe */
}

.grid-header_ZweiSpalten {
    grid-column: 1 / -1; /* Header über die gesamte Breite */
    text-align: center;
 
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
    font-weight: bold;
    border: 1px solid #ddd;
    box-sizing: border-box; /* Padding und Border in die Breite einbeziehen */
    outline: none;
    background: linear-gradient(to bottom, var(--global-WebBGCol_1), var(--global-WebBGCol), var(--global-WebBGCol_1)); /* Verlauf von hell nach dunkel */
    border-radius: 3px; /* Abgerundete Ecken für weichen Look */
    padding: 15px 30px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: inherit; /* Dunkle Schriftfarbe für besseren Kontrast */
    border: 1px solid rgba(255, 255, 255, 0.7); /* Heller Rand */
    box-shadow: inset 2px 2px 8px rgba(255, 255, 255, 0.8), /* Innerer heller Schatten für Tiefeneffekt */
    4px 4px 10px rgba(0, 0, 0, 0.3), /* Äußerer Schatten */
    1px 1px 3px rgba(255, 255, 255, 0.5); /* Glanz an den Rändern */
}
.grid-header_ZweiSpalten:focus {outline:none;}

.grid-content_ZweiSpalten {
    display: grid;
    grid-template-columns: 20% 1fr; /* Linke Spalte: max. 20%, rechte Spalte: Rest */
    gap: 0px;
    align-items: start;
    width: 100%; /* Begrenze die Breite des Containers */
    box-sizing: border-box; /* Padding und Border einrechnen */
    overflow-x: hidden; /* Verhindere horizontale Überläufe */
}

.grid-left_ZweiSpalten {
    background: #f0f0f0;
    background-color: rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 5px;
    margin: 5px;
    max-width: calc(100% - 20px);
    border: 1px solid #ddd;
    box-sizing: border-box; /* Padding und Border in die Breite einbeziehen */
    max-width: 100%; /* Sicherstellen, dass die Spalte nicht breiter wird */
    overflow-x: hidden; /* Verhindere horizontale Überläufe */
    word-wrap: break-word; /* Bricht lange Wörter um */
    overflow-wrap: break-word; /* Alternative für besseren Support */
}

.grid-right_ZweiSpalten {
    background: #f0f0f0;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 6px 8px;
    margin: 4px 0px 4px 5px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* <<< hier liegt die Magie */
    gap: 4px 8px; /* vertikal / horizontal */
    overflow-y: clip;
}

    .grid-right_ZweiSpalten > * {
        margin-top: 2px;
        margin-bottom: 2px;
    }

@media (max-width: 1000px) {
    .grid-content_ZweiSpalten {
        grid-template-columns: 1fr; /* Eine Spalte in der mobilen Ansicht */
        max-width: 100%; /* Begrenze die Breite */
    }

    .grid-header_ZweiSpalten {
        margin: 16px;
        padding:0px;
    }

    .grid-left_ZweiSpalten {
        grid-row: 2; /* Linke Spalte unten anzeigen */

        width: 100%; /* Volle Breite für die Spalte - padding!*/
        padding: 5px;
        margin-top: 20px;
        margin-left:0px;
        margin-right:0px;
    }

    .grid-right_ZweiSpalten {
        grid-row: 1; /* Linke Spalte unten anzeigen */

        width: calc(100% - 0px); /* Volle Breite für die Spalte - padding!*/
        overflow-y:clip;
        
        margin-top: 20px;
        margin-left: 0px;
        margin-right: 0px;
    }
    :root {
        --CSSmobileView: "true"; /* Wird gesetzt, wenn die Breite <= 1000px ist */
    }

    .MainLayoutLogoNeu {
        display: none;
    }
}


/* QuickGrid */

  /* Die Vollkoffer bei MS haben ALLE QuickGrid-Header-Elementen als Button gemacht un ihnen diese CSS-Klasse-Zugeteilt. Sieht man nur bei der Code-Analyse im Google Chrome!  */

.col-title {
   background:inherit;
    border: none;
}
.col-title-text {
    
    cursor: pointer !important;
    font-weight: 600;
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: none; /* Kein Rand */
    outline: none; /* Kein Fokus-Rahmen */
    padding: 5px 10px; /* Innenabstand für bessere Optik */
    display: inline-block;
    text-decoration: none;
    box-shadow: none; /* Kein Schatten */

}

    .col-title-text:hover {
        color: #ffffff; /* Weiße Schrift */
        text-decoration:underline;
    }

    .col-title-text:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .custom-quickgrid table {
        width: 100%;
        border-collapse: collapse;
        background: rgba(0,0,0,0.15);
        transition:0.5s;
    }

.custom-quickgrid th {
    background: linear-gradient(to bottom, #004CFF, #007BFF, #006BDF); /* Vertikaler Gradient */
    color: #f0f0f0; /* Weiße Schrift */
    text-align: left;
    padding: 8px; /* Reduziertes Padding für kompakte Darstellung */
    font-size: 14px; /* Größere Schrift für Header */
    font-weight: 600;
}
    .custom-quickgrid th:hover {
        background: linear-gradient(to bottom, #005CFF, #008BFF, #007BDF); /* Vertikaler Gradient */
    }



    .custom-quickgrid td {
        padding: 5px; /* Kompakte Darstellung */
        font-size: 12px; /* Kleinere Schrift für Daten */
        border-bottom: 1px solid #ddd;
    }

    .custom-quickgrid tr:hover {
        background-color: rgba(0, 123, 255, 0.1); /* Leicht blaue Hintergrundfarbe bei Hover */
    }



.page-size-chooser {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

    .page-size-chooser select {
        margin: 0 1rem;
        padding: 0.25rem 0.5rem;
    }



/* Basis-Stil für das Drag-and-Drop-Feld */
.drag-drop-files {
    position: relative;
    border: 2px dashed #ccc;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 10px;
    padding: 0;
    font-size: 1.2em;
    font-family: Arial, sans-serif;
    height: 200px;
    width: calc(100% - 20px);
    overflow: hidden;
    background-image: url("data:image/svg+xml;charset=UTF-8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='150' height='50'>\
      <defs>\
        <pattern id='p' width='150' height='40' patternUnits='userSpaceOnUse'>\
          <text x='0' y='35' fill='%23dddddd' font-size='14' font-family='Arial'>Datei hereinziehen</text>\
        </pattern>\
      </defs>\
      <rect width='100%' height='100%' fill='url(%23p)'/>\
    </svg>");
    background-repeat: repeat;
}

    /* Bei Dragover wird der Text geändert */
.drag-drop-files-dragover {
    position: relative;
    border: 2px dashed #ccc;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 10px;
    padding: 0;
    font-size: 1.2em;
    font-family: Arial, sans-serif;
    height: 200px;
    width: calc(100% - 20px);
    overflow: hidden;
    background-image: url("data:image/svg+xml;charset=UTF-8,\
        <svg xmlns='http://www.w3.org/2000/svg' width='150' height='50'>\
          <defs>\
            <pattern id='p' width='150' height='50' patternUnits='userSpaceOnUse'>\
              <text x='0' y='35' fill='%23dddddd' font-size='14' font-family='Arial'>Datei ablegen</text>\
            </pattern>\
          </defs>\
          <rect width='100%' height='100%' fill='url(%23p)'/>\
        </svg>");
}


.text_kursiv {
    font-style: italic;
}

.filedialog-responsive-grid {
    display: grid;
    grid-template-columns: 30px 1fr 150px 120px 230px;
    border-bottom: 1px dashed;
    border-collapse: separate;
    border-color: rgba(0,0,0,0.2);
    align-content: baseline;
    gap:0px;
}

/* Mobile Ansicht für Bildschirme unter 1000px */
@media (max-width: 1000px) {
    .filedialog-responsive-grid {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}


/* PDF-Box*/
.pdf-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.pdf-box {
    /* Standard: volle Breite (untereinander) */
    width: 100%;
}

/* Bei genügend Platz (über 1000px Gesamtbreite) nebeneinander */
@media (min-width: 1500px) {
    .pdf-box {
        width: 48%;
    }
}

/* Für Bildschirme über 500px Breite */
.EingabemaskeResponsive {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
}

/* Für Bildschirme unter 500px Breite */
@media (max-width: 500px) {
    .EingabemaskeResponsive {
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: flex-start; /* Alle Elemente linksbündig */
    }
}

/* Blanke Klasse für das Ausblenden - display: none unter 1000 px*/
/* Standardzustand: Element sichtbar */
.hide-below-1000 {
    /* Hier können weitere Stildefinitionen stehen */
}

/* Bei maximal 1000px Breite: Element ausblenden */
@media (max-width: 1000px) {
    .hide-below-1000 {
        display: none;
    }
}


/* 50:50 breiter, zweispalter Grid ----------------------------------------------------------------------*/
/* ==============================
   gridZweispalten5050.css
   ============================== */

/* Haupt-Container mit Header und Contentbereich */
.gridZweispalten5050-container {
    display: grid;
    grid-template-rows: auto auto; /* Header und Content */
    gap: 16px;
    max-width: 100%;
    overflow: clip;
}

/* Header über gesamte Breite */
.gridZweispalten5050-header {
    grid-column: 1 / -1;
    margin: 10px;
    overflow:clip;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    background: linear-gradient(to bottom, var(--global-WebBGCol_1), var(--global-WebBGCol), var(--global-WebBGCol_1));
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: inset 2px 2px 8px rgba(255,255,255,0.8), 4px 4px 10px rgba(0,0,0,0.3), 1px 1px 3px rgba(255,255,255,0.5);
}

/* Der Content-Bereich, der die zwei Panels enthält */
.gridZweispalten5050-content {
    display: grid;
    grid-template-columns: 1fr; /* Standard mobil: 1 Spalte */
    gap: 16px;
    max-width: 100%;
    overflow: clip;
    height: 103%;
}

/* Panels (links/rechts) Basis-Styling */
.gridZweispalten5050-left,
.gridZweispalten5050-right {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width:50%;
    height:102%;
    overflow:clip;
}

/* Linkes Panel dunkler */
.gridZweispalten5050-left {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Rechtes Panel heller */
.gridZweispalten5050-right {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Media Query: über 1000px zwei Panels nebeneinander */
@media (min-width: 1000px) {
    .gridZweispalten5050-content {
        grid-template-columns: 1fr 1fr; /* zwei exakt gleich breite Spalten */
    }
}