/*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;

}
html{
    overflow: hidden;
}
#body100{
    display: block;
    height:-webkit-fill-available;
}
h1{
    float: left;
    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;
    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);
}

h3{
    float: left;
    clear:left;
    width: 100%;
    font-size:1.125em;
    font-weight: 700;
    color:black;
    margin:0.18em;


    
}
p{
    float:left;
}

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


table{
  float:left;
  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;
}

div{
    float: left;
}
div.absatz{
    width:100%;
}
div.infotext{

    float:left;
    clear:left;
    margin:0.1875em;
    margin-bottom: 1em;
    margin-top: 1em;
   background-color: rgb(236, 236, 236);
   word-wrap: break-word;

}
div.imeldung{

    float:left;
    clear:left;
    width: 90%;
    margin:0.1875em;
    margin-bottom: 1em;
    margin-top: 1em;
    background: lightgreen;

}
#imeldung2{
  float:left;
  clear:left;
  width: 90%;
  margin:0.1875em;
  margin-bottom: 1em;
  margin-top: 1em;
  background: lightgreen;

}
#fmeldung2{
  float:left;
  clear:left;
  width: 90%;
  margin:0.1875em;
  margin-bottom: 1em;
  margin-top: 1em;
  background: rgb(207, 84, 71) ;

}
div.fmeldung{

    float:left;
    clear:left;
    width: 90%;
    margin:0.1875em;
    margin-bottom: 1em;
    margin-top: 1em;
    background: rgb(207, 84, 71);

}
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;
    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;
    /*height: 200px;*/
    margin-top: -100px; /* Half the height */
    margin-left: -250px; /* Half the width */
    padding: 10px;


}

#login p{
  float: left;
  padding: 5px;
  margin: 3px;
  background-color: rgba(255, 255, 255, 0.4);
}
/*#login input[type=submit]{
  clear: left;
  float: left;
  margin-left: 8%;
  margin-right: 8%;
  width:auto;
}*/

#login label{
  width:calc(25% - 8px);
}
#login input[type=text],input[type=password]{
  width:calc(75% - 12px);
}
/****************************************************************************************************************************************
popup
******************************************************************************************************************************************/
#popup {
    position:absolute;
    width: 0%;
    height: 0%;
    background:rgba(0,0,0,0.5);
    overflow: hidden;
    z-index: 599;

}
#popup .rahmenpopup{
    position:absolute;
    background:var(--farbefooter);
    border: #7b2a6e solid 2px ;
    top: 50px;
    left: 50px;
    width: calc(100% - 100px);
    max-height: calc(100% - 200px);
    overflow:auto;
    padding: 10px;
}

#popup .leiste{
  position: relative;
  float:left;
  width:calc(100% - 8px);
  background:#7b2a6e;
  text-align:right;
  padding:4px;
}
#popupleiste{
  position: relative;
  float: left;
  color:white;
  font-weight: bold;
}

#popup #popupinhalt{
  position: relative;
  float:left;
  width:calc(100% - 8px);
  color: white;

  padding:4px;


}
#popup h2{
  color:white;
}
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:block;
    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: block;
}
#menubar ul li{
    display: inline;
    margin: 0em 0.188em 0em 0.188em;
}
#menubar ul li a{
  color: white;
  font-size: 1.25em;
  font-weight: bold;
  line-height: 2em; /* Setzt die Zeilenhöhe gleich der gewünschten Hintergrundgröße */
  padding: 0; /* Entfernt zusätzliches Padding */
  margin-left: 1rem;
  display: inline-block; /* Ermöglicht, dass die Höhe durch line-height kontrolliert wird */
  transition: background-color 0.5s;
  box-shadow: inset 0px -5px 5px 0px rgba(0, 0, 0, 0);
  
    

}
#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) {
  #menubar ul li a {
    font-size: 1.1em;
    margin-left: 0.5rem;
  }
  #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) {
  #menubar ul li a {
    font-size: 1em;
    margin-left: 0.3rem;
  }
  #menubar ul li {
    margin: 0em 0.1em 0em 0.1em;
  }
  #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;
  }
}

@media (max-width: 850px) {
  #menubar ul li a {
    font-size: 0.9em;
    margin-left: 0.2rem;
  }
  #nummernkreisauswahl {
    width: 100px;
  }
  #nummernkreisauswahl select {
    width: 130px;
    font-size: 13px;
    margin: 7px;
    padding-left: 7px;
  }
  .select-wrapper::before {
    font-size: 11px;
    right: 10px;
    top: 10px;
  }
}

@media (max-width: 750px) {
  #menubar ul li a {
    font-size: 0.8em;
    margin-left: 0.1rem;
  }
  #nummernkreisauswahl {
    width: 90px;
  }
  #nummernkreisauswahl select {
    width: 110px;
    font-size: 11px;
    margin: 6px;
    padding-left: 6px;
    height: 18px;
  }
  .select-wrapper::before {
    font-size: 10px;
    right: 8px;
    top: 9px;
  }
}





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

}
/*haubtbereich GESAMT*/
#gesamt{
    margin-top:2.5em;
    margin-bottom:1.5em;
    display: flex;
    height: -webkit-fill-available;

}

#nummernkreisauswahl{
  width:150px;
}
#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 {
  /* ... */
  cursor: pointer;
}
/********************************************************************************************************************************
Seitenmenü Navigation
**********************************************************************************************************************************/
nav {
  position: fixed;
  height: 100%;
  width: 10em;
  background: radial-gradient(circle at 30% 40%, #627E91, #85a1b4);
  box-shadow: inset 2px 0px 3px 0px #7B2A6E;
}

nav ul{
    display:block;
}
nav ul li{
    display: inline;
    margin: 0em 0.188em 0em 0.188em;
}
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;
    -webkit-transition:background 0.5s;
    width:100%;

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

}

nav ul li a.side{

    font-size: 1em;
    float:left;
    clear:left;


}
main{
  position:fixed;
  left:10em;
  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% - 10em - 8px); /* Abzug menüleiste links und scrollbalken rechts*/
  height:1.65em;
  background:#627E91;
  display:block;
}

h2.untermenu{
  position: parseFloat;
  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;
  -webkit-transition:background 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;
}

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;
    font-weight: bold;
    color: white;

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


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

}
label{
  font-size: 90%;
  float:left;
  clear:left;
  width:20%;
  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;
  margin: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;
  margin-left: inherit!important;
}
button.next{
  float:right;
}

.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;
  width: calc(80% + 8px);
  margin-left: calc(10% - 4px);
}
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;
  margin:3px;
  height: 5.5em;
}
select{
  width:calc(50% + 5px);
  float:left;
  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;
  margin: 3px;
}
fieldset.radiobuttonsinzeile label{
  width: fit-content;
    float: left;
    clear: inherit;
    line-height: inherit;
    padding: 0;
}
fieldset.radiobuttonsinzeile input{

    width: fit-content;
    clear: inherit;
    float: left;

}

/*Filterforumular*/

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


/*******************************************************************************************************************************************
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: 80%;
   color:black;
}
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;
}

div.linkshalbiert{
  width:50%;
  margin:0px;
  margin-left: 0px;
  padding: 0;
  clear:left;
}
div.rechtshalbiert{
  width:50%;
  margin:0px;
  margin-right: 0px;
  padding: 0;
  clear:right;
}
/*  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;
  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% - 10em - 8px);
z-index: 1000;
background: white;
margin: 0;
padding: 0;
}
article.tabmenu {
    height: 100%;
}
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 {

    float: left;
    top: 0px;
    width: 154px;
    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;
}


div.tabnav div a {
    display: block;
    margin: 5px 0 0 0;
    text-align: center;
    text-decoration: none;
    color: #c5d2de;
}
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;
 float: inherit;

}
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{
  width:100%;
  border-bottom:2px solid var(--farbehaupt);
}
.leftbox{
  float: left;
  width: 50%;
  margin-right: -2px;
  border-right:2px solid var(--farbehaupt);
}
.rightbox{
  float:right;
  width: 50%;
}

div.spacing{
  clear:left;
  float:left;
  position:relative;
  height: 2em;
  width: 100%;

}

/*******************************************************************************************************************************************
Liste standart start
*******************************************************************************************************************************************/
ul.start{
  float:left;
  width: 90%;
  margin-left: 5%;
  background:var(--farbehaupt);
}
.start li{
  margin-left:20px;
  clear: both;
  display: list-item;
  width: 100%;
  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 */

}
/*******************************************************************************************************************************************
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;
}
div.tabbed{
  width: 96%;
  margin-left: 2%;
}

.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;
  margin-left:2px;
}

#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: block; }

.tabbed  nav{
  position: inherit;
  height: inherit;
  width: inherit;
  background: none;

}
.tabbed nav label {
   float: left;
   clear: none;
   margin: 0;

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

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

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

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

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

/*******************************************************************************************************************************************
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: white;
  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;
}