/* -------------------------
   Color variables (user-customizable)
   ------------------------- */
:root{
  /* core colors (hex strings) */
  --color-accent: 	#ffbf00;        /* accent (gold) - editable */
  --color-title:  #a67c00;        /* headings */
  --color-text:   #eaeaea;        /* main text */
  --color-muted:  #cfcfcf;        /* secondary text / notes */
  --bg-overlay:   rgba(0,0,0,0.45);/* kept for overlays */

  /* derived usable CSS values (will be maintained by JS) */
  --accent-rgba: rgba(255,215,0,0.95);
  --accent-glow: rgba(255,215,0,0.06);
}

/* ------------------------------
   Color overrides: use theme vars
   - put this at the very end of style.css
   ------------------------------ */

/* Primary headings & logo/title */
header.page-header h1,
.hero-title,
.presentation-main,
.gallery-title,
.info-title,
.about-us-text h2,
.step h2,
.presentation-title,
.mint-card,        /* optional: mint button emphasis */
#siteMap a.active,
.gallery-dots button.active {
  color: var(--color-accent);
}

/* Secondary headings / section subtitles */
h2, h3, h4 {
  color: var(--color-title);
}

/* General body text */
body, p, li, .info-text, .hero-sub, .mint-numbers, .btn.mint {
  color: var(--color-text);

}

/* Muted / note text */
.note, .gallery-note, .avatars-hint, .help-tooltip {
  color: var(--color-muted);
}

/* Tooltips / borders using accent glow */
.help-tooltip { border-color: var(--accent-glow); }

/* Links: keep readable but use accent for emphasis */
a, .social-btn {
  color: var(--color-text);
}
a:hover, .tb-item:hover, .social-btn:hover {
  color: var(--color-accent);
}

/* If any very specific element still forces white, add targeted fallbacks */
/* Use only if necessary: */
header.page-header h1,
.about-us-text h2,
.info-title {
  /* remove !important unless really needed; keep it ready for stubborn rules */
  color: var(--color-accent) !important;
}



/* --- Global --- */

body {
  margin: 0;
  background-image: url('background.webp'); /* Pfad relativ zur CSS-Datei */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--color-text);
}

/* Mobile: echtes "fixed" Hintergrund-Element, arbeitet zuverlässiger als background-attachment:fixed */
@media (max-width: 520px) {
  .mobile-fixed-bg {
    position: fixed;        /* bleibt stehen während der Seite scrollt */
    inset: 0;               /* top:0; right:0; bottom:0; left:0; */
    z-index: -2;            /* unter body::before (z-index:-1) und unter allen Inhalten */
    pointer-events: none;   /* verhindert Interaktion */
    background-image: url('images/background-mobile.webp'); /* Pfad anpassen falls nötig */
    background-size: cover;       /* oder 'contain' / 'auto 100%' je nach gewünschtem Verhalten */
    background-position: center top;
    background-repeat: no-repeat;
    will-change: transform;  /* hint für GPU, kann helfen */
    -webkit-transform: translateZ(0); /* Performance-Hint für iOS/Android */
    transform: translateZ(0);
    opacity: 1;              /* sichtbar */
  }

  /* Fallback falls Browser fixed anders behandeln: body background verstecken, damit nur das div genutzt wird */
  body {
    background-image: none !important;
    background-attachment: scroll !important;
  }

  /* wenn du einen dunklen overlay verwendest, stelle sicher, dass body::before weiterhin über dem bg liegt */
  body::before { z-index: -1; } /* sollte bereits so sein in deinem CSS */
}

/* dunkler globaler Overlay (neutral gehalten) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: -1;
}


/* ===== Left side "map" / fixed nav (dezenterer Look, fade-in) ===== */
#siteMap {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  z-index: 9999;
  pointer-events: none;            /* keine Interaktion wenn ausgeblendet */
  border-radius: 12px;
  padding: 12px 10px;
  box-sizing: border-box;

  /* much more subtle panel */
  background: rgba(0,0,0,0.18);    /* weniger Kontrast */
  backdrop-filter: blur(6px);      /* weniger stark als vorher */
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.55); /* dezenter Schatten */
  border: 1px solid rgba(255,255,255,0.03);/* sehr feiner Rand */

  opacity: 0;                       /* default: unsichtbar (auf Hero) */
  transform-origin: left center;
  transition: opacity 360ms cubic-bezier(.2,.9,.2,1), transform 360ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease;
  will-change: opacity, transform;
}

/* visible state: shown but still subtle */
#siteMap.visible {
  opacity: 0.88;                    /* fast sichtbar, aber nicht grell */
  pointer-events: auto;             /* aktivierbar */
  transform: translateY(-50%) translateX(0);
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
}

/* remove default list bullets + tighten spacing */
#siteMap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ensure li doesn't add unexpected markers or indent */
#siteMap li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* make the anchor full-width for easier click target */
#siteMap a {
  display: block;      /* already set but ensures full-width */
  width: 100%;
  box-sizing: border-box;
}

/* optional: subtle focus outline for accessibility */
#siteMap a:focus {
  outline: 3px solid rgba(255,215,0,0.12);
  outline-offset: 2px;
}

/* hover: make it a little more visible */
#siteMap a:hover,
#siteMap a:focus {
  transform: translateX(6px);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.98);
}

/* active (current) section: gentle accent — nicht grell */
#siteMap a.active {
  font-weight: 800;
  color: rgba(255,215,0,0.92);
  background: linear-gradient(90deg, rgba(255,215,0,0.04), rgba(255,165,0,0.02));
  box-shadow: 0 6px 18px rgba(255,170,30,0.03);
  transform: translateX(8px);
}

/* thin separators but very faint */
#siteMap li + li { border-top: 1px solid rgba(255,255,255,0.012); padding-top: 8px; margin-top: 8px; }

/* responsive: hide on small screens */
@media (max-width: 920px) {
  #siteMap, .sitemap { display: none; }
}

/* Optional: subtle stronger appearance when user intentionally hovers near it:
   if pointer enters the left-most 40px of viewport, increase opacity (works on desktop) */
#siteMap.hovered { opacity: 0.98; box-shadow: 0 18px 46px rgba(0,0,0,0.65); }


/* ---------- Floating centered top bar (compact float + collapsed thin line) ---------- */
:root {
  --float-width: 520px;
  --float-max: calc(100% - 48px);
  --float-height: 52px;         /* fully expanded */
  --float-collapsed: 8px;       /* collapsed visible line */
  --float-bg: rgba(8,8,8,0.64);
  --float-glow: rgba(255,215,0,0.06);
  --float-radius: 999px;
}

/* container: centered and floating below top */
.topbar-floating {
  position: fixed;
  top: 18px;                     /* minimal gap from top so it 'floats' (not flush) */
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--float-width), var(--float-max));
  height: var(--float-height);
  padding: 6px;
  box-sizing: border-box;
  border-radius: var(--float-radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), var(--float-bg));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.02) inset;
  z-index: 10030;
  transition: height 320ms cubic-bezier(.2,.9,.2,1), padding 260ms ease, box-shadow 260ms ease, transform 260ms ease;
  pointer-events: none; /* inner nav handles pointer-events while collapsed */
  will-change: height, padding, transform;
}

/* inner nav keeps items and pointer events */
.topbar-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 8px;
  box-sizing: border-box;
  pointer-events: auto; /* allow interactions when visible */
  transition: opacity 220ms ease, transform 220ms ease;
}

/* collapsed state: reduce to thin visible stroke, keep center indicator */
.topbar-floating.collapsed {
  height: var(--float-collapsed);
  padding: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* when collapsed, hide inner items (but leave a subtle line visible) */
.topbar-floating.collapsed .topbar-inner {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* small persistent thin pill visible in collapsed state (center) */
.topbar-floating::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  translate: 0 -50%;
  width: 90px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), var(--float-glow));
  opacity: 0;
  transition: opacity 220ms ease, width 220ms ease;
  pointer-events: none;
}

/* show thin pill when collapsed (so a visible line stays) */
.topbar-floating.collapsed::after {
  opacity: 1;
  width: 140px; /* slightly longer when collapsed */
}

/* tb items (icons / emojis) */
.tb-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 6px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 18px;
  color: #fff;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* hover/focus */
.tb-item:hover, .tb-item:focus {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.04);
  color: rgba(255,215,0,0.95);
  outline: none;
}

/* ---------- Mobile: Topbar Icons only ---------- */
@media (max-width: 768px) {
  /* Text weglassen, nur Icons */
  .tb-item {
    padding: 6px;       /* kleineres Padding für mobile */
    min-width: 36px;    /* schon gesetzt, beibehalten */
    font-size: 0;       /* Text unsichtbar machen */
  }

  /* Optional: Icons etwas größer machen */
  .tb-item svg {
    width: 28px;
    height: 28px;
  }

  /* Gap zwischen den Icons kleiner */
  .topbar-inner {
    gap: 8px;
  }
}


/* --- HERO Section --- */

.hero-video-hero {
  position: relative;
  width: 100%;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #000; /* neutral, bleibt als Fallback */
}

/* Video */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.45); /* darf bleiben, beeinflusst keine Farben */
  pointer-events: none;
}

/* Overlay block */
.hero-overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 24px;
  max-width: 1100px;

  /* neutrale, transparente Karte */
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  border-radius: 12px;
}

/* Hero Titel – nur Größe, KEINE Farbe */
.hero-title {
  font-size: clamp(2rem, 5vw, 3.7rem);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
 color: var(--color-title);
}

/* Untertitel – nur Größe, KEINE Farbe */
.hero-sub {
  margin: 0 0 18px;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
 color: var(--color-text);
}

/* CTA – neutraler Button */
.hero-cta {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.3);
 color: var(--color-title);
  border-color: rgba(255,215,0,0.12); /* dezenter goldener Rand */
}

/* Mobile */
@media (max-width: 520px) {
  .hero-bg { display: none; }
  .hero-video-hero { 
    background-image: url('hero-poster.png'); 
    background-size: cover; 
    background-position: center; 
  }
  .hero-title { font-size: 1.8rem; }
  .hero-sub { font-size: 1rem; }
  .hero-overlay { 
    padding: 16px; 
    margin-top: -330px; /* <-- verschiebt die Card nach oben */
  }
}
/* ===========================
   HERO VIDEO – DESKTOP / MOBILE SWITCH
   =========================== */

/* Standard = Desktop */
.desktop-video {
  display: block;
}
.mobile-video {
  display: none;
}

/* Mobile */
@media (max-width: 520px) {
  .desktop-video {
    display: none !important;
  }
  .mobile-video {
    display: block !important;
  }

}
/* --- INFOSECTION: Einheitliche Karten --- */
.info-section {
  padding: 120px 20px 60px 20px;
  display: flex;
  justify-content: center;
}

.info-grid {
  max-width: 1200px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  justify-items: center;
  align-items: start; /* erlaubt variable Kartengrößen; setze auf 'stretch' oder nutze .equal-height weiter unten */
}

/* OPTION: Wenn du gleiche Kartenhöhen willst, füge .equal-height zur .info-grid hinzu */
.info-grid.equal-height { align-items: stretch; }
.info-grid.equal-height .info-card { /* sorgt dafür, dass Text den verbleibenden Platz füllt */
  display: flex;
  flex-direction: column;
}
.info-grid.equal-height .info-content { flex: 1 1 auto; }
.info-grid.equal-height .info-text { flex-grow: 1; }

/* Basis-Info-Card -- mit CSS-Variable für Bildhöhe */
.info-card {
  /* Default-Bildhöhe für diese Karte; überschreibbar per Modifier oder inline via style */
  --img-height: 220px;

  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  text-align: center;
  width: 100%;
  max-width: 360px;
  min-height: 0; /* keine fixe Min-Höhe, damit Karten variabel sind */
  padding: 24px;
  box-sizing: border-box;
}

/* Alle direkten Kinder füllen die Kartenbreite */
.info-card > * { width: 100%; }

/* Bild-Wrapper füllt Höhe aus Variable */
.info-img-wrapper {
  width: 100%;
  height: var(--img-height);        /* Höhe steuerbar per --img-height */
  border-radius: 12px;
  position: relative;              /* für .info-img-number */
  overflow: hidden;
  margin-bottom: 20px;
}

/* Standard Bild-Einstellung */
.info-img-wrapper img,
.info-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* nummer/overlay zentriert */
.info-img-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffbf00;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  pointer-events: none;
}

/* Text */
.info-title {
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 600;
}

.info-text {
  margin: 0;
  font-size: 1rem;
  opacity: 0.85;
  /* Standard: Text nimmt nur so viel Platz wie nötig – so können Karten unterschiedliche Höhen haben */
  flex: 0 0 auto;
}

/* --- Speziell für Avatar-Karten --- */
.info-card--avatars { --img-height: 160px; } /* Avatar-Karte verwendet eigene Höhe */



 .info-card--avatars .info-content { transform: translateY(-30px); }
 .info-card--tall .info-content { transform: translateY(10px); }
 .info-card--small .info-content { transform: translateY(10px); }


/* spezieller Avatar-Wrapper (zentriert Avatare) */
.info-img-wrapper--avatars {
  width: 100%;
  height: var(--img-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  margin-bottom: 20px;
  overflow: visible; /* wenn Avatare überlappen sollen */
}

/* Avatar-Stile */
.avatar {
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff1; /* leichter Hintergrund, falls Bild transparent ist */
}
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Basis-Avatar-Größen (Desktop / Tablet) */
.avatar--large {
  width: 100px;
  height: 100px;
  margin-right: -20px; /* Überlappung auf großen Displays */
  z-index: 2;
  transition: width .18s ease, height .18s ease, margin .18s ease, transform .18s ease;
}
.avatar--small {
  width: 60px;
  height: 60px;
  z-index: 1;
  margin-left: 10px; /* sanfte Überlappung */
  margin-top: 45px;
  transition: width .18s ease, height .18s ease, margin .18s ease, transform .18s ease;
}

/* --- Modifier-Klassen: leicht anpassbar --- */
/* Beispiel: größere Höhen */
.info-card--tall { --img-height: 300px; }
.info-card--small { --img-height: 300px; }

/* --- Responsive --- */
@media (max-width: 520px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .info-card {
    padding: 18px;
    max-width: 100%;
  }
  /* kleinere Bildhöhen mobil */
  .info-card { --img-height: 180px; } /* Standard mobil */
  .info-card--tall { --img-height: 220px; }
  .info-card--avatars { --img-height: 120px; }
  .info-card--small { --img-height: 160px; }

  .info-title { font-size: 1.2rem; }
  .info-text { font-size: 0.9rem; }
}
/* ------------------------------
   Mobile fixes für InfoSection
   Paste this at the EOF (mobile-only overrides)
   ------------------------------ */
@media (max-width: 520px) {
  /* Sicherstellen, dass nichts horizontal rausragt */
  html, body { overflow-x: hidden; }

  /* Info section padding reduzieren damit Karten nicht über den Rand gehen */
  .info-section {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 48px;
    padding-bottom: 36px;
  }

  /* Grid -> 1 Spalte (bereits vorhanden, aber hier nochmal explizit) */
  .info-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: stretch;      /* gleiche Höhen falls .equal-height gesetzt */
    width: 100%;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
  }

  /* Karten: volle Breite, keine Überbreite */
  .info-card {
    max-width: 100%;
    width: 100%;
    padding: 14px;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 12px;
    overflow: visible; /* Avatare dürfen überlappen, aber keine Page-Overflow erzeugen */
  }

  /* Bild-Wrapper: Höhe anpassen & Inhalt zentrieren */
  .info-card { --img-height: 180px; } /* default mobile image height */
  .info-card--tall { --img-height: 220px; }
  .info-card--avatars { --img-height: 120px; }

  .info-img-wrapper,
  .info-img-wrapper--avatars {
    height: var(--img-height);
    max-height: calc(var(--img-height) + 2px);
    overflow: hidden;
    border-radius: 10px;
  }

  /* Bilder: Objektposition zentriert (verhindert top/bottom-cropping) */
  .info-img-wrapper img,
  .info-img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* behält Fill-Look */
    object-position: center;  /* wichtig: zentriert Bild, kein abgeschnittenes Gesicht */
    display: block;
  }

  /* Avatar-Wrapper: engerer gap */
  .info-img-wrapper--avatars { gap: 8px; justify-content: center; align-items: center; }

  /* Avatare: kleiner und weniger negativ margin (verhindert Verrutschen) */
  .avatar--large {
    width: 72px;
    height: 72px;
    margin-right: -10px; /* weniger Überlappung auf kleinen Displays */
    z-index: 2;
  }
  .avatar--small {
    width: 44px;
    height: 44px;
    margin-left: -10px;
    transform: translateY(6px); /* kleine vertikale Korrektur für optische Balance */
    z-index: 1;
  }

  /* Verhindere, dass info-content nach oben/links überlappt */
  .info-card--avatars .info-content { transform: none; padding-top: 6px; }

  /* Title/Text lesbar, kleinere Schriftgrößen mobil */
  .info-title { font-size: 1.15rem; margin-bottom: 8px; }
  .info-text { font-size: 0.95rem; line-height: 1.35; }

  /* Extra: safe clamp für sehr kleine Phones */
  @media (max-width: 360px) {
    .avatar--large { width: 64px; height: 64px; margin-right: -8px; }
    .avatar--small { width: 40px; height: 40px; margin-left: -8px; transform: translateY(4px); }
    .info-card { padding: 12px; }
    .info-img-wrapper { height: var(--img-height); }
  }
}
/* --- Fix: Erstes Bild auf Mobile nicht croppen --- */
@media (max-width: 520px) {
  .info-card.info-card--small .info-img,
  .info-card.info-card--small .info-img-wrapper img {
    object-fit: contain !important; 
    object-position: center center !important;
    background: #00000020; /* optional: schöner Rahmen, kannst du löschen */
  }
}

/* ========== DEBUG + FORCE-AVATAR-FIX (PUT AT EOF) ========== */
@media (max-width: 520px) {
  /* 1) Avatar-Wrapper: links ausrichten, Padding, kontrolliertes overflow */
  .info-card.info-card--avatars .info-img-wrapper--avatars {
    justify-content: flex-start !important;   /* Gruppe nach links */
    padding-left: 12px !important;            /* Abstand vom Kartenrand */
    gap: 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* 2) Force: große/normale Avatar-Größe kleiner machen und nach links ziehen */
  .info-card.info-card--avatars .avatar--large {
    width: 130px !important;
    height: 130px !important;
    margin-left: -135px !important;   /* verschiebt nach links */
    margin-right: 0 !important;      /* verhindert Rausziehen nach rechts */
    transform: translateY(-45px) !important; /* leicht nach oben */
    z-index: 3 !important;
  }

  /* 3) Force: kleiner Avatar sichtbar & leicht angehoben */
  .info-card.info-card--avatars .avatar--small {
    width: 85px !important;
    height: 85px !important;
    margin-left: -58px !important;
    margin-top: 0 !important;
    transform: translateY(-25px) !important;
    z-index: 2 !important;
  }

  /* 4) Stelle sicher, dass die inneren <img> korrekt skalieren */
  .info-card.info-card--avatars .avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  /* Safety: falls Bild-Inhalte im Avatar Bereich verschoben sind */
  .avatar img { object-fit: cover; object-position: center; display:block; }

  /* Verhindere, dass info-content nach oben/links überlappt */
  .info-card--avatars .info-content { transform: none; padding-top: 6px; }

  /* Title/Text lesbar, kleinere Schriftgrößen mobil */
  .info-title { font-size: 1.15rem; margin-bottom: 8px; }
  .info-text { font-size: 0.95rem; line-height: 1.35; }

  /* Extra: safe clamp für sehr kleine Phones */
  @media (max-width: 360px) {
    .avatar--large { width: 64px; height: 64px; margin-right: -8px; }
    .avatar--small { width: 40px; height: 40px; margin-left: -8px; transform: translateY(4px); }
    .info-card { padding: 12px; }
    .info-img-wrapper { height: var(--img-height); }
  }
}
/* --- Fix: Erstes Bild auf Mobile nicht croppen --- */
@media (max-width: 520px) {
  .info-card.info-card--small .info-img,
  .info-card.info-card--small .info-img-wrapper img {
    object-fit: contain !important; 
    object-position: center center !important;
    background: #00000020; /* optional: schöner Rahmen, kannst du löschen */
  }
}

/*---------- Schriftzug, wir präsentieren prime panther -------*/

.presentation-section {
  text-align: center;
  padding: 80px 20px 40px 20px; /* oben mehr Luft */
}

.presentation-title {
  font-size: 2.6rem;
  font-weight: 800;
  opacity: 0.75;
  margin: 0 0 16px 0;
  -webkit-text-stroke: 0.8px black;
}

.presentation-main {
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.8px black;
}

.mint-section {
  padding: 60px 20px;
  text-align: center;
}

.countdown {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 40px;
  letter-spacing: 0.05em;
}

/* --- The Mints starts...Date...  --- */

.mint-start-date{
  font-weight: 500;


}



/* --- Upgraded Mint Progress Bar (replace previous .mint-progress-container / .mint-progress-bar) --- */

.mint-progress-container {
  width: 90%;
  max-width: 880px;
  height: 40px; /* etwas höher für besseren Look */
  margin: 0 auto 18px auto;
  position: relative;
  border-radius: 999px;
  padding: 4px; /* innerer Rahmen für Depth */
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.12));
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.6),
    0 8px 30px rgba(0,0,0,0.5);
  overflow: hidden;
}

/* subtle decorative glow ring (behind content) */
.mint-progress-container::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,200,55,0.06), rgba(255,100,10,0.03));
  filter: blur(12px);
  z-index: 0;
  pointer-events: none;
}

/* the moving fill */
.mint-progress-bar {
  height: 100%;
  width: 0%;
  position: relative;
  z-index: 2;
  border-radius: 999px;
  overflow: hidden;
  transform-origin: left center;
  transition: width 700ms cubic-bezier(.2,.9,.2,1), transform 200ms ease;
  /* 3D-ish gradient */
  background: linear-gradient(90deg, rgba(255,215,0,0.98) 0%, rgba(255,165,0,0.95) 40%, rgba(255,215,80,0.95) 100%);
  box-shadow:
    0 8px 24px rgba(255,170,30,0.08),
    inset 0 -6px 14px rgba(0,0,0,0.35);
}

/* animated sheen traveling across the fill */
.mint-progress-bar::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -50%;
  width: 200%;
  height: 200%;
  transform: rotate(15deg);
  background: linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.18) 100%);
  opacity: 0.6;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: sheen 3.2s linear infinite;
}

/* sheen animation */
@keyframes sheen {
  from { transform: translateX(-110%) rotate(15deg); }
  to   { transform: translateX(110%) rotate(15deg); }
}


/* micro pulse when new mints happen */
.mint-progress-bar.just-increased {
  transform: scaleY(1.04);
  box-shadow:
    0 14px 40px rgba(255,165,0,0.18),
    inset 0 -8px 18px rgba(0,0,0,0.45);
  transition: transform 160ms ease;
}

/* when no max known, show soft striped pattern instead of full fill */
.mint-progress-bar.unknown-max {
  background: repeating-linear-gradient(
    90deg,
    rgba(255,215,0,0.95) 0 12px,
    rgba(255,180,30,0.85) 12px 24px
  );
  animation: stripes 1.8s linear infinite;
}
@keyframes stripes { from { background-position: 0 0 } to { background-position: 48px 0 } }

@media (max-width: 520px) {
  .mint-progress-container { height: 28px; padding: 2px; }
  .mint-progress-label { font-size: 0.85rem; }
  .mint-numbers { font-size: 1.2rem; }
  .mint-start-card { padding: 12px; margin: 14px auto; }
  .mint-start-card .countdown { font-size: 2rem; }
  .mint-start-card .mint-start-date { font-size: 1rem; }
}


/* Blur für den Fortschrittsbalken während Countdown */
#mintProgressContainer.blur-active {
  filter: blur(6px);
  transition: filter 0.5s ease;
}

/* ---------- Sync Blur: progress bar + numbers ---------- */
/* Wenn der progress-container geblurred ist, blure auch die Zahlen direkt darunter */
#mintProgressContainer.blur-active + .mint-numbers,
.mint-numbers.blur-active {
  filter: blur(6px);
  opacity: 0.55;        /* leicht reduziert, passt optisch zum blur */
  transition: filter 0.35s ease, opacity 0.35s ease;
  pointer-events: none; /* verhindert versehentliche Interaktionen */
}

.mint-numbers {
  font-size: 1.5rem;
  opacity: 0.85;
}
.mint-start-date {
  font-size: 3rem;
  margin-bottom: 20px;
  opacity: 0.85;
}

/* ===== Mint Start Card (Datum + Countdown, like mint-card) ===== */
.mint-start-card {
  width: 92%;
  max-width: 880px;
  margin: 18px auto;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(6,6,6,0.55));
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* inner container to constrain widths (like .mint-card-inner) */
.mint-start-card-inner {
  width: 100%;
  max-width: 740px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 6px 2px;
}

/* ensure the date + countdown use the card's contrast */
.mint-start-card .mint-start-date {
  font-size: clamp(1.25rem, 2.4vw, 2.6rem); /* smaller on mobile, big on desktop */
  margin: 0;
  font-weight: 700;
  color: var(--color-text); /* existing color variable */
  opacity: 0.98;
  -webkit-text-stroke: 0px; /* remove existing stroke if any */
  text-align: center;
  letter-spacing: 0.01em;
}

/* big, prominent countdown */
.mint-start-card .countdown {
  font-size: clamp(1.8rem, 6vw, 4rem);  /* responsive */
  font-weight: 800;
  margin-top: 6px;
  margin-bottom: 0;
  color: var(--color-text);
  text-align: center;
  letter-spacing: 0.03em;
  /* optional subtle glow to keep it readable */
  text-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* Responsive: bisschen weniger padding on small screens */
@media (max-width: 520px) {
  .mint-start-card { padding: 12px; margin: 14px auto; }
  .mint-start-card .countdown { font-size: 2.2rem; }
  .mint-start-card .mint-start-date { font-size: 1.1rem; }
}


/* ---------- Clean Luxury Mint Card ---------- */
.mint-card {
  width: 92%;
  max-width: 980px;
  margin: 28px auto;
  padding: 36px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(4,4,4,0.55));
  box-shadow: 0 30px 90px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
  z-index: 3;

  /* center content vertically & horizontally */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* inner container constrains width and centers column items */
.mint-card-inner {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-sizing: border-box;
}

/* central controls column */
.mint-controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center; /* centers buttons and single items */
}

/* control-row: center rows by default, full-width */
.control-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* center simple rows (buttons) */
  gap: 12px;
  box-sizing: border-box;
}

/* price & qty rows keep label/value spacing */
.price-row, .qty-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* label / value styling */
.price-row .label { opacity: 0.95; font-weight: 600; }
.price-row .value { font-weight: 800; }

/* small-info stacked but centered as block */
.small-info { width: 100%; display:flex; flex-direction:column; gap:6px; align-items:center; }

/* info-panther center */
.info-panther { width: 100%; display:flex; justify-content:center; }

/* make the mint button slightly larger and centered */
.btn.mint {
  padding: 12px 22px;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 800;
  min-width: 220px;
  text-align: center;
}

@media (max-width: 520px) {
  .mint-card { padding: 20px; width: 94%; }
  .mint-card-inner { gap: 12px; }
  .btn.mint { min-width: 140px; font-size: 1rem; padding: 10px 18px; }
  .qty-control input { width: 60px; height: 40px; font-size: 1rem; }
  .qty-btn { width: 36px; height: 36px; font-size: 1rem; }
  .small-info { font-size: 0.85rem; gap: 4px; }
  .help-tooltip { font-size: 0.95rem; padding: 10px 12px; max-width: 280px; }
}

/* help icon: small, subtle, clickable */
.help-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
  color: #fff;
  padding: 6px;
  cursor: pointer;
  transition: transform 140ms ease, background 120ms ease;
  z-index: 40;
}
.help-icon:hover,
.help-icon:focus {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.04);
  color: rgba(255,215,0,0.95);
  outline: none;
}

/* simple accessible tooltip container */
.help-tooltip {
  position: absolute;
  top: 52px; /* below the help icon */
  right: 6px;
  max-width: 320px;
  padding: 10px 12px;
  background: #101010;
  border: 1px solid rgba(255,215,0,0.06);
  color: #fff;
  font-size: 13px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 45;
}

/* visible state */
.help-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* small caret */
.help-tooltip::after {
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: #101010;
  border-left: 1px solid rgba(255,215,0,0.06);
  border-top: 1px solid rgba(255,215,0,0.06);
}

/* hide on small screens if it blocks */ 
@media (max-width: 480px){
  .help-tooltip { display:block; left: 8px; right: 8px; top: 56px; }
}

/* ---------- Mint Card: UI polish (buttons, qty, status) ---------- */

/* Generic button base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  min-height: 44px;
  transition: transform 150ms ease, box-shadow 160ms ease, opacity 140ms ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  color: #0b0b0b;
  background: linear-gradient(90deg, rgba(255,220,100,1) 0%, rgba(255,190,30,1) 60%);
}

/* Primary (connect) - slightly lighter gold */
.btn.primary {
  background: linear-gradient(90deg, rgba(255,230,140,1) 0%, rgba(255,200,60,1) 60%);
  color: #070707;
  border: 1px solid rgba(255,255,255,0.06);
}
.btn.primary:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(255,180,30,0.12); }

/* Mint (call-to-action) - stronger */
.btn.mint {
  padding: 12px 26px;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 900;
  min-width: 220px;
  background: linear-gradient(90deg, rgba(255,195,30,1) 0%, rgba(255,145,0,1) 100%);
  color: #0b0b0b;
  text-shadow: none;
  box-shadow: 0 22px 60px rgba(255,150,30,0.12), 0 6px 18px rgba(0,0,0,0.5);
}
.btn.mint:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 28px 80px rgba(255,140,20,0.14); }

/* Disabled state */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* small secondary buttons (copy etc.) */
.small-btn {
  padding: 6px 8px;
  border-radius: 8px;
  font-weight: 700;
  background: rgba(255,255,255,0.03);
  color: var(--color-text);
  border: 1px solid rgba(255,255,255,0.04);
  min-height: 32px;
}

/* Quantity control */
.qty-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.35);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.04);
}
.qty-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
  color: var(--color-text);
}
.qty-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.04); }

/* numeric input */
.qty-control input[type="number"] {
  width: 88px;
  max-width: 128px;
  text-align: center;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 1rem;
  -moz-appearance: textfield;
}
.qty-control input[type="number"]::-webkit-outer-spin-button,
.qty-control input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* labels */
.qty-label { font-weight:700; color:var(--color-text); margin-right:8px; }

/* small info area (whitelist/claimed) */
.small-info { gap:8px; color:var(--color-muted); font-size:0.95rem; }

/* mint reason (errors / notices) */
.mint-reason { color: #ffd98a; min-height: 1.2em; }

/* status inline */
.status-inline p { margin: 4px 0; color: var(--color-muted); font-size: 0.95rem; }
.status-inline strong { color: var(--color-text); }

/* help-icon tweaks (keeps same position) */
.help-icon { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); }

/* Responsive tweaks */
@media (max-width: 920px) {
  .btn.mint { min-width: 160px; padding: 10px 18px; }
  .qty-control input[type="number"] { width: 72px; }
  .mint-artwork { height: 140px; }
}
/* === Bigger, cleaner, luxury Mint Card === */

/* Container */
.mint-card {
  width: 94%;
  max-width: 1100px; /* größer */
  padding: 48px;     /* mehr Luft */
  border-radius: 26px;
  backdrop-filter: blur(10px);
}

/* Inner area */
.mint-card-inner {
  max-width: 850px;  /* größer */
  gap: 24px;
}

/* Controls column */
.mint-controls {
  gap: 18px;
}

/* ALL FONT SIZES HIGHER */
.mint-card,
.mint-card * {
  font-size: 1.1rem;     /* global + größer */
  line-height: 1.45;
}

/* Labels (Price, Total, etc.) */
.price-row .label {
  font-size: 1.15rem;
}
.price-row .value {
  font-size: 1.25rem;
  font-weight: 900;
}

/* Buttons */
.btn,
.qty-btn {
  font-size: 1.15rem !important;  /* endlich gut lesbar */
  padding: 14px 26px !important;
  border-radius: 16px !important;
}

.btn.mint {
  min-width: 260px;
  font-size: 1.25rem !important;
  padding: 16px 30px !important;
}

/* Quantity input */
.qty-control input {
  font-size: 1.2rem;
  width: 70px;
  height: 48px;
  border-radius: 12px;
}

/* Help icon slightly bigger */
.help-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.help-icon svg {
  width: 26px;
  height: 26px;
}

/* Tooltip larger & more readable */
.help-tooltip {
  font-size: 1.05rem;
  padding: 14px 16px;
  max-width: 360px;
}


/* ---------- Elegante Galerie (robust & pixelgenau) ---------- */
.gallery-section {
  padding: 36px 20px 60px 20px;
  display: flex;
  justify-content: center;
  background: transparent;
}

.gallery-inner {
  width: 92%;
  max-width: 1100px;
  text-align: center;
  color: #fff;
}

.gallery-title {
  font-size: 1.6rem;
  margin: 0 0 18px 0;
  opacity: 0.95;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Fix: immer 1 Slide pro Viewport, Bildgröße begrenzen --- */
.gallery-viewport { overflow: hidden; position: relative; }

/* jede Slide = genau 100% der Viewport-Breite (eine Slide sichtbar) */
.gallery-track {
  display: flex;
  transition: transform 560ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  align-items: center;
}

/* wichtige Änderung: jede Slide belegt 100% */
.gallery-slide {
  flex: 0 0 100%;      /* <-- sorgt dafür, dass immer nur 1 Slide pro View sichtbar ist */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px;
  box-sizing: border-box;
  margin: 0;
}

/* Bild kleiner machen, damit es nicht die ganze Card füllt */
.gallery-slide img {
  width: 86%;              /* relative Breite innerhalb der Slide */
  max-width: 560px;        /* Limit auf Desktop */
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

/* responsive kleinere max-widths */
@media (max-width: 520px) {
  .gallery-slide img { width: 92%; max-width: 320px; }
  .gallery-controls { gap: 8px; }
  .gallery-btn { padding: 8px 12px; font-size: 1.1rem; }
  .gallery-dots button { width: 9px; height: 9px; }
}

/* controls */
.gallery-controls {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.gallery-btn {
  border: 0;
  background: rgba(0,0,0,0.45);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.3rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transition: transform 140ms ease, background 140ms ease;
}
.gallery-btn:hover { transform: scale(1.04); background: rgba(0,0,0,0.6); }

.gallery-dots { display:flex; gap:8px; align-items:center; }
.gallery-dots button { width:11px; height:11px; border-radius:50%; border:0; background: rgba(255,255,255,0.18); cursor:pointer; }
.gallery-dots button.active { background: rgba(255,215,0,0.95); transform: scale(1.25); }

.gallery-note { margin-top:10px; opacity:0.8; font-size:0.95rem; }

@media (max-width: 920px) {
  .gallery-slide img { max-width: 520px; }
  .gallery-btn { padding: 8px 10px; font-size: 1.1rem; }
}
@media (max-width: 520px) {
  .gallery-slide img { max-width: 360px; }
  .gallery-title { font-size: 1.25rem; }
}

/* Sichert, dass track und slides keine extra whitespace/margin erzeugen */
.gallery-track { margin: 0; padding: 0; }
.gallery-slide { margin: 0; }

.gallery-slide img { max-width: none; }


/* === Globaler Body Galerie=== */
body {
  margin: 0;
  background-color: #000; /* komplett schwarz */
}

/* Entferne alte Overlay-Effekte */
body::before {
  display: none;
}

/* --- About Section: abgerundete Ecken (entzerrt) --- */
.about-section.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;

  background-color: #000; /* schwarz */
  /* mehr vertikaler Raum: oben größer, unten noch großzügiger */
  padding: 110px 0 120px;
  box-sizing: border-box;
  z-index: 1;

  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
  overflow: hidden;
}

/* sorgt dafür, dass der Text nicht an der Oberkante klebt */
.about-inner {
  width: 92%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 24px;   /* <-- erhöhtes Padding oben/unten + horizontal */
  box-sizing: border-box;
  text-align: center;
  position: relative;
  z-index: 2;
}

.about-title {
  font-size: 1.9rem;
  margin-bottom: 2,5rem; /* Abstand unter der Überschrift */
  font-weight: 600;
}

.about-text {
  font-size: 1.2rem;
  line-height: 1.55;
  margin-bottom: 1.3rem; /* Abstand zwischen Absätzen */
}
.link-fanpage {
  text-align: center;
  margin: 20px 0; /* optional Abstand */
}


/* --- Gallery Section: leichte Anhebung des Karussells --- */
.gallery-section.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;

  background-color: #000; /* schwarz */
  /* Top reduziert (war 96px) damit die Galerie höher sitzt; Bottom bleibt großzügig */
  padding: 56px 0 140px;
  box-sizing: border-box;
  z-index: 1;

  border-radius: 0; /* KEINE Rundung */
  overflow: visible; /* damit der Glow nicht abgeschnitten wird */
  min-height: 420px; /* verhindert zu schmale Darstellung */
}

/* innere Box: leicht nach oben ziehen, Titel bleibt lesbar */
.gallery-inner {
  position: relative;
  z-index: 2;
  width: 92%;
  max-width: var(--gallery-max);
  margin: 0 auto;
  /* leichte Anhebung: verschiebt die Inhalte etwas nach oben über das Padding */
  margin-top: -28px;
  padding-top: 6px; /* behält kleinen Abstand zum oberen Rand */
}

/* Entferne die alten Streifen */
.about-section.full-bleed::after,
.gallery-section.full-bleed::after {
  content: none;
}

/* Inhalt über dem Glow halten */
.about-inner,
.gallery-inner {
  position: relative;
  z-index: 2;
}

.gallery-section.full-bleed::before {
  content: "";
  position: absolute;
  top: -2%;            /* statt 50% — weiter oben */
  left: 50%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(255,255,255,0.65) 0%, rgba(0,0,0,0) 70%);
  transform: translateX(-50%); /* nur horizontal zentrieren */
  z-index: 1;
  pointer-events: none;
}

/* Optional: Glow um Mint Card falls du willst */
.mint-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0) 70%);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}

/* Damit die Sektion richtig stacked ist */
.gallery-section.full-bleed,
.about-section.full-bleed,
.mint-card {
  position: relative;
}


/* ---------- Galerie: einfache Steuerung der Größe ---------- */
/* Passe hier die zwei Werte an:
   --gallery-max: maximale Breite der Galerie-Oberfläche (Card)
   --img-max: maximale Pixel-Größe pro Bild (Quadrat)
*/
:root{
  --gallery-max: 840px;   /* verringern = kleinere Box (z.B. 720px für noch kompakter) */
  --img-max: 480px;       /* verringern = kleineres Bild (z.B. 420px) */
}

/* Begrenze die Galerie-Box (sichtbare Fläche) */
.gallery-inner {
  max-width: var(--gallery-max);
  margin-left: auto;
  margin-right: auto;
}

/* Viewport selber kleiner machen (visuelle Box innerhalb gallery-inner) */
.gallery-viewport {
  max-width: calc(var(--gallery-max) - 40px); /* etwas Innenabstand berücksichtigen */
  margin: 0 auto;
  padding: 6px; /* dezenter Rand */
  border-radius: 14px;
}

/* Jede Slide nimmt weiterhin 100% der Viewport-Breite */
.gallery-slide { padding: 12px; }

/* Bildgröße reduzieren / caps */
.gallery-slide img {
  width: 84%;               /* Prozent innerhalb der Slide — verringern = schmaler */
  max-width: var(--img-max);/* feste Obergrenze in px */
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

/* Falls du die Box noch kompakter auf Mobile willst */
@media (max-width: 920px) {
  :root { --gallery-max: 680px; --img-max: 420px; }
  .gallery-slide img { width: 88%; }
}
@media (max-width: 520px) {
  :root { --gallery-max: 360px; --img-max: 320px; }
  .gallery-slide img { width: 92%; }
}

/* -------------------------------
   Gallery: Licht-Glow auf Mobile nach oben schieben
   Paste at EOF — wirkt nur <=520px
   ------------------------------- */
@media (max-width: 520px) {
  .gallery-section.full-bleed::before {
    /* weiter nach oben schieben (stärker negative Top) */
    top: 4% !important;

    /* optional: etwas größer machen, damit es auf schmalen Viewports schön bleibt */
    width: min(120vw, 900px) !important;
    height: min(120vw, 900px) !important;

    /* leicht nach oben ziehen (zusätzlich zur top-Angabe) für feinere Kontrolle */
    transform: translateX(-50%) translateY(-12%) !important;

    /* sicherstellen, dass es hinter inhalt bleibt (normal war z-index:1) */
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.95; /* falls du es etwas sanfter möchtest, reduziere */
  }

  /* Falls du auch die .gallery-inner anheben willst (optional) */
  .gallery-inner {
    margin-top: -8px; /* zieht Inhalte minimal nach oben, nicht nötig falls ::before reicht */
  }
}

/* --- Gallery Dots: auf Mobile perfekte Kreise --- */
@media (max-width: 520px) {
  .gallery-dots button {
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;

    /* verhindert Zerquetschen durch flex oder transform */
    flex-shrink: 0 !important;
    transform: none !important;
  }

  /* aktiver Punkt bleibt ebenfalls rund */
  .gallery-dots button.active {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    transform: none !important;
  }
}


/* ===== About Us (Creators) — upgraded with overlapping circular avatars ===== */
.about-us {
  /* mehr Abstand oben, damit es weiter weg von der Galerie-Kante sitzt */
  padding: 200px 20px 64px;
  display: flex;
  justify-content: center;
  background: transparent; /* sitzt auf schwarzem full-bleed Hintergrund */
}

.about-us-inner {
  width: 92%;
  max-width: 1100px;
  box-sizing: border-box;
}

/* Layout: zwei Spalten — links Avatare, rechts Text.
   align-items: flex-start sorgt dafür, dass alles weiter unten beginnt */
.about-us-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 36px;
  align-items: flex-start;
}

/* Avatar-Container (ersetzt vorherige .about-us-photo) */
.about-us-avatars {
  position: relative;
  width: 360px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* einzelne Avatar-Kreise */
.avatar {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 6px 18px rgba(255,255,255,0.02) inset;
  border: 4px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  backdrop-filter: blur(2px);
}

/* Fill the img to cover and center */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
}

/* Positioning: big avatar in front-right, smaller behind-left */
.avatar--large {
  left: 54%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 240px;
  height: 240px;
  border: 5px solid rgba(255,215,0,0.06); /* subtle gold accent */
  filter: drop-shadow(0 22px 48px rgba(0,0,0,0.6));
}
.avatar--small {
  left: 28%;
  top: 62%;
  transform: translate(-50%, -50%) rotate(-6deg);
  z-index: 2;
  width: 150px;
  height: 150px;
  border: 3px solid rgba(255,255,255,0.03);
  opacity: 0.98;
}

.avatar--small2 {
  left: 81%;
  top: 62%;
  transform: translate(-50%, -50%) rotate(-6deg);
  z-index: 2;
  width: 150px;
  height: 150px;
  border: 3px solid rgba(255,255,255,0.03);
  opacity: 0.98;
}


/* Hint text (dezent unter den Avataren) */
.avatars-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.38);
  z-index: 1;
  pointer-events: none;
}

/* Text-Column: bleibt rechts */
.about-us-text h2 {
  margin: 0 0 12px 0;
  font-size: clamp(2.2rem, 3.0vw, 4rem);
  color: var(--color-title);
  -webkit-text-stroke: 0.8px black;
  padding: 10px;           /* optional, Abstand innen */
  display: inline-block;   /* damit die Border nur um den Text geht */

}

.about-us-text .lead {
  color: #ffffff;
  font-size: 1.03rem;
  margin-bottom: 10px;
  line-height: 1.55;
  font-size: 1.4rem;
}

.about-us-text p {
  color: #ffffff;
  margin: 0 0 12px 0;
  line-height: 1.6;
font-size: 1.4rem;
  font-weight:700;
}
.card-background-text {
  padding: 32px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(6,6,6,0.55));
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* ===========================
   About Us — Mobile avatar adjustments
   (put at EOF; wirkt nur auf <=520px)
   =========================== */
@media (max-width: 520px) {

  /* 1) Grid: auf 1 Spalte bringen und Avatare links ausrichten */
  .about-us-grid {
    grid-template-columns: 1fr;   /* stapeln: Avatar-Block über dem Text */
    gap: 18px !important;
    align-items: start !important;
  }

  /* 2) Avatar-Container: kleiner, links ausrichten, Abstand zum Rand */
  .about-us-avatars {
    width: 220px !important;
    height: 220px !important;
    justify-self: start !important;   /* Container am linken Grid-Rand */
    margin-left: 12px !important;     /* Abstand vom Bildschirmrand */
    margin-right: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: visible !important;     /* Überlappung weiterhin erlauben */
  }


  /* 3) Großer Avatar: kleiner, deutlich weiter links und etwas nach oben */
  .about-us-avatars .avatar--large {
    left: 80% !important;              /* viel weiter links innerhalb des Containers */
    top: 30% !important;               /* etwas höher platzieren */
    transform: translate(-50%, -50%) !important; /* zentrierende Übersetzung beibehalten */
    width: 160px !important;
    height: 160px !important;
    border-width: 4px !important;     /* optische Balance */
    z-index: 3 !important;
    filter: drop-shadow(0 18px 36px rgba(0,0,0,0.55)) !important;
  }

  /* 4) Kleiner Avatar (small2): deutlich links, etwas höher, kleiner */
  .about-us-avatars .avatar--small2 {
    left:0% !important;               /* nahe der linken Kante des Containers */
    top: 53% !important;               /* höher positioniert, sodass er nicht abgeschnitten wird */
    transform: translate(-50%, -50%) rotate(-6deg) !important;
    width: 92px !important;
    height: 92px !important;
    z-index: 2 !important;
    opacity: 0.98 !important;
    border-width: 2px !important;
  }

  /* 6) Sehr schmale Phones: noch kleinere Avatare + weniger links margin */
  @media (max-width: 380px) {
    .about-us-avatars {
      width: 190px !important;
      height: 190px !important;
      margin-left: 8px !important;
    }
    .about-us-avatars .avatar--large {
      left: 20% !important;
      top: 16% !important;
      width: 140px !important;
      height: 140px !important;
    }
    .about-us-avatars .avatar--small2 {
      left: 4% !important;
      top: 12% !important;
      width: 80px !important;
      height: 80px !important;
    }
  }
}


/* --- Social links: zentriert, kompakt, responsiv --- */
.creator-links {
  margin-top: 18px;
  display: flex;
  justify-content: center;    /* zentriert die Buttons unter dem Text */
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;            /* Umbruch auf Mobile */
  padding: 0;
}

/* ein neues, schlankes Button-Design für Social Links */
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  font-size: 0.95rem;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: var(--color-title);
  min-width: 92px;           /* sorgt für gleichmäßige Breite */
  text-align: center;
  box-sizing: border-box;
  transition: transform 140ms ease, background 140ms ease;
}

/* Hover / active states */
.social-btn:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.06);
}

/* RESPONSIVE: auf kleineren Bildschirmen Avatare über dem Text (einspaltig) */
@media (max-width: 880px) {
  .about-us {
    padding: 56px 18px 48px;
  }
  .about-us-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
    align-items: center;
  }

  .about-us-avatars {
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 6px;
  }
  .avatar {
    position: relative;
    margin: 0 auto 12px auto;
    transform: none;
    display: inline-block;
  }
  .avatar--large { width: 200px; height: 200px; border-width: 4px; }
  .avatar--small { width: 140px; height: 140px; border-width: 3px; transform: none; }
  .avatars-hint { position: static; color: rgba(255,255,255,0.5); margin-top: 6px; }
}

/* Hinweis unsichtbar machen ohne DOM-Änderung (kein Layout-Shift) */
.avatars-hint {
  display: none !important;
  /* Alternative, falls du lieber Platz behalten willst:
     visibility: hidden; opacity: 0; pointer-events: none;
     (wird nicht empfohlen, hier reicht display:none) */
}


/* -------------------Footer – small and discreet -------------*/
.site-footer { background: transparent; padding: 12px 0 36px; color: rgba(0,0,0,0.6); font-size:0.85rem; }
.footer-inner { max-width:1100px; margin:0 auto; display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.footer-links { display:inline-flex; gap:12px; align-items:center; margin-left:6px; }
.footer-links a { color: rgba(0,0,0,0.6); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; }
.footer-links a:hover { color: rgba(0,0,0,0.85); border-bottom-color: rgba(0,0,0,0.08); }
@media (max-width:640px){ .footer-inner{flex-direction:column;gap:6px;} }




/* ===========================
   Mobile-only fixes (paste at EOF)
   wirkt nur auf <= 920px -> kein Desktop-Impact
   =========================== */

@media (max-width: 920px) {
  /* Safety: kein horizontal scrollen auf mobilen Geräten */
  html, body {
    overflow-x: hidden; /* NUR auf Mobile */
    -webkit-overflow-scrolling: touch;
  }

  /* Deaktiviere fixed background auf Mobil, das kann zu verschobenem sichtbaren Bereich führen */
  body {
    background-attachment: scroll; /* statt fixed */
    background-position: center center;
    background-size: cover;
  }

  /* Prevent full-bleed containers using 100vw from creating overflow.
     On mobile we revert them to simple 100% width and center them. */
  .about-section.full-bleed,
  .gallery-section.full-bleed {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;   /* falls negative margins vorher kompensiert wurden */
    padding-right: 0 !important;
    overflow: hidden; /* verhindert Glows/::before aus dem Viewport ragen */
    box-sizing: border-box;
  }

  /* Inner wrappers behalten max-width & horizontal padding, damit Inhalt zentriert bleibt */
  .about-inner, .gallery-inner {
    width: 100%;
    max-width: 1100px; /* wie gehabt */
    padding-left: 18px;
    padding-right: 18px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* Kappe große Pseudo-Elemente (Glows), damit sie nicht rechts außerhalb ragen */
  .gallery-section.full-bleed::before,
  .about-section.full-bleed::after,
  .mint-card::before {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(90vw, 900px) !important;
    max-width: 900px !important;
    box-sizing: border-box;
  }

  /* Bilder, Videos & iframes nicht über Viewport hinaus erlauben */
  img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Buttons/Inputs: begrenze Breite, reduziere Padding damit nichts herausragt */
  .btn, button, input, textarea, .mint-card, .mint-start-card, .info-card {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Falls du noch festen width auf .gallery-viewport hast: */
  .gallery-viewport, .gallery-track, .gallery-slide {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* Extra strengeres Mobile-Tuning für sehr kleine Phones */
@media (max-width: 520px) {
  html, body { overflow-x: hidden; touch-action: pan-y; }

  /* noch konservativere Limits */
  .gallery-section.full-bleed::before,
  .about-section.full-bleed::after,
  .mint-card::before {
    width: min(92vw, 700px) !important;
    max-width: 700px !important;
  }

  /* verringere Innenabstände leicht, damit nichts überläuft */
  .mint-card { padding-left: 12px !important; padding-right: 12px !important; }
  .info-section { padding-left: 12px !important; padding-right: 12px !important; }
  .hero-overlay { padding-left: 12px !important; padding-right: 12px !important; }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}