/* ==============================================
   Farbvariablen global definieren
   ============================================== */
:root {
  --color-live-bg: #cc0000;
  --color-test-bg: #00cc00;
  --color-header-text: #FFFFFF;

  --color-button-bg: #eeeeee;
  --color-button-text: #000000;
  --color-button-text-hover: #000099;
  
  --color-button-hover: #F0FFFF;
  --color-button-main-hover: #FF6A6A;
  --color-button-main-active: #6AFF6A;
  
  --color-menu-bg: #F1DDDD;
  --color-menu-schrift: #000000;
  --color-menu-hover: #F19292;
  --var-color-menu-trener: #cc0000;
}
/* ==============================================
   Schriftart: Lucida Calligraphy & Systemfonts
   ============================================== */
@font-face {
  font-family: 'LucidaCalligraphy';
  src: url('Schriften/LCALLIG.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'LiberationSans';
  src: url('Schriften/LiberationSans-Regular.woff2') format('woff2'),
       url('Schriften/LiberationSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* ==============================================
   Modusabhängige Farben
   ============================================== */ 
body.live {
  --accent-bg: var(--color-live-bg);
  --accent-color: var(--color-header-text);
}

body.test {
  --accent-bg: var(--color-test-bg);
  --accent-color: var(--color-header-text);
}
/* ==============================================
   Grundlayout
   ============================================== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-family: 'LiberationSans', cursive, sans-serif;
}

body h1, 
body h2 {
  font-family: 'Lucida Calligraphy', cursive, sans-serif;
}

.Lucida,
.Luci {
  font-family: 'Lucida Calligraphy', cursive, sans-serif;
  font-size: 0.9rem;
}
.erforderlich {
  color: #CD2626;
}
.toggle-vis {
    color: #8B1A1A;
    cursor: pointer;
}
.toggle-vis:hover {
    text-decoration: underline;
}

header, footer {
  background-color: var(--accent-bg);
  color: var(--accent-color);
  text-align: center;
  padding: 10px;
  width: 100%;
  z-index: 1000;
}

header {
  margin: 0;
  top: 0;
  height: 65px;
  font-size: 0.8rem;
  position: relative;
  box-sizing: border-box;
  padding: 0 10px;
  overflow: hidden;
}
header h1 {
  margin: 0;
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* NEU */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  
}
footer {
  position: fixed;
  bottom: 0;
  height: 20px;
  line-height: 20px;
  font-size: 0.5em
}

main {
  margin-top: 0px;
  margin-bottom: 45px;
  height: calc(100vh - 65px - 45px);
  padding: 10px;
  width: 100%;
  box-sizing: border-box; /* wichtig bei Padding */
  overflow-y: auto;
}

.klein {
  font-size: 0.65em;	
}

/* ==============================================
   Menübutton
   ============================================== */
#bu_menu {
  margin: 0.2em;
  padding: 0.25em 0.25em; /* mehr horizontales Padding = rechteckiger */
  min-width: 10px;
  height: auto; /* Höhe ergibt sich aus Padding */
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
  border: none;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font-size: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 5px;
  left: 10px;
}

#bu_menu:hover,
#bu_menu:focus  {
  box-shadow: 0 0 12px			var(--color-button-hover);
}

/* ==============================================
   Overlay-Menü (mobil & desktop)
   ============================================== */
.main-nav {
  position: fixed;
  left: 0;
  width: 250px;
  height: calc(100vh - 60px);
  background-color: var(--color-menu-bg);
  color: var(--color-menu-schrift);
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform 0.3s ease;
  z-index: 7000;
  scrollbar-width: thin; /* für Firefox */
  scrollbar-color: #555 #222;
}

/* Scrollbar-Styling für WebKit (Chrome, Safari) */
.main-nav::-webkit-scrollbar {
  width: 8px;
}

.main-nav::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 4px;
}

.main-nav::-webkit-scrollbar-track {
  background-color: #222;
}

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

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav li {
  background-color: var(--color-menu-bg);
  color: var(--color-menu-schrift);
  border-bottom: 1px solid var(--var-color-menu-trener);
}

.main-nav a {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em;
  color: var(--color-menu-schrift);
  text-decoration: none;
  font-weight: bold;
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav .submenu a:hover,
.main-nav .submenu a:focus {
  background-color: var(--color-menu-hover);
}

.Ber,
li[class*="Ber_"] {
  display: none;
}

a.c-button,
a.c-button:link,
a.c-button:visited,
a.c-button:hover,
a.c-button:active,
a.c-button:focus {
    text-decoration: none;
}

/* ======= Mobil: Overlay-Menü ======= */
#main-nav.overlay {
  position: fixed;
  top: 60px; /* unterhalb header */
  left: 0;
  height: calc(100% - 60px);
  display: none;
  flex-direction: column;
  background: #003366;
}

#main-nav.overlay.open {
  display: flex;
}

/* ======= Overlay-Sperre ======= */
#overlay-bg {
  display: none;
  position: fixed;
  z-index: 900;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
}

#overlay-bg.active {
  display: block;
}

/* ======= Bildschirme ======= */
@media (min-width: 768px) {
  #main-nav.overlay {
    position: relative;
    display: flex !important;
    height: auto;
  }
  #overlay-bg {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  .main-nav {
    transform: translateX(-100%);
  }

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

  /* Overlay hinter dem Menü */
  #menu-overlay {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1500;
    display: none;
  }

  #menu-overlay.show {
    display: block;
  }
}

@media (min-width: 1025px) {
  main {
    margin-left: 260px;
	width: calc(100% - 260px);
  }
}
@media (max-width: 1011px) {
  main {
    width: 100%;
    margin-left: 0;
  }
}

/* ======= Deaktivierte Menüpunkte ======= */
.main-nav li.deactivated a {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

/* ====== Submenüs ausblenden ====== */
.main-nav .submenu {
  display: none;
  background-color: var(--color-menu-bg);
  color: var(--color-menu-schrift);
  border-bottom: 1px solid var(--var-color-menu-trener);
}

.main-nav .has-submenu.open > .submenu {
  display: block;
}

.main-nav .submenu li a {
  padding-left: 2em;
  font-weight: normal;
  font-size: 0.95em;
  background-color: var(--color-menu-bg);
  color: var(--color-menu-schrift);
  border-bottom: 1px solid var(--var-color-menu-trener);
}

/* ==============================================
   Untermenüs
   ============================================== */
.menu-item {
  margin-bottom: 10px;
  font-weight: bold;
}

.sub-menu {
  margin-left: 15px;
  display: none;
}

.menu-item.open .sub-menu {
  display: block;
}

/* ==============================================
   Responsive Ergänzung
   ============================================== */
@media (max-width: 768px) {
  .main-nav {
    width: 100%;
  }

  /* #bu_menu { */
    /* position: absolute; */
    /* top: 10px; */
    /* left: 10px; */
  /* } */
}

/* ==============================================
   Ladegrafik über UI
   ============================================== */
.ladegrafik,
.ladegrafik2 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 100px;
  height: 100px;
  pointer-events: none;
}

/* ==============================================
   Grafiken
   ============================================== */
.logo-startseite {
  max-width: 80vw;
  height: auto;
  display: block;
  margin-top: 10vh;
  margin: 0 auto;
  /* border: 2px solid red; */
}
.progress-container {
  width: 100%;
  height: 24px;
  background-color: #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.progress-bar {
  height: 100%;
  width: 0;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(90deg, #BA1719, #DE1B1E);
  position: relative;color: #fff;
  text-align: center;
  line-height: 25px; /* gleiche Höhe wie Container für vertikale Zentrierung */
  font-weight: bold;
  overflow: hidden;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

/* Schimmernde Streifen */
.progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200%; /* größer für Animation */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.3) 0,
    rgba(255, 255, 255, 0.3) 10px,
    transparent 10px,
    transparent 20px
  );
  animation: stripesMove 2s linear infinite;
}

@keyframes stripesMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* ==============================================
   Formulare
   ============================================== */
main label,
main legend,
main p .hauptteil {
	/* margin:  top rechts unten links */
	/* padding: top rechts unten links */
	margin: 0.5em 0.5em 0.5em 1em;
	padding: 0.2em 0.2em 0.2em 0.2em;
	font-size: 0.9em;
	font-weight: bold;
	text-align: left;
}

main input,
main textarea,
main select {
	box-sizing: border-box;
	/* margin:  top rechts unten links */
	/* padding: top rechts unten links */
	margin: 0.2em 0.2em 0.2em 0.5em;
	padding: 0.1em 0.2em 0.1em 0.5em;
	min-width: 95%;
	height: 2em;
	text-align: left;
	font-size: 0.9em;
}
/* main select { */
    /* -webkit-appearance: none; */
    /* -moz-appearance: none; */
    /* appearance: none; */
/* } */
.bu-uberfallig {
	display: inline-flex;       /* flexbox für zentrierten Inhalt */
    align-items: center;        /* vertikal zentrieren */
    justify-content: center;    /* horizontal zentrieren */
    width: 35px;                /* feste Breite */
    height: 35px;               /* gleiche Höhe => quadratisch */
    padding: 0;                 /* kein extra padding */
    margin: 0.2em;
	border-radius: 0.5em 0.5em 0.5em 0.5em;
	/* background: #eeeeee url("../img/ui-bg_highlight-hard_100_eeeeee_1x100.png") 50% 50% repeat-x; */
	/* background-color: var(--color-button-bg); */
	/* color: var(--color-button-text); */
	/* box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); */
	border: none;
	/* cursor: pointer; */
	/* font-weight: bold; */
}
.c-DS_nav {
	display: inline-flex;       /* flexbox für zentrierten Inhalt */
    align-items: center;        /* vertikal zentrieren */
    justify-content: center;    /* horizontal zentrieren */
    width: 35px;                /* feste Breite */
    height: 35px;               /* gleiche Höhe => quadratisch */
    padding: 0;                 /* kein extra padding */
    margin: 0.2em;
	border-radius: 0.5em 0.5em 0.5em 0.5em;
	background: #eeeeee url("../img/ui-bg_highlight-hard_100_eeeeee_1x100.png") 50% 50% repeat-x;
	background-color: var(--color-button-bg);
	color: var(--color-button-text);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	border: none;
	cursor: pointer;
	font-weight: bold;
}

/* Gemeinsames Button-Design für Links & Buttons */
a.c-button,
button.c-button {
    margin: 0.2em;
    padding: 0.4em 0.8em;
    min-width: 10px;
    height: auto;
    border-radius: 0.5em;
    background: #eeeeee url("../img/ui-bg_highlight-hard_100_eeeeee_1x100.png") 50% 50% repeat-x;
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    border: none;
    cursor: pointer;
    font-weight: bold;

    display: inline-flex;      /* gleiche Höhe / Ausrichtung */
    align-items: center;       /* Text & Icon vertikal mittig */
    gap: 6px;                  /* Abstand Icon–Text */
    text-decoration: none;     /* Unterstreichung weg */
    line-height: 1.2;          /* gleiche Zeilenhöhe */
}

/* Browser-Standard bei Buttons killen, damit sie wie Links aussehen */
button.c-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font: inherit;             /* gleiche Schrift wie Body/Link */
    background-clip: padding-box;
}

/* (Optional) für reine Link-Buttons, falls du irgendwo noch globale a-Styles hast */
a.c-button:link,
a.c-button:visited,
a.c-button:hover,
a.c-button:active,
a.c-button:focus {
    text-decoration: none;
    color: inherit;
}

/* Icon in Buttons & Links schön mittig */
.c-button .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Gemeinsames Button-Design für Links & Buttons */
a.c-button,
button.c-button {
    margin: 0.2em;
    padding: 0.4em 0.8em;
    min-width: 10px;
    height: auto;
    border-radius: 0.5em;
    background: #eeeeee url("../img/ui-bg_highlight-hard_100_eeeeee_1x100.png") 50% 50% repeat-x;
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    border: none;
    cursor: pointer;
    font-weight: bold;

    display: inline-flex;      /* gleiche Höhe / Ausrichtung */
    align-items: center;       /* Text & Icon vertikal mittig */
    gap: 6px;                  /* Abstand Icon–Text */
    text-decoration: none;     /* Unterstreichung weg */
    line-height: 1.2;          /* gleiche Zeilenhöhe */
}

/* Browser-Standard bei Buttons killen, damit sie wie Links aussehen */
button.c-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font: inherit;             /* gleiche Schrift wie Body/Link */
    background-clip: padding-box;
}

/* (Optional) für reine Link-Buttons, falls du irgendwo noch globale a-Styles hast */
a.c-button:link,
a.c-button:visited,
a.c-button:hover,
a.c-button:active,
a.c-button:focus {
    text-decoration: none;
    color: inherit;
}

/* Icon in Buttons & Links schön mittig */
.c-button .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.icon-button {
  margin: 3px;
  padding: 0;
  width: 34px;
  height: 34px;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #eeeeee url("../img/ui-bg_highlight-hard_100_eeeeee_1x100.png") 50% 50% repeat-x;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  /* color: var(--color-button-text); */
  /* background-color: var(--color-button-bg); */

  text-decoration: none;
  box-sizing: border-box;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.icon-button:hover {
  box-shadow: 0 0 12px			var(--color-button-main-hover);
}

.icon-button .icon {
  width: 16px;
  height: 16px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

main .button:not(:disabled):hover,
main .button:not(:disabled):focus,
main button:not(:disabled):hover,
main button:not(:disabled):focus,
.c-button:not(:disabled):hover,
.c-button:not(:disabled):focus,
.c-DS_nav:not(:disabled):hover,
.c-DS_nav:not(:disabled):focus  {
  box-shadow: 0 0 12px			var(--color-button-main-hover);
  color: var(--color-button-text-hover);
}

main .button:not(:disabled):active,
main button:not(:disabled):active,
.c-button:not(:disabled):active,
.c-DS_nav:not(:disabled):active {
  box-shadow: 0 0 12px			var(--color-button-main-active);
}

/* Deaktivierte Buttons global stylen */
button:disabled,
button[disabled] {
    cursor: not-allowed;       /* Maus zeigt "verboten" */
    opacity: 0.5;              /* leicht ausgegraut */
    background-color: #ccc;    /* grauer Hintergrund */
    color: #666;               /* graue Schrift */
    border: 1px solid #999;    /* optional: dezent abgesetzter Rand */
}
input:disabled,
input[disabled] {
	cursor: not-allowed;
}

.steuer_button {
	margin-top: 25px;
	margin-bottom: 15px;
}