@font-face {
    font-family: 'Grand Amoura';
    src: url("assets/Grand\ Amoura\ Demo.ttf") format("truetype");
   
    font-family: 'Brittany Signature';
    src: url('fonts/BrittanySignature.ttf') format('truetype');
}

:root {
    --rosa: #dac9c8;
    --cream: #fafaf6;
    --tabletimg: 320px;
    --rosa-light: #f4e6e5;
    --main:#faf7f2;
    --blue:rgb(188, 188, 204);
}

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

body{
font-family: 'Montserrat', sans-serif;
background:var(--main);
color:#333;
scroll-behavior: smooth;
}
/* HAMBURGER ICON */

.hamburger{
display:none;
flex-direction:column;
cursor:pointer;
gap:5px;
}

.hamburger span{
width:25px;
height:3px;
background:black;
display:block;
}

/*CSS-Icon*/
i {
  color: #b9a1b9;
  font-size: 18px;
  margin:0px 4px;
}

.navbar.active {
    display: flex;
}


/*MEDIA QUIRRELS*/
/* MOBILE */


#header{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 30px;
background:#faf7f2;
position: -webkit-sticky; /* Für Safari */
position: sticky;
top: 0;
background-color: var(--main); /* Hintergrund nötig, damit Inhalt drunter verschwindet */
z-index: 1000; /* Stellt sicher, dass die Navi oben liegt */
height:10vh;
z-index: 10000;
}


#header h1{
font-size:32px;
font-family:'Great Vibes', cursive;
font-weight:400;
margin-left:5px;
}

/* HEADER */
.nav{
margin-left: auto;

}

.navbar{
    gap:10px;
}

.nav-links::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease;
}

.nav-links:hover::after {
    width: 100%;
}
.nav-links{
    text-decoration: none;
    color:black;
    position: relative;
    margin:0px 10px;
    font-family: 'Inter', sans-serif;
   
}

.hero{
 
height:80vh;
background:url("images/KretaSonnenlicht.jpg");
position:relative;
display:flex;
align-items:center;
justify-content:center;
background-attachment: fixed; /*Parallaxeffekt*/
object-position:bottom;
padding-left:100px;
background-repeat: no-repeat;     /* verhindert Wiederholung */
background-size: cover;           /* skaliert auf volle Fläche */
}
 
 
/* OVERLAY */
 
.hero-overlay{
position:absolute;

display:flex;
align-items:center;
justify-content:center;
 
width:100%;
height:100%;
}
 
 
/* TITLE */
 
.hero-text{
 
font-family:'Playfair Display', serif;
font-size:90px;
color:white;
letter-spacing:2px;
 
opacity:0;
transform:translateY(40px);
animation:heroFade 1.8s ease forwards;
 
}
 
 
/* ANIMATION */
 
@keyframes heroFade{
 
0%{
opacity:0;
transform:translateY(40px);
}
 
100%{
opacity:1;
transform:translateY(0);
}
}
 
.hero-text h2{
font-family:'Great Vibes', cursive;
font-size:80px;
color:white;
font-weight:300;
}

.hero-text h3{
font-family:'Great Vibes', cursive;
font-size:70px;
color:white;
margin-top:-20px;
}

.hero-text p{
color:white;
margin-top:20px;
font-size:14px;
}
.preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 80px;
    gap: 40px;
    background-color: var(--main);
    height:70vh;
    
}

/* TEXT */
.text {
    max-width: 400px;
}

.text h1 {
    font-size: 42px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.text p {
    font-family: Arial, sans-serif;
    margin-bottom: 25px;
    color: #333;
}

.text button {
    background-color: #2f474f;
    color: white;
    border: none;
    padding: 12px 25px;
    cursor: pointer;
    transition: 0.3s;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}



.text button:hover {
    background-color: #1f2a36;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
   
}

/* SLIDER */
.slider {
    display: flex;
    align-items: center;
    gap: 20px;

}

.slides {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* BILDER */
.slides img {
    width: 13vw;
    height: 35vh;
    object-fit: cover;
    opacity: 0.5;
    transition: all 0.4s ease;
    cursor: pointer;
}

/* AKTIVES BILD */
.slides img.active {
    width: 25vw;
    height: 66vh;
    opacity: 1;
}

/* HOVER */
.slides img:hover {
    transform: scale(1.05);
    opacity: 0.8;
}

/* PFEILE */
.arrow {
    font-size: 30px;
    cursor: pointer;
    user-select: none;
    transition: 0.2s;
}

.arrow:hover {
    transform: scale(1.2);
}

/*.scenery-slides img {
    width: 10vw;
    height: 24vh;
  
}*/

/* AKTIVES BILD */
.slides img.active {
    width: 20vw;
    height: 52.8vh;

}

/* HOBBIES SECTION */
.hobbies-section{
    padding:50px 12%;
    background: var(--main);
    
    position:relative;
    font-family: 'Montserrat', sans-serif;

}


.Tabelle{
    background-color: var(--main);
    margin-top:15vh;
} 

table {
    display:flex;
    justify-content:center;
    align-items:center;
    border-collapse: collapse;
    font-family: 'Montserrat', sans-serif;
    background: var(--main);
    margin-bottom:30px;
} 

/* Zellen */
td {
    padding: 16px 60px;
    text-align: left;
    font-size: 15px;
    color: #333;
    text-align:center;
}

/* NUR vertikale Linien */
td:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* dezenter Hover (optional) */
tr:hover {
    background: rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(10px);
}

/* etwas mehr Abstand zwischen Reihen */
tr {
    height: 50px;
    transition:all 0.3s ease;
}


.hobbies-layout {
    display: flex;
    flex-direction: column;
    align-items: center; /* ALLES horizontal zentrieren */
    gap: 40px;
    padding: 50px 70px 10px 70px;
    text-align: center;
}

/* ÜBERSCHRIFT */
.hobbies-layout h1 {
    font-size: 35px;
    line-height: 1.3;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

/* TEXT */
.hobbies-text {
    max-width: 600px;
}

/* BILDER REIHE */
.hobbies-collage {
    display: flex;
    justify-content: center; /* ← DAS FEHLT DIR */
    align-items: center;
    gap: 40px;
    flex-wrap: nowrap; /* korrekt geschrieben */
}

/* BILDER */
.hobbies-collage img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.hobbies-collage img{
    box-shadow:0 30px 50px rgba(0,0,0,0.08);
}

/* Layout */

.about-me__content{
display:flex;
align-items:center;
justify-content:center;
gap:60px;
}

/* SECTION */
.aboutme_two {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 100px;
    gap: 60px;
    background-color: var(--main);
}

/* TEXT BOX */
.aboutme_two > div:first-child {
    background-color: #ffffff;
    padding: 80px;
    max-width: 600px;
}

/* TITLE */
.about-me__title2 {
    font-size: 42px;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 500;
    
}

/* TEXT */
.about-me__text2 {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    font-family: Arial, sans-serif;
}

/* BILD-CONTAINER */
.about-me_pictureframe2 {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* BILD */
.about-me_picture2 {
    width: 500px;
    height: 650px;
    object-fit: cover;
}

/* leicht überlappender Effekt */
.aboutme_two > div:first-child {
    position: relative;
    z-index: 2;
    
  /*background: #f0ecec;*/
    background: #f0ebe3e0;
 /* weicher Fade an allen Seiten */
    -webkit-mask-image: 
        linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    
    -webkit-mask-composite: destination-in;
    
    mask-image: 
        linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    
    mask-composite: intersect;
}
 @media (max-width: 768px) {
    .aboutme_two > div:first-child {
    position: relative;
    z-index: 2;
    background: none;

    -webkit-mask-image: none;
    mask-image: none;

    -webkit-mask-composite: initial;
    mask-composite: initial;
}}

.about-me_pictureframe2 {
    margin-left: -100px; /* sorgt für Überlappung wie im Bild */
}


/* COLLAGE */

.collage{
display:flex;
gap:20px;
padding:10px 100px;
}

.collage img{
width:30%;
object-fit:cover;
}
 
/* ANIMATION */
 
@keyframes heroFade{
 
0%{
opacity:0;
transform:translateY(40px);
}
 
100%{
opacity:1;
transform:translateY(0);
}
}
.einstieg {
    height:80vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background:url("images/KretaSonnenlicht.jpg") ;

    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:20px;
    margin-bottom:40px;

    color:white;
    font-size:30px;
    letter-spacing:3px;

    }

    .einstieg h1 {
    font-family:'Great Vibes';
    opacity:0;
    transform:translateY(40px);
    animation:heroFade 1.8s ease forwards;
    }


/*----------------------------------
-----------------------------------
 SECTION 2 – MBK (Klassennamen sind vertauscht)--------------------
-------------------------------------*/
.kmd{
    background: var(--main);
    width:100%;
    height:90vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.kmd-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:80%;
    max-width:1200px;
}

/* TEXT */

.kmd-text{
max-width:450px;
}

.kmd-title{
font-size:90px;
font-weight:800;
color:#3e5a70;
letter-spacing:2px;
margin-bottom:20px;
}

.kmd-subtitle{
font-family:'Grand Amoura', cursive;
font-size:40px;
margin-bottom:20px;
}

.kmd-description{
line-height:1.6;
font-size:14px;
}

/* IMAGES */

.kmd-images{
position:relative;
padding-right:120px;
justify-content:center;
display: flex;
margin-top:80px;
}

.kmd-images img{
width:260px;
border:12px solid #f5f4f1;
box-shadow:0 10px 20px rgba(0,0,0,0.15);
transition: transform 0.3s ease-in;
}

.kmd-images img:hover{
transform: scale(1.02);
}

/* großes Bild */

.img-main{
transform:rotate(-4deg);
}

/* überlappendes Bild */

.img-top{
position:absolute;
top:-120px;
right:-90px;
transform:rotate(6deg);

}

/* SECTION 3 – MBK */
.mbk{
    background:var(--main);
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-bottom:100px;
    padding-top:30px;
    min-height: 90vh; 
}

.mbk-container{
    width:80%;
    max-width:1200px;
}

/* BILDER */

.mbk-images{
    margin-bottom:50px;
    display: grid;
    grid-auto-flow: column;        /* Elemente nebeneinander */
    grid-auto-columns: max-content;      /* Breite jeder Karte */
    gap: 30px;

    overflow-x: auto;              /* horizontal scrollen */
    overflow-y: hidden;

    padding: 20px;
    scroll-snap-type: x mandatory; /* optional: smooth snapping */
    padding-top:30px;
}

.mbk-img{
 
    border:12px solid #f5f4f1;
    box-shadow:0 10px 20px rgba(0,0,0,0.15);
    object-fit:cover;

    height: 400px;        
    width: auto;          
    scroll-snap-align: start;

    
}


/* UNTERER BEREICH */

.mbk-bottom{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.kmd-images>img:hover{
  z-index:1000;}
/* TITEL */

.mbk-titlebox h1{
    font-size:90px;
    font-weight:800;
    color:#3e5a70;
    margin:0;
}

.mbk-titlebox h3{
    font-family:'Grand Amoura', cursive;
    font-size:40px;
    margin-top:-20px;
}


/* TEXT */

.mbk-text{
    max-width:400px;
    line-height:1.6;
    font-size:14px;
}

.mbk-text ul{
    padding-left:20px;
}

ul li::marker{
    content:"✧ ";
}


.mbk-item {
    position: relative;
    display: inline-block;
    overflow: hidden;

}

/* Bild */
.mbk-img {
    border: 12px solid #f5f4f1;
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);

    object-fit: cover;
    height: 400px;
    width: auto;

    scroll-snap-align: start;

    transition: transform 0.45s ease;
}

/* Overlay */
.mbk-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.28),
        rgba(0,0,0,0.02)
    );

    color: white;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    padding-bottom: 18px;

    opacity: 0;
    transition: opacity 0.4s ease;

    font-size: 13px;
   
    font-family:'Montserrat', sans-serif;
}

/* Hover */
.mbk-item:hover .mbk-overlay {
    opacity: 1;
}

.mbk-item:hover .mbk-img {
    transform: scale(1.02);
}
.sectionscombined{
    display: flex;
    flex-direction: column;
    width: 100%;

}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 SECTION FAMILY AND FRIENDS!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
.friendsandfamily-editorial-text{
  height: 50vh;
  font-family: 'Playfair Display', serif;
  font-style: italic;

  /* Responsive Schriftgröße */
  font-size: clamp(2rem, 5vw, 7rem); /* 2rem = Minimum, 5vw = flexibel, 7rem = Maximum */

  line-height: 0.95;

    /* Entscheidend für die Umbrüche */
    max-width: 14ch; /*Zeichen*/

    /* schöneres Zentrieren */
    margin: 0 auto -5vh auto;
    text-align: center;
    
    letter-spacing: -0.03em;
    font-weight: 400;

    display: flex;
    align-items:center;
    justify-content:center;
    color:rgb(169, 201, 205);
   

}
.friendsandfamily-editorial-text span{
    color:rgb(0, 0, 0);
    font-style:normal;
    font-size:clamp(2rem, 4.5vw, 7rem);
}

.friendsandfamily-editorial-section{
    height: 50vh;
}

.friendsandfamily-editorial-container{
margin:auto;
background:var(--main);
}
/* HEADING */

.friendsandfamily-editorial-heading{
height:70vh;
background:url("images/KretaSonnenlicht.jpg") bottom/cover;
align-items:center;
justify-content:center;
padding-top:20px;
margin-bottom:40px;
display:flex;
background-attachment: fixed;
}

/* GRID */

.friendsandfamily-editorial-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
grid-auto-rows:200px;
gap:30px;
padding:0px 70px;
}
/* CARD */

.friendsandfamily-card{
position:relative;
transition:all .35s ease;
}

.friendsandfamily-card img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:all .35s ease;
}

/* GRID POSITION */

.card-1{
grid-column:1/3;
grid-row:1/3;
}

.card-2{
grid-column:3/5;
}

.card-3{
grid-column:3/5;
grid-row:2;
}

.card-4{
grid-column:5/7;
grid-row:1/3;

}

.card-5{
    grid-column: 1/3;
    grid-row: 3;
}

.card-6{
    grid-column: 3/5;
    grid-row: 3;
}

.card-7{
    grid-column:5/7;
    grid-row:3;
}
/* MOMENTS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.moments-editorial-section{
background:var(--main);
}

.moments-editorial-container{
max-width:900px;
margin:auto;
}


/* HEADING MOMENTS*/

#momentstitle{
height:70vh;
background:url("images/KretaSonnenlicht.jpg") bottom/cover;
display:flex;
align-items:center;
justify-content:center;
padding-top:20px;
margin-bottom:40px;
background-attachment: fixed;
}
 
.gallery-moments-section{
    background: var(--main);
    padding: 120px 100px;
}

.gallery-moments-container{
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-moments-heading h2{
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 50px;
    letter-spacing: 1px;
}

.gallery-moments-heading span{
    font-family:'Great Vibes', cursive;
}

/* GRID */
.gallery-grid-moments{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:40px;
    grid-template-areas: 
    "one two three"
    "four five six";
    
}


/* CARD */
.gallery-grid-moments-card{
    overflow:hidden;
    height:200px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* IMAGE */
.gallery-grid-moments-card img, .friendsandfamily-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

}

.friendsandfamily-card{
position:relative;
overflow: hidden;

}


.gallery-grid-moments-card img,
.friendsandfamily-card img{
    transition: transform 0.5s ease;
}

.gallery-grid-moments-card:hover img,
.friendsandfamily-card:hover img{
    transform: scale(1.04);
}

/* MOBILE */
@media (max-width:768px){

    .gallery-moments-section{
        padding:80px 20px;
    }

    .gallery-grid-moments{
        grid-template-columns:1fr;
        gap:20px;
        grid-template-areas: 
        "one"
        "two"
        "three"
        "four"
        "five"
        "six";
    }
    .gallery-grid-moments-card img{
        height:200px;
        overflow:hidden;
    }

    .gallery-moments-heading h2{
        font-size:30px;
        text-align:center;
    }
}

/* GRID */

.gallery-overview{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:30px;
    padding:40px 60px;
}

/* CARD */
.gallery-card{
    position:relative;
    height:350px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
    cursor:pointer;
}

.gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition: transform 0.4s ease;
}

/* OVERLAY */
.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.35);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:white;
    text-align:center;
    padding:20px;
}

/* TEXT */
.overlay h3{
    font-size:28px;
    margin-bottom:15px;
    font-family:'Montserrat', sans-serif;
}

.overlay a{
    text-decoration:none;
    color:white;
   
    font-size:14px;
    transition:0.3s;
}

.overlay a:hover{
    background:white;
    color:rgb(82, 78, 78);
    border:2px solid white;
    border-radius:15px;
    padding:10px 20px;
}

/* HOVER EFFEKT */
.gallery-card:hover img{
    transform:scale(1.1);
}

.gallery-card:hover{
    transform:translateY(-8px);
}


.gallery-card:last-child{
    width:calc(200% + 30px);
}

.photobooth_total{
    margin-top:100px;
}
/*-------------------------------
FOOTER --------------------
---------------------------*/
.footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    padding: 30px 80px 0px 80px;
    background: var(--main);
    font-family: 'Montserrat', sans-serif;
    color: #4a4a4a;
    margin-top:10vh;
}

#LogoFooter{
 height:20vh;
 width:auto;
 justify-items:center;
 align-items:center;
 padding-bottom:5vh;
}


/* Columns */
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
    align-items: flex-start; /* wichtig → Text bleibt links */
    justify-content:center;
}

.footer_text {
    display: flex;
    justify-content: center; /* ganze Gruppe mittig */
    gap: 30vw;              /* Abstand zwischen Spalten */
    align-items: flex-start; /* oben ausrichten */
} 

/* Links */
.footer a {
    text-decoration: none;
    color: #4a4a4a;
    transition: 0.3s;
}

.footer a:hover {
    color: #a78c7a;
}


.footer p {
    margin: 0;
    color: #000000;
    font-size: 14px;
}

.footer-left span {
    font-family: 'Great Vibes', cursive;
    font-size: 14px;
}


#childhood{
   margin-top: 4vh; 
}

/* Mobile */
@media (max-width: 768px) {

/* HEADER */
#header {
    padding: 15px 20px;
}

.navbar {
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    background: var(--main);
    flex-direction: column;
    align-items: center;
    display: none;
    padding: 20px 0;
}

.navbar.active {
    display: flex;
}

.hamburger {
    display: flex;
}

/* HERO */
.hero {
    height: 65vh;
    padding-left: 20px;
    background-attachment: scroll;
}

.hero-text h2 {
    font-size: 40px;
}

.hero-text p {
    font-size: 12px;
}

/* ABOUT SECTION */
.aboutme_two {
    flex-direction: column;
    padding: 40px 20px;
    gap: 30px;
}

.aboutme_two > div:first-child {
    padding: 30px;
}

.about-me_pictureframe2 {
    margin-left: 0;
    justify-content: center;
}

.about-me_picture2 {
    width: 100%;
    height: auto;
}

/* PREVIEW (Slider Section) */
.preview {
    flex-direction: column;
    height: 80vh;
    padding: 40px 20px;
    text-align: center;
}

.text {
    max-width: 100%;
}

.slider {
    flex-direction: column;
}

.slides img {
    width: 80px;
    height: 120px;
}

.slides img.active {
    width: 200px;
    height: 260px;
}

/* TABLE */
table {
    flex-direction: column;
}

td {
    padding: 12px;
    font-size: 14px;
}

/* HOBBIES */
.hobbies-layout {
    flex-direction: column;
    padding: 20px;
}

.hobbies-collage {
    flex-direction: column;
    gap: 20px;
}

.hobbies-collage img {
    width: 80%;
    height: auto;
    border-radius: 20px;
}

/* HERO */
.einstieg {
    height: 50vh;
}

/* MBK SECTION */
.mbk {
    padding: 40px 20px;
}

.mbk-container {
    width: 100%;
}

/* SCROLL IMAGES */
.mbk-images {
    gap: 15px;
    padding: 10px;
}

/* BILDER */
.mbk-img {
    height: 275px;
}

/* TEXT UNTEN */
.mbk-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

/* TITLE */
.mbk-titlebox {
    align-items: center;
    text-align: center;
}

.mbk-titlebox h1 {
    font-size: 70px;
}

.mbk-titlebox h3 {
    font-size: 30px;
}

/* TEXT */
.mbk-text {
    max-width: 100%;
}

/* KMD SECTION */
.kmd {
    padding: 40px 20px;
    height: auto;
}

.kmd-container {
    flex-direction: column;
    gap: 30px;
    text-align: center;
}

/* TEXT */
.kmd-title {
    font-size: 50px;
}

.kmd-subtitle {
    font-size: 24px;
}

/* BILDER */
.kmd-images {
    padding-right: 0;
    margin-top: 40px;
}

.kmd-images img {
    width: 80%;
}

.img-top {
    position: static;
    transform: none;
    margin-top: 20px;
}

.friendsandfamily-editorial-heading{
    background-attachment: scroll;
    height:50vh;
}

.friendsandfamily-editorial-grid{
  display:flex;
    flex-direction: column;
}


/* FOOTER */
.footer_text {
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.footer-col {
    align-items: center;
}

.gallery-card:last-child{
    width:100%;
}

.littlemoments-images{
    display: flex;
    flex-direction: column;   /* 🔥 untereinander */
    gap: 20px;

    overflow-x: hidden;       /* wichtig! */
    overflow-y: visible;

    padding: 20px;
}

/* Bilder */
.littlemoments-item{
    width: 100%;
    height: auto;
}

.littlemoments-images img{
    width: 100%;
    height: auto;
}

/* Titel schöner */
.littlemoments-heading h2{
    font-size: 28px;
    text-align: center;
}
.littlemoments {
    height: auto;        /* wichtig */
    margin: 40px 20px;   /* etwas weniger Abstand */
}

.littlemoments-container {
    width: 100%;
}

/* Container sauber untereinander */
.littlemoments-images {
    display: flex;
    flex-direction: column;
    gap: 20px;

    overflow: visible; /* wichtig */
}

/* Bilder */
.littlemoments-item {
    width: 100%;
    height: auto;
}

.littlemoments-images img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


}


/*TABLET (769px – 1024px)*/
@media (min-width: 769px) and (max-width: 1024px) {

/* HEADER */
#header {
    padding: 20px 40px;
}

/* HERO */
.hero {
    height: 75vh;
    padding-left: 50px;
}

.hero-text h2 {
    font-size: 60px;
}

/* ABOUT */
.aboutme_two {
    flex-direction: column;
    padding: 60px 40px;
    gap: 40px;
}

.about-me_pictureframe2 {
    margin-left: 0;
    justify-content: center;
}

.about-me_picture2 {
    width: 80%;
    height: auto;
}

/* PREVIEW */
.preview {
    flex-direction: column;
    height: auto;
    padding: 60px 40px;
    text-align: center;
}

.slider {
    justify-content: center;
}

.slides img {
    width: 120px;
    height: 200px;
}

.slides img.active {
    width: 260px;
    height: 380px;
}

/* TABLE */
td {
    padding: 14px 30px;
}

/* HOBBIES */
.hobbies-layout {
    padding: 40px;
}

.hobbies-collage {
    gap: 30px;
}

.hobbies-collage img {
    width: 120px;
    height: 120px;
}

* HERO */
.einstieg {
    height: 60vh;
}

/* MBK */
.mbk {
    padding: 60px 30px;
}

.mbk-container {
    width: 100%;
}

/* BILDER */
.mbk-img {
    height: 300px;
}

/* TEXT UNTEN */
.mbk-bottom {
    flex-direction: column;
    gap: 30px;
    align-items: center;
    text-align: center;
}

/* TITEL */
.mbk-titlebox h1 {
    font-size: 70px;
}

.mbk-titlebox h3 {
    font-size: 30px;
}

/* KMD */
.kmd {
    padding: 60px 30px;
    height: auto;
}

.kmd-container {
    flex-direction: column;
    gap: 40px;
    text-align: center;
}

/* TEXT */
.kmd-title {
    font-size: 70px;
}

.kmd-subtitle {
    font-size: 30px;
}

/* BILDER */
.kmd-images {
    padding-right: 0;
    justify-content: center;
}

.kmd-images img {
    width: 60%;
}

.img-top {
    top: -80px;
    right: -40px;
}

.friendsandfamily-editorial-heading{
    background-attachment: scroll;
    height:50vh;
}

.friendsandfamily-editorial-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  
}
.friendsandfamily-card{
  grid-column: auto;
  grid-row: auto;
}

.card-7{
    grid-column:1/3;
}


/* FOOTER */
.footer_text {
    gap: 80px;
}

.littlemoments-images{
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 nebeneinander */
    gap: 20px;

    overflow: hidden;
}

.littlemoments-item{
    height: 300px;
}

.littlemoments-images img{
    height: 100%;
    object-fit: cover;
}


}