/* =========================================================
   01 | Imports
   ========================================================= */

/* Importiert die Schriftart Oswald von Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');



/* =========================================================
   02 | Animationen / Keyframes
   ========================================================= */

/* ====> Ladeanimationen <==== */
@keyframes fadeUp {
    from {
        opacity: 0;             /* Start: unsichtbar */
        transform: translateY(50px);
        /* Start: 50px tiefer */
    }
    to {
        opacity: 1;             /* Ende: sichtbar */
        transform: translateY(0);
        /* Ende: normale Position */
    }
}
@keyframes fadeSide {
    from {
        opacity: 0;             /* Start: unsichtbar */
        transform: translateX(-24px);
        /* Start: 24px links */
    }
    to {
        opacity: 1;             /* Ende: sichtbar */
        transform: translateX(0);
        /* Ende: normale Position */
    }
}
/*====> Ladeanimationen <=====*/

/* =========================================================
   03 | Globale Variablen
   ========================================================= */

/* 
:root spricht das oberste Element der Seite an.
Hier legt man zentrale Variablen fest.
Vorteil: Farben, Schatten und Abstände müssen später nur hier geändert werden.
*/
:root {
    --bg: #BDDDFC;              /* Haupt-Hintergrundfarbe */
    --surface: #6A89A7;         /* Farbe für Karten/Hero-Bereich */
    --accent: #88BDF2;          /* Akzentfarbe für Hover/Button */
    --nav: #384959;             /* Farbe für Navigation */
    --footer: #384959;          /* Farbe für Footer */
    --text: #F5FAFF;            /* helle Hauptschrift */
    --dark-text: #24313d;       /* dunkle Schrift für helle Buttons */

    --radius: 25px;                /* einheitliche Rundung */
    --shadow: 0 20px 50px rgba(0, 0, 0, 0.3); /* Schatten */
    --transition: 0.25s ease;      /* Standard-Übergang */
}


/* =========================================================
   04 | Reset / Basisregeln
   ========================================================= */

/* 
Sorgt dafür, dass padding und border zur Gesamtgröße eines Elements gehören.
Ohne das werden Layouts oft ungenau.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   05 | Seiten-Grundlayout
   ========================================================= */

/* Grundlayout der gesamten Seite */
body {             /* Body nimmt die volle Breite ein */
    margin: 0;                  /* Entfernt den Standard-Abstand des Browsers */
    min-height: 100vh;          /* Body ist mindestens so hoch wie das Browserfenster */
    font-family: 'Oswald', sans-serif; /* Schriftart für die gesamte Seite */
    display: grid;              /* Body wird zum Grid-Container */
    grid-template-rows: auto 1fr auto;
    /*
        auto = Navigation so hoch wie nötig
        1fr  = Main-Bereich nimmt den übrigen Platz
        auto = Footer so hoch wie nötig
    */
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.15), transparent),
        linear-gradient(135deg, var(--bg), var(--surface));
    /*
        Zwei Hintergründe:
        1. radial-gradient = weicher Lichtfleck oben links
        2. linear-gradient = Farbverlauf über die ganze Seite
    */
    color: var(--text);         /* Standardschriftfarbe */
}


/* =========================================================
   06 | Navigation
   ========================================================= */

/* Navigation */
.nav {
    display: flex;                                      /* Links werden nebeneinander angeordnet */
    justify-content: center;                            /* Links werden horizontal zentriert */
    gap: 2rem;                                          /* Abstand zwischen den Links */
    padding: 1.5rem;                                    /* Innenabstand der Navigation */
    background-color: rgba(56, 73, 89, 0.9);
    /*
        rgba = Farbe mit Transparenz.
        Die letzte Zahl 0.9 bedeutet 90% sichtbar.
    */
    backdrop-filter: blur(12px);
    /*
        Macht den Hintergrund hinter der Navigation weich/verschwommen.
        Wirkt wie Glas.
    */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    /* Schatten unter der Navigation */
}
/* Links innerhalb der Navigation */
.nav a {
    color: var(--text);         /* Linkfarbe */
    text-decoration: none;      /* Entfernt Unterstreichung */
    font-weight: bold;          /* Macht Text fett */
    position: relative;
    /*
        Wird gebraucht, damit das ::after-Element
        später relativ zum Link positioniert werden kann.
    */
    transition: color var(--transition);
    /*
        Farbwechsel passiert weich statt abrupt.
    */
}
/* Künstliche Linie unter jedem Navigationslink */
.nav a::after {
    content: "";                /* Erzeugt ein leeres Pseudo-Element */
    position: absolute;         /* Positioniert die Linie frei im Link */
    left: 0;                    /* Start links */
    bottom: -6px;               /* 6px unter dem Linktext */
    width: 0;                   /* Anfangs unsichtbar */
    height: 2px;                /* Dicke der Linie */
    background-color: var(--accent);
    transition: width var(--transition);
    /*
        Wenn sich width verändert, wird es animiert.
    */
}
/* Hover-Zustand für Navigationslinks */
.nav a:hover {
    color: var(--accent);       /* Link wird beim Hover blau */
}
/* Linie fährt beim Hover aus */
.nav a:hover::after {
    width: 100%;                /* Linie wird so breit wie der Link */
}
/* =========================================================
   07 | Main-Layouts
   ========================================================= */

/* Hauptbereich */
.main_index {
    display: flex;              /* Ermöglicht einfaches Zentrieren */
    justify-content: center;    /* Horizontal zentrieren */
    align-items: center;        /* Vertikal zentrieren */
    padding: 2rem;              /* Abstand zum Rand */
}
.main_about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    gap: 2rem;
     /* Abstand zwischen den Abschnitten */
}
.main_projects{
    display: flex;
    flex-direction:column;              /* Ermöglicht einfaches Zentrieren */
    justify-content: center;    /* Horizontal zentrieren */
    align-items: center;        /* Vertikal zentrieren */
    padding: 2rem;              /* Abstand zum Rand */
    gap: 2rem;
}
/* =========================================================
   08 | Inhaltsbereiche / Karten
   ========================================================= */

/* Hero-Bereich */
.hero {
    display:flex;
    flex-direction:column;
    width: 100%;
    max-width: 1000px;           /* Hero wird nie breiter als 900px */
    padding: 4rem 3rem;         /* Innenabstand oben/unten und links/rechts */
    text-align: center;         /* Text im Hero zentrieren */
    align-items: center;
    background-color: rgba(106, 137, 167, 0.75);
    /*
        Transparente Kartenfläche.
    */
    border-radius: var(--radius); /* Abgerundete Ecken */
    border: 1px solid rgba(255, 255, 255, 0.25);
    /*
        Subtiler heller Rand.
        Gibt der Karte mehr Tiefe.
    */
    box-shadow: var(--shadow);  /* Schatten aus der :root-Variable */
    backdrop-filter: blur(12px);
    /* Glasartiger Effekt */
    animation: fadeUp 0.8s ease both;
    /*
        Beim Laden wird der Hero weich eingeblendet.
        both sorgt dafür, dass der Endzustand erhalten bleibt.
    */


}
.section_wrapper{
    width: 100%;
    max-width: 1000px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    animation: fadeUp 0.8s ease both;
}
.webentwicklung_wrapper{
    width:100%;
    max-width :1000px;
    
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: stretch;
}

.card {
    width: 100%;
    padding: 2rem;
    background-color: rgba(106, 137, 167, 0.75);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}
.hero_card{
    width: 100%;
    max-width: 550px;
    padding: 2rem;
    background-color: rgba(106, 137, 167, 0.75);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}
/* =========================================================
   09 | Typografie
   ========================================================= */

.MainTitle {
    font-size: clamp(2rem, 5vw, 4rem);
    /*
        clamp(minimum, flexibel, maximum)
        Minimum: 2rem
        Ideal: 5% der Viewport-Breite
        Maximum: 4rem
        Ergebnis: responsive Schriftgröße
    */
    margin-top: 0;              /* Kein Abstand über der Überschrift */
    margin-bottom: 1rem;        /* Abstand unter der Überschrift */
}
.hero{
    font-size: 1.2rem;          
    line-height: 1.7;           
    margin-bottom: 2rem;  
}
.section_wrapper{
    font-size: 1.2rem;          
    line-height: 1.7;           
    margin-bottom: 2rem;  
}
/* =========================================================
   10 | Buttons
   ========================================================= */

/* Button-Grundklasse */
.btn {
    display: inline-block;
    /*
        Damit sich ein Link wie ein Button verhält:
        Breite/Höhe/Padding funktionieren sauber.
    */

    padding: 0.9rem 1.6rem;     /* Innenabstand */
    border-radius: 999px;    /* Sehr runde Pillenform */
           /* Abstand zwischen mehreren Buttons */
    text-decoration: none;      /* Falls es ein a-Link ist */
    font-weight: 700;           /* Kräftiger Text */
    cursor: pointer;            /* Mauszeiger zeigt Klickbarkeit */
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background-color var(--transition);
        /*
            Animiert Bewegung, Schatten und Farbwechsel.
        */
}
.buttons_main {
    display: flex;              /* Buttons nebeneinander */
    justify-content: center;    /* Horizontal zentrieren */
    gap: 0.5em;
}
/* Primärer Button */
.btn-primary {
    background-color: var(--accent); /* Akzentfarbe */
    color: var(--dark-text);         /* dunkle Schrift für Kontrast */

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    gap: 2rem;
}
.btn-projects {
    background-color: var(--accent); /* Akzentfarbe */
    color: var(--dark-text);         /* dunkle Schrift für Kontrast */

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}
.btn-contact {
    background-color: var(--accent); 
    color: var(--dark-text);   

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}
.btn-git_webentwicklung{
    background-color: var(--accent); 
    color: var(--dark-text);   

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}
/* Hover-Zustand des Buttons */
.btn-primary:hover {
    transform: translateY(-3px);
    /*
        Button bewegt sich leicht nach oben.
        Er wirkt dadurch klickbarer.
    */
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.25);
    /*
        Schatten wird stärker.
        Dadurch wirkt der Button näher am Nutzer.
    */
}
.btn-projects:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.25);

}
.btn-contact:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.25);

}
.btn-git_webentwicklung:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.25);

}
/* Klick-Zustand */
.btn-primary:active {
    transform: scale(0.97);
    /*
        Button wird beim Klicken minimal kleiner.
        Das simuliert ein Eindrücken.
    */
}
/* Tastatur-Fokus */
.btn-projects:active{
    transform: scale(0.97);
}
.btn-contact:active{
    transform: scale(0.97);
}
.btn-git_webentwicklung:active{
    transform: scale(0.97)
}


/* =========================================================
   11 | Footer
   ========================================================= */

/* Footer */
footer {
    color: var(--text);
    background-color: rgba(56, 73, 89, 0.9);
    align-items: center;
    box-shadow: 0 -8px 30px #0000001f;
    /*
        Schatten nach oben.
        Trennt Footer visuell vom Inhalt.
    */
}
/* Linie im Footer */
footer hr {
    border: none;               /* Entfernt Standardrahmen */
    background-color: #ffffff2e;
    /* Dezente helle Linie */
}
.footer_content{
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    padding: 1rem 2rem;
}
.footer_links{
    display:flex;
    align-content: right;
    gap: 5px;
}

/* =========================================================
   12 | Bilder
   ========================================================= */

.img1
 {
    margin: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    padding :2rem;
}

img{
    margin: 0;
    display:flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.25);
    padding :  2px;

    transition:
    transform 0.5s ease,
    box-shadow var(--transition),
    filter var(--transition);

    cursor: pointer;
}
.nille .nille_img {
    margin: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    padding :2rem;
    gap : 1rem;
}
.webentwicklung_img img:hover{
    transform: scale(1.08) translateY(-60px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    filter: brightness(1.05);
}
.img1 img:hover {
    transform: scale(1.08) translateY(-60px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    filter: brightness(1.05); /*Helligkeit vom Bild wir von 100% auf 105% gesetzt*/
}
.nille img:hover, .webentwicklung_img img:hover{
    transform: scale(2) translateY(-85px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    filter: brightness(1.05); /*Helligkeit vom Bild wir von 100% auf 105% gesetzt*/
}
#intervocat img {
    width: 100px;
    height: 100;

    background-color: rgba(0, 0, 0, 0.262); /* Akzentfarbe */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    gap: 2rem;
}
#intervocat img:hover{
    transform: scale(1.08) translateY(-10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    filter: brightness(1.05);
}
.footer_links img{
    width: 50px;
    height: 50px;

    background-color: var(--surface); /* Akzentfarbe */

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    gap: 2rem;
}
.footer_links img:hover{
    transform: scale(1.08) translateY(-10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    filter: brightness(1.05);
}
/* =========================================================
   13 | Listen / Spezialfälle
   ========================================================= */

#webentwicklung_ul ul {
    padding-left: 1rem; 
    text-align: left;     
}