/* minimal fast styles (incl. pager) */:root {
  
  /* Brand colors extracted from the logo */
  --brand-1: #7ddc8c;
  
  --brand-2: #52af51;
  
  /* Neuer Orange Ton */
  --brand-orange: #ff8c00;
  --brand-orange-hover: #e07b00;

  /* Base surfaces */
  --bg: #070d08;
  
  --panel: #0a110b;
  
  --panel-2: #0f1a10;
  

  /* Text & accents */
  --text: #eaf6ee;
  
  --muted: #a9cbb8;
  

  /* Neon gradient mapped to the logo's two greens */
  --neon: var(--brand-1);
  
  --neon-2: var(--brand-2);
  

  /* Drop shadow */
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.28);

  /* Link colors (derived from brand) */
  --link: color-mix(in oklab, var(--brand-1) 86%, white 0%);
  --link-visited: color-mix(in oklab, var(--brand-2) 86%, white 0%);
  --link-hover: color-mix(in oklab, var(--brand-1) 94%, white 0%);
  --link-active: color-mix(in oklab, var(--brand-2) 94%, white 0%);
}

*{
  box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
  
html {
    scroll-behavior: smooth;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  isolation: isolate;
}

.container{
  width:min(1100px,92vw);
  margin-inline:auto}

/* ================================================== */
/* NEUE BANNER STYLES                                */
/* ================================================== */
.content-banner {
    width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 2rem 0;
    box-shadow: var(--shadow);
    border: 1px solid rgba(125,220,140,.15);
    display: block;
}


/* ==== Base link styles ==== */
a{
  color: var(--link);
  text-underline-offset: 2px;
  text-decoration-thickness: from-font;
  text-decoration-color: color-mix(in oklab, var(--link) 55%, transparent);
}
a:hover{
  color: var(--link-hover);
  text-decoration-color: currentColor;
}
a:active{
  color: var(--link-active);
}
a:visited{
  color: var(--link-visited);
}
a:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--link) 45%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Utility: muted link */
a.muted{
  color: var(--muted);
  text-decoration-color: color-mix(in oklab, var(--muted) 55%, transparent);
}
/* Keep menu and footer links as previously styled */
.menu a{ color: var(--text); }
.foot-links a,.foot-legal a{ color: var(--muted); }
.foot-links a:hover,.foot-legal a:hover{ color: var(--text); }

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background:linear-gradient(180deg,rgba(14,18,22,.95),rgba(14,18,22,.75));
  border-bottom:1px solid rgba(125,220,140,.2)}

.site-header .nav{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.6rem 0}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 40px;
}

.brand img {
  height: 40px;
  width: auto;
}

/* Fix: verhindert Zeilenumbruch bei An- & Verkauf */
.menu a[href="#buy-sell"] {
  white-space: nowrap;
}

.menu{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-left:auto}

.menu a{
  padding:.5rem .75rem;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  opacity:.9}

.menu a:hover{
  background:rgba(125,220,140,.15);
  opacity:1;
  box-shadow:inset 0 0 0 1px rgba(125,220,140,.25)}

.nav-toggle{
  display:none;
  background:none;
  border:0;
  color:var(--text);
  cursor:pointer}

.nav-toggle span{
  display:block;
  width:28px;
  height:2px;
  background:var(--text);
  margin:6px 0;
  border-radius:2px}

.submenu{
  position:relative}

.submenu-btn{
  background:transparent;
  border:1px solid rgba(125,220,140,.35);
  color:var(--text);
  padding:.4rem .8rem;
  border-radius:12px;
  cursor:pointer}

.submenu-panel{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + .5rem);
  background:var(--panel);
  padding:.4rem;
  border-radius:12px;
  box-shadow:var(--shadow)}

.submenu:hover .submenu-panel{
  display:block}

.submenu-panel a{
  display:block;
  white-space:nowrap;
  padding:.45rem .8rem;
  border-radius:10px}

.hero{
  position:relative;
  padding:7rem 0 4rem}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:center}

.hero h1{
  font-family:Inter,sans-serif;
  font-size:clamp(40px,7vw,84px);
  line-height:1.02;
  margin:0 0 .5rem;
  letter-spacing:.02em;
  text-shadow:0 0 18px rgba(125,220,140,.45)}

.hero h1 span{
  color:var(--neon)}

.lead{
  color:var(--muted);
  font-size:1.05rem}

.cta-row{
  display:flex;
  gap:.8rem;
  margin-top:1rem}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.75rem 1rem;
  border-radius:14px;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:.2s all}

.btn.primary{
  background:linear-gradient(90deg,var(--neon),var(--neon-2));
  color:#032412;
  font-weight:800;
  box-shadow:0 0 26px rgba(125,220,140,.25)}

/* NEUER ORANGE BUTTON */
.btn.orange {
  background: var(--brand-orange);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.4);
}
.btn.orange:hover {
  background: var(--brand-orange-hover);
  box-shadow: 0 0 20px rgba(255, 140, 0, 0.6);
}

.btn.ghost{
  border-color:rgba(125,220,140,.4);
  color:var(--text)}

.btn.secondary{
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.btn.secondary:hover {
    background: rgba(255,255,255,0.1);
}


.btn.ghost:hover,.more-btn:hover{
  background:rgba(125,220,140,.12)}

.badges{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:1rem 0 0;
  padding:0;
  list-style:none}

.badges li{
  font-weight:600;
  padding:.35rem .6rem;
  border-radius:999px;
  background:rgba(125,220,140,.12);
  border:1px solid rgba(125,220,140,.25)}

.hero-art img{
  width:min(420px,90%);
  margin-inline:auto;
  filter:drop-shadow(0 0 25px rgba(125,220,140,.35))}

.floating{
  animation:floating 6s ease-in-out infinite}

@keyframes floating{
  0%,100%{
  transform:translateY(0)}

50%{
  transform:translateY(-10px)}
}

.assortment{
  padding:4rem 0;
  background:linear-gradient(180deg,transparent,rgba(125,220,140,.05) 40%,transparent)}

.assortment h2,.hours h2,.events h2,.gallery h2,.directions h2,.contact-section h2,.community h2,.newsletter h2{
  font-family:Inter,sans-serif;
  letter-spacing:.02em}

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-top:1.4rem}

.card{
  background:var(--panel);
  border:1px solid rgba(125,220,140,.15);
  border-radius:16px;
  padding:1rem;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:.6rem}

.card p{
  color:var(--muted)}

.hours{
  padding:3.4rem 0}

.hours-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.6rem;
  margin-top:1rem}

.hours-item{
  background:var(--panel-2);
  border:1px solid rgba(125,220,140,.15);
  border-radius:12px;
  padding:.8rem;
  display:flex;
  align-items:center;
  justify-content:space-between}

.hours-note{
  grid-column:1/-1;
  color:var(--muted);
  margin-top:.5rem}

.events{
  padding:3.4rem 0}

.events-header{
  display:flex;
  gap:1rem;
  align-items:flex-end;
  justify-content:space-between}

.filters{
  display:flex;
  align-items:center;
  gap:.5rem}

.event-list{
  margin-top:1.2rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem}

/* HINWEIS: Die alte .event Klasse wurde hier entfernt, 
   da sie unten durch die "Banner-Styles" komplett ersetzt wird.
*/

.event .meta{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.95rem;
  align-items:center}

.tags{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  margin-left:auto}

.tag{
  border:1px solid rgba(125,220,140,.35);
  color:var(--neon);
  padding:.15rem .45rem;
  border-radius:999px;
  font-size:.8rem;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  line-height:1}

.gallery{
  padding:3.4rem 0}

.masonry{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.6rem}

.masonry figure{
  margin:0;
  background:var(--panel-2);
  border:1px solid rgba(125,220,140,.15);
  border-radius:12px;
  overflow:hidden}

.masonry figcaption{
  padding:.5rem;
  border-top:1px solid rgba(125,220,140,.1);
  color:var(--muted);
  font-size:.9rem;
  text-align:center}

.buy-sell{
  padding:3.4rem 0;
  background:linear-gradient(180deg,transparent,rgba(125,220,140,.04) 40%,transparent)}

.community{
  padding:3.4rem 0}

.newsletter{
  padding:3.4rem 0;
  background:linear-gradient(180deg,transparent,rgba(125,220,140,.04) 60%,transparent)}

.panel{
  background:var(--panel);
  border:1px solid rgba(125,220,140,.15);
  border-radius:16px;
  padding:1rem;
  box-shadow:var(--shadow)}

.directions{
  padding:3.4rem 0}

.two-col, .two-col-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

/* NEUE GRID KLASSEN FÜR REDESIGN */
.shop-grid {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
}

.shop-card {
    display: flex;
    flex-direction: column;
    padding: 0.8rem;
    border: 1px solid rgba(125,220,140,.2);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
    background: rgba(255,255,255,0.03);
}
.shop-card:hover {
    background: rgba(125,220,140,.1);
    transform: translateY(-2px);
}
.shop-card strong {
    color: var(--neon);
    display: block;
}
.shop-card span {
    color: var(--muted);
    font-size: 0.9rem;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    text-decoration: none;
    border: 1px solid rgba(125,220,140,.2);
    border-radius: 16px;
    transition: all 0.2s;
}

.social-card img {
    width: 50%;
    height: auto;
    margin-bottom: 1rem; /* Sorgt für etwas Abstand zum Text darunter */
}

.social-card:hover {
    background: rgba(125,220,140,.1);
    transform: translateY(-5px);
    border-color: var(--neon);
}
.social-card h3 { margin: 0; color: var(--neon); transition: color 0.2s;}
.social-card p { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--muted); }

/* SOCIAL MEDIA FARBEN OVERRIDES */
/* WhatsApp: Grün */
.social-card.sc-wa h3 { color: #25D366; }
.social-card.sc-wa:hover { 
    border-color: #25D366; 
    background: rgba(37, 211, 102, 0.15); 
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.3);
}

/* Discord: Blurple */
.social-card.sc-dc h3 { color: #5865F2; }
.social-card.sc-dc:hover { 
    border-color: #5865F2; 
    background: rgba(88, 101, 242, 0.15); 
    box-shadow: 0 0 15px rgba(88, 101, 242, 0.3);
}

/* Instagram: Magenta */
.social-card.sc-ig h3 { color: #E1306C; }
.social-card.sc-ig:hover { 
    border-color: #E1306C; 
    background: rgba(225, 48, 108, 0.15); 
    box-shadow: 0 0 15px rgba(225, 48, 108, 0.3);
}

/* TikTok: Pink/Red Accent */
.social-card.sc-tt h3 { color: #FE2C55; }
.social-card.sc-tt:hover { 
    border-color: #FE2C55; 
    background: rgba(254, 44, 85, 0.15); 
    box-shadow: 0 0 15px rgba(254, 44, 85, 0.3);
}

.map-container iframe{
  width:100%;
  height:320px;
  border:0;
  border-radius:12px;
  box-shadow:var(--shadow)}

.contact-section{
  padding:3.4rem 0}

.contact-form{
  background:var(--panel);
  border:1px solid rgba(125,220,140,.15);
  border-radius:16px;
  padding:1rem;
  box-shadow:var(--shadow)}

.contact-form .grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem}

label{
  display:grid;
  gap:.4rem}

input,textarea,select{
  background:#0a0f14;
  border:1px solid rgba(125,220,140,.25);
  border-radius:12px;
  padding:.7rem;
  color:var(--text);
  outline:none}

input:focus,textarea:focus,select:focus{
  box-shadow:0 0 0 3px rgba(125,220,140,.25)}

.site-footer{
  padding:2rem 0;
  border-top:1px solid rgba(125,220,140,.2);
  background:linear-gradient(180deg,rgba(14,18,22,.75),rgba(14,18,22,.95))}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1rem;
  align-items:center}

.foot-brand img{
  height:36px}

.foot-links,.foot-legal{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap}

.foot-links a,.foot-legal a{
  color:var(--muted);
  text-decoration:none}

.foot-links a:hover,.foot-legal a:hover{
  color:var(--text)}


/* ================================================== */
/* NEWS SLIDER (HOMEPAGE)                             */
/* ================================================== */

.news-preview {
    padding: 3.4rem 0;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Karten-Styling */
.news-card {
    background: var(--panel);
    border: 1px solid rgba(125, 220, 140, 0.15);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%; 
}

.news-card:hover {
    transform: translateY(-5px);
    border-color: var(--neon);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.news-card-img {
    height: 240px; 
    width: 100%;
    object-fit: cover; 
    background: var(--panel-2);
}

.news-card-content {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-meta {
    font-size: 0.8rem;
    color: var(--neon);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
}

.news-title {
    color: var(--text);
    margin: 0 0 0.8rem 0;
    font-size: 1.1rem;
    line-height: 1.4;
    font-weight: 600;
}

.news-date {
    margin-top: auto; 
    color: var(--muted);
    font-size: 0.85rem;
}


/* ================================================== */
/* MOBILE SLIDER LOGIC (CSS ONLY)                     */
/* ================================================== */
/* Gilt für News, Sortiment (Cards) und Gallery (Masonry) */
@media (max-width: 980px) {
    .hero-grid{
        display: flex;
        flex-direction: column-reverse;
        gap: 2rem;
    }
    .hero-copy { text-align: center; }
    .cta-row { justify-content: center; }
    .badges { justify-content: center; }
    
    .event-list{
        grid-template-columns:repeat(2,1fr)}

    .two-col, .two-col-grid{
        grid-template-columns:1fr}

    .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-form .grid{
        grid-template-columns:1fr}

    .menu{
        display:none;
        position:absolute;
        right:1rem;
        top:64px;
        background:var(--panel);
        padding:.8rem;
        border-radius:14px;
        box-shadow:var(--shadow);
        flex-direction:column}

    .menu.open{
        display:flex}

    .nav-toggle{
        display:block;
        margin-left:auto}

    .hours-grid{
        grid-template-columns:repeat(2,1fr)}
    
    /* UNIVERSAL MOBILE SLIDER STYLES */
    /* Anwenden auf News, Sortiment (.cards) und Impressionen (.masonry) */
    .news-grid, .cards, .masonry, .social-grid {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding-bottom: 1.5rem;
        grid-template-columns: none !important; /* Grid überschreiben */
        
        /* Scrollbar verstecken */
        scrollbar-width: none; 
        -ms-overflow-style: none; 
    }
    
    .news-grid::-webkit-scrollbar, 
    .cards::-webkit-scrollbar, 
    .masonry::-webkit-scrollbar {
        display: none; 
    }

    /* Items innerhalb der Slider */
    .news-card, .card, .masonry figure, .social-card {
        min-width: 85vw; /* Breite auf Handy */
        scroll-snap-align: center;
        margin: 0; /* Masonry margin reset */
    }
    
    .masonry figure {
        width: 85vw; /* Explizite Breite für figures */
    }
}

@media (max-width:560px){
  .event-list{
  grid-template-columns:1fr}
  
  .hours-grid{
  grid-template-columns:1fr}
  
  .social-grid {
      grid-template-columns: 1fr;
  }
}

/* Pager button */.more-btn{
  width:100%;
  justify-content:center;
  background:transparent;
  border:1px solid rgba(125,220,140,.4);
  color:var(--text);
  margin-top:.5rem}


.hours-item{
  display:flex;
  align-items:center;
  gap:.6rem}

.hours-item span{
  flex:1;
  min-width:0}

.hours-item strong{
  margin-left:auto;
  white-space:nowrap}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(60% 100% at 70% 20%, rgba(111,227,142,.10), transparent 70%),
    radial-gradient(60% 90% at 65% 40%, rgba(56,212,122,.08), transparent 70%),
    radial-gradient(60% 70% at 75% 80%, rgba(167,243,198,.06), transparent 70%);
  animation: bgFloat 18s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}

/* Kill-Justify nur für Überschriften (h1–h6) */
:is(h1, h2, h3, h4, h5, h6)[style*="text-align"] {
  text-align: start !important;
}

.article-content > h1:first-child {
  display: none;
}

/* ================================================== */
/* EVENT KACHELN FIXED (BANNER STYLE)                 */
/* ================================================== */
.event {
    padding: 0 !important; /* Wichtig: Padding vom Container nehmen, damit Bild am Rand sitzt */
    overflow: hidden; /* Damit das Bild die runden Ecken nicht überlappt */
    display: flex;
    flex-direction: column;
    
    /* Basis Card Styles */
    background-color: rgba(20, 25, 30, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    margin-bottom: 1rem; /* Abstand zwischen Events */
}

.event-img-wrapper {
    width: 100%;
    height: 160px; /* Etwas flacher, das wirkt bei Logos oft eleganter */
    background-color: #0d1117; /* Der dunkle Hintergrund bleibt */
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    /* NEU: Flexbox sorgt dafür, dass das Logo perfekt mittig sitzt */
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-img-wrapper img {
    width: 100%;
    height: 100%;
    
    /* WICHTIGSTE ÄNDERUNG: */
    object-fit: contain; /* Zeigt das GANZE Bild, nichts wird abgeschnitten */
    padding: 20px;       /* Gibt dem Logo Luft zum Rand (Abstand) */
    
    display: block;
    transition: transform 0.5s ease;
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.5)); /* Kleiner Schatten für bessere Lesbarkeit */
}

/* Der Zoom-Effekt bleibt, wirkt aber dezenter */
.event:hover .event-img-wrapper img {
    transform: scale(1.1);
}

.event-content {
    padding: 1.2rem; /* Content hat wieder Abstand */
    flex-grow: 1;
}

.event h3 {
    margin-top: 0; 
}