/* =========================================================
Santa-Latina.com – GLOBAL FINAL styles.css
IDENTISCH ZUR INDEX / STABIL / NICHTS SPRINGT
========================================================= */

/* ---------- 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;
--shadow:0 12px 28px rgba(0,0,0,.45);
}

/* ---------- Reset ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-y:scroll}
body{
background:var(--bg);
color:var(--ink);
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
min-height:100vh;
width:100%;
}

/* ---------- Links ---------- */
a{color:inherit;text-decoration:none}

/* ---------- BUTTONS (EXAKT WIE INDEX) ---------- */
.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}

/* ---------- HEADER ---------- */
.hero{
background:var(--grad);
padding:26px 20px 22px;
text-align:center;
position:relative;
box-shadow:0 8px 24px rgba(0,0,0,.35);
width:100%;
}
/* 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;
}
.lang button,
.lang .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,
.lang .pill.active{
background:var(--sun);
color:#2b1c00;
border-color:transparent;
}

/* ---------- MENU ---------- */
.menu-wrap{
position:absolute;
right:20px;
top:24px;
z-index:100;
}
.menu-toggle{
background:var(--btn);
border-radius:12px;
width:42px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:var(--shadow);
cursor:pointer;
color:#2d120f;
}
.menu-toggle span{
display:block;
width:18px;
height:2px;
background:currentColor;
position:relative;
}
.menu-toggle span::before,
.menu-toggle span::after{
content:"";
position:absolute;
left:0;
width:18px;
height:2px;
background:currentColor;
}
.menu-toggle span::before{top:-6px}
.menu-toggle span::after{top:6px}

.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;
}

/* ---------- LAYOUT ---------- */
.wrap{
max-width:1200px;
margin:0 auto;
padding:20px;
}

/* =========================================================
AUTH / LOGIN / REGISTER – GLASKASTEN (FIXED DESIGN)
========================================================= */

.wrap.auth{
display:flex;
justify-content:center;
padding:40px 12px;
}

.panel{
background:var(--panel);
border:1px solid var(--panel-b);
border-radius:22px;
padding:28px;
box-shadow:var(--shadow);

/* 🔴 DESIGN-FIX: niemals breiter */
width:100%;
max-width:420px;
margin:0 auto;
}

@media (min-width:900px){
.panel{
max-width:420px;
}
}

.panel h2{
margin:0 0 18px;
text-align:center;
font-weight:800;
}

/* ---------- FORMS ---------- */
label{display:block;margin-bottom:14px}
label span{
display:block;
margin-bottom:6px;
font-weight:700;
font-size:.9rem;
}
input{
width:100%;
padding:10px 14px;
border-radius:10px;
border:1px solid #ffffff55;
background:#ffffff14;
color:#fff;
}
input:focus{
outline:none;
border-color:var(--tangerine);
box-shadow:0 0 0 2px rgba(255,140,66,.35);
}

.primary{width:100%;margin-top:10px}

.meta{
text-align:center;
margin-top:12px;
}
.meta a{
color:var(--sun);
font-weight:600;
}

/* ---------- GENERIC CONTENT BOX ---------- */
.box{
background:var(--panel);
border:1px solid var(--panel-b);
border-radius:14px;
padding:18px;
box-shadow:var(--shadow);
}

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

.foot .linkbar{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
width:100%;
}

.foot .btn{
min-width:240px;
max-width:90%;
}

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


/* =========================
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;
}