:root{
  color-scheme:dark;
  --bg:#050403;
  --panel:#0b0907;
  --line:#654322;
  --line-soft:#302117;
  --gold:#d3b27d;
  --text:#e8ddd0;
  --muted:#b5aa9c;
  --ember:#b63f22;
  --ember-bright:#ef6b2d;
  --shell:1540px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  background:radial-gradient(circle at 70% 6%,rgba(132,42,19,.09),transparent 34rem),var(--bg);
  color:var(--text);
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit}
.shell{width:min(var(--shell),calc(100% - 48px));margin-inline:auto}

.site-header{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--line-soft);
  background:rgba(4,4,3,.96);
  backdrop-filter:blur(12px);
}
.header-inner{min-height:66px;display:flex;align-items:center;gap:36px}
.brand{
  min-width:220px;
  color:#d4a669;
  font-size:23px;
  letter-spacing:.6px;
}
.main-nav{flex:1;display:flex;justify-content:center;gap:42px}
.main-nav a{
  position:relative;
  padding:22px 0 19px;
  color:#c8bcad;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.7px;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:0;
  height:2px;
  transform:translateX(-50%);
  background:var(--ember-bright);
  box-shadow:0 0 13px rgba(239,107,45,.65);
  transition:width .18s ease;
}
.main-nav a:hover,.main-nav a.active{color:#f0c27f}
.main-nav a:hover::after,.main-nav a.active::after{width:100%}
.wishlist-small{
  min-width:140px;
  padding:10px 18px;
  border:1px solid #8d552b;
  color:#e6c99a;
  text-align:center;
  text-transform:uppercase;
  font-size:12px;
}
.wishlist-small:hover{background:rgba(116,50,25,.18)}
.menu-toggle{
  display:none;
  margin-left:auto;
  border:0;
  background:none;
  color:var(--gold);
  font-size:24px;
}

.hero{
  position:relative;
  min-height:620px;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.hero-image{
  position:absolute;
  inset:0;
  background:url("../images/hero.png") center center/cover no-repeat;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,3,3,.97) 0%,rgba(3,3,3,.88) 23%,rgba(3,3,3,.43) 47%,rgba(3,3,3,.08) 72%),
    linear-gradient(0deg,rgba(4,3,2,.42),transparent 42%);
}
.hero-inner{
  position:relative;
  z-index:2;
  min-height:620px;
  display:flex;
  align-items:center;
}
.hero-copy{width:44%;padding:42px 0}
.eyebrow{
  display:block;
  color:#c9ad81;
  font-size:34px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:1px;
}
.hero h1{
  margin:4px 0 14px;
  color:#e6d7c0;
  font-size:clamp(62px,6.5vw,104px);
  font-weight:400;
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:1px;
}
.divider{
  width:260px;
  max-width:76%;
  height:1px;
  margin:20px 0;
  background:linear-gradient(90deg,#aa6b31,transparent);
}
.hero p{
  max-width:640px;
  margin:0;
  color:#c7bcad;
  font-size:16px;
}
.development-note{
  margin-top:15px !important;
  color:#a99d8f !important;
  font-size:14px !important;
}
.hero-actions{display:flex;gap:16px;margin-top:28px}
.button{
  min-width:220px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border:1px solid var(--line);
  background:rgba(8,7,6,.84);
  color:#e0c79f;
  text-transform:uppercase;
  font-size:13px;
  transition:.18s ease;
}
.button:hover{
  transform:translateY(-2px);
  border-color:#aa713e;
  background:#18100b;
}
.button.primary{
  border-color:#c1542d;
  background:linear-gradient(#963522,#651b13);
  color:#f2dfc4;
}

.classes-section{padding:30px 0 38px}
.section-heading{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:22px;
  margin-bottom:24px;
  text-align:center;
}
.section-heading>span{height:1px;background:linear-gradient(90deg,transparent,#6d4a2a)}
.section-heading>span:last-child{background:linear-gradient(90deg,#6d4a2a,transparent)}
.section-heading h2{
  margin:0;
  color:#d2b685;
  font-size:34px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:1px;
}
.section-heading p{margin:4px 0 0;color:#978e83;font-size:14px}
.section-heading.compact{margin-bottom:16px}

.class-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.class-card{
  overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(#0c0a08,#070605);
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.22);
  transition:.2s ease;
}
.class-card:hover{
  transform:translateY(-5px);
  border-color:#9a6a3b;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.22),0 18px 42px rgba(0,0,0,.35);
}
.class-art{aspect-ratio:4/4.5;overflow:hidden;background:#090807}
.class-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  transition:transform .32s ease;
}
.class-card:hover .class-art img{transform:scale(1.025)}
.class-content{
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:24px 25px 20px;
  border-top:1px solid #49331f;
  text-align:center;
}
.class-content h3{
  margin:0;
  color:#d4b887;
  font-size:28px;
  font-weight:400;
  text-transform:uppercase;
}
.class-content h4{
  margin:1px 0 14px;
  color:#9f8970;
  font-size:15px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:1px;
}
.class-content p{margin:0;color:#bcb1a4;font-size:14px}
.class-content a{
  margin-top:auto;
  padding-top:18px;
  color:#d69745;
  font-size:12px;
  text-transform:uppercase;
}

.pillars{padding:4px 0 38px}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pillar-grid article{
  min-height:180px;
  padding:24px;
  border:1px solid var(--line);
  background:radial-gradient(circle at 15% 20%,rgba(119,64,26,.12),transparent 15rem),var(--panel);
}
.pillar-icon{color:#d79847;font-size:30px}
.pillar-grid h3{
  margin:10px 0 8px;
  color:#d2b584;
  font-size:20px;
  font-weight:400;
  text-transform:uppercase;
}
.pillar-grid p{margin:0;color:#aaa094;font-size:14px}

.team-section{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  min-height:440px;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:#070605;
}
.team-image{overflow:hidden}
.team-image img{width:100%;height:100%;object-fit:cover}
.team-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:55px 65px;
  background:#080706;
}
.team-copy .eyebrow{font-size:22px}
.team-copy h2{
  margin:4px 0 0;
  color:#d7bd8e;
  font-size:44px;
  font-weight:400;
  text-transform:uppercase;
  line-height:1;
}
.team-copy>p{margin:0;color:#b7ab9d;font-size:15px}
.team-features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:28px;
}
.team-features div{
  padding:14px;
  border:1px solid #38271a;
  background:#0a0807;
}
.team-features strong{
  display:block;
  color:#d4a966;
  font-size:13px;
  text-transform:uppercase;
}
.team-features span{display:block;margin-top:3px;color:#8f877e;font-size:12px}

.updates{padding:22px 0}
.updates-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.updates h2{
  margin:0;
  color:#d1a962;
  font-size:27px;
  font-weight:400;
  text-transform:uppercase;
}
.updates p{margin:3px 0 0;color:#928a80;font-size:13px}
.newsletter{
  display:grid;
  grid-template-columns:1fr 150px;
  height:46px;
  border:1px solid #5c3d24;
}
.newsletter input{
  min-width:0;
  border:0;
  outline:0;
  padding:0 15px;
  background:#090807;
  color:#e4d6c5;
}
.newsletter button{
  border:0;
  border-left:1px solid #743b22;
  background:#571b12;
  color:#e1b377;
  text-transform:uppercase;
  cursor:pointer;
}
.newsletter button:hover{background:#762418}

.toast{
  position:fixed;
  left:50%;
  bottom:20px;
  z-index:100;
  transform:translate(-50%,14px);
  padding:11px 17px;
  border:1px solid #765034;
  background:rgba(8,7,6,.97);
  color:#eadcc9;
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.anchor{height:0;overflow:hidden}

@media(max-width:1100px){
  .wishlist-small{display:none}
  .main-nav{justify-content:flex-end;gap:26px}
  .hero-copy{width:54%}
}
@media(max-width:860px){
  .shell{width:calc(100% - 24px)}
  .menu-toggle{display:block}
  .main-nav{
    display:none;
    position:absolute;
    top:66px;
    left:0;
    right:0;
    flex-direction:column;
    gap:0;
    padding:10px 18px 18px;
    border-bottom:1px solid var(--line-soft);
    background:#080706;
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:13px 0}
  .hero{min-height:790px}
  .hero-overlay{
    background:
      linear-gradient(180deg,rgba(3,3,3,.97) 0%,rgba(3,3,3,.84) 42%,rgba(3,3,3,.23) 76%),
      linear-gradient(0deg,rgba(4,3,2,.45),transparent 45%);
  }
  .hero-inner{min-height:790px;align-items:flex-start}
  .hero-copy{width:100%;padding-top:44px}
  .class-grid{grid-template-columns:1fr}
  .class-art{aspect-ratio:16/10}
  .pillar-grid{grid-template-columns:1fr}
  .team-section{grid-template-columns:1fr}
  .team-image{min-height:390px}
  .updates-inner{grid-template-columns:1fr}
}
@media(max-width:560px){
  .brand{min-width:auto;font-size:20px}
  .hero h1{font-size:58px}
  .eyebrow{font-size:25px}
  .hero-actions{flex-direction:column}
  .button{width:100%}
  .team-copy{padding:38px 22px}
  .team-copy h2{font-size:34px}
  .team-features{grid-template-columns:1fr}
  .newsletter{grid-template-columns:1fr 115px}
}

/* =========================================================
   UNIFIED WEBSITE HEADER
   Logo left – navigation exactly centered – action right
   ========================================================= */

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  min-height: 74px !important;
  padding: 0 !important;
  border-bottom: 1px solid #332419 !important;
  background: rgba(4, 4, 3, 0.97) !important;
  backdrop-filter: blur(12px);
}

.site-header .page-width {
  width: min(1680px, calc(100% - 48px)) !important;
  margin-inline: auto !important;
}

.site-header .header-inner {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) !important;
  align-items: center !important;
  gap: 28px !important;
  min-height: 74px !important;
}

.site-header .brand {
  display: block !important;
  justify-self: start !important;
  width: auto !important;
  padding: 0 !important;
  color: #f0d6a5 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 2px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.site-header .main-navigation {
  position: static !important;
  display: flex !important;
  grid-column: 2 !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  gap: 42px !important;
  width: max-content !important;
  padding: 0 !important;
  background: transparent !important;
  transform: none !important;
}

.site-header .main-navigation a {
  position: relative !important;
  padding: 29px 0 25px !important;
  color: #d0c2b1 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.site-header .main-navigation a:hover,
.site-header .main-navigation a.active {
  color: #ffc471 !important;
}

.site-header .header-button {
  display: inline-block !important;
  grid-column: 3 !important;
  justify-self: end !important;
  padding: 14px 24px !important;
  border: 1px solid #934220 !important;
  color: #f1deca !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: 0.7px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.site-header .menu-toggle {
  display: none !important;
}

@media (max-width: 1180px) {
  .site-header .header-inner {
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) !important;
    gap: 20px !important;
  }

  .site-header .main-navigation {
    gap: 24px !important;
  }

  .site-header .main-navigation a {
    font-size: 12px !important;
  }

  .site-header .header-button {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 1050px) {
  .site-header .header-inner {
    position: relative !important;
    display: flex !important;
  }

  .site-header .brand {
    margin-right: auto !important;
    font-size: 23px !important;
  }

  .site-header .menu-toggle {
    display: block !important;
    order: 3 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #d4ae72 !important;
    font-size: 28px !important;
  }

  .site-header .header-button {
    display: none !important;
  }

  .site-header .main-navigation {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    display: none !important;
    width: 100% !important;
    padding: 10px 24px 18px !important;
    border-top: 1px solid #2c2018 !important;
    border-bottom: 1px solid #3a281b !important;
    background: rgba(4, 4, 3, 0.99) !important;
  }

  .site-header .main-navigation.open,
  .site-header .main-navigation.is-open {
    display: grid !important;
  }

  .site-header .main-navigation a {
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   END UNIFIED WEBSITE HEADER
   ========================================================= */


/* =========================================================
   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 GAME HERO CLEARANCE START */

@media (max-width: 860px) {

    .hero {

        min-height:
            max(790px, calc(100svh - 76px)) !important;
    }


    .hero-inner {

        min-height:
            max(790px, calc(100svh - 76px)) !important;

        align-items:
            flex-start !important;
    }


    .hero-copy {

        width:
            100% !important;

        /*
           Mehr Abstand nach oben, damit Eyebrow und Titel
           nicht optisch unter dem Header beginnen.
        */

        padding-top:
            64px !important;

        padding-bottom:
            44px !important;

        box-sizing:
            border-box !important;
    }

}


@media (max-width: 520px) {

    .hero-copy {

        padding-top:
            50px !important;
    }

}

/* YASHARIEL MOBILE GAME HERO CLEARANCE END */