/* FARMERS DREAM - style.css */
:root {
  --soil: #1a2e1a;
  --bark: #1e3a1e;
  --bark2: #162614;
  --wheat: #d4a847;
  --straw: #e8c96d;
  --sage: #6b8f5e;
  --meadow: #4a7c3f;
  --cream: #f5ead0;
  --fog: #ede0c4;
  --ks: #05ce78;
  --ksd: #028a50;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--soil); color: var(--cream); font-family: 'Raleway', sans-serif; line-height: 1.6; overflow-x: hidden; }
h1,h2,h3,h4 { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--wheat); }
.sec-label { font-size: .68rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--sage); margin-bottom: .8rem; display: block; }
.sec-title { font-size: clamp(2rem, 5vw, 3.4rem); color: var(--wheat); line-height: 1.15; margin-bottom: 1rem; }
.sec-body { color: rgba(245,234,208,.72); line-height: 1.8; font-size: .97rem; }
.sec { padding: 7rem 2rem; }
.inner { max-width: 1200px; margin: 0 auto; }
.divider { height: 1px; background: linear-gradient(to right, transparent, rgba(212,168,71,.2), transparent); }

/* NAV */
#mainNav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; height: 66px; background: rgba(12,22,12,.97); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212,168,71,.18); gap: .8rem; }
#mainNav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.4); }
.logo { text-decoration: none; display: flex; align-items: center; flex-shrink: 0; }
.logo-img { height: 44px; width: auto; }
.logo-text { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 900; color: var(--wheat); }
.nav-links { display: flex; align-items: center; gap: .15rem; list-style: none; }
.nav-links a { color: var(--fog); text-decoration: none; font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .42rem .7rem; border-radius: 3px; transition: color .2s, background .2s; white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; }
.nav-links a:hover { color: var(--wheat); background: rgba(212,168,71,.07); }
.dropdown { position: relative; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #0d1a0d; border: 1px solid rgba(212,168,71,.25); border-radius: 8px; min-width: 175px; padding: .5rem 0; box-shadow: 0 12px 40px rgba(0,0,0,.6); z-index: 9999; }
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu.open { display: block; }
.dropdown-menu a { display: block; padding: .55rem 1.2rem; font-size: .78rem; font-weight: 600; }
.dropdown-menu a:hover { background: rgba(212,168,71,.1); color: var(--wheat); }
.nav-ks { background: var(--ks) !important; color: #fff !important; padding: .42rem 1rem !important; border-radius: 4px; font-weight: 700 !important; }
.nav-ks:hover { background: var(--ksd) !important; }
.nav-store-btn { background: rgba(44,26,14,.6) !important; border: 1px solid rgba(212,168,71,.25) !important; color: rgba(245,234,208,.7) !important; padding: .38rem .8rem !important; border-radius: 4px !important; }
.nav-store-btn:hover { border-color: rgba(212,168,71,.55) !important; color: var(--wheat) !important; }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: .4rem; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--wheat); border-radius: 2px; transition: transform .3s, opacity .3s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
  
}

/* HERO */
#hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 8rem 2rem 6rem; }
.hero-parallax-bg { position: absolute; top: -15%; left: -5%; right: -5%; bottom: -15%; background: url('../assets/images/hero.jpg') center center / cover no-repeat; will-change: transform; z-index: 0; }
#hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,28,15,.35) 0%, rgba(15,28,15,.15) 40%, rgba(15,28,15,.45) 100%); z-index: 1; }
.hero-content { position: relative; z-index: 2; max-width: 860px; width: 100%; }
.hero-title { font-size: clamp(3.5rem, 10vw, 8.5rem); font-weight: 900; line-height: .95; color: var(--wheat); text-shadow: 0 2px 24px rgba(0,0,0,.55); animation: fadeUp .8s .1s ease both; }
.hero-title em { display: block; font-style: italic; color: var(--straw); font-size: .65em; }
.hero-sub { max-width: 560px; margin: 1.8rem auto 0; font-size: 1.05rem; line-height: 1.75; color: rgba(245,234,208,.92); animation: fadeUp .8s .25s ease both; }
.hero-ctas { margin-top: 2.5rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; animation: fadeUp .8s .4s ease both; }
.hero-badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--sage); border: 1px solid var(--sage); padding: .3rem .9rem; border-radius: 2px; margin-top: 1.8rem; animation: fadeUp .8s .55s ease both; }
.scroll-hint { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; color: rgba(245,234,208,.4); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; z-index: 2; }
.scroll-hint .arr { animation: bounce 1.6s infinite; }
.btn-p { background: var(--meadow); color: var(--cream); padding: .85rem 2.2rem; border: none; border-radius: 4px; font-family: 'Raleway', sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
.btn-p:hover { background: #3a6430; transform: translateY(-2px); }
.btn-o { background: transparent; color: var(--wheat); padding: .85rem 2.2rem; border: 1.5px solid var(--wheat); border-radius: 4px; font-family: 'Raleway', sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.btn-o:hover { background: var(--wheat); color: var(--soil); transform: translateY(-2px); }

/* JACK STORY */
/* removed - see design */
.jack-story-layout { display: grid; grid-template-columns: 260px 1fr; gap: 4rem; align-items: center; max-width: 1000px; margin: 0 auto; }
.jack-story-visual { display: flex; align-items: center; justify-content: center; }
.jack-story-emoji { font-size: 7rem; animation: float 4s ease-in-out infinite; }
.jack-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.jack-tag { background: rgba(107,143,94,.15); border: 1px solid rgba(107,143,94,.35); color: var(--sage); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .32rem .85rem; border-radius: 50px; }
@media (max-width: 720px) { .jack-story-layout { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .jack-tags { justify-content: center; } }

/* TRAILER */
#trailer { text-align: center; }
.trailer-frame { margin: 3rem auto 0; max-width: 900px; width: 100%; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.6); border: 1px solid rgba(212,168,71,.18); display: flex; align-items: center; justify-content: center; }
.trailer-placeholder { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.trailer-placeholder-text { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(245,234,208,.28); }
.play-btn { width: 68px; height: 68px; border-radius: 50%; background: rgba(212,168,71,.15); border: 2px solid rgba(212,168,71,.35); display: grid; place-items: center; font-size: 1.4rem; color: var(--wheat); cursor: pointer; }
.play-btn:hover { background: rgba(212,168,71,.28); }

/* GALLERY */
/* removed - see design */
.gallery-track-wrap { position: relative; margin-top: 3rem; overflow: hidden; }
.gallery-track { display: flex; transition: transform .5s ease; }
.gallery-slide { min-width: calc(33.333% - 1rem); margin-right: 1.5rem; aspect-ratio: 16/10; border-radius: 8px; background: linear-gradient(135deg, rgba(74,124,63,.18), rgba(44,26,14,.85)); border: 1px solid rgba(212,168,71,.14); display: grid; place-items: center; font-style: italic; color: rgba(212,168,71,.35); flex-shrink: 0; transition: border-color .25s; position: relative; overflow: hidden; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery-slide:hover { border-color: rgba(212,168,71,.4); }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
.g-btn { background: rgba(74,44,15,.8); border: 1px solid rgba(212,168,71,.25); color: var(--wheat); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 1.1rem; }
.g-btn:hover { border-color: var(--wheat); }
.gal-dots { display: flex; gap: .5rem; align-items: center; }
.gal-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(212,168,71,.3); border: 2px solid rgba(212,168,71,.45); cursor: pointer; padding: 0; display: inline-block; }
.gal-dot.active { background: var(--wheat); border-color: var(--wheat); }
@media (max-width: 700px) { .gallery-slide { min-width: 100%; } }

/* CHARACTERS */
/* removed - see design */
.chars-header { text-align: center; margin-bottom: 2rem; }

.char-quick-select::-webkit-scrollbar { display: none; }

.char-quick-btn span { font-size: .52rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(245,234,208,.4); }


.char-quick-btn.active span { color: var(--wheat); }


.char-card { min-width: 0 !important; box-sizing: border-box !important; display: grid; grid-template-columns: 240px 1fr; background: rgba(30,18,8,.75); flex-shrink: 0; min-height: 340px; }
.char-avatar { background: linear-gradient(160deg, rgba(107,143,94,.25), rgba(20,12,6,.9)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; border-right: 1px solid rgba(212,168,71,.15); position: relative; flex-shrink: 0; }
.char-avatar-line { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; }
.char-emoji { font-size: 5rem; margin-bottom: 1.2rem; }
.char-role { font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-align: center; }
.char-info { padding: 2.5rem 2.2rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.char-number { font-size: .62rem; font-weight: 700; letter-spacing: .24em; color: rgba(212,168,71,.4); text-transform: uppercase; margin-bottom: .6rem; }
.char-name { font-family: 'Playfair Display', serif; font-size: 2.6rem; font-weight: 900; color: var(--wheat); line-height: 1; margin-bottom: 1rem; }
.char-desc { font-size: .92rem; line-height: 1.85; color: rgba(245,234,208,.75); word-wrap: break-word; }
.char-tag { display: inline-block; align-self: flex-start; margin-top: 1.4rem; background: rgba(107,143,94,.18); border: 1px solid rgba(107,143,94,.4); color: var(--sage); font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .95rem; border-radius: 50px; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.8rem; }
.car-btn { background: rgba(74,44,15,.8); border: 1px solid rgba(212,168,71,.25); color: var(--wheat); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 1.1rem; }
.car-btn:hover { border-color: var(--wheat); }
.car-dots { display: flex; gap: .5rem; align-items: center; }
.car-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(212,168,71,.3); border: 2px solid rgba(212,168,71,.5); cursor: pointer; padding: 0; display: inline-block; transition: background .2s, transform .2s; }
.car-dot.active { background: var(--wheat); border-color: var(--wheat); transform: scale(1.2); }
@media (max-width: 768px) {
  .char-card { grid-template-columns: 1fr; min-height: auto; }
  .char-avatar { border-right: none; border-bottom: 1px solid rgba(212,168,71,.15); flex-direction: row; gap: 1rem; padding: 1.4rem; justify-content: flex-start; }
  .char-emoji { font-size: 3rem; margin-bottom: 0; }
  .char-info { padding: 1.4rem; }
  .char-name { font-size: 1.8rem; }
  .char-quick-btn span { display: none; }
}

/* SYSTEMS */
/* removed - see design */
.systems-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; margin-top: 3rem; align-items: start; }
.sys-list { display: flex; flex-direction: column; gap: .4rem; }
.sys-item { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.2rem; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: background .2s; font-size: .85rem; font-weight: 600; color: rgba(245,234,208,.55); }
.sys-item:hover { background: rgba(212,168,71,.06); color: rgba(245,234,208,.8); }
.sys-item.active { background: rgba(212,168,71,.1); border-color: rgba(212,168,71,.25); color: var(--wheat); }
.sys-item-icon { font-size: 1.3rem; }
.sys-panel { background: rgba(44,26,14,.55); border: 1px solid rgba(212,168,71,.15); border-radius: 12px; padding: 2.2rem; min-height: 200px; }
.sys-panel-title { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--wheat); margin-bottom: .8rem; }
.sys-panel-body { font-size: .9rem; color: rgba(245,234,208,.65); line-height: 1.8; }
.sys-video-wrap { margin-top: 1.5rem; }
.sys-video-wrap iframe { width: 100%; aspect-ratio: 16/9; border-radius: 8px; border: none; display: block; }
@media (max-width: 700px) { .systems-layout { grid-template-columns: 1fr; } }

/* MAPS */
/* removed - see design */
.maps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.map-card { border-radius: 10px; overflow: hidden; border: 1px solid rgba(212,168,71,.15); transition: border-color .25s, transform .25s; display: flex; flex-direction: column; height: 100%; }
.map-card:hover { border-color: rgba(212,168,71,.4); transform: translateY(-4px); }
/* old map-img removed */
.map-farm { background: linear-gradient(135deg, #2a5a1a, #1a3a10); }
.map-cave { background: linear-gradient(135deg, #1a1a2e, #0d0d1a); }
.map-city { background: linear-gradient(135deg, #2e2a1a, #1a1810); }
.map-label { font-size: 3rem; }
.map-body { background: rgba(20,36,16,.88); padding: 1.4rem; flex: 1; display: grid; grid-template-rows: auto 1fr auto auto; gap: 0; }
.map-name { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--straw); margin-bottom: .5rem; }
.map-desc { font-size: .84rem; color: rgba(245,234,208,.6); line-height: 1.7; }
.map-badge { display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 3px; margin-top: .9rem; align-self: flex-start; }
.badge-live { background: rgba(74,124,63,.3); color: var(--sage); border: 1px solid rgba(107,143,94,.4); }
.badge-soon { background: rgba(212,168,71,.12); color: var(--wheat); border: 1px solid rgba(212,168,71,.25); }
.map-chars { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(212,168,71,.1); }
.map-chars-label { font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,234,208,.3); margin-bottom: .6rem; display: block; }
.map-char-avatars { display: flex; flex-wrap: wrap; gap: .5rem; }
.map-char-avatar { display: flex; flex-direction: column; align-items: center; gap: .2rem; cursor: pointer; }
.map-char-avatar span:first-child { width: 38px; height: 38px; border-radius: 50%; background: rgba(44,26,14,.8); border: 1.5px solid rgba(212,168,71,.2); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; transition: border-color .2s; }
.map-char-avatar:hover span:first-child { border-color: var(--wheat); }
.map-char-avatar p { font-size: .52rem; color: rgba(245,234,208,.4); text-align: center; font-weight: 600; text-transform: uppercase; }
.map-char-secret span { border-color: rgba(212,168,71,.1) !important; }
.map-char-secret p { color: rgba(212,168,71,.3) !important; font-style: italic; }
.char-silhouette { width: 38px !important; height: 38px !important; padding: 4px; }
.char-silhouette svg { width: 100%; height: 100%; }
@media (max-width: 768px) { .maps-grid { grid-template-columns: 1fr; } }

/* ANIMALS */
/* removed - see design */
.animal-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-top: 2rem; }
.animal-visual { background: linear-gradient(135deg, rgba(74,124,63,.15), rgba(44,26,14,.8)); border: 1px solid rgba(212,168,71,.14); border-radius: 10px; aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.animal-emoji { font-size: 5rem; }
.animal-ph-label { font-size: .68rem; letter-spacing: .15em; color: rgba(245,234,208,.25); text-transform: uppercase; }
.animal-stats { display: flex; gap: 2rem; margin-top: 1.8rem; flex-wrap: wrap; }
.a-stat { text-align: center; }
.a-stat-num { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 900; color: var(--wheat); }
.a-stat-label { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,234,208,.35); }
@media (max-width: 700px) { .animal-layout { grid-template-columns: 1fr; } }

/* NEWS */
/* removed - see design */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.news-card { background: rgba(44,26,14,.5); border: 1px solid rgba(212,168,71,.14); border-radius: 10px; padding: 1.6rem; transition: border-color .25s, transform .25s; display: flex; flex-direction: column; }
.news-card:hover { border-color: rgba(212,168,71,.38); transform: translateY(-3px); }
.news-date { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(245,234,208,.35); margin-bottom: .6rem; }
.news-headline { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--straw); line-height: 1.3; margin-bottom: .7rem; }
.news-excerpt { font-size: .82rem; color: rgba(245,234,208,.55); line-height: 1.7; flex: 1; }
.news-link { display: inline-block; margin-top: 1rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); text-decoration: none; }
.news-link:hover { color: var(--wheat); }
.load-more-wrap { text-align: center; margin-top: 2.5rem; }
.btn-loadmore { background: transparent; border: 1px solid rgba(212,168,71,.3); color: rgba(245,234,208,.5); padding: .7rem 2rem; border-radius: 4px; font-family: 'Raleway', sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.btn-loadmore:hover { border-color: var(--wheat); color: var(--wheat); }
@media (max-width: 700px) { .news-grid { grid-template-columns: 1fr; } }

/* MEDIA */
/* removed - see design */
.media-tabs { display: flex; gap: .8rem; margin-top: 2rem; margin-bottom: 1.5rem; flex-wrap: wrap; justify-content: center; }
.media-tab { background: rgba(44,26,14,.5); border: 1px solid rgba(212,168,71,.2); color: rgba(245,234,208,.5); padding: .6rem 1.4rem; border-radius: 4px; font-family: 'Raleway', sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.media-tab.active { background: rgba(212,168,71,.15); border-color: var(--wheat); color: var(--wheat); }
.media-panel { display: none; }
.media-panel.active { display: block; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: .5rem; }
.media-grid-mobile { grid-template-columns: repeat(3, 1fr); }
.media-card { background: rgba(44,26,14,.45); border: 1px solid rgba(212,168,71,.14); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s, transform .25s; }
.media-card:hover { border-color: rgba(212,168,71,.4); transform: translateY(-3px); }
.media-thumb-wrap { flex: 1; overflow: hidden; }
.media-ph { aspect-ratio: 16/9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; background: linear-gradient(135deg, rgba(74,124,63,.18), rgba(44,26,14,.85)); font-size: 2rem; color: rgba(245,234,208,.2); }
.media-ph span { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(245,234,208,.22); font-family: 'Raleway', sans-serif; }
.media-ph-mobile { aspect-ratio: 16/9 !important; }
.media-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-dl-btn { display: block; width: 100%; padding: .65rem 1rem; background: transparent; border: none; border-top: 1px solid rgba(212,168,71,.2); color: var(--wheat); font-family: 'Raleway', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; text-align: center; transition: background .2s, color .2s; }
.media-dl-btn:hover { background: rgba(212,168,71,.12); color: #fff; }
.media-thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, rgba(74,124,63,.18), rgba(44,26,14,.85)); border: 1px solid rgba(212,168,71,.12); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .72rem; color: rgba(245,234,208,.25); }
.media-thumb.media-phone { aspect-ratio: 9/16; }
@media (max-width: 768px) { .media-grid { grid-template-columns: 1fr; } .media-grid-mobile { grid-template-columns: repeat(2,1fr); } }

/* NEWSLETTER */
#newsletter { background: var(--bark2); text-align: center; padding: 7rem 2rem; }
.nl-form { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.nl-input { background: rgba(44,26,14,.7); border: 1px solid rgba(212,168,71,.2); border-radius: 4px; color: var(--cream); font-family: 'Raleway', sans-serif; font-size: .88rem; padding: .75rem 1.2rem; outline: none; width: min(340px, 100%); }
.nl-input::placeholder { color: rgba(245,234,208,.3); }
.nl-input:focus { border-color: var(--wheat); }
.nl-btn { background: var(--meadow); color: var(--cream); border: none; border-radius: 4px; padding: .75rem 1.8rem; font-family: 'Raleway', sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.nl-btn:hover { background: #3a6430; }
.nl-note { margin-top: .9rem; font-size: .72rem; color: rgba(245,234,208,.35); }
.nl-formspree-hint { margin-top: .6rem; font-size: .68rem; color: rgba(245,234,208,.25); }

/* FOOTER */
#site-footer {
  background-color: #F5ECDF;
  border-top: 3px solid rgba(139,90,43,0.45);
  padding: 40px 20px;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  color: #3a2410;
  box-shadow: inset 0 4px 20px rgba(139,90,43,0.08);
}
.footer-inner { max-width: 900px; margin: 0 auto; }
.footer-links-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; margin-bottom: 20px; font-size: 14px; font-weight: 600; }
.footer-links-row a { color: rgba(58,36,16,.75); text-decoration: none; }
.footer-links-row a:hover { color: #7a5c2e; }
.footer-sep { color: rgba(58,36,16,.25); }
.footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0; }
.social-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(139,90,43,.12); border: 1px solid rgba(139,90,43,.258,71,.2); color: rgba(237,224,196,.6); padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 700; text-decoration: none; letter-spacing: .08em; text-transform: uppercase; }
.social-btn:hover { color: #d4a847; border-color: rgba(212,168,71,.5); }
.lang-switcher { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.lang-label { font-size: 12px; color: rgba(237,224,196,.35); }
.lang-btn { background: transparent; border: 1px solid rgba(212,168,71,.2); color: rgba(237,224,196,.5); padding: 4px 10px; border-radius: 3px; font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer; }
.lang-btn:hover { border-color: rgba(212,168,71,.4); color: #ede0c4; }
.lang-btn.active { border-color: #d4a847; color: #d4a847; }
.footer-studio { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 8px; }
.studio-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(237,224,196,.3); }
.studio-logo { height: 30px; width: auto; opacity: .65; filter: brightness(1.4); }
.footer-copy { margin-top: 12px; font-size: 11px; color: rgba(237,224,196,.3); }

/* MUSIC */
.music-toggle { position: fixed; bottom: 2rem; right: 1.5rem; z-index: 150; display: flex; flex-direction: column; align-items: center; gap: .2rem; background: rgba(44,26,14,.9); border: 1px solid rgba(212,168,71,.25); color: var(--wheat); border-radius: 50px; padding: .55rem .9rem; cursor: pointer; font-family: 'Raleway', sans-serif; font-size: .55rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.music-toggle:hover { border-color: var(--wheat); }
.music-icon { font-size: 1.2rem; line-height: 1; }
.music-toggle.playing { border-color: var(--sage); }

/* NEWS CAT BADGES */
.news-cat-tag { display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .65rem; border-radius: 3px; }
.cat-update { background: rgba(74,124,63,.38); color: #d4f0c4; border: 1px solid rgba(107,143,94,.55); }
.cat-devdiary { background: rgba(90,60,140,.25); color: #b09be8; border: 1px solid rgba(90,60,140,.35); }
.cat-patch { background: rgba(224,123,57,.15); color: #e07b39; }
.cat-hotfix { background: rgba(201,127,184,.15); color: #c97fb8; }
.cat-balance { background: rgba(91,163,201,.15); color: #5ba3c9; }
.cat-event { background: rgba(212,168,71,.15); color: var(--wheat); }
.cat-story { background: rgba(143,184,216,.15); color: #8fb8d8; }

/* ARTICLE MODAL */
.article-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,18,10,.88); z-index: 600; overflow-y: auto; padding: 2rem 1rem; }
.article-modal-overlay.open { display: flex; align-items: flex-start; justify-content: center; }
.article-modal { background: var(--bark); border: 1px solid rgba(212,168,71,.2); border-radius: 14px; max-width: 780px; width: 100%; margin: auto; overflow: hidden; }
.article-modal-header { position: relative; padding: 2rem 2.2rem 1.4rem; border-bottom: 1px solid rgba(212,168,71,.12); }
.article-modal-close { position: absolute; top: 1.2rem; right: 1.2rem; background: rgba(44,26,14,.8); border: 1px solid rgba(212,168,71,.25); color: var(--wheat); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 1.1rem; }
.article-modal-meta { display: flex; gap: .8rem; align-items: center; margin-bottom: .8rem; flex-wrap: wrap; }
.article-modal-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; color: var(--wheat); line-height: 1.2; padding-right: 3rem; }
.article-modal-body { padding: 2rem 2.2rem 2.4rem; font-size: .93rem; line-height: 1.9; color: rgba(245,234,208,.75); }
.article-modal-body p { margin-bottom: 1rem; }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* MOBILE */
@media (max-width: 640px) {
  .sec { padding: 5rem 1.2rem; }
  .music-toggle { bottom: 1.2rem; right: 1rem; }
  .nl-form { flex-direction: column; align-items: center; }
  .nl-input { width: 100%; }
  .footer-links-row { font-size: 12px; }
}

/* BACK BUTTON */
.back-btn-hero {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(74,124,63,.2);
  border: 1px solid rgba(107,143,94,.5);
  color: var(--cream);
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .6rem 1.3rem;
  border-radius: 50px;
  margin-top: 1.4rem;
  transition: background .2s, border-color .2s, transform .2s;
}
.back-btn-hero:hover {
  background: rgba(74,124,63,.4);
  border-color: var(--sage);
  transform: translateX(-3px);
}

/* MEDIA SECTION */
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.5rem; }
.media-grid-mobile { grid-template-columns: repeat(3, 1fr); }
.media-card { background: rgba(44,26,14,.45); border: 1px solid rgba(212,168,71,.14); border-radius: 8px; overflow: hidden; transition: border-color .25s, transform .25s; display: flex; flex-direction: column; }
.media-card:hover { border-color: rgba(212,168,71,.4); transform: translateY(-3px); }
.media-thumb-wrap { flex: 1; overflow: hidden; }
.media-ph { aspect-ratio: 16/9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; background: linear-gradient(135deg, rgba(74,124,63,.18), rgba(44,26,14,.85)); font-size: 2rem; color: rgba(245,234,208,.2); width: 100%; }
.media-ph span { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(245,234,208,.2); }
.media-ph-mobile { aspect-ratio: 16/9 !important; }
.media-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-dl-btn { display: block; width: 100%; padding: .65rem 1.2rem; background: var(--meadow); color: var(--cream); border: none; border-top: 1px solid rgba(212,168,71,.1); font-family: 'Raleway', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; text-align: center; transition: background .2s; }
.media-dl-btn:hover { background: #3a6430; }
@media (max-width: 700px) { .media-grid { grid-template-columns: repeat(2,1fr); } }


/* GALLERY CAROUSEL */
/* ── PALIA-STYLE SCREENSHOT GALLERY ── */
.gal-carousel-wrap { position:relative; display:flex; align-items:center; justify-content:center; gap:0; margin-top:2.5rem; overflow:hidden; padding:1.5rem 0; }
.gal-track-outer { flex:1; overflow:hidden; position:relative; }
.gal-track { display:flex; transition:transform .45s cubic-bezier(.25,.46,.45,.94); align-items:center; }
/* All slides same base width */
.gal-slide { padding:0 .6rem; box-sizing:border-box; cursor:pointer; position:relative; flex-shrink:0; transition:transform .45s, opacity .45s; opacity:.55; transform:scale(.88); }
.gal-slide.gal-center { opacity:1; transform:scale(1.0); z-index:2; }
.gal-slide:hover .gal-hover-overlay { opacity:1; }
.gal-ph { width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:2px solid rgba(212,168,71,.1); background:linear-gradient(135deg,rgba(74,124,63,.2),rgba(44,26,14,.85)); position:relative; transition:border-color .25s; }
.gal-slide.gal-center .gal-ph { border-color:rgba(212,168,71,.45); box-shadow:0 8px 40px rgba(0,0,0,.6); }
.gal-ph img { width:100%; height:100%; object-fit:cover; display:block; }
.gal-ph-inner { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; }
.gal-ph-inner span { font-size:2.8rem; opacity:.35; }
.gal-ph-inner p { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,234,208,.25); }
.gal-hover-overlay { position:absolute; inset:0; border-radius:14px; background:rgba(10,18,10,.55); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s; }
.gal-hover-overlay span { font-family:'Raleway',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#d4a847; border:1px solid rgba(212,168,71,.4); padding:.45rem 1.1rem; border-radius:50px; }
/* Arrows: positioned over the gap between side and center slides */
.gal-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:44px; height:44px; border-radius:50%; background:rgba(107,143,94,.85); border:2px solid rgba(212,168,71,.5); color:#fff; font-size:1.1rem; cursor:pointer; display:grid; place-items:center; transition:border-color .2s,background .2s; flex-shrink:0; }
.gal-arrow-left  { left:calc(33.333% - 22px); }
.gal-arrow-right { right:calc(33.333% - 22px); }
.gal-arrow:hover { background:rgba(74,124,63,.95); border-color:#d4a847; }
.gal-counter { text-align:center; margin-top:.8rem; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,234,208,.3); }
@media(max-width:700px) {
  .gal-slide.gal-center { transform:scale(1.0); }
  .gal-arrow-left  { left:4px; }
  .gal-arrow-right { right:4px; }
  .gal-hover-overlay { display:none !important; }
}

/* CHAR QUICK-SELECT — bigger round buttons below carousel */

.char-quick-select::-webkit-scrollbar { display:none; }

.char-quick-btn span { display:none !important; }



/* MEDIA TYPE BADGES */
.media-ph { position: relative; }
.media-type-badge {
  position: absolute;
  top: .5rem; left: .5rem;
  font-size: .58rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .22rem .65rem; border-radius: 50px;
  z-index: 2;
}
.badge-video  { background: rgba(201,127,184,.9); color: #fff; }
.badge-pc     { background: rgba(91,163,201,.9);  color: #fff; }
.badge-mobile { background: rgba(74,124,63,.9);   color: #fff; }
.media-ph-icon { font-size: 2.2rem; opacity: .3; }
.media-card-mobile .media-ph { aspect-ratio: 16/9 !important; }
.media-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: 1.5rem; }
.media-grid-mobile { grid-template-columns: repeat(3,1fr); }
.media-card { background: rgba(44,26,14,.45); border: 1px solid rgba(212,168,71,.14); border-radius: 8px; overflow: hidden; transition: border-color .25s, transform .25s; }
.media-card:hover { border-color: rgba(212,168,71,.4); transform: translateY(-3px); }
.media-ph { aspect-ratio: 16/9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; background: linear-gradient(135deg, rgba(74,124,63,.18), rgba(44,26,14,.85)); font-size: .68rem; color: rgba(245,234,208,.25); }
.media-ph span:not(.media-type-badge) { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.media-ph-mobile { aspect-ratio: 16/9 !important; }
.media-dl-btn { width: 100%; padding: .6rem; background: rgba(74,124,63,.2); border: none; border-top: 1px solid rgba(212,168,71,.1); color: rgba(245,234,208,.7); font-family: 'Raleway',sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.media-dl-btn:hover { background: rgba(74,124,63,.45); color: #d4a847; }
@media(max-width:700px) { .media-grid { grid-template-columns: repeat(2,1fr); } .media-grid-mobile { grid-template-columns: repeat(2,1fr); } }

/* CAROUSEL SYMMETRY */

.carousel-controls {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.2rem !important;
  margin-top: 1.8rem !important;
}
.carousel-controls > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  width: 100% !important;
}

/* CHAR CONTROLS ROW — perfectly centered */






/* CHARACTER SECTION — centering fix */

#characters-section 
#characters-section 
#characters-section 


/* MEDIA — uniform 16:9 for ALL cards */
.media-ph,
.media-ph-mobile { aspect-ratio: 16/9 !important; }
.media-card-mobile { width: 100%; }
.media-grid, .media-grid-mobile { grid-template-columns: repeat(3,1fr) !important; }

/* ═══ FARMER/ADVENTURE REDESIGN ═══ */

/* Footer — see updated rules at end of file */

/* Social buttons — round icon-only, light footer */
.footer-social {
  display: flex !important;
  justify-content: center !important;
  gap: .8rem !important;
  margin-bottom: 1.4rem !important;
}
.social-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(139,90,43,.12) !important;
  border: 1.5px solid rgba(139,90,43,.3) !important;
  color: rgba(58,36,16,.7) !important;
  padding: 0 !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background .2s, border-color .2s, transform .15s !important;
}
.social-btn svg { width: 17px !important; height: 17px !important; flex-shrink: 0 !important; }
.social-btn:hover {
  background: rgba(139,90,43,.22) !important;
  border-color: rgba(139,90,43,.6) !important;
  color: #5a3010 !important;
  transform: translateY(-2px) scale(1.08) !important;
}

/* Section titles — centered */
.sec-title { text-align: center !important; }
.sec-label { text-align: center !important; display: block !important; }
.sec-body  { text-align: center !important; max-width: 680px !important; margin-left: auto !important; margin-right: auto !important; }

/* Adventure/Farmer texture on hero */
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(212,168,71,.08) 0%, transparent 65%);
  z-index: 1;
  pointer-events: none;
}

/* Section dividers — more earthy */
.divider {
  height: 2px !important;
  background: linear-gradient(to right, transparent, rgba(139,105,20,.35), rgba(212,168,71,.2), rgba(139,105,20,.35), transparent) !important;
}

/* Carousel — perfect centering fix */

#characters-section .chars-header { width: 100%; text-align: center; }






/* ═══ CAROUSEL — CLEAN CONSOLIDATED ═══ */
.carousel-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.carousel-outer {
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(212,168,71,.2);
}
.carousel-track {
  display: flex;
  width: 100%;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
}
.char-card {
  min-width: 100%;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 240px 1fr;
  background: rgba(30,18,8,.75);
  flex-shrink: 0;
  min-height: 340px;
}
.char-controls-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.6rem;
  padding: 0;
}
.char-quick-select {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.char-quick-select::-webkit-scrollbar { display: none; }
.char-quick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(44,26,14,.55);
  border: 2.5px solid rgba(212,168,71,.25);
  font-size: 1.6rem;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: border-color .2s, transform .15s, background .2s;
  line-height: 1;
}
.char-quick-btn:hover {
  border-color: rgba(212,168,71,.55);
  transform: scale(1.1);
}
.char-quick-btn.active {
  border-color: #d4a847;
  background: rgba(212,168,71,.2);
  box-shadow: 0 0 0 3px rgba(212,168,71,.1);
}
@media (max-width: 768px) {
  .char-card { grid-template-columns: 1fr; min-height: auto; }
  .char-avatar { border-right: none; border-bottom: 1px solid rgba(212,168,71,.15); flex-direction: row; gap: 1rem; padding: 1.4rem; justify-content: flex-start; }
  .char-emoji { font-size: 3rem; margin-bottom: 0; }
  .char-info { padding: 1.4rem; }
  .char-name { font-size: 1.8rem; }
}

.media-more-hidden { display: none !important; }

/* ═══ FARM THEME ENHANCEMENTS ═══ */

/* Jack section - left aligned (override global center) */
.jack-text { text-align: left !important; }
.jack-p { text-align: left !important; }
#jack-story .sec-title { text-align: center !important; }
#jack-story .sec-label { text-align: center !important; }
#jack-story .sec-body  { text-align: center !important; max-width: 680px !important; margin-left: auto !important; margin-right: auto !important; }

/* Section backgrounds - earthy alternating */
#jack-story { background: linear-gradient(180deg, rgba(26,14,4,.0) 0%, rgba(20,10,4,.3) 100%); }
#systems    { background: linear-gradient(180deg, rgba(10,18,8,.4) 0%, rgba(8,16,6,.6) 100%); }
#maps       { background: linear-gradient(180deg, rgba(20,10,4,.3) 0%, rgba(26,14,4,.5) 100%); }
#news       { background: linear-gradient(180deg, rgba(8,16,6,.4) 0%, rgba(10,20,8,.6) 100%); }

/* Farm-style section decorators */
.sec::before {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #4a7c3f, #d4a847, #4a7c3f);
  margin: 0 auto 1.5rem;
  border-radius: 2px;
  opacity: .6;
}
/* green bar stays centered in jack section (default) */

/* Hero - stronger farm atmosphere */
.hero-title { text-shadow: 0 2px 30px rgba(0,0,0,.8), 0 0 60px rgba(212,168,71,.15); }
.hero-sub    { text-shadow: 0 1px 10px rgba(0,0,0,.6); }

/* Sys items - more rustic */
.sys-item {
  border-left: 3px solid transparent;
  transition: border-color .2s, background .2s, padding-left .2s;
}
.sys-item:hover   { border-left-color: rgba(212,168,71,.4); }
.sys-item.active  { border-left-color: #d4a847 !important; }

/* News cards - earthy feel */
.news-card-full, .news-featured {
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

/* Chars section - farm warm feel */
#characters-section {
  background: linear-gradient(180deg, rgba(22,12,4,.5) 0%, rgba(16,8,2,.7) 100%);
}

/* Footer farm grass line */
#site-footer::before {
  content: '';
  display: block;
  position: absolute;
  top: -4px; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right, #2a4a1e, #4a7c3f, #6b8f5e, #4a7c3f, #2a4a1e);
}

/* Btn loadmore centered */
.btn-loadmore {
  display: block;
  margin: 1.5rem auto 0;
}

/* Media grid uniform */
.media-ph { aspect-ratio: 16/9 !important; }



/* ================================================================
   FARMERS DREAM — FARM DESIGN SYSTEM v1.0
   Einheitlich auf allen Seiten
   Palette: Waldgrün · Holzbraun · Weizenfeld-Gold · Erd-Creme
   ================================================================ */

/* ----------------------------------------------------------------
   1. CSS VARIABLEN — Das Farm-Farbsystem
   ---------------------------------------------------------------- */
:root {
  /* Grün-Palette */
  --gruen-tief:    #1a2e12;   /* Tiefer Wald — Hintergrund */
  --gruen-dunkel:  #243a18;   /* Dunkles Grün — Navbar, Footer */
  --gruen-mid:     #2d4a1e;   /* Mittleres Grün — Panels, Sektionen */
  --gruen-hell:    #3d6028;   /* Helles Grün — Hover, Akzente */
  --gruen-salbei:  #5a8a3a;   /* Salbeigrün — Labels, Badges */
  --gruen-frisch:  #7ab060;   /* Frisches Grün — Highlights */
  --gruen-gras:    #a0d070;   /* Grasgrün — Erfolg, Aktiv */

  /* Holz & Erde */
  --holz-tief:     #2c1a08;   /* Dunkles Holz — Footer, Trennlinien */
  --holz-mid:      #4a2c10;   /* Holzbraun — Feature-Streifen */
  --holz-hell:     #7a4a28;   /* Helles Holz — Rahmen */
  --erde:          #8b5e3c;   /* Erde — Akzente */

  /* Gold & Weizen */
  --gold:          #d4a847;   /* Hauptgold — Überschriften, CTAs */
  --gold-hell:     #e8c068;   /* Helles Gold — Hover */
  --gold-sonne:    #f5d878;   /* Sonnen-Gold — Highlights */
  --weizen-creme:  #f5ead0;   /* Weizen-Creme — Haupttext */
  --creme-hell:    #faf4e8;   /* Helle Creme — Karten-BG */

  /* Abenteuer-Orange */
  --adventure:     #c8702a;   /* CTA-Buttons, Links */
  --adventure-d:   #9a5018;   /* Hover */
  --adventure-l:   #e09050;   /* Akzent-Leuchten */

  /* Himmel */
  --himmel:        #5a9ec8;   /* Himmelsblau — Hero-Gradient */
  --himmel-hell:   #90c8e8;   /* Heller Himmel */

  /* Text */
  --text-haupt:    #f5ead0;
  --text-gedaempt: rgba(245,234,208,.65);
  --text-hint:     rgba(245,234,208,.35);

  /* Borders */
  --border-gold:   rgba(212,168,71,.15);
  --border-gruen:  rgba(90,138,58,.2);
  --border-holz:   rgba(122,74,40,.3);
}

/* ----------------------------------------------------------------
   2. BASE — Alles auf Farm getrimmt
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: #1a2e1a !important;
  color: var(--text-haupt) !important;
  font-family: 'Raleway', sans-serif !important;
  line-height: 1.65 !important;
  overflow-x: hidden !important;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif !important;
  color: var(--gold) !important;
  line-height: 1.15 !important;
}

/* ----------------------------------------------------------------
   3. NAVIGATION — Holzbalken mit Goldakzent
   ---------------------------------------------------------------- */
#mainNav {
  background: rgba(26,46,18,.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 2px solid var(--holz-hell) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.3) !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 200 !important;
  height: 66px !important;
}

/* Holzmaserung-Effekt auf Nav */
#mainNav::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent, transparent 80px,
    rgba(255,255,255,.012) 80px, rgba(255,255,255,.012) 81px);
  pointer-events: none;
  z-index: 0;
}

/* Goldener Akzentstreifen unten */
#mainNav::before {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--holz-hell) 20%,
    var(--gold) 50%,
    var(--holz-hell) 80%, transparent);
  z-index: 1;
}

.logo-text {
  color: var(--gold) !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* Nav Links */
.nav-links li a, .nav-links a {
  color: var(--text-gedaempt) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  transition: color .2s !important;
  position: relative !important;
}
.nav-links li a:hover, .nav-links a:hover {
  color: var(--gold) !important;
}
.nav-links li a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .2s;
}
.nav-links li a:hover::after { transform: scaleX(1); }

/* Dropdown */
.dropdown-menu {
  background: rgba(26,46,18,.98) !important;
  border: 1px solid var(--border-gold) !important;
  border-top: 2px solid var(--gold) !important;
}
.dropdown-menu a {
  color: var(--text-gedaempt) !important;
}
.dropdown-menu a:hover {
  background: rgba(212,168,71,.08) !important;
  color: var(--gold) !important;
}

/* Kickstarter Button */
.nav-ks {
  background: linear-gradient(135deg, var(--adventure), var(--adventure-d)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(200,112,42,.35) !important;
}
.nav-ks:hover {
  background: linear-gradient(135deg, var(--adventure-l), var(--adventure)) !important;
}

/* Steam/Epic */
.nav-store-btn {
  background: rgba(212,168,71,.1) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(212,168,71,.2) !important;
}
.nav-store-btn:hover {
  background: rgba(212,168,71,.18) !important;
}

/* ----------------------------------------------------------------
   4. HERO — Sonnenaufgang über dem Weizenfeld
   ---------------------------------------------------------------- */
#hero {
  background: linear-gradient(180deg,
    #4a8cbc 0%,
    #78b8d8 10%,
    #b8d8f0 20%,
    #e8e0a0 36%,
    #e0cc70 48%,
    #d4a840 58%,
    #b88030 68%,
    #7a5020 80%,
    var(--gruen-tief) 100%
  ) !important;
  min-height: 100vh !important;
  position: relative !important;
  overflow: hidden !important;
}

/* hero::before removed - keeping original */

/* hero::after removed - keeping original */

.hero-content, .hero-content * { position: relative; z-index: 3; }

.hero-title {
  font-size: clamp(2.5rem, 8vw, 5rem) !important;
  color: #2c1a08 !important;
  text-shadow: 1px 3px 0 rgba(255,255,255,.18), 0 1px 20px rgba(255,255,255,.08) !important;
}
.hero-title em { color: #5a3418 !important; font-style: italic !important; }

.hero-sub {
  color: rgba(44,26,8,.72) !important;
  background: rgba(255,255,255,.42) !important;
  backdrop-filter: blur(4px) !important;
  padding: .7rem 1.4rem !important;
  border-radius: 22px !important;
  display: inline-block !important;
  max-width: 480px !important;
}

.hero-badge, [data-i18n="hero-badge"] {
  background: rgba(255,255,255,.88) !important;
  color: #5a3418 !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  padding: .4rem 1.2rem !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.1) !important;
  display: inline-block !important;
  margin-bottom: 1rem !important;
}

/* ----------------------------------------------------------------
   5. BUTTONS — Farm-Aktionen
   ---------------------------------------------------------------- */
.btn-p {
  background: linear-gradient(135deg, var(--adventure), var(--adventure-d)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(200,112,42,.35) !important;
  padding: .85rem 2.2rem !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  animation: farm-pulse 3s ease-in-out infinite !important;
}
.btn-p:hover {
  background: linear-gradient(135deg, var(--adventure-l), var(--adventure)) !important;
  box-shadow: 0 6px 28px rgba(200,112,42,.5) !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}
.btn-o {
  background: transparent !important;
  color: #2c1a08 !important;
  border: 2px solid rgba(44,26,8,.25) !important;
  background: rgba(255,255,255,.82) !important;
  border-radius: 4px !important;
}
.btn-o:hover {
  background: rgba(255,255,255,.95) !important;
  transform: translateY(-2px) !important;
}

@keyframes farm-pulse {
  0%,100% { box-shadow: 0 4px 18px rgba(200,112,42,.35); }
  50%      { box-shadow: 0 4px 28px rgba(200,112,42,.55); }
}

/* ----------------------------------------------------------------
   6. SEKTIONEN — Einheitlicher Farm-Look
   ---------------------------------------------------------------- */
.sec { padding: 5rem 2rem !important; }

/* Abwechselnde Sektion-Hintergründe */
#jack-story   { background: linear-gradient(180deg, var(--soil) 0%, var(--bark) 100%) !important; }
#trailer      { background: var(--bark) !important; }
#gallery      { background: transparent !important; }
#characters-section { background: var(--soil) !important; }
#systems      { background: linear-gradient(180deg, var(--bark) 0%, var(--soil) 100%) !important; }
#maps         { background: var(--bark) !important; }
#animals      { background: linear-gradient(180deg, var(--bark) 0%, var(--bark2) 100%) !important; }
#news         { background: var(--soil) !important; }
#media-sec    { background: linear-gradient(180deg, var(--soil) 0%, var(--bark2) 100%) !important; }

/* Abschnitt-Trennlinie — Goldenes Ährenband */
.sec + .sec::before,
.divider::before,
.sec-divider {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--border-holz) 20%,
    var(--gold) 50%,
    var(--border-holz) 80%, transparent);
  margin: 0 auto;
  max-width: 600px;
}

/* ----------------------------------------------------------------
   7. SECTION LABELS & TITLES
   ---------------------------------------------------------------- */
.sec-label {
  color: var(--gruen-frisch) !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  margin-bottom: .5rem !important;
}
.sec-title {
  font-family: 'Playfair Display', serif !important;
  color: var(--gold) !important;
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  line-height: 1.12 !important;
}
.sec-body {
  color: var(--text-gedaempt) !important;
  font-size: .92rem !important;
  line-height: 1.7 !important;
  max-width: 560px !important;
}

/* ----------------------------------------------------------------
   8. KARTEN — Farm-Holzrahmen Stil
   ---------------------------------------------------------------- */
.map-card, .news-card, .char-card, .sys-panel, .legal-block, .press-block {
  background: rgba(26,46,18,.7) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 8px !important;
}
.map-card:hover, .news-card:hover {
  border-color: rgba(200,112,42,.4) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.25) !important;
}

/* Karten-Bildbereich */
.map-img-placeholder {
  background: linear-gradient(135deg, rgba(45,74,30,.8), rgba(26,46,18,.95)) !important;
  border-bottom: 1px solid var(--border-gold) !important;
  height: 180px !important;
}
.map-ph-icon { color: rgba(212,168,71,.4) !important; }
.map-ph-label { color: rgba(212,168,71,.25) !important; }

/* ----------------------------------------------------------------
   9. BADGES & TAGS
   ---------------------------------------------------------------- */
.badge-live  { background:rgba(200,112,42,.15)!important; border:1px solid rgba(200,112,42,.4)!important; color:var(--adventure-l)!important; }
.badge-soon  { background:rgba(212,168,71,.1)!important;  border:1px solid rgba(212,168,71,.3)!important;  color:var(--gold)!important; }
.badge-wip   { background:rgba(90,138,58,.1)!important;   border:1px solid rgba(90,138,58,.25)!important;  color:var(--gruen-salbei)!important; }

.cat-update, .news-cat-badge[data-cat="Update"] {
  background:rgba(200,112,42,.15)!important; border:1px solid rgba(200,112,42,.35)!important; color:var(--adventure-l)!important;
}
.cat-event   { background:rgba(90,138,58,.15)!important; border:1px solid rgba(90,138,58,.3)!important; color:var(--gruen-frisch)!important; }
.cat-story   { background:rgba(45,90,138,.15)!important; border:1px solid rgba(45,90,138,.3)!important; color:#80bbdc!important; }
.cat-patch   { background:rgba(122,74,40,.2)!important;  border:1px solid rgba(122,74,40,.4)!important;  color:#e0a060!important; }
.cat-media   { background:rgba(90,138,58,.12)!important; border:1px solid rgba(90,138,58,.25)!important; color:var(--gruen-gras)!important; }

/* ----------------------------------------------------------------
   10. LINKS
   ---------------------------------------------------------------- */
.news-link, .news-card-link, .news-readmore, a.news-link {
  color: var(--adventure-l) !important;
}
.news-link:hover, .news-card-link:hover { color: var(--adventure) !important; }

/* ----------------------------------------------------------------
   11. SYSTEMS
   ---------------------------------------------------------------- */
.sys-item.active {
  background: linear-gradient(135deg, rgba(200,112,42,.18), rgba(212,168,71,.08)) !important;
  border-left: 3px solid var(--adventure) !important;
  color: var(--adventure-l) !important;
}
#sysPanelTitle { color: var(--adventure-l) !important; }

/* ----------------------------------------------------------------
   12. NEWS TABS
   ---------------------------------------------------------------- */
.news-tabs { background: rgba(26,46,18,.6) !important; border-bottom: 1px solid var(--border-gold) !important; }
.news-tab-btn {
  color: var(--text-hint) !important;
  border-bottom: 2px solid transparent !important;
}
.news-tab-btn.active, .news-tab-btn:hover {
  color: var(--gold) !important;
  border-bottom-color: var(--gold) !important;
}
.news-tab-count {
  background: rgba(212,168,71,.15) !important;
  color: var(--gold) !important;
}

/* ----------------------------------------------------------------
   13. LEGAL/SUBPAGE HERO — Einheitlicher Seitenkopf
   ---------------------------------------------------------------- */


/* Felddekor im Hero-Hintergrund */
.legal-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 120%, rgba(90,138,58,.1) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(212,168,71,.05) 0%, transparent 60%);
  pointer-events: none;
}

/* Getreideähren als Dekor */
.legal-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30px;
  background: repeating-linear-gradient(90deg,
    transparent, transparent 12px,
    rgba(212,168,71,.08) 12px, rgba(212,168,71,.08) 13px);
  pointer-events: none;
}

.legal-hero .sec-label { color: var(--gruen-frisch) !important; position: relative; z-index: 1; }
.legal-hero .sec-title { position: relative; z-index: 1; }

/* ----------------------------------------------------------------
   14. LEGAL CONTENT BLOCKS
   ---------------------------------------------------------------- */
.legal-content { max-width: 800px; margin: 0 auto; padding: 3rem 1.5rem; }

.legal-block {
  background: rgba(26,46,18,.5) !important;
  border: 1px solid var(--border-gold) !important;
  border-left: 3px solid var(--gruen-salbei) !important;
  border-radius: 8px !important;
  padding: 1.8rem 2rem !important;
  margin-bottom: 1.4rem !important;
}
.legal-block h2 {
  color: var(--gold) !important;
  font-size: 1.1rem !important;
  padding-bottom: .6rem !important;
  border-bottom: 1px solid var(--border-gold) !important;
  margin-bottom: 1rem !important;
}
.legal-block p, .legal-block li {
  color: var(--text-gedaempt) !important;
  font-size: .88rem !important;
  line-height: 1.7 !important;
}
.legal-block strong { color: var(--weizen-creme) !important; }
.legal-block a { color: var(--adventure-l) !important; }

/* ----------------------------------------------------------------
   15. PRESS PAGE
   ---------------------------------------------------------------- */
.press-block {
  background: rgba(26,46,18,.5) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 8px !important;
  padding: 1.8rem 2rem !important;
  margin-bottom: 1.4rem !important;
}

/* Press download cards */
.press-dl-card {
  background: rgba(45,74,30,.4) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 8px !important;
}
.press-dl-card:hover { border-color: rgba(200,112,42,.4) !important; }

/* ----------------------------------------------------------------
   16. SUPPORT / FAQ
   ---------------------------------------------------------------- */
.faq-item {
  background: rgba(26,46,18,.5) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 8px !important;
}
.faq-q { color: var(--gold) !important; }
.faq-a { color: var(--text-gedaempt) !important; }

/* Bug form */
.bug-form { background: rgba(26,46,18,.5) !important; border: 1px solid var(--border-gold) !important; border-radius: 8px !important; padding: 1.8rem 2rem !important; }
.bug-form input, .bug-form select, .bug-form textarea {
  background: rgba(45,74,30,.4) !important;
  border: 1px solid var(--border-gold) !important;
  color: var(--weizen-creme) !important;
  border-radius: 6px !important;
}
.bug-form input:focus, .bug-form select:focus, .bug-form textarea:focus {
  border-color: var(--gold) !important;
  outline: none !important;
}

/* ----------------------------------------------------------------
   17. NEWSLETTER — Abendrot über dem Feld
   ---------------------------------------------------------------- */
#newsletter, .nl-section, section#newsletter {
  background: linear-gradient(180deg,
    #c87830 0%,
    #9a5018 35%,
    #5a2c10 65%,
    var(--holz-tief) 100%
  ) !important;
  border-top: 2px solid var(--holz-hell) !important;
}
.nl-btn, #nlBtn {
  background: var(--creme-hell) !important;
  color: var(--holz-tief) !important;
  font-weight: 700 !important;
  border: none !important;
}
.nl-input, #nlInput {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(245,234,208,.25) !important;
  color: var(--weizen-creme) !important;
}

/* ----------------------------------------------------------------
   18. FOOTER — Nachterde
   ---------------------------------------------------------------- */
#site-footer {
  background: linear-gradient(180deg, var(--holz-tief) 0%, #140a02 100%) !important;
  border-top: 2px solid var(--holz-hell) !important;
}
#mainFooterLinks a, #subFooterLinks a {
  color: var(--text-hint) !important;
  font-size: .78rem !important;
}
#mainFooterLinks a:hover, #subFooterLinks a:hover {
  color: var(--gold) !important;
}
#subFooterCopy {
  color: rgba(212,168,71,.2) !important;
  font-size: .72rem !important;
}

/* ----------------------------------------------------------------
   19. MEDIA GALERIE
   ---------------------------------------------------------------- */
.media-tabs { border-bottom: 1px solid var(--border-gold) !important; }
.media-tab {
  color: var(--text-hint) !important;
  border-bottom: 2px solid transparent !important;
}
.media-tab.active, .media-tab:hover {
  color: var(--gold) !important;
  border-bottom-color: var(--gold) !important;
}
.media-card {
  background: rgba(26,46,18,.7) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 8px !important;
}
.media-card:hover { border-color: rgba(200,112,42,.35) !important; }
.media-dl-btn {
  background: rgba(212,168,71,.1) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(212,168,71,.25) !important;
}
.media-dl-btn:hover { background: rgba(212,168,71,.18) !important; }

/* ----------------------------------------------------------------
   20. SCROLLBAR — Farm-Grün
   ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--gruen-tief); }
::-webkit-scrollbar-thumb { background: var(--holz-hell); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ----------------------------------------------------------------
   21. RESPONSIVE — Mobile Farm
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .sec { padding: 3.5rem 1.2rem !important; }
  .legal-hero { padding: 6rem 1.2rem 3rem !important; }
  .legal-content { padding: 2rem 1rem !important; }
  .legal-block { padding: 1.2rem 1.2rem !important; }

  #hero { min-height: 100svh !important; }
  .hero-title { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .hero-btns { flex-direction: column !important; align-items: center !important; gap: .8rem !important; }
  .btn-p, .btn-o { width: 100% !important; max-width: 280px !important; text-align: center !important; }

  .maps-grid { grid-template-columns: 1fr !important; }
  .map-tree-left, .map-tree-right { display: none !important; }
  .news-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none !important; }
  .news-tabs::-webkit-scrollbar { display: none !important; }
  .news-tab-btn { flex-shrink: 0 !important; white-space: nowrap !important; }
  .media-tabs { display: none !important; }
  .media-tabs-dropdown { display: none; }

  .car-btn { min-width: 44px !important; min-height: 44px !important; flex-shrink: 0 !important; }
  .carousel-controls { gap: .6rem !important; justify-content: center !important; align-items: center !important; }
  
  .press-dl-cards { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .sec-title { font-size: 1.6rem !important; }
  .news-tab-btn { font-size: .68rem !important; padding: .7rem .9rem !important; }
}

/* ----------------------------------------------------------------
   22. SHARE BUTTONS
   ---------------------------------------------------------------- */
.share-btn, .news-share-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  background: rgba(212,168,71,.1) !important;
  border: 1px solid rgba(212,168,71,.22) !important;
  color: var(--gold) !important;
  text-decoration: none !important;
  transition: background .2s !important;
}
.share-btn:hover { background: rgba(212,168,71,.22) !important; }
.share-btn svg { width: 13px !important; height: 13px !important; }

/* ----------------------------------------------------------------
   23. BACK BUTTON (Subpages)
   ---------------------------------------------------------------- */
.back-float, #backFloat {
  background: rgba(26,14,4,.85) !important;
  border: 1px solid rgba(212,168,71,.35) !important;
  color: #d4a847 !important;
  border-radius: 6px !important;
  padding: .5rem 1.2rem !important;
}
.back-float:hover { border-color: rgba(212,168,71,.65) !important; }

/* ----------------------------------------------------------------
   24. COOKIES PAGE
   ---------------------------------------------------------------- */
.cookie-toggle input:checked + .toggle-slider {
  background: var(--gruen-salbei) !important;
}
.cookie-category-header { color: var(--gold) !important; }

/* ================================================================
   END FARMERS DREAM FARM DESIGN SYSTEM v1.0
   ================================================================ */

/* ===== DROPDOWN DISPLAY CONTROL (FINAL) ===== */
.media-tabs-dropdown { display: none !important; }
.news-tab-dropdown-wrap { display: none !important; }
@media (max-width: 768px) {
  .media-tabs-dropdown { display: block !important; }
  .media-tabs { display: none !important; }
  .news-tab-dropdown-wrap { display: block !important; }
  .news-tabs-wrap { display: none !important; }
}
/* ===== END DROPDOWN DISPLAY CONTROL ===== */

/* ===== MAPS WITH SIDE TREES ===== */
.maps-with-trees {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}
.map-tree-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
}
.map-tree-emoji {
  font-size: 2.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.maps-grid {
  flex: 1;
  min-width: 0;
}
@media (max-width: 900px) {
  .map-tree-side { display: none !important; }
  .maps-with-trees { gap: 0; }
}
/* ===== END MAPS WITH SIDE TREES ===== */

/* ===== NEWS PLACEHOLDER PANELS ===== */
.news-placeholder-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  min-height: 280px;
}
.news-placeholder-box {
  text-align: center;
  max-width: 480px;
  background: rgba(26,46,18,.5);
  border: 1px dashed rgba(212,168,71,.25);
  border-radius: 12px;
  padding: 2.5rem 2rem;
}
.news-placeholder-icon { font-size: 2.8rem; margin-bottom: 1rem; opacity: .6; }
.news-placeholder-title {
  font-family: 'Playfair Display', serif !important;
  color: var(--gold) !important;
  font-size: 1.3rem !important;
  margin-bottom: .8rem !important;
}
.news-placeholder-text {
  color: rgba(245,234,208,.5);
  font-size: .88rem;
  line-height: 1.65;
  margin-bottom: 1.2rem;
}
.news-placeholder-badge {
  display: inline-block;
  background: rgba(212,168,71,.1);
  border: 1px solid rgba(212,168,71,.25);
  color: var(--gold);
  font-family: 'Raleway', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 20px;
}
/* ===== END NEWS PLACEHOLDER PANELS ===== */

/* ================================================================
   MOBILE FIXES — v15 FINAL
   ================================================================ */

/* ---- MEDIA GALLERY MOBILE ---- */
@media (max-width: 768px) {
  /* 1 column instead of 3 so download buttons are fully visible */
  #media-sec .media-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .media-card {
    width: 100% !important;
    min-width: 0 !important;
  }
  .media-dl-btn {
    width: 100% !important;
    padding: .9rem !important;
    font-size: .85rem !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  .media-thumb-label {
    font-size: .75rem !important;
    white-space: normal !important;
  }
}

/* ---- PRESS PAGE MOBILE ---- */
@media (max-width: 768px) {
  .presskit-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .presskit-dl-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: .9rem !important;
    font-size: .85rem !important;
    margin-top: .5rem !important;
  }
  .presskit-card {
    padding: 1.4rem 1.2rem !important;
  }
}

/* ---- CAROUSEL QUICK-BTNS MOBILE ---- */
@media (max-width: 768px) {
  /* Quick-btns scroll horizontally, don't clip */
  .quick-btns-row, [class*="char-quick-btns"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: .4rem !important;
    padding: .4rem .5rem !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
  }
  .quick-btns-row::-webkit-scrollbar { display: none !important; }

  /* Carousel arrows: always visible, proper size */
  .car-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .carousel-controls {
    overflow: visible !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .8rem !important;
    padding: .8rem .5rem !important;
  }
  .carousel-outer {
    overflow: hidden !important;
    border-radius: 8px !important;
  }
  /* Quick-btns smaller on mobile */
  .char-quick-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
  }
  .char-quick-btn span {
    display: none !important;
  }
}

/* ---- MEDIA DROPDOWN STYLING ---- */
.media-tabs-dropdown select,
.news-tab-dropdown-wrap select {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  background: rgba(26,46,18,.95) !important;
  color: var(--gold, #d4a847) !important;
  border: 1px solid rgba(212,168,71,.3) !important;
  border-radius: 6px !important;
  padding: .6rem 1rem !important;
  font-size: .9rem !important;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 700 !important;
  width: 100% !important;
  cursor: pointer !important;
}
.media-tabs-dropdown select option,
.news-tab-dropdown-wrap select option {
  background: #1a2e12 !important;
  color: #f5ead0 !important;
}

/* ---- GENERAL MOBILE PADDING ---- */
@media (max-width: 480px) {
  .inner { padding-left: .8rem !important; padding-right: .8rem !important; }
  .sec { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .sec-title { font-size: 1.5rem !important; }
}

/* ================================================================
   END MOBILE FIXES v15 FINAL
   ================================================================ */

/* ===== BACK TO HOME BUTTON — Bottom of Subpages ===== */
.back-home-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--bark2);
  border: 1px solid rgba(212,168,71,.35);
  color: var(--wheat);
  border-radius: 6px;
  padding: .7rem 1.8rem;
  font-family: 'Raleway', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.back-home-btn:hover {
  background: var(--bark);
  border-color: rgba(212,168,71,.65);
  transform: translateX(-3px);
}
/* Back button — homepage style with wood texture */
/* Wood-btn → same style as homepage back button */
.wood-btn {
  background: rgba(44,26,14,.55);
  border: 1px solid rgba(212,168,71,.4);
  border-radius: 8px;
  box-shadow: none;
  color: #d4a847;
  text-shadow: none;
  padding: .75rem 2.2rem;
  font-size: .82rem;
  letter-spacing: .14em;
  position: relative;
  overflow: hidden;
}
.wood-btn::before { display: none; }
.wood-btn:hover {
  background: rgba(44,26,14,.8);
  border-color: rgba(212,168,71,.75);
  box-shadow: none;
  transform: translateX(-2px);
}
/* Remove old fixed-position float button */
#backFloat[style*="fixed"], .back-float { position: static !important; }
/* ===== END BACK TO HOME BUTTON ===== */

/* ================================================================
   FINAL UNIFIED DESIGN — All pages consistent
   ================================================================ */

/* ---- FARMERS DREAM LOGO/TITLE → GOLD ---- */
.logo-text,
.logo .logo-text,
a.logo .logo-text,
#mainNav .logo-text {
  color: var(--gold, #d4a847) !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
}

/* Logo icon gold */
.logo-icon, .logo-leaf {
  filter: none !important;
}

/* ---- FOOTER ICONS → GOLD ---- */
/* Footer social icons */
.footer-socials a,
.footer-social-btn,
.social-link,
#site-footer .social-icon,
#site-footer a[href*="discord"],
#site-footer a[href*="twitter"],
#site-footer a[href*="tiktok"],
#site-footer a[href*="kickstarter"],
#site-footer a[href*="steam"],
#mainFooterSocials a {
  color: var(--gold, #d4a847) !important;
  border-color: rgba(212,168,71,.3) !important;
  background: rgba(212,168,71,.08) !important;
}
#site-footer a:hover {
  color: var(--gold-hell, #e8c068) !important;
  border-color: rgba(212,168,71,.6) !important;
  background: rgba(212,168,71,.15) !important;
}

/* Footer logo */
#site-footer .logo-text,
#footerLogo .logo-text {
  color: var(--gold, #d4a847) !important;
}

/* ---- SUBPAGE LEGAL HERO → match main page style ---- */

.legal-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 80% 60% at 50% 120%, rgba(90,138,58,.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(212,168,71,.04) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
.legal-hero .sec-label {
  color: #7ab060 !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: .5rem !important;
}
.legal-hero .sec-title,
.legal-hero h1 {
  font-family: 'Playfair Display', serif !important;
  color: var(--gold, #d4a847) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ---- LEGAL CONTENT → consistent with main page ---- */
.legal-content {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 3rem 2rem 4rem !important;
}
.legal-block {
  background: rgba(26,46,18,.55) !important;
  border: 1px solid rgba(212,168,71,.14) !important;
  border-left: 3px solid #5a8a3a !important;
  border-radius: 8px !important;
  padding: 1.6rem 1.8rem !important;
  margin-bottom: 1.2rem !important;
}
.legal-block h2 {
  font-family: 'Playfair Display', serif !important;
  color: var(--gold, #d4a847) !important;
  font-size: 1.1rem !important;
  padding-bottom: .6rem !important;
  border-bottom: 1px solid rgba(212,168,71,.12) !important;
  margin-bottom: .9rem !important;
}
.legal-block p, .legal-block li {
  color: rgba(245,234,208,.62) !important;
  font-size: .88rem !important;
  line-height: 1.68 !important;
}
.legal-block strong { color: #f5ead0 !important; }
.legal-block a { color: #e09050 !important; }

/* ---- PRESS PAGE → consistent design ---- */
.presskit-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 1.2rem !important;
}
.presskit-card {
  background: rgba(26,46,18,.6) !important;
  border: 1px solid rgba(212,168,71,.15) !important;
  border-radius: 10px !important;
  padding: 1.4rem 1rem !important;
  text-align: center !important;
  transition: border-color .2s, transform .2s !important;
}
.presskit-card:hover {
  border-color: rgba(200,112,42,.4) !important;
  transform: translateY(-2px) !important;
}
.presskit-card h3 {
  font-family: 'Playfair Display', serif !important;
  color: var(--gold, #d4a847) !important;
  font-size: 1rem !important;
  margin-bottom: .4rem !important;
}
.presskit-card p {
  color: rgba(245,234,208,.5) !important;
  font-size: .8rem !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}
.presskit-dl-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  background: linear-gradient(135deg, #5a8a3a, #3a6820) !important;
  color: #f5ead0 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: .6rem 1.2rem !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background .2s !important;
}
.presskit-dl-btn:hover {
  background: linear-gradient(135deg, #6a9a4a, #4a7830) !important;
}

/* ---- SUPPORT PAGE → consistent design ---- */
.faq-item {
  background: rgba(26,46,18,.55) !important;
  border: 1px solid rgba(212,168,71,.14) !important;
  border-radius: 8px !important;
  margin-bottom: 1rem !important;
  overflow: hidden !important;
}
.faq-q {
  color: var(--gold, #d4a847) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 1rem 1.4rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.faq-a {
  color: rgba(245,234,208,.6) !important;
  font-size: .88rem !important;
  line-height: 1.65 !important;
  padding: 0 1.4rem 1rem !important;
}

/* Bug report form */
.bug-form-wrap input,
.bug-form-wrap select,
.bug-form-wrap textarea,
form input,
form select,
form textarea {
  background: rgba(26,46,18,.6) !important;
  border: 1px solid rgba(212,168,71,.2) !important;
  color: #f5ead0 !important;
  border-radius: 6px !important;
  padding: .6rem .9rem !important;
  font-family: 'Raleway', sans-serif !important;
  width: 100% !important;
}
form input:focus, form select:focus, form textarea:focus {
  border-color: rgba(212,168,71,.5) !important;
  outline: none !important;
}
form label {
  color: rgba(245,234,208,.7) !important;
  font-size: .82rem !important;
  margin-bottom: .3rem !important;
  display: block !important;
}
form button[type="submit"], .submit-btn {
  background: linear-gradient(135deg, #c8702a, #9a5018) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: .8rem 2rem !important;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

/* ---- NEWS PAGE HERO → use hero.jpg ---- */
.news-hero-wrap, .news-page-hero {
  background: linear-gradient(180deg, rgba(15,28,15,.55) 0%, rgba(15,28,15,.7) 100%),
    url('../assets/images/hero.jpg') center/cover no-repeat !important;
}

/* ---- COOKIES PAGE ---- */
.cookie-section {
  background: rgba(26,46,18,.55) !important;
  border: 1px solid rgba(212,168,71,.14) !important;
  border-radius: 8px !important;
  padding: 1.4rem 1.6rem !important;
  margin-bottom: 1rem !important;
}
.cookie-toggle input:checked + .toggle-slider,
.cookie-toggle input:checked ~ .toggle-slider {
  background: #5a8a3a !important;
}

/* ---- EULA PAGE ---- */
.eula-section {
  background: rgba(26,46,18,.55) !important;
  border: 1px solid rgba(212,168,71,.14) !important;
  border-left: 3px solid #5a8a3a !important;
  border-radius: 8px !important;
  padding: 1.4rem 1.6rem !important;
  margin-bottom: 1rem !important;
}

/* ---- MOBILE SUBPAGES ---- */
@media (max-width: 768px) {
  .legal-hero { padding: 6rem 1.2rem 3rem !important; }
  .legal-content { padding: 1.5rem 1rem 3rem !important; }
  .legal-block { padding: 1.1rem 1.2rem !important; }
  .presskit-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .presskit-dl-btn { width: 100% !important; justify-content: center !important; padding: .75rem !important; }
}

/* ================================================================
   END FINAL UNIFIED DESIGN
   ================================================================ */

/* ================================================================
   COMPREHENSIVE FIXES — Final Pass
   ================================================================ */

/* ----------------------------------------------------------------
   1. SOCIAL ICONS → GOLD (all pages)
   ---------------------------------------------------------------- */
.social-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(212,168,71,.1) !important;
  border: 1.5px solid rgba(212,168,71,.3) !important;
  color: #d4a847 !important;
  text-decoration: none !important;
  transition: background .2s, border-color .2s, transform .2s !important;
}
.social-btn:hover {
  background: rgba(212,168,71,.22) !important;
  border-color: rgba(212,168,71,.7) !important;
  color: #e8c068 !important;
  transform: translateY(-2px) !important;
}
.social-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
/* Footer social row */
.footer-social {
  display: flex !important;
  gap: .6rem !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 1rem 0 !important;
  flex-wrap: wrap !important;
}

/* ----------------------------------------------------------------
   2. FOOTER LOGO → GOLD
   ---------------------------------------------------------------- */
#site-footer .logo-text,
.footer-logo .logo-text,
.footer-brand .logo-text {
  color: #d4a847 !important;
  font-family: 'Playfair Display', serif !important;
}
#site-footer .logo-icon,
.footer-logo svg {
  color: #7ab060 !important;
}

/* ----------------------------------------------------------------
   3. MAP CARDS → EQUAL HEIGHT, ALIGNED
   ---------------------------------------------------------------- */
.maps-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  align-items: stretch !important;
}
.map-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: rgba(26,46,18,.7) !important;
  border: 1px solid rgba(212,168,71,.15) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.map-card:hover {
  border-color: rgba(212,168,71,.4) !important;
  transform: translateY(-4px) !important;
}
.map-img-placeholder {
  width: 100% !important;
  height: 200px !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, rgba(45,74,30,.8), rgba(20,40,16,.95)) !important;
  border-bottom: 1px solid rgba(212,168,71,.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.map-ph-label {
  font-size: .65rem !important;
  color: rgba(212,168,71,.3) !important;
  font-family: 'Raleway', sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.map-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 1.4rem 1.5rem !important;
}
.map-name {
  font-family: 'Playfair Display', serif !important;
  color: #d4a847 !important;
  font-size: 1.15rem !important;
  margin-bottom: .5rem !important;
}
.map-desc {
  color: rgba(245,234,208,.6) !important;
  font-size: .85rem !important;
  line-height: 1.6 !important;
  flex: 1 !important;
  margin-bottom: .9rem !important;
}
.map-badge-row {
  margin-top: auto !important;
}
/* Map chars section - equal alignment */
.map-chars {
  margin-top: 1rem !important;
  padding-top: .8rem !important;
  border-top: 1px solid rgba(212,168,71,.1) !important;
}
.map-chars-label {
  font-size: .6rem !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: rgba(245,234,208,.35) !important;
  margin-bottom: .5rem !important;
}
.map-char-avatars {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .4rem !important;
}

@media (max-width: 900px) {
  .maps-grid { grid-template-columns: 1fr !important; }
  .map-tree-side { display: none !important; }
}

/* ----------------------------------------------------------------
   4. PRESS PAGE → ALIGNED CARDS
   ---------------------------------------------------------------- */
.presskit-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 1.4rem !important;
  align-items: stretch !important;
}
.presskit-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: rgba(26,46,18,.6) !important;
  border: 1px solid rgba(212,168,71,.18) !important;
  border-radius: 10px !important;
  padding: 1.8rem 1.4rem !important;
  text-align: center !important;
  transition: border-color .2s, transform .2s !important;
}
.presskit-card:hover {
  border-color: rgba(200,112,42,.4) !important;
  transform: translateY(-3px) !important;
}
.presskit-icon {
  font-size: 2.4rem !important;
  margin-bottom: .8rem !important;
  display: block !important;
}
.presskit-card h3 {
  font-family: 'Playfair Display', serif !important;
  color: #d4a847 !important;
  font-size: 1.05rem !important;
  margin-bottom: .5rem !important;
}
.presskit-card p {
  color: rgba(245,234,208,.5) !important;
  font-size: .82rem !important;
  line-height: 1.6 !important;
  margin-bottom: 1.2rem !important;
  flex: 1 !important;
}
.presskit-dl-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem !important;
  background: linear-gradient(135deg, #5a8a3a, #3a6820) !important;
  color: #f5ead0 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: .65rem 1.4rem !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background .2s !important;
  margin-top: auto !important;
  width: 100% !important;
}
.presskit-dl-btn:hover {
  background: linear-gradient(135deg, #6a9a4a, #4a7830) !important;
}

@media (max-width: 768px) {
  .presskit-grid { grid-template-columns: 1fr !important; }
}

/* ----------------------------------------------------------------
   5. CAROUSEL MOBILE — Jack shows first, arrows visible
   ---------------------------------------------------------------- */

/* Ensure track children take full width */
.carousel-track {
  display: flex !important;
  width: 100% !important;
  will-change: transform !important;
}
/* char-card sizing handled by scroll-snap */

/* Controls row */
.char-controls-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .8rem !important;
  margin-top: 1.2rem !important;
  overflow: visible !important;
  position: relative !important;
}

/* Quick select scrollable */
.char-quick-select {
  display: flex !important;
  gap: .4rem !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: .2rem .3rem !important;
  flex: 1 !important;
  justify-content: center !important;
  max-width: calc(100% - 110px) !important;
}
.char-quick-select::-webkit-scrollbar { display: none !important; }

/* Quick buttons */
.char-quick-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  background: rgba(44,26,14,.6) !important;
  border: 2.5px solid rgba(212,168,71,.2) !important;
  font-size: 1.3rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: border-color .2s, background .2s, transform .2s !important;
}
.char-quick-btn.active {
  border-color: #d4a847 !important;
  background: rgba(212,168,71,.18) !important;
  box-shadow: 0 0 0 3px rgba(212,168,71,.15) !important;
  transform: scale(1.08) !important;
}
.char-quick-btn:hover {
  border-color: rgba(212,168,71,.6) !important;
  transform: scale(1.1) !important;
}
.char-quick-btn span { display: none !important; }

/* Arrow buttons */
.car-btn {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 50% !important;
  background: rgba(44,26,14,.7) !important;
  border: 1.5px solid rgba(212,168,71,.3) !important;
  color: #d4a847 !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  z-index: 5 !important;
  transition: background .2s, border-color .2s !important;
}
.car-btn:hover {
  background: rgba(212,168,71,.15) !important;
  border-color: #d4a847 !important;
}

@media (max-width: 768px) {
  .char-quick-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    font-size: 1.2rem !important;
  }
  .car-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
  .char-controls-row {
    gap: .5rem !important;
    padding: 0 .3rem !important;
  }
  .char-quick-select {
    max-width: calc(100% - 100px) !important;
  }
}

/* ----------------------------------------------------------------
   6. FOOTER LINKS → one line, no golden box
   ---------------------------------------------------------------- */
.footer-links-row, #mainFooterLinks {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .3rem .8rem !important;
  align-items: center !important;
  justify-content: center !important;
}
.footer-links-row a, #mainFooterLinks a {
  color: rgba(245,234,208,.45) !important;
  font-size: .78rem !important;
  text-decoration: none !important;
  letter-spacing: .05em !important;
  padding: .1rem 0 !important;
  /* NO border, NO background, NO box */
  border: none !important;
  background: none !important;
  transition: color .2s !important;
}
.footer-links-row a:hover, #mainFooterLinks a:hover {
  color: #d4a847 !important;
}
.footer-sep {
  color: rgba(212,168,71,.2) !important;
}

/* ----------------------------------------------------------------
   7. FARMERS DREAM TITLE → GOLD everywhere
   ---------------------------------------------------------------- */
.logo-text, .logo span, a.logo .logo-text,
#mainNav a.logo .logo-text {
  color: #d4a847 !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
}

/* ================================================================
   END COMPREHENSIVE FIXES
   ================================================================ */

/* ===== MAP IMAGE SLOTS — Auto-show when image available ===== */
.map-img-wrap {
  width: 100%;
  height: 200px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(212,168,71,.1);
}
.map-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: none;
}
.map-img-wrap .map-img-placeholder {
  position: absolute;
  inset: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(45,74,30,.8), rgba(20,40,16,.95));
  border-bottom: none;
}
/* ===== END MAP IMAGE SLOTS ===== */




/* ================================================================
   SUBPAGE HERO — DEFINITIVE (overrides all previous rules)
   ================================================================ */
.legal-hero {
  background:
    linear-gradient(to bottom,
      rgba(8,18,8,.55) 0%,
      rgba(12,22,12,.42) 45%,
      rgba(8,18,8,.68) 100%),
    url('../assets/images/hero.jpg') center 30% / cover no-repeat !important;
  min-height: 38vh !important;
  padding: 8rem 2rem 4rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  border-bottom: 2px solid rgba(212,168,71,.2) !important;
}
.legal-hero .sec-label {
  color: #7ab060 !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: .5rem !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.5) !important;
}
.legal-hero h1, .legal-hero .sec-title {
  font-family: 'Playfair Display', serif !important;
  color: #d4a847 !important;
  position: relative !important;
  z-index: 2 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
  font-size: clamp(1.8rem,5vw,3.2rem) !important;
}
@media (max-width: 768px) {
  .legal-hero {
    min-height: 30vh !important;
    padding: 6.5rem 1.2rem 3rem !important;
  }
}
/* ================================================================
   END SUBPAGE HERO
   ================================================================ */
/* ================================================================
   MAP IMAGE SLOTS — FINAL DEFINITIVE
   ================================================================ */
.map-img-wrap {
  width: 100% !important;
  height: 200px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(212,168,71,.1) !important;
  background: linear-gradient(135deg, rgba(45,74,30,.8), rgba(20,40,16,.95)) !important;
}
.map-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: none !important;
  z-index: 2 !important;
}
.map-img.loaded {
  display: block !important;
}
.map-img-wrap .map-img-placeholder {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(45,74,30,.7), rgba(20,40,16,.9)) !important;
  z-index: 1 !important;
  transition: opacity .3s !important;
}
.map-img-wrap .map-img-placeholder.hidden {
  display: none !important;
}
.map-ph-label {
  font-size: .62rem !important;
  color: rgba(212,168,71,.3) !important;
  font-family: 'Raleway', sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 0 .5rem !important;
}
/* ================================================================
   END MAP IMAGE SLOTS
   ================================================================ */

/* ================================================================
   CAROUSEL — FINAL DEFINITIVE
   ================================================================ */
.carousel-outer {
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 1px solid rgba(212,168,71,.2) !important;
  position: relative !important;
}
.carousel-track {
  display: flex !important;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94) !important;
  will-change: transform !important;
  /* width and card widths set by JS */
}
.char-card {
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  /* width set by JS */
}
@media (max-width: 768px) {
  .char-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .char-avatar {
    border-right: none !important;
    border-bottom: 1px solid rgba(212,168,71,.15) !important;
    flex-direction: row !important;
    gap: 1rem !important;
    padding: 1.2rem !important;
    justify-content: flex-start !important;
  }
  .char-emoji { font-size: 2.5rem !important; margin-bottom: 0 !important; }
  .char-info { padding: 1.2rem !important; }
  .char-name { font-size: 1.6rem !important; }
}
/* ================================================================
   END CAROUSEL
   ================================================================ */


/* ================================================================
   CHARACTER CAROUSEL — CLEAN FINAL
   ================================================================ */
#carouselOuter {
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: 12px !important;
  border: 1px solid rgba(212,168,71,.2) !important;
}
#carouselTrack {
  display: flex !important;
  transition: transform .42s cubic-bezier(.25,.46,.45,.94) !important;
  will-change: transform !important;
  /* Width set by JS */
}
#carouselTrack .char-card {
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* Width set by JS to outer.offsetWidth */
}
/* Desktop char-card grid */
.char-card {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  min-height: 340px !important;
  background: rgba(30,18,8,.75) !important;
}
/* Mobile char-card stacked */
@media (max-width: 768px) {
  .char-card {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .char-avatar {
    border-right: none !important;
    border-bottom: 1px solid rgba(212,168,71,.15) !important;
    flex-direction: row !important;
    gap: 1rem !important;
    padding: 1.2rem !important;
    justify-content: flex-start !important;
    min-height: auto !important;
  }
  .char-emoji { font-size: 2.5rem !important; margin-bottom: 0 !important; }
  .char-info { padding: 1.2rem !important; }
  .char-name { font-size: 1.5rem !important; }
}
.char-info {
  overflow: hidden !important;
  min-width: 0 !important; /* CRITICAL: prevents grid blowout */
}

/* Controls */
.char-controls-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .8rem !important;
  margin-top: 1rem !important;
  overflow: visible !important;
}
.char-quick-select {
  display: flex !important;
  gap: .5rem !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex: 1 !important;
  max-width: calc(100% - 110px) !important;
  justify-content: center !important;
  padding: .3rem .2rem !important;
}
.char-quick-select::-webkit-scrollbar { display: none !important; }
.char-quick-btn {
  width: 46px !important; height: 46px !important; min-width: 46px !important;
  border-radius: 50% !important; font-size: 1.3rem !important;
  flex-shrink: 0 !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  background: rgba(44,26,14,.6) !important;
  border: 2.5px solid rgba(212,168,71,.2) !important;
  cursor: pointer !important;
}
.char-quick-btn.active {
  border-color: #d4a847 !important;
  background: rgba(212,168,71,.18) !important;
  box-shadow: 0 0 0 3px rgba(212,168,71,.15) !important;
  transform: scale(1.08) !important;
}
.char-quick-btn span { display: none !important; }
.car-btn {
  width: 46px !important; height: 46px !important; min-width: 46px !important;
  border-radius: 50% !important;
  background: rgba(44,26,14,.7) !important;
  border: 1.5px solid rgba(212,168,71,.3) !important;
  color: #d4a847 !important; font-size: 1.1rem !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; flex-shrink: 0 !important;
}
.car-btn:hover { background: rgba(212,168,71,.15) !important; border-color: #d4a847 !important; }
/* ================================================================
   END CHARACTER CAROUSEL
   ================================================================ */

/

/* ===== ANIMALS VIDEO ===== */
.animals-video-wrap { margin-top: 1.5rem; }
.animals-video { width: 100%; border-radius: 10px; border: 1px solid rgba(212,168,71,.2); background: #0a1208; }
@media (max-width: 768px) {
  .animal-layout { flex-direction: column !important; }
  .animal-visual { width: 100% !important; min-height: 200px !important; }
}
/* ===== END ANIMALS VIDEO ===== */

/* ===== UPDATES PANEL LAYOUT ===== */
.updates-featured-card {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 0;
  background: rgba(26,46,18,.7);
  border: 1px solid rgba(212,168,71,.18);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.6rem;
  min-height: 240px;
}
.updates-featured-card .ufc-img {
  background: linear-gradient(135deg,#2d4a1e,#1a2e12);
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
}
.updates-featured-card .ufc-body {
  padding: 2rem 2.2rem;
  display: flex; flex-direction: column; justify-content: center;
}
.ufc-meta { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; flex-wrap: wrap; }
.ufc-date { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(245,234,208,.35); }
.ufc-title { font-family: 'Playfair Display',serif; font-size: 1.5rem; color: #d4a847; line-height: 1.2; margin-bottom: .8rem; }
.ufc-text { font-size: .88rem; color: rgba(245,234,208,.62); line-height: 1.68; margin-bottom: 1rem; }
.ufc-btn { display: inline-block; background: linear-gradient(135deg,#c8702a,#9a5018); color:#fff; padding: .6rem 1.6rem; border-radius: 4px; font-family: 'Raleway',sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.ufc-btn:hover { opacity: .9; }

.updates-small-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.updates-small-card {
  background: rgba(26,46,18,.6);
  border: 1px solid rgba(212,168,71,.14);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.updates-small-card:hover { border-color: rgba(200,112,42,.35); transform: translateY(-2px); }
.updates-small-card .usc-img {
  height: 80px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  background: linear-gradient(135deg,rgba(45,74,30,.6),rgba(15,30,10,.9));
}
.usc-placeholder .usc-img { opacity: .5; }
.updates-small-card .usc-body { padding: 1rem 1.1rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.usc-date { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(245,234,208,.3); }
.usc-title { font-family: 'Playfair Display',serif; font-size: .9rem; color: #f5ead0; line-height: 1.28; }
.usc-text { font-size: .78rem; color: rgba(245,234,208,.55); line-height: 1.55; flex: 1; }
.usc-badge { display: inline-block; background: rgba(212,168,71,.1); border: 1px solid rgba(212,168,71,.2); color: #d4a847; font-family: 'Raleway',sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 20px; }

@media (max-width: 768px) {
  .updates-featured-card { grid-template-columns: 1fr !important; }
  .updates-featured-card .ufc-img { height: 120px !important; font-size: 3rem !important; }
  .updates-small-grid { grid-template-columns: 1fr !important; }
}
/* ===== END UPDATES PANEL LAYOUT ===== */

/* ================================================================
   MAP CARDS — PERFECT VERTICAL ALIGNMENT
   Badge always directly below description text.
   Characters section always at the bottom.
   ================================================================ */
.map-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.map-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 1.4rem 1.5rem !important;
  background: rgba(20,36,16,.88) !important;
}
.map-name {
  font-family: 'Playfair Display', serif !important;
  color: #d4a847 !important;
  font-size: 1.1rem !important;
  margin-bottom: .5rem !important;
}
.map-desc {
  color: rgba(245,234,208,.62) !important;
  font-size: .85rem !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
  /* NO flex:1 here - keeps desc natural height */
}
.map-badge {
  display: inline-block !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: .3rem .8rem !important;
  border-radius: 4px !important;
  /* NO margin-top:auto - stays directly below desc */
  align-self: flex-start !important;
  margin-bottom: 0 !important;
}
.map-chars {
  margin-top: auto !important; /* PUSHES chars to bottom */
  padding-top: .9rem !important;
  border-top: 1px solid rgba(212,168,71,.1) !important;
}
/* ================================================================
   END MAP CARDS ALIGNMENT
   ================================================================ */

   ================================================================ */

/* ================================================================
   MAP BADGE ALIGNMENT — DEFINITIVE
   Badge always at same vertical position across all cards
   ================================================================ */
.map-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 1.4rem 1.5rem !important;
  background: rgba(20,36,16,.88) !important;
}
.map-desc {
  flex: 1 !important; /* grows to fill space, pushing badge to fixed distance from bottom */
  min-height: 80px !important;
  margin-bottom: .9rem !important;
}
.map-badge {
  align-self: flex-start !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.map-chars {
  margin-top: 1rem !important;
  /* NOT margin-top:auto - badge handles positioning */
}
/* ================================================================
   END MAP BADGE ALIGNMENT
   ================================================================ */

/* ===== ANIMALS LAYOUT UPDATE ===== */
.animal-text-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.animals-video {
  width: 100% !important;
  max-height: 320px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid rgba(212,168,71,.2) !important;
  background: #0a1208 !important;
  display: block !important;
}
@media (max-width: 768px) {
  .animal-layout { flex-direction: column !important; }
  .animal-visual { width: 100% !important; }
  .animal-text-col { width: 100% !important; }
  .animals-video { max-height: 220px !important; }
}
/* ===== END ANIMALS LAYOUT ===== */

/* ===== UPDATES PANEL RESPONSIVE ===== */
@media (max-width: 768px) {
  .updates-featured-card,
  [style*="grid-template-columns:280px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}
/* ===== END UPDATES PANEL ===== */

/* ================================================================
   MAP CARDS EQUAL HEIGHT — DEFINITIVE
   ================================================================ */
.maps-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  align-items: stretch !important; /* all cards same height */
}
.map-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: rgba(26,46,18,.75) !important;
  border: 1px solid rgba(212,168,71,.15) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.map-img-wrap {
  width: 100% !important;
  height: 200px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}
.map-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;           /* fills remaining height */
  padding: 1.4rem 1.5rem !important;
  background: rgba(20,36,16,.88) !important;
}
.map-name {
  font-family: 'Playfair Display', serif !important;
  color: #d4a847 !important;
  font-size: 1.1rem !important;
  margin-bottom: .5rem !important;
}
.map-desc {
  font-size: .85rem !important;
  color: rgba(245,234,208,.62) !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
  flex: 1 !important;           /* grows to push badge/chars down */
}
.map-badge {
  display: inline-block !important;
  align-self: flex-start !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: .3rem .8rem !important;
  border-radius: 4px !important;
  margin-bottom: 0 !important;
}
.map-chars {
  margin-top: 1rem !important;
  padding-top: .8rem !important;
  border-top: 1px solid rgba(212,168,71,.1) !important;
  /* NO margin-top:auto — desc flex:1 handles positioning */
}
@media (max-width: 900px) {
  .maps-grid { grid-template-columns: 1fr !important; }
}
/* ================================================================
   END MAP CARDS EQUAL HEIGHT
   ================================================================ */

/* ================================================================
   SYSTEMS MOBILE — MATCHES CHAR-QUICK-BTN STYLE
   ================================================================ */
@media (max-width: 768px) {
  .systems-layout {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .sys-list {
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: .6rem !important;
    padding: .4rem .2rem .9rem !important;
    align-items: flex-start !important;
  }
  .sys-list::-webkit-scrollbar { display: none !important; }

  .sys-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .35rem !important;
    padding: 0 !important;
    width: 64px !important;
    min-width: 64px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  /* The icon circle — same style as char-quick-btn */
  .sys-item .sys-item-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 50% !important;
    background: rgba(44,26,14,.6) !important;
    border: 2.5px solid rgba(212,168,71,.2) !important;
    font-size: 1.5rem !important;
    transition: border-color .2s, background .2s, transform .2s !important;
    flex-shrink: 0 !important;
  }

  /* Active: gold border only — same as char-quick-btn.active */
  .sys-item.active .sys-item-icon {
    border-color: #d4a847 !important;
    background: rgba(212,168,71,.18) !important;
    box-shadow: 0 0 0 3px rgba(212,168,71,.15) !important;
    transform: scale(1.08) !important;
  }
  .sys-item:hover .sys-item-icon {
    border-color: rgba(212,168,71,.55) !important;
  }

  /* Name below icon */
  .sys-item .sys-item-name {
    font-family: 'Raleway', sans-serif !important;
    font-size: .58rem !important;
    font-weight: 700 !important;
    color: rgba(245,234,208,.5) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    max-width: 62px !important;
    word-break: break-word !important;
    display: block !important;
  }
  .sys-item.active .sys-item-name {
    color: #d4a847 !important;
  }
}
/* ================================================================
   END SYSTEMS MOBILE
   ================================================================ */

/* ================================================================
   CHAR QUICK BTN — MOBILE ACTIVE = GOLD RING ONLY
   ================================================================ */
@media (max-width: 768px) {
  .char-quick-btn {
    background: rgba(26,18,8,.7) !important;
    border: 2.5px solid rgba(212,168,71,.25) !important;
  }
  .char-quick-btn.active {
    background: rgba(26,18,8,.7) !important;
    border: 2.5px solid #d4a847 !important;
    box-shadow: 0 0 0 3px rgba(212,168,71,.2) !important;
    transform: scale(1.08) !important;
  }
}
/* ================================================================
   END CHAR QUICK BTN MOBILE
   ================================================================ */

/* ================================================================
   NEWS SIDEBAR — Letzte Beiträge
   ================================================================ */
.news-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2rem;
  align-items: start;
}
.news-sidebar {
  position: sticky;
  top: 80px;
}
.news-sidebar-card {
  background: rgba(26,46,18,.7);
  border: 1px solid rgba(212,168,71,.15);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
}
.news-sidebar-title {
  font-family: 'Playfair Display', serif;
  color: #d4a847;
  font-size: .95rem;
  margin-bottom: .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(212,168,71,.12);
}
.sidebar-post-item {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(212,168,71,.07);
  cursor: pointer;
  text-decoration: none;
}
.sidebar-post-item:last-child { border-bottom: none; }
.sidebar-post-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(44,26,14,.5);
  border-radius: 6px;
}
.sidebar-post-info { flex: 1; min-width: 0; }
.sidebar-post-cat {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c8702a;
  margin-bottom: .15rem;
}
.sidebar-post-title {
  font-size: .78rem;
  color: rgba(245,234,208,.75);
  line-height: 1.3;
  font-family: 'Raleway', sans-serif;
}
@media (max-width: 900px) {
  .news-with-sidebar {
    grid-template-columns: 1fr !important;
  }
  .news-sidebar { position: static !important; }
}
/* ================================================================
   SHARE + LIKE BUTTONS
   ================================================================ */
.share-like-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .9rem;
  flex-wrap: wrap;
}
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(212,168,71,.08);
  border: 1px solid rgba(212,168,71,.2);
  color: rgba(245,234,208,.6);
  border-radius: 20px;
  padding: .3rem .9rem;
  font-family: 'Raleway', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.like-btn:hover, .like-btn.liked {
  background: rgba(212,168,71,.18);
  border-color: #d4a847;
  color: #d4a847;
}
.like-btn .heart { font-size: .9rem; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(26,46,18,.5);
  border: 1px solid rgba(212,168,71,.15);
  color: rgba(245,234,208,.5);
  border-radius: 20px;
  padding: .3rem .8rem;
  font-family: 'Raleway', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.share-btn:hover {
  border-color: rgba(212,168,71,.4);
  color: #d4a847;
}
/* ================================================================
   END SHARE/LIKE + SIDEBAR
   ================================================================ */

/* ================================================================
   FOOTER LINKS — NO GOLDEN BOX ON HOVER
   ================================================================ */
#mainFooterLinks a,
.footer-links-row a,
#subFooterLinks a {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  text-decoration: none !important;
  color: rgba(245,234,208,.45) !important;
  font-size: .78rem !important;
  transition: color .2s !important;
}
#mainFooterLinks a:hover,
.footer-links-row a:hover,
#subFooterLinks a:hover {
  color: #d4a847 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
/* ================================================================
   END FOOTER LINKS
   ================================================================ */

/* ================================================================
   SHARE BUTTONS — CLEAN HORIZONTAL LAYOUT
   ================================================================ */
.share-like-row {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  margin-top: 1rem !important;
  flex-wrap: wrap !important;
  padding-top: .8rem !important;
  border-top: 1px solid rgba(212,168,71,.08) !important;
}
.share-btns-wrap {
  display: flex !important;
  align-items: center !important;
  gap: .35rem !important;
  flex-wrap: nowrap !important;
}
.like-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  background: rgba(26,46,18,.5) !important;
  border: 1px solid rgba(212,168,71,.2) !important;
  color: rgba(245,234,208,.6) !important;
  border-radius: 20px !important;
  padding: .28rem .75rem !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  white-space: nowrap !important;
}
.like-btn:hover { color: #e05a5a !important; border-color: #e05a5a !important; }
.like-btn .like-heart { font-size: .9rem !important; }
.share-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(26,46,18,.6) !important;
  border: 1px solid rgba(212,168,71,.18) !important;
  color: rgba(245,234,208,.55) !important;
  font-size: .75rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
.share-icon-btn:hover { border-color: rgba(212,168,71,.5) !important; color: #d4a847 !important; background: rgba(212,168,71,.1) !important; }
.share-tw:hover { color: #1da1f2 !important; border-color: #1da1f2 !important; }
.share-ig:hover { color: #e1306c !important; border-color: #e1306c !important; }
.share-fb:hover { color: #1877f2 !important; border-color: #1877f2 !important; }
/* ================================================================
   END SHARE BUTTONS
   ================================================================ */

/* ================================================================
   HERO TITLE — GOLD
   ================================================================ */
.hero-title {
  color: #d4a847 !important;
}
.hero-title em {
  color: #e8c068 !important;
  font-style: italic !important;
}
/* ================================================================
   END HERO TITLE
   ================================================================ */

/* ===== NEWS FEATURED CARD MOBILE ===== */
@media (max-width: 768px) {
  .news-featured-card { grid-template-columns: 1fr !important; }
  .news-featured-card > div:first-child { height: 140px !important; font-size: 3.5rem !important; }
}
/* ===== END NEWS FEATURED CARD MOBILE ===== */

/* ================================================================
   SHARE ROW DEFINITIVE — always visible
   ================================================================ */
.teilen-label {
  font-size: .62rem !important;
  color: rgba(245,234,208,.35) !important;
  font-family: 'Raleway', sans-serif !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  margin-right: .3rem !important;
  white-space: nowrap !important;
}
.news-badge-demnachst {
  display: inline-block;
  background: rgba(212,168,71,.1);
  border: 1px solid rgba(212,168,71,.2);
  color: #d4a847;
  font-family: 'Raleway', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .25rem .7rem;
  border-radius: 20px;
  margin-bottom: .5rem;
  display: block;
}
/* ================================================================
   END SHARE ROW
   ================================================================ */

/* ================================================================
   SYSTEMS — NO GOLDEN OVERLAY, GOLD RING ONLY ON ACTIVE
   (matches char-quick-btn behavior)
   ================================================================ */
.sys-panel {
  background: rgba(26,46,18,.55) !important;
  border: 1px solid rgba(212,168,71,.15) !important;
  border-radius: 12px !important;
  transition: border-color .2s !important;
}
/* DESKTOP sys-item: no background fill, only gold ring on active */
@media (min-width: 769px) {
  .sys-item {
    background: transparent !important;
    border: 1.5px solid transparent !important;
    transition: border-color .2s, background .2s !important;
  }
  .sys-item:hover {
    background: rgba(212,168,71,.05) !important;
    border-color: rgba(212,168,71,.3) !important;
  }
  .sys-item.active {
    background: transparent !important;
    border-color: #d4a847 !important;
    color: #d4a847 !important;
  }
}
/* ================================================================
   END SYSTEMS
   ================================================================ */

/* ================================================================
   ANIMALS MOBILE — text does not overlap image
   ================================================================ */
@media (max-width: 768px) {
  .animal-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .animal-visual {
    max-width: 100% !important;
    width: 100% !important;
  }
  .animal-visual img {
    max-height: 280px !important;
    object-fit: cover !important;
    object-position: top center !important;
  }
}
/* ================================================================
   END ANIMALS MOBILE
   ================================================================ */

/* ================================================================
   SIDEBAR — aligned with card grid top
   ================================================================ */
.news-with-sidebar {
  align-items: flex-start !important;
}
.news-sidebar {
  position: sticky !important;
  top: 80px !important;
  align-self: flex-start !important;
}
/* ================================================================
   END SIDEBAR
   ================================================================ */



/* ================================================================
   SIDEBAR ALIGNMENT FIX — same height as cards
   ================================================================ */
.news-with-sidebar {
  align-items: flex-start !important;
}
.news-sidebar {
  position: sticky !important;
  top: 72px !important;
  margin-top: 0 !important;
  align-self: flex-start !important;
}
/* When viewing Neuigkeiten/Aktualisierungen etc, sidebar lines up with card grid */
.news-panels-col .news-panel {
  min-height: 0 !important;
}
/* ================================================================
   END SIDEBAR ALIGNMENT
   ================================================================ */

/* ================================================================
   NEWS LAYOUT MOBILE — DEFINITIVE FIX
   ================================================================ */
@media (max-width: 900px) {
  .news-with-sidebar {
    display: block !important;
    grid-template-columns: unset !important;
  }
  .news-sidebar {
    position: static !important;
    margin-top: 2rem !important;
    width: 100% !important;
  }
  .news-cards-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ================================================================
   END NEWS LAYOUT MOBILE
   ================================================================ */

/* ================================================================
   PLACEHOLDER CARD — Demnächst badge full width + card spacing
   ================================================================ */
.news-badge-demnachst {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: rgba(212,168,71,.1) !important;
  border: 1px solid rgba(212,168,71,.25) !important;
  color: #d4a847 !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: .6rem 1rem !important;
  border-radius: 6px !important;
  margin-top: auto !important;
  margin-bottom: .8rem !important;
  box-sizing: border-box !important;
}

/* Sidebar items — more spacing */
.sidebar-post-item {
  padding: .75rem .4rem !important;
  gap: .9rem !important;
  border-bottom: 1px solid rgba(212,168,71,.1) !important;
}
.sidebar-post-icon {
  font-size: 1.6rem !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}
.sidebar-post-title {
  font-size: .84rem !important;
  line-height: 1.4 !important;
}
.sidebar-post-cat {
  font-size: .63rem !important;
  margin-bottom: .2rem !important;
  letter-spacing: .1em !important;
}
.news-sidebar-card {
  padding: 1.4rem 1.6rem !important;
}
.news-sidebar-title {
  font-size: 1rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: .6rem !important;
}
/* ================================================================
   END PLACEHOLDER CARD + SIDEBAR
   ================================================================ */

/* ================================================================
   SYSTEMS — DEFINITIVE NO-SHIMMER FIX (highest specificity)
   ================================================================ */
@media (max-width: 768px) {
  .sys-item,
  .sys-item:focus,
  .sys-item:active {
    background: transparent !important;
    border-left: 3px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .sys-item:hover {
    background: rgba(212,168,71,.04) !important;
    border-left-color: rgba(212,168,71,.3) !important;
    box-shadow: none !important;
  }
  .sys-item.active {
    background: transparent !important;
    border-left: 3px solid #d4a847 !important;
    box-shadow: none !important;
  }
  .sys-item.active .sys-item-icon {
    border-color: #d4a847 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .sys-item.active .sys-item-name {
    color: #d4a847 !important;
  }
}
/* Desktop: same - no shimmer */
.sys-item.active {
  background: transparent !important;
  box-shadow: none !important;
}
.sys-item.active .sys-item-icon {
  background: transparent !important;
  box-shadow: none !important;
  border-color: #d4a847 !important;
}
/* ================================================================
   END SYSTEMS NO-SHIMMER
   ================================================================ */

/* ================================================================
   SYS-ITEM — REMOVE BORDER-LEFT VERTICAL LINE
   ================================================================ */
.sys-item,
.sys-item:hover,
.sys-item.active,
.sys-item:focus,
.sys-item:active {
  border-left: none !important;
  border-left-color: transparent !important;
  padding-left: 0 !important;
}
@media (max-width: 768px) {
  .sys-item,
  .sys-item:hover,
  .sys-item.active {
    border-left: none !important;
    border-left-color: transparent !important;
    padding-left: 0 !important;
  }
}
/* ================================================================
   END SYS-ITEM BORDER-LEFT REMOVAL
   ================================================================ */

/* Alles section labels — left aligned */
.alles-section-label { justify-content: flex-start !important; }

/* ================================================================
   MOBILE NAV — CLEAN IMPLEMENTATION
   ================================================================ */

/* Desktop: hide mobile nav, show desktop nav */
@media (min-width: 901px) {
  .nav-links-mobile { display: none !important; }
  .nav-links { display: flex !important; }
  .hamburger { display: none !important; }
}

/* Mobile: hide desktop nav, show hamburger */
@media (max-width: 900px) {
  .hamburger { display: flex !important; }
  .nav-links { display: none !important; }
  .nav-links-mobile {
    display: none;
    position: fixed;
    top: 66px; left: 0; right: 0; bottom: 0;
    background: rgba(18,46,18,.97);
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.2rem 2rem;
    gap: .3rem;
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    margin: 0;
  }
  .nav-links-mobile.open { display: flex; }
  .nav-links-mobile li { width: 100%; list-style: none; }
  .nav-links-mobile .mobile-divider { border-top: 1px solid rgba(212,168,71,.15); margin: .5rem 0; padding: 0; }
  .nav-links-mobile a {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; padding: .9rem 1.4rem; border-radius: 10px;
    font-size: .82rem; font-family: "Raleway", sans-serif; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(245,234,208,.85); text-decoration: none;
    border: 1px solid transparent; transition: background .15s, border-color .15s;
    box-sizing: border-box; text-align: center;
  }
  .nav-links-mobile a:hover { background: rgba(212,168,71,.1); border-color: rgba(212,168,71,.25); color: #d4a847; }
  .mobile-store-btn { background: rgba(26,46,18,.6) !important; border: 1px solid rgba(212,168,71,.2) !important; }
  .mobile-ks-btn { background: linear-gradient(135deg,#c8702a,#9a5018) !important; color: #fff !important; border: none !important; margin-top: .3rem; }
}
/* ================================================================
   END MOBILE NAV
   ================================================================ */

/* ================================================================
   END MOBILE NAV
   ================================================================ */

/* ================================================================
   HÖHLE TEASER — RESPONSIVE LAYOUT
   ================================================================ */
.hoehle-teaser-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
}
/* Desktop: img left, text flex-grows right, btn at end */
.hoehle-teaser-img {
  width: 200px;
  height: 130px;
  flex-shrink: 0;
  order: 1;
}
.hoehle-teaser-text {
  flex: 1;
  text-align: left;
  min-width: 220px;
  order: 2;
}
.hoehle-teaser-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: rgba(212,168,71,.12);
  border: 1.5px solid rgba(212,168,71,.4);
  color: #d4a847;
  padding: .7rem 1.8rem;
  border-radius: 8px;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
  flex-shrink: 0;
  order: 3;
}
/* Mobile: column → image(1) → text(2) → button(3) */
@media (max-width: 700px) {
  .hoehle-teaser-inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hoehle-teaser-img {
    width: 100% !important;
    height: 180px !important;
    order: 1 !important;
  }
  .hoehle-teaser-text {
    text-align: center !important;
    order: 2 !important;
  }
  .hoehle-teaser-btn {
    order: 3 !important;
    width: 100% !important;
    justify-content: center !important;
  }
}
/* ================================================================
   END HÖHLE TEASER
   ================================================================ */

/* ================================================================
   CHAR CAROUSEL - QUICK BUTTONS FIX
   ================================================================ */
.char-controls-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  overflow: visible !important;
}
.char-quick-select {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: .4rem !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: .3rem .2rem !important;
  scrollbar-width: none !important;
}
.char-quick-select::-webkit-scrollbar { display: none !important; }
.char-quick-btn {
  flex-shrink: 0 !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 50% !important;
}
.car-btn {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  z-index: 2 !important;
  position: relative !important;
}
/* ================================================================
   END CHAR CAROUSEL FIX
   ================================================================ */

/* ================================================================
   CHAR QUICK SELECT — JACK ALWAYS FIRST (flex-start)
   ================================================================ */
.char-quick-select {
  justify-content: flex-start !important;
  scroll-behavior: smooth !important;
}
/* ================================================================
   END CHAR QUICK SELECT FIX
   ================================================================ */

/* ================================================================
   CHAR QUICK SELECT — DESKTOP CENTERED, MOBILE LEFT-START
   ================================================================ */
@media (min-width: 769px) {
  .char-quick-select {
    justify-content: center !important;
  }
}
/* ================================================================
   END CHAR QUICK SELECT DESKTOP CENTER
   ================================================================ */

/* ================================================================
   SHARE BUTTONS — MOBILE TOUCH FIX
   ================================================================ */
.share-icon-btn {
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(212,168,71,.2) !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
@media (max-width: 900px) {
  .share-icon-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  .share-btns-wrap {
    gap: .5rem !important;
  }
  .like-btn {
    padding: .4rem 1rem !important;
    min-height: 38px !important;
    touch-action: manipulation !important;
  }
}
/* ================================================================
   END SHARE BUTTONS MOBILE
   ================================================================ */

/* ================================================================
   MAP CARDS — CONSISTENT LAYOUT
   ================================================================ */
.map-card {
  display: flex !important;
  flex-direction: column !important;
}
.map-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 1.4rem !important;
}
.map-name {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.15rem !important;
  color: #d4a847 !important;
  margin-bottom: .6rem !important;
}
.map-desc {
  font-size: .85rem !important;
  color: rgba(245,234,208,.7) !important;
  line-height: 1.65 !important;
  margin-bottom: .9rem !important;
  flex: 1 !important;
  /* Clamp to 3 lines for uniform height */
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.map-badge {
  display: inline-block !important;
  margin-bottom: .8rem !important;
  align-self: flex-start !important;
}
.map-chars {
  margin-top: auto !important;
  padding-top: .6rem !important;
  border-top: 1px solid rgba(212,168,71,.1) !important;
}
/* ================================================================
   END MAP CARDS
   ================================================================ */

/* ── PALIA-STYLE GALLERY ── */
.gal-hover-overlay { position:absolute; inset:0; border-radius:14px; background:rgba(10,18,10,.5); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s; pointer-events:none; }
.gal-hover-overlay span { font-family:'Raleway',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#d4a847; border:1px solid rgba(212,168,71,.4); padding:.45rem 1.1rem; border-radius:50px; }

/* Outer wrapper: full bleed, no overflow hidden so side images peek out */
.palia-gal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 2rem;
  padding: 1.5rem 0;
  gap: 0;
}

/* Side images — partially visible, clickable */
.palia-side {
  flex: 0 0 calc(15% + 2rem);
  max-width: 280px;
  min-width: 60px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: filter .3s;
}
.palia-side:hover { filter: brightness(1.1); }
.palia-side-img {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg,rgba(44,26,14,.85),rgba(10,18,8,.9));
  border: 1.5px solid rgba(212,168,71,.12);
  filter: brightness(.55) scale(.92);
  transform: scale(.9);
  transition: filter .3s, transform .3s;
}
.palia-side:hover .palia-side-img { filter: brightness(.75) scale(.95); transform: scale(.93); }
.palia-side-img img { width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }
.palia-side-left  { transform: translateX(30px); }
.palia-side-right { transform: translateX(-30px); }

/* Center image — large, prominent */
.palia-center {
  flex: 0 0 62%;
  max-width: 900px;
  position: relative;
  z-index: 2;
  overflow: visible;
}
.palia-center-img {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(212,168,71,.4);
  box-shadow: 0 12px 60px rgba(0,0,0,.7);
  background: linear-gradient(135deg,rgba(44,26,14,.85),rgba(10,18,8,.9));
  cursor: pointer;
  position: relative;
  transition: border-color .25s;
}
.palia-center-img:hover { border-color: rgba(212,168,71,.7); }
.palia-center-img:hover .gal-hover-overlay { opacity: 1; }
.palia-center-img img { width:100%; height:100%; object-fit:cover; display:block; border-radius:14px; }

/* Arrows — overlaid on sides of center image */
.palia-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform .2s, filter .2s;
  box-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.palia-arrow:hover { transform: translateY(-50%) scale(1.12); filter: drop-shadow(0 4px 16px rgba(0,0,0,.7)) brightness(1.1); }
.palia-arrow img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Left arrow: just to the right of the left side image */
.palia-arrow-left  { left: calc(15% + 2rem + 4px); }
/* Right arrow: just to the left of the right side image */
.palia-arrow-right { right: calc(15% + 2rem + 4px); }

/* Dots navigation */
.palia-dots {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.4rem;
}
.palia-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(74,124,63,.5);
  border: 2px solid rgba(212,168,71,.6);
  cursor: pointer;
  transition: background .2s, transform .2s, border-color .2s;
  box-shadow: 0 0 6px rgba(74,124,63,.3);
}
.palia-dot.active {
  background: #4a7c3f;
  border-color: #d4a847;
  border-width: 2.5px;
  transform: scale(1.35);
  box-shadow: 0 0 10px rgba(74,124,63,.6), 0 0 0 2px rgba(212,168,71,.2);
}
.palia-dot:hover {
  background: rgba(74,124,63,.75);
  border-color: #d4a847;
  transform: scale(1.15);
}

@media (max-width: 700px) {
  .palia-side { display: none; }
  .palia-center { flex: 0 0 90%; max-width: 100%; }
  .palia-arrow-left  { left: 4px; }
  .palia-arrow-right { right: 4px; }
  .palia-arrow { width: 48px; height: 48px; }
}
/* Back button wrapper — match homepage soil color exactly */
div:has(> .back-home-btn),
div:has(> #backFloat) {
  background: var(--soil, #1a2e1a) !important;
  padding: 2rem 1rem !important;
}

/* ═══ HOLZ-BUTTON ═══
   Wird verwendet für: "Mehr laden", "Mehr anzeigen", "▶ Trailer ansehen"
   Bild: assets/images/btn-wood.png (366×89px)
*/
.btn-wood {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: url('../assets/images/btn-wood.png') center / 100% 100% no-repeat !important;
  border: none !important;
  outline: none;
  cursor: pointer;
  min-width: 200px;
  height: 54px;
  padding: 0 2rem;
  font-family: 'Raleway', sans-serif !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #3a1f0a !important;
  text-shadow: 0 1px 1px rgba(255,220,120,.25);
  text-decoration: none !important;
  transition: transform .15s, filter .15s !important;
  border-radius: 0 !important;
  position: relative;
}
.btn-wood:hover  { transform: scale(1.04) !important; filter: brightness(1.08); color: #3a1f0a !important; }
.btn-wood:active { transform: scale(.97)  !important; filter: brightness(.93); }

/* ═══ NEWS KACHELN MIT BILDERN ═══ */
.news-card {
  padding: 0 !important;
  overflow: hidden;
}
.news-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(26,46,26,0.7);
  overflow: hidden;
  flex-shrink: 0;
}
.news-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .4s;
}
.news-card-img.loaded { opacity: 1; }
.news-card-img-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: rgba(212,168,71,.4);
  font-family: 'Raleway', sans-serif;
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.news-card-img-ph svg { opacity: .4; }
.news-card-body {
  padding: 1.4rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}