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

  /* 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}

img {
  max-width: 100%;
  height: auto;
  display: block;
  isolation: isolate; /* Füge diese Zeile hinzu */
}

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


/* ==== 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; /* Statt block */
  align-items: center;
  flex-shrink: 0; /* WICHTIG! */
  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)}

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

.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}

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

.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{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem}

.map 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)}

@media (max-width:980px){
  .hero-grid{
  grid-template-columns:1fr;
  gap:1rem}

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

.event-list{
  grid-template-columns:repeat(2,1fr)}

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

.two-col{
  grid-template-columns: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}
}

@media (max-width:560px){
  .cards{
  grid-template-columns:1fr}

.event-list{
  grid-template-columns:1fr}

.masonry{
  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}

@media (max-width: 980px){
  .hours-grid{
  grid-template-columns:repeat(2,1fr)}
}

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

.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;
}