:root { --indent: 1.5rem; }

/* Grundlayout */
.content-tree { list-style: none; padding-left: 0; max-width: 44rem; }
.content-tree li { position: relative; padding-left: calc(var(--indent) + .25rem); }
.content-tree li img { position: relative; left: -3px; }

/* Icon-Button vor jedem Eintrag */
.content-tree .toggle,
.content-tree li.leaf > .icon { 
    width: 1.25rem; height: 1.25rem; 
    display: inline-grid; place-items: center; 
    margin-left: calc(-1 * (var(--indent) + .25rem));
    margin-right: .25rem;
}

.content-tree .toggle { 
    appearance: none; border: 0; background: none; 
    cursor: pointer; border-radius: .375rem; 
    position: absolute;
    top: 3px;
}


button.toggle[aria-expanded="true"] {
    transform: rotate(90deg);
    transition: transform 0.2s ease-in-out;
}

button.toggle[aria-expanded="false"] {
    transform: rotate(0deg);
    transition: transform 0.2s ease-in-out;
}

/* Icons per CSS */

/* Links */
.content-tree a { text-decoration: none; color: inherit; border-radius: .375rem; padding: .0625rem .125rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.content-tree a:focus { outline: 2px solid #666; outline-offset: 2px; }

/* Einrückung der Kind-Listen */
.content-tree ul { list-style: none; margin: .25rem 0 .25rem 0; }

/* Sichtbarkeit der Kinder abhängig vom Button-Status */
.content-tree .toggle[aria-expanded="false"] ~ ul { display: none; }

.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

.content-body .breadcrumbs  {

}
.content-body .breadcrumbs ul {
    margin: 0;
}
.content-body p.preheading {
    font-size: var(--font-size-h1, 28px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--font-size-h1-lineheight, 30px); /* 107.143% */
    margin-bottom: 0;
}

.content-body h1 {
    color: var(--text-text-emphasize, #D22F27);

    /* h1 */
    font-size: var(--font-size-h1, 28px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--font-size-h1-lineheight, 30px); /* 107.143% */    
    margin-bottom: 32px;
}

.content-body h2 {
color: var(--Primitives-colors-purple-90, #322D7F);

font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 30px; /* 125% */
}

.content-body h3 {
    margin-bottom: 0;
}

.content-body p {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 137.5% */
    margin-bottom: 32px;
}

.content-body ul {
    margin-left: 20px;
    margin-bottom: 32px;
}


ul.content-tree,
ul.content-tree ul {
    margin-left: 0;
    margin-bottom: 0;
}

ul.content-tree li {
    margin-bottom: 12px;
}

ul.content-tree a, 
ul.content-tree .has-children a {
  display: flex;
  align-items: flex-start; /* Icon oben ausrichten */
  gap: 5px;              /* Abstand zwischen Icon und Text */
  text-decoration: none;
}


/* #################### Online Inhalte  ####################### */
/* Styling für den aufklappbaren Bereich der Online-Inhalte */
/* KORRIGIERT: Styling für den aufklappbaren Bereich der Online-Inhalte mit SVG-Pfeil */
/* KORRIGIERT (v2): Styling für den aufklappbaren Bereich der Online-Inhalte mit SVG-Pfeil - Vertikale Zentrierung */
/* KORRIGIERT (v3): Styling für mehrere aufklappbare Bereiche mit SVG-Pfeil */

.klappaktion { /* ID (#) wurde zu Klasse (.) geändert */
    cursor: pointer;
    position: relative;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 10px 15px;
}

.klappaktion .toggle-icon { /* ID (#) wurde zu Klasse (.) geändert */
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease-in-out;
    flex-shrink: 0;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dreht den Pfeil, wenn der Inhalt zugeklappt ist */
.online-inhalt.is-closed .toggle-icon {
    transform: rotate(-90deg);
}

/* Definiert den ausklappbaren Inhaltsbereich */
.online-content {
    max-height: 2000px;
    overflow: hidden;
    opacity: 1;
    padding: 15px;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, opacity 0.3s 0.2s ease-in-out;
}

/* Definiert den zugeklappten Zustand */
.online-inhalt.is-closed .online-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, opacity 0.2s ease-in-out;
}

/* #################### Ende Online Inhalte  ####################### */


/* ##################### mappe ###################################### */
.content-body .subtitle {
    font-size: var(--font-size-h1, 32px);
    font-weight: 400;
    line-height: var(--font-size-h1-lineheight, 38px); /* 118.75% */
}

.foerderschwerpunkte ul {
    margin-left: 0;
}

section.ziele {
    margin-top: 20px;
    margin-bottom: 0px;
}


/* Mape Ebene1 Sidebardownloads */
.sidbardownloads {
    padding: 12px 16px;
    margin-top: 32px;   
    border-radius: 12px;
    margin-top: 0;
}
.primar .sidbardownloads {
    background-color: var(--bg-blue);
}

.elementar .sidbardownloads {
    background-color: var(--background-bg-elevation, #DFF5F5);
}   
.sidbardownloads .sidedownloaditem {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.20);
}

.sidbardownloads h4 {
    color: var(--Primitives-colors-purple-90, #322D7F);
    font-size: var(--font-size-h4, 18px);
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 133.333% */
    margin-bottom: 16px;
}

#mobile-downloads,
#mobile-playlists {
    margin-top: 24px;
}

.mobile-downloads {
    position: relative;
}

.mobile-downloads__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--Primitives-colors-purple-90, #322D7F);
    font-size: var(--font-size-h4, 18px);
    font-weight: 700;
    line-height: 24px;
    text-align: left;
}

.mobile-downloads__toggle:focus {
    outline: none;
}

.mobile-downloads__toggle:focus-visible {
    outline: 2px solid rgba(50, 45, 127, 0.45);
    outline-offset: 3px;
}

.mobile-downloads__icon {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.mobile-downloads__toggle.is-open .mobile-downloads__icon {
    transform: rotate(180deg);
}

.mobile-downloads__panel {
    margin-top: 16px;
}

.mobile-downloads__panel[hidden] {
    display: none;
}

.playlist-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.playlist-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.playlist-link img {
    height: 24px;
    width: 24px;
}

.randspalte-block {
    margin-top: 24px;
    padding-left: 16px;
    border-left: 1px solid #322D7F;
    color: #322D7F;
}

.randspalte-block > :last-child {
    margin-bottom: 0;
}


.sidebardownloads .sidedownloaditem a {
    display: block;
    width: 100%;
}

.sidedownloaditem span {
    display: block;
    color: var(--Primitives-colors-purple-90, #322D7F);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 114.286% */
    margin-top: 10px;
}

.sbdlimg {
    width: 50%;
    display: block;
}


.content-body #content ul:not(.noarrow) {
  /* Das Standard-Aufzählungszeichen wird durch das Bild ersetzt */
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none'%3E%3Cpath d='M9.7959 0.691406C9.97174 0.691406 10.1346 0.752776 10.2705 0.888672L14.792 5.41016C14.928 5.54613 14.9893 5.70888 14.9893 5.88477C14.9892 6.06504 14.9109 6.24043 14.792 6.35938L14.791 6.3584L10.2705 10.8945C10.1346 11.0304 9.97174 11.0918 9.7959 11.0918C9.41829 11.0916 9.125 10.7761 9.125 10.4199C9.12503 10.2441 9.18632 10.0813 9.32227 9.94531L12.7246 6.55664H1.68262C1.30867 6.55664 1.01079 6.2587 1.01074 5.88477C1.01074 5.52079 1.31255 5.22656 1.68262 5.22656H12.7246L9.32227 1.83789C9.18632 1.70194 9.12503 1.53912 9.125 1.36328C9.125 0.981962 9.45739 0.691598 9.7959 0.691406Z' fill='%23D22F27' stroke='%23D22F27' stroke-width='0.4'/%3E%3C/svg%3E");

  /* Optional: Position anpassen */
  list-style-position: outside;
  padding-left: 0;
}