/* spenden.html */
*{
box-sizing:border-box;
}

/* TYPOGRAPHY SCALE */

:root{

--text-xs:0.8125rem;   /* 13px */
--text-sm:0.9375rem;   /* 15px */
--text-base:1rem;      /* 16px */
--text-md:1.125rem;    /* 18px */
--text-lg:1.375rem;    /* 22px */
--text-xl:1.75rem;     /* 28px */

}

html{
height:100%;
font-size:16px;
background:linear-gradient(180deg,var(--color-background-soft) 0%,var(--color-background) 100%);
background-repeat:no-repeat;
background-attachment:fixed;
}

body{
margin:0;
min-height:100vh;
font-family:'Segoe UI',sans-serif;
color:var(--color-text);
background:transparent;
font-size:var(--text-base);
line-height:1.6;
}

/* HERO */

.hero{
padding:90px 20px 70px;
text-align:center;
position:relative;
overflow:hidden;
}

.hero::before{
content:"";
position:absolute;
width:min(600px, 90vw);
height:min(600px, 90vw);
background:radial-gradient(circle,var(--color-accent-soft) 0%,transparent 70%);
top:-200px;
left:50%;
transform:translateX(-50%);
opacity:0.35;
}

/* label */

.hero-label{
font-size:var(--text-xs);
text-transform:uppercase;
letter-spacing:2px;
color:var(--color-brand);
font-weight:600;
margin-bottom:15px;
position:relative;
}

/* HERO TITLE */

.hero h1{
font-size:clamp(2.5rem,5vw,3.5rem);
margin:0 0 20px;
font-weight:700;
line-height:1.15;
position:relative;
}

.hero span{
color:var(--color-brand);
}

/* HERO TEXT */

.hero p{
max-width:720px;
margin:auto;
font-size:var(--text-md);
line-height:1.75;
color:var(--color-text-muted);
position:relative;
}

/* SPENDEN CTA */

.donate-intro{
text-align:center;
max-width:650px;
margin:auto;
margin-bottom:30px;
}

.donate-intro h2{
font-size:var(--text-xl);
margin-bottom:10px;
font-weight:600;
}

.donate-intro p{
font-size:var(--text-base);
color:var(--color-text-muted);
line-height:1.7;
}

/* SPENDENBEREICH */

.spenden-section{
display:flex;
flex-direction:column;
align-items:center;
padding:40px 20px 70px;
}

.spenden-card{
background:var(--color-surface);
padding:35px;
border-radius:18px;
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.08),
0 2px 6px rgba(0,0,0,0.05);
transition:.3s;
}

.spenden-card:hover{
transform:translateY(-4px);
box-shadow:
0 20px 45px rgba(0,0,0,0.12);
}

/* INFO */

.info-section{
max-width:900px;
margin:auto;
padding:0 20px 70px;
}

.info-section h2{
text-align:center;
font-size:var(--text-xl);
margin-bottom:35px;
font-weight:600;
}

/* GRID */

.info-list{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:18px;
}

/* CARDS */

.info-item{
background:var(--color-surface-muted);
padding:18px 20px;
border-radius:14px;
backdrop-filter:blur(4px);
font-size:var(--text-base);
line-height:1.6;
box-shadow:0 6px 16px rgba(0,0,0,0.06);

opacity:0;
transform:translateY(20px);
animation:fadeIn .6s forwards;
}

.info-item:nth-child(2){animation-delay:.1s;}
.info-item:nth-child(3){animation-delay:.2s;}
.info-item:nth-child(4){animation-delay:.3s;}
.info-item:nth-child(5){animation-delay:.4s;}

@keyframes fadeIn{
to{
opacity:1;
transform:translateY(0);
}
}

/* footer text */

.info-text{
margin-top:35px;
text-align:center;
line-height:1.7;
font-size:var(--text-sm);
color:var(--color-text-muted);
}

/* MOBILE */

@media (max-width:600px){

.hero{
padding:70px 20px 50px;
}

.hero h1{
font-size:clamp(2rem,7vw,2.6rem);
}

.hero p{
font-size:var(--text-base);
}

.spenden-card{
padding:22px;
}

}