:root {
  /* itb-Variablen */
  --itb-bg-vg-color: #e3000f;
  --itb-bg-vg-color-rgb: 227, 0, 15;
  --itb-vg-color-dark: #b0000c;
  --itb-vg-color-dark-rgb: 176, 0, 12;
  --itb-text-vg-light: #fff;
  --itb-text-dark: black;
  --itb-border-light: #ced4da;
  --itb-border-hover: #989898;
  --itb-bg-grey: #f2f2f2;
  --itb-bg-grey-dark: #ddd;
  --itb-bg-white: #fff;
  --itb-bg-danger: #dc3545;
  --itb-bg-badge: #333;

  --itb-bg-vg-color-light: #fdbdba;
  --itb-bg-color-gelb: #fff2ab;
  --itb-bg-color-gelb-dark: #ffed00;
  --itb-bg-color-violett: #d2d2f7;
  --itb-bg-color-violett-dark: #581c6d;
  --itb-color-black: #000;
  --itb-dynamic-col-count: 1;


  /* Bootstrap Root-Variablen (nur die, die Bootstrap im :root setzt!) */
  --bs-primary: var(--itb-bg-vg-color);
  --bs-primary-rgb: var(--itb-bg-vg-color-rgb);
  --bs-secondary: var(--itb-bg-white);
  --bs-secondary-rgb: var(--itb-vg-color-dark-rgb);
  --bs-info: var(--itb-vg-color-dark);
  --bs-info-rgb: var(--itb-vg-color-dark-rgb);
  --bs-danger: var(--itb-bg-danger);
  --bs-body-color: var(--itb-text-dark);
  --bs-body-bg: var(--itb-bg-white);
  --bs-border-color: var(--itb-border-light);
  --bs-badge-bg: var(--itb-bg-badge);

  /* Link-Variablen */
  --bs-link-color: var(--itb-vg-color-dark);
  --bs-link-color-rgb: var(--itb-bg-vg-color-rgb);
  --bs-link-opacity: 1;
  --bs-link-hover-color: #777;
  --bs-link-hover-color-rgb: 119,119,119;
  --bs-link-hover-opacity: 1;

  --bs-heading-color: black;

  /* Emphasis/Text-Emphasis Farben (optional) */
  --bs-light-text-emphasis: var(--itb-text-vg-light);
  --bs-dark-text-emphasis: var(--itb-text-dark);

  --bs-body-font-family: RobotoRegular,  sans-serif;
  --bs-nav-link-font-size: 22px;

  --bs-body-color-rgb: 100, 100, 100;
}

/* Navbar-Variablen im Scope der Navbar für .nav-link */
.navbar {
  --bs-navbar-color: var(--itb-bg-vg-color);
  --bs-navbar-hover-color: var(--itb-color-black);
  --bs-navbar-active-color: var(--itb-color-black);
  --bs-navbar-disabled-color: #bdbdbd;
  --bs-navbar-brand-color: var(--itb-bg-vg-color);
  --bs-navbar-brand-hover-color: var(--itb-vg-color-dark);
}
.navbar-nav {
  --bs-nav-link-color: 000;
}

.btn,
.btn-primary {
  --bs-btn-hover-bg: var(--itb-vg-color-dark);
  --bs-btn-hover-color: var(--itb-text-vg-light);
  --bs-btn-hover-border-color: var(--itb-vg-color-dark);
  --bs-btn-active-bg: var(--itb-vg-color-dark);
  --bs-btn-active-color: var(--itb-text-vg-light);
  --bs-btn-active-border-color: var(--itb-vg-color-dark);
  --bs-btn-disabled-bg: var(--itb-bg-vg-color);
  --bs-btn-disabled-color: var(--itb-text-vg-light);
}

.btn {
  --bs-btn-bg: var(--itb-bg-grey);
  --bs-btn-color: var(--itb-bg-vg-color);
  --bs-btn-border-color: var(--itb-vg-color-dark);
  --bs-btn-disabled-border-color: var(--itb-bg-vg-color);
}

.btn-primary {
  --bs-btn-bg: var(--itb-bg-vg-color);
  --bs-btn-color: var(--itb-text-vg-light);
  --bs-btn-border-color: var(--itb-bg-vg-color);
  --bs-btn-disabled-border-color: var(--itb-bg-vg-color);
}

.btn-secondary {
  --bs-btn-bg: var(--itb-bg-white);
  --bs-btn-color: #000;
  --bs-btn-border-color: var(--itb-border-light);
  --bs-btn-hover-bg: var(--itb-border-hover);
  --bs-btn-hover-color: white;
  --bs-btn-hover-border-color: var(--itb-border-hover);
  --bs-btn-active-bg: var(--itb-border-hover);
  --bs-btn-active-color: white;
  --bs-btn-active-border-color: var(--itb-border-hover);
  --bs-btn-disabled-bg: var(--itb-bg-vg-color);
  --bs-btn-disabled-color: var(--itb-text-vg-light);
  --bs-btn-disabled-border-color: var(--itb-border-light);
}
/*bekomms grad nich besser hin*/
.itb-mavj-card-footer {
  background-color: var(--itb-bg-grey);
  border-bottom-left-radius: 40px!important;
  border-bottom-right-radius: 40px!important;
  height: 40px;
}

.header-logo {
  width: 205px;
  margin-top: -8px;
}

header a:hover {
  color: #000;
}

header a.nav-link {
  border-bottom: 3px solid white !important;
}

header .nav-link.active,
header .nav-link.itb-hover:hover,
header .itb-sprachwechsel a.active,
header .itb-sprachwechsel a:hover {
  border-bottom: 3px solid #e3000f  !important;;
}


.card a,
.list-group-item a {
  transition: color, background-color .3s ease-in-out;
  color: #2d2d2d;
}

a:hover,
.card .card-body a:hover,
.card a:hover,
.list-group-item a:hover {
  transition: all .3s ease-in-out;
  color: #e3000f;
  text-decoration: none;
}

.list-group-item{
  background-color: var(--itb-bg-grey);
}

header .itb-sprachwechsel {
  font-size: var(--bs-nav-link-font-size);
}

header .itb-sprachwechsel a {
  border: none;
}

body {
  font-family: NeuzeitGroteskRegular, Helvetica, Arial, sans-serif;
  color: var(--itb-color-black);
}

h1, h2, h3, h4, h5, h6 {
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: 300;
}

h1 {
  font-size: 2.0625rem;
  line-height: 2.625rem;
  font-weight: bolder;
}

h2 {
  font-size: 26px;
  line-height: 26px;
}

h3 {
  font-size: 24px;
  line-height: 24px;
  font-weight: 800;
}

h4 {
  font-size: 22px;
  line-height: 22px;
  font-weight: 600
}



footer {
  color: #fff;
  background-color: #4d4d4d;
}

footer a {
  color: white;
  border-bottom: 1px solid #4d4d4d;
}

footer a:hover {
  color: white;
  border-bottom: 1px solid white;
}

footer .card a {
  color: #212529;
}

footer .card {
  height: 100%;
}

footer .bottom-row {
  border-top: 1px solid white;
  padding-top: 5px;
}

footer .a-button__element {
  padding: 0 !important;
  width: 35px;
  height: 35px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

footer .a-button__element:hover {
  text-decoration: none;
}

footer  .m-follow-us__label span {
  font-size: 0.875rem;
  line-height: 1.375rem;
  letter-spacing: 0.39438rem
}

footer .col-6:has(.m-follow-us__label) {
  border-top: 1px solid white;
}

a {
  text-decoration-line: none;
}

a,
.card .card-body a:not(.btn) {
  color: #000;
  transition: all .3s ease-in-out;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: var(--itb-bg-vg-color)!important;
}


a {
  text-decoration-line: none;
}

a,
.card .card-body a:not(.btn) {
  color: #000;
  border-bottom: 3px solid #e3000f;
  transition: all .3s ease-in-out;
}


.card {
  color: var(--itb-color-black);
  background-color: var(--itb-bg-grey);
  opacity: 1;
  border-radius: 40px;
  border: none;
}

.pointer {
  cursor: pointer;
}

.card-header,
.card-footer {
  border-bottom: 0;
  border-top: 0;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  background: none!important;
  color: var(--bs-heading-color);
}

.btn {
  border-radius: 24px;
  transition: all .3s ease-in-out;
  padding: 12px 20px 10px 20px;
  display: inline-flex;
  align-items: center;
  font-size: 1.175rem;
  line-height: 1.175rem;
}

.btn-primary  {
  background-color: var(--itb-bg-vg-color);
  border-color: var(--itb-bg-vg-color);
  color: var(--itb-text-vg-light);
}

btn-primary:hover {
  background-color: #2d2d2d!important;
  border-color: #2d2d2d!important;
}

.btn-primary:active {
  background-color: #87888a!important;
  border-color: #87888a!important;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding: 0;
  margin-right: 2rem;
  color: #000000;
}


#nav-UNTEN .card,
#nav-UNTEN .accordion {
  border: none;
  background-color: #f2f2f2;
  border-radius: 24px;
}

#nav-UNTEN .accordion-header {
  border-radius: 24px;
  transition: all .3s ease-in-out;
  padding: 12px 12px 10px 20px;
  display: inline-flex;
  align-items: center;
  font-size: 1.175rem;
  line-height: 1.175rem;
}

#nav-UNTEN .card-body,
#nav-UNTEN .accordion-header{
  color: #212529!important;
}


#nav-UNTEN li {
  margin-bottom: 20px;
}

.navbar {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e3000f' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-focus-width: 0;
}


#kunden-nr {
  font-size: 12px;
}


.btn:not(:has(i)):not(:has([class*='bs-'])):after {

  transition: all .3s ease-in-out;
  display: block;
  color: inherit;
  font-family: "Font Awesome 7 Free";
  content: "\f054";
  font-weight: 900; /* Für Solid-Icons notwendig */
  margin-left: 5px;
}


.accordion-header {
  border-bottom: 0;
  font-size: 2rem;
  line-height: 2.575rem;
  font-weight: bolder;
}

progressbar {
  counter-reset: step
}

progressbar .badge::after {
  content: counter(step);
  counter-increment: step;
}


.badge {
  font-weight: normal;
}

.text2html{
  white-space: pre-line;
}

.loader {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid var(--itb-bg-vg-color); /* Orange */
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 2s linear infinite;
}



.loader-btn {
  border: 2px solid #f3f3f3; /* Light grey */
  border-top: 2px solid var(--itb-bg-vg-color);; /* Orange */
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

progressbar span.badge {
  display: none;
}

/***************** Layout fürs drucken der Übersichtsseite *********************/

@media print {
  @page {
    size: A4 portrait;
    margin: 16mm 8mm 10mm 8mm !important;
  }

  body {
    margin: 0;
    font-size: 11pt;
    line-height: 1.3;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .itb-print-container {
    display: block !important;
    column-count: 2;
    column-gap: 8mm;
  }

  .itb-print-container > .col-lg-4,
  .itb-print-container > .col-md-4 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 0 0 5mm 0;
    margin: 0 0 5mm 0;
    border: none;
    background: none;
    page-break-inside: auto;
    break-inside: auto;
  }

  .itb-print-container .card {
    box-shadow: none !important;
    border: 1px solid var(--itb-border-hover);
    border-radius: 3mm;
    background-color: var(--itb-bg-white);
    margin-bottom: 4mm;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .itb-print-container .card-header {
    background-color: var(--itb-bg-white);
  }

  .itb-print-vgDaten {
    margin-left: -3.5mm;
    margin-right: -3.5mm;
  }

  .itb-print-vgDaten .card {
    box-shadow: none !important;

    border-radius: 0;
    background-color: var(--itb-bg-white);
    margin-bottom: 3mm;
  }


  /*Für GF Adressen im Druck*/

  /* Zwingt die Karten in der Gruppe auch im Druck, keinen Abstand zu haben */
  .card.rounded-bottom-0, /* Das erste Element (Start) */
  .card.rounded-0 {       /* Die mittleren Elemente */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important; /* Verhindert doppelte Linien im Druck */
  }

  .card.rounded-0,       /* Die mittleren Elemente */
  .card.rounded-top-0 {  /* Das letzte Element (Ende) */
    margin-top: 0 !important;
    border-top: none !important;
  }
  /* Verhindert, dass eine einzelne Adresse in der Mitte auf zwei Seiten zerrissen wird */
  .card {
    break-inside: avoid;
  }
}

/*****************************************************************************/

/* Spaltenlayout Hallen-Kennungen Standanmeldungsseite */

.itb-dynamic-columns {
  column-count: var(--itb-dynamic-col-count, 1);

  /* Gap wenn mehr als eine Spalte, wird bei einer Spalte ignoriert */
  column-gap: 2rem;
}

.dynamic-columns > div {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 0.5rem;
}

/* Mobil immer einspaltig */
@media (max-width: 768px) {
  .itb-dynamic-columns {
    column-count: 1 !important;
  }
}



@media (min-width: 576px) {
  .itb-w-sm-50 { width: 50%!important; }
}
@media (min-width: 768px) {
  .itb-w-md-50 { width: 50%!important; }
}
@media (min-width: 992px) {
  .itb-w-lg-50 { width: 50%!important; }
}



/* itb- Negative Margin Klassen (Bootstrap 5 Spacing) */

.itb-me-n1 { margin-right: -0.25rem !important; }
.itb-me-n2 { margin-right: -0.5rem !important; }
.itb-me-n3 { margin-right: -1rem !important; }
.itb-me-n4 { margin-right: -1.5rem !important; }
.itb-me-n5 { margin-right: -3rem !important; }

.itb-mb-n1 { margin-bottom: -0.25rem !important; }
.itb-mb-n2 { margin-bottom: -0.5rem !important; }
.itb-mb-n3 { margin-bottom: -1rem !important; }
.itb-mb-n4 { margin-bottom: -1.5rem !important; }
.itb-mb-n5 { margin-bottom: -3rem !important; }


/* itb- Font Size Klassen (Bootstrap 5 komplett) */
.itb-fs-1 { font-size: 2.5rem !important; }           /* 40px - größte */
.itb-fs-2 { font-size: 2rem !important; }              /* 32px */
.itb-fs-3 { font-size: 1.75rem !important; }           /* 28px */
.itb-fs-4 { font-size: 1.5rem !important; }            /* 24px */
.itb-fs-5 { font-size: 1.25rem !important; }

.itb-preis-tag {
  min-width: 170px;
  background-color: var(--itb-bg-badge);
}

.alert-info {
  background-color: var(--itb-bg-color-violett);
  --bs-alert-border-color: var(--itb-bg-color-violett);
  color: var(--itb-color-black)
}

.alert-grey {
  background-color: var(--itb-bg-grey-dark);
  --bs-alert-border-color: var(--itb-bg-grey-dark);
  color: var(--itb-color-black)
}

.itb-bg-gray {
  background-color: var(--bs-gray);
}
.btn.disabled {
  pointer-events: auto!important;
}

@media (min-width: 576px) {
  .itb-position-sm-absolute { position: absolute !important; }
}
@media (min-width: 768px) {
  .itb-position-md-absolute { position: absolute !important; }
}
@media (min-width: 992px) {
  .itb-position-lg-absolute { position: absolute !important; }
}