.page .container input:checked~h3~div.acc_txt {
    max-height: 1500px; /* Akkordeon-Inhalt sichtbar bei aktivem Input */
}

.scroll-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 1000px;
    overflow-y: auto;
    /* padding-right: 0.5rem; */ /* optional für Scrollbar-Platz */
}

/* Menüelement-Stil */
.api-item {
    padding: 0.8rem 1rem;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    /* border-radius: 4px; */
    font-size: 0.95rem;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.api-item:hover {
    background-color: #eef4ff; /* Hover-Effekt */
}

.api-item:active {
    background-color: #dce8ff; /* Klick-Effekt */
}

.api-item:focus {
    outline: 2px solid #80bdff; /* Fokus-Anzeige */
}

/* Modernes Dropdown-Design */
select.modern-select {
    height: 40px;
    padding: 0 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95rem;
    background-color: #fff;
    color: #333;
    box-sizing: border-box;
    width: 100%;
}

/* Scrollbar-Stil (Webkit) */
.scroll-container::-webkit-scrollbar {
    width: 6px;
}
.scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* Details/Accordion-Header */
details summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    position: relative;
    padding: 1em;
    font-size: 0.9em;
    background-color: #f0f0f0;
    font-weight: normal !important;
}

details summary::before {
    content: "▶";
    font-size: 0.8em;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

details[open] summary::before {
    transform: rotate(90deg); /* Pfeil zeigt nach unten */
}

/* Funktionsliste mit Scrollbereich */
.api-function-list {
    display: flex;
    flex-direction: column;
    /* gap: 0.5rem; */
    max-height: 500px;
    overflow-y: auto;
    /*padding-right: 0.5rem; */
}

/* Scrollbar-Stil (Webkit) */
.api-function-list::-webkit-scrollbar {
    width: 6px;
}
.api-function-list::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}


/* CSS */
/* 1. Vollflächiges Overlay, zentriert per Flexbox */
#spinnerContainer {
  position: fixed;
  top: 0;
  left: 125px;
  width: 100vw;
  height: 100vh;
  background: rgba(255,255,255,0.6); /* halbtransparentes Weiß */
  display: flex;
  justify-content: center;  /* horizontal zentrieren */
  align-items: center;      /* vertikal zentrieren */
  z-index: 9999;            /* über allen anderen Inhalten */
  display:none;
}

/* 2. Der Spinner-Kreis */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0,0,0,0.1);
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* 3. Keyframes */
@keyframes spin {
  to { transform: rotate(360deg); }
}