/* RESET & GLOBALS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #051024; 
    color: #ffffff; 
    overflow-x: hidden; 
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* =========================================
   TYPOGRAFIE - HEADER SPLIT
   ========================================= */

.text-logo {
    font-size: 14px;
    font-weight: bold;
}

.text-hero-meta {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #cccccc;
    margin-bottom: 20px;
}

/* 1. Teil: NAME (Variable Font Weight) */
.text-hero-name {
    font-size: 4.5rem;
    line-height: 1.1;
    font-weight: 300; /* Dünner */
    margin: 0;
}

/* 2. Teil: DESIGN (Variable Font Weight) */
.text-hero-suffix {
    font-size: 4.5rem;
    line-height: 1.1;
    font-weight: 800; /* Sehr Fett */
    margin: 0;
    /* Optional: Kleiner negativer Margin, um sie optisch zu verbinden */
    margin-top: -5px; 
}

/* Navigation Text */
.text-nav-label {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Projekt Typo */
.text-project-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1;
}

.text-project-desc {
    font-size: 1.1rem;
    line-height: 1.5;
    color: #e0e0e0;
}

/* Contact & Footer Typo */
.text-section-headline { font-size: 3rem; font-weight: 700; text-transform: lowercase; }
.text-form-label { font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; }
.text-btn-label { font-size: 1rem; letter-spacing: 1px; }
.text-contact-header { font-size: 0.9rem; text-transform: uppercase; }
.text-contact-link { font-size: 1.1rem; }
.text-footer-brand { font-size: 1.5rem; }
.text-footer-sub { font-size: 0.9rem; color: #889bb0; }
.text-footer-head { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: #889bb0; }
.text-footer-link { font-size: 1rem; color: #fff; }

/* =========================================
   LAYOUT
   ========================================= */

header {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    position: relative;
}

.header-left-content {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10%;
}

/* Logo oben links - Jetzt mit Abstand */
.logo-box {
    position: absolute;
    top: 40px;  /* Vorher 0 -> gibt Abstand nach oben */
    left: 40px; /* Vorher 0 -> gibt Abstand nach links */
    z-index: 20; /* Liegt sicher über allem */
}

.icon-square {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    color: #051024;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   HERO IMAGE (RECHTS)
   ========================================= */

/* Der Container für das Bild */
/* Das VIDEO im Container */
.hero-right-image video {
    width: 600px;
    height: 95%;
    margin-right: 60px;
    margin-top: -105px;
    /* WICHTIG: 'cover' sorgt dafür, dass das Video die Fläche füllt, 
       ohne verzerrt zu werden (schneidet Ränder ab). */
    object-fit: contain; 
    
    /* Verhindert manchmal kleine Lücken am unteren Rand */
    display: block;
    
    /* Optional: Ein schwarzer Hintergrund, falls es kurz lädt */
    background-color: #000;

    /* Alternative: Zu allen Seiten weich auslaufen lassen */
/* Macht die Kanten weich, damit der Farbunterschied nicht auffällt */
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 100%);
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 100%);

}

/* Das Bild selbst */
.hero-right-image img {
    width: 100%;
    height: 100%;
    
    /* WICHTIG: 'cover' sorgt dafür, dass das Bild die Fläche füllt, 
       ohne verzerrt zu werden (schneidet Ränder ab) */
    object-fit: cover; 
    
    /* Optional: Wenn du willst, dass das Bild unten abgerundet ist */
    /* border-bottom-left-radius: 40px; */
    /* border-bottom-right-radius: 40px; */
}

/* MOBILE ANPASSUNG */
/* Auf Handys ist kein Platz für 1/3 Bild + Text. Wir blenden es aus. */
@media (max-width: 850px) {
    .hero-right-image {
        display: none;
    }
}

/* Text im Kreis */
.text-nav-label {
    color: #ffffff;
    font-size: 0.65rem; /* Klein und fein */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hover Effekt */
.nav-circle:hover {
    background-color: #ffffff; 
    transform: scale(1.1); 
}

.nav-circle:hover .text-nav-label {
    color: #051024; /* Text wird dunkel */
}

/* MOBILE ANPASSUNG */
@media (max-width: 850px) {
    .header-right-nav {
        /* Am Handy lieber unten im Header als mittig rechts */
        top: auto;
        bottom: 30px;
        right: 20px;
        transform: none;
        
        flex-direction: row; /* Nebeneinander */
    }
}

/* =========================================
   NAVIGATION (Kleine Kreise)
   ========================================= */

/* Der Container für die Navigations-Punkte */
.header-right-nav {
    display: flex;
    flex-direction: column; /* Untereinander */
    gap: 15px; /* Abstand zwischen den Kreisen */
    
    /* Positionierung im Header (falls nötig anpassen) */
    position: absolute;
    right: 40px;
    top: 40px;
    z-index: 100;
}

/* Das Design der Kreise */
.nav-circle {
    /* Größe festlegen (Macht sie alle gleich groß) */
    width: 70px; 
    height: 70px;
    
    /* Farbe & Form */
    background-color: #2a3b55; /* Dein Dunkelblau/Grau Ton */
    border-radius: 50%; /* Das macht es zum KREIS */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Feine Outline */
    
    /* Text Zentrieren */
    display: flex;
    align-items: center;
    justify-content: center;
    
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Text im Kreis */
.nav-circle .text-nav-label {
    color: #ffffff;
    font-size: 0.7rem; /* Schrift muss klein sein, damit sie reinpasst */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hover Effekt */
.nav-circle:hover {
    background-color: #ffffff; /* Wird weiß beim Drüberfahren */
    transform: scale(1.1); /* Wird leicht größer */
    border-color: #ffffff;
}

.nav-circle:hover .text-nav-label {
    color: #051024; /* Text wird dunkel beim Hover */
}

/* MOBILE ANPASSUNG */
@media (max-width: 850px) {
    .header-right-nav {
        /* Am Handy vielleicht horizontal oder kleiner? */
        flex-direction: row; 
        right: 20px;
        top: 20px;
    }
    
    .nav-circle {
        width: 50px;
        height: 50px;
    }
    
    .nav-circle .text-nav-label {
        font-size: 0.5rem; /* Noch kleiner am Handy */
    }
}

/* MAIN */
main {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 150px; 
}

.project-row {
    display: flex;
    align-items: flex-end; 
    margin-bottom: 200px; 
    gap: 60px;
    scroll-margin-top: 100px; 
}

/* Slider Box Styling */
.slider-container, .static-box {
    width: 400px;
    height: 400px;
    background-color: #2a3b55;
    border-radius: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden; /* Wichtig damit nichts rausragt */
}

/* KLICKBARE LINK AREA IM SLIDER */
.slider-link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    /* Damit er UNTER den Pfeilen liegt */
    position: relative;
    z-index: 1; 
}

.static-box.narrow {
    width: 280px;
    height: 450px;
}

.project-text {
    max-width: 400px;
    padding-bottom: 10px;
}

/* Slider Controls */
.nav-btn {
    position: absolute;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px;
    top: 50%;
    transform: translateY(-50%);
    /* HÖHERER Z-INDEX DAMIT MAN KLICKEN KANN OHNE LINK ZU ÖFFNEN */
    z-index: 10; 
}

.nav-btn.prev { left: 15px; }
.nav-btn.next { right: 15px; }

/* 1. Die Äußere Box (Fixed Size) */
.slider-container, .static-box {
    width: 400px;
    height: 400px;
    background-color: #2a3b55;
    border-radius: 30px;
    position: relative;
    
    /* Flexbox zentriert den Inhalt (Buttons & Link) */
    display: flex;
    align-items: center;
    justify-content: center;
    
    flex-shrink: 0;
    overflow: hidden; /* Wichtig: Alles was übersteht wird abgeschnitten */
}

/* Anpassung für das schmale About-Bild */
.static-box.narrow {
    width: 280px;
    height: 450px;
}

/* 2. Der Link (<a>) muss jetzt ein Block sein und 100% füllen */
.slider-link, .static-box a {
    display: block; /* WICHTIG! Sonst ignoriert er die Höhe */
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    z-index: 1; /* Unter den Buttons */
}

/* 3. Der innere Wrapper (<div>) muss auch 100% füllen */
.slider-content {
    width: 100%;
    height: 100%;
}

/* 4. Das Bild selbst (<img>) */
.slide, .static-img {
    display: none; /* Standardmäßig ausblenden (wird von JS aktiviert) */
    
    /* WICHTIG: Bild füllt den Wrapper komplett */
    width: 100%;
    height: 100%;
    
    /* WICHTIG: 'cover' sorgt für das Zuschneiden statt Verzerren */
    object-fit: cover; 
    
    border-radius: 30px; /* Runden Ecken sicherstellen */
}

/* Nur das aktive Bild anzeigen */
.slide.active, .static-img {
    display: block;
    animation: fadeIn 0.5s;
}

.slide.active {
    display: block;
    animation: fadeIn 0.5s;
}
.slide.active { display: block; animation: fadeIn 0.5s; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* CONTACT */
.contact-section {
    max-width: 1200px;
    margin: 0 auto 100px auto;
    padding-top: 50px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.contact-title { margin-bottom: 40px; }

.contact-grid {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.contact-form-wrapper {
    flex: 1;
    max-width: 600px;
}

.brutalist-form .form-group { margin-bottom: 25px; }

.brutalist-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.brutalist-form input,
.brutalist-form textarea {
    width: 100%;
    padding: 15px;
    background-color: #0b1a36;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.brutalist-form input:focus,
.brutalist-form textarea:focus {
    outline: none;
    border-color: #fff;
    background-color: #112244;
}

.submit-btn {
    padding: 15px 40px;
    background-color: #ffffff;
    color: #051024;
    border: none;
    font-weight: bold;
    cursor: pointer;
    border-radius: 30px;
    transition: background 0.3s;
}

.submit-btn:hover { background-color: #cccccc; }

.contact-info { width: 200px; }
.contact-col {
    padding-left: 20px;
    border-left: 2px solid rgba(255,255,255,0.5);
}
.contact-col span { display: block; margin-bottom: 10px; font-weight: bold; }
.contact-col a { display: block; margin-bottom: 5px; }

/* FOOTER */
footer {
    background-color: #030914;
    padding: 60px 20px;
    margin-top: 100px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-col h3 { margin-bottom: 10px; }
.footer-col h4 { margin-bottom: 15px; }
.footer-col a { display: block; margin-bottom: 8px; transition: opacity 0.3s; }
.footer-col a:hover { opacity: 0.6; }
.brand p { margin-top: 10px; }

/* RESPONSIVE */
@media (max-width: 850px) {
    header { flex-direction: column; height: auto; min-height: 100vh; }
    .header-left-content { padding-left: 0; margin-top: 80px; flex: 0; margin-bottom: 50px; }
    .header-center-text { padding-left: 20px; }
    
    .header-right-nav {
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }
    .nav-sq { height: 80px; flex: none; }
    
    .project-row { flex-direction: column; align-items: flex-start; gap: 20px; }
    .slider-container, .static-box.narrow { width: 100%; height: 300px; }
    .contact-grid, .footer-grid { grid-template-columns: 1fr; flex-direction: column; }
}

/* =========================================
   DETAIL PAGE STYLES
   ========================================= */

/* Der Header auf der Detailseite verhält sich anders */
.detail-header {
    min-height: 80vh; /* Nicht ganz Fullscreen, aber groß */
    width: 100%;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    justify-content: center;
}

/* Container für Titel und Info */
.detail-hero-wrapper {
    display: flex;
    align-items: flex-end; /* Text unten bündig mit Titel */
    gap: 80px;
    max-width: 1200px;
    width: 100%;
    margin-top: 60px; /* Platz für das Logo oben */
}

.detail-title-col {
    flex: 2; /* Nimmt mehr Platz ein */
}

.detail-info-col {
    flex: 1; /* Nimmt weniger Platz ein */
    padding-bottom: 10px; /* Optische Korrektur zur Grundlinie */
    border-left: 1px solid rgba(255,255,255,0.3); /* Feine Linie zur Trennung */
    padding-left: 30px;
}

/* Link-Back Logo soll klickbar aussehen */
.link-back {
    cursor: pointer;
    z-index: 100;
    text-decoration: none;
}

/* Main Bereich der Detailseite etwas näher ranrücken */
.detail-main {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 50px; 
}

/* RESPONSIVE FÜR DETAIL PAGE */
@media (max-width: 850px) {
    .detail-hero-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        margin-top: 100px;
    }
    
    .detail-info-col {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255,255,255,0.3);
        padding-top: 20px;
    }
}

/* =========================================
   SCROLL TO TOP BUTTON
   ========================================= */

   #scrollTopBtn {
    /* Positionierung rechts unten */
    position: fixed;
    bottom: 30px;
    right: 30px;
    
    /* Design: Kreis mit Outline */
    width: 50px;
    height: 50px;
    background-color: #051024; /* Hintergrund dunkelblau (deckt Text darunter ab) */
    border: 2px solid #ffffff; /* Weiße Outline */
    border-radius: 50%; /* Macht es zum Kreis */
    color: #ffffff; /* Weißer Pfeil */
    
    /* Text/Pfeil Styling */
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1000; /* Muss über allem liegen */
    
    /* Flexbox um den Pfeil exakt in die Mitte zu bekommen */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Animation & Standard-Zustand (Unsichtbar) */
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none; /* Verhindert Klicken, wenn unsichtbar */
}

/* Hover Effekt */
#scrollTopBtn:hover {
    background-color: #ffffff;
    color: #051024; /* Invertiert die Farben beim Hovern */
}

/* Klasse, die per JS hinzugefügt wird, wenn man scrollt */
#scrollTopBtn.show {
    opacity: 1;
    pointer-events: auto; /* Klicken wieder erlauben */
    bottom: 30px; /* Optional: kleiner "Slide Up" Effekt */
}

/* Mobile Anpassung: Etwas kleiner */
@media (max-width: 850px) {
    #scrollTopBtn {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}#scrollTopBtn {
    /* ... deine alten Einstellungen (position, width, color etc.) ... */
    
    /* WICHTIG: Wir fügen 'bottom 0.1s' hinzu, damit das Hochschieben weich ist */
    transition: all 0.3s ease, bottom 0.1s ease-out; 
    
    /* Stelle sicher, dass bottom standardmäßig gesetzt ist */
    bottom: 30px; 
}

/* =========================================
   SPEZIALFORMAT: 4:3 (LANDSCAPE)
   ========================================= */

/* Diese Klasse überschreibt die Standard-Quadrat-Größe */
.slider-container.format-4-3 {
    width: 480px;  /* Breiter */
    height: 360px; /* Etwas flacher -> Ergebnis: 4:3 Format */
}

/* Wichtig für Mobile: Das Seitenverhältnis beibehalten */
@media (max-width: 850px) {
    .slider-container.format-4-3 {
        width: 100%;       /* Volle Breite am Handy */
        height: auto;      /* Höhe automatisch */
        aspect-ratio: 4/3; /* Zwingt den Browser ins 4:3 Format */
    }
}

/* Stellt sicher, dass das Video die Box perfekt ausfüllt */
video.slide {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Schneidet Ränder ab, damit keine schwarzen Balken entstehen */
    border-radius: 30px;
    background-color: #000; /* Falls das Video kurz lädt, ist der Hintergrund schwarz */
}

/* ZUSATZ: Pfeile in der Hintergrundfarbe (Dunkelblau) */
.nav-btn.dark-arrow {
    color: #051024; /* Exakt dein Hintergrund-Blau */
    
    /* Optional: Falls das Bild sehr unruhig ist, hilft ein kleiner weißer Schein */
    /* text-shadow: 0 0 2px rgba(255, 255, 255, 0.3); */
}
/* Diese Klasse wird nun vom JS automatisch hinzugefügt/entfernt */
.nav-btn.dark-arrow {
    color: #051024; 
}

/* =========================================
   SPEZIALFORMAT: 3:4 (HOCHFORMAT / PORTRAIT)
   ========================================= */

   .slider-container.format-3-4 {
    width: 360px;  /* Schmäler */
    height: 480px; /* Höher */
}

/* Mobile Anpassung */
@media (max-width: 850px) {
    .slider-container.format-3-4 {
        width: 100%;
        height: auto;
        aspect-ratio: 3/4; /* Zwingt Browser ins Hochformat */
    }
}
/* =========================================
   SPEZIALFORMAT: 4:5 (INSTAGRAM PORTRAIT)
   Original: 1080x1350 -> Skaliert auf 360x450
   ========================================= */

   .slider-container.format-insta {
    width: 360px;
    height: 450px;
}

/* Mobile Anpassung */
@media (max-width: 850px) {
    .slider-container.format-insta {
        width: 100%;
        height: auto;
        /* Zwingt den Browser exakt in das 4:5 Verhältnis */
        aspect-ratio: 4/5; 
    }
}
/* =========================================
   DEKO BILDER (Zusatz-Grafiken)
   ========================================= */

/* Damit sich die absoluten Bilder an der Reihe orientieren */
.project-row {
    position: relative; 
}

/* Basis-Styling für das Deko-Bild */
.deco-img {
    position: absolute;
    z-index: 0;   /* Im Hintergrund */
    opacity: 0.8; /* Leicht transparent */

    /* NEU: Größe & Format 1:3 */
    width: 240px;  /* Deutlich breiter (3 Teile) */
    height: 80px;  /* Flacher (1 Teil) */
    
    /* WICHTIG: Damit das Bild exakt in dieses breite Format gezwungen wird,
       egal welches Format die Originaldatei hat. Ränder werden abgeschnitten. */
    object-fit: cover;
    
    /* Optional: Leichte Abrundung sieht oft besser aus */
    border-radius: 15px; 
}

/* POSITION 1 & 3: Unter dem Slider */
.pos-under-slider {
    /* Tiefer gesetzt, da das Bild jetzt höher ist */
    bottom: -90px; 
    left: 20px;
}

/* POSITION 2: Neben dem Bild, über der Schrift */
.pos-beside-slider {
    left: 430px; /* 400px Slider + 30px Abstand */
    /* Etwas tiefer gesetzt, damit es bündiger mit der Slider-Oberkante ist */
    top: -10px;  
}

/* MOBILE: Ausblenden, da kein Platz */
@media (max-width: 850px) {
    .deco-img {
        display: none;
    }
}

/* =========================================
   LEBENSLAUF (CV) STYLES
   ========================================= */

/* Der Container für den ganzen CV */
.cv-wrapper {
    max-width: 900px;
    margin: 0 auto; /* Zentriert */
    padding-bottom: 100px;
    animation: fadeIn 0.5s; /* Sanftes Einblenden beim Wechsel */
}

/* Abstand zwischen Sektionen (Ausbildung / Erfahrung) */
.cv-section {
    margin-bottom: 80px;
}

/* Eine Zeile im Lebenslauf (Datum + Inhalt) */
.cv-row {
    display: flex;
    gap: 60px; /* Abstand zwischen Datum und Text */
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Feine Linie */
    padding-bottom: 30px;
}

/* Letzte Zeile ohne Linie */
.cv-row:last-child {
    border-bottom: none;
}

/* Linke Spalte: Datum/Zeitraum */
.cv-date {
    width: 150px; /* Feste Breite */
    flex-shrink: 0;
    font-weight: bold;
    font-size: 1.1rem;
    color: #889bb0; /* Etwas abgedunkeltes Blau-Grau */
    padding-top: 5px; /* Optische Ausrichtung */
}

/* Rechte Spalte: Inhalt */
.cv-content h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.cv-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #e0e0e0;
}

/* SPRACH SCHALTER DESIGN */
.lang-switch-container {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 10px 20px;
    border-radius: 50px;
}

.lang-btn {
    cursor: pointer;
    opacity: 0.4; /* Inaktive Sprache ist transparent */
    transition: opacity 0.3s ease;
}

.lang-btn:hover {
    opacity: 1;
}

/* Die aktive Sprache ist voll sichtbar */
.lang-btn.active {
    opacity: 1;
    text-decoration: underline;
}

.lang-divider {
    margin: 0 10px;
    opacity: 0.4;
}

/* RESPONSIVE FÜR CV */
@media (max-width: 850px) {
    .cv-row {
        flex-direction: column; /* Datum über Text */
        gap: 10px;
    }
    
    .cv-date {
        width: 100%;
        color: #ffffff;
        font-size: 0.9rem;
        opacity: 0.7;
    }
}

/* Styling für Text-Links im Fließtext */
.inline-link {
    color: #ffffff;           /* Weiße Schrift */
    text-decoration: underline; /* Unterstrichen */
    font-weight: bold;        /* Optional: Etwas fetter */
    cursor: pointer;          /* Zeigt die Hand beim Drüberfahren */
    transition: opacity 0.3s;
}

/* Hover-Effekt (wenn man mit der Maus drüberfährt) */
.inline-link:hover {
    opacity: 0.7;             /* Wird leicht transparent */
    text-decoration: none;    /* Optional: Unterstrich verschwindet beim Hovern */
}