/* ============================================================
   SMARTMENÜ-PRINZIP für die Year-3000-Galerie (BLUNA HUB)
   Chorus-Prinzip: 3 Karten à ⅓, scroll-snap, dunkle Regenbogenfarben,
   aktive Karte = Farbe + Glow (keine Größenänderung)
   ============================================================ */

/* ---- Collections-Hauptmenü + Typen-Menü: Smartmenü-KARUSSELL
   (3 Bereiche à 33% sichtbar, wischbar, aktive Karte zentriert) ---- */
#year3000-gallery-module div.overflow-x-auto {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 10px !important;   /* symmetrisch: oben=unten=links=rechts */
  max-width: none;
  margin: 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  scrollbar-width: none;
}
#year3000-gallery-module div.overflow-x-auto::-webkit-scrollbar { display: none; }

/* ---- sm-Reihen (Level/Farben/Override): ebenfalls Smartmenü-Karussell ---- */
#year3000-gallery-module .sm-reihe {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;   /* ALLE Karten gleich hoch (auch bei Textumbruch) */
  gap: 8px;
  padding: 10px !important;   /* symmetrisch: oben=unten=links=rechts */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: none;
  margin: 0;
}
#year3000-gallery-module .sm-reihe::-webkit-scrollbar { display: none; }

/* Alle Filter-Karten werden Smartmenü-Karten (inkl. verschachtelte Collection-Wrapper) */
#year3000-gallery-module div.overflow-x-auto > button:not(#year3000-asset-detail-modal *),
#year3000-gallery-module div.overflow-x-auto > div:not(.sm-dots):not(#year3000-asset-detail-modal *),
#year3000-gallery-module .sm-karte {
  /* 3 Karten à 33.333% + 2 gaps à 8px = 100% (5.34px je Karte abziehen) */
  flex: 0 0 calc(33.333% - 5.34px);
  max-width: 240px;
  scroll-snap-align: center;
  background: linear-gradient(180deg, rgba(30,41,59,.85), rgba(15,23,42,.95));
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 9px 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s, transform .3s;
  touch-action: manipulation;
  user-select: none;
  white-space: normal;
  line-height: 1.25;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #E2E8F0;
  margin: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
}
#year3000-gallery-module div.overflow-x-auto > button:hover,
#year3000-gallery-module div.overflow-x-auto > div:not(.sm-dots):hover,
#year3000-gallery-module .sm-karte:hover {
  border-color: rgba(251,191,36,.5);
}
/* Textumbrüche NUR an ganzen Wörtern (kein Buchstaben-Brechen) */
#year3000-gallery-module .sm-karte,
#year3000-gallery-module .sm-ebene button {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}
/* Auswahl-Puls: kurze animierte Bestätigung der gewählten Karte */
#year3000-gallery-module .sm-karte.sm-puls,
#year3000-gallery-module div.overflow-x-auto > button.sm-puls {
  transform: scale(1.06);
  box-shadow: 0 0 14px var(--ak, rgba(251,191,36,.6));
}
/* Innen-Buttons der Collection-Wrapper: transparent machen */
#year3000-gallery-module div.overflow-x-auto > div:not(.sm-dots) > button:first-child {
  flex: 1;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* ---- Regenbogen-Farben (Zyklus) ---- */
#year3000-gallery-module div.overflow-x-auto > button:nth-child(8n+1),
#year3000-gallery-module div.overflow-x-auto > div:not(.sm-dots):nth-child(8n+1),
#year3000-gallery-module .sm-karte:nth-child(8n+1) { --ak: #FBBF24; } /* gold */
#year3000-gallery-module div.overflow-x-auto > button:nth-child(8n+2),
#year3000-gallery-module div.overflow-x-auto > div:not(.sm-dots):nth-child(8n+2),
#year3000-gallery-module .sm-karte:nth-child(8n+2) { --ak: #E879F9; } /* fuchsia */
#year3000-gallery-module div.overflow-x-auto > button:nth-child(8n+3),
#year3000-gallery-module div.overflow-x-auto > div:not(.sm-dots):nth-child(8n+3),
#year3000-gallery-module .sm-karte:nth-child(8n+3) { --ak: #A78BFA; } /* violett */
#year3000-gallery-module div.overflow-x-auto > button:nth-child(8n+4),
#year3000-gallery-module div.overflow-x-auto > div:not(.sm-dots):nth-child(8n+4),
#year3000-gallery-module .sm-karte:nth-child(8n+4) { --ak: #67E8F9; } /* cyan */
#year3000-gallery-module div.overflow-x-auto > button:nth-child(8n+5),
#year3000-gallery-module div.overflow-x-auto > div:not(.sm-dots):nth-child(8n+5),
#year3000-gallery-module .sm-karte:nth-child(8n+5) { --ak: #4ADE80; } /* gruen */
#year3000-gallery-module div.overflow-x-auto > button:nth-child(8n+6),
#year3000-gallery-module div.overflow-x-auto > div:not(.sm-dots):nth-child(8n+6),
#year3000-gallery-module .sm-karte:nth-child(8n+6) { --ak: #FB923C; } /* orange */
#year3000-gallery-module div.overflow-x-auto > button:nth-child(8n+7),
#year3000-gallery-module div.overflow-x-auto > div:not(.sm-dots):nth-child(8n+7),
#year3000-gallery-module .sm-karte:nth-child(8n+7) { --ak: #F472B6; } /* pink */
#year3000-gallery-module div.overflow-x-auto > button:nth-child(8n+8),
#year3000-gallery-module div.overflow-x-auto > div:not(.sm-dots):nth-child(8n+8),
#year3000-gallery-module .sm-karte:nth-child(8n+8) { --ak: #60A5FA; } /* blau */

/* ---- Aktive Karte: Farbe + Glow (Tailwind-Aktivklassen überschreiben) ---- */
#year3000-gallery-module div.overflow-x-auto > button[class*="bg-blue-600"],
#year3000-gallery-module div.overflow-x-auto > div[class*="bg-blue-600"],
#year3000-gallery-module div.overflow-x-auto > div[class*="bg-blue-600"] > button:first-child,
#year3000-gallery-module div.overflow-x-auto > button[class*="bg-fuchsia-600"],
#year3000-gallery-module .sm-karte[data-aktiv="1"] {
  background: color-mix(in srgb, var(--ak) 10%, #0F172A) !important;
  border-color: var(--ak) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--ak) 40%, transparent) !important;
  color: var(--ak) !important;
}

/* ---- SELECT-Dropdowns (Level, Farben) ausblenden, Karten-Reihen zeigen ---- */
#year3000-gallery-module select {
  display: none;
}

/* ---- Smartmenü-Karten-Reihen (vom JS erzeugt für Level/Farben) ---- */
#year3000-gallery-module .sm-reihe {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  padding: 10px 6px 12px;
  max-width: 1000px;
  margin: 0 auto;
  scrollbar-width: none;
}
#year3000-gallery-module .sm-reihe::-webkit-scrollbar { display: none; }

/* ============================================================
   VERTIKALER SMARTMENÜ-STACK (Chorus-Prinzip)
   Nur EIN Menü sichtbar – Wischen nach oben/unten wechselt
   fließend. Unendlich erweiterbar (einfach neue Ebene anhängen).
   Schmaler als das Hauptmenü → als Untermenü sofort erkennbar.
   ============================================================ */
#year3000-gallery-module .sm-stack {
  /* Smartmenü-Karussell (29.08.): 1 Filtermenü sichtbar, darin 3 Knöpfe (33% je).
     Höhe setzt die JS (inline, React-resistent via Observer) – hier nur auto (30.08.) */
  height: auto; /* 1 Ebene – gewinnt gegen React-inline (29.08.) */
  position: relative;
  overflow: hidden !important;
  scroll-snap-type: none !important;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 !important;
  max-width: min(88%, 400px);
  margin: 0 auto;
  transition: height .35s ease;
}
/* Dots-Leiste unter der Filtermenü: 95% der sichtbaren Breite, zentriert (30.08.)
   Alle Filtermenüs haben die gleiche Struktur – eine Leiste unter dem Stack. */
#year3000-gallery-module .sm-ebene .sm-karte,
#year3000-gallery-module .sm-ebene button:not(.sm-dot):not(.sm-tab) {
  font-size: 13px !important; /* Titel passen in die 30%-Zellen (LEVEL TREASURE!) (30.08.) */
  transform: none !important; /* React-Animation vergrößert den Knopf (scale!) → Kanten würden abgeschnitten (30.08.) */
}
#year3000-gallery-module .sm-ebene .sm-dots,
#year3000-gallery-module .sm-ebene [class*="dot"] {
  display: none !important;              /* React-Dots in den Ebenen KOMPLETT unsichtbar (30.08.) */
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* sm-stack-dots: React rendert sie periodisch neu – physisch 0x0 + unsichtbar (30.08.) */
#year3000-gallery-module .sm-stack-dots,
#year3000-gallery-module .sm-stack-dots * {
  width: 0px !important;
  height: 0px !important;
  min-width: 0px !important;
  min-height: 0px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#year3000-gallery-module .sm-ebene {
  scrollbar-width: none !important;      /* Firefox: Scrollbar unsichtbar (30.08.) */
  -ms-overflow-style: none !important;   /* IE/Edge alt (30.08.) */
}
/* Vertikale Dots-Leiste: 1 Dot je SICHTBARES Filtermenü (TYPE, LEVEL, COLOR) (30.08.) */
#year3000-gallery-module .sm-vert-dots {
  position: absolute !important;
  left: 2px !important;   /* Parent startet bei x=12 → ergibt exakt x=14 (alte Position!) (30.08.) */
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  z-index: 20 !important;
}
#year3000-gallery-module .sm-vert-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 9999px !important;
  background: rgba(148, 163, 184, 0.45) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: background 0.3s, box-shadow 0.3s !important;
}
#year3000-gallery-module .sm-vert-dot.aktiv {
  background: #fcd34d !important;
  box-shadow: 0 0 6px rgba(252, 211, 77, 0.6) !important;
}
#year3000-gallery-module .sm-ebene::-webkit-scrollbar {
  display: none !important;              /* Chrome/Safari/Brave: Scrollbar unsichtbar (30.08.) */
}
/* Dots-Leiste unter der Filtermenü: 95% der sichtbaren Breite, zentriert – MUSS BLEIBEN (Filteroptionen-Übersicht!) (30.08.) */
#year3000-gallery-module .sm-dots-leiste {
  width: 95%;
  margin: 8px auto 20px !important; /* 20px Abstand nach unten zur ersten SFT-Karte (30.08.) */
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
#year3000-gallery-module .sm-dots-leiste .sm-dots {
  /* display steuert die JS: nur AKTIVE Gruppe sichtbar (inline !important) (30.08.) */
  flex-direction: row !important; /* React setzt flex-col (vertikal) – hier horizontal (30.08.) */
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Container in jeder Ebene: volle Breite für das Knopf-Karussell (30.08.)
   justify-content NICHT zentrieren – die Knöpfe scrollen von links (3 sichtbar à 33%) */
#year3000-gallery-module .sm-ebene > div:not(.sm-dots) {
  width: auto !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important; /* React-Padding (10px) entfernen (30.08.) */
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0 !important; /* exakt 33/33/33 ohne Lücken (30.08.) */
}
#year3000-gallery-module .sm-ebene {
  height: 105px !important;
  min-height: 105px !important;
  max-height: 105px !important;
  margin: 0 !important; /* React space-y-Margins entfernen (29.08.) */
  padding: 0 !important; /* React-Paddings (12px) entfernen – Knöpfe exakt 33/33/33 (30.08.) */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#year3000-gallery-module .sm-ebene::-webkit-scrollbar { display: none; }
/* Einheitsgrößen: Jeder Knopf im Smartmenü gleiche Höhe – so hoch wie die
   längste Filteroption mit dem längsten Text (30.08.). JS misst + gleicht an.
   Breiten setzt die JS als feste px (1/3 der Ebene).
   Lesbarkeit (30.08.): 14px Schrift, Text bricht um statt abgeschnitten, zentriert. */
#year3000-gallery-module .sm-ebene .sm-karte,
#year3000-gallery-module .sm-ebene button:not(.sm-dot):not(.sm-tab) {
  flex: 0 0 auto !important;
  height: auto;
  min-height: 48px;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  text-align: center !important;
  padding: 6px 4px !important;
}
/* Tab-Leiste des Smartmenü-Karussells (29.08.) */
#year3000-gallery-module .sm-tabs {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  max-width: min(88%, 400px);
  margin: 0 auto;
}
#year3000-gallery-module .sm-tabs::-webkit-scrollbar { display: none; }
#year3000-gallery-module .sm-tab {
  flex: 0 0 33.333%;
  scroll-snap-align: center;
  padding: 12px 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  background: transparent;
  color: #94a3b8;
  border: 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  cursor: pointer;
}
/* ============================================================
   UNNÖTIGE ELEMENTE AUSBLENDEN (Smartmenü-Definition):
   Dropdowns + Titel-Labels + Hinweiszeilen gehören nicht dazu.
   display:none !important – React-Re-Renders können das nicht
   überschreiben (die SELECTs bleiben funktional für die
   sm-karten: value + change-Event laufen weiter!). 
   ============================================================ */
#root #year3000-gallery-module .sm-stack select,
#root #year3000-gallery-module .sm-stack label {
  display: none !important;
}
#root #year3000-gallery-module .sm-stack .sm-ebene > div[class*="justify-between"] {
  display: none !important;
}

/* SYMMETRIE AUSSEN: Abstand unter der Box = Abstand über der Box (14px).
   Das Ergebnis-Grid klebte vorher direkt an der Box (space-y-6 = 0). */
#year3000-gallery-module .sm-stack + * {
  margin-top: 14px !important;
}
#year3000-gallery-module .sm-stack::-webkit-scrollbar { display: none; }
#year3000-gallery-module .sm-stack .sm-ebene {
  height: auto;
  scroll-snap-align: start;
  overflow: visible;
  /* Ebenen im grid (Level/Farben/Override) vertikal stapeln statt 3 Spalten */
  grid-column: 1 / -1;
  /* SYMMETRISCHE Abstände zur Box: oben (Titel-Luft) = unten (Dots-Luft) */
  padding: 12px 0;
  margin-top: 0 !important;   /* space-y-4-Lücken der Card raus – Ebenen bündig */
}
/* Innere React-Margins neutralisieren: der Abstand kommt NUR vom Ebenen-Padding */
#year3000-gallery-module .sm-stack .sm-ebene > *:first-child { margin-top: 0 !important; }
#year3000-gallery-module .sm-stack .sm-ebene > *:last-child { margin-bottom: 0 !important; }
#year3000-gallery-module .sm-stack .sm-ebene::-webkit-scrollbar { display: none; }

/* ---- Suchleiste: EIGENE Box AUSSERHALB des Smartmenüs ---- */
#year3000-gallery-module .sm-suche-box {
  position: relative;
  z-index: 30;
  max-width: min(88%, 400px);
  margin: 0 auto 14px;
  background: #0F172A;
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 6px 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#year3000-gallery-module .sm-suche-box .sm-suche {
  width: 100%;
}
#year3000-gallery-module .sm-suche-box input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 12px !important;
  letter-spacing: .5px;
  width: 100%;
  /* Links 36px Luft für das absolute Lupe-Icon (endet bei 28px) –
     sonst überlagert der Platzhalter das Suchsymbol */
  padding: 12px 4px 12px 36px !important;
}

/* ---- Galerie-Header-Logo: Abstand OBEN = UNTEN (21px wie Box-Padding) ----
   Die Kopf-Zeile stapelt auf Mobile (Logo über Text) – row-gap macht
   den Abstand Logo→Text identisch zum Box-Padding oben. */
#year3000-gallery-module [class*="flex items-center space-x-3"] {
  row-gap: 21px;
}
#year3000-gallery-module .sm-stack .sm-ebene[class*="space-y-2"] > * + * {
  margin-top: 14px !important;
}

/* ---- Infotexte gehören AUSSERHALB der Menü-Box: in den Ebenen ausblenden,
   der Funktionstitel bleibt zentriert in der oberen Zeile ---- */
#year3000-gallery-module .sm-stack .sm-ebene [class*="text-slate-500"] {
  display: none !important;
}
#year3000-gallery-module .sm-stack .sm-ebene [class*="justify-between"] {
  justify-content: center !important;
}

/* ---- ALLE Funktionstitel der 5 Menüs: zentriert MITTIG in der oberen
   Zeile (nicht nur der sichtbaren Ebene) ---- */
#year3000-gallery-module .sm-stack .sm-ebene label[class*="text-slate-400"] {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}
/* Titel-Icon (Cube) ausblenden – der TEXT sitzt dann exakt mittig */
#year3000-gallery-module .sm-stack .sm-ebene [class*="font-bold"][class*="flex"] > svg {
  display: none !important;
}

/* ---- Info-Zeile VOR dem Smartmenü (eigene Zeile außerhalb) ----
   Abstand zur Box = 14px (symmetrisch zum Abstand Box->Ergebnis) */
#year3000-gallery-module .sm-info {
  max-width: 88%;
  margin: 0 auto 14px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .5px;
  line-height: 1.5;
  color: #64748B;
  font-family: ui-monospace, monospace;
}

/* ---- Positions-Punkte: VERTIKAL LINKS vom Smartmenü ----
   REACT-SICHER: Die Card wird NIE verschoben – die Punkte hängen
   am Modul (appendChild) und werden per JS links neben der Box
   positioniert (left/top/height kommen aus dem Skript). */
#year3000-gallery-module {
  position: relative;          /* Anker für die absoluten Punkte */
}
#year3000-gallery-module .sm-stack-dots {
  display: flex;             /* WICHTIG: ohne flex wirkt column nicht! */
  position: absolute;
  flex-direction: column;
  justify-content: flex-start;   /* dicht beieinander, nicht über die Höhe gespreizt */
  align-items: center;
  gap: 8px;                  /* enger Punkt-Abstand */
  padding: 6px 0;
  z-index: 5;
}
#year3000-gallery-module .sm-stack-dots .sm-dot {
  width: 6px;                /* so klein wie möglich … */
  height: 6px;
  border: 1px solid var(--ak);          /* … aber deutlich sichtbar: kräftiger Rand */
  background: color-mix(in srgb, var(--ak) 35%, #1E293B);
}
#year3000-gallery-module .sm-stack-dots .sm-dot[data-aktiv="1"] {
  background: var(--ak);
  border-color: var(--ak);
  box-shadow: 0 0 8px var(--ak);
  transform: scale(1.4);
}

/* Ziehen mit der Maus: Cursor + keine Textauswahl */
#year3000-gallery-module .sm-stack.sm-drag {
  cursor: grabbing;
  user-select: none;
}
#year3000-gallery-module .sm-stack.sm-bereit {
  cursor: grab;
}

/* ---- Klickbare Aktiv-Punkte (Chorus-Dots): kein eigenes Padding –
   das Ebenen-Padding (12px) sorgt für den symmetrischen Boden-Abstand ---- */
#year3000-gallery-module .sm-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0;
}
#year3000-gallery-module .sm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ak) 35%, #1E293B);
  border: 1px solid var(--ak);
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .2s;
  touch-action: manipulation;
  padding: 0;
}
#year3000-gallery-module .sm-dot[data-aktiv="1"] {
  background: var(--ak);
  border-color: var(--ak);
  box-shadow: 0 0 8px var(--ak);
  transform: scale(1.3);
}

/* ===== FÜLLENDE DARSTELLUNG + GLEICHE PROPORTIONEN =====
   Vorschau-Karten und Detail-Fenster: 1:1-Quadrate, Inhalte füllen
   den Rahmen (object-cover) – beide Fenster im selben Seitenverhältnis. */
#year3000-gallery-module div[class*="h-36"],
#year3000-gallery-module div[class*="h-56"] {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}
#year3000-gallery-module div[class*="h-36"] img,
#year3000-gallery-module div[class*="h-56"] img,
#year3000-gallery-module .fixed img {
  object-fit: cover !important;
}

/* Symbole als Text: 10px -> 12px (29.08.) */
#year3000-gallery-module .sm-ebene button {
  font-size: 12px !important;
}

/* Header: Logo-Zeile auf Logo-Höhe fixieren + 5px links (29.08.) */
#pylon-fractal-header .flex.flex-col {
  height: 36px !important;
  max-height: 36px !important;
  overflow: hidden !important;
  padding-left: 5px !important;
}

/* Header: 5px Abstand unter dem Logo – Nav darunter (29.08.) */
#pylon-fractal-header nav {
  margin-top: 5px !important;
  padding-top: 0 !important;
}

/* Header: Abstand über dem Logo entfernen (29.08.) */
#pylon-fractal-header .hub-bluna-logo-img,
#pylon-fractal-header .hub-bluna-logo-img img {
  margin-top: 0 !important;
}

/* Header: per Wischen nach oben weg / nach unten wieder rein (29.08.) */
#pylon-fractal-header {
  transition: transform 0.35s ease, top 0.35s ease !important;
}
#pylon-fractal-header.bluna-header-weg {
  transform: translateY(-105%);
}
/* Logo bleibt sichtbar, wenn der Header weg ist (30.08.) – via JS-Klon (transform-Falle umgangen!) */
#bluna-logo-fixed {
  display: none;
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  z-index: 9999;
  cursor: pointer;
}
/* Dienste: Detail-Seite (animiert eingeflogen!) */
/* ============================================
   A.I.O.S.-FENSTER-DESIGN (aus wheel12 – ORIGINAL-Code!)
   Die Werte stammen DIREKT aus dem Original-Bundle
   (index-DFDz72HF.css + DOM-Inline-Styles) – KEIN Nachbau!
   
   ORIGINAL-KLASSEN der Box (aus index-DFDz72HF.css):
   .relative{position:relative}
   .w-[94%]{width:94%}
   .h-[94%]{height:94%}
   .rounded-b-[20px]{border-bottom-right-radius:20px;border-bottom-left-radius:20px}
   .overflow-hidden{overflow:hidden}
   .flex{display:flex}
   .flex-col{flex-direction:column}
   .mx-auto{margin-inline:auto}
   
   ORIGINAL-INLINE-STYLE der Box (aus dem DOM):
   background: rgba(8,8,8,0.55);
   backdrop-filter: blur(24px) saturate(120%);
   border-width: medium 3px 3px;
   border-style: none solid solid;
   border-color: currentcolor rgba(255,255,255,0.95) rgba(255,255,255,0.95);
   box-shadow: rgba(0,0,0,0.6) 0px 0px 90px, rgba(255,255,255,0.5) 0px 0px 60px;
   ============================================ */
#dienste-detail {
  position: fixed;
  top: 3%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 94%;
  height: 94%;
  margin: 0 auto;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  background: rgba(8, 8, 8, 0.55);
  color: #fff;
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border-style: none solid solid;
  border-width: medium 3px 3px;
  border-color: currentcolor rgba(255, 255, 255, 0.95) rgba(255, 255, 255, 0.95);
  box-shadow: rgba(0, 0, 0, 0.95) 0px 0px 120px, rgba(0, 0, 0, 1) 0px 0px 50px, rgba(0, 0, 0, 1) 0px 0px 18px, rgba(255, 255, 255, 0.5) 0px 0px 60px;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
  z-index: 9998;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#dienste-detail.offen {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0s;
}
/* ============================================
   A.I.O.S.-FENSTER-DESIGN (NUR Detail-Seite!)
   Nur die inneren Elemente – die Öffnungs-Mechanik bleibt!
   ============================================ */
#dienste-detail .aios-hintergrund {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='56' height='97' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23ffffff' stroke-width='0.5'/%3E%3Cpath d='M28 0L28 -34' fill='none' stroke='%23ffffff' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 42px 72.75px;
  opacity: 0.1;
}
#dienste-detail .aios-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(50, 150, 255, 0.1) 0%, transparent 60%);
  opacity: 0.2;
}
#dienste-detail .aios-balken {
  position: sticky;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, rgb(255, 0, 0), rgb(255, 127, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255));
  z-index: 5;
}
#dienste-detail .aios-detail-kopf {
  position: relative;
  z-index: 2;
  padding: 16px 18px 10px;
  text-align: center;
}
#dienste-detail .aios-detail-wrap {
  position: relative;
  z-index: 2;
  padding: 0 18px 18px;
  text-align: center;
}
#dienste-detail .aios-detail-symbol {
  font-size: 52px;
  margin: 10px 0 4px;
  filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 10px rgba(139, 92, 246, 0.4));
}
#dienste-detail .aios-detail-status {
  font-size: 11px;
  letter-spacing: 3px;
  color: #fcd34d;
  margin-bottom: 6px;
  font-family: monospace;
  text-shadow: 0 0 2px #000, 0 0 8px rgba(252, 211, 77, 0.4);
}
#dienste-detail .aios-detail-titel {
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: clamp(1.25rem, 4vh, 1.875rem);
  letter-spacing: 0.1em;
  text-align: center;
  margin: 0 0 8px;
  text-shadow: rgba(0, 0, 0, 0.9) 0px 0px 1px, rgba(0, 0, 0, 0.9) 0px 0px 1px, rgba(0, 0, 0, 0.9) 0px 0px 1px, rgba(0, 0, 0, 0.7) 0px 0px 2px, rgba(0, 0, 0, 0.7) 0px 0px 2px, rgba(0, 0, 0, 0.5) 0px 0px 2px;
}
#dienste-detail .aios-detail-sub {
  color: #94a3b8;
  font-size: 13px;
  margin-bottom: 16px;
  font-family: monospace;
}
#dienste-detail .aios-detail-text {
  color: #e2e8f0;
  font-size: 14px;
  line-height: 1.7;
  font-family: monospace;
  text-align: center;
  padding: 6px 0 2px;
}
#dienste-detail .aios-detail-detail {
  margin-top: 16px;
  color: #64748b;
  font-size: 12px;
  font-family: monospace;
  text-align: center;
}
/* Dienste-Bibliothek: 5x7-Raster + Logoboxen (Apple-Stil, 30.08.) */
#dienste-raster {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(76px, auto);
  gap: 10px;
  padding: 14px 16px;
  max-width: 640px;
  margin: 14px auto 0;
}
.sd-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  gap: 6px;
}
.sd-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.2s ease;
}
@property --w {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes glitzerRand {
  to { --w: 360deg; }
}
.sd-kachel:active .sd-box { transform: scale(0.9); }
.sd-name {
  color: #cbd5e1;
  font-size: 9px;
  font-family: monospace;
  text-align: center;
  line-height: 1.25;
  max-width: 60px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 2px 3px;
}
/* Individuelle Highlights + animierter Glitzer-Rand DIREKT auf der Randlinie (2px!) */
.sd-blau {
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #3B82F6, #1D4ED8) padding-box,
    conic-gradient(from var(--w), transparent 0deg, #fff 55deg, transparent 120deg, transparent 180deg, #fff 235deg, transparent 300deg) border-box;
  animation: glitzerRand 2.8s linear infinite;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
}
.sd-gold {
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #FCD34D, #F59E0B) padding-box,
    conic-gradient(from var(--w), transparent 0deg, #fff 55deg, transparent 120deg, transparent 180deg, #fff 235deg, transparent 300deg) border-box;
  animation: glitzerRand 2.8s linear infinite;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
}
.sd-lila {
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #8B5CF6, #6D28D9) padding-box,
    conic-gradient(from var(--w), transparent 0deg, #fff 55deg, transparent 120deg, transparent 180deg, #fff 235deg, transparent 300deg) border-box;
  animation: glitzerRand 2.8s linear infinite;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
}
.sd-gruen {
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #10B981, #047857) padding-box,
    conic-gradient(from var(--w), transparent 0deg, #fff 55deg, transparent 120deg, transparent 180deg, #fff 235deg, transparent 300deg) border-box;
  animation: glitzerRand 2.8s linear infinite;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
}
/* Header: Suchfeld 90% + ✕ 8% in EINER Zeile, vertikal zentriert (31.08.) */
.dienste-header {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 -16px 0;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2%;
  padding: 5px;
}
#dienste-suchleiste {
  width: 80%;
  max-width: 320px;
  padding: 0;
  background: transparent;
  display: flex;
  justify-content: center;
}
#dienste-suchfeld {
  width: 100%;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #e2e8f0;
  border-radius: 24px;
  padding: 11px 18px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
#dienste-suchfeld:focus { border-color: #fcd34d; }
/* Dienste-Bibliothek: 5x7-Raster + Logoboxen (Apple-Stil, 30.08.) */
#dienste-raster {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(76px, auto);
  gap: 10px;
  padding: 14px 16px;
  max-width: 640px;
  margin: 14px auto 0;
}
.sd-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  gap: 6px;
}
.sd-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.2s ease;
}
@property --w {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes glitzerRand {
  to { --w: 360deg; }
}
.sd-kachel:active .sd-box { transform: scale(0.9); }
.sd-name {
  color: #cbd5e1;
  font-size: 9px;
  font-family: monospace;
  text-align: center;
  line-height: 1.25;
  max-width: 60px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 2px 3px;
}
/* Individuelle Highlights + animierter Glitzer-Rand DIREKT auf der Randlinie (2px!) */
.sd-blau {
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #3B82F6, #1D4ED8) padding-box,
    conic-gradient(from var(--w), transparent 0deg, #fff 55deg, transparent 120deg, transparent 180deg, #fff 235deg, transparent 300deg) border-box;
  animation: glitzerRand 2.8s linear infinite;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
}
.sd-gold {
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #FCD34D, #F59E0B) padding-box,
    conic-gradient(from var(--w), transparent 0deg, #fff 55deg, transparent 120deg, transparent 180deg, #fff 235deg, transparent 300deg) border-box;
  animation: glitzerRand 2.8s linear infinite;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
}
.sd-lila {
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #8B5CF6, #6D28D9) padding-box,
    conic-gradient(from var(--w), transparent 0deg, #fff 55deg, transparent 120deg, transparent 180deg, #fff 235deg, transparent 300deg) border-box;
  animation: glitzerRand 2.8s linear infinite;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
}
.sd-gruen {
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #10B981, #047857) padding-box,
    conic-gradient(from var(--w), transparent 0deg, #fff 55deg, transparent 120deg, transparent 180deg, #fff 235deg, transparent 300deg) border-box;
  animation: glitzerRand 2.8s linear infinite;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
}
/* Header: Suchfeld 90% + ✕ 8% in EINER Zeile, vertikal zentriert (31.08.) */
.dienste-header {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 -16px 0;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2%;
  padding: 5px;
}
#dienste-suchleiste {
  width: 80%;
  max-width: 320px;
  padding: 0;
  background: transparent;
  display: flex;
  justify-content: center;
}
#dienste-suchfeld {
  width: 100%;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #e2e8f0;
  border-radius: 24px;
  padding: 11px 18px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
#dienste-suchfeld:focus { border-color: #fcd34d; }
/* Dienste-Panel (von unten eingeflogen!) – Highlightbox-Prinzip (30.08.) */
#dienste-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: rgba(180, 140, 255, 1);
  background-image:
    url("/hexagons.svg?v=2"),
    radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 1) 85%),
    linear-gradient(135deg, #5B1FA8 0%, #B48CFF 22%, #E55DB4 48%, #4FC3F7 74%, #B48CFF 100%);
  background-size: 200%, 100% 100%, 300% 300%;
  background-position: center center, center center, 0% 50%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  transform: translateY(100%);
  transition: transform 0.4s ease-in-out;
  z-index: 9998;
  overflow-y: auto;
  padding: 0 16px 0;
  box-sizing: border-box;
}
/* Passive Animation (Performance-Doktrin: erst bei Interaktion!) */
#dienste-panel:hover,
#dienste-panel:active,
#dienste-panel:focus {
  animation: bluna-aurora 9s ease-in-out infinite;
}
/* Vignette (Inset – wie Highlightbox!) – UNTER allen Inhalten! */
#dienste-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.95);
  pointer-events: none;
}
#dienste-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.95) 100%);
  pointer-events: none;
}
/* ✕ bleibt über allem (z-index!) – Suchleiste hat 9999! */
#dienste-panel-zu { z-index: 2; }
#dienste-panel.offen { transform: translateY(0); }
#dienste-panel-zu {
  width: 36px;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1E293B;
  color: #fcd34d;
  border: 1px solid #334155;
  font-size: 16px;
  z-index: 9999;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
#dienste-panel-zu.offen { opacity: 1; pointer-events: auto; }
/* Tabs: ohne Umrandung + Leuchtpunkte + Regenbogen-Linie + scrollbar (30.08.) */
#dienste-tabs {
  position: sticky;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 -16px 0;
  padding: 8px 16px 14px;
  background: #000000;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  z-index: 6;
}
#dienste-tabs::-webkit-scrollbar { display: none; }
.dt-tab {
  background: none;
  border: none;
  box-shadow: none;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  padding: 6px 4px;
  transition: color 0.25s ease;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
.dt-tab.dt-aktiv {
  color: #ffffff;
  background: none;
  box-shadow: none;
  border: none;
}
.dt-punkt {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.dt-linie {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0088, #ff0000);
  background-size: 200% 100%;
  animation: dtRegenbogen 3s linear infinite;
  border-radius: 2px;
}
@keyframes dtRegenbogen {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
#dienste-zurueck {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  background: #1E293B;
  border: 1px solid #334155;
  color: #fcd34d;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateX(40px);
  transition: all 0.3s ease;
}
#dienste-zurueck.offen {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* Hauptmenü: Modul-Knöpfe gleichmäßig über die Seitenbreite verteilen (29.08.) */
#pylon-fractal-header nav {
  justify-content: space-between;
}

/* Hauptmenü: Modul-Nummer unten zentriert am Knopf (29.08.) */
#year3000-gallery-module button.relative > span.absolute {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: -9px !important;
  transform: translateX(-50%) !important;
}

/* Modul-Symbole: auf 30px vergrößern (29.08.) */
#pylon-fractal-header button.relative svg {
  width: 30px !important;
  height: 30px !important;
}

/* Purge-Buttons (✕) im Smartmenü ausblenden – versehentliches Purgen verhindern (29.08.) */
#year3000-gallery-module .sm-ebene button[class*="text-rose-400"] {
  display: none !important;
}

/* Symbol + Symbolbox aus ALLEN Modul-Köpfen entfernen – GLOBAL (30.08.) */
div[class*="p-2.5 rounded-lg bg-fuchsia-950/80"] {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* Generisch: Symbolbox als direktes Kind der Modul-Kopf-Zeile entfernen (30.08.) */
div[class*="flex items-center space-x-3"] > div[class*="rounded"]:not([class*="w-9"]) {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* Symbole OHNE Box in den Modul-Kopf-Zeilen entfernen – alle svg (div ODER h2!) (30.08.) */
[class*="flex items-center space-x-2"] svg,
[class*="flex items-center space-x-3"] svg {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* (Navigations-Icons BLEIBEN – die Aufgabe betrifft nur die Modul-Symbolboxen!) (30.08.) */

/* Modul 15: Symbolbox (w-7 h-7) in der Featurebox entfernen (30.08.) */
div[class*="w-7 h-7 rounded-lg flex items-center justify-center shrink-0"] {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Modul 18: Symbolboxen (p-3 bg-*-950/50) in der Featurebox entfernen (30.08.) */
div[class*="bg-cyan-950/50 border border-cyan-500/30 rounded-lg"],
div[class*="bg-amber-950/50 border border-amber-500/30 rounded-lg"],
div[class*="bg-fuchsia-950/50 border border-fuchsia-500/30 rounded-lg"],
div[class*="bg-emerald-950/50 border border-emerald-500/30 rounded-lg"] {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Featurebox: kleine Symbole/Texte auf 12px vergrößern (29.08.) */
#year3000-gallery-module div[class*="bg-[#0F172A]"] [class*="text-[10px]"],
#year3000-gallery-module div[class*="bg-[#0F172A]"] span[class*="text-[10px]"] {
  font-size: 12px !important;
}

/* ============================================
   KERNSCHATTEN: 3-fach verschachtelt (Schwarz!)
   für alle Symbole + Texte im Service-Bibliothek
   ============================================ */
#dienste-panel .sd-name,
#dienste-panel .sd-status,
#dienste-panel .dt-tab,
#dienste-panel #dienste-suchfeld {
  text-shadow: 0 0 2px #000, 0 0 6px #000, 0 0 14px rgba(0, 0, 0, 1);
}
/* SYMBOLE: Android-Emojis (NotoColorEmoji!) ignorieren text-shadow –
   NUR filter: drop-shadow beschattet Emoji-Glyphen (Kernschatten!) */
#dienste-panel .sd-box .sd-ico {
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 6px #000) drop-shadow(0 0 14px rgba(0, 0, 0, 1));
}