html, body {
  height:100%;
  -webkit-user-select: none; 
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none; 
}


body {
  align-items: center;
  margin: 0;
  color: #111111;
  width: 100%;
      height: 100%;
      background-image: url('back.jpg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      background-attachment: fixed; 
	  background-color:#225522;
	  display:flex;
	  box-sizing:border-box;
	  padding:20px;
}
body::-webkit-scrollbar {
    -webkit-appearance: none;
	width: 15px; 
  }
  body::-webkit-scrollbar-thumb {
    background-color: #77aa77; 
  }

label {
	margin-bottom:4px;
}
input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0 0 15px;
  display: flex;
  justify-content: center;
  width:100%;
}

.menu li {
  margin: 0;
  padding: 0;
  width:25%;
  border:1px solid #225522;
}

.menu li a {
  display: block;
  padding: 8px 1px;
  background-color: #225522;
  background:linear-gradient(to bottom, #336633, #225522);
  color: #222222;
  text-decoration: none;
  text-align:center;
  font-size:15px;
  color:#fff;
  position: relative;
  transition: background-color 0.3s ease
}
.menu li a.highlighted {
  cursor: alias;
  text-decoration: none; /* optional: um die Unterstreichung zu entfernen */
  background-color:#447744;
  background:linear-gradient(to bottom, #557755, #336633);
}
.menu li a:hover {
  background-color: #447744;
  border-color: #fff;
  background:linear-gradient(to bottom, #557755, #336633);
}

.menu li a::after,
.menu li a::before {
  content: "";
  display: block;
  height: 4px;
  width: 0;
  background-color: #336633;
  position: absolute;
  bottom: -7px;
  left: 50%; /* horizontal zentrieren */
  transform: translateX(-50%); /* horizontal zentrieren */
  transition: width 0.2s ease, opacity 0.3s ease; /* füge opacity transition hinzu */
  opacity: 0; /* setze die opacity auf 0 */
}
.menu li a::before {
  content: "";
  display: block;
  height: 4px;
  width: 0;
  background-color: #336633;
  position: absolute;
  top: -7px;
  left: 50%; /* horizontal zentrieren */
  transform: translateX(-50%); /* horizontal zentrieren */
  transition: width 0.2s ease, opacity 0.3s ease; /* füge opacity transition hinzu */
  opacity: 0; /* setze die opacity auf 0 */
}

.menu li a:hover::after,
.menu li a.highlighted::before,
.menu li a.highlighted::after{
  width: 100%;
  opacity: 1; /* setze die opacity auf 1 */
}

.headlabel{
margin:7px 0;
font-weight:bold;
display: inline-block;
}

.link {
  color: #545454;
  text-decoration: none; }
  .link:hover {
    color: #000; }


.errormessage {
	color: #ff0000;
	text-align: center; 
}
.blink {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 1s; 
    animation-iteration-count: infinite;            
}

@keyframes animation_blink {
    0% { opacity: 1; }
    50% { opacity: 0.1; }
    100% { opacity: 1; }    
}


.button {
  display: block;
  width: 100%;
  padding: 7px 0;
  border: 1px solid #225522;
  margin-bottom: 15px;
  background-color: #225522;
  background:linear-gradient(to bottom, #336633, #225522);

  color: #fff;
  cursor: pointer;
  font: normal 18px sans-serif;
  box-shadow: 2px 2px 3px #1a1a1a85;
  transition: all 0.1s ease;
  text-align:center;
  text-decoration:none;
}
.button:hover {
    background-color: #447744;
    background:linear-gradient(to bottom, #557755, #336633);
}
.button:active {
	transform: translate( 1px, 1px);
	  box-shadow: none;
}


.button-link {
  text-align: center;
  text-decoration: none; }
  .button-link:hover {
    color: #fff;
    text-decoration: none; }


.input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #929292;
  margin-bottom: 10px;
  border-radius: 6px;
  font: normal 18px sans-serif; 
  background-color:white;
 }
 

.input_group {
	display:flex;
	margin-bottom: 6px;
}
.input_group * {
  box-sizing: border-box;
  font: normal 15px sans-serif; 
  border: 1px solid #929292;
  margin:0;
  padding: 7px;
}
.input_group label {
	background-color:#eeeeee;	
	width: max-content;
	border-radius: 6px 0 0 6px;  
	border-right:0;
	width:140px;
	text-align:right;
	font-weight:bold;
}
.input_group input, select {
    background-color:white;
	width: 100%;
	border-radius: 0 6px 6px 0;
	border-left-color:#cccccc;
	box-shadow:inset 2px 1px 4px 0px rgb(0 0 0 / 81%);
}

input::placeholder {
   transition: opacity 0.5s ease-in-out; 
   font: normal 14px sans-serif; 
	   }
input:focus::placeholder {
   opacity: 0.3;
}
input:not(:focus)::placeholder {
   opacity: 1;
}

.has-error {
  border:2px solid red;
  border-radius:7px;
 }
.checkbox_group {display:flex; margin:10px 0;}
.checkbox_group div{
	font-size:16px;
    vertical-align: top;
    margin-left: 10px; /* optional: Abstand zwischen Checkbox und Label */
}
.checkbox_group input{
	width: 40px;
	margin:0;
}


.error {
  display: block;
  box-sizing: border-box;
  padding: 7px 10px;
  margin-bottom: 15px;
  background: #545454;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: #fff;
  float: left;
  font: normal 16px/20px  sans-serif;
  text-align: left; }

.title {
  font: bold 32px/26px sans-serif;
  text-align: center; 
  margin: 0 auto 10px;
  color:#135313;

  }
 
main {
  min-height:25%;
  font: normal 18px sans-serif;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  display: block;
  max-width: 600px;
  box-sizing: border-box;
  padding: 20px 13px;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); 
  margin-top:auto;
  margin-bottom:auto;
  margin: auto;	
  width:100%;
  line-height:1;
  transition: opacity 0.5s linear;
  overflow:hidden;
}

.start {
    opacity: 0; 
} 	
    
table.listtable th{
background-color:#222222;
color:#eeeeee;
background:linear-gradient(to bottom,#444444,#222222 );
}
table.listtable td, th{
	padding: 2px 6px;
	border-right: 1px solid darkgrey;
	vertical-align:middle;
	height:38px;
	width: auto;
}
table.listtable{
	width:100%;
	border-collapse: collapse;
	text-align:center;
	font: normal 15px sans-serif;
	color: #222222;
	border-radius: 6px;
	overflow: hidden;
    box-shadow: 2px 2px 8px #1a1a1a;
	white-space: nowrap; 
}
table.listtable .highlighted{ 
  background-color: #77aa77;
  font-weight: bold;
}

.listtable th:first-child{
  border-top-left-radius: 6px;
}
.listtable th:last-child{
  border-top-right-radius: 6px;
}
.meldung {
  box-sizing: border-box;
  color:black;
  width: 100%;
  max-height: max-content;
  background-color:rgba(255, 181, 181, 0.5);
  border: 1px solid gray;
  border-radius: 6px;
  margin: 10px 0;
  padding: 5px;
  font-size:initial;
}
#messageinputbox{
width:99%;
height:150px;
font-size:16px;	
}

.headline {
  font: bold 23px sans-serif;
  margin: 10px 0 10px;
  text-align: center;
display:block;  }

header, footer{
  text-align: center; }
 
@media (max-width: 540px) {
    .nav-main > .nav-main-element:first-of-type {
      display: block;
      margin-bottom: 10px; 
	} 
	main {
     box-shadow: -1px 0px 30px 1px black;
	 background-color: rgba(255, 255, 255, 0.3);
	}  
	.title {
      font: bold 23px sans-serif;
	  color:#003100;
    } 
	body {
	  background:linear-gradient(to bottom, #445577, #225522);
	  background-repeat: no-repeat;
	  background-color:#225522;
	  padding:0;
	}
	table.listtable {
		font: normal 0.8em sans-serif;		
	}
	table.listtable td, th{
		padding: 2px 1px;
	}
	
	.headline {
	font: bold 18px sans-serif;
	}
}
.dlicon {
	height: 100%;
	margin:0px 8px 7px;
}

.inputtable{
  width:100%;
  border-collapse: collapse; /* Fügt die Zellengrenzen zusammen */
  border: none; /* Entfernt die sichtbaren Rahmen */	
}
td.inputtable  {
	border: none;
	padding:3px 0;
}
label.inputtable, input.inputtable, select.inputtable{
	border: 1px solid #929292;
	font: normal 18px sans-serif; 
	margin:0;
	padding: 7px;
}
label.inputtable  {
	background-color:#eeeeee;	
	min-width: 70px;
	border-radius: 6px 0 0 6px;  
	border-right:0;
	text-align:right;
	font-weight:bold;
	display:block;
}
input.inputtable, select.inputtable {
    background-color:white;
	width: 100%;
	border-radius: 0 6px 6px 0;
	border-left-color:#cccccc;
	box-shadow:inset 2px 1px 4px 0px rgb(0 0 0 / 81%);
}

input.inputtable::placeholder {
   transition: opacity 0.5s ease-in-out; 
   font: normal 15px sans-serif; 
}
input.inputtable:focus::placeholder {
   opacity: 0.6;
}
 input.inputtable:not(:focus)::placeholder {
   opacity: 1;
}
.toggle-password-button {
      cursor: pointer;
      border: none;
      background: none;
      position:absolute;
	  right:30px;
	  margin:2px;
 }
 
 .fa {
	 display:inline !important;
	 border:none;	 
 }
.invalid {
    background-color: #ffcccc !important; 
}
.valid {
	background-color: #ccffcc !important; 
}
@keyframes pulsieren {
            0% {
                text-shadow: 0 0 5px rgba(0, 0, 255, 0.5); /* Start des Glow-Effekts */
            }
            50% {
                text-shadow: 0 0 20px rgba(0, 0, 255, 0.8); /* Zwischenzustand */
            }
            100% {
                text-shadow: 0 0 5px rgba(0, 0, 255, 0.5); /* Ende des Glow-Effekts */
            }
        }
.glow {
   color:#eeeeff; 
   font-weight: bold;
   text-shadow: 0 0 5px rgba(0, 0, 255, 0.5); /* Blauer Glow-Effekt */
   animation: pulsieren 2s infinite alternate;
  position:relative;
  top:-2px;
	
}
#stromzähler{
	display: inline-flex;
    margin-bottom: 10px;
    overflow: hidden;
	width:100%;
	background-color: #eeeeee;
	border: 1px solid #929292;
	border-radius:6px;
	height:36px;
}
#stromzähler *{
    box-sizing: border-box;
    font: normal 16px sans-serif;
    margin: 0;
    padding: 7px;
	white-space: nowrap;
}	
#stromzähler label {
    background-color: #eeeeee;
    width: 100%;
    text-align: right;
    font-weight: bold;
	padding:0 10px;
	line-Height:36px;
}	
#ablesung {
    font-family: "Courier New", monospace;
    font-weight: bold;
    font-size: 26px;
    letter-spacing: 4px;
    padding: 0 0 0 2px;
    background-color: #595959;
    caret-color: White;
    width: 142px;
	border:2px solid #303030;
	cursor:pointer;
	outline:none;
	color:#dddddd;
}
#ablesung.js-input{
	background-image: url('zähler3.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
	caret-color: transparent !important;
	color:#dddddd;

}	
#stromzähler input[type="submit"] {
    background-color: #225522;
    background: linear-gradient(to bottom, #336633, #225522);
    color: #fff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
	border: 1px solid #225522;
	width:100%;
	transition: color 0.4s;
	
}
#stromzähler input[type="submit"]:hover {
    background-color: #447744;
    background:linear-gradient(to bottom, #557755, #336633);
}
#ablesung.js-input:focus {
	 animation: blink 1s step-start 0s infinite;
}
@keyframes blink {
   50% {color: #777;}
   100% {color: #dddddd;}
}
@keyframes blinkgreen {
   50% {color: #00dd00;}
   100% {color: #dddddd;}
}

.board {
	width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    position: relative;
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.5);
    border: 1px solid #6969696b;
	padding:10px;
	box-sizing: border-box;	
	font-size:small;
}
.board table {
    width: 100%;
}
.board td:first-child {
    font-weight: bold;
}
.board tr:not(:last-child) td {
    border-bottom: 1px solid #a9a9a9;
}
.hidden{display:none;}
.content{
	max-width:540px;
	margin:auto;
}
/* CSS: Allgemeine PDF-Button / Overlay Regeln */
.pdf-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 9px;
    width: 100%;             /* volle Breite des Containers */
    box-sizing: border-box;
    background-color: #DFDFDF;
    border: 2px solid #0073e6;
    border-radius: 6px;
    color: #0073e6;
    font-weight: bold;
    font-family: Arial, sans-serif;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
    transition: all 0.1s ease;
    justify-content: center
  }

  /* Hover Effekt */
  .pdf-button:hover {
    background-color: #0073e6;
    color: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,0.2);
  }

  /* Klicken (active) Effekt */
 .pdf-button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
  }
.pdf-button svg {
   transition: 
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
    opacity 1.2s ease;
    display: block;
}
  /* Icon Stil */
  .pdf-button:svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform 0.1s ease;
  }

  /* Icon beim Klicken leicht skalieren */
  .pdf-button:active svg {
    transform: scale(1.1);
  }

/* Overlay */
.pdf-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  justify-content: center; align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pdf-overlay.show {
  opacity: 1;
}

.pdf-overlay-content {
  background-color: #000;
  width: 80%; height: 80%;
  border-radius: 8px;
  display: flex; flex-direction: column;
  transform: scale(0.5);
  transition: transform 0.3s linear;
}

.pdf-overlay.show .pdf-overlay-content {
  transform: scale(1);
}

.pdf-overlay-header {
  padding: 1px 8px;
  background-color: #0073e6;
  color: #fff;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.pdf-close-btn {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

.pdf-container {
  flex: 1;
  overflow: auto;
}

.pdf-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.fly-button{
	display:none;	
}

.rotateOnce {
    animation: rotateOnce 0.6s ease-out forwards;
}

@keyframes rotateOnce {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}