/* ==== THEME ==== */
:root{
  --bg: #0b0f0b;
  --panel: #0f170f;
  --panel-2: #151f15;
  --brand: #d2fdd2;
  --text: #c8f1c8;
  --muted: #9cd39c;
  --accent: #4fe66b;
  --accent-2: #2f5e2f;
  --ring: #3b8d4a;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 10% -10%, #102010 0%, transparent 60%),
              radial-gradient(1200px 800px at 110% 10%, #0d1b0d 0%, transparent 55%),
              var(--bg);
  color: var(--text);
  margin: 0;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrapper{max-width:1200px; margin:0 auto; padding:0 1.2rem}

/* ==== HEADER ==== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color-mix(in oklab, var(--panel), black 10%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; padding:0.9rem 0;
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none}
.logo-mark{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:9px;
  background: linear-gradient(180deg, var(--accent) 0%, #3fb15f 100%);
  color:#031203; font-weight:800;
  box-shadow: var(--shadow);
}
.logo-text{color:var(--brand); font-weight:700; letter-spacing:.3px}

.site-nav{display:flex; gap:.6rem}
.site-nav a{
  color: var(--brand);
  text-decoration:none;
  padding:.55rem .8rem;
  border-radius: 999px;
  border:1px solid transparent;
  transition: .2s ease;
}
.site-nav a:hover{ background: var(--panel-2); border-color: rgba(255,255,255,.06) }
.site-nav a.active{ background: var(--accent-2); color:#fff }

.nav-toggle{ display:none; background:none; border:none; padding:.4rem; border-radius:8px }
.nav-toggle .bar{display:block; width:22px; height:2px; background:var(--brand); margin:5px 0}

/* ==== CORNER LOGOS ==== */
.corner-logo{ position:absolute; width:80px; height:80px; z-index:2 }
.top-left{ top:0; left:0 }
.top-right{ top:0; right:0 }
.corner-logo img{ width:100%; height:auto }

/* ==== HERO ==== */
.hero{ position:relative; overflow:hidden; }
.hero-inner{ padding: 4.5rem 0 3rem 0 }
.hero-copy h1{ font-size: clamp(2rem, 4.5vw, 3.2rem); margin:.2rem 0 .6rem 0; color:var(--brand) }
.hero-copy p{ max-width: 60ch; color: var(--muted) }
.hero .cta-row{ display:flex; gap:.6rem; margin-top:1rem }
.hero-glow{
  position:absolute; inset:auto -15% -40% -15%;
  height: 360px;
  background: radial-gradient(40% 55% at 50% 45%, rgba(79,230,107,.25), transparent 55%);
  filter: blur(40px);
}

/* ==== SECTIONS / CARDS ==== */
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:1rem; margin:1rem 0 0.6rem }
.muted{ color: var(--muted) }
.features{ padding: 1.2rem 0 2rem 0 }
.feature-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1rem }
.card{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: var(--shadow);
}

/* Kontaktseite: Links in Karten neutral/markenkonform darstellen */
.contact-cards a,
.contact-cards a:visited,
.contact-cards a:active{
  color: inherit; /* gleiche Farbe wie normaler Text, nicht blau/lila */
  text-decoration: none;
}
.contact-cards a:hover,
.contact-cards a:focus-visible{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.25);
  outline: none;
}

/* ==== EVENTS ==== */
.cards-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1rem }
.event-card{
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: var(--shadow);
}
.event-card h3{ margin:.2rem 0 .4rem 0; color:var(--brand) }
.event-card .meta{ font-size:.95rem; color:var(--muted) }
.event-card .desc{ margin-top:.6rem }

/* ==== GALLERY ==== */
/* Masonry-Layout ohne Lücken via CSS-Multicolumns */
.gallery-grid{
  columns: 1;
  column-gap: 1rem;
  padding: 1rem 0 2rem;
}
/* Responsiv mehr Spalten */
@media (min-width: 520px){
  .gallery-grid{ columns: 2; }
}
@media (min-width: 820px){
  .gallery-grid{ columns: 3; }
}
@media (min-width: 1120px){
  .gallery-grid{ columns: 4; }
}
/* Jedes direkte Kind als Block platzieren und Brüche verhindern */
.gallery-grid > *{
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 1rem;
}

.gallery-grid img, .gallery-grid video{
  width:100%; border-radius:14px; object-fit:cover; display:block;
  box-shadow: var(--shadow);
  transition: transform .2s ease;
}
.gallery-grid img:hover, .gallery-grid video:hover{ transform: scale(1.03) }

/* ==== TEAM ==== */
.team-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; padding: 1rem 0 2rem }
.member{ perspective:1000px; height:420px }
.flip-card{ width:100%; height:100% }
.flip-card-inner{
  position:relative; width:100%; height:100%; text-align:center;
  transition: transform .8s; transform-style:preserve-3d;
}
.flip-card:hover .flip-card-inner{ transform: rotateY(180deg) }
.flip-card-front, .flip-card-back{
  position:absolute; inset:0; border-radius:14px; backface-visibility:hidden; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) , var(--panel); color: var(--text);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding: .8rem;
  border:1px solid rgba(255,255,255,.06);
}
.flip-card-front img{ width:100%; height:82%; object-fit:contain; object-position:center top; background: var(--panel-2); border-bottom:1px solid rgba(255,255,255,.08) }
.flip-card-front p{ margin:.4rem 0 0 0 }
.flip-card-back{ transform: rotateY(180deg); justify-content:center; padding:1.2rem; position:relative }
.set-btn{
  display:inline-block; background: var(--accent-2); color:#fff; padding:.55rem 1rem;
  border:none; border-radius:9px; font-weight:700; cursor:pointer; transition: transform .2s ease, background .2s ease;
  box-shadow: var(--shadow);
}
.set-btn:hover{ transform: translateY(-1px) }
.set-popup{ position: fixed; inset: 0; background: rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:10000 }
.set-popup.hidden{ display:none }
.set-popup-content{ background: var(--panel); padding:1rem; border-radius:14px; box-shadow: var(--shadow); max-width:90vw; max-height:70vh }

/* ==== BUTTONS ==== */
.btn{
  display:inline-block; padding:.65rem 1rem;
  background: var(--panel); border:1px solid rgba(255,255,255,.06);
  color: var(--brand); text-decoration:none; border-radius:999px; font-weight:700;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); background: var(--panel-2) }
.btn.primary{ background: var(--accent-2); color:#fff; border-color:transparent }
.btn.primary:hover{ filter: brightness(1.05) }
.btn.ghost{ background: transparent; border-color: rgba(255,255,255,.12) }

/* ==== POPUP ==== */
.popup{
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}
.popup-box{
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid rgba(255,255,255,.08);
  padding: 1.2rem 1.4rem;
  border-radius: 16px;
  text-align: center;
  color: var(--text);
  box-shadow: var(--shadow);
  max-width: 520px; width: 92%;
}
.popup-box h2{ margin:0 0 .3rem 0; color: var(--brand) }
.popup-actions{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin-top:.8rem }
#no{ transition: top .2s, left .2s }
#no.escaped{ position:absolute }

/* Surprise image */
.surprise{
  display: none; position: fixed; top: 10%; left: 50%; transform: translateX(-50%);
  z-index: 10000; background: var(--panel); padding: 1rem; border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
}
.surprise img{ max-width: 90vw; max-height: 70vh; border-radius: 12px }

/* ==== FOOTER ==== */
.site-footer{ background: var(--panel-2); border-top: 1px solid rgba(255,255,255,.06); margin-top: 2rem }
.site-footer .wrapper{ padding: 1rem 0; text-align:center; color: var(--muted) }

/* ==== RESPONSIVE NAV ==== */
@media (max-width: 860px){
  .site-nav{ 
    position: absolute; top: 100%; left:0; right:0;
    background: var(--panel-2); border-bottom:1px solid rgba(255,255,255,.06);
    display: grid; grid-template-columns: 1fr; gap:0; padding:.4rem; display: none;
  }
  .site-nav a{ padding:.8rem 1rem; border-radius:10px }
  .nav-toggle{ display:block }
  .site-nav.open{ display: grid }
}

/* ==== ACCESSIBILITY: reduce motion ==== */
@media (prefers-reduced-motion: reduce){
  .flip-card-inner{ transition: none }
  #no{ transition: none }
}


/* ==== FIX: hero layering so buttons are clickable ==== */
.hero-inner{ position: relative; z-index: 1 }
.hero-glow{ pointer-events:none; z-index: 0 }

/* Corner logos shouldn't steal clicks */
.corner-logo{ pointer-events: none }

/* Scroll hint */
.scroll-hint{
  margin-top: 1.1rem;
  font-size: .8rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  opacity: .6;
}

/* Marquee */
.marquee{ overflow: hidden; border-block: 1px solid rgba(255,255,255,.06); background: color-mix(in oklab, var(--panel-2), black 5%) }
.marquee-track{ display:inline-flex; gap: var(--marquee-gap, 3rem); padding:.6rem 0; white-space:nowrap; animation: marquee var(--marquee-speed, 28s) linear infinite; transform: translate3d(0,0,0); }
.marquee-track span{ -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed; color: var(--muted); font-weight: 700 }
@keyframes marquee{ from{ transform: translate3d(0,0,0) } to{ transform: translate3d(calc(-1 * var(--scroll-dist, 50%)),0,0) } }
  to{ transform: translateX(-50%) }
}

/* Home gallery teaser */
.home-gallery{ padding: 1rem 0 2.2rem }
.gallery-teaser{
  display: block; position: relative; border-radius: 18px; overflow: hidden;
  border:1px solid rgba(255,255,255,.06);
  background: radial-gradient(100% 120% at 50% 60%, rgba(79,230,107,.15), transparent 60%);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.gallery-teaser .teaser-grid{
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 2px; max-height: 360px; overflow: hidden;
}
.gallery-teaser img{ width: 100%; height: 100%; object-fit: cover; display:block }
.gallery-teaser .teaser-cta{
  position: absolute; inset: auto 0 0 0; display:flex; align-items:center; justify-content:center;
  padding: .8rem; background: linear-gradient( to top, rgba(0,0,0,.6), transparent);
  font-weight: 800; color: #fff; letter-spacing:.4px;
}
.gallery-teaser:hover{ filter: brightness(1.03) }

/* Reveal on scroll */
.reveal{ opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease }
.reveal.is-visible{ opacity: 1; transform: none }


/* ==== TEAM toolbar ==== */
.toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.8rem; margin: .6rem 0 1rem;
}
.filters{ display:flex; gap:.4rem; align-items:center }
.chip{
  appearance:none; border:1px solid rgba(255,255,255,.12); background: var(--panel);
  color: var(--brand); padding:.45rem .8rem; border-radius:999px; font-weight:700; cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.chip:hover{ transform: translateY(-1px) }
.chip.is-active{ background: var(--accent-2); border-color: transparent; color:#fff }

.search{
  position:relative; display:flex; align-items:center; gap:.5rem;
  background: var(--panel); border:1px solid rgba(255,255,255,.1);
  padding:.35rem .6rem; border-radius: 12px; min-width:260px; max-width:100%;
}
.search svg{ width:20px; height:20px; fill: var(--muted) }
.search input{ background:transparent; border:none; outline:none; color:var(--text); width: 100% }

/* Role badge */
.role-badge{
  position:absolute; top:8px; left:8px; z-index:2;
  background: rgba(0,0,0,.45); color:#fff; border:1px solid rgba(255,255,255,.12);
  font-size:.75rem; padding:.15rem .5rem; border-radius: 999px; backdrop-filter: blur(4px);
}

/* Extra visuals for member card */
.member{ perspective:1000px; height:420px }
.flip-card-front::before{
  content:""; position:absolute; inset: -2px; border-radius:16px; pointer-events:none;
  background: conic-gradient(from 180deg, rgba(79,230,107,.5), transparent 30%, transparent 70%, rgba(79,230,107,.5));
  opacity:0; transition: opacity .25s ease;
}
.member:hover .flip-card-front::before{ opacity:.35 }
.member[data-playing="true"] .flip-card-front::before{ opacity:.6 }

.chip-row{ display:flex; gap:.4rem; flex-wrap:wrap; margin:.5rem 0 }
.mini-chip{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  padding:.15rem .45rem; border-radius:999px; font-size:.8rem; color:var(--brand);
}


/* ==== SNAKE MARQUEE (multi-row, alternating directions, loop) ==== */
.marquee{
  --speed: 26s;
  --gap: 2rem;
  --amp: 6px;
  overflow: hidden;
  border-block: 1px solid rgba(255,255,255,.06);
  background: color-mix(in oklab, var(--panel-2), black 4%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-row{ white-space: nowrap; }
.marquee-row + .marquee-row{ border-top: 1px dashed rgba(255,255,255,.06) }

.marquee-track{ display:inline-flex; gap: var(--marquee-gap, 3rem); padding:.6rem 0; white-space:nowrap; animation: marquee var(--marquee-speed, 28s) linear infinite; transform: translate3d(0,0,0); }
.marquee-track.rtl{ animation-name: marquee-rtl }

/* Bobbing "snake" motion per item with staggered delays */
.marquee-track span{ -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed;
  display:inline-block;
  font-weight: 800;
  color: var(--muted);
  letter-spacing:.02em;
  animation: bob 2.8s ease-in-out infinite;
}
/* Stagger delays for a wave effect */
.marquee-track span:nth-child(1){ animation-delay: 0s }
.marquee-track span:nth-child(2){ animation-delay: .1s }
.marquee-track span:nth-child(3){ animation-delay: .2s }
.marquee-track span:nth-child(4){ animation-delay: .3s }
.marquee-track span:nth-child(5){ animation-delay: .4s }
.marquee-track span:nth-child(6){ animation-delay: .5s }
.marquee-track span:nth-child(7){ animation-delay: .6s }
.marquee-track span:nth-child(8){ animation-delay: .7s }
.marquee-track span:nth-child(9){ animation-delay: .8s }
.marquee-track span:nth-child(10){ animation-delay: .9s }
.marquee-track span:nth-child(11){ animation-delay: 1s }
.marquee-track span:nth-child(12){ animation-delay: 1.1s }

@keyframes marquee-ltr{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
@keyframes marquee-rtl{ from{ transform: translateX(-50%) } to{ transform: translateX(0) } }

@keyframes bob{
  0%{ transform: translateY(0) }
  25%{ transform: translateY(var(--amp)) }
  50%{ transform: translateY(0) }
  75%{ transform: translateY(calc(var(--amp) * -1)) }
  100%{ transform: translateY(0) }
}

/* Hover to pause for readability */
.marquee:hover .marquee-track{ display:inline-flex; gap: var(--marquee-gap, 3rem); padding:.6rem 0; white-space:nowrap; animation: marquee var(--marquee-speed, 28s) linear infinite; transform: translate3d(0,0,0); }
.marquee:hover .marquee-track span{ -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed; animation-play-state: paused }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ display:inline-flex; gap: var(--marquee-gap, 3rem); padding:.6rem 0; white-space:nowrap; animation: marquee var(--marquee-speed, 28s) linear infinite; transform: translate3d(0,0,0); }
  .marquee-track span{ -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed; animation: none }
}


/* ==== SIMPLE MARQUEE (single row, seamless) ==== */
.marquee{
  overflow: hidden;
  border-block: 1px solid rgba(255,255,255,.06);
  background: color-mix(in oklab, var(--panel-2), black 4%);
}
.marquee-track.simple{ display:inline-flex; gap: var(--marquee-gap, 3rem); padding:.6rem 0; white-space:nowrap; animation: marquee var(--marquee-speed, 28s) linear infinite; transform: translate3d(0,0,0); }
.marquee-track.simple span{ color: var(--muted); font-weight: 700 }
@keyframes marquee{ from{ transform: translate3d(0,0,0) } to{ transform: translate3d(calc(-1 * var(--scroll-dist, 50%)),0,0) } } to{ transform: translateX(-50%) } }

/* ==== EASTER EGG: Acid Theme (Konami Code) ==== */
body.theme-acid{
  --bg: #0a0911;
  --panel: #0c0b14;
  --panel-2: #100f1a;
  --brand: #f4d7ff;
  --text: #f7ebff;
  --muted: #d5baff;
  --accent: #ff63d8;
  --accent-2: #6a1fa3;
  --ring: #a34ade;
}
body.theme-acid .logo-mark{ background: linear-gradient(180deg, var(--accent) 0%, #8a3cd0 100%) }
.toast{
  position: fixed; inset: auto 50% 24px auto; transform: translateX(50%);
  background: var(--panel); border:1px solid rgba(255,255,255,.12); color: var(--text);
  padding:.6rem .9rem; border-radius: 10px; box-shadow: var(--shadow); z-index: 99999;
  opacity: 0; animation: toast-in .35s ease forwards;
}
@keyframes toast-in{
  from{ opacity: 0; transform: translateX(50%) translateY(6px) }
  to{ opacity: 1; transform: translateX(50%) }
}


/* ==== LIGHTBOX ==== */
.lightbox{ position: fixed; inset:0; background: rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:10000 }
.lightbox:not(.hidden){ display:flex }
.lightbox-stage{ max-width: 92vw; max-height: 82vh; display:flex; align-items:center; justify-content:center }
.lightbox-stage img, .lightbox-stage video{ max-width: 92vw; max-height: 82vh; border-radius: 12px; box-shadow: var(--shadow) }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background: rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.15); color:#fff;
  padding:.35rem .6rem; border-radius: 10px; cursor:pointer; font-size: 1.4rem;
}
.lightbox-close{ top: 12px; right: 12px }
.lightbox-prev{ left: 12px }
.lightbox-next{ right: 12px }


/* ==== Segmented control (tabs) ==== */
.segmented{ display:flex; gap:.3rem; background: var(--panel); padding:.25rem; border-radius: 12px; border:1px solid rgba(255,255,255,.08) }
.seg{
  appearance:none; background: transparent; border:none; color: var(--brand);
  padding:.45rem .8rem; border-radius: 9px; font-weight:700; cursor:pointer;
  transition: background .2s ease, transform .15s ease;
}
.seg:hover{ transform: translateY(-1px) }
.seg.is-active{ background: var(--accent-2); color:#fff }

.small{ font-size: .92rem }

/* ==== Event card: flyer support ==== */
.event-card .flyer{
  width:100%; max-height: 180px; object-fit: cover; border-radius: 10px; margin-bottom:.6rem;
  border:1px solid rgba(255,255,255,.06);
}
.event-card .actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem }
.event-card .tag{ display:inline-block; font-size:.78rem; opacity:.85; padding:.1rem .45rem; border-radius:999px; border:1px solid rgba(255,255,255,.1) }

/* In case the lists are empty */
.event-list:empty::after{
  content: 'Keine Einträge gefunden.';
  display:block; color: var(--muted);
}


/* ==== Tab counts ==== */
.seg .count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 1.6em; height: 1.6em; margin-left:.45rem;
  border-radius:999px; font-size:.82em; padding:0 .3em;
  background: rgba(255,255,255,.08); color: var(--brand);
}
.seg.is-active .count{ background: rgba(0,0,0,.2); color:#fff }

/* ==== Event toolbar ==== */
.event-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:.4rem 0 1rem }
.event-tags{ display:flex; gap:.4rem; flex-wrap:wrap }
.chip-reset{ background: transparent; border:1px dashed rgba(255,255,255,.2) }
.chip-reset[hidden]{ display:none !important }

/* ==== Auto thumbnail when flyer missing ==== */
.flyer.thumb{
  display:grid; place-items:end start;
  background: linear-gradient(135deg, var(--accent-2), transparent), radial-gradient(90% 65% at 70% 20%, rgba(79,230,107,.25), transparent);
  aspect-ratio: 16/9; max-height:none;
}
.flyer.thumb .thumb-date{
  font-weight:800; letter-spacing:.3px; padding:.5rem .6rem; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.6)
}
.flyer.thumb .thumb-title{
  grid-column:1; grid-row:1; align-self:end; justify-self:start;
  padding: .2rem .6rem .6rem; color:#fff; opacity:.9; font-weight:600
}

/* ==== ICS button style (uses .btn) ==== */
.btn.ics{ background: var(--panel); border-color: rgba(255,255,255,.18) }
.btn.ics:hover{ background: var(--panel-2) }

/* ==== Secret panel (logo 5x click) ==== */
.secret-panel{
  position: fixed; inset:auto 12px 12px auto; z-index: 10001;
  background: var(--panel); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:.8rem .9rem; box-shadow: var(--shadow); max-width: 92vw;
}
.secret-panel h4{ margin:.1rem 0 .5rem 0; color: var(--brand) }
.secret-panel a{ color:#fff; font-weight:700 }


/* Clickable mini-chips (Instagram links) */
a.mini-chip{ text-decoration:none; color: var(--brand) }
.mini-chip{ cursor: pointer }
a.mini-chip:hover{ transform: translateY(-1px); filter: brightness(1.05) }

html[data-team-fit="cover"] .flip-card-front img{ object-fit: cover; }

/* Better contrast on the back of team cards */
.flip-card-back .mini-chip{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}
.flip-card-back a.mini-chip{ color:#fff; }
.flip-card-back .chip-row{ gap:.5rem; margin:.7rem 0 1rem; }
.flip-card-back .set-btn{ background: var(--accent-2); color:#fff; box-shadow: 0 8px 24px rgba(0,0,0,.35); }

/* Pan Mode – subtile Rotation der Logo-Markierung */
html.pan-mode .logo-mark {
  display: inline-block;
  animation: sbSpin 2.2s linear infinite;
}
@keyframes sbSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Kontakt: Links neutral (nicht blau/lila) und nicht fett */
.contact-cards a,
.contact-link{
  color: inherit !important;
  font-weight: 400 !important;
  text-decoration: none;
}
.contact-cards a:visited,
.contact-link:visited{
  color: inherit !important;
}
.contact-cards a:hover,
.contact-link:hover,
.contact-cards a:focus-visible,
.contact-link:focus-visible{
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.25);
  outline: none;
}