:root {
    --primary-futuristic-blue: #00C2FF;
    --secondary-futuristic-purple: #9D4EDD;
    --text-light-futuristic: #E0E7E9;
    --text-dark-futuristic: #1C2A3A;
    --background-dark-futuristic: #0A1128;
    --background-light-futuristic: #F0F4F8;
    --card-background-futuristic: #FFFFFF;
    --border-futuristic: rgba(0, 0, 0, 0.1);
    --shadow-futuristic: rgba(0, 0, 0, 0.15);
    --accent-glow: rgba(0, 194, 255, 0.5);
    --hero-bottom-overlay-color: rgba(0, 0, 0, 0.6);
    --content-max-width: 1100px;
    --form-background: #110D25; /* Hintergrund für das Label-Cutout */
    --error-color: #ff556e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: var(--background-dark-futuristic); color: var(--text-light-futuristic); overflow-x: hidden; cursor: none; opacity: 0; transition: opacity 0.5s ease; }

/* Performance: will-change für GPU-Beschleunigung bei Animationen */
.custom-cursor { position: fixed; width: 24px; height: 24px; background-color: transparent; border: 2px solid var(--primary-futuristic-blue); border-radius: 50%; pointer-events: none; z-index: 10000; transition: transform 0.1s ease; box-shadow: 0 0 10px var(--accent-glow); will-change: transform; }
.custom-cursor::after { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background-color: var(--primary-futuristic-blue); border-radius: 50%; transform: translate(-50%, -50%); }
/* Performance: will-change für GPU-Beschleunigung bei Animationen */
.magnifier { position: fixed; width: 200px; height: 200px; border: 3px solid rgba(var(--primary-futuristic-blue), 0.8); border-radius: 50%; pointer-events: none; z-index: 9999; background-color: transparent; transform: scale(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 50px var(--accent-glow), inset 0 0 50px rgba(255,255,255,0.1); will-change: transform, left, top; }
.magnifier.active { transform: scale(1); }
.magnifier::before { content: ''; position: absolute; top: 50%; left: 50%; width: 180px; height: 180px; border-radius: 50%; transform: translate(-50%, -50%); background-color: transparent; }
.hero { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; color: var(--text-light-futuristic); }
.hero-video { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transform: translate(-50%, -50%); 
    z-index: -1; 
    pointer-events: none; 
    display: block; /* Stellt sicher, dass das Video immer als Block-Element behandelt wird */
    background-color: var(--background-dark-futuristic);
}
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--hero-bottom-overlay-color); z-index: 1; }
.hero-header { position: absolute; top: 40px; left: 40px; display: flex; align-items: center; z-index: 2; }
.hero-content { text-align: center; z-index: 2; max-width: var(--content-max-width); padding: 0 20px; margin-top: 100px; }
.logo { font-size: clamp(1.8rem, 5vw, 3.5rem); font-weight: 900; background: linear-gradient(45deg, var(--primary-futuristic-blue), var(--secondary-futuristic-purple), var(--primary-futuristic-blue)); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientShift 3s ease-in-out infinite; letter-spacing: -1px; line-height: 1.1; }
.hero-text-container { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 1; min-width: 0; }
.hero-subtitle { font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-weight: 400; color: var(--text-light-futuristic); opacity: 0.9; letter-spacing: 1px; margin-top: 5px; padding-left: 3px; -webkit-text-fill-color: initial; background: none; }
.hero-sub-subtitle { font-size: clamp(0.9rem, 2vw, 1.3rem); font-weight: 300; color: var(--text-light-futuristic); opacity: 0.8; letter-spacing: 0.8px; margin-top: 0px; padding-left: 3px; -webkit-text-fill-color: initial; background: none; }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.tagline { font-size: clamp(1.2rem, 3vw, 2rem); opacity: 0.9; margin-bottom: 40px; font-weight: 300; letter-spacing: 0.5px; }
.cta-button { display: inline-block; padding: 15px 40px; background: linear-gradient(90deg, var(--primary-futuristic-blue), var(--secondary-futuristic-purple)); border: none; border-radius: 50px; color: var(--text-light-futuristic); text-decoration: none; font-weight: 600; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 194, 255, 0.4); z-index: 2; cursor: pointer; }
.cta-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.6s; }
.cta-button:hover::before { left: 100%; }
.cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 40px var(--accent-glow); }
.section { padding: 100px 0; color: var(--text-dark-futuristic); position: relative; }
.section-content-wrapper { max-width: var(--content-max-width); margin: 0 auto; padding: 0 20px; }
.section.light-bg { background-color: var(--background-light-futuristic); }
.section.gradient-bg { background: linear-gradient(135deg, #e7eff9 0%, #cfdef3 100%); color: var(--text-dark-futuristic); padding: 80px 0; box-shadow: 0 10px 30px var(--shadow-futuristic); }
.section-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; text-align: center; margin-bottom: 60px; background: linear-gradient(45deg, var(--primary-futuristic-blue), var(--secondary-futuristic-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; }
#services { background-color: var(--background-light-futuristic); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; align-items: stretch; }
.service-card { background: var(--card-background-futuristic); border-radius: 20px; padding: 30px; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.service-card.magnify-card:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12), 0 0 20px var(--accent-glow); }
.service-icon { font-size: 2.8rem; margin-bottom: 20px; color: var(--primary-futuristic-blue); }
.service-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 15px; color: var(--primary-futuristic-blue); }
.service-description { color: var(--text-dark-futuristic); opacity: 0.9; line-height: 1.6; font-size: 0.95rem; margin-bottom: 15px; }
.service-details { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out, margin-top 0.5s ease-in-out; color: var(--text-dark-futuristic); line-height: 1.6; text-align: left; font-size: 0.9rem; margin-top: 0; }
.service-details p { margin-bottom: 1em; }
.service-details ul { list-style-type: none; padding-left: 0; margin-bottom: 1em; }
.service-details li { position: relative; padding-left: 30px; margin-bottom: 10px; line-height: 1.6; text-align: left; }
.service-details li::before { content: '👁️'; position: absolute; left: 0; top: 0; font-size: 1.2em; color: var(--primary-futuristic-blue); line-height: 1.6; }
.expand-btn { background: none; border: none; color: var(--primary-futuristic-blue); padding: 10px 0; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; margin-top: auto; padding-top: 15px; align-self: center; }
.expand-btn:hover { color: var(--secondary-futuristic-purple); }
.service-card.expanded .service-details { max-height: 1000px; opacity: 1; margin-top: 15px; }
#technology { background: linear-gradient(135deg, #e7eff9 0%, #cfdef3 100%); color: var(--text-dark-futuristic); padding: 80px 0; box-shadow: 0 10px 30px var(--shadow-futuristic); }
.technology-content { max-width: 900px; margin: 0 auto; text-align: center; }
.technology-text { font-size: 1.2rem; line-height: 1.8; opacity: 0.85; color: var(--text-dark-futuristic); }
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-text { font-size: 1.15rem; /* Adjusted for consistency */ line-height: 1.8; opacity: 0.9; color: var(--text-dark-futuristic); }
.about-image { width: 100%; height: 400px; background: linear-gradient(45deg, var(--primary-futuristic-blue), var(--secondary-futuristic-purple)); border-radius: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 194, 255, 0.4); }
.about-image img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-text-fill-color: initial; color: initial; text-shadow: none; position: relative; z-index: 100; }
.about-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="30" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="30" cy="80" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="70" cy="70" r="2" fill="rgba(255,255,255,0.1)"/></svg>'); animation: float 6s ease-in-out infinite; z-index: 1; }
.wahlarzt-content { max-width: 800px; margin: 0 auto; color: var(--text-dark-futuristic); text-align: left; }
.wahlarzt-content h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--primary-futuristic-blue); text-align: center; }
.wahlarzt-content p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5em; }
.service-highlight { background-color: rgba(255, 255, 255, 0.6); border-left: 5px solid var(--primary-futuristic-blue); padding: 20px 25px; border-radius: 8px; margin-top: 30px; }
.service-highlight p { margin-bottom: 0; }
.anfahrt-content { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; }
.anfahrt-text { line-height: 1.8; color: var(--text-dark-futuristic); }
.anfahrt-text a { color: var(--primary-futuristic-blue); text-decoration: none; }
.anfahrt-text a:hover { text-decoration: underline; }
.anfahrt-text h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--primary-futuristic-blue); }
.anfahrt-text h4 { font-size: 1.2rem; margin-top: 25px; margin-bottom: 10px; }
.map-container { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.1); min-height: 450px; background-color: #e0e7e9; }
#map-consent-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px; height: 100%; }
#map-consent-placeholder p { color: var(--text-dark-futuristic); margin-bottom: 20px; max-width: 400px; line-height: 1.6; }
#load-map-button { padding: 12px 30px; font-size: 0.95rem; }
#map-embed-container { display: none; width: 100%; height: 100%; }
#map-embed-container.visible { display: block; }
#map-embed-container iframe { width: 100%; height: 100%; border: none; }
#contact { padding: 100px 20px; background: radial-gradient(circle at top left, #4a2f8c, transparent 60%), radial-gradient(circle at bottom right, #f4796b, transparent 50%), linear-gradient(135deg, #573c88, #ae5d85); color: var(--text-light-futuristic); text-align: center; }
.contact-container { max-width: 800px; margin: 0 auto; background: var(--form-background); border-radius: 20px; padding: 50px 40px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 15px 40px rgba(0,0,0,0.4); }
#contact .section-title { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: inherit; background-clip: unset; color: inherit; margin-bottom: 15px; }
.contact-subtitle { font-size: 1.1rem; opacity: 0.85; margin-bottom: 40px; max-width: 500px; margin-left: auto; margin-right: auto; }

/* ===== NEUE & VERBESSERTE FORMULAR-STILE ===== */
.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 40px;
}

.form-group {
    position: relative;
    padding-bottom: 22px; /* Platz für Fehlermeldung */
}

.datenschutz-consent {
    padding-bottom: 22px; /* Platz für Fehlermeldung */
}

.form-group.full-width,
.datenschutz-consent.full-width,
.contact-form .cta-button {
    grid-column: 1 / -1;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1.125rem 1rem; /* 18px 16px */
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem; /* 12px */
    color: var(--text-light-futuristic);
    font-size: 1rem;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    resize: none; /* Verhindert das Ändern der Größe von Textareas */
}

/* Versteckt den Standard-Kalender-Picker */
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

/* Styling für das sichtbare Kalender-Icon */
input[type="date"] {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='16' y1='2' x2='16' y2='6'%3e%3c/cline%3e%3cline x1='8' y1='2' x2='8' y2='6'%3e%3c/cline%3e%3cline x1='3' y1='10' x2='21' y2='10'%3e%3c/cline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2em;
    padding-right: 3rem;
}

/* Styling für den Platzhaltertext im Datumsfeld (z.B. tt.mm.jjjj) */
input[type="date"]::-webkit-datetime-edit {
    color: rgba(255, 255, 255, 0.6);
}
input[type="date"]:focus::-webkit-datetime-edit,
input[type="date"]:valid::-webkit-datetime-edit {
    color: var(--text-light-futuristic);
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-futuristic-blue);
    box-shadow: 0 0 15px var(--accent-glow);
}

.form-group label {
    position: absolute;
    top: 1.125rem; /* 18px */
    left: 1.0625rem; /* 17px */
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: transparent;
}

/* Allgemeine Regel für Label-Positionierung bei Fokus oder Inhalt */
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label,
.form-group select:focus + label,
.form-group select:valid + label {
    top: -0.625rem; /* -10px */
    left: 0.75rem; /* 12px */
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--primary-futuristic-blue);
    padding: 0 0.3125rem; /* 0 5px */
    background: var(--form-background);
}

.form-group select option[value=""][disabled] {
    display: none;
}

.form-group select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2em;
    padding-right: 3rem;
}

/* Spezielle Regel für das Datumsfeld-Label, damit es immer oben ist */
.form-group input[type="date"] + label {
    top: -0.625rem; /* -10px */
    left: 0.75rem; /* 12px */
    font-size: 0.8rem;
    padding: 0 0.3125rem; /* 0 5px */
    background: var(--form-background);
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}
.form-group input[type="date"]:focus + label {
     color: var(--primary-futuristic-blue);
}

.datenschutz-consent {
    position: relative;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 0.9375rem; /* 15px */
    margin-top: 0.625rem; /* 10px */
}

.datenschutz-consent input[type="checkbox"] {
    display: none;
}

.datenschutz-consent label {
    position: relative;
    padding-left: 2.1875rem; /* 35px */
    cursor: pointer;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.datenschutz-consent label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.125rem; /* 2px */
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 0.375rem; /* 6px */
    transition: all 0.3s ease;
}

.datenschutz-consent label::after {
    content: '✓';
    position: absolute;
    left: 0.25rem; /* 4px */
    top: 0.0625rem; /* 1px */
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-light-futuristic);
    opacity: 0;
    transform: scale(0.5) rotate(-10deg);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.datenschutz-consent input[type="checkbox"]:checked + label::before {
    background-color: var(--primary-futuristic-blue);
    border-color: var(--primary-futuristic-blue);
    box-shadow: 0 0 10px var(--accent-glow);
}

.datenschutz-consent input[type="checkbox"]:checked + label::after {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.datenschutz-consent label a {
    color: var(--primary-futuristic-blue);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.datenschutz-consent label a:hover {
    color: var(--text-light-futuristic);
    border-bottom-color: var(--text-light-futuristic);
}

.contact-form .cta-button {
    justify-self: center;
    width: auto;
    min-width: 250px;
    margin-top: 0.9375rem; /* 15px */
}

/* ===== VALIDATION STYLES ===== */
.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea,
.datenschutz-consent.invalid label::before {
    border-color: var(--error-color);
}

.error-message {
    color: var(--error-color);
    font-size: 0.8rem;
    font-weight: 500;
    position: absolute;
    bottom: 0;
    left: 0.3125rem; /* 5px */
    text-align: left;
}
/* ===== ENDE FORMULAR-STILE ===== */


/* ===== NEUE STILE FÜR DEN UNTEREN BEREICH ===== */

.termin-hinweis {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem; /* 16px */
    padding: 1.875rem; /* 30px */
    margin-top: 3.75rem; /* 60px */
    margin-bottom: 2.5rem; /* 40px */
    text-align: left;
}

.termin-hinweis-header {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
    margin-bottom: 1.25rem; /* 20px */
}

.termin-hinweis-icon {
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
    border: 2px solid var(--primary-futuristic-blue);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.termin-hinweis-icon::after {
    content: '';
    position: absolute;
    width: 0.375rem; /* 6px */
    height: 0.375rem; /* 6px */
    background-color: var(--primary-futuristic-blue);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.termin-hinweis h3 {
    color: var(--primary-futuristic-blue);
    font-size: 1.3rem;
    margin: 0;
}

.termin-hinweis ul {
    list-style-type: none;
    padding-left: 0;
}

.termin-hinweis li {
    position: relative;
    padding-left: 1.875rem; /* 30px */
    margin-bottom: 0.75rem; /* 12px */
    line-height: 1.6;
}

.termin-hinweis li::before {
    content: '✔';
    color: var(--primary-futuristic-blue);
    position: absolute;
    left: 0;
    top: 0.125rem; /* 2px */
    font-weight: bold;
    font-size: 1.2rem;
}

.termin-hinweis li:last-child {
    margin-bottom: 0;
}

.termin-hinweis strong {
    color: #fff;
    font-weight: 600;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem; /* 20px */
    text-align: left;
}

.info-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem; /* 16px */
    padding: 1.5625rem; /* 25px */
    transition: background 0.3s ease, transform 0.3s ease;
    text-align: left;
}

.info-card:nth-child(1) { grid-column: 1 / 3; }
.info-card:nth-child(2) { grid-column: 3 / 5; }
.info-card:nth-child(3) { grid-column: 5 / 7; }
.info-card:nth-child(4) { grid-column: 1 / 4; }
.info-card:nth-child(5) { grid-column: 4 / 7; }


.info-card:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: translateY(-0.3125rem); /* -5px */
}

.info-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.9375rem; /* 15px */
    gap: 0.75rem; /* 12px */
}

.info-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.info-card-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
}

.info-card-text {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-size: 0.95rem;
}

.info-card-text a.info-link {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.info-card-text a.info-link:hover {
    text-decoration: underline;
}

.map-link {
    display: inline-block;
    margin-top: 0.625rem; /* 10px */
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    text-decoration: none;
    transition: all 0.2s ease;
}

.map-link:hover {
    color: #fff;
}


/* ===== ENDE NEUE STILE ===== */

/* CV Styling */
.curriculum-vitae {
    margin-top: 80px; /* Space from the content above */
    padding-top: 40px;
    border-top: 1px solid var(--border-futuristic);
}

.curriculum-title {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
    /* Reuse the gradient styling */
    background: linear-gradient(45deg, var(--primary-futuristic-blue), var(--secondary-futuristic-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cv-list {
    list-style: none;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
}

.cv-list li {
    position: relative;
    padding: 15px 0 15px 40px; /* Space for the icon/line */
    border-left: 2px solid var(--primary-futuristic-blue);
    line-height: 1.6;
    font-size: 1.05rem;
    transition: background-color 0.3s ease;
    color: var(--text-dark-futuristic); /* Text color on light background */
}

.cv-list li:hover {
    background-color: rgba(0, 194, 255, 0.05); /* Subtle hover effect */
}

.cv-list li::before {
    content: '';
    position: absolute;
    left: -10px; /* Position it on the timeline line */
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--primary-futuristic-blue);
    border-radius: 50%;
    border: 4px solid var(--background-light-futuristic); /* Creates the timeline dot effect */
    z-index: 1;
    box-shadow: 0 0 10px var(--accent-glow);
}

.cv-list li:last-child {
    border-left: none; /* End the vertical line */
    padding-bottom: 0;
}

.cv-list li strong {
    display: block;
    font-size: 1.15rem;
    color: var(--primary-futuristic-blue);
    margin-bottom: 5px;
}
/* END CV STYLING */


.impressum-link { display: inline-block; margin-top: 2.5rem; /* 40px */ padding: 0.75rem 1.5625rem; /* 12px 25px */ background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255,255,255,0.15); color: var(--text-light-futuristic); text-decoration: none; border-radius: 3.125rem; /* 50px */ transition: all 0.3s ease; font-size: 0.9rem; }
.impressum-link:hover { background-color: rgba(255, 255, 255, 0.2); color: #fff; transform: translateY(-0.125rem); /* -2px */ }
.footer { text-align: center; padding: 2.5rem 1.25rem; /* 40px 20px */ border-top: 1px solid rgba(255, 255, 255, 0.05); opacity: 0.7; background: var(--background-dark-futuristic); color: var(--text-light-futuristic); }
.magnify-text { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.magnify-text.magnified { transform: scale(1.06); color: var(--primary-futuristic-blue); text-shadow: 0 0 20px var(--primary-futuristic-blue), 0 0 35px var(--secondary-futuristic-purple); font-weight: 800; position: relative; z-index: 100; }
h1.magnified, h2.magnified, h3.magnified { transform: scale(1.02); text-shadow: 0 0 15px var(--primary-futuristic-blue); }
.floating-nav { position: fixed; top: 1.875rem; /* 30px */ right: 1.875rem; /* 30px */ background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(1.5625rem); /* 25px */ border-radius: 0.9375rem; /* 15px */ padding: 0.9375rem 1.25rem; /* 15px 20px */ z-index: 1000; border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 10px 40px rgba(0,0,0,0.2); display: flex; flex-direction: column; gap: 0.625rem; /* 10px */ }
.nav-item { display: block; padding: 0.75rem 1.5625rem; /* 12px 25px */ color: var(--text-light-futuristic); text-decoration: none; border-radius: 0.625rem; /* 10px */ transition: all 0.3s ease; font-size: 1rem; font-weight: 500; text-align: center; position: relative; }
.nav-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--primary-futuristic-blue); transform: translateY(-0.125rem); /* -2px */ box-shadow: 0 0 15px rgba(0, 194, 255, 0.3); }
.nav-item.active-section { background: linear-gradient(90deg, var(--primary-futuristic-blue), var(--secondary-futuristic-purple)); color: var(--text-light-futuristic); box-shadow: 0 0 20px var(--accent-glow); font-weight: 600; }
.nav-toggle-button { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; margin-top: 0.625rem; /* 10px */ font-size: 0.95rem; }
.nav-toggle-button:hover { background: rgba(0, 0, 0, 0.2); color: var(--primary-futuristic-blue); }
.nav-toggle-button.active { background: linear-gradient(90deg, var(--primary-futuristic-blue), var(--secondary-futuristic-purple)); color: var(--text-light-futuristic); box-shadow: 0 0 15px var(--accent-glow); }
.hamburger-icon { display: none; position: fixed; top: 1.25rem; /* 20px */ right: 1.25rem; /* 20px */ width: 2.5rem; /* 40px */ height: 2.5rem; /* 40px */ background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; /* 8px */ cursor: pointer; flex-direction: column; justify-content: space-around; align-items: center; padding: 0.5rem; /* 8px */ z-index: 1001; transition: background 0.3s ease, transform 0.3s ease; }
.hamburger-icon:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.05); }
.hamburger-icon .bar { width: 80%; height: 0.1875rem; /* 3px */ background-color: var(--text-light-futuristic); border-radius: 0.125rem; /* 2px */ transition: all 0.3s ease; }
.hamburger-icon.open .bar:nth-child(1) { transform: translateY(0.5rem) rotate(45deg); /* 8px */ }
.hamburger-icon.open .bar:nth-child(2) { opacity: 0; }
.hamburger-icon.open .bar:nth-child(3) { transform: translateY(-0.5rem) rotate(-45deg); /* 8px */ }
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-out, visibility 0.3s ease-out; }
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }
body.modal-open { overflow: hidden; }
#impressum-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 17, 40, 0.6); backdrop-filter: blur(0.9375rem); /* 15px */ z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 1.25rem; /* 20px */ opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; }
#impressum-modal.visible { opacity: 1; pointer-events: all; }
.impressum-content { background: var(--background-light-futuristic); color: var(--text-dark-futuristic); border-radius: 1.25rem; /* 20px */ padding: 1.875rem 2.5rem; /* 30px 40px */ max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); transform: scale(0.95); transition: transform 0.3s ease-in-out; }
#impressum-modal.visible .impressum-content { transform: scale(1); }
.close-modal { position: absolute; top: 0.9375rem; /* 15px */ right: 1.25rem; /* 20px */ background: none; border: none; font-size: 2.5rem; color: var(--text-dark-futuristic); opacity: 0.5; cursor: pointer; transition: opacity 0.2s; line-height: 1; }
.close-modal:hover { opacity: 1; }
.modal-main-title, .modal-subtitle, .impressum-content h4, .impressum-content h5, .impressum-content p, .impressum-content strong, .impressum-content a, .impressum-content ul { color: var(--text-dark-futuristic); }
.modal-main-title { font-size: 1.8rem; line-height: 1.3; margin-bottom: 1.5625rem; /* 25px */ }
.modal-subtitle { font-size: 1.5rem; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 1.5625rem; /* 25px */ margin-top: 1.5625rem; /* 25px */ margin-bottom: 0.9375rem; /* 15px */ }
.impressum-content h4 { font-size: 1.2rem; margin-top: 1.25rem; /* 20px */ margin-bottom: 0.625rem; /* 10px */ border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 0.3125rem; /* 5px */ }
.impressum-content p { line-height: 1.7; margin-bottom: 1em; }
.impressum-content a { color: var(--primary-futuristic-blue); text-decoration: none; font-weight: 500; }
.impressum-content a:hover { text-decoration: underline; color: var(--secondary-futuristic-purple); }

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    body { cursor: auto; }
    .custom-cursor, .magnifier { display: none; }
    .hero {
        height: 85vh;
        min-height: 600px;
    }
    
    .hero-video {
        object-fit: contain; /* Stellt sicher, dass das Video vollständig sichtbar ist */
    }

    .about-content, .anfahrt-content { grid-template-columns: 1fr; gap: 2.5rem; /* 40px */ }
    .map-container { min-height: 350px; }
    .section { padding: 3.75rem 0; /* 60px */ }
    .hero-header { top: 1.25rem; /* 20px */ left: 1.25rem; /* 20px */ width: calc(100% - 2.5rem); /* 40px */ box-sizing: border-box; }
    .hero-content { margin-top: 0; }
    .hero::before { background-color: rgba(0, 0, 0, 0.8); }
    #contact { padding: 3.75rem 0.9375rem; /* 60px 15px */ }
    .contact-container { padding: 1.875rem 1.25rem; /* 30px 20px */ }

    /* Formular auf mobilen Geräten einspaltig machen */
    .contact-form {
        grid-template-columns: 1fr;
    }
    .form-group,
    .datenschutz-consent,
    .contact-form .cta-button {
        grid-column: 1 / -1;
    }

    .info-grid {
        grid-template-columns: 1fr; /* Info-Karten auf mobilen Geräten einspaltig */
    }
    .info-card:nth-child(1), .info-card:nth-child(2), .info-card:nth-child(3),
    .info-card:nth-child(4), .info-card:nth-child(5) {
        grid-column: 1 / -1;
    }

    .hamburger-icon { display: flex; }
    .floating-nav { top: 4.375rem; /* 70px */ right: 1.25rem; /* 20px */ width: 13.75rem; /* 220px */ padding: 0.625rem; /* 10px */ background: rgba(30, 40, 60, 0.8); backdrop-filter: blur(0.9375rem); /* 15px */ border-radius: 0.75rem; /* 12px */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transform-origin: top right; transform: translateY(-0.625rem) scale(0.95); /* -10px */ transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; flex-direction: column; align-items: stretch; gap: 0.3125rem; /* 5px */ }
    .floating-nav.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
    .nav-item { width: 100%; text-align: left; padding: 0.625rem 0.9375rem; /* 10px 15px */ margin: 0; font-size: 1rem; }
    .nav-toggle-button { display: none; }
    body.menu-open { overflow: hidden; }

    /* Responsive adjustments for CV */
    .cv-list li {
        padding-left: 30px;
        font-size: 1rem;
    }
    .cv-list li::before {
        left: -8px;
        width: 16px;
        height: 16px;
    }
}
.scroll-indicator, .scroll-progress { height: 0px; background: none; }