/* ---------- TOKENS ---------- */
:root{
--rose:#A23E48;
--flame:#FF3C38;
--tangerine:#FF8C42;
--sun:#FFF275;

--ink:#fff;
--muted:#ffe7cb;
--bg:#160f12;

--panel:#ffffff10;
--panel-b:#ffffff1f;

--grad:linear-gradient(90deg,var(--rose),var(--flame),var(--tangerine));
--btn:linear-gradient(90deg,var(--flame),var(--tangerine));
--btnH:linear-gradient(90deg,var(--sun),#ffe8a0);

--radius:14px;
--radius-lg:22px;
--shadow:0 12px 28px rgba(0,0,0,.45);
}

html {
overflow-y: scroll;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--bg);
color:var(--ink);
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
min-height:100vh;
}
a{color:inherit;text-decoration:none}

/* ---------- BUTTONS ---------- */
.btn{
background:var(--btn);
border:none;
color:#2d120f;
padding:9px 16px;
border-radius:12px;
font-weight:700;
cursor:pointer;
box-shadow:var(--shadow);
display:inline-flex;
align-items:center;
justify-content:center;
white-space:nowrap;
transition:.2s;
}
.btn:hover{background:var(--btnH)}
.btn.small{padding:7px 12px;font-size:.9rem}

.hero{
background:var(--grad);
padding:26px 20px 22px;
text-align:center;
position:relative;
box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* Titel – EINHEITLICH */
.hero h1,
.brand{
font-size: 2.2rem;
font-weight: 800; /* WICHTIG: überall gleich */
margin: 0;
line-height: 1.15; /* verhindert Höhen-Schwankung */
letter-spacing: .02em;
}

.motto{
display:block;
margin:6px 0 8px;
color:var(--sun);
font-weight:700;
}


/* ---------- LANGUAGE PILLS ---------- */
.lang{
display:flex;
justify-content:center;
gap:6px;
margin-bottom:8px;
flex-wrap:wrap;
}
.lang button,
.pill{
border:1px solid #ffffff66;
background:none;
color:#fff;
border-radius:999px;
padding:6px 0;
width:46px;
font-weight:700;
cursor:pointer;
text-align:center;
}
.lang button.active,
.pill.active{
background:var(--sun);
color:#2b1c00;
border-color:transparent;
}

.menu-wrap{
position:absolute;
right:20px;
top:24px;
}

.menu-toggle{
background:var(--btn);
border-radius:12px;
width:42px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:var(--shadow);
color:#2d120f;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after{
content:"";
display:block;
width:18px;
height:2px;
background:currentColor;
position:relative;
}

.menu-toggle span::before{top:-6px;position:absolute}
.menu-toggle span::after{top:6px;position:absolute}

.menu-panel{
position:absolute;
right:0;
top:48px;
background:#1f1214;
border:1px solid #ffffff2c;
border-radius:14px;
padding:10px;
box-shadow:var(--shadow);
display:none;
min-width:200px;
}

.menu-wrap.open .menu-panel{display:block}
.menu-panel .btn{width:100%;margin:4px 0}

.btn{
background:var(--btn);
border:none;
border-radius:12px;
padding:9px 16px;
font-weight:700;
color:#2d120f;
box-shadow:var(--shadow);
cursor:pointer;
display:inline-flex;
justify-content:center;
align-items:center;
}

.btn:hover{background:var(--btnH)}

.wrap{
max-width:820px;
margin:0 auto;
padding:20px;
display:block;
}

.panel h2{
min-height: 2.2em;
line-height: 1.2;
}

.panel{
background:var(--panel);
border:1px solid var(--panel-b);
border-radius:22px;
max-width:820px;
width:100%;
margin:0 0 18px;
box-shadow:var(--shadow);
text-align:center;
}



.foot{
margin-top:40px;
padding:28px 20px;
border-top:1px solid var(--panel-b);
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
}

.foot .btn{min-width:240px}

/* ---------- RESPONSIVE ---------- */
@media(max-width:700px){
.menu-wrap{right:12px}
.hero h1,.brand{font-size:1.8rem}
.panel{padding:22px 16px}
}


/* =========================
HEADER STABILISIERUNG – KEIN SPRINGEN
========================= */

.hero{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 170px; /* 🔒 feste Headerhöhe */
}

/* Titel */
.hero h1{
margin: 0;
line-height: 1.1;
}

/* Motto – fester Abstand */
.motto{
margin-top: 8px;
margin-bottom: 10px;
min-height: 1.4em; /* 🔒 verhindert Höhenänderung */
}

/* Sprachpills – fester Abstand */
.lang{
margin-top: 0;
margin-bottom: 0;
height: 36px; /* 🔒 gleiche Höhe auf ALLEN Seiten */
align-items: center;
}