/* BarneyD Token Website Styles - Updated: 2025-08-19 Cache-Buster */
* { box-sizing: border-box; }
    :root {
      --bg: #0b3f1a;
      --card: #102b1c;
      --brand: #aaff66;
      --brand-soft: #d7ffad;
      --accent: #8125b2;
      --cta: #b5fd5b;
      --text: #ffffff;
      --muted: #fff999;
      --shadow: 0 10px 24px rgba(0,0,0,0.25);
      --radius: 14px;
      --gap: 1.25rem;
    }

    .gallery-grid{
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--gap);
      max-width: 900px;
    }

    body {
      margin: 0;
      font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
      background-color: var(--bg);
      color: var(--text);
      text-align: center;
      line-height: 1.45;
      position: relative;
      overflow-x: hidden;
    }
    
    /* Animierte Hintergrund-Partikel */
    .bg-particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }
    
    .particle {
      position: absolute;
      background: var(--brand);
      border-radius: 50%;
      opacity: 0.1;
      animation: float-particle 15s infinite linear;
    }
    
    @keyframes float-particle {
      0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
      }
      10% {
        opacity: 0.1;
      }
      90% {
        opacity: 0.1;
      }
      100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
      }
    }

    header { 
      padding: 2.25rem 1rem 1rem; 
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .header-main {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }
    
    .header-side {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      padding-top: 2rem;
      min-width: 200px;
    }
    
    @media (min-width: 1024px) {
      .header-side {
        display: flex;
      }
      
      /* Mobile Sidebar Grid auf Desktop verstecken */
      .mobile-sidebar-grid {
        display: none !important;
      }
      
      /* Doppelt sicherstellen, dass mobile grid versteckt ist */
      .header-main .mobile-sidebar-grid {
        display: none !important;
      }
    }
    
    /* Mobile Sidebar Grid - Standard: versteckt */
    .mobile-sidebar-grid {
      display: none !important;
    }
    
    /* Mobile Layout: Sidebar-Elemente unter den Buttons anzeigen */
    @media (max-width: 1023px) {
      .mobile-sidebar-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        width: 100%;
        max-width: 500px;
        margin-top: 2rem;
      }
      
      .header-main {
        width: 100%;
      }
      
      /* Ursprüngliche Sidebar-Elemente auf Mobile verstecken */
      .header-side {
        display: none;
      }
      
      /* Mobile Sidebar Info anpassen */
      .mobile-sidebar-grid .side-info {
        min-height: 100px;
        padding: 0.875rem;
      }
      
      .mobile-sidebar-grid .side-info h3 {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
      }
      
      .mobile-sidebar-grid .side-info p {
        font-size: 0.75rem;
        margin: 0.25rem 0;
      }
      
      .mobile-sidebar-grid .social-links {
        margin-top: 0.5rem;
      }
      
      .mobile-sidebar-grid .social-link {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
      }
    }
    
    .side-info {
      background: var(--card);
      border: 1px solid rgba(170,255,102,0.3);
      border-radius: var(--radius);
      padding: 1rem;
      text-align: center;
      box-shadow: var(--shadow);
      width: 100%;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    .side-info h3 {
      margin: 0 0 0.5rem 0;
      color: var(--brand);
      font-size: 0.9rem;
      font-weight: 700;
    }
    
    .side-info p {
      margin: 0;
      color: var(--text);
      font-size: 0.8rem;
      opacity: 0.9;
    }
    
    .social-links {
      display: flex;
      gap: 0.5rem;
      justify-content: center;
      margin-top: 0.75rem;
    }
    
    .social-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 35px;
      height: 35px;
      background: var(--brand);
      color: var(--bg);
      border-radius: 50%;
      text-decoration: none;
      font-weight: bold;
      font-size: 0.9rem;
      transition: all 0.2s ease;
    }
    
    .social-link:hover {
      background: var(--brand-soft);
      transform: scale(1.1);
    }
    
    .header-image {
      width: 250px;
      max-width: 100vw;
      margin: 10px auto -12px;
      display: block;
      filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
      position: relative;
      z-index: 2;
    }
    
    /* Rauch-Animation für das Logo */
    .logo-container {
      position: relative;
      display: inline-block;
      margin: 0 auto;
    }
    
    /* CSS-nur Rauch-Animation als Fallback */
    .logo-container::before,
    .logo-container::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      background: rgba(170, 255, 102, 0.6);
      border-radius: 50%;
      filter: blur(3px);
      opacity: 0;
      pointer-events: none;
      z-index: 1;
    }
    
    .logo-container::before {
      top: 80px;
      left: 30%;
      animation: staticSmoke1 4s ease-out infinite;
      animation-delay: 0s;
    }
    
    .logo-container::after {
      top: 90px;
      right: 30%;
      animation: staticSmoke2 5s ease-out infinite;
      animation-delay: 1.5s;
    }
    
    @keyframes staticSmoke1 {
      0% { opacity: 0; transform: translateY(0) scale(0.3); }
      20% { opacity: 0.8; }
      100% { opacity: 0; transform: translateY(-80px) translateX(20px) scale(0.1); }
    }
    
    @keyframes staticSmoke2 {
      0% { opacity: 0; transform: translateY(0) scale(0.4); }
      25% { opacity: 0.7; }
      100% { opacity: 0; transform: translateY(-100px) translateX(-15px) scale(0.1); }
    }
    
    /* Echter organischer Rauch */
    .smoke {
      position: absolute;
      top: 131px;
      left: 17%;
      transform: translateX(-50%);
      width: 80px;
      height: 80px;
      pointer-events: none;
      z-index: 3;
    }
    
    .smoke span {
      position: absolute;
      top: 0;
      left: 50%;
      width: 10px;
      height: 10px;
      background: radial-gradient(circle, rgba(170, 255, 102, 0.95) 0%, rgba(170, 255, 102, 0.7) 30%, rgba(170, 255, 102, 0.4) 60%, transparent 85%);
      border-radius: 50%;
      transform: translateX(-50%);
      filter: blur(2px);
      animation: premium-smoke 7s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
      will-change: transform, opacity, filter;
    }
    
    .smoke span:nth-child(1) {
      animation-delay: 0s;
      left: 48%;
      animation-duration: 6.8s;
    }
    
    .smoke span:nth-child(2) {
      animation-delay: 0.4s;
      left: 52%;
      animation-duration: 7.2s;
    }
    
    .smoke span:nth-child(3) {
      animation-delay: 0.8s;
      left: 50%;
      animation-duration: 6.5s;
    }
    
    .smoke span:nth-child(4) {
      animation-delay: 1.2s;
      left: 49%;
      animation-duration: 7.5s;
    }
    
    .smoke span:nth-child(5) {
      animation-delay: 1.6s;
      left: 51%;
      animation-duration: 6.9s;
    }
    
    .smoke span:nth-child(6) {
      animation-delay: 2.0s;
      left: 48.5%;
      animation-duration: 7.1s;
    }
    
    .smoke span:nth-child(7) {
      animation-delay: 2.4s;
      left: 51.5%;
      animation-duration: 6.7s;
    }
    
    .smoke span:nth-child(8) {
      animation-delay: 2.8s;
      left: 49.5%;
      animation-duration: 7.3s;
    }
    
    @keyframes premium-smoke {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0px) scale(0.2) rotate(0deg);
        filter: blur(1px);
      }
      3% {
        opacity: 0.9;
        transform: translateX(-50%) translateY(-3px) scale(0.25) rotate(1deg);
        filter: blur(1.5px);
      }
      8% {
        opacity: 1;
        transform: translateX(-50%) translateY(-8px) scale(0.35) rotate(2deg);
        filter: blur(2px);
      }
      15% {
        opacity: 0.95;
        transform: translateX(-48%) translateY(-18px) scale(0.5) rotate(4deg);
        filter: blur(2.5px);
      }
      25% {
        opacity: 0.9;
        transform: translateX(-45%) translateY(-35px) scale(0.75) rotate(8deg);
        filter: blur(3px);
      }
      35% {
        opacity: 0.85;
        transform: translateX(-42%) translateY(-58px) scale(1.0) rotate(14deg);
        filter: blur(4px);
      }
      45% {
        opacity: 0.75;
        transform: translateX(-38%) translateY(-88px) scale(1.4) rotate(22deg);
        filter: blur(5px);
      }
      55% {
        opacity: 0.65;
        transform: translateX(-35%) translateY(-125px) scale(1.9) rotate(32deg);
        filter: blur(6px);
      }
      65% {
        opacity: 0.5;
        transform: translateX(-30%) translateY(-170px) scale(2.4) rotate(44deg);
        filter: blur(7px);
      }
      75% {
        opacity: 0.35;
        transform: translateX(-25%) translateY(-225px) scale(3.0) rotate(58deg);
        filter: blur(9px);
      }
      85% {
        opacity: 0.2;
        transform: translateX(-18%) translateY(-290px) scale(3.6) rotate(75deg);
        filter: blur(11px);
      }
      95% {
        opacity: 0.08;
        transform: translateX(-10%) translateY(-365px) scale(4.2) rotate(95deg);
        filter: blur(14px);
      }
      100% {
        opacity: 0;
        transform: translateX(-5%) translateY(-420px) scale(4.8) rotate(110deg);
        filter: blur(18px);
      }
    }
    
    @keyframes joint-smoke {
      0% {
        opacity: 0.9;
        transform: translateX(-50%) translateY(0px) scale(0.3);
        filter: blur(1px);
      }
      5% {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px) scale(0.4);
        filter: blur(1.5px);
      }
      15% {
        opacity: 0.9;
        transform: translateX(-48%) translateY(-15px) scale(0.6) rotate(3deg);
        filter: blur(2px);
      }
      25% {
        opacity: 0.8;
        transform: translateX(-45%) translateY(-30px) scale(0.9) rotate(8deg);
        filter: blur(3px);
      }
      35% {
        opacity: 0.7;
        transform: translateX(-42%) translateY(-50px) scale(1.3) rotate(15deg);
        filter: blur(4px);
      }
      45% {
        opacity: 0.6;
        transform: translateX(-38%) translateY(-75px) scale(1.7) rotate(22deg);
        filter: blur(5px);
      }
      55% {
        opacity: 0.5;
        transform: translateX(-35%) translateY(-105px) scale(2.2) rotate(30deg);
        filter: blur(6px);
      }
      65% {
        opacity: 0.4;
        transform: translateX(-30%) translateY(-140px) scale(2.7) rotate(38deg);
        filter: blur(7px);
      }
      75% {
        opacity: 0.3;
        transform: translateX(-25%) translateY(-180px) scale(3.2) rotate(45deg);
        filter: blur(8px);
      }
      85% {
        opacity: 0.2;
        transform: translateX(-20%) translateY(-225px) scale(3.7) rotate(52deg);
        filter: blur(10px);
      }
      95% {
        opacity: 0.1;
        transform: translateX(-15%) translateY(-275px) scale(4.2) rotate(60deg);
        filter: blur(12px);
      }
      100% {
        opacity: 0;
        transform: translateX(-10%) translateY(-320px) scale(4.6) rotate(67deg);
        filter: blur(15px);
      }
    }
    
    .smoke-particle {
      position: absolute;
      background: rgba(170, 255, 102, 0.7);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      box-shadow: 0 0 10px rgba(170, 255, 102, 0.5);
    }
    
    .smoke-particle::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle, rgba(170, 255, 102, 0.8) 0%, rgba(170, 255, 102, 0.4) 50%, transparent 80%);
      border-radius: 50%;
      filter: blur(2px);
    }
    
    @keyframes smoke1 {
      0% {
        transform: translateY(0) translateX(0) scale(0.5);
        opacity: 0.9;
      }
      50% {
        transform: translateY(-50px) translateX(15px) scale(0.8);
        opacity: 0.6;
      }
      100% {
        transform: translateY(-100px) translateX(-10px) scale(0.3);
        opacity: 0;
      }
    }
    
    @keyframes smoke2 {
      0% {
        transform: translateY(0) translateX(0) scale(0.6);
        opacity: 0.8;
      }
      50% {
        transform: translateY(-60px) translateX(-20px) scale(0.9);
        opacity: 0.5;
      }
      100% {
        transform: translateY(-120px) translateX(15px) scale(0.2);
        opacity: 0;
      }
    }
    
    @keyframes smoke3 {
      0% {
        transform: translateY(0) translateX(0) scale(0.4);
        opacity: 1;
      }
      50% {
        transform: translateY(-40px) translateX(25px) scale(0.7);
        opacity: 0.7;
      }
      100% {
        transform: translateY(-80px) translateX(-15px) scale(0.1);
        opacity: 0;
      }
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }

    .button-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .8rem;
      margin: 1rem 0 2rem;
    }
    .btn {
      border: none;
      padding: 1rem 1.25rem;
      font-size: 1.05rem;
      border-radius: 999px;
      cursor: pointer;
      font-weight: 700;
      width: min(320px, 88vw);
      transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }
    
    .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }
    
    .btn:hover::before {
      left: 100%;
    }
    
    .btn-buy {
      background-color: var(--cta);
      color: #0b3f1a;
      animation: glow 2s ease-in-out infinite alternate;
    }
    
    @keyframes glow {
      from { box-shadow: var(--shadow), 0 0 5px var(--cta); }
      to { box-shadow: var(--shadow), 0 0 20px var(--cta), 0 0 30px var(--cta); }
    }
    .btn:active { transform: translateY(1px) scale(0.995); }
    .btn-connect { background-color: var(--accent); color: #fff; }
    .btn-buy { background-color: var(--cta); color: #0b3f1a; }
    #status { margin-top: .5rem; color: var(--brand); font-size: .95rem; }

    /* Parody Text Styling */
    .parody-text {
      margin: 1.5rem 0;
      padding: 1rem;
      background: rgba(16, 43, 28, 0.7);
      border: 1px solid rgba(170, 255, 102, 0.3);
      border-radius: var(--radius);
      text-align: center;
      max-width: 400px;
    }
    
    .parody-text p {
      margin: 0 0 0.5rem 0;
      color: var(--text);
      font-size: 0.9rem;
      line-height: 1.4;
    }
    
    .parody-text p:last-child {
      margin-bottom: 0;
    }
    
    .parody-text strong {
      color: var(--brand);
      font-weight: 700;
    }
    
    .disclaimer {
      font-size: 0.75rem !important;
      opacity: 0.8;
      font-style: italic;
      margin-top: 0.5rem !important;
    }

    /* Sections */
    section { 
      padding: 2rem 1rem;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    section.fade-in {
      opacity: 1;
      transform: translateY(0);
    }
    
    h2 { 
      margin: 0 0 1rem; 
      color: var(--brand); 
      letter-spacing: .02em;
      position: relative;
      overflow: hidden;
    }
    
    h2::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, var(--brand), var(--brand-soft));
      transition: left 0.8s ease;
    }
    
    section.fade-in h2::after {
      left: 0;
    }

    /* Tokenomics: 2-Spalten Grid + Progressbars */
    .token-grid {
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--gap);
      max-width: 900px;
    }
    @media (max-width: 640px) {
      .token-grid { grid-template-columns: 1fr; }
    }
    .token-box {
      background-color: var(--card);
      border: 2px solid var(--brand);
      border-radius: var(--radius);
      padding: 1rem 1rem 1.25rem;
      text-align: left;
      box-shadow: var(--shadow);
    }
    .token-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: .75rem;
      margin-bottom: .75rem;
    }
    .token-title {
      margin: 0;
      font-size: 1.05rem;
      color: var(--muted);
      font-weight: 700;
    }
    .token-percent {
      font-weight: 800;
      font-size: 1.1rem;
      color: var(--brand-soft);
    }
    .token-desc {
      margin: .15rem 0 .85rem;
      color: #e8ffe0;
      font-size: .95rem;
      opacity: .95;
    }
    .bar {
      position: relative;
      width: 100%;
      height: 12px;
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(170,255,102,0.35);
      border-radius: 999px;
      overflow: hidden;
    }
    .bar > .fill {
      --pct: 0%;
      height: 100%;
      width: var(--pct);
      background: linear-gradient(90deg, var(--brand) 0%, #c9ffa0 100%);
      box-shadow: inset 0 0 6px rgba(0,0,0,0.25);
      border-radius: 999px;
      animation: grow 1.1s ease-out forwards;
    }
    @keyframes grow {
      from { width: 0%; }
      to   { width: var(--pct); }
    }

    /* Galerie: 2-Spalten, feste Kachelgröße mit einheitlichem Seitenverhältnis */
    .gallery-grid {
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--gap);
      max-width: 90%;
    }
    @media (max-width: 640px) {
      .gallery-grid { grid-template-columns: 1fr; }
    }
    
    /* Desktop: 3 Spalten nebeneinander */
    @media (min-width: 768px) {
      .gallery-grid {
        max-width: 990px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
      }
    }
    .gallery-item {
      background: var(--card);
      border: 1px solid rgba(170,255,102,0.25);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin: 0;
      padding: 0.5rem;
      /* Einheitliche Kachelgröße: 4:3 Seitenverhältnis */
      aspect-ratio: 4 / 3;
      position: relative;
    }
    .gallery-item img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: 100%;
      object-fit: cover;   /* sorgt dafür, dass alle visuell gleich groß wirken */
      display: block;
    }

    footer {
      margin-top: 2rem;
      padding: 2rem 1rem 2.5rem;
      font-size: .95rem;
      color: #d7e7d7;
      opacity: .9;
    }

    /* Lightbox/Showbox Stile */
    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      z-index: 9999;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .lightbox.active {
      display: flex;
      opacity: 1;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      box-sizing: border-box;
    }
    
    .lightbox-content {
      position: relative;
      max-width: 90vw;
      max-height: 90vh;
      cursor: default;
      transform: scale(0.8);
      transition: transform 0.3s ease;
    }
    
    .lightbox.active .lightbox-content {
      transform: scale(1);
    }
    
    .lightbox img {
      width: 100%;
      height: auto;
      max-width: 90vw;
      max-height: 90vh;
      object-fit: contain;
      border-radius: var(--radius);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }
    
    .lightbox-close {
      position: absolute;
      top: -45px;
      right: 0;
      background: var(--brand);
      color: var(--bg);
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1.5rem;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: var(--shadow);
    }
    
    .lightbox-close:hover {
      background: var(--brand-soft);
      transform: scale(1.1);
    }
    
    .lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(170, 255, 102, 0.8);
      color: var(--bg);
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1.5rem;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: var(--shadow);
    }
    
    .lightbox-nav:hover {
      background: var(--brand);
      transform: translateY(-50%) scale(1.1);
    }
    
    .lightbox-nav.prev {
      left: -70px;
    }
    
    .lightbox-nav.next {
      right: -70px;
    }
    
    .lightbox-counter {
      position: absolute;
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(170, 255, 102, 0.9);
      color: var(--bg);
      padding: 0.5rem 1rem;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: 600;
      box-shadow: var(--shadow);
    }
    
    /* Cursor-Änderung für Galerie-Bilder */
    .gallery-item img {
      cursor: pointer;
      transition: transform 0.3s ease, filter 0.2s ease;
    }
    
    .gallery-item img:hover {
      transform: scale(1.05);
      filter: brightness(1.1);
      animation: bounce 0.6s ease;
    }
    
    @keyframes bounce {
      0%, 20%, 60%, 100% { transform: scale(1.05) translateY(0); }
      40% { transform: scale(1.05) translateY(-10px); }
      80% { transform: scale(1.05) translateY(-5px); }
    }
    
    /* Mobile Anpassungen für Lightbox */
    @media (max-width: 640px) {
      .lightbox-nav.prev { left: -60px; }
      .lightbox-nav.next { right: -60px; }
      .lightbox-nav { width: 45px; height: 45px; }
      .lightbox-close { top: -40px; width: 35px; height: 35px; }
    }