/* aussteigen.org - Thailand Magazin Styleguide v1 - Helix Ultimate custom.css
   Pfad: /templates/shaper_helixultimate/css/custom.css
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@700&display=swap');

:root{
 --navy: #0A1931;
 --gold: #C5A880;
 --offwhite: #F8F6F2;
 --charcoal: #2B2B2B;
 --line: #EAE6E0;
}

body{ font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.75; color: var(--charcoal); background: #fff; }
h1,h2{ font-family: 'Playfair Display', serif; color: var(--navy); font-weight: 700; letter-spacing: -0.3px; }
h1{ font-size: 48px; line-height: 1.1; }
h2{ font-size: 36px; line-height: 1.2; }
h3{ font-family: 'Inter', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.35; color: var(--navy); }
h4{ font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }

.qx-category-label, .category-label-gold{
 background: var(--gold); color: #fff; font-family: 'Inter'; font-size: 11px;
 padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600;
}
.qx-article-title a:hover{ color: var(--gold) !important; }
.btn-navy{ background: var(--navy); color: #fff; border-radius: 6px; padding: 10px 22px; }
.btn-navy:hover{ background: var(--gold); color: #fff; }

/* PILLAR AJAX FILTER */
.tag-filter-wrap{ position: sticky; top: 70px; z-index: 90; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); padding: 16px 0; border-bottom: 1px solid var(--line); }
.pill_filter, .tag-pill{
 background: var(--offwhite); border: 1px solid var(--line); border-radius: 30px; padding: 8px 18px;
 color: var(--charcoal); font-weight: 500; font-size: 14px; cursor: pointer; transition: all 0.2s ease;
 display: inline-block; margin: 4px 6px;
}
.pill_filter.active, .tag-pill.active{ background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
.pill_filter:hover{ background: var(--gold) !important; color: #fff !important; border-color: var(--gold) !important; transform: translateY(-1px); }
.qx-grid.filtering{ opacity: 0.7; transition: opacity 0.15s; }
.filter-counter{ font-size: 13px; color: #888; margin-left: 12px; }

/* Responsive */
@media (max-width: 991px){
 h1{ font-size: 40px; } h2{ font-size: 30px; } h3{ font-size: 18px; }
}
@media (max-width: 767px){
 h1{ font-size: 32px; } h2{ font-size: 26px; }
 body{ font-size: 16px; }
}