/* =========================================
   GRUNDDESIGN
========================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    color:#4d4743;
    background:#fbfaf8;
    line-height:1.8;
    font-size:18px;
}

.container{
    width:min(1100px,92%);
    margin:auto;
}

img{
    max-width:100%;
    display:block;
}

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

section{
    padding:90px 0;
}

h1,h2,h3,h4{
    font-family:'Cormorant Garamond',serif;
    color:#3d352f;
    line-height:1.15;
}

h1{
    font-size:clamp(3rem,7vw,5rem);
    margin-bottom:20px;
}

h2{
    font-size:clamp(2.2rem,5vw,3.2rem);
    margin-bottom:25px;
}

h3{
    font-size:2rem;
    margin-bottom:15px;
}

p{
    margin-bottom:20px;
}/* =========================================
   HEADER
========================================= */

.header{

position:sticky;
top:0;
z-index:1000;

background:rgba(251,250,248,.96);

backdrop-filter:blur(14px);

border-bottom:1px solid #ece6df;

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo{

display:flex;

align-items:center;

gap:16px;

transition:.3s;

}

.logo:hover{

opacity:.9;

}

.logo img{

width:65px;

height:65px;

border-radius:50%;

}

.logo h2{

font-size:2rem;

margin:0;

}

.logo p{

font-size:.85rem;

margin:0;

color:#8a8078;

font-family:'Inter',sans-serif;

}

nav{

display:flex;

gap:30px;

align-items:center;

}

nav a{

position:relative;

font-size:16px;

font-weight:500;

color:#5a514b;

transition:.3s;

}

nav a:hover{

color:#8A644C;

}

nav a::after{

content:"";

position:absolute;

left:0;
bottom:-6px;

width:0;

height:2px;

background:#8A644C;

transition:.3s;

}

nav a:hover::after{

width:100%;

}
/* =========================================
   HERO
========================================= */

.hero{

padding:120px 0;

background:linear-gradient(
180deg,
#FCFAF8 0%,
#F6F0EA 100%
);

}

.hero-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:90px;

align-items:center;

}

.hero-text{

max-width:650px;

}

.hero-text p{

font-size:1.15rem;

color:#5d5650;

line-height:1.9;

}

.hero-image{

display:flex;

justify-content:center;

align-items:center;

}

.hero-image img{

width:340px;

border-radius:50%;

box-shadow:0 30px 70px rgba(0,0,0,.08);

}



/* =========================================
   WELCOME
========================================= */

.welcome{

padding:110px 0;

background:white;

}

.welcome .container{

max-width:850px;

text-align:center;

}

.intro-text{

font-size:1.15rem;

line-height:2;

color:#5d5650;

margin-top:25px;

}



/* =========================================
   EYEBROW
========================================= */

.eyebrow{

display:inline-block;

margin-bottom:20px;

font-size:.8rem;

letter-spacing:2px;

text-transform:uppercase;

font-weight:600;

color:#9B7B65;

}



/* =========================================
   ABSCHNITTE
========================================= */

.brain-section{

padding:120px 0;

background:#FCFAF8;

}

.brain-section:nth-child(even){

background:white;

}

.brain-section .container{

max-width:900px;

}
/* =========================================
   BILDER
========================================= */

.info-image{

display:block;

width:100%;

max-width:850px;

margin:45px auto;

border-radius:20px;

box-shadow:0 20px 45px rgba(0,0,0,.08);

}



/* =========================================
   TEXT
========================================= */

.section-intro{

font-size:1.2rem;

line-height:1.9;

margin-bottom:35px;

color:#5c5550;

}

.brain-section p{

line-height:1.9;

color:#5d5650;

}



/* =========================================
   LISTEN
========================================= */

.info-list{

margin:30px 0;

padding-left:22px;

}

.info-list li{

margin-bottom:14px;

line-height:1.8;

color:#5d5650;

}

/* GANZ WICHTIG:
Im HTML KEIN "•" mehr schreiben!
Nur noch:

<li>Erinnerungslücken</li>

Nicht:

<li>• Erinnerungslücken</li>
*/



/* =========================================
   WICHTIG ZU WISSEN
========================================= */

.info-box{

margin:45px 0;

padding:30px;

background:#F7F3EF;

border-left:6px solid #9B7B65;

border-radius:18px;

}

.info-box h3{

margin-bottom:12px;

}

.info-box p{

margin-bottom:0;

}



/* =========================================
   REAKTIONEN
========================================= */

.reaction-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:24px;

margin:45px 0;

}

.reaction-card{

background:white;

border:1px solid #E9E1D8;

border-radius:18px;

padding:28px;

transition:.3s;

}

.reaction-card:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(0,0,0,.06);

}

.reaction-card h4{

font-size:1.6rem;

margin-bottom:12px;

color:#7E5F4A;

}

.reaction-card p{

margin:0;

font-size:1rem;

line-height:1.8;

color:#5d5650;

}
/* =========================================
   FOOTER
========================================= */

footer{

background:#3D352F;

color:white;

padding:70px 0 50px;

margin-top:100px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:40px;

}

footer h3{

color:white;

margin-bottom:18px;

}

footer h4{

color:white;

margin-bottom:18px;

font-size:1.2rem;

}

footer p,
footer li,
footer a{

color:rgba(255,255,255,.8);

line-height:1.9;

list-style:none;

transition:.3s;

}

footer a:hover{

color:white;

}

footer ul{

padding:0;

}



/* =========================================
   SANFTE ANIMATIONEN
========================================= */

.hero,
.welcome,
.features,
.brain-section,
.cta-section{

animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/* =========================================
   BUTTONS
========================================= */

.btn{

transition:.35s;

}

.btn:hover{

transform:translateY(-4px);

box-shadow:0 18px 40px rgba(0,0,0,.08);

}



/* =========================================
   MOBILE
========================================= */

@media(max-width:900px){

nav{

display:none;

}

.header .container{

justify-content:center;

}

.logo{

justify-content:center;

text-align:center;

}

.hero-grid{

grid-template-columns:1fr;

gap:50px;

text-align:center;

}

.hero-image{

order:-1;

}

.hero-image img{

width:220px;

}

.reaction-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

section{

padding:70px 0;

}

}



@media(max-width:600px){

body{

font-size:17px;

}

.hero{

padding:70px 0;

}

.hero-buttons{

display:flex;

flex-direction:column;

gap:15px;

}

.btn{

width:100%;

text-align:center;

}

.info-box{

padding:22px;

}

.info-image{

margin:30px auto;

border-radius:14px;

}

}