/* BASIC PAGEPROPERTIES   ----------------------------------------------------------*/
/* Move down content because we have a fixed navbar that is 50px tall */
:root {
    --bg: #fff;
    --fg: #1f2937;
    --cb-size: 1.5vw; /* ← Größe der Checkboxes */
    --muted: #6b7280;
    --border: #e5e7eb;
    --border-width: 0.1vw;
    --shadow: 0 10px 25px rgba(0,0,0,.08);
    --radius: 1vw;
    --radiussmall: 0.5vw;
    --spoered: rgb(92,178,62);
    --spoeredlight: rgb(170,219,153);
    --fontsizebigger: clamp(12px, 2.0vw, 21px);
    --fontsizebiggest: clamp(18px, 2.75vw,36vw);
    --fontsizenormal: clamp(8px, 1.2vw, 14px);
    --fontsizesmall: clamp(2px, 1.1vw, 8px);
    --fontsizesmallest: clamp(4px, 0.9vw, 7px);
    --fontgrey: #bbbbbb;
}

/* Nur für Tests*/
/*
 *{
    box-sizing: border-box; 
    outline: 1px solid #000; 
}

*/
    
    


   
body {
    padding-top: 0vw;
    font-size: var(--fontsizenormal);
    font-family: Verdana;
    max-width: 100%;
   }

.nonportrait {
    display: normal;
}

.portrait1 {
    display: none;
}

.portraitshow {
    display: none;
}

.portraitnoshow {
    display: normal;
}

/* ---------------------- */
/* General padding in tables*/
/* ---------------------- */
td {
    padding: 0vw 0.5vw 0vw 0.5vw; 
    white-space: normal;
}

th {
    padding: 1.5vw 0.5vw 1.5vw 0.5vw;
    white-space: normal;
}



/* Set widths on the form inputs since otherwise they're 100% wide */
/*put,
select,
textarea*/

/* Generally hide all slider-menu-functions , hide mobile elements by default */
.mobile-menu-button,
.mobile-menu {
    display: none;
}



/* ---------------------- */
/* Portrait tablets and up */
/* ---------------------- */
@media screen and (min-width: 768px) {
    /* Always show desktop menu and hide mobile menu system */
    #menu_mainpulldownmenu {
        display: block !important;
    }

    .jumbotron { /* top margin, but only when the screen is at least 768px wide (tablet and up). */
        margin-top: 20px;
    }

    .menu-grid {
       grid-template-columns: 1fr;
    }

    .body-content {
        background-color: #f8f8f8;
        color: #595959;
        border: 2px solid #ccc;
        padding-left: 2vw;
        padding-right: 2vw;
    }

    .body-font {
        font-size: var(--fontsizenormal);
        font-family: Verdana;
    }
}

/* ---------------------- */
/* Mobile phones: Portrait */
/* ---------------------- */
@media screen and (max-width: 767px) and (orientation: portrait) {
    body {
        padding-top: 0vw;
        font-size: var(--fontsizebigger);
        font-family: Verdana;
        max-width: 100%;
    }

    .portrait1 {
        display:table-row;
    }

    .nonportrait {
        display: none;
    }

    .portraitshow {
        display: normal;
    }

    .portraitnoshow {
        display: none;
    }

    .body-content {
        padding-left: 1vw;
        padding-right: 1vw;
    }

    .body-font {
        font-size: var(--fontsizebigger);
        font-family: Verdana;
    }
    .mobile_portraitnoshow {
        visibility: collapse !important;
        width: 0%;
        white-space: nowrap;
        display:none;
    }


    /* PULLDOWN MENU   ----------------------------------------------------------*/
    .mobile-menu-button {
        display: block;
        position: fixed;
        top: 8vw; /* clamp(15px,3.0vw,25px);*/
        right:18vw;
        background: var(--spoered);
        color: black;
        border: none;
        font-size: 1.5em;
        padding: 1.5vw 0.75vw;
        border-radius: var(--radiussmall);
        z-index: 2000;
        cursor: pointer;
        font-weight:bold;
    }

    .mobile-menu {
        display: block;
        position: fixed;
        top: 70px;
        right: -60%;
        width: 60%;
        height: 60%;
        background: white;
        box-shadow: -2px 0 5px rgba(0,0,0,0.3); /* Schatten nach links */
        overflow-y: auto;
        transition: right 0.5s ease; /* statt left */
        z-index: 1999;
        padding: 20px;
    }

        .mobile-menu.open {
            right: 0;
        }

        .mobile-menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .mobile-menu .mobile-menu-extern { /*Gilt nur für Mobile Anwendungen (externe Mitglieder)*/
            display: block;
            font-weight:bold;
            font-size: 1.2em;
            text-decoration: none;
            padding: 3vw 0;
            border-bottom: 1px solid #ddd;
            cursor: pointer;
            color: #555;
        }

        .mobile-menu .menu-item > span {
            display: block;
            font-weight: bold;
            font-size: 1.2em;
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
            cursor: pointer;

        }

            .mobile-menu .menu-item > span.active + .submenu {
                display: block;
            }

        .mobile-menu .submenu {
            display: none;
            padding-left: 10px;
            margin-top: 10px;
            font-size: 1.2em;
        }

            .mobile-menu .submenu li {
                margin: 8px 0;
            }

            .mobile-menu .submenu a {
                text-decoration: none;
                color:var(--spoered);
                font-size: 1em;
            }

                .mobile-menu .submenu a:hover {
                    text-decoration: underline;
                }

    /* Hide desktop menu in portrait mobile */
    #menu_mainpulldownmenu {
        display: none !important;
    }
   
    /* BUTTONS -----------------------------------------------------------*/
    .button_auto {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 25px;
        min-width: 15vw;
        padding: 0 0.5vw;
        border: 0.3vw outset #bbb;
        cursor: pointer;
        user-select: none;
        font-size: var(--fontsizesmall);
        border-radius: var(--radius);
        transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    }

        .button_auto:active {
            transform: scale(0.5);
            background: var(--spoeredlight);
        }

    .button_autonowshow {
        display:none;
    }

}


/* ---------------------- */
/* Mobile phones: Landscape */
/* ---------------------- */
@media screen and (max-width: 767px) and (orientation: landscape) {

    .body-content {
        padding-left: 1vw;
        padding-right: 1vw;
    }

    .body-font {
        font-size: var(--fontsizenormal);
        font-family: Verdana;
    }
}

/* DRUCK   ----------------------------------------------------------*/
@Media print {
    /* Use the printable area of A4 */
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    html, body {
    }

    /* Kill the centered, max-width page shell from the master */
    .body-content {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        text-align: left !important; /* defeat centered text wrappers */
    }

    .body-font {
        font-size: var(--fontsizenormal);
        font-family: Verdana;
    }

    th, td {
        padding: 2px;
        word-wrap: break-word;
    }

    /* Avoid a page break right before the table and within rows */
    #itemPlaceholderContainer {
        break-before: avoid-page !important; /* modern */
        page-break-before: avoid !important; /* legacy */
    }

    /* Hide anything you don't want on paper (buttons, legends, pager, chrome) */
    .noprint {
        display: none !important;
    }

        .noprint:hover {
            background-color: #45a049;
        }
}

/* MASTERSTRUCTURE   ----------------------------------------------------------*/

/* Make header stack rows vertically */
#headerupper {
    padding-top: 0.5vw;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

#headerupper1 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Generic row style for upper1 and upper2 */
.headerrow {
    display: flex;
    justify-content: space-between; /* push left and right apart */
    align-items: center; /* vertical alignment */
}

    /* Left and right cells grow evenly */
    .headerrow > div {
        flex: 1;
    }

#headerlower {
    font-size: var(--fontsizebiggest);
    margin: 0vw 0vw 1vw 0vw;
    padding: 2vw 2vw 2vw 1vw;
    color: black;
    background-color: var(--spoered);
    border-radius: var(--radius);
    display: flex;
    align-items: center; /* vertical centering */
}

#menu_mainpulldownmenu {
    margin: 0.5vw 0vw 2vw 0vw;
    padding: 0px 0px 0px 0px;
    height: 2.25vw;
    border-radius: var(--radius);
}

#maincontent {
    margin: 6vw 0vw 3vw 0vw;
    padding: 1vw 1vw 1vw 1vw;
    background-color: white;
    border-radius: var(--radius);
    min-height:70vw;
}


/* Generic row style for footerrow */

#footerwrapper {
    padding: 0vw 0vw 0vw 1vw;
    border-radius: var(--radius);
    background-color: white;
    display: flex;
    flex-direction: column;
    width: 100%;
}
#footerrow {
    display: flex;
    justify-content: space-between; /* push left and right apart */
    align-items: center; /* vertical alignment */
    margin: 1vw 0vw 1vw 0vw;
    padding: 2vw 2vw 2vw 1vw;
    border-radius: var(--radius);
    background-color: var(--spoered);
}


#subfooterleft,
#subfooterright {
    flex: 1; /* makes them share space equally */
    padding: 0px; /* just for spacing */
    
}

#footerlower {
    margin: 25px 0px 25px 0px;
    padding: 5px 5px 10px 10px;
    background-color: white;
    text-align: center;
    font-size: var(--fontsizesmallest);
}

/* POP-UP    ----------------------------------------------------------------*/
.pop-up {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width: 70%;
    background: #fff;
    border-radius: var(--radius);
    padding: 3vw;
    z-index: 9999;
    box-shadow: 0vw 10vw 30vw rgba(0,0,0,0.7);
}

.pop-up-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    z-index: 9998;
}



/* PULLDOWN MENU   ----------------------------------------------------------*/
.nav {
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}

.menu {
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    border-radius: var(--radius);
    padding: 1vw;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /*autowidth*/
    gap: 1vw 2vw;
    text-align: center;
}

.menu h4 {
    margin: 0.1vw 0vw 1vw;
    font-size: 1.2em;
    font-weight:normal;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
}

.menu ul {
    background: var(--bg);
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    color: var(--fg);
    vertical-align: central;
}


.menu li {
    background: rgba(245, 245,245,0.95);
    line-height: 1.6em;
    font-size: 1.0em;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 200;
    color: var(--fg);
    vertical-align: central;
}


.menu a {
    display: block;
    padding: 0.5vw 1vw;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--fg);
}

    .menu a:hover, .menu a:focus {
        background: rgba(200,200,200,0.8);
        outline: none;
    }

/* When active, show the list */
.menu h4.active + ul {
    display: block;
}


/* DATA-FIELDS (LISTVIEWS) -----------------------------------------------------------*/
.listview_header1 {
    background-color: darkgray;
    font-size:1.5em;
    font:bold;
    height: 1.5vw;
}

.listview_header2 {
    background-color: lightgray;
    font-size:1.5em;
    font: bold;
    height: 1.5vw;
}

tr.listview_data > td,
tr.listview_data > td * {
    font-size: inherit;
}

.listview_data {
    height: clamp(15px,2.5vw,100%);
    background-color: var(--spoeredlight);
    vertical-align: central;
}

.listview_data_alternating {
    height: clamp(15px,2.5vw,100%);
    background-color: #FFFFFF;
    vertical-align: central;
}

.warning-icon {
    height: 0.8em; /* same as the text line height */
    vertical-align: middle;
}

/* BUTTONS -----------------------------------------------------------*/
.button_auto {
    margin: 5px 5px 5px 0px;
    width: auto;
    border-radius: var(--radiussmall);
    border-width: var(--border-width);
    font-size: inherit;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
.button_auto:active {
    transform: scale(0.8);
    background: var(--spoeredlight);
}


/* DROPOWNLISTS -----------------------------------------------------------*/
.DDL_auto {
    margin-left: 0vw;
    margin-top: 0.1vw;
    margin-bottom: 0.1vw;
    height: clamp(20px, 2vw, 2vw);
    width: clamp(250px, 50vw, 100vw);
    box-sizing: border-box; /* make sure padding/border don’t add extra width */
    border-radius: var(--radius);
    border-width: var(--border-width);
    width: auto;
    min-width: 0;
    display: inline-block;
}

.DDL_auto_obligatory {
    margin-left: 0vw;
    margin-top: 0.1vw;
    margin-bottom: 0.1vw;
    height: clamp(20px, 2vw, 2vw);
    width: clamp(250px, 50vw, 100vw);
    box-sizing: border-box; /* make sure padding/border don’t add extra width */
    border-radius: var(--radius);
    border-width: var(--border-width);
    background-color: red;
    color: white;
    width: auto;
    min-width: 0;
    display: inline-block;
}

/* TEXTBOXES -----------------------------------------------------------*/
.textbox_data_nonobligatory {
    margin-left: 0vw;
    margin-top: 0vw;
    border-radius: var(--radiussmall);
    border-width: var(--border-width);
    height: inherit;
    width: 20vw;
    height: clamp(20px, 2vw, 2vw);
    font-size: inherit;
    border-radius: var(--radius);
}

.textbox_data_obligatory {
    margin-left: 0vw;
    margin-top: 0vw;
    border-radius: var(--radiussmall);
    border-width: var(--border-width);
    background-color: red;
    color: white;
    width: 20vw;
    height: clamp(20px, 2vw, 2vw);
    font-size: inherit;
    border-radius: var(--radius);
}

.entrywarning {
    padding-left: 0vw;
    color: red;
    font-weight: bold;
    font-size: 1em;
}

.entrywarning_small {
    padding-left: 0vw;
    color: red;
    font-weight: bold;
    font-size: 0.8em;
}

/* DATAPAGER -----------------------------------------------------------*/
.datapager {
    text-align: center;
    vertical-align: middle;
    padding: 2vw;
}

/* MARQUEE
---------------------------------------------------------*/
.marquee {
    /*-moz-animation: marquee s linear infinite forwards;
    -webkit-animation: marquee 25s linear infinite forwards;
    animation: marquee 25s linear infinite forwards;
    padding-left: 95%; 

    color: #696969;
    display: inline-block;
    margin: auto; */

    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding-left: 100%;
    border-radius: var(--radiussmall);
    background-color: chartreuse;
}

    .marquee span {
        /* -moz-animation: marquee 80s linear infinite forwards;
        -webkit-animation: marquee 80s linear infinite forwards; */
        /*animation: marquee 80s linear infinite;*/
        animation-name: marquee;
        animation-fill-mode: initial;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        display: inline-block;
        font-size: 1.2em;
        text-align: left;
    }

    /* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
    .marquee:hover span {
        animation-play-state: paused;
    }

@-moz-keyframes marquee {
    from {
        transform: translateX(-10%);
    }

    to {
        transform: translateX(-250%);
    }
}

@-webkit-keyframes marquee {
    from {
        transform: translateX(-10%);
    }

    to {
        transform: translateX(-250%);
    }
}

@keyframes marquee {
    from {
        -moz-transform: translateX(-10%);
        -webkit-transform: translateX(-10%);
        transform: translateX(-10%);
    }

    to {
        -moz-transform: translateX(-250%);
        -webkit-transform: translateX(-250%);
        transform: translateX(-250%);
    }
}


/* THUMBNAILS FÜR BELEGHANDLING----------------------------------------*/
/* Kleines Vorschaubild */
.thumb-img {
    width: 1.3vw;
    height: 2vw;
    object-fit: contain;
    cursor: zoom-in;
}

/* Großes Bild, unsichtbar bis Hover */
.popup-img {
    width: 38vw;
    height: 54vw;
    object-fit: contain;
    display: none; /* unsichtbar */
    position: absolute;
    top: -29vw;
    left: -45vw;
    background: white;
    border: 1px solid #666;
    padding: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.pdf-frame {
    width: 38vw;
    height: 54vw;
    object-fit: contain;
    display: none; /* unsichtbar */
    position: absolute;
    top: -29vw;
    left: -42vw;
    background: white;
    border: 1px solid #666;
    padding: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

/* Wenn die kleine Grafik gehovt wird → große sichtbar */
.thumb-img:hover + .popup-img {
    display: block;
}

.thumb-img:hover + .pdf-frame {
    display: block;
}
/* ---------------------------------------------------------------------*/

/* WARNUNG VOR POP-BLOCKER -----------------------------------------------*/

.alertwarning {
    position: absolute;
    top: 3vw;
    right: 2.5vw;
    width: 30%;
    z-index: 99999; /* stay above all elements */
    padding: 0.3vw;
    border-radius: var(--radius);
    text-align: center;
    color: #444444; /* white text */
    background-color: orange;
    border: 2px solid orange;
    /* your original visual effects */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
    /* blinking animation */
    animation: blinkWarning 2s infinite;
}


@keyframes blinkWarning {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity:1;
    }
}



/* CHECKBOXES -----------------------------------------------------------*/
/*Custom Checkbox Styling für ASP.NET WebForms Funktioniert auch, wenn ASP.NET Wrapper/Label rund ums <input > rendert */

.checkbox_auto {
    vertical-align: middle;
    margin-left: 0;
    margin-top: 0.1vw;
    width: 0.1vw;
    height: 0.1vw;
    border-radius: 0.1vw;
}

/* Native ASP.NET Checkbox unsichtbar */
.cb-native {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Sichtbare Box (Checkmark) */
.checkmark {
    --cb-size: 1.2vw; /* Basisgröße dynamisch in vw */
    width: clamp(5px, var(--cb-size), 200px);
    height: clamp(5px, var(--cb-size), 200px);
    border: 0.1vw solid #555; /* minimale Rahmendicke in px */
    border-radius: 20%; /* minimale Rundung in % */
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
    vertical-align: bottom;
    text-align: center;
}

/* Container-Label */
.custom-checkbox {
    display: inline-flex;
    align-items: center;
    vertical-align: text-bottom;
    gap: 4vw;
    cursor: pointer;
    user-select: none;
    position: relative;
    top:0vw;
    /*border-width: 0px; /*Checked Checkbox)*/
    /*border-radius: 30%; /* minimale Rundung in % */
}
    /* Hover-Effekt */
    .custom-checkbox:hover .checkmark {
        border-color: #0078d4;
        box-shadow: 0 0 0 0.2vw rgba(0,120,212,0.15);
    }

    /* Checked-State */
    .custom-checkbox:has(input[type="checkbox"]:checked) .checkmark {
        background-color: #0078d4;
        border-color: #0078d4;
    }

        /* Häkchen (responsive und an rechte obere Ecke angepasst) */
        .custom-checkbox:has(input[type="checkbox"]:checked) .checkmark::after {
            content: "";
            position: absolute;
            left: calc(clamp(5px, var(--cb-size), 200px) * 0.2);
            top: calc(clamp(5px, var(--cb-size), 200px) * -0.05);
            width: calc(clamp(5px, var(--cb-size), 200px) * 0.35);
            height: calc(clamp(5px, var(--cb-size), 200px) * 0.60);
            border: solid #fff;
            border-width: 0 calc(var(--cb-size) * 0.15) calc(var(--cb-size) * 0.15) 0;
            transform: rotate(45deg);
            box-sizing: content-box;
        }

    /* Fokusrahmen */
    .custom-checkbox:has(input[type="checkbox"]:focus) .checkmark {
        outline: 0.1vw solid #005a9e;
        outline-offset: 0.2vw;
    }

/* Text rechts */
.label-text {
    font-size: var(--fontsizesmall);
}



.fileInputHidden {
    position: absolute;
    left: -10000px;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
}