/*General Styl*/
body{
    background:#B4BBC1;
    font-size:100%;
    margin:0em;
    padding:0em;
    font-family:Helvetica;
    --farbemarkhalb:rgba(122, 42, 109, 0.5);
    --farbehaupt:#627E91;
    --farbemenu:#627E91;
    --farbemenühalb:rgba(98, 126, 145,0.5);
    --farberand:#7B2A6E;
    --farbefooter:#08314E;
    --farbefootergradient:#355f7d;
    --nav-breite: 11em;
    /* Breakpoints für Mobile (Version 3.0) */
    --breakpoint-tablet: 768px;
    --breakpoint-mobile: 480px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/*********************************************************************************
Mobile-Responsive Utilities (Version 3.0)
*********************************************************************************/

/* Hamburger Button für Menübar - nur auf Mobile sichtbar */
.hamburger-btn {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1200;
    background: var(--farbefooter);
    color: white;
    border: none;
    width: 3rem;
    height: 3rem;
    font-size: 1.2rem;
    cursor: pointer;
}

.hamburger-btn:hover {
    background: var(--farberand);
}

/* Seitliches Menü Toggle-Balken (>> / <<) - nur Mobile */
.nav-toggle {
    display: none;
    position: fixed;
    left: 0;
    top: 3rem;
    width: 2rem;
    height: calc(100% - 4.5rem);
    background: var(--farbehaupt);
    color: white;
    border: none;
    cursor: pointer;
    z-index: 1001;
    font-size: 1.5em;
    transition: left 0.3s ease;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    /* Pfeil zentrieren - wird auf Mobile mit display:flex aktiviert */
    align-items: center;
    justify-content: center;
}

.nav-toggle:hover {
    background: var(--farberand);
}

/* Wenn nav offen ist, Toggle-Button rechts neben nav */
.nav-toggle.nav-open {
    left: 14rem;
}

/* Overlay - nicht mehr für nav, nur noch für Menübar auf Mobile */
.nav-overlay {
    display: none;
    position: fixed;
    top: 3rem;
    left: 0;
    width: 100%;
    height: calc(100% - 3rem);
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.nav-overlay.active {
    display: block;
}

/* ==========================================================================
   Desktop Nav Toggle (Ein-/Ausblenden der Navigation)
   ========================================================================== */

/* Toggle-Button für Desktop - im Nav-Bereich */
.desktop-nav-toggle {
    display: none; /* Standardmäßig ausgeblendet, nur auf Desktop sichtbar */
    position: fixed;
    left: calc(var(--nav-breite) - 1.5rem); /* Innerhalb der Nav */
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 4rem;
    background: var(--farbefooter);
    color: white;
    border: none;
    cursor: pointer;
    z-index: 1001;
    font-size: 1rem;
    border-radius: 5px 0 0 5px; /* Links abgerundet wenn Nav offen */
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    transition: left 0.3s ease, border-radius 0.3s ease;
}

.desktop-nav-toggle:hover {
    background: var(--farberand);
}

/* Wenn Nav collapsed: Button links, border-radius umkehren */
body.nav-collapsed .desktop-nav-toggle,
html.nav-collapsed .desktop-nav-toggle {
    border-radius: 0 5px 5px 0; /* Rechts abgerundet wenn Nav zu */
}

/* Desktop: Nav Toggle sichtbar und Collapse-Verhalten */
@media (min-width: 851px) {
    .desktop-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Nav collapsed - ausgeblendet */
    nav.collapsed {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden;
        padding: 0;
    }

    /* Toggle-Button bewegt sich mit */
    nav.collapsed ~ .desktop-nav-toggle,
    body.nav-collapsed .desktop-nav-toggle,
    html.nav-collapsed .desktop-nav-toggle {
        left: 0;
    }

    /* Main passt sich an wenn Nav collapsed */
    body.nav-collapsed main,
    html.nav-collapsed main {
        left: 0 !important;
        width: 100% !important;
    }

    /* Nav ausblenden wenn html.nav-collapsed (vor DOMContentLoaded) */
    html.nav-collapsed nav {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden;
        padding: 0;
    }

    /* Transition für smooth Animation */
    nav {
        transition: width 0.3s ease;
    }

    main {
        transition: left 0.3s ease, width 0.3s ease;
    }
}

/* Desktop-Only: Elemente die auf Mobile ausgeblendet werden */
@media (max-width: 850px) {
    .desktop-only {
        display: none !important;
    }

    /* Basis-Schriftgröße für Mobile (nicht kleiner als 16px) */
    body {
        font-size: 16px;
    }

    /* Hamburger Button auf Mobile anzeigen (rechts oben für Menübar) */
    .hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Menübar: Overflow erlauben + z-index über Overlay (999) + Höhe = Burger */
    #menubar {
        overflow: visible !important;
        z-index: 1100 !important;
        height: 3rem !important;
    }

    /* Menübar: Module-Links verstecken, als Dropdown anzeigen */
    #menubar ul {
        display: none !important;
        position: fixed;
        top: 3rem;
        right: 0;
        background: var(--farbefooter);
        flex-direction: column;
        width: 300px;
        box-shadow: -2px 2px 5px rgba(0,0,0,0.3);
        z-index: 1100;
    }

    #menubar ul.open {
        display: flex !important;
    }

    #menubar ul li {
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        display: block !important;
        width: 100%;
    }

    #menubar ul li a {
        display: block !important;
        padding: 1.2rem 1.5rem;
        margin: 0;
        width: 100%;
        cursor: pointer;
        position: relative;
        z-index: 1200;
        font-size: 1.3rem;
        min-height: 3rem;
    }

    /* Nav-Toggle auf Mobile anzeigen */
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Haupt-Layout: Vertikal statt horizontal */
    #gesamt {
        flex-direction: column;
        min-height: auto;
        margin-top: 3rem;
    }

    /* Navigation: Slide-In von links mit Toggle */
    nav {
        position: fixed !important;
        left: 0 !important;
        top: 3rem !important;
        width: 14rem !important;
        height: calc(100% - 4.5rem) !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1000 !important;
    }

    nav.open {
        transform: translateX(0);
    }

    /* Nav-Links größer für Touch */
    nav ul li a.side {
        font-size: 1.3em;
    }

    /* Main: Volle Breite, links Platz für nav-toggle (2rem) */
    main {
        position: relative;
        left: 0 !important;
        width: calc(100% - 2rem) !important;
        margin-left: 2rem !important;
        top: auto;
        right: auto;
        bottom: auto;
        min-height: calc(100vh - 6em);
        overflow-x: hidden;
    }

    /* Untermenü: Horizontal scrollbar bei Bedarf */
    ul.untermenu {
        width: calc(100% - 8px) !important;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
    }

    /* Formulare: Labels und Inputs gestackt (statt nebeneinander) */
    label {
        width: 100% !important;
        float: none;
        clear: none;
        margin-bottom: 0.2em;
    }

    label.lang {
        width: 100% !important;
    }

    input, button.popup, textarea, select {
        width: 100% !important;
        float: none;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    /* Buttons: Volle Breite auf Mobile */
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        width: 100% !important;
        margin: 0.5em 0;
    }

    /* Checkbox und Radio: Inline behalten */
    input[type="checkbox"],
    input[type="radio"] {
        width: auto !important;
        margin-right: 0.5em;
    }

    /* Tabellen: Horizontal scrollbar auf Mobile */
    table.tb2color,
    table.tablefull {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        min-width: 100%;
    }

    /* Tabellen-Header fixieren für bessere Orientierung */
    table.tb2color th,
    table.tablefull th {
        white-space: nowrap;
        position: sticky;
        top: 0;
        background: var(--farbehaupt);
    }

    /* Zahlen-Spalten nicht umbrechen */
    table.tb2color td.zahl,
    table.tablefull td.zahl,
    table.tb2color td:last-child,
    table.tablefull td:last-child {
        white-space: nowrap;
    }

    table.tb2color {
        font-size: 95%;
    }

    /* Cellmenu: Auf Mobile anpassen */
    div.cellmenu {
        position: absolute;
        min-width: 200px;
        max-width: 90vw;
        white-space: nowrap;
        padding: 0.5em;
    }

    div.cellmenu ul {
        padding: 0;
        margin: 0;
    }

    div.cellmenu ul li {
        padding: 0;
        margin: 0;
    }

    div.cellmenu ul li a {
        display: block;
        font-size: 1.2em;
        padding: 0.8em 1em;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    div.cellmenu ul li:last-child a {
        border-bottom: none;
    }

    td.cellmenu {
        position: relative;
        overflow: visible;
    }

    /* Footer: Kompakter auf Mobile */
    footer {
        font-size: 0.85em;
    }

    footer .status {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3em;
        justify-content: center;
    }

    /* Login-Popup: Responsive auf Mobile */
    #login {
        z-index: 1500 !important; /* Über allen anderen Elementen */
    }

    #login .rahmenpopup {
        width: inherit !important;
        max-width: 400px;
        left: 50% !important;
        top: 40% !important;
        transform: translate(-50%, -50%);
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding: 20px;
    }

    #login label {
        width: 100% !important;
        text-align: left;
        margin-bottom: 0.3em;
        font-size: 1.5rem !important;
    }

    #login input[type=text],
    #login input[type=password] {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important; /* Verhindert Zoom auf iOS */
    }

    #login input[type=submit] {
        width: 100% !important;
        padding: 14px !important;
        font-size: 1.3rem !important;
        margin-top: 1rem !important;
        height: inherit !important;
        margin-left: inherit !important;
    }

    #login p {
        width: 100%;
        float: none;
    }

    /* #popup-Mobile-Styles wurden nach system/popup.css ausgelagert (v3.11) */
}
html{
    overflow: hidden;
}
#body100{
    display: block;
    height:-webkit-fill-available;
}
h1{
    /* float: left; - entfernt für Flexbox-Umstellung */
    /* clear:left; */
    width: calc(100% - 0.1875em - 0.1875em);
    font-size: 1.3em;
    font-weight: 700;
    color:black;
    margin:0.1875em;


}

ul.untermenu + h1, ul.untermenu + h2, ul.untermenu + div, ul.untermenu + table, ul.untermenu + form {
  margin-top: 1.65em!important;
}
h2{
    /* float: left; - entfernt für Flexbox-Umstellung */
    /* clear:left; */
    width: calc(100% - 0.1875em - 0.1875em);
    font-size:1.113em;
    font-weight: 100;
    color:black;
    margin:0.1875em;
    background-color: rgba(122, 42, 109, 0.5);
}
/* Flexbox-Klasse für Links/Rechts-Ausrichtung in Überschriften */
h2.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h3{
    /* float: left; - entfernt für Flexbox-Umstellung */
    /* clear:left; */
    width: 100%;
    font-size:1.125em;
    font-weight: 700;
    color:black;
    margin:0.18em;


    
}
p{
    /* float:left; - entfernt für Flexbox-Umstellung */
}

p.zusatzinfo{
    margin-top:0;
    margin-left:3px;
    line-height: 1em;
}
p.listmenu{
  float:inherit;
  margin: 0;
}


table{
  /* float:left; - entfernt für Flexbox-Umstellung */
  /* clear:left; */
}
ul{

    margin:0px;
    padding: 0px;
}
a:link{
    text-decoration:none;



}
a:visited{
  color: blue;

}
a.icons{
  color: inherit;

}

a i{ /*\\font awaysome abstand für schöneres bild*/
    margin: 1px;
    margin-right: 4px;
}

/* testweise deaktiviert 30.12.2025
div{
    float: left;
}
*/
div.absatz{
    width:100%;
}
div.infotext{
    /* float:left; - entfernt für Flexbox-Umstellung */
    /* clear:left; */
    /* margin:0.1875em; */
    margin-bottom: 1em;
    margin-top: 1em;
   background-color: rgb(236, 236, 236);
   color: #000;
   word-wrap: break-word;

}
/* Erfolg-Meldungen (grün) */
div.imeldung, #imeldung2 {
    /* float: left; - auskommentiert 01.01.2026 */
    /* clear: left; */
    /* width: 90%; */
    /* margin: 1em 0.1875em; */
    background: lightgreen;
}

/* Fehler-Meldungen (rot) */
div.fmeldung, #fmeldung2 {
    /* float: left; - auskommentiert 01.01.2026 */
    /* clear: left; */
    /* width: 90%; */
    /* margin: 1em 0.1875em; */
    background: rgb(207, 84, 71);
}

/* Toast-Meldungen (selbstauflösend, oben rechts gestapelt) - v3.13 */
#toast-container {
    position: fixed;
    top: 1em;
    right: 1em;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    pointer-events: none;
}
.toast-meldung {
    min-width: 250px;
    max-width: 480px;
    padding: 0.7em 1.1em;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    pointer-events: auto;
    cursor: pointer;
    white-space: pre-line;
}
.toast-meldung.toast-hiding {
    opacity: 0;
    transform: translateX(20px);
}
div.textfluss{
  padding-left: 1em;
  clear: both;
  float: none;
  display: block;
  width: 100%;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}
.infowichtig{
  background-color: red;
  color:white;
}
hr{
    /* float:left; - auskommentiert 01.01.2026 */
    /* clear: left; */
    width: 100%;
}
/*********************************************************************************
Login
*********************************************************************************/

/* width */
::-webkit-scrollbar {
  width: 8px;
}



/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--farberand);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000;
}

/*********************************************************************************
Login
*********************************************************************************/
#login {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.9);
    z-index:600;

}
#login .rahmenpopup{
    position: absolute;
    background: #A06897;
    border: #8FA639 solid 2px;
    top: 50%;
    left: 50%;
    width: 500px;
    margin-top: -100px;
    margin-left: -250px;
    padding: 15px;
    /* Flexbox statt Float */
    display: flex;
    flex-direction: column;
}

#login .rahmenpopup form {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

#login p {
    width: 100%;
    padding: 5px;
    margin: 3px 0;
    background-color: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
}

#login label {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 1.1rem;
    font-weight: bold;
}

#login input[type=text],
#login input[type=password] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    margin: 0;
}
/* #popup-Styling wurde nach system/popup.css ausgelagert (v3.11, Popup-Modernisierung) */
div.popupcontainer{
  position: relative;
  width:calc(100% - 0.1875em - 0.1875em);
  background-color:#d1d9ff;
  color:black;
  margin: 0.1875em;
}
/****************************************************************************************************************************************
On Tob bar
******************************************************************************************************************************************/

#menubar{
    position: fixed;
    top:0em;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 30% 40%, var(--farbefooter), var(--farbefootergradient));
    box-shadow: inset 0px -5px 5px 0px #7B2A6E;
    text-align:center;
    width: 100%;
    height: 2.5em;
    z-index: 4;
}
#menubar ul{
    display: flex;
    flex: 1;            /* Restlichen Platz einnehmen */
    flex-wrap: nowrap;  /* Immer einzeilig bleiben */
    justify-content: flex-start;
    align-items: center;
    gap: 0.3em;
    overflow: hidden;   /* Überlauf verstecken statt umbrechen */
}
#menubar ul li{
    display: inline-flex;
    margin: 0em 0.188em 0em 0.188em;
    flex-shrink: 1;     /* Erlaubt Verkleinerung bei Platzmangel */
    min-width: 0;       /* Ermöglicht Schrumpfen unter natürliche Breite */
}
#menubar ul li a{
  color: white;
  font-size: clamp(0.7em, 1.35vw, 1.25em);  /* Responsive Schriftgröße */
  font-weight: bold;
  line-height: 2em;
  padding: 0;
  margin-left: clamp(0.2rem, 1vw, 1rem);   /* Responsive Abstand */
  display: inline-block;
  transition: background-color 0.5s;
  box-shadow: inset 0px -5px 5px 0px rgba(0, 0, 0, 0);
  white-space: nowrap; /* Text nicht umbrechen */
  overflow: hidden;
  text-overflow: ellipsis; /* ... bei zu langem Text */
}
#menubar ul li a.aktiviert {
  background: linear-gradient(to bottom, #560349 70%, rgba(86, 3, 73, 0.5) 85%, transparent);
}


#menubar ul li a:hover{
    background-color: #7B2A6E;
}

/* Responsive Anpassungen für schmale Fenster */
@media (max-width: 1200px) {

  #nummernkreisauswahl {
    width: 140px; 
  }
  #nummernkreisauswahl select {
    width: 180px;
    font-size: 15px;
    margin: 9px;
  }
  .select-wrapper::before {
    font-size: 13px;
    right: 13px;
    top: 12px;
  }
}

@media (max-width: 1000px) {


  #nummernkreisauswahl {
    width: 120px;
  }
  #nummernkreisauswahl select {
    width: 160px;
    font-size: 14px;
    margin: 8px;
    padding-left: 8px;
  }
  .select-wrapper::before {
    font-size: 12px;
    right: 12px;
    top: 11px;
  }
}

/* 850px Media Query entfernt - jetzt Teil des Haupt-Mobile-Breakpoints (850px) */






li.info{
    font-size: 0.71em;
    color: rgb(42, 196, 58);

}
/*haubtbereich GESAMT - Flexbox Layout (Version 3.0)*/
#gesamt{
    margin-top:2.5em;
    margin-bottom:1.5em;
    display: flex;
    flex-direction: row;
    min-height: calc(100vh - 4em);
}

#nummernkreisauswahl{
  width:200px;
}
#nummernkreisauswahl select{
  -moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
-moz-padding-start: calc(10px - 3px);
  margin:10px;
  width: 200px;
  height: 20px;
  padding-left: 10px;
  background: #395A71;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
  border-radius: 3px;
  outline: none;
}

.select-wrapper {
  /* ... */
  position: relative;
}

.select-wrapper::before {
  color: #fff;
  font-size: 14px;
  pointer-events: none;
  position: absolute;
  right: 15px;
  top: 13px;
}
select {
  /* width: calc(50% + 5px); */
  margin: 0 3px;
  cursor: pointer;
}
/********************************************************************************************************************************
Seitenmenü Navigation
**********************************************************************************************************************************/
nav {
  position: fixed;
  height: 100%;
  width: var(--nav-breite);
  background: radial-gradient(circle at 30% 40%, #627E91, #85a1b4);
  box-shadow: inset 2px 0px 3px 0px #7B2A6E;
}

nav ul{
    display: flex;
    flex-direction: column;
}
nav ul li{
    display: flex;
    flex-wrap: wrap;
    margin: 0em 0.188em 0em 0.188em;
}
/* Submenü-Liste (Unterpunkte) als eigene Zeile anzeigen */
nav ul li ul{
    width: 100%;
    padding-left: 0;
    margin: 0;
}
nav ul li ul li{
    margin: 0;
}
nav ul li ul li a{
    font-size: 0.85em;
    line-height: 1.6em;
    padding: 0.2em 0.5em;
}
nav ul li a,nav ul li a:visited{
    color:  white;
    font-size: 1.25em;
    font-weight:  normal;
    line-height: 2em;
    padding: 0.5em;
    transition: background-color 0.5s;
    width:100%;

}
nav ul li a:hover{
  background-color: #7B2A6E;

}

nav ul li a.side{
    font-size: 1em;
    /* float: left; - auskommentiert 01.01.2026 */
    /* clear: left; */
}
main{
  position:fixed;
  left:var(--nav-breite);
  top:2.5rem;
  right:0;
  bottom:1.5em;
  overflow: auto;
  overflow-y: scroll;




  background: white;
  margin:0px;




}
/********************************************************************************************************************************
Untermenü Navigation
**********************************************************************************************************************************/

ul.untermenu{
  position:fixed;
  width: calc(100% - var(--nav-breite) - 8px); /* Abzug menüleiste links und scrollbalken rechts*/
  height:1.65em;
  background:#627E91;
  display:block;
}

h2.untermenu{
  position: relative;
  display:block;
}

h2.untermenu li, ul.untermenu li{
  display: inline;
  margin: 0em 0.188em 0em 0.188em;
}

ul.untermenu li a{
  color:  white;
  font-size: 0.75em;
  font-weight: bold;
  line-height: 2em;
  padding: 0.5em;
  transition: background-color 0.5s;
}


ul.untermenu li a:hover{

    background:#7B2A6E;
}

ul.untermenu li select,ul.untermenu li input, h2.untermenu  select, h2.untermenu input{

  width:auto;
  float: none;
}

ul.untermenu li div.filtercontainer{
  float:none;
}

ul.untermenu li div.filtercontainer label{
    display: block;
    margin-bottom: 5px;
    white-space: nowrap;
}
ul.untermenu li input{
  height: 16px;
}

/* Trennlinie im Untermenü */
ul.untermenu li.menu-trenner {
  color: rgba(255,255,255,0.4);
  font-weight: normal;
  padding: 0 0.3em;
  cursor: default;
  user-select: none;
}

/****************************************************************************************************************************************
Untermenü Version 2 - Flexbox Layout (für Verkaufsmodule)
******************************************************************************************************************************************/

/* Container für das gesamte Untermenü */
.untermenu-v2 {
  position: sticky;
  top: 0;
  background: var(--farbehaupt);
  padding: 0.1em 0.1em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1em 0.3em;
  z-index: 4;
  min-height: 1.65em;
}

/* Aktionen (Links) */
.untermenu-v2 .actions {
  display: flex;
  gap: 0.3em;
  flex-shrink: 0;
}

.untermenu-v2 .actions a {
  color: white;
  font-size: 0.8em;
  font-weight: bold;
  padding: 0.3em 0.3em;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  white-space: nowrap;
  transition: background-color 0.3s;
}

.untermenu-v2 .actions a:hover {
  background: var(--farberand);
}

/* Filter-Formular */
.untermenu-v2 .filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1em 0.1em;
  flex: 1;
}

/* Einzelne Filter-Gruppe (Label + Input/Select) */
.untermenu-v2 .filter-group {
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.untermenu-v2 .filter-group label {
  color: white;
  font-size: 0.75em;
  font-weight: normal;
  white-space: nowrap;
  width: auto !important;
  float: none;
}

.untermenu-v2 .filter-group select,
.untermenu-v2 .filter-group input[type="date"] {
  font-size: 0.75em;
  padding: 0.1em 0.1em;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 2px;
  background: white;
  width: auto;
  float: none;
  margin: 0;
}

.untermenu-v2 .filter-group select {
  min-width: 4em;
  max-width: 10em;
}

.untermenu-v2 .filter-group input[type="date"] {
  width: 8.5em;
}

/* Checkbox-Filter */
.untermenu-v2 .filter-group.checkbox {
  gap: 0.2em;
}

.untermenu-v2 .filter-group.checkbox input[type="checkbox"] {
  width: 1em;
  height: 1em;
  margin: 0;
}

.untermenu-v2 .filter-group.checkbox label {
  cursor: pointer;
}

/* Trennlinie zwischen Aktionen und Filter */
.untermenu-v2 .separator {
  width: 1px;
  height: 1.2em;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

/* Datumfilter zurücksetzen Link */
.untermenu-v2 .filter-reset {
  color: rgba(255,255,255,0.7);
  font-size: 0.7em;
  text-decoration: underline;
}

.untermenu-v2 .filter-reset:hover {
  color: white;
}

/* nav-collapsed: keine Anpassung nötig bei sticky */

/* Mobile Anpassungen */
@media (max-width: 850px) {
  .untermenu-v2 {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.5em;
    gap: 0.4em 0.6em;
  }

  .untermenu-v2 .actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .untermenu-v2 .separator {
    display: none;
  }

  .untermenu-v2 .filter-form {
    width: 100%;
  }

  .untermenu-v2 .filter-group {
    flex: 1 1 auto;
    min-width: 45%;
  }

  .untermenu-v2 .filter-group select {
    flex: 1;
    max-width: none;
  }

  .untermenu-v2 .filter-group input[type="date"] {
    flex: 1;
    min-width: 0;
  }
}

/* Abstand nach untermenu-v2 für nachfolgende Elemente */
.untermenu-v2 + h1,
.untermenu-v2 + h2,
.untermenu-v2 + div,
.untermenu-v2 + table,
.untermenu-v2 + form {
  margin-top: 0.5em !important;
}

/*********************************************************************************
Start-Seite Styles (Version 3.1)
*********************************************************************************/

/* Zentrierter Container für Start-Seite Boxen */
.start-box {
  width: 90%;
  margin: 0 auto 1em auto;
}

/* Heutige Termine: Desktop/Mobil Positionierung */
.start-termine-mobil {
  display: none;
}
.start-termine-desktop {
  display: block;
}

@media (max-width: 850px) {
  .start-termine-mobil {
    display: block;
  }
  .start-termine-desktop {
    display: none;
  }
}

/* Tooltip-Container */
.tooltip-refresh {
  text-align: right;
  margin-top: 0.5em;
  padding-right: 0.5em;
}

.tooltip-refresh a {
  font-size: 0.85em;
  text-decoration: none;
  color: var(--farberand);
  cursor: pointer;
}

.tooltip-refresh a:hover {
  text-decoration: underline;
}

/* Kleine Link-Styles (z.B. "(Alle Tooltips)") */
.link-small {
  font-size: 0.85em;
  font-weight: normal;
}

/* Offene Rechnungen: Statistik-Zeile als Flexbox */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
}

.stats-row p {
  float: none;
  margin: 0.3em 0;
  flex: 1 1 45%;
  min-width: 200px;
}

/* Scrollbarer Container (max 10 Zeilen) */
.scroll-container {
  max-height: 10rem;
  overflow-y: auto;
  width: 100%;
}

/* Links auf farbigem Hintergrund (z.B. fmeldung) */
.fmeldung a {
  color: #fff;
  text-decoration: underline;
}

.fmeldung h3 {
  margin-top: 0;
}

/* Warnung-Text rot */
.text-warning {
  color: #c00;
  font-weight: bold;
}

/* Tabellenzellen-Ausrichtung */
td.text-right, th.text-right {
  text-align: right;
}

td.text-center, th.text-center {
  text-align: center;
}

td.text-bold {
  font-weight: bold;
}

footer{
    bottom:0px;
    position: fixed;
    display:block;
    Background:var(--farbefooter);
    text-align:center;
    width: 100%;
    height: 1.5em;
    color: white;
}
footer .signatur{
    margin: 0.5em;
    font-size: 0.7em;
    position: relative;
    float: right;
    font-weight: bold;
    color: white;

}
footer .status{
    margin: 0.5em;
    font-size: 0.7em;
    position: relative;
    /* float: left; - auskommentiert 01.01.2026 */
    font-weight: bold;
    color: white;

}
footer a,footer a:visited{
    color: white;
}
footer a:hover{
    color: blue;
}


/*******************************************************************************************************************************************
Formular Grundeinstellung
*******************************************************************************************************************************************/
form{

}

/* ========== MODERNE FORMULAR-LAYOUTS (Float-frei) ========== */

/* Option A: Flexbox-Container - für flexible Layouts */
.form-flex {
  display: flex !important;
  flex-wrap: wrap;
  gap: 3px;
}
.form-flex label,
.form-flex input,
.form-flex select,
.form-flex textarea,
.form-flex button {
  float: none !important;
  clear: none !important;
}
.form-flex label {
  width: 20% !important;
  flex-shrink: 0;
}
.form-flex input,
.form-flex select,
.form-flex textarea {
  width: 50% !important;
  flex-grow: 0;
}
.form-flex input[type="submit"],
.form-flex input[type="button"],
.form-flex button {
  width: auto !important;
}

/* Option B: Grid-Layout - für klassisches 2-Spalten Formular */
.form-grid {
  display: grid !important;
  grid-template-columns: 20% 50%;
  gap: 3px;
  align-items: center;
}
.form-grid label,
.form-grid input,
.form-grid select,
.form-grid textarea {
  float: none !important;
  clear: none !important;
  width: 100% !important;
  margin: 0 !important;
}
.form-grid input[type="submit"],
.form-grid input[type="button"],
.form-grid button {
  grid-column: 2;
  width: auto !important;
  justify-self: start;
}
.form-grid textarea {
  height: 5.5em;
}

/* Volle Breite Elemente im Grid (z.B. für Buttons oder breite Inputs) */
.form-grid .full-width {
  grid-column: 1 / -1;
}

/* Flexbox für h2 mit Links/Rechts-Elementen - Float-Override */
h2.flex-between,
h2.flex-between * {
  float: none !important;
  clear: none !important;
}
h2.flex-between {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

/* Kunde-Auswahl Container (Angebot/Auftrag/Rechnung erstellen) */
.kunde-auswahl-container {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin-bottom: 15px;
}
.kunde-auswahl-container > div {
  flex: 1;
}
.einmal-kunde-toggle {
  padding: 10px;
  background: #f5f5f5;
  border-radius: 5px;
}
.einmal-kunde-toggle label {
  font-weight: bold;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.einmal-kunde-toggle input[type="checkbox"] {
  width: auto;
  margin: 0;
}
.einmal-kunde-toggle .hinweis {
  margin-left: 10px;
  color: #666;
  font-size: 0.9em;
}
.btn-konvertieren {
  margin-left: 15px;
  padding: 5px 10px;
  background: #0066cc;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  width: auto !important;
}
.btn-konvertieren:hover {
  background: #0055aa;
}

/* Kopf-Formular (Angebot/Auftrag/Rechnung) */
.form-kopf {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 0px;
  align-items: center;
}
.form-kopf .form-row {
  display: contents;
}
/* Standard form-row: Label Spalte 1, Input/Select Spalte 2 */
.form-kopf .form-row > label:first-child { grid-column: 1; }
.form-kopf .form-row > input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-kopf .form-row > select {
  grid-column: 2;
}
/* Doppel-Zeile: Label+Input | Label+Input in 4 Spalten */
.form-kopf .form-row-double {
  display: contents;
}
.form-kopf .form-row-double > :nth-child(1) { grid-column: 1; }
.form-kopf .form-row-double > :nth-child(2) { grid-column: 2; }
.form-kopf .form-row-double > :nth-child(3) { grid-column: 3; }
.form-kopf .form-row-double > :nth-child(4) { grid-column: 4; }
@media (max-width: 900px) {
  .form-kopf { grid-template-columns: auto 1fr; }
  .form-kopf .form-row-double > :nth-child(3),
  .form-kopf .form-row-double > :nth-child(4) { grid-column: auto; }
}
.form-kopf .projekt-row {
  display: contents;
}
.form-kopf .projekt-label {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.form-kopf .projekt-label input {
  width: 100px;
  text-align: right;
}
.form-kopf .projekt-row > input:last-of-type {
  grid-column: 2 / -1;
}
.form-kopf label {
  width: auto;
  text-align: right;
}
.form-kopf input[type="text"],
.form-kopf select {
  width: inherit;
  margin: 0 3px;
}
.form-kopf textarea {
  width: inherit;
}
/* Kommentar-Formulare: 2-spaltig nebeneinander */
.form-kommentare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-kommentare textarea {
  width: calc(100% - 6px);
  box-sizing: border-box;
}
.form-kopf input[type="submit"] {
  grid-column: 1 / -1;
  /* width: auto; */
  justify-self: center;
}
.form-kopf input[type="checkbox"],
.form-kopf input[type="radio"] {
  grid-column: 2;
  justify-self: start;
  margin-left: 3px;
}

/* ========== ENDE MODERNE FORMULAR-LAYOUTS ========== */

label{
  font-size: 90%;
  /* float:left; - auskommentiert 01.01.2026 */
  /* clear:left; */
  /* width:20%; - auskommentiert 07.01.2026, nicht mehr nötig */
  margin:3px;
  line-height: 1.8em;
}
label.lang{
  width:40%;
}
th > label{
  width:100%;
}
label a{
  text-decoration: underline;
  font-weight: bold;
}
input, button.popup {
  /* width: 50%; */
  /* float:left; - auskommentiert 01.01.2026 */
  margin: 0px 3px;
}

button:disabled, button [disabled]{
  background-color: #cccccc!important;
  cursor: not-allowed!important;
}

input.ischanged{
  font-style: italic;
  color:darkred;
}

input.provprozent, select.provprozent{
  width:60px;
}

button.vor, button.next{
  width: 30px !important;
}
button.vor{
  /* float:left; - auskommentiert 01.01.2026 */
  margin-left: inherit!important;
}
button.next{
  /* float:right; - auskommentiert 01.01.2026 */
  margin-right: inherit !important;
}

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

input[type=button], input[type=submit], input[type=reset], button[type=submit].popup, button.standart, button.popup {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  -moz-padding-start: calc(10px - 3px);
  height: 25px;
  background: #395A71;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
  border-radius: 3px;
  outline: none;
  /* Flexbox-kompatible Zentrierung */
  width: 80%;
  margin: 0 auto;
  margin-top: 0.7rem;
  display: block;
}
input[type=button]:disabled, input[type=submit]:disabled, input[type=reset]:disabled{
  background: lightgray;
}
input.center{
  width: 90%;
  margin-left:5%;
  margin-right:5%;
}
input.kurz{
  width:10%;
}
input.bezeichnung{
  width:calc(20% - 1em - 11px);
  clear: left;
}
input.infield{
  margin:0px;
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  text-align: right;
}
input.infieldsichtbar{
  margin:0px;
  border: none;

  padding: 0;
  width: 100%;
  text-align: right;
}
div.nachbezeichnungdoppelpunkt{
  height: 1em;
  width:1em;
}
textarea{
  width:50%;
  /* float:left; - auskommentiert 01.01.2026 */
  margin:3px;
  height: 5.5em;
}
select{
  width:calc(50% + 5px);
  /* float:left; - auskommentiert 01.01.2026 */
  margin:3px;

}
button.getarntalslink{
  width:auto;
  background: none;
  border: none;
  font-size: 12pt;
  font-weight: 100;

}
select.inlinkliste{
  width:60px;
  float:none;
}
button{
  cursor:pointer;

}
div.button-container{
  width: 100%;
  display: flex;
}
div.button-container form{
    display: contents;  
}
div.button-container button, div.button-container button.popup {
  margin: 0 5px;
}

/* zum löschen vorgesehen 09.12.2024
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    //display: none;
    //-webkit-appearance: none;
    width: 15px;
    padding: 0px;
    margin: 0px;
    //margin-top: 10px;
}*/

/*Radias in Zeile*/

fieldset.radiobuttonsinzeile{
  width: 50%;
  /* float: left; - auskommentiert 01.01.2026 */
  margin: 3px;
}
fieldset.radiobuttonsinzeile label{
  width: fit-content;
    /* float: left; - auskommentiert 01.01.2026 */
    clear: inherit;
    line-height: inherit;
    padding: 0;
}
fieldset.radiobuttonsinzeile input{

    width: fit-content;
    clear: inherit;
    /* float: left; - auskommentiert 01.01.2026 */

}

/*Filterforumular*/

.filter{
    background-color: rgb(202, 235, 210);
    width: 100%;
    /* float:left; - auskommentiert 01.01.2026 */
}
.filter label{
  width:6em;
  clear:none;
}
.filter input{
  width:12em;
}

/* Filter-Leiste (Flexbox-basiert) */
.filter-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 15px;
  padding: 10px;
  background-color: var(--farbehaupt);
  margin-bottom: 10px;
  border-radius: 3px;
}

.filter-gruppe {
  display: flex;
  align-items: center;
  gap: 5px;
}

.filter-gruppe label {
  color: white;
  font-size: 0.85em;
  font-weight: normal;
  white-space: nowrap;
  width: auto;
  float: none;
}

.filter-gruppe select,
.filter-gruppe input[type="text"],
.filter-gruppe input[type="date"],
.filter-gruppe input[type="number"] {
  font-size: 0.85em;
  padding: 3px 5px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 3px;
  background: white;
  width: auto;
}

.filter-gruppe a {
  color: white;
  text-decoration: underline;
  font-size: 0.85em;
}

.filter-gruppe a:hover {
  color: #c5d2de;
}

/* Content Section */
.content-section {
  width: 100%;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .filter-leiste {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-gruppe {
    width: 100%;
  }

  .filter-gruppe select {
    flex: 1;
  }
}


/*******************************************************************************************************************************************
Tabellen formate
*******************************************************************************************************************************************/
table{
  border: 1px solid black;
  border-collapse: collapse;
}


table.tb2color tr:nth-child(even) {
   background-color: #d1d9ff;
}
table.tb2color tr:nth-child(odd) {
   background-color: #b8b8b8;
}
table.tb2color {
   border-spacing: 0px;
   margin: 5px;
   font-size: 75%;
   color: black;
   width: 100%;
   border-collapse: collapse;
}
table.tb2color th,
table.tb2color td {
   border: 1px solid #999;
   /* padding: 4px 6px; */
}
table.tb2color tr:hover {
  background-color: rgba(122, 42, 109, 0.5);
}
table.tb2color tr.active {
  background-color: rgba(122, 42, 109, 0.6);
}

table.tablefull{
  width:calc(100% - 10px);
}
td.w{
  background-color: white;

}

table.tb2color thead tr  {
  background-color: rgba(122, 42, 109, 0.6)!important;
}

/* Positions-basierte Färbung (für Rechnungs-Positionen mit Rabatten) */
table.pos-grouping {
  border-spacing: 0px;
  margin: 5px;
  font-size: 80%;
  color: black;
}

table.pos-grouping tr.pos-even {
  background-color: #d1d9ff;
}

table.pos-grouping tr.pos-odd {
  background-color: #b8b8b8;
}

table.pos-grouping tr:hover {
  background-color: #e0e0e0 !important;
}

table.pos-grouping thead tr {
  background-color: rgba(122, 42, 109, 0.6) !important;
}

/* Zahlungsverzug-Markierungen für Rechnungsübersicht */
.verzug-kulanz {
  background-color: #ffeb3b; /* GELB - Frist überschritten, noch in Kulanzzeit */
}

.verzug-ueberfaellig {
  background-color: #f76f6f; /* ROT - Frist + Kulanz überschritten */
}

/*********************************************************************************************
div  Tabellen
**********************************************************************************************/

div.tabellefirst, div.tabellelast, div.tabellemittel{
  width:250px;
  text-align: right;
  border:1px solid black;
  background-color: rgba(255, 255, 255, 0.2);
  margin-right: -1px;
  margin-bottom: -1px;
  padding: 2px;
}
div.tabellekurz{
  width:75px;
}
div.nachlabelghost{
  margin-left: calc(20% + 9px);
}
div.tabellefirst
{
  clear: both;
}

/* Zwei-Spalten-Layout für Popups mit Zusatzfeldern */
div.linkshalbiert{
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

div.rechtshalbiert{
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-top: 15px;
  border-top: 1px solid #ccc;
  margin-top: 10px;
}

/* form-row innerhalb der halbierten Bereiche */
div.linkshalbiert .form-row,
div.rechtshalbiert .form-row {
  display: contents;
}

@media (min-width: 900px) {
  /* Bei breitem Bildschirm: nebeneinander */
  .form-kopf:has(.linkshalbiert) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .form-kopf > .linkshalbiert,
  .form-kopf > .rechtshalbiert {
    grid-column: auto;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
}
/*  Taberlle neu */
div.table{
  width:100%;
  background-color: lightgray;
  display:  table;
  margin-top: 1px;
  margin-bottom: 1px;

}
div.table .tr{
  display: table-row;
  width:100%;

}
div.table .tr .td,div.table .tr .th{
  display: table-column;
  /* float:left; - auskommentiert 01.01.2026 */
  width: auto;
  min-width: 120px;
  overflow: hidden;

}
div.table .tr .td  label,div.table .tr .th label{

  width: 100%;

}
div.table .tr .td  input,div.table .tr .th input, div.table .tr .td  select, div.table .tr .th select{
  width: 95%;
}
div.table .tr .th,div.table .th{
background-color:gray;
color:white;
}


/*******************************************************************************************************************************************
tooltip
*******************************************************************************************************************************************/


/* Tooltip container */
.tooltip {
    position: relative;
    /*display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 420px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
/*******************************************************************************************************************************************
Tabmenü allgemein
*******************************************************************************************************************************************/
article.tabmenu{

}
div.tabnav{
  position: fixed;
  width: calc(100% - var(--nav-breite) - 8px);
  z-index: 1000;
  background: white;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* Wrap erlauben für article */
  gap: 2px;
}
/* Dropdown für Mobile - standardmäßig versteckt */
div.tabnav select.tabnav-mobile {
  display: none;
}
article.tabmenu {
    height: 100%;
    flex: 0 0 100%; /* Volle Breite, neue Zeile erzwingen */
}
article.tabmenu section {
  position: absolute;
display: none;
width: calc(100%);
min-height: calc(100% - 2em);
top: 30px;
background-color: #c5d2de;
padding-top: 30px;
}
div.tabnav div.nav {
    top: 0px;
    flex: 1 1 auto; /* Flexible Breite, schrumpft wenn nötig */
    min-width: 50px; /* Minimum kleiner */
    max-width: 160px; /* Maximum */
    height: 29px;
    font-family: Verdana;
    font-size: clamp(9px, 1vw, 14px); /* Responsive Schriftgröße */
    margin: 0;
    background-color: #194b7d;
    border-radius: 15px 15px 0 0;
    border: solid #ffffff;
    border-width: 1px 1px 0 0;
    z-index: 0;
    overflow: hidden; /* Text abschneiden wenn zu lang */
}


div.tabnav div a {
    display: block;
    margin: 5px 0 0 0;
    padding: 0 5px;
    text-align: center;
    text-decoration: none;
    color: #c5d2de;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ... bei zu langem Text */
}

/* Mobile: Dropdown statt Tabs */
@media (max-width: 850px) {
  div.tabnav div.nav {
    display: none; /* Tabs verstecken */
  }
  div.tabnav select.tabnav-mobile {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: none;
    background-color: #194b7d;
    color: white;
    border-radius: 5px;
    cursor: pointer;
  }
  div.tabnav select.tabnav-mobile option {
    background-color: white;
    color: #194b7d;
  }
}
div.tabnav div.nav.active {
    background-color: #c5d2de;
}
div.tabnav div.nav.active a {
    color: #194b7d;
    font-weight: bold;
}
article.tabmenu section:target {
    color: #000000;
    background-color: #c5d2de;
    z-index: 100;
    display: block;
}
article.tabmenu section:target:before {
    color: #000000;
    background-color: #c5d2de;
    z-index: 100;
}

article.tabmenu section:target h2 a {
    color: #194b7d;
}
article.tabmenu section{

}

/*******************************************************************************************************************************************
Tabmenü automatenabwickeln
*******************************************************************************************************************************************/

article.infobox section {
    position:absolute;
    display: block;
    width: 100%;
    min-height: calc(100% - 7em);


    top:7em;
    background-color: #c5d2de;
}
article.infobox section h2 {
    position: absolute;
    left: 0;
    top: -30px;
    width: 254px;
    height: 29px;
    font-family: Verdana;
    font-size: 15px;
    margin: 0;
    background-color: #194b7d;
    border-radius: 15px 15px 0 0;
    border: solid #ffffff;
    border-width: 1px 1px 0 0;
    z-index: 0;
}
article.infobox section:nth-child(2) h2 {
    left: 250px;
    z-index: 1;
}

article.infobox section:nth-child(3) h2 {
    left: 300px;
    z-index: 2;
}
article.infobox section h2 a {
    display: block;
    margin: 5px 0 0 0;
    text-align: center;
    text-decoration: none;
    color: #c5d2de;
}
article.infobox section:target, article.infobox section:target h2 {
    color: #000000;
    background-color: #c5d2de;
    z-index: 1;
}

article.infobox section:target h2 a {
    color: #194b7d;
}
/*******************************************************************************************************************************************
Zellenmenü
*******************************************************************************************************************************************/
td.cellmenu p{
  margin: 0px;
  padding: 0px;
}
div.cellmenu{
  position:absolute;
  margin-top: 0px;
  border: 2px black solid;
  background:lightgray;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;


}
td.cellmenu:hover div.cellmenu{
  visibility: visible;
  opacity: 1;
}
div.cellmenu ul li{
  list-style: none;
  margin-top: 2px;
  margin-bottom: 2px;

}
div.cellmenu ul li a:hover{
  background: green;

}

/*******************************************************************************************************************************************
Diverse
*******************************************************************************************************************************************/
.info, div.adresse{
  margin-right:4em;
  margin-left:4em;
  width: calc(100% - 8em);
}
.boxis{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 2px solid var(--farbehaupt);
}
.leftbox{
  flex: 1 1 300px;
  min-width: 250px;
  border-right: 2px solid var(--farbehaupt);
}
.rightbox{
  flex: 1 1 300px;
  min-width: 250px;
}

/* Responsive: Bei schmalen Bildschirmen untereinander */
@media (max-width: 700px) {
  .leftbox {
    border-right: none;
    border-bottom: 2px solid var(--farbehaupt);
  }
}

div.spacing{
  /* clear:left; - auskommentiert 01.01.2026 */
  /* float:left; - auskommentiert 01.01.2026 */
  position:relative;
  height: 2em;
  width: 100%;

}

/*******************************************************************************************************************************************
Liste standart start
*******************************************************************************************************************************************/
ul.start{
  /* float:left; - entfernt für Flexbox-Umstellung */
  width: 90%;
  margin: 0 auto;
  background:var(--farbehaupt);
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  box-sizing: border-box;
}
.start li{
  margin-left: 20px;
  /* clear: both; */
  display: list-item;
  width: calc(100% - 40px);
  box-sizing: border-box;
  margin-bottom: 5px;
  list-style: inherit;
}
.start ul{
  margin-left:25px;
  list-style: disc;
  width: 100%;
  clear: both;
  margin-top: 5px;
  margin-bottom: 10px;
  display: block;
}
/* Spezifische Regel für textfluss in Listen */
ul.start div.textfluss {
  clear: both;
  float: none;
  display: block;
  width: calc(100% - 1em);
  margin: 0.5em 0 0.75em 0;
  padding-left: 1em;
  line-height: 1.4;
}
ul.start li.aktuell{
  background-color: rgba(255, 255, 255, 0.2); /* Heller transparenter Hintergrund */
  transition: background-color 0.3s ease; /* Sanfter Übergang bei Änderungen */
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.1); /* Optional: Leichter Schatten nach innen */

}

/* Hervorgehobene Änderungen in Versionsliste (highlight: true) */
.start li.version-highlight,
#popup li.version-highlight {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
  border-left: 4px solid #ff9800;
  padding: 10px 15px;
  margin: 10px 0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.start li.version-highlight > strong,
#popup li.version-highlight > strong {
  font-size: 1.15em;
  color: #856404;
  display: block;
  margin-bottom: 5px;
}

.start li.version-highlight .highlight-icon,
#popup li.version-highlight .highlight-icon {
  margin-right: 8px;
  font-size: 1.2em;
}

/* Highlight-Badge vor dem Titel */
.highlight-badge {
  background: #ff9800;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.75em;
  font-weight: bold;
  margin-right: 10px;
  vertical-align: middle;
  text-transform: uppercase;
}

#popup li.version-highlight {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
  color: #333;
}

#popup li.version-highlight .textfluss {
  color: #555;
}

/* Dezenteres Highlight für ältere Versionen */
.start li.version-highlight-alt {
  border-left: 3px solid #d4a84a;
  padding: 6px 12px;
  margin: 6px 0;
  border-radius: 3px;
  background: rgba(255, 243, 205, 0.3);
}

.start li.version-highlight-alt > strong {
  color: #a07830;
  display: block;
  margin-bottom: 3px;
}

.start li.version-highlight-alt .highlight-icon {
  margin-right: 6px;
  opacity: 0.6;
}

/*******************************************************************************************************************************************
Tabellenzeile hervorheben (z.B. nach Sprung via URL-Parameter)
- row-highlight:         Primärtreffer (kräftiges Gelb)
- row-highlight-related: Verwandte Zeile, z.B. gleicher Datensatz-Bezug (dezenteres Hellgelb)
*******************************************************************************************************************************************/
tr.row-highlight > td,
tr.row-highlight {
  background: #fff3a0 !important;
}
tr.row-highlight-related > td,
tr.row-highlight-related {
  background: #fff9d6 !important;
}

/*******************************************************************************************************************************************
Kundenübersicht verkleinern/vergrößern
*******************************************************************************************************************************************/
div.listeverkleinervergroeßern{
  width:100%;
}
div.listeverkleinervergroeßern div.kurz{
  max-height: 80px; 
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  position: relative;
}

div.listeverkleinervergroeßern div.kurz:target{
  max-height: 3000px; /* Groß genug für alle Inhalte */
  transition: max-height 0.5s ease-in-out;
}

/* Gradient für bessere visuelle Anzeige am unteren Rand */
div.listeverkleinervergroeßern div.kurz::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(to bottom, transparent, rgba(180, 187, 193, 0.9));
  pointer-events: none;
}

div.listeverkleinervergroeßern div.kurz:target::after {
  display: none;
}

/* Stil für die Aus-/Einklapp-Links und Header */
div.listeverkleinervergroeßern h3 a {
  text-decoration: none;
  color: var(--farberand);
  padding: 5px 10px;
  display: inline-block;
  transition: background 0.2s;
}

div.listeverkleinervergroeßern h3.expandable {
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  transition: background 0.2s;
  background: rgba(122, 42, 109, 0.1);
  padding: 3px 8px 3px 30px;
}

div.listeverkleinervergroeßern h3.expandable:hover {
  background: rgba(122, 42, 109, 0.2);
}

/* Icon für Aus-/Einklappen direkt im h3 */
div.listeverkleinervergroeßern h3.expandable::before {
  content: "►";
  font-size: 0.9em;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s;
}

/* Icon für ausgeklappte Sektionen */
div.listeverkleinervergroeßern h3.expandable.open::before {
  transform: translateY(-50%) rotate(90deg);
}

/* Styling für Link in expandable header */
div.listeverkleinervergroeßern h3.expandable a {
  font-size: 0.85em;
  background: none;
  padding: 0;
  color: inherit;
}

div.listeverkleinervergroeßern h3.expandable a:hover {
  background: none;
  text-decoration: underline;
}

ul.artikelgruppen{
      clear: left;
    width: 96%;
    margin-left: 2%;


}
.artikelgruppen li{
  margin-left:20px;
  margin-top: 4px;
  background:var(--farbehaupt);
}

ul.artikelgruppen li ul{

    width: 96%;
    margin-left: 2%;


}
.artikelgruppen li  ul li{
  margin-left:20px;
  margin-top: 4px;
  background:var(--farbehaupt);
}


/*******************************************************************************************************************************************
Tabs mit radio-Buttons
*******************************************************************************************************************************************/
.tabbed figure {
   display: block;
   margin-left: 0;
   /* clear: both; */
   margin: 0;
}
div.tabbed{
  width: calc(100% - 0.1875em - 0.1875em);
  box-sizing: border-box;
  margin: 0.1875em;
}

.tabbed > input,
.tabbed figure > div { display: none; }

.tabbed figure>div {
  padding: 20px;
  width: 100%;
  background: var(--farbemenühalb);
  line-height: 1.5em;
  letter-spacing: 0.3px;
  box-sizing: border-box;
  /* Flexbox Layout für Tab-Inhalte */
  flex-wrap: wrap;
  align-items: center;
  /* gap: 10px 0; */
}

/* Flexbox Styling für Label/Input-Paare in Tabs */
.tabbed figure>div > label {
  flex: 0 0 200px;
  font-weight: bold;
  /* padding-right: 10px; */
}

.tabbed figure>div > input,
.tabbed figure>div > select,
.tabbed figure>div > textarea {
  flex: 1 1 calc(100% - 220px);
  min-width: 200px;
  max-width: calc(100% - 220px);
}

.tabbed figure>div > datalist,
.tabbed figure>div > .absatz,
.tabbed figure>div > hr {
  flex: 0 0 100%;
}

#tab1:checked ~ figure .tab1,
#tab2:checked ~ figure .tab2,
#tab3:checked ~ figure .tab3,
#tab4:checked ~ figure .tab4,
#tab5:checked ~ figure .tab5,
#tab6:checked ~ figure .tab6 { display: flex; }

.tabbed .tab-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  position: inherit;
  height: inherit;
  width: inherit;
  background: none;
}
.tabbed .tab-nav label {
   /* float: left; - auskommentiert 01.01.2026 */
   clear: none;
   margin: 0;

   padding: 5px 15px;
   border-radius: 15px 15px  0 0;

   background-color: #194b7d;
   color: #eee;
   width: 154px;
}

/*.tab-nav label:nth-child(1) { border-left: 1px solid silver; }*/
.tab-nav label:hover { background: hsl(210,50%,40%); }
.tab-nav label:active { background-color: var(--farbemenu); }

#tab1:checked ~ .tab-nav label[for="tab1"],
#tab2:checked ~ .tab-nav label[for="tab2"],
#tab3:checked ~ .tab-nav label[for="tab3"],
#tab4:checked ~ .tab-nav label[for="tab4"],
#tab5:checked ~ .tab-nav label[for="tab5"],
#tab6:checked ~ .tab-nav label[for="tab6"] {
  background-color: var(--farbemenu);
  color: #111;
  position: relative;
  border-bottom: none;
}

#tab1:checked ~ .tab-nav label[for="tab1"]:after,
#tab2:checked ~ .tab-nav label[for="tab2"]:after,
#tab3:checked ~ .tab-nav label[for="tab3"]:after,
#tab4:checked ~ .tab-nav label[for="tab4"]:after,
#tab5:checked ~ .tab-nav label[for="tab5"]:after,
#tab6:checked ~ .tab-nav label[for="tab6"]:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  background: white;
  left: 0;
}

/* Responsive: Tabs auf mobilen Geräten */
@media (max-width: 850px) {
  .tabbed figure>div > label {
    flex: 0 0 100%;
    margin-bottom: 2px;
  }

  .tabbed figure>div > input,
  .tabbed figure>div > select,
  .tabbed figure>div > textarea {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .tabbed .tab-nav {
    flex-wrap: wrap;
  }

  .tabbed .tab-nav label {
    flex: 1 1 auto;
    min-width: 100px;
    text-align: center;
  }
}

/*******************************************************************************************************************************************
Formular breit
*******************************************************************************************************************************************/

table.formularbreit{
  width: 90%;
  margin-left: 5%;
}

table.formularbreit input{
  width: 90%;

}

/*******************************************************************************************************************************************
Spezialandwendungen
*******************************************************************************************************************************************/

div.auflistungeneinzel{
background: var(--farbefooter);
color: white;
font-size: 1em;
font-weight: bolder;
padding: 5px;
margin: 5px;
border-radius: 3px;
}
div.auflistungeneinzel:hover{
  background: var(--farbehaupt);
}
div.auflistungeneinzel a{
  color: white;
  text-decoration: none;
}

/*******************************************************************************************************************************************
Erweitertdiv
*******************************************************************************************************************************************/
div.erweitertdiv{
  width: 100%;
  Background:   rgba(0, 0, 0, 0.3);
}
div.erweitertdiv input,div.erweitertdiv select,div.erweitertdiv button{
  width: auto;
  margin: 3px;

}
div.erweitertdiv p{
  margin: 3px;
  width: auto;
  margin-block-start: 3px;
      margin-block-end: inherit;
}


/* Ergänzende CSS-Styles für das Versions-Popup */
#popup .popup-content {
  margin: 20px;
  max-height: 60vh;
  overflow-y: auto;
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  color: black;
  /* Verbesserte Lesbarkeit im Popup */
  line-height: 1.4;
}

#popup .button-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

#popup .button-container button {
  min-width: 200px;
}

#popup h2 {
  /* color: hell-Theme kommt aus system/popup.css */
  background-color: transparent;
  margin-bottom: 15px;
}

#popup ul {
  list-style-type: disc;
  margin-left: 20px;
  clear: both;
  width: calc(100% - 20px);
  margin-top: 5px;
  margin-bottom: 10px;
  display: block;
}

#popup ul ul {
  list-style-type: circle;
  margin-left: 30px;
  width: calc(100% - 30px);
  margin-top: 5px;
  margin-bottom: 5px;
  display: block;
}

#popup li {
  margin-bottom: 8px;
  clear: both;
  display: list-item;
  width: 100%;
  list-style: inherit;
}

/* Spezifische Regeln für .textfluss in Popups */
#popup .textfluss {
  margin: 8px 0 12px 20px;
  padding-left: 10px;
  line-height: 1.4;
  float: none;
  clear: both;
  display: block;
  width: calc(100% - 30px);
}

/*******************************************************************************************************************************************
Drag & Drop für Rechnungspositionen (SortableJS)
*******************************************************************************************************************************************/

/* Drag-Handle Icon */
.drag-handle {
  cursor: move;
  cursor: grab;
  color: #7a2a6d;
  margin-right: 5px;
  display: inline-block;
  opacity: 0.6;
  transition: opacity 0.2s, color 0.2s;
}

.drag-handle:hover {
  opacity: 1;
  color: #627E91;
}

.drag-handle:active {
  cursor: grabbing;
}

/* Ghost-Element während des Draggings */
.sortable-ghost {
  opacity: 0.4;
  background-color: #c5d2de !important;
}

/* Element das gerade gedraggt wird */
.sortable-drag {
  opacity: 0.8;
  background-color: #fff !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transform: rotate(2deg);
}

/* Ausgewähltes Element */
.sortable-chosen {
  background-color: rgba(98, 126, 145, 0.1);
}

/*******************************************************************************************************************************************
Inline-Editing für Positionen
*******************************************************************************************************************************************/

/* Editierbare Zellen */
.editable-cell {
  cursor: pointer;
  /* transition entfernt - verursachte Lag bei schnellem Hover */
}

.editable-cell:hover {
  background-color: inherit; /* Erbt Farbe von TR, kein Konflikt */
  outline: 2px solid rgba(98, 126, 145, 0.3); /* Visuelles Feedback via Outline statt Background */
}

/* Zelle während Bearbeitung */
.inline-editing {
  padding: 0 !important;
  background: #fff !important;
}

/* Input/Textarea während Bearbeitung */
.inline-editing textarea,
.inline-editing input {
  width: 100%;
  border: 2px solid #627E91;
  padding: 5px;
  font-family: inherit;
  font-size: inherit;
  box-sizing: border-box;
  margin: 0;
}

.inline-editing textarea {
  min-height: 60px;
  resize: vertical;
}

.inline-editing input[type="number"] {
  text-align: right;
}

/* ========== KUNDENSUCHE DROPDOWN (AJAX-Livesuche) ========== */
.kundensuche-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 250px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.kundensuche-item {
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.kundensuche-item:hover,
.kundensuche-item.aktiv {
  background: var(--farbehaupt, #627E91);
  color: #fff;
}
.kundensuche-item small {
  color: #888;
}
.kundensuche-item:hover small,
.kundensuche-item.aktiv small {
  color: #ddd;
}
.kundensuche-leer {
  padding: 10px;
  color: #999;
  font-style: italic;
  text-align: center;
}

/* Impersonation (Test-System, nur god-Benutzer)
   Banner ist fixed am oberen Rand. body.impersonating drueckt die ueblichen
   fixed-Top-Elemente (menubar, nav, main) um die Banner-Hoehe nach unten. */
#impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2em;
  z-index: 10000;
  background: #b71c1c;
  color: #fff;
  padding: 0 16px;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-sizing: border-box;
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
}
body.impersonating #menubar { top: 2em; }
body.impersonating nav { top: 2em; height: calc(100% - 2em); }
body.impersonating main { top: calc(2.5rem + 2em); }
#impersonation-banner i { margin-right: 6px; }
#impersonation-banner button {
  background: #fff;
  color: #b71c1c;
  border: none;
  padding: 4px 12px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 3px;
}
#impersonation-banner button:hover { background: #ffebee; }

#impersonate-form { display: inline-block; margin: 0 4px; }
#impersonate-form select {
  font-size: 0.9em;
  padding: 2px 4px;
  background: #fff3e0;
  border: 1px solid #ff9800;
  color: #333;
  cursor: pointer;
}