@font-face {
    font-family: 'Helvetica HAN';
    src: url('fonts/HelveticaLTStd-BoldCond.eot');
    src: url('fonts/HelveticaLTStd-BoldCond.eot?#iefix') format('embedded-opentype'),
        url('fonts/HelveticaLTStd-BoldCond.woff2') format('woff2'),
        url('fonts/HelveticaLTStd-BoldCond.woff') format('woff'),
        url('fonts/HelveticaLTStd-BoldCond.ttf') format('truetype'),
        url('fonts/HelveticaLTStd-BoldCond.svg#HelveticaLTStd-BoldCond') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica HAL';
    src: url('fonts/HelveticaLTStd-UltraComp.eot');
    src: url('fonts/HelveticaLTStd-UltraComp.eot?#iefix') format('embedded-opentype'),
        url('fonts/HelveticaLTStd-UltraComp.woff2') format('woff2'),
        url('fonts/HelveticaLTStd-UltraComp.woff') format('woff'),
        url('fonts/HelveticaLTStd-UltraComp.ttf') format('truetype'),
        url('fonts/HelveticaLTStd-UltraComp.svg#HelveticaLTStd-UltraComp') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica C';
    src: url('fonts/HelveticaLTStd-LightCond.eot');
    src: url('fonts/HelveticaLTStd-LightCond.eot?#iefix') format('embedded-opentype'),
        url('fonts/HelveticaLTStd-LightCond.woff2') format('woff2'),
        url('fonts/HelveticaLTStd-LightCond.woff') format('woff'),
        url('fonts/HelveticaLTStd-LightCond.ttf') format('truetype'),
        url('fonts/HelveticaLTStd-LightCond.svg#HelveticaLTStd-LightCond') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quentin';
    src: url('fonts/Quentin.eot');
    src: url('fonts/Quentin.eot?#iefix') format('embedded-opentype'),
        url('fonts/Quentin.woff2') format('woff2'),
        url('fonts/Quentin.woff') format('woff'),
        url('fonts/Quentin.ttf') format('truetype'),
        url('fonts/Quentin.svg#Quentin') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {font-family: "Helvetica C", sans-serif; color: rgb(0,0,0); font-size: 1.3rem !important;}
h1 {font-family: "Helvetica HAN", sans-serif; color: rgb(0,0,0); font-size: 2rem !important;}
h3 {font-family: "Helvetica HAL", sans-serif; color: rgb(0,0,0); font-size: 2.5rem !important;}

.scroll-container { scroll-behavior: smooth; }

.group-items {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(-5px);
  transition: height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
  position: relative;
}
.group-items.open { opacity:1; transform: translateY(0); }

.group-icon { transition: transform 0.4s ease; }
.group-icon.open { transform: rotate(180deg);}

.accordion-content {
  overflow:hidden;
  height:0;
  opacity:0;
  transform: translateY(-5px);
  transition: height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
}
.accordion-content.open { opacity:1; transform: translateY(0); }

.accordion-icon { transition: transform 0.3s ease; }
.accordion-icon.open { transform: rotate(180deg); stroke: rgb(216,6,58); }

.spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spinner div {
  width: 1.5rem;
  height: 1.5rem;
  border: 4px solid rgb(155,190,0);
  border-top-color: transparent;
  border-radius: 9999px;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.accordion-group.active > .group-trigger { 
  background-color: rgb(155,190,0); 
  color: rgb(0,0,0); 
}
.group-trigger:hover, .accordion-trigger:hover { 
  background-color: rgb(216,6,58); 
  color: rgb(0,0,0);
}

.accordion-trigger svg { width: 1rem; height: 1rem; transition: transform 0.3s ease; stroke: rgb(116,116,115); }
.accordion-trigger.open svg { transform: rotate(180deg); stroke: rgb(255,255,255); }

/* Fortschrittsbalken - jetzt Primärgrün */
.progress-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: rgb(216,6,58); /* Rot */
  width: 0%;
  transition: width 0.3s ease;
  border-radius: 0 2px 2px 0;
}

.group-trigger {
  position: relative;
  overflow: hidden;
  color: rgb(0,0,0);
}

/* Sidebar-Links jetzt CI-Farben */
.anchor-link { color: rgb(0,0,0); text-decoration: none; }
.anchor-link:hover { color: rgb(0,0,0); text-decoration: underline; }

/* Pills CI-Farben */
a.inline-block, a.inline-flex {
  background-color: rgb(155,190,0);
  color: rgb(0,0,0);
}
a.inline-block:hover, a.inline-flex:hover { background-color: rgb(216,6,58); color: #fff; }

.bg-gray-100 { background-color: rgb(245,245,245); }
.bg-gray-200 { background-color: rgb(230,230,230); }
.shadow { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }

/* Spinner nur über ::after */
.button.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px; /* exakt Hälfte */
    border: 2px solid currentColor;       /* übernimmt Button-Schriftfarbe */
    border-top-color: transparent;
    border-radius: 50%;
    animation: spinn 1s linear infinite;
}

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