/* --- Start Konferenz Styles (Angepasst an Publikations-Look) --- */
ul.conferences-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

li.conference-entry {
    padding: 8px 15px;          /* NEU: Vertikales + Horizontales Padding */
    margin-bottom: 8px;         /* Abstand zwischen Items */
    border-bottom: 1px solid #eee; /* Dünne Trennlinie */
}

li.conference-entry:last-child {
    border-bottom: none;         /* Kein Border beim letzten Element */
    margin-bottom: 0;
}

p.conf-title-line {
    font-size: 0.9rem;
    font-weight: 600;
    color: #000;
    margin: 0 0 4px 0;
    line-height: 1.3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

span.conf-location-date {
    font-size: 0.85rem;
    color: #000;
    line-height: 1.3;
    font-weight: normal;
    /* margin: 0 0 0 15px; */    /* Alt: Einzug links entfernt */
    margin: 0;                   /* NEU: Kein Margin */
    padding: 0;
}

.collapse-btn {
    background: #34b39f;
    border: none;
    color: white;
    border-radius: 25px;
    padding: 8px 40px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(52, 179, 159, 0.2);
}

.collapse-btn:hover {
    background: #2a9985;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(52, 179, 159, 0.3);
    color: white;
}

.collapse-btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(52, 179, 159, 0.25);
    color: white;
}

.collapse-btn .fa-caret-down {
    transition: transform 0.3s ease;
}

.collapse-btn.collapsed .fa-caret-down {
    transform: rotate(-90deg);
}

/* --- Collapse Button Styles für Konferenzen --- */
.conferences-collapse-btn {
    width: 500px; /* Specific style for conferences button */
}

/* --- Collapse Button Styles für Publikationen --- */
.publications-collapse-btn {
    width: 480px; /* Specific style for publications button */
}

.conferences-fade-in {
    animation: conferencesFadeIn 0.5s ease-in;
}

@keyframes conferencesFadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* --- Preview Entry Styles (Sanfte Vorschau) --- */
/* Die folgenden CSS-Regeln wurden entfernt, um die halbtransparente Vorschau der nächsten Listeneinträge zu deaktivieren. */
/*
.next-entry-preview {
    list-style-type: none;
    padding-left: 0; 
    margin-top: -10px; 
    margin-bottom: 20px; 
    position: relative;
    z-index: 1; 
}

.next-entry-preview li {
    background-color: rgba(255, 255, 255, 0.5); 
    border: 1px solid #eee; 
    padding: 5px 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 0.9em;
    opacity: 0.7; 
    transition: opacity 0.3s ease;
}

.next-entry-preview li:hover {
    opacity: 1; 
}
*/
/* --- Ende Konferenz Styles --- */

.field-research-location {
    color: #555;
    font-weight: normal;
}


.sidebar {
        width: 245px;
        background-color: #1a1a1a;
        color: #f5f5f5;
        position: fixed; /* Wichtig für die feste Sidebar */
        height: 100vh;
        display: flex; /* Hinzugefügt */
        flex-direction: column;
        align-items: center;
        padding-top: 20px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        flex-shrink: 0; /* Verhindert Schrumpfen der Sidebar */
        z-index: 1000;
    }

    .sidebar .profile-img {
        width: 200px;
        height: 200px;
        border-radius: 5%;
        object-fit: cover;
        margin-bottom: 40px;
    }

    .sidebar h2 {
        margin-bottom: 20px;
        color: #34b39f;
    }

    .sidebar a {
        color: #f5f5f5;
        text-decoration: none;
        padding: 7px 17px;
        margin: 5px 0;
        width: 90%;
        text-align: center;
        border-radius: 10px;
    }

    .sidebar a:hover {
        background-color: #34b39f;
        color: #1a1a1a;
    }

    .content {
        margin-left: 235px ; /* Reduzierter Wert für den Abstand links */
        width: calc(100% - 230px) ; /* Korrekte Breite */
        padding: 30px;
        padding-right: 1px;
        color: #000;
        overflow-x: hidden;
        /* Flexbox für die Content-Höhe */
        flex: 1; /* Erlaube dem Content-Bereich zu wachsen */
    }

    .section {
        padding: 30px 7px;
        margin: 20px 0;
    }

    .section-title {
        font-size: 1.8rem;
        margin-bottom: 20px;
        color: #34b39f;
    }

    .experience-card {
        display: flex; /* Flexbox-Layout für horizontale Ausrichtung */
        justify-content: space-between; /* Abstand zwischen Text und Logo */
        align-items: center; /* Vertikale Ausrichtung */
        background: #fff;
    }

    .card-body {
        padding: 20px; /* Einheitliches Padding für den Inhalt */
    }

    .experience-card {        border: none;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        padding: 20px; /* Gleichmäßiger Innenabstand */
    }

        /* NEU: Einheitlicher Stil für Haupt-Überschriften in Education & Experience */
    .experience-card h5 {
        font-size: 1.1rem;  /* Etwas größer als vorher in Experience, an Education angepasst */
        font-weight: 600;   /* Fett */
        margin-bottom: 5px; /* Etwas mehr Abstand nach unten */
        line-height: 1.3;   /* Standard Zeilenhöhe */
        color: #000;       /* Standard Textfarbe */
    }

    .experience-card p + ul {
        margin-top: 15px; /* Oder einen anderen gewünschten Wert für mehr Abstand */
    }

    /* NEU: Einheitlicher Stil für Zweit-Überschriften/Details in Education & Experience */
    .experience-card p {
        margin: 0 0 10px 0;  /* Increased bottom margin for more space */
        font-size: 0.85rem; /* Kleinere Schriftgröße (wie vorher in Experience) */
        font-style: normal; /* Normale Schrift (nicht kursiv) */
        line-height: 1.3;   /* Angepasste Zeilenhöhe */
        color: #000;       /* Standard Textfarbe */
    }

    #education ul {
        padding-left: 18px; /* Gleicher Einzug wie in experience section */
    }
    

    /* Einheitlicher Stil für Listenelemente (Fließtext) in relevanten Sektionen */
    #about ul li,
    #education ul li,
    #experience ul li,
    #skills ul li {
        margin: 0 0 3px 0;  /* Kleiner Abstand unten */
        font-size: 0.85rem; /* Kleinere Schriftgröße (wie bei p) */
        font-style: normal; /* Normale Schrift */
        line-height: 1.3;   /* Angepasste Zeilenhöhe */
        color: #000;       /* Standard-Textfarbe (konsistent mit body) */
    }

    /* Remove indentation for lists within education entries */
    .education-entry .entry-details ul {
        padding-left: 0; /* Remove default browser padding */
        list-style-position: outside; /* Ensure bullets are outside, aligning with text above */
    }

    /* Add padding to the right of the text container in education section */
    .entry-details {
        padding-right: 15px; /* Add space between text and logo */
        flex: 1; /* Allow text container to grow */
    }

    /* Einheitlicher Stil für Logo-Container in Experience/Field Research etc. */
    .experience-logo {
        display: flex;
        flex-direction: column;   /* Logos untereinander */
        justify-content: center;  /* Vertikal zentrieren im Container */
        align-items: center;    /* Horizontal zentrieren im Container */
        width: 150px;             /* Feste Breite für den Container */
        flex-shrink: 0;           /* Verhindert Schrumpfen */
        margin-left: 20px;          /* Einheitlicher Abstand zum Text */
        /* min-width entfernt */
        /* text-align entfernt */
    }

    /* Einheitlicher Stil für Bilder innerhalb des Logo-Containers */
    .experience-logo img {
        display: block;           /* Verhindert extra Platz unter Bildern */
        max-width: 100%;          /* Bild passt sich max. der Container-Breite an */
        max-height: 100px;         /* Einheitliche max. Höhe (Anpassen nach Bedarf) */
        width: auto;              /* Breite automatisch anpassen */
        height: auto;             /* Höhe automatisch anpassen */
        object-fit: contain;      /* Seitenverhältnis beibehalten */
        margin-bottom: 10px;      /* Abstand zwischen Logos (wenn mehrere) */
    }
    .experience-logo img:last-child {
        margin-bottom: 0;         /* Kein Abstand nach dem letzten Logo */
    }

    .experience-content {
        flex: 1; /* Nimmt den verbleibenden Platz ein */
        padding-right: 15px; /* Abstand zum Logo - Ensure consistent spacing */
    }

    .experience-content ul {
        margin-top: 5px; /* Weniger Abstand nach oben */
        padding-left: 18px;
    }

    .skills-section {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .skill-category {
        /* flex: 1 1 calc(50% - 20px);  <- Entferne diese Zeile */
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 14px 14px 12px 14px;
        margin-bottom: 10px;
    }

    .skill-category h4 {
        margin-bottom: 15px;
        color: #000;
        font-size: 0.95rem;
        font-weight: 600;
        background-color: #f0f0f0; /* Hintergrundfarbe des Balkens */
        padding: 7px 10px;
        display: inline-block;
        border-radius: 4px;
    }

    .skills-columns {
    display: flex;
    gap: 20px;
    /* Abstand zwischen den Spalten */
    width: 100%;
    /* Füge diese Zeile hinzu */
    }

    .skills-column {
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* Abstand zwischen den Items */
        flex: 1;
        /* Gleiche Breite für beide Spalten */
        align-items: stretch;
        /* Füge diese Zeile hinzu */
    }

    .skill-item {
        display: flex;
        margin-bottom: 6px;
        align-items: center;
    }

    .skill-item p {
        flex-grow: 1;
        margin: 0;
        display: flex;
        align-items: center;
        font-size: 0.97rem;
    }

    .skill-logo {
        width: 36px;
        border-radius: 5px;
        margin-right: 8px;
        display: block;
        align-items: unset;
    }

    .skill-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    
    /* --- Start Publikationen Styles --- */
    .publications-list {
    list-style: none;
    padding: 0; /* Horizontales Padding entfernt, um sich auf .card-body zu verlassen */
    margin: 0; /* Kein zusätzlicher Margin für die Liste selbst */
}

    .publication-item {
    display: flex;               /* Hauptlayout: Text links, DOI rechts */
    align-items: flex-start;     /* Oben ausrichten */
    padding: 10px 0;             /* Nur vertikales Padding, angepasst an ursprünglichen Stil */
    margin-bottom: 10px;         /* Abstand zwischen Items */
    border-bottom: 1px solid #eee; /* Dünne Trennlinie */
    /* Hintergrund, Schatten und Radien vom übergeordneten Container */
}
    .publication-item:last-child {
        border-bottom: none;         /* Kein Border beim letzten Element */
        margin-bottom: 0;            /* Kein Margin beim letzten Element */
    }

    .publication-content {
        flex-grow: 1;                /* Nimmt verfügbaren Platz ein */
        padding-right: 15px;         /* Abstand zum DOI-Logo */
    }

    .pub-title {                     /* NEU: Stil für Titelzeile - Angepasst an Konferenzen */
    font-size: 0.9rem;           /* Wie conf-title-line */
    font-weight: normal; /* Angepasst an conf-location-date */
    color: #000;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

    .pub-details {                   /* NEU: Stil für Detailzeile - Angepasst an Konferenzen */
        font-size: 0.8rem;           /* Smaller size to match conference talk line perception */
        color: #555;
        line-height: 1.3;
        font-weight: normal;
        margin: 0;
    }

    .pub-details .doi-link {        /* Stil für DOI-Link innerhalb der Details */
        color: #007bff;              /* Blaue Linkfarbe */
        text-decoration: none;
        font-family: monospace;      /* Optional: Monospace für DOI */
        white-space: nowrap;         /* Verhindert Umbruch des DOI-Links */
    }
    .pub-details .doi-link:hover {
        text-decoration: underline;
    }

    .publication-doi {               /* Container für DOI-Logo */
        flex-shrink: 0;             /* Verhindert Schrumpfen */
        width: 30px;                /* Schmaler Container */
        text-align: center;         /* Zentriert Logo horizontal */
        padding-top: 3px;           /* Optional: Leicht nach unten schieben für bessere Ausrichtung mit Titel */
    }

    .doi-logo {                     /* Das DOI-Logo selbst */
        width: 25px;                /* Kleineres Logo */
        height: 25px;               /* Kleineres Logo */
        vertical-align: middle;    /* Bessere vertikale Ausrichtung */
    }

    .doi-text {
        font-family: monospace;
        font-size: 0.9em;
    }

    /* Link-Stil für DOI in der letzten Zeile */
    .doi-link {
        text-decoration: none;
        color: #007bff; /* Link-Farbe */
    }

    .doi-link:hover {
        text-decoration: underline;
    }


/* --- Start Mentoring Styles (Angepasst & Korrigiert) --- */

.arbeiten-header { /* Stil für die Überschrift über der Liste */
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #000;
}

ul.mentoring-list { /* Die Liste selbst */
    list-style: none;
    padding: 0;
    margin: 0;
}

li.mentoring-entry {
    /* padding: 10px 15px; */      /* Alt */
    padding: 6px 15px;           /* NEU: Weniger Padding oben/unten */
    /* margin-bottom: 10px; */    /* Alt */
    margin-bottom: 7px;          /* NEU: Weniger Abstand zwischen Items */
    border-bottom: 1px solid #eee;
}
li.mentoring-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Hauptzeile (Arbeitstitel links, Name rechts) */
p.mentoring-title-line {
    font-size: 0.85rem;           /* Größe wie Konferenztitel */
    font-weight: normal;            /* Fett */
    color: #000;
    margin: 0;                   /* Kein Margin mehr nötig */
    line-height: 1.3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Der Name des Studenten rechts */
span.mentoring-student-name {
    font-size: 0.85rem;
    font-weight: normal; /* Ensure font-weight is normal */
    color: #555; /* Ensure color is grey */
    white-space: nowrap;
    text-align: right;
    padding-left: 15px;
    flex-shrink: 0;
}

span.mentoring-instructor {
    font-size: 0.85rem;
    font-weight: normal;
    color: #555;
    white-space: nowrap;
    text-align: right;
    padding-left: 15px;
    flex-shrink: 0;
}

/* --- Ende Mentoring Styles --- */

/* --- Start Further Education Styles --- */
.further-edu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.further-edu-entry {
    padding: 8px 15px;
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.further-edu-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

p.further-edu-title-line {
    font-size: 0.9rem;
    font-weight: 600;
    color: #000;
    margin: 0 0 4px 0;
    line-height: 1.3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

span.further-edu-instructor {
    font-size: 0.85rem;
    color: #555; /* Graue Farbe für den Dozenten */
    font-weight: normal;
    margin: 0;
    padding: 0;
}

.further-edu-details {
    margin-top: 4px;
}

p.further-edu-location {
    font-size: 0.85rem;
    color: #555; /* Grau für den Ort */
    line-height: 1.3;
    font-weight: normal;
    margin: 0 0 3px 0;
    padding: 0;
    font-style: normal;
    list-style-type: none;
}

p.further-edu-description {
    font-size: 0.85rem;
    color: #000; /* Schwarz für die Beschreibung */
    line-height: 1.3;
    font-weight: normal;
    margin: 0 0 3px 0;
    padding: 0;
    font-style: normal;
    list-style-type: none;
}

/* Alte Regel auskommentiert oder entfernt, falls nicht mehr benötigt */
/* p.further-edu-detail-item { */
    font-size: 0.85rem;
    color: #000; /* Standardmäßig schwarze Schriftfarbe */
    line-height: 1.3;
    margin: 0 0 4px 0;
}
/* --- Ende Further Education Styles --- */

/* --- Start Teaching Styles (Angepasst an neues Design) --- */

ul.teaching-list { /* Die Liste selbst */
    list-style: none;
    padding: 0;
    margin: 0;
}

li.teaching-entry { /* Einzelner Eintrag */
    padding: 7px 15px;           /* Vertikales + Horizontales Padding (wie andere Sektionen) */
    margin-bottom: 7px;          /* Abstand zwischen Items (wie andere Sektionen) */
    border-bottom: 1px solid #eee; /* Trennlinie */
}
li.teaching-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Hauptzeile (Kurstitel links, Datum/Modul rechts) */
p.teaching-title-line {
    font-size: 0.9rem;           /* Größe wie Konferenz/Mentoring */
    font-weight: 600;            /* Fett */
    color: #000; /* Geändert auf Schwarz */
    margin: 0 0 4px 0;           /* Abstand nur nach unten */
    line-height: 1.3;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;         /* Oder flex-start, falls Titel umbricht? Testen! */
}

/* Der Datum/Modul-Teil rechts */
span.teaching-date {
    font-size: 0.85rem;
    font-weight: normal; /* Geändert von 600 auf normal */
    color: #555; /* Explizit auf Grau gesetzt */
    white-space: nowrap;
    text-align: right;
    padding-left: 15px;
    flex-shrink: 0;
}

p.teaching-location {
    font-size: 0.85rem;
    color: #555; /* Grau für den Ort */
    line-height: 1.3;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

span.teaching-title-actual { /* Angepasst von p zu span für den eigentlichen Titel */
    font-size: 0.9rem; /* Konsistent mit teaching-title-line */
    font-weight: 600;
    color: #000; /* Schwarz für den Titel */
    /* margin und padding sind für inline-Elemente wie span oft nicht relevant oder wirken anders, 
       aber da es sich um Text handelt, der die Zeilenhöhe von p.teaching-title-line erbt, ist es ok. */
    line-height: 1.3;
}

/* Die Regel p.teaching-detail-item wird nicht mehr benötigt oder umfunktioniert, 
   da wir spezifischere Klassen für Ort und Titel haben. 
   Wenn teaching-title-line bereits den Titeltext enthält und schwarz ist, 
   brauchen wir teaching-title-actual eventuell nicht und können 
   teaching-detail-item für den Ort verwenden und umbenennen. 
   Aktuell ist teaching-title-line für die ganze Zeile (Titel + Modul) zuständig. 
   Der Titel selbst ist nicht in einem separaten p-Tag innerhalb von teaching-title-line. 
   Daher ist es besser, die Struktur in HTML anzupassen. 
   Die p.teaching-detail-item Regel wird zu p.teaching-location. */


p.conf-talk-line {
    font-size: 0.85rem;
    color: #000;
    line-height: 1.3;
    font-weight: normal;
    margin: 0;
    padding: 0;
}
/* --- Ende Konferenz Styles --- */

.field-research-location {
    color: #555;
    font-weight: normal;
}


/* --- General Styles --- */
html {
    height: 100%; /* Grundlage für %-Höhen */
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    display: flex;
    background-color: #f5f5f5;
    min-height: 100vh; /* Stellt sicher, dass der Body mind. Bildschirmhöhe hat */
}

.sidebar {
    width: 245px;
    background-color: #1a1a1a;
    color: #f5f5f5;
    position: fixed;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    z-index: 1000;
}

.sidebar .profile-img {
    width: 200px;
    height: 200px;
    border-radius: 5%;
    object-fit: cover;
    margin-bottom: 40px;
}

.sidebar h4 { /* Corrected from h2 to match HTML */
    margin-bottom: 20px;
    color: #34b39f;
}

.sidebar a {
    color: #f5f5f5;
    text-decoration: none;
    padding: 7px 17px;
    margin: 5px 0;
    width: 90%;
    text-align: center;
    border-radius: 10px;
}

.sidebar a:hover {
    background-color: #34b39f;
    color: #1a1a1a;
}

/* Layout for main content area beside sidebar */
.main-column {
    display: flex;
    flex-direction: column; /* Inhalt und Footer untereinander */
    flex-grow: 1; /* Nimmt den Platz neben der Sidebar ein */
    min-height: 100vh; /* Stellt sicher, dass diese Spalte die Höhe füllen will */
    margin-left: 245px; /* Width of the sidebar */
    width: calc(100% - 245px);
}

.content {
    flex-grow: 1; /* Allows content to push footer down */
    width: 100%; /* Full width within .main-column */
    margin-left: 0; /* No direct margin from sidebar, handled by .main-column */
    padding: 30px;
    padding-right: 1px; /* Specific padding */
    color: #000;
    overflow-x: hidden;
}

.section {
    padding: 30px 7px;
    margin: 20px 0;
}

.section-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #34b39f;
}

/* --- Experience & Education Card Styles --- */
.experience-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    padding: 20px;
}

.experience-card h5 { /* Unified style */
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.3;
    color: #000;
}

.experience-card p {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    font-style: normal;
    line-height: 1.3;
    color: #000;
}

/* Unified list item style for general content lists */
#about ul li,
#education ul li,
#experience ul li,
#skills ul li {
    margin: 0 0 3px 0;
    font-size: 0.85rem;
    font-style: normal;
    line-height: 1.3;
    color: #000;
}

/* Specifics for education entry lists */
.education-entry .entry-details ul {
    padding-left: 0;
    list-style-position: outside;
}

.entry-details { /* For education section */
    padding-right: 15px;
    flex: 1;
}

.experience-content { /* For experience section cards */
    flex: 1;
    padding-right: 15px;
}

.experience-content ul {
    margin-top: 5px;
    padding-left: 18px;
}

.experience-logo { /* Unified logo container */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    flex-shrink: 0;
    margin-left: 20px;
}

.experience-logo img {
    display: block;
    max-width: 100%;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 10px;
}
.experience-logo img:last-child {
    margin-bottom: 0;
}

/* --- Skills Section --- */
.skills-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.skill-category {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 14px 14px 12px 14px;
    margin-bottom: 10px;
}

.skill-category h4 {
    margin-bottom: 15px;
    color: #000;
    font-size: 0.95rem;
    font-weight: 600;
    background-color: #f0f0f0;
    padding: 7px 10px;
    display: inline-block;
    border-radius: 4px;
}

.skills-columns {
    display: flex;
    gap: 20px;
    width: 100%;
}

.skills-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    align-items: stretch;
}

.skill-item {
    display: flex;
    margin-bottom: 6px;
    align-items: center;
}

.skill-item p {
    flex-grow: 1;
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 0.97rem;
}

.skill-logo {
    width: 36px;
    border-radius: 5px;
    margin-right: 8px;
    display: block;
}

.skill-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- Publikationen Styles --- */
.publications-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.publication-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.publication-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.publication-content {
    flex-grow: 1;
    padding-right: 15px;
}

.pub-title {
    font-size: 0.9rem; /* Angepasst an conf-title-line */
    font-weight: 600; /* Angepasst an conf-title-line */
    color: #000;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.pub-details {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.3;
    margin: 0;
}

.pub-details .doi-link {
    color: #007bff;
    text-decoration: none;
    font-family: monospace;
    white-space: nowrap;
}
.pub-details .doi-link:hover {
    text-decoration: underline;
}

.publication-doi {
    flex-shrink: 0;
    width: 30px;
    text-align: center;
    padding-top: 3px;
}

.doi-logo {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.doi-text {
    font-family: monospace;
    font-size: 0.9em;
}
.doi-link { /* General DOI link style, if used outside .pub-details */
    text-decoration: none;
    color: #007bff;
}
.doi-link:hover {
    text-decoration: underline;
}

/*
.card-body ul li{  // This rule was isolated and its context unclear. Commented out.
    display: flex;
}
*/

/* --- Mentoring Styles --- */
.arbeiten-header {
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #000;
}

ul.mentoring-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

li.mentoring-entry {
    padding: 6px 15px;
    margin-bottom: 7px;
    border-bottom: 1px solid #eee;
}
li.mentoring-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

p.mentoring-title-line {
    font-size: 0.85rem;
    font-weight: normal;
    color: #000;
    margin: 0;
    line-height: 1.3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

span.mentoring-student-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    text-align: right;
    padding-left: 15px;
    flex-shrink: 0;
}

/* --- Teaching Styles --- */
ul.teaching-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

li.teaching-entry {
    padding: 7px 15px;
    margin-bottom: 7px;
    border-bottom: 1px solid #eee;
}
li.teaching-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

p.teaching-title-line {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    margin: 0 0 4px 0;
    line-height: 1.3;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

span.teaching-date {
    font-size: 0.85rem;
    font-weight: normal;
    color: inherit;
    white-space: nowrap;
    text-align: right;
    padding-left: 15px;
    flex-shrink: 0;
}

div.teaching-details {
    padding-left: 0;
    margin-top: 4px;
}

p.teaching-detail-item {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.3;
    font-weight: normal;
    margin: 0 0 3px 0;
    padding: 0;
    font-style: normal;
    list-style-type: none;
} */

/* --- Further Education Styles --- */
.weiterbildung-header {
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
    font-size: 0.85rem;
    color: #000;
}

ul.further-edu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

li.further-edu-entry {
    padding: 7px 15px;
    margin-bottom: 7px;
    border-bottom: 1px solid #eee;
}
li.further-edu-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

p.further-edu-title-line {
    font-size: 0.9rem;
    font-weight: 600;
    color: #000;
    margin: 0 0 4px 0;
    line-height: 1.3;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

span.further-edu-instructor {
    font-size: 0.85rem;
    font-weight: normal;
    color: #555;
    white-space: nowrap;
    text-align: right;
    padding-left: 15px;
    flex-shrink: 0;
}

div.further-edu-details {
    padding-left: 0;
    margin-top: 4px;
}

p.further-edu-location {
    font-size: 0.85rem;
    color: #555; /* Grau für den Ort */
    line-height: 1.3;
    font-weight: normal;
    margin: 0 0 3px 0;
    padding: 0;
    font-style: normal;
    list-style-type: none;
}

p.further-edu-description {
    font-size: 0.85rem;
    color: #000; /* Schwarz für die Beschreibung */
    line-height: 1.3;
    font-weight: normal;
    margin: 0 0 3px 0;
    padding: 0;
    font-style: normal;
    list-style-type: none;
}

/* Alte Regel auskommentiert oder entfernt, falls nicht mehr benötigt */
/* p.further-edu-detail-item { */
    font-size: 0.85rem;
    color: #555;
    line-height: 1.3;
    font-weight: normal;
    margin: 0 0 3px 0;
    padding: 0;
    font-style: normal;
    list-style-type: none;
} */

/* --- Field Research Styles (within experience-card) --- */
#field-research .experience-content ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 10px 0 0 0;
}

#field-research .experience-content ul li {
    font-size: 0.85rem;
    color: #000;
    line-height: 1.4;
    font-weight: normal;
    margin-bottom: 5px;
}
#field-research .experience-content ul li::marker {
    color: #555;
}

#field-research hr.internal-separator {
    border: none;
    height: 1px;
    background-color: #ccc; /* Adjusted for "helles Grau" */
    margin-top: 10px;
    margin-bottom: 10px;
}

/* --- Footer --- */
footer {
    text-align: center;
    padding: 10px;
    background-color: #f5f5f5;
    color: #000000;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
    margin-top: auto;
}

/* --- Contact Section --- */
.contact-info p {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.contact-info i {
    margin-right: 10px;
    color: #5dd9c1;
}

/* --- Veroeffentlichungen (Alternative Publication Style - Commented out as likely unused/old) --- */
/*
.veroeffentlichungen {
    margin: 20px;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: #000;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.veroeffentlichungen h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #4CAF50;
    text-align: center;
}
.veroeffentlichungen ul {
    list-style-type: none;
    padding: 0;
}
.veroeffentlichungen li {
    margin-bottom: 25px;
    padding: 15px;
    border-radius: 8px;
    background-color: #f5f5f5;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.veroeffentlichungen li:hover {
    transform: scale(1.02);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.veroeffentlichungen a {
    color: #1a73e8;
    text-decoration: none;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.veroeffentlichungen a:hover {
    text-decoration: underline;
}
.paper-title {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: #000;
}
.paper-authors {
    font-size: 1rem;
    color: #666;
    margin-bottom: 8px;
}
.paper-conference {
    font-size: 0.95rem;
    color: #777;
    margin-bottom: 12px;
}
*/

/* --- Conferences (Additional container styling) --- */
#conferences .conference-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.conferences-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

/* --- Fotogalerie Styles --- */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.gallery-item {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 15px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}

.gallery-caption {
    font-size: 1rem;
    font-weight: bold;
    color: #000;
}

/* --- Modal Styles (Bootstrap Overrides/Customizations) --- */
.modal-header {
    border-bottom: none;
}

.modal-body {
    padding: 0;
}

.modal-content {
    border-radius: 10px;
}

/* --- Paragraph Styles for specific sections --- */
#about p,
#skills p {
    margin: 0 0 3px 0;
    font-size: 0.85rem;
    font-style: normal;
    line-height: 1.3;
    color: #000;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    body {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        padding: 15px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .sidebar .profile-img {
        width: 120px;
        height: 120px;
        margin-bottom: 15px;
        margin-right: 20px;
    }
    .sidebar h4 {
        margin-right: 20px;
    }
    .sidebar a {
        margin: 3px;
        padding: 5px 10px;
        width: auto;
    }
    .main-column {
        width: 100%;
        margin-left: 0;
        min-height: auto;
    }
    .content {
        width: 100%;
        padding: 15px;
    }
    .experience-card {
        flex-direction: column;
    }
    .experience-content {
        padding-right: 0;
    }
    .skills-columns {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .sidebar {
        padding: 10px;
    }
    .sidebar .profile-img {
        width: 80px;
        height: 80px;
    }
    .sidebar a {
        font-size: 0.9rem;
        padding: 4px 8px;
    }
    .section {
        padding: 15px 5px;
    }
    .section-title {
        font-size: 1.5rem;
    }
    .experience-card {
        padding: 15px 10px;
    }
    .gallery-container {
        grid-template-columns: 1fr;
    }
}

/* --- Ende Mobile-spezifische Anpassungen --- */

/* Remove underline and inherit color for specific links */
.no-underline {
    text-decoration: none !important;
    color: inherit !important;
}


/* ===== MODERN TAB-BASED SKILLS SECTION STYLES ===== */

/* Replace existing skills-section with modern tab-based design */
.modern-skills-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    backdrop-filter: blur(10px);
    margin: 20px 0;
}

.modern-skills-container .section-title {
    text-align: center;
    padding: 25px 20px 15px;
    margin-bottom: 0;
    color: #2c3e50;
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 1px;
}

.modern-skills-container .section-title strong {
    color: #34b39f;
    font-weight: 600;
}

/* Tab Navigation */
.skills-tabs {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.skills-tabs::-webkit-scrollbar {
    display: none;
}

.tab-button {
    flex: 1;
    min-width: 200px;
    padding: 18px 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #6c757d;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    white-space: nowrap;
    font-family: inherit;
}

.tab-button:hover {
    background: rgba(52, 179, 159, 0.1);
    color: #34b39f;
}

.tab-button.active {
    color: #34b39f;
    background: white;
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #34b39f, #2c9d89);
    border-radius: 3px 3px 0 0;
}

.tab-icon {
    font-size: 1.1rem;
    margin-right: 8px;
}

/* Tab Content */
.tab-content {
    display: none;
    padding: 25px;
    min-height: 350px;
    animation: fadeInUp 0.5s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Modern Skill Categories */
.modern-skill-category {
    margin-bottom: 30px;
}

.modern-category-title {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #ecf0f1;
    position: relative;
    font-weight: 600;
}

.modern-category-title::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, #34b39f, #2c9d89);
}

/* Modern Skills Grid */
.modern-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}

.modern-skill-card {
    background: white;
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #f1f3f4;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.modern-skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 179, 159, 0.1), transparent);
    transition: left 0.5s ease;
}

.modern-skill-card:hover::before {
    left: 100%;
}

.modern-skill-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(52, 179, 159, 0.15);
    border-color: #34b39f;
}

.modern-skill-logo {
    width: 36px;
    height: 36px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.modern-skill-card:hover .modern-skill-logo {
    background: linear-gradient(135deg, #34b39f, #2c9d89);
    transform: scale(1.1);
}

.modern-skill-logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 3px;
    transition: filter 0.3s ease;
}

.modern-skill-card:hover .modern-skill-logo img {
    filter: brightness(0) invert(1);
}

.modern-skill-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.modern-skill-card:hover .modern-skill-name {
    color: #34b39f;
}

/* Responsive Design for Modern Skills */
@media (max-width: 768px) {
    .modern-skills-container .section-title {
        font-size: 1.6rem;
        padding: 20px 15px 10px;
    }

    .tab-content {
        padding: 20px 15px;
    }

    .modern-skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 10px;
    }

    .modern-skill-card {
        padding: 12px 8px;
    }

    .tab-button {
        min-width: 140px;
        padding: 14px 10px;
        font-size: 0.85rem;
    }

    .tab-icon {
        font-size: 1rem;
        margin-right: 6px;
    }
}

@media (max-width: 480px) {
    .modern-skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
        gap: 8px;
    }

    .modern-skill-card {
        padding: 10px 6px;
    }

    .modern-skill-logo {
        width: 32px;
        height: 32px;
    }

    .modern-skill-logo img {
        width: 24px;
        height: 24px;
    }

    .modern-skill-name {
        font-size: 0.75rem;
    }

    .tab-button {
        min-width: 120px;
        padding: 12px 8px;
        font-size: 0.8rem;
    }
}

/* Loading Animation */
.loading-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #34b39f;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

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

/* Hide old skills section when modern is active */
.modern-skills-container ~ .skills-section {
    display: none;
}

/* ===== END MODERN TAB-BASED SKILLS SECTION STYLES ===== */

/* ===== UPDATED MODERN TAB-BASED SKILLS SECTION STYLES ===== */

/* Modern Skills Container - cleaner design */
.modern-skills-container {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 20px 0;
}

/* Tab Navigation */
.skills-tabs {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.skills-tabs::-webkit-scrollbar {
    display: none;
}

.tab-button {
    flex: 1;
    min-width: 180px;
    padding: 15px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6c757d;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    white-space: nowrap;
    font-family: inherit;
}

.tab-button:hover {
    background: rgba(52, 179, 159, 0.1);
    color: #34b39f;
}

.tab-button.active {
    color: #34b39f;
    background: white;
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #34b39f, #2c9d89);
    border-radius: 3px 3px 0 0;
}

.tab-icon {
    font-size: 1rem;
    margin-right: 6px;
}

/* Tab Content */
.tab-content {
    display: none;
    padding: 20px;
    min-height: 300px;
    animation: fadeInUp 0.4s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Modern Skill Categories */
.modern-skill-category {
    margin-bottom: 25px;
}

.modern-category-title {
    font-size: 0.95rem;
    color: #000;
    margin-bottom: 15px;
    padding: 7px 10px;
    background-color: #f0f0f0;
    border-radius: 4px;
    display: inline-block;
    font-weight: 600;
    position: relative;
}

/* Modern Skills Grid - Horizontal Layout */
.modern-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.modern-skill-card {
    background: white;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f3f4;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.modern-skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 179, 159, 0.08), transparent);
    transition: left 0.4s ease;
}

.modern-skill-card:hover::before {
    left: 100%;
}

.modern-skill-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 12px rgba(52, 179, 159, 0.12);
    border-color: #34b39f;
}

/* Horizontal Layout: Logo left, Text right */
.modern-skill-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modern-skill-logo {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.modern-skill-card:hover .modern-skill-logo {
    background: linear-gradient(135deg, #34b39f, #2c9d89);
    transform: scale(1.05);
}

.modern-skill-logo img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 2px;
    transition: filter 0.3s ease;
}

.modern-skill-card:hover .modern-skill-logo img {
    filter: brightness(0) invert(1);
}

.modern-skill-name {
    font-size: 0.85rem;
    font-weight: normal;
    color: #000;
    line-height: 1.2;
    transition: color 0.3s ease;
    flex: 1;
}

.modern-skill-card:hover .modern-skill-name {
    color: #34b39f;
    font-weight: 600;
}

/* Responsive Design for Modern Skills */
@media (max-width: 768px) {
    .tab-content {
        padding: 15px;
    }

    .modern-skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 6px;
    }

    .modern-skill-card {
        padding: 6px 10px;
    }

    .tab-button {
        min-width: 130px;
        padding: 12px 8px;
        font-size: 0.8rem;
    }

    .tab-icon {
        font-size: 0.9rem;
        margin-right: 4px;
    }

    .modern-skill-content {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .modern-skills-grid {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .modern-skill-card {
        padding: 6px 8px;
    }

    .modern-skill-logo {
        width: 20px;
        height: 20px;
    }

    .modern-skill-logo img {
        width: 16px;
        height: 16px;
    }

    .modern-skill-name {
        font-size: 0.8rem;
    }

    .tab-button {
        min-width: 110px;
        padding: 10px 6px;
        font-size: 0.75rem;
    }
}

/* Loading Animation */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #34b39f;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 6px;
}

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

/* Hide old skills section when modern is active */
.modern-skills-container ~ .skills-section {
    display: none;
}

/* ===== END UPDATED MODERN TAB-BASED SKILLS SECTION STYLES ===== */
/* ===== UPDATED MODERN TAB-BASED SKILLS SECTION STYLES (v2) ===== */

/* Modern Skills Container - cleaner design */
.modern-skills-container {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 20px 0;
}

/* Tab Navigation with subtle separators */
.skills-tabs {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.skills-tabs::-webkit-scrollbar {
    display: none;
}

.tab-button {
    flex: 1;
    min-width: 160px;
    padding: 15px 12px;
    background: transparent;
    border: none;
    border-right: 1px solid #e0e0e0;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6c757d;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    white-space: nowrap;
    font-family: inherit;
}

.tab-button:last-child {
    border-right: none;
}

.tab-button:hover {
    background: rgba(52, 179, 159, 0.1);
    color: #34b39f;
}

.tab-button.active {
    color: #34b39f;
    background: white;
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #34b39f, #2c9d89);
    border-radius: 3px 3px 0 0;
}

/* Tab Content */
.tab-content {
    display: none;
    padding: 18px;
    min-height: 280px;
    animation: fadeInUp 0.4s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Modern Skill Categories */
.modern-skill-category {
    margin-bottom: 22px;
}

.modern-category-title {
    font-size: 0.95rem;
    color: #000;
    margin-bottom: 15px;
    padding: 7px 10px;
    background-color: #f0f0f0;
    border-radius: 4px;
    display: inline-block;
    font-weight: 600;
    position: relative;
}

/* Modern Skills Grid - Horizontal Layout */
.modern-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 6px;
    margin-bottom: 18px;
}

/* 20% kompaktere Skill Cards mit perfekter vertikaler Zentrierung */
.modern-skill-card {
    background: white;
    border-radius: 8px;
    padding: 4px 12px 9px 12px; /* Optimiert: 4px oben (weniger), 9px unten (mehr) für bessere Balance */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f3f4;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 34px; /* Leicht erhöht für bessere Proportionen */
}

.modern-skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 179, 159, 0.08), transparent);
    transition: left 0.4s ease;
}

.modern-skill-card:hover::before {
    left: 100%;
}

.modern-skill-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 12px rgba(52, 179, 159, 0.12);
    border-color: #34b39f;
}

/* Perfekte vertikale Zentrierung: Logo links, Text rechts */
.modern-skill-content {
    display: flex;
    align-items: center; /* Vertikale Zentrierung */
    gap: 10px;
    height: 100%;
    min-height: 34px; /* Entspricht der angepassten Card-Mindesthöhe */
}

.modern-skill-logo {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.modern-skill-card:hover .modern-skill-logo {
    background: linear-gradient(135deg, #34b39f, #2c9d89);
    transform: scale(1.05);
}

.modern-skill-logo img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 2px;
    transition: filter 0.3s ease;
}

.modern-skill-card:hover .modern-skill-logo img {
    filter: brightness(0) invert(1);
}

.modern-skill-name {
    font-size: 0.85rem;
    font-weight: normal;
    color: #000;
    line-height: 1.2;
    transition: color 0.3s ease;
    flex: 1;
    display: flex;
    align-items: center; /* Zusätzliche vertikale Zentrierung für Text */
}

.modern-skill-card:hover .modern-skill-name {
    color: #34b39f;
    font-weight: 600;
}

/* Responsive Design for Modern Skills */
@media (max-width: 768px) {
    .tab-content {
        padding: 15px;
    }

    .modern-skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 5px;
    }

    .modern-skill-card {
        padding: 5px 10px;
        min-height: 30px;
    }

    .modern-skill-content {
        gap: 8px;
        min-height: 30px;
    }

    .tab-button {
        min-width: 120px;
        padding: 12px 8px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .modern-skills-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .modern-skill-card {
        padding: 5px 8px;
        min-height: 28px;
    }

    .modern-skill-content {
        gap: 6px;
        min-height: 28px;
    }

    .modern-skill-logo {
        width: 20px;
        height: 20px;
    }

    .modern-skill-logo img {
        width: 16px;
        height: 16px;
    }

    .modern-skill-name {
        font-size: 0.8rem;
    }

    .tab-button {
        min-width: 100px;
        padding: 10px 6px;
        font-size: 0.75rem;
    }
}

/* Loading Animation */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #34b39f;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 6px;
}

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

/* Hide old skills section when modern is active */
.modern-skills-container ~ .skills-section {
    display: none;
}

/* ===== END UPDATED MODERN TAB-BASED SKILLS SECTION STYLES (v2) ===== */
/* ===== FINAL OPTIMIZED MODERN TAB-BASED SKILLS SECTION STYLES ===== */

/* Modern Skills Container - cleaner design */
.modern-skills-container {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 20px 0;
}

/* Tab Navigation with subtle separators and better visual definition */
.skills-tabs {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
}

.skills-tabs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #e9ecef, #d6d8db, #e9ecef);
}

.skills-tabs::-webkit-scrollbar {
    display: none;
}

.tab-button {
    flex: 1;
    min-width: 150px;
    padding: 12px 10px; /* 10% kleiner: von 15px auf 12px */
    background: transparent;
    border: none;
    border-right: 1px solid #e0e0e0;
    cursor: pointer;
    font-size: 0.85rem; /* Etwas kleiner */
    font-weight: 600;
    color: #6c757d;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    white-space: nowrap;
    font-family: inherit;
    border-radius: 0;
}

.tab-button:first-child {
    border-top-left-radius: 0;
}

.tab-button:last-child {
    border-right: none;
    border-top-right-radius: 0;
}

.tab-button:hover {
    background: rgba(52, 179, 159, 0.1);
    color: #34b39f;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(52, 179, 159, 0.1);
}

.tab-button.active {
    color: #34b39f;
    background: white;
    border-bottom: 1px solid white;
    transform: translateY(1px);
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #34b39f, #2c9d89);
    border-radius: 3px 3px 0 0;
}

.tab-button.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    right: -5px;
    bottom: 0;
    background: white;
    border-radius: 8px 8px 0 0;
    z-index: -1;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
}

/* Tab Content */
.tab-content {
    display: none;
    padding: 16px; /* 10% kleiner: von 18px auf 16px */
    min-height: 250px; /* 10% kleiner: von 280px auf 250px */
    animation: fadeInUp 0.4s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Modern Skill Categories */
.modern-skill-category {
    margin-bottom: 20px; /* 10% kleiner: von 22px auf 20px */
}

.modern-category-title {
    font-size: 0.9rem; /* Etwas kleiner: von 0.95rem */
    color: #000;
    margin-bottom: 13px; /* 10% kleiner: von 15px auf 13px */
    padding: 6px 9px; /* 10% kleiner: von 7px 10px */
    background-color: #f0f0f0;
    border-radius: 4px;
    display: inline-block;
    font-weight: 600;
    position: relative;
}

/* Modern Skills Grid - Horizontal Layout */
.modern-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); /* 10% kleiner: von 200px */
    gap: 5px; /* 10% kleiner: von 6px */
    margin-bottom: 16px; /* 10% kleiner: von 18px */
}

/* 10% kompaktere Skill Cards mit EXAKTER vertikaler Logo-Text-Ausrichtung */
.modern-skill-card {
    background: white;
    border-radius: 7px; /* Etwas kleiner: von 8px */
    padding: 5px 11px; /* 10% kleiner: von 6px 12px */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f3f4;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 29px; /* 10% kleiner: von 32px */
}

.modern-skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(52, 179, 159, 0.08), transparent);
    transition: left 0.4s ease;
}

.modern-skill-card:hover::before {
    left: 100%;
}

.modern-skill-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 12px rgba(52, 179, 159, 0.12);
    border-color: #34b39f;
}

/* EXAKTE vertikale Zentrierung: Logo-Mittellinie = Text-Mittellinie */
.modern-skill-content {
    display: flex;
    align-items: center; /* Vertikale Zentrierung des Flex-Containers */
    gap: 9px; /* 10% kleiner: von 10px */
    height: 100%;
    min-height: 29px; /* Entspricht der Card-Mindesthöhe */
}

.modern-skill-logo {
    width: 22px; /* Etwas kleiner: von 24px */
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center; /* Logo vertikal zentrieren */
    justify-content: center; /* Logo horizontal zentrieren */
    background: #f8f9fa;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.modern-skill-card:hover .modern-skill-logo {
    background: linear-gradient(135deg, #34b39f, #2c9d89);
    transform: scale(1.05);
}

.modern-skill-logo img {
    width: 16px; /* Etwas kleiner: von 18px */
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
    transition: filter 0.3s ease;
}

.modern-skill-card:hover .modern-skill-logo img {
    filter: brightness(0) invert(1);
}

.modern-skill-name {
    font-size: 0.8rem; /* Etwas kleiner: von 0.85rem */
    font-weight: normal;
    color: #000;
    line-height: 1.2;
    transition: color 0.3s ease;
    flex: 1;
    display: flex;
    align-items: center; /* Text-Baseline exakt mit Logo-Mittellinie ausrichten */
    height: 22px; /* Gleiche Höhe wie Logo für perfekte Ausrichtung */
}

.modern-skill-card:hover .modern-skill-name {
    color: #34b39f;
    font-weight: 600;
}

/* Responsive Design for Modern Skills */
@media (max-width: 768px) {
    .tab-content {
        padding: 13px; /* 10% kleiner: von 15px */
    }

    .modern-skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); /* 10% kleiner: von 160px */
        gap: 4px; /* 10% kleiner: von 5px */
    }

    .modern-skill-card {
        padding: 4px 9px; /* 10% kleiner: von 5px 10px */
        min-height: 27px; /* 10% kleiner: von 30px */
    }

    .modern-skill-content {
        gap: 7px; /* 10% kleiner: von 8px */
        min-height: 27px;
    }

    .modern-skill-name {
        height: 20px; /* Angepasst für kleinere Logos */
    }

    .modern-skill-logo {
        width: 20px;
        height: 20px;
    }

    .modern-skill-logo img {
        width: 15px;
        height: 15px;
    }

    .tab-button {
        min-width: 110px; /* 10% kleiner: von 120px */
        padding: 11px 7px; /* 10% kleiner: von 12px 8px */
        font-size: 0.75rem; /* 10% kleiner: von 0.8rem */
    }
}

@media (max-width: 480px) {
    .modern-skills-grid {
        grid-template-columns: 1fr;
        gap: 3px; /* 10% kleiner: von 4px */
    }

    .modern-skill-card {
        padding: 4px 7px; /* 10% kleiner: von 5px 8px */
        min-height: 25px; /* 10% kleiner: von 28px */
    }

    .modern-skill-content {
        gap: 5px; /* 10% kleiner: von 6px */
        min-height: 25px;
    }

    .modern-skill-logo {
        width: 18px; /* 10% kleiner: von 20px */
        height: 18px;
    }

    .modern-skill-logo img {
        width: 14px; /* 10% kleiner: von 16px */
        height: 14px;
    }

    .modern-skill-name {
        font-size: 0.75rem; /* 10% kleiner: von 0.8rem */
        height: 18px; /* Angepasst für kleinere Logos */
    }

    .tab-button {
        min-width: 90px; /* 10% kleiner: von 100px */
        padding: 9px 5px; /* 10% kleiner: von 10px 6px */
        font-size: 0.7rem; /* 10% kleiner: von 0.75rem */
    }
}

/* Loading Animation */
.loading-spinner {
    display: inline-block;
    width: 14px; /* 10% kleiner: von 16px */
    height: 14px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #34b39f;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 5px; /* 10% kleiner: von 6px */
}

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

/* Hide old skills section when modern is active */
.modern-skills-container ~ .skills-section {
    display: none;
}

/* ===== END FINAL OPTIMIZED MODERN TAB-BASED SKILLS SECTION STYLES ===== */
/* ===== CLEAN MODERN TAB-BASED SKILLS (NO ITEM HOVERS) ===== */

/* Remove all skill card hover effects */
.modern-skill-card {
    background: white;
    border-radius: 7px;
    padding: 5px 11px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f3f4;
    transition: none;
    cursor: default;
    position: relative;
    overflow: hidden;
    min-height: 29px;
}

/* Remove shimmer effect */
.modern-skill-card::before {
    display: none;
}

/* Remove hover transformations */
.modern-skill-card:hover {
    transform: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-color: #f1f3f4;
}

/* Clean logo styling without hover effects */
.modern-skill-logo {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 4px;
    transition: none;
}

.modern-skill-card:hover .modern-skill-logo {
    background: #f8f9fa;
    transform: none;
}

.modern-skill-logo img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
    transition: none;
}

.modern-skill-card:hover .modern-skill-logo img {
    filter: none;
}

/* Clean text styling without hover effects */
.modern-skill-name {
    font-size: 0.8rem;
    font-weight: normal;
    color: #000;
    line-height: 1.2;
    transition: none;
    flex: 1;
    display: flex;
    align-items: center;
    height: 22px;
}

.modern-skill-card:hover .modern-skill-name {
    color: #000;
    font-weight: normal;
}

/* Remove click effects */
.modern-skill-card:active {
    transform: none;
}

/* ===== END CLEAN MODERN TAB-BASED SKILLS (NO ITEM HOVERS) ===== */
/* ===== FINAL TOUCH: MAXIMALE LOGO-GRÖSSE + GRÖßERE SCHRIFT ===== */

/* Maximale Logo-Größe - nimmt fast die ganze Card-Höhe ein */
.modern-skill-logo {
    width: 27px !important; /* Maximale Größe: fast die ganze Card-Höhe (29px) */
    height: 27px !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 4px;
    transition: none;
}

.modern-skill-logo img {
    width: 22px !important; /* Vergrößert: von 16px auf 22px */
    height: 22px !important;
    object-fit: contain;
    border-radius: 2px;
    transition: none;
}

/* Größere Schrift für bessere Lesbarkeit */
.modern-skill-name {
    font-size: 0.9rem !important; /* Erhöht: von 0.8rem auf 0.9rem */
    font-weight: normal;
    color: #000;
    line-height: 1.2;
    transition: none;
    flex: 1;
    display: flex;
    align-items: center;
    height: 27px !important; /* Angepasst an Logo-Höhe */
}

/* Responsive Anpassungen für maximale Logo-Größe */
@media (max-width: 768px) {
    .modern-skill-logo {
        width: 25px !important;
        height: 25px !important;
    }

    .modern-skill-logo img {
        width: 20px !important;
        height: 20px !important;
    }

    .modern-skill-name {
        height: 25px !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .modern-skill-logo {
        width: 23px !important;
        height: 23px !important;
    }

    .modern-skill-logo img {
        width: 18px !important;
        height: 18px !important;
    }

    .modern-skill-name {
        font-size: 0.8rem !important;
        height: 23px !important;
    }
}

/* ===== END FINAL TOUCH: MAXIMALE LOGO-GRÖSSE + GRÖßERE SCHRIFT ===== */
/* ===== ULTRA-KOMPAKT: 15% KLEINERE BOXEN FÜR DRAMATISCHE LOGOS ===== */

/* 15% kleinere Skill Cards für ultra-kompaktes Design */
.modern-skill-card {
    background: white;
    border-radius: 6px; /* Etwas kleiner: von 7px */
    padding: 4px 10px !important; /* 15% kleiner: von 5px 11px */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f3f4;
    transition: none;
    cursor: default;
    position: relative;
    overflow: hidden;
    min-height: 25px !important; /* 15% kleiner: von 29px auf 25px */
}

/* Optimierte Content-Container-Höhe */
.modern-skill-content {
    display: flex;
    align-items: center;
    gap: 8px !important; /* Etwas kleiner: von 9px */
    height: 100%;
    min-height: 25px !important; /* Entspricht der neuen Card-Höhe */
}

/* Logos nehmen jetzt fast die GANZE neue Card-Höhe ein = DRAMATISCH! */
.modern-skill-logo {
    width: 23px !important; /* Angepasst an neue Card-Höhe (fast 100% von 25px) */
    height: 23px !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 3px; /* Proportional kleiner */
    transition: none;
}

.modern-skill-logo img {
    width: 19px !important; /* Proportional angepasst für maximale Wirkung */
    height: 19px !important;
    object-fit: contain;
    border-radius: 2px;
    transition: none;
}

/* Text angepasst an neue Proportionen */
.modern-skill-name {
    font-size: 0.85rem !important; /* Leicht angepasst für kleinere Boxen */
    font-weight: normal;
    color: #000;
    line-height: 1.2;
    transition: none;
    flex: 1;
    display: flex;
    align-items: center;
    height: 23px !important; /* Entspricht Logo-Höhe */
}

/* Responsive Anpassungen für ultra-kompakte Boxen */
@media (max-width: 768px) {
    .modern-skill-card {
        padding: 3px 9px !important;
        min-height: 23px !important;
    }

    .modern-skill-content {
        gap: 7px !important;
        min-height: 23px !important;
    }

    .modern-skill-logo {
        width: 21px !important;
        height: 21px !important;
    }

    .modern-skill-logo img {
        width: 17px !important;
        height: 17px !important;
    }

    .modern-skill-name {
        height: 21px !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .modern-skill-card {
        padding: 3px 8px !important;
        min-height: 21px !important;
    }

    .modern-skill-content {
        gap: 6px !important;
        min-height: 21px !important;
    }

    .modern-skill-logo {
        width: 19px !important;
        height: 19px !important;
    }

    .modern-skill-logo img {
        width: 15px !important;
        height: 15px !important;
    }

    .modern-skill-name {
        font-size: 0.75rem !important;
        height: 19px !important;
    }
}

/* ===== END ULTRA-KOMPAKT: 15% KLEINERE BOXEN FÜR DRAMATISCHE LOGOS ===== */
/* ===== ULTIMATE LOGO MAXIMIZATION: FINAL 2PX INCREASE ===== */

/* Ultimative Logo-Größe - jetzt WIRKLICH maximal! */
.modern-skill-logo {
    width: 25px !important; /* +2px größer: von 23px auf 25px */
    height: 25px !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 3px;
    transition: none;
}

.modern-skill-logo img {
    width: 21px !important; /* +2px größer: von 19px auf 21px */
    height: 21px !important;
    object-fit: contain;
    border-radius: 2px;
    transition: none;
}

/* Text-Höhe angepasst für perfekte Ausrichtung */
.modern-skill-name {
    font-size: 0.85rem !important;
    font-weight: normal;
    color: #000;
    line-height: 1.2;
    transition: none;
    flex: 1;
    display: flex;
    align-items: center;
    height: 25px !important; /* Entspricht neuer Logo-Höhe */
}

/* Content-Container angepasst */
.modern-skill-content {
    display: flex;
    align-items: center;
    gap: 7px !important; /* Etwas enger für maximale Logo-Wirkung */
    height: 100%;
    min-height: 25px !important;
}

/* Responsive Anpassungen für ultimate Logo-Größen */
@media (max-width: 768px) {
    .modern-skill-logo {
        width: 23px !important; /* +2px größer */
        height: 23px !important;
    }

    .modern-skill-logo img {
        width: 19px !important; /* +2px größer */
        height: 19px !important;
    }

    .modern-skill-name {
        height: 23px !important;
    }

    .modern-skill-content {
        min-height: 23px !important;
    }
}

@media (max-width: 480px) {
    .modern-skill-logo {
        width: 21px !important; /* +2px größer */
        height: 21px !important;
    }

    .modern-skill-logo img {
        width: 17px !important; /* +2px größer */
        height: 17px !important;
    }

    .modern-skill-name {
        height: 21px !important;
    }

    .modern-skill-content {
        min-height: 21px !important;
    }
}

/* ===== FINALE OPTIMIERTE SKILLS SECTION - PERFEKTE PLATZNUTZUNG ===== */

/* Zurück zu einfacher Lösung */
.modern-skill-card {
    background: white !important;
    border-radius: 8px !important;
    padding: 2px 12px 8px 12px !important; /* Optimiert: weniger oben, mehr unten */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e8eaed !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    height: 39px !important; /* +2px mehr für perfekte finale Symmetrie */
}

/* Shimmer-Effekt entfernt - cleaner Look */
.modern-skill-card::before {
    display: none !important; /* Kein Shimmer-Effekt mehr */
}

.modern-skill-card:hover::before {
    /* Entfernt */
}

/* Hover-Effekt entfernt - cleaner Look */
.modern-skill-card:hover {
    /* Kein Transform oder Box-Shadow mehr */
}

/* Perfekte Content-Zentrierung für optimales Logo-Spacing */
.modern-skill-content {
    display: flex !important;
    align-items: center !important; /* Perfekte vertikale Zentrierung */
    gap: 12px !important;
    height: 100% !important;
    min-height: 39px !important; /* Finale Anpassung für perfekte Symmetrie */
}

/* Logo-Container mit subtilen Offset nach oben für perfekte Zentrierung */
.modern-skill-logo {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8f9fa !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    transform: translateY(-3px) !important; /* 3px nach oben für perfekte Zentrierung */
}

/* Hover-Effekte für Logos entfernt */
.modern-skill-card:hover .modern-skill-logo {
    /* Kein Hintergrund-Wechsel oder Transform mehr */
}

/* Vergrößerte Logo-Bilder - 50% größer */
.modern-skill-logo img {
    width: 24px !important; /* 50% größer: von 16px auf 24px */
    height: 24px !important;
    object-fit: contain !important;
    border-radius: 3px !important;
    transition: filter 0.3s ease !important;
}

/* Hover-Filter für Logo-Bilder entfernt */
.modern-skill-card:hover .modern-skill-logo img {
    /* Kein Filter-Wechsel mehr */
}

/* Ausgewogene Text-Darstellung */
.modern-skill-name {
    font-size: 0.9rem !important; /* Leicht größer für bessere Lesbarkeit */
    font-weight: 500 !important; /* Mittleres Gewicht */
    color: #1a1a1a !important;
    line-height: 1.2 !important;
    transition: color 0.3s ease !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* Hover-Effekte für Text-Namen entfernt */
.modern-skill-card:hover .modern-skill-name {
    /* Keine Farb- oder Font-Weight-Änderung mehr */
}

/* Einfache responsive Anpassungen */
@media (max-width: 768px) {
    .modern-skill-card {
        padding: 3px 10px !important;
        height: 26px !important;
    }

    .modern-skill-content {
        gap: 10px !important;
        min-height: 26px !important;
        align-items: flex-start !important;
        padding-top: 2px !important;
    }

    .modern-skill-logo {
        width: 26px !important;
        height: 26px !important;
        margin: 0 !important;
    }

    .modern-skill-logo img {
        width: 22px !important;
        height: 22px !important;
    }

    .modern-skill-name {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .modern-skill-card {
        padding: 3px 8px !important;
        height: 24px !important;
    }

    .modern-skill-content {
        gap: 8px !important;
        min-height: 24px !important;
        align-items: flex-start !important;
        padding-top: 1px !important;
    }

    .modern-skill-logo {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
    }

    .modern-skill-logo img {
        width: 20px !important;
        height: 20px !important;
    }

    .modern-skill-name {
        font-size: 0.8rem !important;
    }
}

/* ===== ENDE: FINALE OPTIMIERTE SKILLS SECTION ===== */