:root {
    --primary-color: #0a192f;
    --secondary-color: #64ffda;
    --text-color: #8892b0;
    --light-text: #ccd6f6;
    --background: #0a192f;
    --card-bg: #112240;
    --highlight: #64ffda;
    --navy: #0a192f; /* Added navy for consistency */
    --light-navy: #112240; /* Added light-navy for consistency */
    --lightest-navy: #233554; /* Added lightest-navy for consistency */
    --slate: #8892b0; /* Added slate for consistency */
    --light-slate: #a8b2d1; /* Added light-slate for consistency */
    --lightest-slate: #ccd6f6; /* Added lightest-slate for consistency */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    background-color: var(--background);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(10, 25, 47, 0.85);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s ease;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--light-text);
}

.logo span {
    color: var(--highlight);
}

nav {
    display: none;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    color: var(--light-text);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--highlight);
}

.hamburger {
    display: block;
    cursor: pointer;
    z-index: 2000;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: var(--highlight);
    margin: 5px;
    transition: all 0.3s ease;
}

.nav-links a.active {
    color: var(--highlight);
    font-weight: 600; /* Make active link slightly bolder */
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background-color: var(--card-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.5s ease;
    z-index: 1500;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu ul {
    list-style: none;
    text-align: center;
}

.mobile-menu li {
    margin: 2rem 0;
}

.mobile-menu a {
    color: var(--light-text);
    text-decoration: none;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.mobile-menu a:hover {
    color: var(--highlight);
}

.mobile-menu a.active {
    color: var(--highlight);
    font-weight: 600; /* Optional: Auch hier hervorheben */
}

/* Hero Section */
#hero {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
}

.hero-subtitle {
    color: var(--highlight);
    font-size: 1rem;
    margin-bottom: 1rem;
    font-family: monospace;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--light-text);
    margin-bottom: 1rem;
}

.hero-description {
    font-size: 1.2rem;
    max-width: 600px;
    margin-bottom: 2rem;
}

.cta-button {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background-color: transparent;
    color: var(--highlight);
    border: 1px solid var(--highlight);
    border-radius: 4px;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.cta-button:hover {
    background-color: rgba(100, 255, 218, 0.1);
    transform: translateY(-3px);
}

/* About Section */
#about {
    padding: 6rem 0;
}

.section-title {
    font-size: 2rem;
    color: var(--light-text);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
}

.section-title::after {
    content: "";
    display: block;
    height: 1px;
    width: 30%;
    background-color: var(--text-color);
    margin-left: 1rem;
    opacity: 0.5;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.profile-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.profile-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}

.profile-img-container {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--highlight);
}

.profile-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(100, 255, 218, 0.1);
    color: var(--highlight);
    font-size: 1.8rem;
    font-weight: 600;
}

.profile-title h3 {
    color: var(--light-text);
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
}

.profile-subtitle {
    color: var(--highlight);
    font-size: 1rem;
}

.profile-details {
    display: flex;
    justify-content: space-around;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
    text-align: center;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--light-text);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-color);
    text-align: center;
    line-height: 1.2;
}

.profile-qualifications {
    padding: 1.5rem;
}

.profile-qualifications h4 {
    color: var(--light-text);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.profile-qualifications h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: var(--highlight);
}

/* Styling für die Qualifikations-Badges */
.qualification-badge-container {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch bei vielen Badges */
    gap: 10px; /* Abstand zwischen den Badges */
    margin-top: 1rem; /* Abstand zur Überschrift "Qualifikationen & Meilensteine" */
}

.qualification-item-badge {
    display: inline-flex; /* Für Icon und Text in einer Reihe */
    align-items: center; /* Vertikale Zentrierung von Icon und Text */
    background-color: var(--light-navy); /* Hintergrundfarbe für Badge */
    color: var(--light-slate); /* Textfarbe */
    padding: 8px 12px; /* Innenabstand */
    border-radius: 16px; /* Abgerundete Ecken */
    font-size: 0.9em; /* Schriftgröße */
    border: 1px solid var(--lightest-navy); /* Optionaler Rand */
    transition: all 0.3s ease;
}

.qualification-item-badge svg {
    margin-right: 8px; /* Abstand zwischen Icon und Text */
    color: var(--highlight); /* Farbe für das Icon, passend zum Akzent */
    width: 16px; /* Feste Breite für SVG */
    height: 16px; /* Feste Höhe für SVG */
    flex-shrink: 0; /* Verhindert, dass SVGs schrumpfen */
}

.qualification-item-badge:hover {
    background-color: var(--navy); /* Etwas dunkler bei Hover */
    border-color: var(--highlight);
    color: var(--lightest-slate);
    transform: translateY(-2px); /* Leichter Anhebe-Effekt */
}

/* Styling für die Auszeichnungs-Badges */
.profile-awards h5 {
    color: var(--light-text); /* Beibehaltung der Textfarbe für die Überschrift */
    margin-bottom: 1rem; /* Erhöhter Abstand unter der Überschrift "Auszeichnungen" */
    font-size: 1.1rem; /* Konsistente Schriftgröße mit anderen Unterüberschriften */
    position: relative;
    padding-bottom: 0.5rem;
}

.profile-awards h5::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: #f779e1; /* Akzentfarbe passend zu den Badges */
}

.awards-badge-container {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch bei vielen Badges */
    gap: 10px; /* Abstand zwischen den Badges */
    margin-top: 1rem; /* Abstand zur Überschrift, falls h5::after nicht ausreicht oder für zusätzlichen Raum */
}

.award-badge {
    display: inline-flex; /* Für Icon und Text in einer Reihe */
    align-items: center; /* Vertikale Zentrierung von Icon und Text */
    background-color: rgba(247, 121, 225, 0.1); /* KI-Akzent Hintergrundfarbe */
    color: var(--light-slate); /* Textfarbe */
    padding: 6px 10px; /* Etwas kompakteres Padding als Qualifikationen */
    border-radius: 14px; /* Abgerundete Ecken */
    font-size: 0.85em; /* Etwas kleinere Schriftgröße */
    border: 1px solid rgba(247, 121, 225, 0.2); /* KI-Akzent Randfarbe */
    transition: all 0.3s ease;
}

.award-badge svg {
    margin-right: 6px; /* Abstand zwischen Icon und Text */
    color: #f779e1; /* KI-Akzent Farbe für das Icon */
    width: 16px; /* Feste Breite für SVG */
    height: 16px; /* Feste Höhe für SVG */
    flex-shrink: 0; /* Verhindert, dass SVGs schrumpfen */
}

.award-badge:hover {
    background-color: rgba(247, 121, 225, 0.2); /* Etwas dunklerer KI-Akzent bei Hover */
    border-color: #f779e1; /* KI-Akzent Randfarbe bei Hover */
    color: var(--lightest-slate);
    transform: translateY(-2px); /* Leichter Anhebe-Effekt */
}

/* Info-Container (rechts) */
.about-info-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.about-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
}

.about-card-content {
    padding: 1.5rem;
}

.about-card-title {
    color: var(--light-text);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.about-card-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: var(--highlight);
}

.about-card p {
    line-height: 1.6;
}

.about-card strong {
    color: var(--highlight);
    font-weight: 600;
}

.expertise-list {
    list-style: none;
    padding-left: 1.2rem;
}

.tech-focus-container {
    padding: 1.5rem;
    background-color: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
}

.tech-focus-title {
    color: var(--light-text);
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.tech-focus-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: var(--highlight);
}

.tech-focus-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.tech-focus-card {
    padding: 1.2rem;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease;
}

.tech-focus-card:hover {
    transform: translateY(-5px);
}

.tech-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1rem; /* Zentriert horizontal */
    font-size: 1.8rem;
    background-color: rgba(100, 255, 218, 0.1);
    padding: 0.8rem;
    transition: transform 0.3s ease;
}

.ai-focus {
    background-color: rgba(247, 121, 225, 0.1);
}

.ai-focus .tech-icon {
    background-color: rgba(247, 121, 225, 0.2);
    color: #f779e1;
}

.cloud-focus {
    background-color: rgba(121, 227, 240, 0.1);
}

.cloud-focus .tech-icon {
    background-color: rgba(121, 227, 240, 0.2);
    color: #79e3f0;
}

.data-focus {
    background-color: rgba(93, 173, 236, 0.1);
}

.data-focus .tech-icon {
    background-color: rgba(93, 173, 236, 0.2);
    color: #5dadec;
}

/* NEUE STYLES FÜR #experience-skills Sektion */
#experience-skills {
    padding: 6rem 0;
}

.section-subtitle {
    text-align: center;
    color: var(--light-slate);
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
}

/* Skill Filter Leiste */
.skill-filter-bar {
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.filter-label {
    color: var(--light-slate);
    font-size: 1rem;
    margin-right: 1rem;
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.skill-filter-tag {
    background-color: var(--light-navy);
    color: var(--slate);
    border: 1px solid var(--lightest-navy);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.skill-filter-tag:hover {
    color: var(--highlight);
    border-color: var(--highlight);
    background-color: rgba(100, 255, 218, 0.1);
}

.skill-filter-tag.active {
    color: var(--highlight);
    border-color: var(--highlight);
    background-color: rgba(100, 255, 218, 0.1);
    font-weight: 500;
}

/* Styling for the new timeline heading */
.timeline-heading {
    color: var(--lightest-slate);
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 2.5rem; /* Space before the timeline starts */
}

/* Vertical Timeline Styles */
.vertical-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

/* Die vertikale Linie */
.vertical-timeline::before {
    content: '';
    position: absolute;
    left: 20px; /* Position der Linie */
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--lightest-navy);
}

.timeline-item {
    padding-left: 50px; 
    margin-bottom: 30px;
    position: relative;
    cursor: pointer; 
    perspective: 1000px; 
    transition: opacity 0.4s ease, max-height 0.5s ease-out, padding-top 0.5s ease-out, padding-bottom 0.5s ease-out, margin-bottom 0.5s ease-out; /* Adjusted transition */
    opacity: 1;
    max-height: 1000px; 
    overflow: hidden; 
}

/* Dot styling (needed again) */
.timeline-dot {
    content: '';
    position: absolute;
    left: 12px; /* Adjust based on .vertical-timeline::before */
    top: 15px; /* Adjust vertical alignment */
    width: 18px;
    height: 18px;
    background-color: var(--navy);
    border: 3px solid var(--highlight);
    border-radius: 50%;
    z-index: 3; /* Above the line and card */
}

/* Card container within the item */
.timeline-card {
    position: relative;
    width: 100%;
    min-height: 180px; /* Ensure minimum height for flip */
    perspective: 1000px; /* Apply perspective here if needed */
}

/* Inner element for flipping */
.timeline-card-inner {
    position: relative; /* Changed from absolute to relative */
    width: 100%;
    /* height: 100%; */ /* REMOVE this */
    min-height: inherit; /* Inherit min-height from parent */
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* Front and Back Face Styles */
.timeline-card-front,
.timeline-card-back {
    position: absolute;
    width: 100%;
    /* height: 100%; */ /* REMOVED for front, will be adjusted for back */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: var(--light-navy);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--lightest-navy);
}

.timeline-card-front {
    display: flex; /* Ermöglicht Flexbox-Positionierung */
    flex-direction: column; /* Stellt Elemente untereinander dar */
    padding: 1.5rem;
    background: var(--light-navy);
    border-radius: 8px;
    position: relative; /* ADD this */
    width: 100%; /* Benötigt bei absoluter Positionierung */
    /* height: 100%; */ /* REMOVE this */
    transition: transform 0.6s, background-color 0.3s ease;
    backface-visibility: hidden;
    z-index: 2; /* Wichtig, damit Front standardmässig oben ist */
    border-left: 4px solid var(--lightest-navy);
}

.timeline-card-back {
    background-color: var(--navy); /* Slightly different background */
    border-left-color: var(--highlight);
    transform: rotateY(180deg);
    justify-content: flex-start; /* Align content to top */
    overflow-y: auto;
    z-index: 1;
    position: absolute; /* Ensure this is absolute */
    top: 0; /* ADD this */
    left: 0; /* ADD this */
    width: 100%; /* Ensure width */
    height: 100%; /* Make it take height of .timeline-card-inner */
    border-radius: 8px; /* Consistency with front */
    padding: 1.5rem;    /* Consistency with front */
    display: flex;      /* Consistency with front */
    flex-direction: column; /* Consistency with front */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Consistency with front */
}

/* Flipped state */
.timeline-item.flipped .timeline-card-inner {
    transform: rotateY(180deg);
}

/* Content styling within front face */
.timeline-card-front .timeline-date {
    display: block;
    font-size: 0.8rem; /* Make date smaller */
    color: var(--highlight); /* CHANGED color */
    margin-top: 0; /* REMOVED margin */
    margin-bottom: 0; /* REMOVED margin */
    font-family: monospace;
    order: 5; /* Ensure it comes before the indicator */
}

.timeline-card-front .timeline-title {
    font-size: 1.35rem; /* Slightly larger font size */
    color: var(--lightest-slate);
    margin-bottom: 0.25rem; /* REDUCED from 0.35rem */
    order: 1;
    font-weight: 600; /* Make title bolder */
    line-height: 1.3; /* Adjust line height */
}

/* NEU: Wrapper für Client und Datum */
.timeline-meta {
    order: 2; /* Kommt nach dem Titel */
    display: flex;
    align-items: baseline; /* Text an der Grundlinie ausrichten */
    gap: 0.5rem; /* Kleinerer Abstand zwischen Client und Datum */
    margin-bottom: 0; /* REDUCED from 0.5rem */
    flex-wrap: wrap; /* Falls zu wenig Platz */
}

.timeline-card-front .timeline-client {
    /* Kein 'order' mehr hier, wird durch Wrapper gesteuert */
    font-size: 0.9rem;
    color: var(--light-slate); /* Hauptfarbe für den Client */
    font-weight: 500; /* Etwas hervorheben */
    margin-bottom: 0; /* EXPLICITLY SET to 0 */
    flex-basis: 100%; /* ADDED to ensure it takes full width */
}

/* NEU: Styling für das Datum als einfacher Text neben dem Client */
.timeline-date-text {
    font-size: 0.8rem; /* Kleinere Schrift */
    color: var(--slate); /* Dezente Farbe */
    font-weight: normal; /* Normale Schriftstärke */
    /* Keine Badge-Styles (background, padding, border-radius) */
    flex-basis: 100%; /* ADDED to ensure it takes full width */
}

/* Entferne die alten Badge-Regeln oder kommentiere sie aus */
/*
.timeline-date-badge {
    order: 2;
    display: inline-block;
    width: auto;
    position: static;
    top: auto;
    left: auto;
    transform: none;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    background-color: var(--lightest-navy);
    color: var(--highlight);
    border-radius: 4px;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-align: left;
    align-self: flex-start;
}
*/

.timeline-card-front .timeline-summary {
    order: 3; /* Reihenfolge angepasst */
    margin-bottom: 0.5rem; /* REDUCED from 0.75rem */
    color: var(--light-slate);
    font-size: 0.95rem;
}

.timeline-card-front .timeline-skills-tags {
    order: 4; /* Reihenfolge angepasst */
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem; /* REDUCED from 1rem */
}

.timeline-card-front .skill-tag-item {
    background-color: var(--navy);
    color: var(--slate);
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    border-radius: 4px;
}

.timeline-card-front .flip-indicator {
    font-size: 0.8rem;
    color: var(--highlight);
    align-self: flex-end;
    margin-top: auto; /* Push to bottom */
    cursor: pointer;
    order: 5; /* Reihenfolge angepasst */
}

/* Content styling within back face */
.timeline-card-back h4 {
    color: var(--highlight);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.timeline-card-back p {
    font-size: 0.9rem;
    color: var(--light-slate);
    margin-bottom: 1rem;
}

.timeline-card-back ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

.timeline-card-back li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--light-slate);
}

.timeline-card-back li::before {
    content: "▹";
    position: absolute;
    left: 0;
    color: var(--highlight);
}

.timeline-card-back .timeline-details-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.timeline-card-back .skill-tag-item {
    background-color: var(--light-navy);
    color: var(--slate);
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    border-radius: 4px;
}

.timeline-card-back .flip-indicator.back {
    font-size: 0.8rem;
    color: var(--highlight);
    align-self: flex-end;
    margin-top: auto; /* Push to bottom */
    cursor: pointer;
}

/* NEU: Zustand für herausgefilterte, eingedampfte Einträge */
.timeline-item.shrunk-filtered {
    opacity: 0.5; /* Matt / Heller */
    cursor: default;
    /* Vertikalen Raum stark reduzieren */
    max-height: 40px; /* Maximale Höhe festlegen */
    min-height: 40px; /* Minimale Höhe festlegen */
    height: 40px; /* Feste Höhe erzwingen */
    padding-top: 0; /* Kein oberes Padding am Item selbst */
    padding-bottom: 0; /* Kein unteres Padding am Item selbst */
    padding-left: 50px; /* Padding beibehalten, um Platz für Dot zu lassen */
    margin-bottom: 10px; /* Kleinerer Abstand zwischen geschrumpften Items */
    overflow: hidden; /* Verhindert, dass Inhalt überläuft */
    /* Übergänge für sanften Effekt */
    transition: opacity 0.3s ease, max-height 0.4s ease-out, min-height 0.4s ease-out, height 0.4s ease-out, padding 0.3s ease, margin-bottom 0.3s ease;
}

/* Karten-Container im geschrumpften Zustand anpassen */
.timeline-item.shrunk-filtered .timeline-card {
    min-height: 0; /* Minimale Höhe der Karte aufheben */
    height: 100%; /* Karte soll Höhe des Items füllen */
}

.timeline-item.shrunk-filtered .timeline-card-inner {
    min-height: 0; /* Minimale Höhe aufheben */
    height: 100%; /* Höhe füllen */
}

/* Vorderseite der Karte im geschrumpften Zustand anpassen */
.timeline-item.shrunk-filtered .timeline-card-front {
    padding: 0.5rem 1.5rem; /* Vertikales Padding reduzieren, horizontales beibehalten */
    height: 100%; /* Höhe füllen */
    display: flex; /* Sicherstellen, dass Flexbox aktiv ist */
    align-items: center; /* Titel vertikal zentrieren */
    box-shadow: none; /* Schatten entfernen */
    border-left-color: var(--lightest-navy); /* Randfarbe zurücksetzen */
}

/* Elemente innerhalb der geschrumpften Karte verstecken, außer dem Titel */
.timeline-item.shrunk-filtered .timeline-meta,
.timeline-item.shrunk-filtered .timeline-summary,
.timeline-item.shrunk-filtered .timeline-skills-tags,
.timeline-item.shrunk-filtered .flip-indicator {
    display: none;
}

/* Styling des Titels im geschrumpften Zustand */
.timeline-item.shrunk-filtered .timeline-title {
    display: block; 
    margin-bottom: 0; /* Keinen unteren Rand */
    font-size: 0.9rem; /* Evtl. Schriftgröße leicht reduzieren */
    white-space: nowrap; /* Verhindert Umbruch */
    overflow: hidden; /* Versteckt überlaufenden Text */
    text-overflow: ellipsis; /* Fügt "..." hinzu, wenn Text zu lang */
    line-height: 1; /* Angepasst an die Zentrierung */
}

/* Dot im geschrumpften Zustand anpassen */
.timeline-item.shrunk-filtered .timeline-dot {
    opacity: 0.6;
    top: 50%; /* Vertikal zentrieren */
    transform: translateY(-50%); /* Genaue vertikale Zentrierung */
    /* Größe evtl. leicht anpassen, falls gewünscht */
    /* width: 16px; */
    /* height: 16px; */
    /* border-width: 2px; */
}

/* Hervorgehobene Elemente (voll sichtbar) */
.timeline-item.highlighted {
    opacity: 1;
    /* Standardhöhen wiederherstellen */
    max-height: 1000px; /* Ausreichend groß */
    min-height: 0; /* Zurücksetzen */
    height: auto; /* Automatische Höhe */
    /* Padding/Margin zurücksetzen */
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 50px;
    margin-bottom: 30px;
    transition: opacity 0.3s ease, max-height 0.4s ease-out, min-height 0.4s ease-out, height 0.4s ease-out, padding 0.3s ease, margin-bottom 0.3s ease;
}

.timeline-item.highlighted .timeline-card-front {
    border-left-color: var(--highlight);
    /* Standard Padding wiederherstellen */
    padding: 1.5rem;
    /* Standard Ausrichtung etc. wiederherstellen */
    align-items: initial; /* Zurücksetzen von align-items */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten wieder einblenden */
    transition: border-left-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

/* Sicherstellen, dass im hervorgehobenen Zustand alle Elemente sichtbar sind */
.timeline-item.highlighted .timeline-meta,
.timeline-item.highlighted .timeline-summary,
.timeline-item.highlighted .timeline-skills-tags,
.timeline-item.highlighted .flip-indicator {
    display: flex; /* Oder die jeweilige Standardanzeige */
}
.timeline-item.highlighted .timeline-summary {
    display: -webkit-box; /* Für summary-limited */
}

/* Layout-Helfer für das kompakte Design */

/* Client unter dem Datum */
.timeline-client {
  display: block;
  font-size: 0.85rem;
  color: var(--slate);
  margin-bottom: 0.6rem;
}

/* Beschreibung auf max. 2 Zeilen begrenzen */
.summary-limited {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

/* Titel im kompakten Layout (bereits im JS als .compact-layout gesetzt) */
.compact-layout h3.timeline-title {
   font-size: 1.1rem;
   margin-bottom: 0.1rem;
   color: var(--lightest-slate);
   font-weight: 600;
 }

/* Remove styles for the old details panel (now part of back face) */
.timeline-details-panel {
    display: none;
}

/* Projects Section */
#projects {
    padding: 6rem 0;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive Grid */
    gap: 2rem;
}

.project-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-10px);
}

.project-content {
    padding: 1.5rem;
}

.project-title {
    color: var(--light-text);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.project-description {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Tech Tags im Project Card */
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem; /* Abstand zu Links */
}

.tech-tag {
    background-color: rgba(136, 146, 176, 0.1);
    color: var(--text-color);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.project-links {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end; /* Links nach rechts */
    gap: 1rem;
}

.project-link {
    color: var(--text-color); /* Standard Textfarbe */
    text-decoration: none;
    font-size: 1rem; /* Etwas größer für bessere Klickbarkeit */
    transition: color 0.3s ease;
}

.project-link:hover {
    color: var(--highlight); /* Highlight-Farbe bei Hover */
}

/* Contact Section */
#contact {
    padding: 6rem 0;
    text-align: center;
}

.contact-description {
    max-width: 600px;
    margin: 0 auto 2rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-item a {
    color: var(--highlight);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: var(--light-text);
}

/* Footer */
footer {
    padding: 2rem 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-color);
}

/* Loading Animation */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(100, 255, 218, 0.2);
    border-top-color: var(--highlight);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Sonstige Hilfsklassen und Basis-Stylings */
.expertise-list li::before {
    content: "▹";
    position: absolute;
    left: 0;
    color: var(--highlight);
}

/* Sparkle Styling (falls noch verwendet) */
.sparkle {
    position: absolute;
    width: 5px; 
    height: 5px;
    background-color: #64ffda; /* Default, JS overrides */
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 1;
    mix-blend-mode: screen; 
}

/* Media Queries für größere Bildschirme */
@media screen and (min-width: 768px) {
    .hero-title {
        font-size: 3.5rem;
    }
    
    .about-grid {
        grid-template-columns: 1fr 2fr; /* Profilkarte links, Info-Karten rechts */
    }
    
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    nav {
        display: block;
    }
    
    .hamburger {
        display: none;
    }
    
    .mobile-menu {
        display: none;
    }

    .skill-filter-bar {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
}

@media screen and (min-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* === NEUE STYLES für #innovative-concepts (lineare Liste) === */
#innovative-concepts {
    padding: 6rem 0;
    /* Beibehaltung des Padding, Hintergrund kann angepasst werden */
    /* background-color: var(--navy); */
}

.innovation-projects-list {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* Abstand zwischen Projekten */
    max-width: 800px; /* Begrenzung der Breite für bessere Lesbarkeit im Mobile-First-Ansatz */
    margin: 2rem auto 0 auto; /* Zentrierung und Abstand nach oben */
}

/* Desktop-Layout: Projekte nebeneinander */
@media (min-width: 992px) {
    .innovation-projects-list {
        flex-direction: row; /* Nebeneinander anordnen */
        max-width: 1200px; /* Breiter für Desktop */
        gap: 2rem; /* Etwas kleinerer Abstand bei nebeneinander */
        align-items: stretch; /* Stellt sicher, dass alle Karten die gleiche Höhe haben, falls gewünscht */
    }

    .innovation-project {
        flex: 1; /* Jedes Projekt nimmt gleich viel Platz ein */
        display: flex; /* Ermöglicht Flexbox innerhalb der Projektkarte */
        flex-direction: column; /* Inhalt der Karte bleibt vertikal */
    }

    .innovation-project .project-details {
        flex-grow: 1; /* Lässt den Detailbereich wachsen, um Footer unten zu halten, falls vorhanden */
    }

    .project-divider {
        display: none; /* Trennlinien im Desktop-Modus ausblenden */
    }
}

.innovation-project {
    background-color: var(--light-navy); /* Hintergrund für jedes Projekt */
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
    border-left: 4px solid var(--highlight); /* Standard-Akzentlinie links */
}

/* Spezifische Akzentfarben für Projekte */
.innovation-project:has(.pharos-icon) {
    border-left-color: #00BCD4; /* Pharos Farbe */
}

.innovation-project:has(.dmrn-icon) {
    border-left-color: #4CAF50; /* DMRN Farbe */
}

.innovation-project .project-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.innovation-project .project-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(100, 255, 218, 0.1);
    color: var(--highlight);
}

.innovation-project .pharos-icon {
    background-color: rgba(0, 188, 212, 0.1);
    color: #00BCD4;
}

.innovation-project .dmrn-icon {
    background-color: rgba(76, 175, 80, 0.1);
     color: #4CAF50;
}

.innovation-project .project-title-group h3 {
    color: var(--lightest-slate);
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
}

.innovation-project .project-duration {
    font-size: 0.9rem;
    color: var(--slate);
    font-weight: normal;
    margin-left: 0.5rem;
}

.innovation-project .project-title-group h4 {
    color: var(--highlight); /* Standard Highlight Farbe */
    font-size: 1rem;
    font-weight: 500;
}

.innovation-project:has(.pharos-icon) h4 {
    color: #00BCD4; /* Spezifische Farbe für Pharos */
}

.innovation-project:has(.dmrn-icon) h4 {
    color: #4CAF50; /* Spezifische Farbe für DMRN */
}

.innovation-project .project-details p {
    font-size: 0.95rem;
    color: var(--light-slate);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.innovation-project .project-details h5 {
    color: var(--light-slate);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.innovation-project .project-details ul {
    list-style: none;
    padding-left: 0;
}

.innovation-project .project-details li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--slate);
}

.innovation-project .project-details li::before {
    content: "▹";
    position: absolute;
    left: 0;
    color: var(--highlight);
}

.innovation-project:has(.pharos-icon) .project-details li::before {
     color: #00BCD4; /* Passende Farbe */
}

.innovation-project:has(.dmrn-icon) .project-details li::before {
     color: #4CAF50; /* Passende Farbe */
}

.project-divider {
    border: none;
    height: 1px;
    background-color: var(--lightest-navy);
    opacity: 0.5;
    margin: 0; /* Wird durch gap im Flex-Container gesteuert */
}

/* === NEUE STYLES für #startup-offering (Erweiterungen) === */

/* Basis Styling für die neuen Angebotsblöcke */
.offering-block {
    background-color: var(--light-navy); /* Hellerer Hintergrund */
    padding: 2.5rem; /* Mehr Padding */
    border-radius: 8px;
    margin-top: 3rem;
    border: 1px solid var(--lightest-navy);
    box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
}

.offering-block-title {
    font-size: 1.5rem;
    color: var(--lightest-slate);
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--lightest-navy);
}

.offering-block-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px; /* Direkt auf der Border-Bottom Linie */
    width: 70px;
    height: 2px;
    background-color: var(--highlight);
}

/* Spezifische Akzentfarben für Titel */
.ki-offering .offering-block-title::after {
    background-color: #f779e1; /* KI-Akzentfarbe */
}

.security-offering .offering-block-title::after {
    background-color: #79e3f0; /* Security-Akzentfarbe (wie Cloud) */
}

.offering-content {
    display: grid;
    grid-template-columns: 1fr; /* Standard für Mobile */
    gap: 2rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .offering-content {
        grid-template-columns: 1fr 1fr; /* Nebeneinander auf größeren Screens */
         align-items: start; /* Oben ausrichten */
    }
     /* Für Security mit 3 Kacheln andere Aufteilung */
    .security-offering .offering-content {
        grid-template-columns: 1fr; /* Beschreibung oben */
    }
    .security-offering .offering-packages {
        margin-top: 1rem;
    }
}

@media (min-width: 992px) {
    /* Für KI-Angebot: Beschreibung links, Kachel rechts */
     .ki-offering .offering-content {
        grid-template-columns: 2fr 1fr; /* Beschreibung breiter */
     }
}

.offering-description p {
    margin-bottom: 1rem;
    color: var(--light-slate);
}

.offering-description ul {
    list-style: none;
    padding-left: 0;
}

.offering-description li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: var(--slate);
}

.offering-description li::before {
    content: "✓"; /* Checkmark statt Pfeil */
    position: absolute;
    left: 0;
    color: var(--highlight);
    font-weight: bold;
}

.ki-offering .offering-description li::before {
    color: #f779e1; /* KI-Akzentfarbe */
}

.security-offering .offering-description li::before {
     color: #79e3f0; /* Security-Akzentfarbe */
}

.offering-packages {
    /* Container für die Service-Karten/Pakete */
}

/* KI Seminar Card anpassen */
.seminar-card {
    border-left: 4px solid #f779e1;
    max-width: 350px; /* Maximale Breite begrenzen */
    margin: 0 auto; /* Zentrieren */
}

.seminar-card .service-icon {
     color: #f779e1;
}

/* Security Service Cards anpassen (verwenden .additional-services-grid) */
.security-offering .additional-services-grid {
    margin-top: 0; /* Kein extra Abstand, da im Grid */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Kleinere Min-Breite evtl. */
}

.security-offering .service-card {
     border-left: 4px solid #79e3f0;
     text-align: left; /* Text linksbündig für Security-Karten */
     align-items: flex-start; /* Icon und Elemente links ausrichten */
}

.security-offering .service-icon {
     margin-left: 0; /* Icon links ausrichten */
     background-color: rgba(121, 227, 240, 0.1); /* Hellerer, thematischer Hintergrund */
}

.ki-offering .seminar-card .service-icon {
    background-color: rgba(247, 121, 225, 0.1); /* Hellerer, thematischer Hintergrund */
}

/* CTA Styling in den Blöcken */
.offering-cta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    background-color: rgba(10, 25, 47, 0.3); /* Subtiler Hintergrund */
    border-radius: 0 0 8px 8px;
    padding: 1.5rem;
}

.offering-cta p {
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--lightest-slate);
}

/* Anpassung des ursprünglichen Startup-Blocks für Konsistenz */
.startup-offering-card {
     background-color: var(--light-navy);
     padding: 2.5rem;
    border-radius: 8px;
     margin-bottom: 2.5rem;
}

.startup-offering-card .about-card-title {
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
}

/* Verbesserung der Listenelemente in allen Angebotsbereichen */
.expertise-list li,
.offering-description li {
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

/* Anpassung Startup Services Grid */
.startup-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem; /* Abstand zur Hauptkarte */
    margin-bottom: 3rem; /* Abstand zu den neuen Blöcken */
}

/* Spezifische Anpassung für KI- und Security-Pakete */
.ki-offering .offering-packages {
    display: flex;
    justify-content: center;
}

.seminar-card {
    border-left: 4px solid #f779e1;
    max-width: 350px; /* Maximale Breite begrenzen */
    margin: 0 auto; /* Zentrieren */
}

.security-offering .offering-packages {
    margin-top: 1.5rem;
}

.security-offering .service-card {
    border-left: 4px solid #79e3f0;
    text-align: left; /* Text linksbündig für Security-Karten */
    align-items: flex-start; /* Icon und Elemente links ausrichten */
}

.security-offering .service-icon {
    margin-left: 0; /* Icon links ausrichten */
    background-color: rgba(121, 227, 240, 0.1); /* Hellerer, thematischer Hintergrund */
}

.ki-offering .seminar-card .service-icon {
    background-color: rgba(247, 121, 225, 0.1); /* Hellerer, thematischer Hintergrund */
}

/* Weitere Korrekturen für die Startup-Karte */
.startup-offering-card {
    background-color: var(--light-navy);
    padding: 2.5rem;
    border-radius: 8px;
    margin-bottom: 2.5rem;
}

.startup-offering-card .about-card-title {
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
}

/* Verbesserung der Listenelemente in allen Angebotsbereichen */
.expertise-list li,
.offering-description li {
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

/* Verbesserung des CTA-Bereichs in allen Angeboten */
.offering-cta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    background-color: rgba(10, 25, 47, 0.3); /* Subtiler Hintergrund */
    border-radius: 0 0 8px 8px;
    padding: 1.5rem;
}

.offering-cta p {
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--lightest-slate);
}

/* Korrektur und Erweiterung der Service-Karten Styles */
.service-card {
    background-color: var(--light-navy);
    padding: 1.8rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--lightest-navy);
    min-height: 200px;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.4);
}

.service-icon {
    font-size: 2.5rem;
    margin-bottom: 1.2rem;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--navy);
    margin-left: auto;
    margin-right: auto;
}

.service-title {
    color: var(--lightest-slate);
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.service-description {
    font-size: 0.9rem;
    color: var(--slate);
    line-height: 1.5;
}

/* === MODERNE STYLES FÜR DIE ANGEBOTSSEKTION === */

.services-section {
    padding: 6rem 0;
    background-color: var(--navy);
    position: relative;
    overflow: hidden;
}

.services-section::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100, 255, 218, 0.05) 0%, rgba(10, 25, 47, 0) 70%);
    top: -150px;
    right: -150px;
    z-index: 0;
}

.services-section::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100, 255, 218, 0.03) 0%, rgba(10, 25, 47, 0) 70%);
    bottom: -200px;
    left: -200px;
    z-index: 0;
}

.services-section .container {
    position: relative;
    z-index: 1;
}

.services-section .section-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.services-section .section-subtitle {
    font-size: 1.1rem;
    margin-bottom: 3rem;
    max-width: 600px;
}

/* Strukturiertes 2x2x1 Layout */
.services-layout {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 3rem;
}

.services-row {
    display: flex;
    gap: 2.5rem;
    width: 100%;
}

/* Zwei Karten pro Reihe im Desktop-Layout */
@media (min-width: 768px) {
    .top-row, .middle-row {
        flex-direction: row;
    }
    
    .top-row .service-card, 
    .middle-row .service-card {
        flex: 1;
        width: calc(50% - 1.25rem);
    }
    
    .bottom-row .service-card {
        width: 100%;
    }
}

/* Responsive Anpassung für kleinere Bildschirme */
@media (max-width: 767px) {
    .services-row {
        flex-direction: column;
    }
    
    .service-card {
        width: 100%;
    margin-bottom: 1.5rem;
    }
}

/* Angebotskarten */
.service-card {
    background-color: var(--light-navy);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--lightest-navy);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

/* Farbige Akzentleiste oben an der Karte */
.card-accent {
    height: 4px;
    width: 100%;
    background: var(--highlight);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.startup-card .card-accent {
    background: linear-gradient(to right, #FF9800, #FFB74D);
}

.ai-card .card-accent {
    background: linear-gradient(to right, #f779e1, #f9a8ec);
}

.security-card .card-accent {
    background: linear-gradient(to right, #4fc3f7, #81d4fa);
}

.custom-card .card-accent {
    background: linear-gradient(to right, #9e9e9e, #bdbdbd);
}

.contact-card .card-accent {
    background: linear-gradient(to right, #64ffda, #a7ffeb);
}

/* Kartenheader */
.service-card-header {
    padding: 1.75rem 1.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Badges für Karten */
.card-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background-color: var(--navy);
    color: var(--highlight);
    font-size: 0.8rem;
    border-radius: 30px;
    margin-bottom: 1rem;
    font-weight: 500;
}

.startup-card .card-badge {
    color: #FF9800;
    background-color: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.2);
}

.ai-card .card-badge {
    color: #f779e1;
    background-color: rgba(247, 121, 225, 0.1);
    border: 1px solid rgba(247, 121, 225, 0.2);
}

.security-card .card-badge {
    color: #4fc3f7;
    background-color: rgba(79, 195, 247, 0.1);
    border: 1px solid rgba(79, 195, 247, 0.2);
}

.custom-card .card-badge {
    color: #9e9e9e;
    background-color: rgba(158, 158, 158, 0.1);
    border: 1px solid rgba(158, 158, 158, 0.2);
}

.service-card-header h3 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--lightest-slate);
    font-weight: 600;
}

/* Icons */
.service-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
}

.startup-icon {
    background-color: rgba(255, 152, 0, 0.15);
    color: #FF9800;
}

.ai-icon {
    background-color: rgba(247, 121, 225, 0.15);
    color: #f779e1;
}

.security-icon {
    background-color: rgba(79, 195, 247, 0.15);
    color: #4fc3f7;
}

.custom-icon {
    background-color: rgba(158, 158, 158, 0.15);
    color: #9e9e9e;
}

.contact-icon {
    background-color: rgba(100, 255, 218, 0.15);
    color: var(--highlight);
}

/* Karteninhalt */
.service-card-content {
    padding: 1rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Füllt die Karte vertikal aus */
}

.service-card-content h4 {
    color: var(--lightest-slate);
    margin-top: 0;
    margin-bottom: 1.4rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: 1px solid var(--lightest-navy);
    padding-bottom: 0.7rem;
}

/* Features-Liste */
.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    flex-grow: 1;
}

.service-features li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 1rem;
    color: var(--slate);
    font-size: 1rem;
    line-height: 1.5;
}

.service-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--highlight);
    font-weight: bold;
}

/* Spezifische Farben für die verschiedenen Bereiche */
.startup-card .service-features li::before {
    color: #FF9800;
}

.ai-card .service-features li::before {
    color: #f779e1;
}

.security-card .service-features li::before {
    color: #4fc3f7;
}

/* Tags für individuelle Angebote */
.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0 0 1.75rem;
    flex-grow: 1;
}

.service-tags span {
    background-color: var(--navy);
    color: #9e9e9e;
    padding: 0.45rem 0.9rem;
    border-radius: 30px;
    font-size: 0.9rem;
    border: 1px solid rgba(158, 158, 158, 0.2);
    transition: all 0.2s ease;
}

.service-tags span:hover {
    transform: translateY(-2px);
    background-color: rgba(158, 158, 158, 0.1);
    color: var(--lightest-slate);
    border-color: rgba(158, 158, 158, 0.4);
}

/* Kartenfooter */
.service-card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Preise */
.price-tag {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--lightest-slate);
}

/* CTA-Buttons */
.option-cta {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    background-color: transparent;
    text-align: center;
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: 30px;
    transition: all 0.3s ease;
    color: var(--highlight);
    border: 1px solid var(--highlight);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

.startup-card .option-cta {
    color: #FF9800;
    border-color: #FF9800;
}

.ai-card .option-cta {
    color: #f779e1;
    border-color: #f779e1;
}

.security-card .option-cta {
    color: #4fc3f7;
    border-color: #4fc3f7;
}

.option-cta:hover {
    background-color: rgba(100, 255, 218, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
}

.startup-card .option-cta:hover {
    background-color: rgba(255, 152, 0, 0.1);
}

.ai-card .option-cta:hover {
    background-color: rgba(247, 121, 225, 0.1);
}

.security-card .option-cta:hover {
    background-color: rgba(79, 195, 247, 0.1);
}

/* Voller CTA-Button für individuelle Angebote */
.full-cta {
    display: block;
    width: 100%;
    padding: 0.8rem;
        text-align: center;
    background-color: transparent;
    color: #9e9e9e;
    border: 1px solid #9e9e9e;
    border-radius: 30px;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

.full-cta:hover {
    background-color: rgba(158, 158, 158, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
    color: var(--lightest-slate);
}

/* Kontaktkarte */
.contact-card {
    border-color: rgba(100, 255, 218, 0.3);
    background: linear-gradient(160deg, var(--light-navy) 0%, var(--navy) 100%);
}

.contact-card-content {
    padding: 1.75rem;
    height: 100%;
}

.contact-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-header h3 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--lightest-slate); 
    font-weight: 600;
}

.contact-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

@media (min-width: 768px) {
    .contact-layout {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
    }
    
    .contact-text {
        flex: 1;
        padding-right: 1rem;
    }
    
    .contact-details {
        flex: 1;
    }
}

.contact-text {
    margin-bottom: 2rem;
}

.contact-text p {
    color: var(--light-slate);
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.contact-text .cta-button {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    font-weight: 500;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.contact-text .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.05rem;
    padding: 0.8rem 1.2rem;
    background-color: var(--navy);
    border-radius: 10px;
    border: 1px solid var(--lightest-navy);
    transition: all 0.3s ease;
}

.contact-info-item:hover {
    transform: translateX(5px);
    border-color: rgba(100, 255, 218, 0.3);
    background-color: rgba(100, 255, 218, 0.05);
}

.contact-info-item svg {
    color: var(--highlight);
    flex-shrink: 0;
}

.contact-info-item a {
    color: var(--light-slate);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-item a:hover {
    color: var(--highlight);
}

/* Biografie-Hero-Bereich */
#biography-hero {
    height: 40vh;
    min-height: 300px;
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 70px;
    background-color: var(--navy);
    background-image: linear-gradient(to bottom, rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.8));
    overflow: hidden;
}

#biography-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(100, 255, 218, 0.1), transparent 60%);
    z-index: 1;
}

#biography-hero .container {
    position: relative;
    z-index: 2;
}

#biography-hero .hero-content {
    max-width: 800px;
}

#biography-hero .hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--light-text);
    margin-bottom: 1rem;
}

#biography-hero .hero-description {
    font-size: 1.2rem;
    max-width: 600px;
    margin-bottom: 2rem;
    color: var(--light-slate);
}

/* -------------------------------------------------------------------------- */
/*                     Technologien & Kompetenzen (Tag Cloud)                 */
/* -------------------------------------------------------------------------- */

#technologies-competencies {
    padding: 80px 0 60px;
    background-color: var(--navy); 
}

#technologies-competencies .section-title {
    color: var(--lightest-slate);
}

#technologies-competencies .section-subtitle {
    color: var(--slate-light);
    margin-bottom: 40px;
}

.tag-cloud-display { /* Dieser Container hält jetzt die Accordion-Items */
    display: flex;
    flex-direction: column; /* Kategorien untereinander */
    gap: 10px; /* Abstand zwischen den Kategorie-Blöcken */
    max-width: 800px; /* Maximale Breite für bessere Lesbarkeit */
    margin: 0 auto; /* Zentrieren */
}

.category-accordion-item {
    background-color: var(--light-navy);
    border-radius: var(--border-radius);
    border: 1px solid var(--lightest-navy);
    overflow: hidden; /* Wichtig für max-height Animation */
}

.category-header {
    background-color: transparent; 
    color: var(--lightest-slate);
    cursor: pointer;
    padding: 12px 18px; /* Reduziertes Padding */
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.0rem; /* Leicht reduzierte Schriftgröße */
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.category-header:hover {
    background-color: var(--navy-dark);
}

.category-header .arrow {
    font-size: 1.1rem; /* Pfeilgröße angepasst */
    transition: transform 0.3s ease;
    color: var(--highlight);
}

.category-accordion-item.active .category-header .arrow {
    transform: rotate(90deg);
}

.category-tags-container {
    padding: 0px 20px 15px; /* Padding nur unten und seitlich, oben durch Header */
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Kleinerer Gap für Tags innerhalb der Kategorie */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Sanfte Animation */
}

.category-accordion-item.active .category-tags-container {
    max-height: 1000px; /* Ausreichend großer Wert für den Inhalt */
    padding-top: 10px;
    padding-bottom: 15px;
    transition: max-height 0.5s ease-in, padding 0.5s ease-in;
}

/* Kompakteres Tag-Styling */
.knowhow-tag {
    padding: 4px 10px; /* Weiter reduziertes Padding */
    border-radius: 14px; 
    font-size: 0.75rem; /* Weiter reduzierte Schriftgröße */
    font-weight: 500;
    background-color: var(--navy); 
    color: var(--slate);
    border: 1px solid var(--lightest-navy);
    transition: all 0.2s ease;
    cursor: default; 
}

.knowhow-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-color: var(--highlight);
    color: var(--highlight);
}

.knowhow-tag.tag-source-cv_data {
    border-color: var(--lightest-navy); 
}

.knowhow-tag.tag-source-manuell {
    border-color: var(--green); 
    color: var(--green-tint);
}
.knowhow-tag.tag-source-manuell:hover {
    color: var(--green);
    border-color: var(--green);
    background-color: rgba(var(--rgb-green, 100, 255, 218), 0.05); /* Leichter grüner Schimmer */
}

.knowhow-tag.tag-source-ki-erzeugt {
    border-color: #f779e1; 
    color: #f9a8ec;
}
.knowhow-tag.tag-source-ki-erzeugt:hover {
    color: #f779e1;
    border-color: #f779e1;
    background-color: rgba(247, 121, 225, 0.05); /* Leichter pinker Schimmer */
}


/* Optische Unterscheidung durch ein kleines Präfix (optional) */
/*
.knowhow-tag.tag-source-manuell::before {
    content: "M ■ "; 
    font-size: 0.7em;
    opacity: 0.7;
}
.knowhow-tag.tag-source-ki-erzeugt::before {
    content: "KI ● ";
    font-size: 0.7em;
    opacity: 0.7;
}
*/


/* -------------------------------------------------------------------------- */
/*                        Mini-Biografie / Horizontale Timeline               */
/* -------------------------------------------------------------------------- */

#career-highlights {
    padding: 80px 0;
    background-color: var(--navy-lightest); /* Hintergrund ähnlich anderer Sektionen, leicht abgesetzt */
    overflow: hidden; /* Verhindert ungewolltes Scrollen der Hauptseite durch Timeline */
}

#career-highlights .section-title {
    margin-bottom: 20px;
    color: var(--white);
}

#career-highlights .section-subtitle {
    margin-bottom: 50px;
    color: var(--slate-light);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

#career-highlights .text-link {
    color: var(--green);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

#career-highlights .text-link:hover {
    color: var(--green-tint);
}

.horizontal-timeline-wrapper {
    width: 100%;
    overflow-x: auto; /* Ermöglicht horizontales Scrollen */
    -webkit-overflow-scrolling: touch; /* Sanftes Scrollen auf Touch-Geräten */
    padding-bottom: 30px; /* Platz für Scrollbar und Schatten */
    margin-bottom: 40px; /* Abstand zum "Mehr erfahren" Button */
}

/* Scrollbar Styling (optional, für Webkit-Browser) */
.horizontal-timeline-wrapper::-webkit-scrollbar {
    height: 8px;
}

.horizontal-timeline-wrapper::-webkit-scrollbar-track {
    background: var(--navy-dark);
    border-radius: 4px;
}

.horizontal-timeline-wrapper::-webkit-scrollbar-thumb {
    background: var(--slate);
    border-radius: 4px;
}

.horizontal-timeline-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--slate-light);
}

.horizontal-timeline {
    display: flex; /* Ordnet die Items nebeneinander an */
    position: relative;
    min-width: min-content; /* Stellt sicher, dass der Container so breit wie sein Inhalt ist */
    padding: 60px 20px; /* Oben/Unten Platz für Lanes, Seitlich für erstes/letztes Element */
    align-items: flex-start; /* Stellt sicher, dass die Karten oben beginnen, falls unterschiedliche Höhen */
}

.horizontal-timeline::before { /* Die zentrale Zeitachse */
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--green-tint);
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* Für die Verbindungslinie und den Punkt */
    margin: 0 20px; /* Abstand zwischen den Meilensteinen */
    padding-top: 40px; /* Platz für die Karte oberhalb der Achse */
    padding-bottom: 40px; /* Platz für die Karte unterhalb der Achse */
    min-width: 280px; /* Mindestbreite einer Karte */
    max-width: 320px; /* Maximalbreite einer Karte */
    z-index: 2; /* Damit Karten über der Achse liegen */
}

/* Verbindungspunkt auf der Zeitachse */
.timeline-milestone::before {
    content: '';
    position: absolute;
    background-color: var(--green);
    border: 3px solid var(--navy-lightest);
    border-radius: 50%;
    width: 15px;
    height: 15px;
    z-index: 3; /* Über der Verbindungslinie */
}

/* Verbindungslinie von Karte zur Achse */
.timeline-milestone::after {
    content: '';
    position: absolute;
    background-color: var(--slate-light);
    width: 2px;
    z-index: 2;
}

/* Positionierung für obere Lane */
.timeline-milestone.lane-top {
    padding-bottom: 40px; /* Nur unten Abstand, da Karte oben ist */
    padding-top: 0; /* Kein Abstand oben */
    margin-bottom: 40px; /* Abstand zur Achse */
}
.timeline-milestone.lane-top::before { /* Punkt */
    top: calc(50% + 40px); /* Position auf der Hauptachse, relativ zur Kartenunterkante */
    transform: translateY(-50%);
}
.timeline-milestone.lane-top::after { /* Linie */
    bottom: -38px; /* Startet kurz vor dem Punkt */
    height: 38px; /* Länge der Linie bis zur Achse */
    left: 50%;
    transform: translateX(-50%);
}
.timeline-milestone.lane-top .milestone-card {
    margin-bottom: auto; /* Karte nach oben schieben */
}


/* Positionierung für untere Lane */
.timeline-milestone.lane-bottom {
    padding-top: 40px; /* Nur oben Abstand, da Karte unten ist */
    padding-bottom: 0;
    margin-top: 40px; /* Abstand zur Achse */
}
.timeline-milestone.lane-bottom::before { /* Punkt */
    bottom: calc(50% + 40px); /* Position auf der Hauptachse, relativ zur Kartenoberkante */
    transform: translateY(50%);
}
.timeline-milestone.lane-bottom::after { /* Linie */
    top: -38px; /* Startet kurz vor dem Punkt */
    height: 38px; /* Länge der Linie bis zur Achse */
    left: 50%;
    transform: translateX(-50%);
}
.timeline-milestone.lane-bottom .milestone-card {
    margin-top: auto; /* Karte nach unten schieben */
}


.milestone-card {
    background-color: var(--navy);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    width: 100%;
    text-align: left;
    border: 1px solid var(--navy-dark);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.milestone-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.milestone-date {
    font-size: 0.8rem;
    color: var(--green);
    margin-bottom: 5px;
    font-weight: 500;
}

.milestone-title {
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: 8px;
    font-weight: 600;
}

.milestone-company {
    font-size: 0.9rem;
    color: var(--slate-light);
    margin-bottom: 10px;
}

.milestone-description {
    font-size: 0.85rem;
    color: var(--slate);
    line-height: 1.5;
}

.timeline-navigation {
    text-align: center;
    margin-top: 40px;
}

.timeline-navigation .cta-button {
    display: inline-block; /* Stellt sicher, dass Padding und andere Block-Eigenschaften greifen */
    background-color: var(--highlight); /* --green ist oft --highlight */
    color: var(--navy);
    padding: 0.9rem 1.8rem; /* Etwas großzügigeres Padding */
    border-radius: 4px; /* Konsistent mit anderen CTAs */
    border: 1px solid var(--highlight); /* Rand in Akzentfarbe */
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600; /* Etwas fetter */
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.timeline-navigation .cta-button:hover,
.timeline-navigation .cta-button:focus {
    background-color: var(--light-navy); /* Hintergrund bei Hover ändern */
    color: var(--highlight); /* Textfarbe bei Hover anpassen */
    border-color: var(--highlight); /* Randfarbe beibehalten oder anpassen */
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(var(--rgb-highlight, 100, 255, 218), 0.2); /* Subtiler Schatten in Akzentfarbe */
}


/* Responsive Anpassungen für die horizontale Timeline */
@media (max-width: 768px) {
    .horizontal-timeline {
        padding: 40px 10px; /* Weniger Padding auf kleinen Bildschirmen */
    }
    .timeline-milestone {
        min-width: 240px; /* Kleinere Mindestbreite für Karten */
        max-width: 280px;
        margin: 0 10px; /* Weniger Abstand zwischen Karten */
    }
    #career-highlights .section-subtitle {
        margin-bottom: 30px;
    }
}

/* Styling für Teaser-Tags im Header */
.category-teaser-tags {
    font-size: 0.7rem; /* Sehr kleine Schrift */
    color: var(--slate); /* Dezente Farbe */
    font-weight: 400;
    margin-top: 4px; /* Kleiner Abstand zum Kategorie-Titel */
    display: block; /* Standardmäßig sichtbar, wenn Accordion zu ist */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 30px); /* Damit es nicht mit dem Pfeil kollidiert */
}

.category-accordion-item.active .category-header .category-teaser-tags {
    display: none; /* Teaser ausblenden, wenn die Kategorie aktiv/offen ist */
}

.category-accordion-item.active .category-header .arrow {
    transform: rotate(90deg);
}

/* Animation für das kurzzeitige Highlighten von Tags beim Aufklappen */
@keyframes tagRevealAnimation {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
        box-shadow: 0 0 10px var(--highlight); /* Leuchtender Schatten */
    }
    100% {
        transform: scale(1);
        opacity: 1; /* Bleibt nach Animation voll sichtbar */
    }
}

.tag-reveal-highlight {
    animation-name: tagRevealAnimation;
    animation-duration: 0.4s;
    animation-timing-function: ease-in-out;
    /* Wichtig, damit die Basis-Styles (Farbe, Rand) nicht sofort überschrieben werden, 
       sondern die Animation auf den Hover-ähnlichen Zustand geht */
    border-color: var(--highlight) !important; 
    color: var(--highlight) !important;
    background-color: rgba(var(--rgb-highlight, 100, 255, 218), 0.1) !important;
}


/* Optische Unterscheidung durch ein kleines Präfix (optional) */