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

body{

font-family: "Montserrat", sans-serif;
background:#ececea;
color:#1a1f24;
line-height:1.6;

}

/* Hintergrund */

.page-bg{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

z-index:0;

}

.page-bg__poster{

position:absolute;

top:-40px;           /* verschiebt Bild nach oben */
left:50%;

transform:translateX(-50%);

width:900px;
max-width:90%;

opacity:0.25;

pointer-events:none;

}

/* Layout */

.shell{

position:relative;
z-index:2;

max-width:1000px;
margin:auto;

padding:60px 20px;

}

/* Hero */

.hero{

text-align:center;
margin-bottom:40px;

}

.hero h1{

font-size:56px;
font-weight:800;

color:#b96a3f;

margin-bottom:10px;

}

.hero__subtitle{

color:#5f6770;

font-size:20px;

}

/* Panels */

.panel{

background:rgba(255,255,255,0.55);   /* transparenter */

border-radius:22px;

padding:40px;

margin-bottom:20px;

box-shadow:0 12px 40px rgba(0,0,0,0.08);

backdrop-filter:blur(6px);

}

/* Überschriften */

.panel__eyebrow{

font-size:13px;
letter-spacing:2px;
color:#b96a3f;
margin-bottom:10px;

}

.panel h2{

font-size:38px;
margin-bottom:20px;

}

/* Button */

.button{

display:inline-block;

background:#b96a3f;
color:white;

padding:14px 28px;

border-radius:10px;

font-weight:700;

text-decoration:none;

margin-top:20px;

transition:0.2s;

}

.button:hover{

background:#9f5a34;

}

/* Codebox */

.access-box{

margin-top:30px;

background:rgba(255,255,255,0.45); /* transparenter */

border-radius:18px;

padding:24px;

text-align:center;

}

.access-box strong{

font-size:42px;
color:#b96a3f;

display:block;

margin-top:10px;

}

/* Listen */

.grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;

}

.link-list{

list-style:none;

}

.link-list li{

margin-bottom:12px;

}

.link-list a{

color:#177f72;
text-decoration:none;
font-weight:600;

}

.steps-list{

margin-top:10px;
padding-left:20px;

}

/* Footer */

.footer{

text-align:center;
margin-top:40px;
color:#5f6770;

}

/* Mobile */

@media(max-width:800px){

.grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:40px;

}

.page-bg__poster{

width:120%;
opacity:0.18;

}

}