/* Yashariel global integration shell — shared footer for legacy pages */
.integrated-site-footer{margin-top:auto;border-top:1px solid rgba(177,128,72,.28);background:linear-gradient(180deg,rgba(11,9,8,.96),rgba(4,4,4,.99));color:#c8c0b6}
.integrated-site-footer *{box-sizing:border-box}
.integrated-site-footer .isf-top{width:100%;display:grid;grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr);align-items:center;gap:32px;padding:34px clamp(24px,5vw,88px)}
.integrated-site-footer .isf-title{font-family:Georgia,'Times New Roman',serif;color:#e3d2b6;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;margin-bottom:10px}
.integrated-site-footer .isf-newsletter{display:flex;min-width:0;max-width:430px}
.integrated-site-footer .isf-newsletter input{min-width:0;flex:1;background:#0b0a09;border:1px solid rgba(177,128,72,.35);border-right:0;color:#eee5da;padding:11px 13px;outline:none}
.integrated-site-footer .isf-newsletter input:focus{border-color:#b9854e;box-shadow:0 0 0 2px rgba(185,133,78,.16)}
.integrated-site-footer .isf-newsletter button{border:1px solid rgba(177,128,72,.55);background:#17120e;color:#e2c79c;padding:11px 16px;cursor:pointer;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}
.integrated-site-footer .isf-links,.integrated-site-footer .isf-social,.integrated-site-footer .isf-legal{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.integrated-site-footer a{color:#bdb4aa;text-decoration:none;transition:color .2s ease,text-shadow .2s ease}
.integrated-site-footer a:hover,.integrated-site-footer a:focus-visible{color:#e0c395;text-shadow:0 0 14px rgba(196,124,57,.2)}
.integrated-site-footer .isf-right{justify-self:end;text-align:right}
.integrated-site-footer .isf-language{display:inline-block;margin-top:10px;color:#d2b27e}
.integrated-site-footer .isf-disabled{opacity:.42;cursor:not-allowed}
.integrated-site-footer .isf-bottom{border-top:1px solid rgba(177,128,72,.18);padding:18px clamp(24px,5vw,88px) 22px;text-align:center;font-size:.82rem;color:#928a82}
.integrated-site-footer .isf-legal{gap:10px}
.integrated-site-footer .isf-legal .dot{opacity:.45}
.integrated-site-footer .isf-copyright{margin-top:10px}
.integrated-toast{position:fixed;left:50%;bottom:26px;z-index:9999;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:rgba(13,10,8,.97);border:1px solid rgba(194,126,58,.65);box-shadow:0 0 26px rgba(184,92,28,.16);color:#eadcc9;padding:12px 42px 12px 16px;min-width:180px;max-width:min(520px,calc(100vw - 32px));transition:opacity .2s ease,transform .2s ease}
.integrated-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.integrated-toast button{position:absolute;right:8px;top:7px;background:none;border:0;color:#c9b79f;font-size:1.1rem;cursor:pointer}
@media(max-width:1024px){.integrated-site-footer .isf-top{display:none}.integrated-site-footer .isf-bottom{padding:20px 18px}.integrated-site-footer .isf-copyright{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.integrated-site-footer a,.integrated-toast{transition:none!important}}
/* Account entry */
.header-login{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 12px;border:1px solid rgba(188,137,78,.42);color:#d8bd92;text-decoration:none;text-transform:uppercase;letter-spacing:.11em;font-size:.68rem;background:rgba(18,14,11,.56);white-space:nowrap}.header-login:hover,.header-login:focus-visible{color:#ffe0a7;border-color:#c98742;box-shadow:0 0 18px rgba(194,96,37,.12)}
@media(max-width:1024px){.header-login{margin-left:auto}.site-header .header-button{display:none}}
@media(max-width:680px){.header-login{font-size:.62rem;padding:7px 9px}}
/* =========================================================
YASHARIEL FINAL HEADER + FOOTER ALIGNMENT FIX
========================================================= */
/* ---------- HEADER ---------- */
.site-header {
min-height: 74px !important;
}
.site-header .header-inner {
display: grid !important;
grid-template-columns: minmax(200px, 1fr) auto minmax(260px, 1fr) !important;
align-items: center !important;
gap: 24px !important;
min-height: 74px !important;
}
.site-header .brand {
grid-column: 1 !important;
justify-self: start !important;
}
.site-header .main-navigation {
grid-column: 2 !important;
justify-self: center !important;
align-self: center !important;
margin: 0 !important;
}
.site-header .header-actions {
grid-column: 3 !important;
justify-self: end !important;
align-self: center !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 22px !important;
margin: 0 !important;
padding: 0 !important;
}
.site-header .header-login {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 10px 0 !important;
color: #e5d5c1 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 16px !important;
line-height: 1 !important;
text-decoration: none !important;
white-space: nowrap !important;
}
.site-header .header-login:hover,
.site-header .header-login:focus-visible {
color: #ffc471 !important;
}
.site-header .header-button {
position: static !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px !important;
margin: 0 !important;
padding: 0 24px !important;
border: 1px solid #934220 !important;
background: rgba(10, 7, 5, 0.55) !important;
color: #f1deca !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 15px !important;
line-height: 1 !important;
letter-spacing: .7px !important;
text-decoration: none !important;
text-transform: uppercase !important;
white-space: nowrap !important;
transform: none !important;
inset: auto !important;
}
.site-header .header-button:hover,
.site-header .header-button:focus-visible {
border-color: #c46330 !important;
background: rgba(130, 47, 24, .20) !important;
}
/* ---------- DESKTOP FOOTER ---------- */
.integrated-site-footer {
width: 100% !important;
margin-top: auto !important;
border-top: 1px solid rgba(177, 128, 72, .28) !important;
background: #050403 !important;
color: #c8c0b6 !important;
font-size: 14px !important;
}
.integrated-site-footer .isf-top {
width: 100% !important;
display: grid !important;
grid-template-columns:
minmax(420px, 1.25fr)
minmax(300px, auto)
minmax(420px, 1.25fr) !important;
align-items: center !important;
gap: 40px !important;
padding: 28px clamp(32px, 5vw, 96px) !important;
}
.integrated-site-footer .isf-title {
margin: 0 0 9px !important;
color: #dfc5a3 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 14px !important;
line-height: 1.2 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
}
.integrated-site-footer .isf-newsletter {
display: flex !important;
align-items: stretch !important;
width: min(100%, 430px) !important;
height: 42px !important;
margin: 0 !important;
}
.integrated-site-footer .isf-newsletter input {
flex: 1 1 auto !important;
min-width: 0 !important;
height: 42px !important;
margin: 0 !important;
padding: 0 14px !important;
border: 1px solid #493224 !important;
border-right: 0 !important;
background: #0c0907 !important;
color: #eee0ce !important;
font-size: 14px !important;
}
.integrated-site-footer .isf-newsletter button {
flex: 0 0 auto !important;
height: 42px !important;
margin: 0 !important;
padding: 0 18px !important;
border: 1px solid #7d4b2c !important;
background: #16100c !important;
color: #d8b188 !important;
font-size: 12px !important;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
}
.integrated-site-footer .isf-links {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 24px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
.integrated-site-footer .isf-right {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 28px !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
}
.integrated-site-footer .isf-social {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 20px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
.integrated-site-footer .isf-language {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
color: #d2b27e !important;
white-space: nowrap !important;
}
.integrated-site-footer .isf-links a,
.integrated-site-footer .isf-social span,
.integrated-site-footer .isf-social a,
.integrated-site-footer .isf-language {
font-size: 12px !important;
line-height: 1.3 !important;
}
/* ---------- LEGAL FOOTER: EINE LINIE ---------- */
.integrated-site-footer .isf-bottom {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 18px !important;
width: 100% !important;
margin: 0 !important;
padding: 15px clamp(32px, 5vw, 96px) 17px !important;
border-top: 1px solid rgba(177, 128, 72, .18) !important;
font-size: 11px !important;
line-height: 1.4 !important;
text-align: center !important;
}
.integrated-site-footer .isf-legal {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
.integrated-site-footer .isf-copyright {
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
/* ---------- KLEINERE DESKTOPS ---------- */
@media (max-width: 1450px) {
.site-header .header-inner {
grid-template-columns: minmax(170px, .8fr) auto minmax(230px, .8fr) !important;
gap: 18px !important;
}
.site-header .main-navigation {
gap: 24px !important;
}
.site-header .main-navigation a {
font-size: 12px !important;
}
.site-header .header-actions {
gap: 14px !important;
}
.site-header .header-login {
font-size: 14px !important;
}
.site-header .header-button {
min-height: 42px !important;
padding: 0 16px !important;
font-size: 12px !important;
}
.integrated-site-footer .isf-top {
grid-template-columns: minmax(350px, 1fr) auto minmax(350px, 1fr) !important;
gap: 26px !important;
}
}
/* ---------- TABLET / MOBILE ---------- */
@media (max-width: 1050px) {
.site-header .header-inner {
display: flex !important;
align-items: center !important;
}
.site-header .brand {
margin-right: auto !important;
}
.site-header .header-actions {
display: none !important;
}
.site-header .menu-toggle {
display: block !important;
margin-left: auto !important;
}
.site-header .main-navigation {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
display: none !important;
width: 100% !important;
padding: 10px 24px 18px !important;
background: rgba(4, 4, 3, .99) !important;
}
.site-header .main-navigation.open,
.site-header .main-navigation.is-open {
display: grid !important;
}
.integrated-site-footer .isf-top {
display: none !important;
}
.integrated-site-footer .isf-bottom {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
padding: 20px 18px !important;
}
.integrated-site-footer .isf-legal {
flex-wrap: wrap !important;
}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
.site-header *,
.integrated-site-footer * {
transition: none !important;
}
}
/* =========================================================
END YASHARIEL FINAL HEADER + FOOTER ALIGNMENT FIX
========================================================= */
/* ============================================================
YASHARIEL HEADER + FOOTER FINAL FIX
============================================================ */
/* ---------- HEADER ---------- */
.site-header {
width: 100%;
min-height: 94px !important;
background: rgba(2, 2, 2, .97) !important;
border-bottom: 1px solid rgba(164, 101, 49, .28);
}
.site-header .header-inner {
width: 100% !important;
max-width: none !important;
display: grid !important;
grid-template-columns:
minmax(260px, 1fr)
auto
minmax(360px, 1fr) !important;
align-items: center !important;
min-height: 94px !important;
padding-left: clamp(22px, 2.5vw, 58px) !important;
padding-right: clamp(22px, 2.5vw, 42px) !important;
gap: 30px !important;
}
.site-header .brand {
justify-self: start !important;
margin: 0 !important;
}
.site-header .main-navigation {
justify-self: center !important;
display: flex !important;
align-items: center !important;
gap: clamp(25px, 2.3vw, 52px) !important;
margin: 0 !important;
padding: 0 !important;
}
.site-header .main-navigation a {
white-space: nowrap !important;
}
/* ---------- RIGHT HEADER AREA ---------- */
.site-header .header-actions {
justify-self: end !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 26px !important;
margin: 0 !important;
padding: 0 !important;
}
.site-header .header-login {
position: static !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 52px !important;
margin: 0 !important;
padding: 0 19px !important;
border: 1px solid rgba(145, 102, 55, .45) !important;
background:
linear-gradient(
180deg,
rgba(36, 27, 18, .48),
rgba(10, 8, 6, .68)
) !important;
color: #dfc7a4 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 15px !important;
letter-spacing: .11em !important;
line-height: 1 !important;
text-decoration: none !important;
text-transform: uppercase !important;
white-space: nowrap !important;
transition:
border-color .25s ease,
color .25s ease,
background .25s ease,
box-shadow .25s ease !important;
}
.site-header .header-login:hover,
.site-header .header-login:focus-visible {
color: #f5d8aa !important;
border-color: rgba(206, 130, 66, .8) !important;
background:
linear-gradient(
180deg,
rgba(64, 38, 20, .58),
rgba(15, 9, 6, .82)
) !important;
box-shadow:
0 0 18px rgba(177, 72, 25, .12),
inset 0 0 14px rgba(198, 117, 55, .04) !important;
}
.site-header .header-button {
position: static !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 60px !important;
margin: 0 !important;
padding: 0 30px !important;
border: 1px solid #8d3519 !important;
background:
linear-gradient(
180deg,
rgba(35, 16, 10, .35),
rgba(5, 4, 3, .78)
) !important;
color: #f1dec7 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 15px !important;
letter-spacing: .09em !important;
line-height: 1 !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
inset: auto !important;
transform: none !important;
transition:
border-color .25s ease,
background .25s ease,
box-shadow .25s ease !important;
}
.site-header .header-button:hover,
.site-header .header-button:focus-visible {
border-color: #c35b29 !important;
background:
linear-gradient(
180deg,
rgba(95, 35, 16, .35),
rgba(12, 6, 4, .88)
) !important;
box-shadow:
0 0 24px rgba(185, 67, 25, .12) !important;
}
/* ============================================================
FOOTER
============================================================ */
.integrated-site-footer {
width: 100% !important;
max-width: none !important;
margin-top: auto !important;
background:
linear-gradient(
180deg,
rgba(8, 7, 6, .98),
#030303
) !important;
border-top:
1px solid rgba(162, 110, 59, .28) !important;
color: #bdb4aa !important;
}
/* ---------- MAIN FOOTER ROW ---------- */
.integrated-site-footer .isf-top {
width: 100% !important;
display: grid !important;
grid-template-columns:
minmax(390px, 1.2fr)
auto
minmax(390px, 1.2fr) !important;
align-items: center !important;
gap: 48px !important;
padding:
28px
clamp(34px, 5vw, 110px) !important;
}
/* NEWSLETTER LEFT */
.integrated-site-footer .isf-newsletter-wrap {
justify-self: start !important;
}
.integrated-site-footer .isf-title {
margin: 0 0 8px !important;
color: #d6bb96 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 13px !important;
letter-spacing: .08em !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
}
.integrated-site-footer .isf-newsletter {
display: flex !important;
align-items: stretch !important;
width: 400px !important;
max-width: 100% !important;
height: 40px !important;
margin: 0 !important;
}
.integrated-site-footer .isf-newsletter input {
flex: 1 !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 14px !important;
border: 1px solid #413126 !important;
border-right: 0 !important;
background: #0b0908 !important;
color: #e3d9cb !important;
font-size: 13px !important;
}
.integrated-site-footer .isf-newsletter button {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 18px !important;
border: 1px solid #764529 !important;
background: #17100c !important;
color: #d4aa7d !important;
font-size: 11px !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
}
/* CENTER */
.integrated-site-footer .isf-links {
justify-self: center !important;
display: flex !important;
align-items: center !important;
gap: 26px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
/* RIGHT */
.integrated-site-footer .isf-right {
justify-self: end !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 27px !important;
margin: 0 !important;
padding: 0 !important;
}
.integrated-site-footer .isf-social {
display: flex !important;
align-items: center !important;
gap: 20px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
.integrated-site-footer .isf-language {
margin: 0 !important;
color: #c9a978 !important;
white-space: nowrap !important;
}
/* SMALL FOOTER TYPOGRAPHY */
.integrated-site-footer a,
.integrated-site-footer span {
font-size: 12px !important;
}
/* ============================================================
LEGAL ROW — ONE SINGLE LINE
============================================================ */
.integrated-site-footer .isf-bottom {
width: 100% !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 20px !important;
margin: 0 !important;
padding:
14px
clamp(30px, 5vw, 110px)
16px !important;
border-top:
1px solid rgba(162, 110, 59, .14) !important;
font-size: 11px !important;
line-height: 1.3 !important;
}
.integrated-site-footer .isf-legal {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 11px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
.integrated-site-footer .isf-copyright {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
/* ============================================================
1440PX
============================================================ */
@media (max-width: 1500px) {
.site-header .header-inner {
grid-template-columns:
minmax(210px, .75fr)
auto
minmax(300px, .75fr) !important;
gap: 20px !important;
}
.site-header .main-navigation {
gap: 28px !important;
}
.site-header .main-navigation a {
font-size: 12px !important;
}
.site-header .header-actions {
gap: 14px !important;
}
.site-header .header-login {
min-height: 46px !important;
padding: 0 14px !important;
font-size: 12px !important;
}
.site-header .header-button {
min-height: 52px !important;
padding: 0 20px !important;
font-size: 12px !important;
}
.integrated-site-footer .isf-top {
grid-template-columns:
minmax(330px, 1fr)
auto
minmax(330px, 1fr) !important;
gap: 28px !important;
}
}
/* ============================================================
MOBILE / TABLET
============================================================ */
@media (max-width: 1050px) {
.site-header .header-inner {
display: flex !important;
align-items: center !important;
min-height: 72px !important;
}
.site-header .brand {
margin-right: auto !important;
}
.site-header .header-actions {
display: none !important;
}
.site-header .main-navigation {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
display: none !important;
width: 100% !important;
padding: 15px 24px 22px !important;
background: rgba(3, 3, 3, .99) !important;
}
.site-header .main-navigation.open,
.site-header .main-navigation.is-open {
display: grid !important;
}
/* bestätigt:
Mobile Footer nur Legal + Copyright */
.integrated-site-footer .isf-top {
display: none !important;
}
.integrated-site-footer .isf-bottom {
flex-direction: column !important;
gap: 11px !important;
padding: 19px 16px !important;
}
.integrated-site-footer .isf-legal {
flex-wrap: wrap !important;
justify-content: center !important;
}
}
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
.site-header *,
.integrated-site-footer * {
transition: none !important;
animation: none !important;
}
}
/* ============================================================
END HEADER + FOOTER FIX
============================================================ */
/* YASHARIEL MOBILE HEADER FINAL START */
/* ==========================================================
TABLET / MOBILE
========================================================== */
@media (max-width: 1050px) {
html,
body {
max-width: 100% !important;
overflow-x: hidden !important;
}
/* ======================================================
HEADER
====================================================== */
.site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
min-height: 68px !important;
padding: 0 !important;
z-index: 1000 !important;
background:
rgba(4, 3, 3, 0.985) !important;
border-bottom:
1px solid
rgba(143, 86, 42, 0.35) !important;
box-sizing: border-box !important;
}
.site-header .header-inner {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: none !important;
min-height: 68px !important;
margin: 0 !important;
padding:
0
18px !important;
box-sizing: border-box !important;
}
/* ======================================================
BRAND
====================================================== */
.site-header .brand,
.site-header a.brand {
position: static !important;
flex: 0 1 auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
max-width:
calc(100vw - 90px) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
z-index: auto !important;
}
/* ======================================================
HAMBURGER
====================================================== */
.site-header .menu-toggle {
position: static !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 44px !important;
width: 44px !important;
height: 44px !important;
margin: 0 0 0 14px !important;
padding: 0 !important;
border:
1px solid
rgba(155, 96, 49, 0.45) !important;
background:
rgba(12, 8, 6, 0.75) !important;
color:
#e5c99d !important;
font-size: 27px !important;
line-height: 1 !important;
transform: none !important;
z-index: 1002 !important;
}
/* ======================================================
DESKTOP ACTIONS IM HEADER VERSTECKEN
====================================================== */
.site-header > .header-actions,
.site-header .header-inner > .header-actions {
display: none !important;
}
/* ======================================================
MOBILE NAVIGATION
====================================================== */
.site-header .main-navigation,
.site-header .main-nav {
position: absolute !important;
top: 68px !important;
left: 0 !important;
right: 0 !important;
display: none !important;
width: 100vw !important;
max-width: 100vw !important;
max-height:
calc(100dvh - 68px) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
margin: 0 !important;
padding:
12px
18px
24px !important;
transform: none !important;
background:
rgba(4, 3, 3, 0.995) !important;
border-bottom:
1px solid
rgba(143, 86, 42, 0.45) !important;
box-shadow:
0 22px 38px
rgba(0, 0, 0, 0.48) !important;
box-sizing: border-box !important;
z-index: 1001 !important;
}
.site-header .main-navigation.open,
.site-header .main-navigation.is-open,
.site-header .main-nav.open,
.site-header .main-nav.is-open {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
/* ======================================================
MOBILE NAV LINKS
====================================================== */
.site-header .main-navigation > a,
.site-header .main-nav > a {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 54px !important;
margin: 0 !important;
padding:
0
8px !important;
border-bottom:
1px solid
rgba(255, 255, 255, 0.055) !important;
font-size: 15px !important;
line-height: 1.2 !important;
letter-spacing:
0.08em !important;
white-space: normal !important;
box-sizing: border-box !important;
}
/* ======================================================
MOBILE LOGIN / WISHLIST
werden per JS in Navigation kopiert
====================================================== */
.mobile-header-actions {
display: grid !important;
grid-template-columns:
1fr
1fr !important;
gap: 10px !important;
width: 100% !important;
margin-top: 18px !important;
padding-top: 18px !important;
border-top:
1px solid
rgba(143, 86, 42, 0.35) !important;
}
.mobile-header-actions a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px !important;
padding:
8px
10px !important;
border:
1px solid
rgba(153, 91, 42, 0.65) !important;
background:
rgba(17, 11, 8, 0.86) !important;
color:
#e6cfaa !important;
text-align: center !important;
text-decoration: none !important;
font-size: 12px !important;
line-height: 1.35 !important;
letter-spacing:
0.075em !important;
text-transform:
uppercase !important;
white-space: normal !important;
box-sizing: border-box !important;
}
/* ======================================================
SEHR KLEINE HANDYS
====================================================== */
@media (max-width: 430px) {
.site-header .header-inner {
padding:
0
14px !important;
}
.site-header .brand,
.site-header a.brand {
font-size:
17px !important;
letter-spacing:
0.10em !important;
}
.mobile-header-actions {
grid-template-columns:
1fr !important;
}
}
}
/* YASHARIEL MOBILE HEADER FINAL END */
/* YASHARIEL MOBILE MENU CLEAN START */
@media (max-width: 1050px) {
/* ======================================================
GESCHLOSSEN:
wirklich NICHTS vom Menü darf sichtbar sein
====================================================== */
.site-header .main-navigation,
.site-header .main-nav {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
top: 68px !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* ======================================================
OFFEN
====================================================== */
.site-header .main-navigation.open,
.site-header .main-navigation.is-open,
.site-header .main-navigation[data-open="true"],
.site-header .main-nav.open,
.site-header .main-nav.is-open,
.site-header .main-nav[data-open="true"] {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
max-height: calc(100dvh - 68px) !important;
padding:
14px
20px
calc(26px + env(safe-area-inset-bottom))
!important;
overflow-y: auto !important;
overflow-x: hidden !important;
background:
linear-gradient(
180deg,
rgba(8, 6, 5, 0.995),
rgba(3, 3, 3, 0.995)
) !important;
border-top:
1px solid rgba(167, 105, 52, 0.28) !important;
border-bottom:
1px solid rgba(167, 105, 52, 0.42) !important;
box-shadow:
0 24px 50px rgba(0, 0, 0, 0.65)
!important;
box-sizing: border-box !important;
}
/* ======================================================
LINKS
====================================================== */
.site-header .main-navigation.open > a,
.site-header .main-navigation.is-open > a,
.site-header .main-navigation[data-open="true"] > a,
.site-header .main-nav.open > a,
.site-header .main-nav.is-open > a,
.site-header .main-nav[data-open="true"] > a {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
min-height: 51px !important;
margin: 0 !important;
padding:
0
10px !important;
color:
rgba(235, 220, 196, 0.90) !important;
font-size:
15px !important;
line-height:
1.2 !important;
letter-spacing:
0.10em !important;
text-align:
left !important;
text-decoration:
none !important;
border-bottom:
1px solid rgba(255, 255, 255, 0.055)
!important;
box-sizing:
border-box !important;
white-space:
normal !important;
}
/* Aktive Seite */
.site-header .main-navigation.open > a.active,
.site-header .main-navigation.open > a[aria-current="page"],
.site-header .main-navigation.is-open > a.active,
.site-header .main-navigation.is-open > a[aria-current="page"],
.site-header .main-nav.open > a.active,
.site-header .main-nav.open > a[aria-current="page"] {
color:
#e4b56f !important;
padding-left:
18px !important;
border-left:
2px solid #b8652b !important;
background:
linear-gradient(
90deg,
rgba(151, 74, 28, 0.12),
transparent
) !important;
}
/* ======================================================
LOGIN / WISHLIST
====================================================== */
.site-header .main-navigation:not(.open):not(.is-open):not([data-open="true"])
.mobile-header-actions,
.site-header .main-nav:not(.open):not(.is-open):not([data-open="true"])
.mobile-header-actions {
display: none !important;
}
.mobile-header-actions {
width: 100% !important;
display: grid !important;
grid-template-columns:
1fr
1fr !important;
gap: 10px !important;
margin:
18px
0
0 !important;
padding:
18px
0
0 !important;
border-top:
1px solid rgba(175, 108, 53, 0.30)
!important;
box-sizing:
border-box !important;
}
.mobile-header-actions a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px !important;
padding:
10px
8px !important;
color:
#e8d1ac !important;
background:
linear-gradient(
180deg,
rgba(26, 17, 12, 0.90),
rgba(10, 7, 5, 0.94)
) !important;
border:
1px solid rgba(171, 98, 42, 0.62)
!important;
font-size:
12px !important;
line-height:
1.3 !important;
letter-spacing:
0.08em !important;
text-align:
center !important;
text-decoration:
none !important;
box-sizing:
border-box !important;
}
.mobile-header-actions a:last-child {
border-color:
rgba(194, 84, 34, 0.82)
!important;
background:
linear-gradient(
180deg,
rgba(111, 38, 20, 0.48),
rgba(41, 16, 10, 0.78)
) !important;
}
/* ======================================================
HAMBURGER
====================================================== */
.site-header .menu-toggle {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
flex: 0 0 46px !important;
padding: 0 !important;
color:
#ddc49b !important;
background:
rgba(15, 10, 7, 0.80) !important;
border:
1px solid rgba(160, 96, 47, 0.58)
!important;
box-shadow:
inset 0 0 18px rgba(126, 71, 34, 0.07)
!important;
font-size:
0 !important;
}
/* Eigene 3 Linien */
.site-header .menu-toggle::before {
content: "" !important;
display: block !important;
width: 21px !important;
height: 14px !important;
background:
linear-gradient(
to bottom,
#ddc49b 0,
#ddc49b 2px,
transparent 2px,
transparent 6px,
#ddc49b 6px,
#ddc49b 8px,
transparent 8px,
transparent 12px,
#ddc49b 12px,
#ddc49b 14px
) !important;
}
/* ======================================================
KLEINES HANDY
====================================================== */
@media (max-width: 430px) {
.site-header .main-navigation.open,
.site-header .main-navigation.is-open,
.site-header .main-navigation[data-open="true"],
.site-header .main-nav.open,
.site-header .main-nav.is-open,
.site-header .main-nav[data-open="true"] {
padding-left:
15px !important;
padding-right:
15px !important;
}
.mobile-header-actions {
grid-template-columns:
1fr !important;
}
}
}
/* YASHARIEL MOBILE MENU CLEAN END */
/* YASHARIEL MOBILE ACTIONS DESKTOP HIDE START */
/* ==========================================================
GRUNDREGEL
Die für Mobile erzeugten Login/Wishlist-Kopien
dürfen auf Desktop NIEMALS sichtbar sein.
========================================================== */
.mobile-header-actions {
display: none !important;
}
/* ==========================================================
MOBILE
Nur wenn das Menü wirklich geöffnet ist,
erscheinen die mobilen Buttons.
========================================================== */
@media (max-width: 1050px) {
.site-header
.main-navigation.open
> .mobile-header-actions,
.site-header
.main-navigation.is-open
> .mobile-header-actions,
.site-header
.main-navigation[data-open="true"]
> .mobile-header-actions,
.site-header
.main-nav.open
> .mobile-header-actions,
.site-header
.main-nav.is-open
> .mobile-header-actions,
.site-header
.main-nav[data-open="true"]
> .mobile-header-actions {
display: grid !important;
}
/* geschlossen = garantiert unsichtbar */
.site-header
.main-navigation:not(.open):not(.is-open):not([data-open="true"])
> .mobile-header-actions,
.site-header
.main-nav:not(.open):not(.is-open):not([data-open="true"])
> .mobile-header-actions {
display: none !important;
}
}
/* ==========================================================
DESKTOP HARTE SICHERUNG
========================================================== */
@media (min-width: 1051px) {
.site-header .mobile-header-actions,
.main-navigation .mobile-header-actions,
.main-nav .mobile-header-actions {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
}
/* YASHARIEL MOBILE ACTIONS DESKTOP HIDE END */
/* YASHARIEL ALL PAGE MOBILE HEADER START */
/* ==========================================================
MOBILE HEADER
Gilt für ALLE normalen Website-Seiten.
========================================================== */
@media (max-width: 1050px) {
/* ======================================================
HEADER BASIS
====================================================== */
.site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 10000 !important;
background:
rgba(4, 3, 3, 0.985) !important;
border-bottom:
1px solid rgba(151, 92, 44, 0.35)
!important;
}
.site-header .header-inner {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: none !important;
min-height: 68px !important;
margin: 0 !important;
padding:
0
16px !important;
box-sizing: border-box !important;
}
/* ======================================================
YASHARIEL
====================================================== */
.site-header .brand,
.site-header a.brand {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
display: block !important;
max-width:
calc(100vw - 90px) !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* ======================================================
HAMBURGER
====================================================== */
.site-header .menu-toggle {
position: static !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 46px !important;
width: 46px !important;
height: 46px !important;
margin-left: auto !important;
padding: 0 !important;
transform: none !important;
border:
1px solid rgba(160, 96, 47, 0.58)
!important;
background:
rgba(15, 10, 7, 0.86) !important;
color:
#e1c79d !important;
z-index: 10002 !important;
}
/* ======================================================
ALTE DIREKTE DESKTOP-ACTIONS VERSTECKEN
Wichtig für Privacy / Legal / Cookie /
Accessibility / Contact usw.
Diese Seiten besitzen teilweise: