.elementor-4617 .elementor-element.elementor-element-1a19557{--display:flex;}.elementor-4617 .elementor-element.elementor-element-4ff5b9c{--box-border-color:#FFFFFF;--box-padding:2px;--item-text-transition-duration:400ms;--item-text-active-color:var( --e-global-color-primary );--item-text-active-decoration:underline;}.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__header-title{text-align:start;}.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-item{font-size:17px;font-weight:700;line-height:16px;letter-spacing:0px;}/* Start custom CSS for table-of-contents, class: .elementor-element-4ff5b9c *//* 1. Haupt-Container: Modernes Card-Design mit weichen Schatten */
.elementor-4617 .elementor-element.elementor-element-4ff5b9c {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px); /* Glassmorphism Effekt */
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(0, 0, 0, 0.05); /* Sehr dezenter Rand */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0,0,0,0.02);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Hover-Effekt für die gesamte Card */
.elementor-4617 .elementor-element.elementor-element-4ff5b9c:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0,0,0,0.03);
    transform: translateY(-2px);
}

/* 2. Header-Bereich (z.B. "Inhaltsverzeichnis") */
.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__header {
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__header-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    letter-spacing: -0.01em;
}

/* 3. Listen-Wrapper: Erzeugt eine dünne vertikale "Timeline"-Linie links */
.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-wrapper {
    list-style: none !important;
    padding-left: 8px !important;
    position: relative;
}

.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__body > .elementor-toc__list-wrapper::before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 8px;
    width: 2px;
    background: #f3f4f6; /* Hellgraue Linie */
    border-radius: 4px;
}

/* 4. Einzelne Listenpunkte anpassen */
.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-item {
    margin: 14px 0 !important;
    padding-left: 20px !important;
    position: relative;
}

/* Punkte auf der Timeline-Linie */
.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-item::before {
    content: '';
    position: absolute;
    left: 4px; /* Punkt auf der Linie zentrieren */
    top: 10px;
    width: 10px;
    height: 10px;
    background-color: #e5e7eb;
    border-radius: 50%;
    border: 2px solid #ffffff; /* Weißer Rand trennt den Punkt optisch ab */
    z-index: 2;
    transition: all 0.3s ease;
}

/* 5. Die eigentlichen Text-Links */
.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-item-text {
    color: #6b7280 !important; /* Dezentes Grau */
    font-size: 0.95rem !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.3s ease;
    display: block;
    line-height: 1.5;
}

/* 6. Animierte Hover-Zustände */
.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-item:hover::before {
    background-color: #2563eb; /* Blau beim Hover - passe den Hex-Code an deine Brand an */
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); /* Leichter blauer Glow */
}

.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-item-text:hover {
    color: #111827 !important; /* Wird dunkelblau/schwarz */
    transform: translateX(4px); /* Schiebt den Text weich nach rechts */
}

/* 7. Aktiver Zustand (der Punkt, an dem der Nutzer gerade auf der Seite ist) */
.elementor-4617 .elementor-element.elementor-element-4ff5b9c a.elementor-item-active {
    color: #2563eb !important; /* Hauptfarbe */
    font-weight: 600;
}

/* Modernes CSS: Fährt den aktiven Punkt der Timeline mit ein */
.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-item:has(> a.elementor-item-active)::before {
    background-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* 8. Fix für verschachtelte Menüpunkte (Sub-Items) */
.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-wrapper .elementor-toc__list-wrapper {
    margin-top: 8px !important;
}

.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-wrapper .elementor-toc__list-wrapper::before {
    display: none; /* Keine doppelte Linie bei Unterpunkten */
}
/* 9. Verhindert den horizontalen Scrollbalken beim Hover-Effekt */
.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__body {
    overflow-x: hidden !important;
}

/* Gibt dem Text rechts minimal Luft, damit er durch die 4px-Verschiebung nicht abgeschnitten wird */
.elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-wrapper {
    padding-right: 10px !important;
}

/* ==================================================
   10. DARK MODE STYLING (Greift bei data-theme="dark")
   ================================================== */

/* Haupt-Container für Dark Mode (Dunkles, transparentes Grau) */
body[data-theme="dark"] .elementor-4617 .elementor-element.elementor-element-4ff5b9c {
    background: rgba(30, 41, 59, 0.75) !important; /* Entspricht Slate-800 */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Sehr feiner, heller Rand */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); /* Kräftigerer Schatten im Dunklen */
}

/* Trennlinie unter dem Header */
body[data-theme="dark"] .elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__header {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

/* Header Text (Weiß) */
body[data-theme="dark"] .elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__header-title {
    color: #f8fafc !important; 
}

/* Timeline-Linie links (Dezentes Weiß-Grau) */
body[data-theme="dark"] .elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__body > .elementor-toc__list-wrapper::before {
    background: rgba(255, 255, 255, 0.1);
}

/* Inaktive Punkte auf der Timeline */
body[data-theme="dark"] .elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-item::before {
    background-color: #334155;
    border-color: #1e293b; /* Rand passend zum dunklen Hintergrund */
}

/* Normaler Link-Text (Hellgrau) */
body[data-theme="dark"] .elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-item-text {
    color: #94a3b8 !important;
}

/* Link-Text beim Hover (Strahlendes Weiß) */
body[data-theme="dark"] .elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-item-text:hover {
    color: #f8fafc !important;
}

/* Hover-Status für die Timeline-Punkte (Etwas helleres Blau für besseren Leucht-Effekt) */
body[data-theme="dark"] .elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-item:hover::before {
    background-color: #3b82f6; 
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Aktiver Link-Text */
body[data-theme="dark"] .elementor-4617 .elementor-element.elementor-element-4ff5b9c a.elementor-item-active {
    color: #3b82f6 !important; 
}

/* Aktiver Timeline-Punkt (Leuchtet Blau) */
body[data-theme="dark"] .elementor-4617 .elementor-element.elementor-element-4ff5b9c .elementor-toc__list-item:has(> a.elementor-item-active)::before {
    background-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
}/* End custom CSS */