* { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* Variablen */
:root{
    /*Farebn*/
    --cream: rgb(253,245,238);
    --hellgruen: rgb(152,172,59);
    --rosa: rgb(184,126,162);
    --dunkelbalu: rgb(62,72,97);
    --trandunkelbalu:rgba(62, 72, 97, 0.969) ;
    --hellbalu: rgb(154, 173, 203);
    --schwarz: rgb(0,0,0);
    ---weiss: rgb(255, 255, 255);

    /*Schriften*/
    --ueberschrift: "superior-title", serif; 
    --text: "helvetica-lt-pro", sans-serif;
    --font-light: 300;

    --breite: 1280px;
    --rand: 200px;
    --rand-2: 100px;
    --innen-rand: 300px;
    --spaltenabstand: 40px;
}
html {
    overflow-x: hidden;
    width: 100%;
}

html, body {
    touch-action: pan-y;
}

/* Scroll-Reveal */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.sichtbar {
    opacity: 1;
    transform: translateY(0);
}

body{
    font-family: var(--text);
    background-color: var(--cream);
    overflow-x: hidden;
}

 /*Überschriften*/
.ueberschrift-gross{
    font-family: var(--ueberschrift);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: var(--font-light);
    font-style: italic;
    color: var(--schwarz);
}

.ueberschrift-klein{
    font-family: var(--ueberschrift);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-light);
    font-style: italic;
    color: var(--schwarz);
}

.ueberschrift-klein-cream{
    font-family: var(--ueberschrift);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-light);
    font-style: italic;
    color: var(--cream);
}

.teiluberschrift{
    font-family: var(--ueberschrift);
    font-size: 1.5rem;
    font-weight: var(--font-light);
    font-style: normal;
    color: var(--schwarz);
}

/*Text*/
.text-schwarz{
    font-family: var(--text);
    font-size: 1rem;
    font-weight: var(--font-light);
    font-style: normal;
    color: var(--schwarz);
}

.text-cream{
    font-family: var(--text);
    font-size: 1rem;
    font-weight: var(--font-light);
    font-style: normal;
    color: var(--cream); 
}

/* haeder mit Logo*/ 
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem var(--rand-2);
    box-sizing: border-box;
}

.logo-1 img {
    height: clamp(2.5rem, 5rem, 4rem); 
    display: block;
}


/*Navikation*/
.nav-allgemein{
    position: static;
}

.burger-icon {
    /* Style für das Icon-Viereck */
    position: relative;
    width:3rem;
    height: 2.2rem;
    cursor: pointer;
    z-index: 1100;
    position: fixed;
}
  
.line {
    /* Style für die einzelnen Linien */
    position: absolute;
    width: 100%;
    height: 0.3rem;
    background-color: var(--schwarz);
    transition: all 0.3s ease; /* Für Animationen */
}
  
.line:nth-child(1) { top: 0; }
.line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.line:nth-child(3) { bottom: 0; }
  
.burger-icon.active .line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.burger-icon.active .line:nth-child(2) {
    opacity: 0; /* Linie ausblenden */
}
.burger-icon.active .line:nth-child(3) {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}

/* Vollbild Overlay Menü */
.nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--trandunkelbalu);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 1000;
}
  
.nav-menu li a {
    color: var(--cream);
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: var(--ueberschrift);
    font-weight: lighter;
    font-style: italic;
}
  
.nav-menu li a:hover {
    color: var(--hellbalu);
}
  
.nav-menu.active {
    opacity: 1;
    pointer-events: all;
}

/* Footer mit Logo */
footer {
   position: relative;
}

footer > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.kontakt {
    position: relative;
    padding: 2rem var(--rand);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kontakt h2,
.kontakt p,
.kontakt hr {
    width: 100%;
}

.kontakt hr {
    border: none;
    border-top: 0.1rem solid var(--schwarz);
    margin: 1rem 0;
}

.kontakt a {
    color: var(--schwarz);
    text-decoration: none;
}

.kontakt a:hover {
    color: var(--hellgruen);
}

.logo-2 {
    position: absolute;
    top: 0;
    right: var(--rand);
    height: clamp(2.5rem, 5vw, 4rem);
    margin: 2rem auto;
}

.logo-2 img {
    height: 100%;
    width: auto;
    display: block;
}

/* Section Willkommen*/
.willkommen {
    position: relative;
    width: 100%;
    height: 100vh; 
    overflow: hidden;
}

.willkommen picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.willkommen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: -1;
}

.willkommen-text {
    position: absolute;
    inset: 0;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--rand) 4rem; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: flex-end;     
    text-align: right;
}

/*Section Über mich*/
.ueber-mich {
    position: relative;
    width: var(--breite);
    max-width: 100%;
    margin: 10rem auto 5rem auto;
    padding: 0 var(--rand);
    min-height: 50rem;
}

.ueber-mich img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bild-hover-text {
    position: absolute;
    inset: 0; /* füllt den ganzen Container */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    background:rgba(62, 72, 97, 0.524); /* abgedunkelter Hintergrund, damit Text lesbar ist */
    opacity: 0;
    transition: all 1s ease-in-out;
}

.bild-hover:hover .bild-hover-text {
    opacity: 1;
}


/* Portraitfoto - großes Hauptbild in der Mitte */
.bild-4 {
    width: 60%;
    margin: 0 auto;
}

/* Wasser - oben rechts */
.bild-1 {
    position: absolute;
    top: -8%;
    right: 8%;
    width: 25%;
    z-index: 2;
    box-shadow: 0 0 0 6px var(--cream); 
}

/* Mandala - links, überlappt das Portrait */
.bild-2 {
    position: absolute;
    top: 15%;
    left: 8%;
    width: 25%;
    z-index: 2;
    box-shadow: 0 0 0 6px var(--cream);
}

/* Katzen - unten rechts, überlappt das Portrait */
.bild-3 {
    position: absolute;
    bottom: 25%;
    right: 8%;
    width: 25%;
    z-index: 2;
    box-shadow: 0 0 0 6px var(--cream);
}

/* Text unter dem Portrait */
.ueber-mich-text {
    z-index: 4;
    max-width: 30rem;
    margin: 1rem auto;
    background-color: var(--cream);
}

.ueber-mich-text .ueberschrift-klein {
    margin-bottom: 0.25rem;
}

.ueber-mich-text .teiluberschrift {
    font-style: italic;
    margin-bottom: 1rem;
}

/* Dekorative Blume im Hintergrund */
.ueber-mich > img[alt="Lilie"] {
    position: absolute;
    bottom: -15rem;
    left: -15rem;
    width: 55%;
    height: auto;
    z-index: -1;
    opacity: 0.5;
    pointer-events: none;
}

/* Section Lebenslauf + Fähigkeiten */
.lf {
    position: relative;
    padding: 5rem var(--rand);
    background-color: var(--hellbalu);
}

.lebenslauf,
.faehigkeiten {
    max-width: 30rem;
    margin: 0 auto;
}

.lebenslauf {
    margin-bottom: 4rem;
}

.ausbildung,
.praktikas,
.schule,
.programme,
.kompetenzen {
    margin-bottom: 2rem;
}

/* Skill-Balken */
.skill {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.skill .label {
    width: 9rem;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.skill .bar {
    position: relative;
    display: block;
    flex: 1;
    height: 8px;
    background: var(--cream);
    overflow: hidden;
}

.skill .bar::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--level, 0%);
    background: var(--rosa);
}

.lf-blumen > img[alt="Blume links"] {
    position: absolute;
    top: 8rem;
    left: 1rem;
    width: 30%;
}

.lf-blumen > img[alt="Blume rechts"] {
    position: absolute;
    top: 8rem;
    right: 1rem;
    width: 30%;
}

/* Section Arbeitsproben */
.arbeitsproben {
    position: relative;
    padding: 2rem var(--rand);
    margin: 10rem 0rem;
}
.arbeitsproben .ueberschrift-gross{
    padding-bottom: 2rem;
}

.slider {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.slider-arrow {
    background: none;
    border: none;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--schwarz);  
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.slider-arrow--prev{
    padding: 0.5rem 1rem 0.5rem 0rem;
}

.slider-arrow--next{
   padding: 0.5rem 0rem 0.5rem 1rem; 
}

.slider-arrow:hover {
    opacity: 0.6;
}

.slider-track {
    display: flex;
    width: 100%;
    
}

.slide {
    display: flex;
    align-items: flex-start; /* statt center, damit langer Text oben bündig zum Bild startet */
    gap: 3rem;
    min-width: 100%;
    transition: transform 0.5s ease;
}

.slide-image {
    flex: 0 0 45%;
}

.slide-image img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--schwarz);
}

.slide-info {
    flex: 1;
}

.slide-info .ueberschrift-klein {
    margin-bottom: 1rem;
}

.slide-info .text-schwarz {
    margin-bottom: 2rem;
    max-width: 320px;
}

.btn--primary {
    display: inline-block;
    background-color: var(--hellgruen);
    color: var(--cream);
    text-decoration: none;
    padding: 0.5rem 2rem;
    font-family: var(--text);
    font-size: 0.95rem;
}

.btn--primary:hover {
    opacity: 0.85;
}

.arbeitsproben > img[alt="Blume 1"] {
    position: absolute;
    top: -15rem;
    right: -5rem;
    width: 40%;
    height: auto;
    z-index: -10;
    opacity: 0.5;
    pointer-events: none;
}

/*Underseite Arbeisproben*/
/* Section Einleitung*/
.einleitung-ap {
    position: relative;
    width: 100%;
    height: 60vh; 
    overflow: hidden;
}

.einleitung-ap picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.7; 
}

.einleitung-ap img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover; 
    z-index: -1;
    opacity: 0.8;
}

.einleitung-ap h2 {
    position: absolute;
    inset: 0;
    margin: 0 auto;
    padding: 0 var(--rand) 4rem; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: flex-end;     
    text-align: right;
    z-index: 2;
}

/* Section Alle AP */
.alle-ap {
    padding: 6rem var(--rand) 10rem;
    display: flex;
    flex-direction: column;
    gap: 10rem;
}

.ap-geruest {
    display: flex;
    align-items: flex-start;
    gap: 4rem;
}

.bild-ap,
.text-ap {
    flex: 1;
    min-width: 0; /* wichtig, damit nichts überläuft, siehe Slider-Problem von vorhin */
}

.text-ap {
    align-self: flex-end; /* schiebt nur den Text nach unten */
}

.titel-ap{
   padding-bottom:  1rem;
}

.bild-ap h3 {
    margin-bottom: 0.25rem;
}

.bild-ap h4 {
    font-style: italic;
    margin-bottom: 1.5rem;
}

.bild-ap img,
.bild-slider-bild {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--schwarz);
    box-sizing: border-box;
}

.text-ap p {
    max-width: 480px;
}

/* Bild-Slider (innerhalb einer einzelnen Arbeitsprobe) */
.bild-slider {
   overflow: hidden;
    position: relative;
    width: 100%;
}

.bild-slider-track {
     display: flex;
    width: 100%;
    box-sizing: border-box;
}

.bild-slider-bild {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    height: auto;
    display: block;
    border: none;
    transition: transform 0.5s ease;
}

.bild-slider-pfeil {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 1.5rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    border: none;
    font-size: 3rem;
    /*line-height: 1;*/
    cursor: pointer;
    color: var(--schwarz);
    padding-bottom: 0.15em;

}

.bild-slider-pfeil--zurueck {
    left: 0.5rem;
}

.bild-slider-pfeil--weiter {
    right: 0.5rem;
}

.bild-slider-pfeil:hover {
    opacity: 0.6;
}

/*Underseite Galerie*/
/*Section Einleidung Galerie*/
.einleutung-galerie {
    position: relative;
    width: 100%;
    height: 60vh; 
    overflow: hidden;
}

.einleutung-galerie picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.7;
}

.einleutung-galerie img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover; 
    z-index: -1;
    opacity: 0.8;
}

.galerie-text{
    position: absolute;
    inset: 0;
    margin: 0 auto;
    padding: 0 var(--rand) 4rem; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: flex-end;     
    text-align: right;
    z-index: 2;
}

/* Section Galerie algemmein */
.paris, 
.kroatien, 
.dresden,
.kanada{
    padding: 2rem var(--rand);
    margin: 6rem auto;
}

/*Section Paris,Kroatsien und Dresden*/
.grid-galerie {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    column-gap: var(--spaltenabstand);
    row-gap: 3rem;
}

.grid-galerie img {
    width: 100%;
    height: auto;
    display: block;
}

.paris .ueberschrift-klein {
    display: inline-block;
    margin-right: 0.75rem;
}
.paris .teiluberschrift {
    display: inline-block;
}

.kroatien .ueberschrift-klein {
    display: inline-block;
    margin-right: 0.75rem;
}
.kroatien .teiluberschrift {
    display: inline-block;
}

.dresden .ueberschrift-klein {
    display: inline-block;
    margin-right: 0.75rem;
}
.dresden .teiluberschrift {
    display: inline-block;
}

/*Setion Kanada*/
.grid-galerie-k {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-template-rows: repeat(6, auto);
    column-gap: var(--spaltenabstand);
    row-gap: 3rem;
}

.grid-galerie-k img {
    width: 100%;
    height: auto;
    display: block;
}

.kanada .ueberschrift-klein {
    display: inline-block;
    margin-right: 0.75rem;
}
.kanada .teiluberschrift {
    display: inline-block;
}

/* Underseite Impressum und Datenschutz*/
.impressum,
.datenschutz{
    padding: 2rem var(--rand);
}  

.impressum{
    margin-top: 10rem;
}

@media (max-width: 1150px) {
    /* Responsive: Ränder auf kleineren Screens automatisch verkleinern */
    :root {
        --rand: 4rem;
        --innen-rand: 4rem;
    }

    /*Section Lebenslauf Blumen*/
    .lf-blumen > img[alt="Blume links"] {
    top: 15rem;
    left: -3rem;
}

.lf-blumen > img[alt="Blume rechts"] {
    top: 15rem;
    right: -3rem;
}

}

@media (max-width: 800px) {
    
    /* Über mich: nur Portrait zeigen */
    .bild-1,
    .bild-2,
    .bild-3,
    .ueber-mich > img[alt="Lilie"] {
        display: none;
    }

    .ueber-mich {
        min-height: auto;
        margin: 4rem auto;
        padding: 0 var(--rand);
    }

    .bild-4 {
        width: 100%;
        margin: 0 0 2rem;
    }

    .ueber-mich-text {
        max-width: 100%;
        margin: 0;
    }
    .ueber-mich-text {
        position: static;
        width: 100%;
    }
    .ueber-mich > img[alt="Lilie"] {
        display: none;
    }

    /* Section Arbeisproben selider*/
    .arbeitsproben {
        padding: 2rem 0;
        margin: 6rem 0;
    }

    .arbeitsproben .ueberschrift-gross {
        padding: 0 var(--rand) 2rem;
    }

    .slider {
        position: relative;
        overflow: visible; /* damit die Pfeile außerhalb des Bildes sichtbar sind */
    }

    .slide {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .slide-image {
        flex: none;
        width: 85%;
        margin: 0 auto;
    }

   

    .slide-info {
        padding: 2rem var(--rand) 0;
    }

    .slide-info .text-schwarz {
        max-width: 100%;
    }

    /* Pfeile als Overlay über dem Bild, an den äußersten Rand */
    .slider-arrow {
        position: absolute;
        top: 30vh; /* ungefähre Mitte der Bildhöhe, ggf. anpassen */
        transform: translateY(-50%);
        z-index: 3;
        padding: 0;
    }

    .slider-arrow--prev {
        left: 0.5rem;
    }

    .slider-arrow--next {
        right: 0.5rem;
    }

    /*Blumen ausblenden*/
    .lf-blumen img,
    .arbeitsproben > img[alt="Blume 1"] {
        display: none;
    }

    /*Untersite Galerie*/
    .einleutung-galerie {
        height: 50vh;
    }

    .galerie-text {
        padding: 0 var(--rand) 2rem;
    }

    .galerie-text .text-schwarz br {
        display: none; /* manuelle Zeilenumbrüche stören auf schmalen Screens */
    }

    .paris,
    .kroatien,
    .dresden,
    .kanada {
        padding: 2rem var(--rand);
        margin: 3rem auto;
    }

    .grid-galerie,
    .grid-galerie-k {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-template-rows: none;
        row-gap: 1.5rem;
    }
}

@media (max-width: 500px) {
    /* Responsive: Ränder auf kleineren Screens automatisch verkleinern */
    :root {
        --rand: 1.25rem;
        --innen-rand: 1.25rem;
        --rand-2: 4rem;
    }

     /* Willkommen: Text unter das (jetzt mobile) Bild, statt Overlay */
    .willkommen {
        height: auto;
        overflow: visible;
    }

    .willkommen picture {
        position: relative;
        height: 100vh;
    }

    /* Seticon Lebenslauf und Fähigkeiten*/
    .skill .label {
        width: 6.5rem;
        font-size: 0.8rem;
    }

    /*Unterszeite Arbeitsproben*/
    .einleitung-ap picture {
        position: relative;
        height: 100vh;
    }

    .einleitung-ap {
        height: 100vh;
    }

     /* Unterstei Galerie*/ 
    .einleutung-galerie picture {
        position: relative;
        height: 100vh;
    }

    .einleutung-galerie {
        height: 100vh;
    }
}

/*  Arbeitsproben Seite Responsive: untereinander statt nebeneinander */
@media (max-width: 800px) {
    .ap-geruest {
        flex-direction: column;
        gap: 1.5rem;
    }
    .alle-ap {
        gap: 4rem;
    }
}