/* =========================================================
Santa-Latina.com – GLOBAL FINAL styles.css
INDEX + LEGAL SEITEN (AGB / DATENSCHUTZ / IMPRESSUM)
NICHTS SPRINGT – KEINE DUPLIKATE
========================================================= */

/* ---------- 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}
body{
background:var(--bg);
color:var(--ink);
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
min-height:100vh;
}

/* ---------- Links ---------- */
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}

/* ---------- HEADER ---------- */
.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:800;
min-height:1.4em;
transition:opacity .35s ease;
}

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

/* ---------- MENU ---------- */
.menu-wrap{
position:absolute;
right:20px;
top:24px;
z-index:100;
}

/* MENU BUTTON */
.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; /* steuert die Strich-Farbe */
}

/* === DIE 3 STRICHE === */
.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 */
.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:820px;
margin:0 auto;
padding:20px;
}

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

/* =========================================================
LEGAL / SEITEN-INHALT
========================================================= */

.panel{
background:linear-gradient(180deg,var(--panel),var(--panel-b));
border:1px solid #ffffff33;
border-radius:24px;
box-shadow:var(--shadow);
padding:26px 22px 18px;
text-align:center;
}

#pageTitle{
margin:0 0 14px;
font-size:1.8rem;
font-weight:900;
}

.legal{
max-width:720px;
margin:0 auto 16px;
text-align:center;
}
.legal h3{
margin:12px 0 8px;
font-size:1.05rem;
letter-spacing:.02em;
}
.legal p{
margin:6px 0;
opacity:.98;
}
.legal a{
color:#fff;
text-underline-offset:2px;
}
.legal .muted{
color:var(--muted);
}

/* Zurück-Button */
#backBtn{
display:block;
width:210px;
height:40px;
line-height:40px;
margin:18px auto 0;
font-weight:800;
}

/* ---------- 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;
}
.foot .btn{
min-width:240px;
}

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


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